/* _content/ErpPowergest/Presentation/Almacenes/Almacenes/Components/AlmacenNuevoModal.razor.rz.scp.css */
.alm-modal-backdrop[b-awdnzhvxsf] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.alm-modal-card[b-awdnzhvxsf] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.alm-modal-card .material-symbols-outlined[b-awdnzhvxsf] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.alm-modal-header[b-awdnzhvxsf] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.alm-modal-title[b-awdnzhvxsf] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.alm-modal-subtitle[b-awdnzhvxsf] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.alm-modal-body[b-awdnzhvxsf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alm-modal-info-box[b-awdnzhvxsf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.alm-modal-info-icon[b-awdnzhvxsf] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.alm-modal-info-title[b-awdnzhvxsf] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.alm-modal-info-text[b-awdnzhvxsf] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.alm-modal-field[b-awdnzhvxsf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.alm-modal-label[b-awdnzhvxsf] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.alm-modal-input[b-awdnzhvxsf] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .alm-modal-input[b-awdnzhvxsf]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .alm-modal-input:focus[b-awdnzhvxsf] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* Conmutador "Almacén activo": casilla + texto descriptivo en una tarjeta. */
.alm-modal-toggle[b-awdnzhvxsf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

.alm-modal-toggle input[type="checkbox"][b-awdnzhvxsf] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.alm-modal-toggle span[b-awdnzhvxsf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alm-modal-toggle strong[b-awdnzhvxsf] {
    font-size: 13px;
    font-weight: 850;
    color: #0f172a;
}

.alm-modal-toggle small[b-awdnzhvxsf] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.alm-modal-actions[b-awdnzhvxsf] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que FamiliaNuevaModal (sin animaciones de traslación en hover). */
.btn[b-awdnzhvxsf] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-awdnzhvxsf] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-awdnzhvxsf] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-awdnzhvxsf] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-awdnzhvxsf] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-awdnzhvxsf] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-awdnzhvxsf] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-awdnzhvxsf] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .alm-modal-backdrop[b-awdnzhvxsf] {
        padding: 0;
    }

    .alm-modal-card[b-awdnzhvxsf] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Almacenes/Almacenes/Pages/AlmacenDetallePage.razor.rz.scp.css */
.tc-page[b-dy2f175hxx],
.tc-page *[b-dy2f175hxx],
.tc-page *[b-dy2f175hxx]::before,
.tc-page *[b-dy2f175hxx]::after {
    box-sizing: border-box;
}

.tc-page[b-dy2f175hxx] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: tcPageIn-b-dy2f175hxx 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

/* Cabecera de la pagina: titulo/subtitulo a la izquierda y CommandBar a la derecha. Es el contenedor
   que mide el CommandBar para su desbordamiento (su «host»): titulo y barra son hermanos directos.
   Siempre en una fila (nunca apila): el CommandBar se repliega a «···» antes de saltar de linea. */
.tc-header[b-dy2f175hxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de titulo: tiene prioridad de ancho (no cede), asi el CommandBar se repliega primero.
   Solo cede como ultimo recurso, cuando la barra ya esta replegada (command-bar-host-collapsed). */
.tc-heading[b-dy2f175hxx] {
    min-width: 0;
    flex: 0 0 auto;
}

    .tc-header.command-bar-host-collapsed .tc-heading[b-dy2f175hxx] {
        flex: 1 1 auto;
    }

.tc-title[b-dy2f175hxx] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Ultimo recurso: con la barra replegada y aun sin caber, el titulo cede y envuelve. */
    .tc-header.command-bar-host-collapsed .tc-title[b-dy2f175hxx] {
        white-space: normal;
    }

.tc-subtitle[b-dy2f175hxx] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Tope de ancho para que el subtitulo no haga crecer la cabecera y deje sitio al CommandBar. */
    max-width: clamp(420px, 48vw, 620px);
}

.tc-panel-actions[b-dy2f175hxx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* CommandBar de la cabecera: conserva su ancho natural (no se encoge) y se alinea a la derecha; se
   repliega (icono -> «···») en lugar de saltar de linea. Usa el estilo por defecto del componente
   (botones compactos icono+texto), igual que en la pagina de Clientes. */
.tc-header[b-dy2f175hxx]  .tc-cmdbar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* PANEL GENERAL */

.card-panel[b-dy2f175hxx] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* TABS */

.tc-tabs-panel[b-dy2f175hxx] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

/* Pestañas: la barra (rail, scroll horizontal y flechas) la aporta <ScrollableTabs>; aquí solo se
   estilan los botones de pestaña, con el mismo aspecto que la ficha de artículo (subrayado azul en
   la activa, sin pastilla ni movimiento). Se alcanzan vía ::deep porque SfButton renderiza su propio
   <button> dentro del componente. */
.tc-tabs-panel[b-dy2f175hxx]  .articulo-tab-btn {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    padding: 0 6px;
    margin-bottom: -1px;        /* el subrayado solapa el rail de 1px */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.16s ease, border-color 0.16s ease;
}

    .tc-tabs-panel[b-dy2f175hxx]  .articulo-tab-btn:hover {
        background: transparent;
        color: #334155;
    }

    .tc-tabs-panel[b-dy2f175hxx]  .articulo-tab-btn.active {
        color: #1d4ed8;
        border-bottom-color: #2563eb;   /* subrayado azul de la activa */
        font-weight: 800;
    }

    .tc-tabs-panel[b-dy2f175hxx]  .articulo-tab-btn:focus-visible {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

.tc-tab-content[b-dy2f175hxx] {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TITULOS */

.tc-panel-header[b-dy2f175hxx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.tc-panel-title[b-dy2f175hxx] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.tc-panel-subtitle[b-dy2f175hxx] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* FORMULARIOS */

.tc-config-grid[b-dy2f175hxx],
.tc-codes-grid[b-dy2f175hxx],
.tc-articles-layout[b-dy2f175hxx] {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 12px;
    overflow: hidden;
}

.tc-config-grid[b-dy2f175hxx] {
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
}

.tc-codes-grid[b-dy2f175hxx] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-articles-layout[b-dy2f175hxx] {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.tc-form-card[b-dy2f175hxx],
.tc-side-panel[b-dy2f175hxx] {
    min-width: 0;
    min-height: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
    overflow: hidden;
}

.tc-card-title[b-dy2f175hxx] {
    margin: 0 0 10px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.tc-fields-grid[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tc-field[b-dy2f175hxx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-field-full[b-dy2f175hxx] {
    grid-column: 1 / -1;
}

.tc-field label[b-dy2f175hxx] {
    font-size: 12px;
    font-weight: 750;
    color: #4b5563;
}

.tc-field small[b-dy2f175hxx] {
    font-size: 11px;
    color: #8b95a7;
    line-height: 1.3;
}

.tc-input[b-dy2f175hxx],
.tc-select[b-dy2f175hxx] {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tc-select[b-dy2f175hxx] {
    cursor: pointer;
}

    .tc-input:focus[b-dy2f175hxx],
    .tc-select:focus[b-dy2f175hxx] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    /* Un campo apagado tiene que NOTARSE (FUN-564). Sin esto se ve igual que uno vivo: los tres del
       nivel 2 con «1 nivel» parecían editables y solo se descubría al intentar escribir. Misma
       lección que FUN-418 en Correo, tercera pantalla donde aparece. */
    .tc-input:disabled[b-dy2f175hxx],
    .tc-select:disabled[b-dy2f175hxx] {
        background: #f3f4f6;
        border-color: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
    }

    .tc-field:has(.tc-input:disabled) > label[b-dy2f175hxx],
    .tc-field:has(.tc-select:disabled) > label[b-dy2f175hxx] {
        color: #9ca3af;
    }

/* CHECKS / AYUDAS */

.tc-check-card[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
}

    .tc-check-card input[b-dy2f175hxx] {
        width: 17px;
        height: 17px;
        margin-top: 2px;
        accent-color: #2563eb;
    }

    .tc-check-card span[b-dy2f175hxx] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .tc-check-card strong[b-dy2f175hxx] {
        font-size: 13px;
        color: #1d4ed8;
        font-weight: 900;
    }

    .tc-check-card small[b-dy2f175hxx] {
        font-size: 12px;
        color: #4b5563;
        line-height: 1.4;
    }

.tc-help-box[b-dy2f175hxx],
.tc-warning-box[b-dy2f175hxx],
.tc-empty-box[b-dy2f175hxx] {
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.tc-help-box[b-dy2f175hxx] {
    margin-top: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.tc-warning-box[b-dy2f175hxx] {
    margin-top: 12px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-weight: 750;
}

.tc-empty-box[b-dy2f175hxx] {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

/* TABLAS C�DIGOS */

.tc-table[b-dy2f175hxx] {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .tc-table[b-dy2f175hxx]::-webkit-scrollbar {
        width: 6px;
    }

    .tc-table[b-dy2f175hxx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tc-table[b-dy2f175hxx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.tc-table-head[b-dy2f175hxx],
.tc-table-row[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: 80px 90px 80px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

/* Variantes de columnas del maestro real (F1): siempre con boton de quitar fila; el nivel de tipo
   Color anade la columna del selector de color. */
.tc-cols-texto.tc-table-head[b-dy2f175hxx],
.tc-cols-texto.tc-table-row[b-dy2f175hxx] {
    grid-template-columns: 80px 90px 70px minmax(0, 1fr) 32px;
}

.tc-cols-color.tc-table-head[b-dy2f175hxx],
.tc-cols-color.tc-table-row[b-dy2f175hxx] {
    grid-template-columns: 80px 90px 70px minmax(0, 1fr) 48px 32px;
}

/* Celda de la tabla de valores: el ancla del teclado alrededor de cada control, sin cambiar la rejilla. */
.tc-cell[b-dy2f175hxx] {
    min-width: 0;
    display: flex;
}

    .tc-cell > .tc-input[b-dy2f175hxx],
    .tc-cell > .tc-color[b-dy2f175hxx] {
        flex: 1 1 auto;
    }

.tc-color[b-dy2f175hxx] {
    width: 100%;
    height: 32px;
    padding: 2px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.tc-row-del[b-dy2f175hxx] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
}

    .tc-row-del:hover[b-dy2f175hxx] {
        color: #dc2626;
        border-color: #fecaca;
        background: #fef2f2;
    }

.tc-table-head[b-dy2f175hxx] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

    .tc-table-head span[b-dy2f175hxx] {
        font-size: 11px;
        color: #64748b;
        font-weight: 850;
    }

/* ART�CULOS */

.tc-articles-list[b-dy2f175hxx] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .tc-articles-list[b-dy2f175hxx]::-webkit-scrollbar {
        width: 6px;
    }

    .tc-articles-list[b-dy2f175hxx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tc-articles-list[b-dy2f175hxx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.tc-article-card[b-dy2f175hxx] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
}

.tc-article-top[b-dy2f175hxx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

.tc-article-label[b-dy2f175hxx] {
    font-size: 11px;
    font-weight: 900;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tc-article-card h3[b-dy2f175hxx] {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 900;
    color: #111827;
}

.tc-variant-list[b-dy2f175hxx] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-variant-row[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: 170px 190px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
}

.tc-flow-list[b-dy2f175hxx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-flow-item[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #f8fafc;
}

    .tc-flow-item span[b-dy2f175hxx] {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 13px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-flow-item strong[b-dy2f175hxx] {
        display: block;
        font-size: 12px;
        color: #111827;
        font-weight: 900;
    }

    .tc-flow-item small[b-dy2f175hxx] {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: #6b7280;
    }

/* GU�A */

.tc-guide-grid[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tc-guide-card[b-dy2f175hxx] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.tc-guide-number[b-dy2f175hxx] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
}

.tc-guide-card h3[b-dy2f175hxx] {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.tc-guide-card p[b-dy2f175hxx] {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

/* BOTONES */

.tc-primary-btn[b-dy2f175hxx],
.tc-action-btn[b-dy2f175hxx] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tc-primary-btn[b-dy2f175hxx] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .tc-primary-btn:hover[b-dy2f175hxx] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

    .tc-primary-btn.small[b-dy2f175hxx] {
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }

.tc-action-btn[b-dy2f175hxx] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .tc-action-btn:hover[b-dy2f175hxx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* ANIMACIONES */

@keyframes tcPageIn-b-dy2f175hxx {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .tc-config-grid[b-dy2f175hxx],
    .tc-codes-grid[b-dy2f175hxx],
    .tc-articles-layout[b-dy2f175hxx] {
        grid-template-columns: 1fr;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .tc-side-panel[b-dy2f175hxx] {
        overflow: visible;
    }
}

@media (max-width: 980px) {
    .tc-page[b-dy2f175hxx] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    /* La cabecera se mantiene en fila: el CommandBar se repliega a «···» en lugar de apilarse. */

    .tc-tabs-panel[b-dy2f175hxx],
    .tc-tab-content[b-dy2f175hxx],
    .tc-config-grid[b-dy2f175hxx],
    .tc-codes-grid[b-dy2f175hxx],
    .tc-articles-layout[b-dy2f175hxx],
    .tc-articles-list[b-dy2f175hxx],
    .tc-table[b-dy2f175hxx] {
        height: auto;
        overflow: visible;
    }

    .tc-panel-header[b-dy2f175hxx] {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-variant-row[b-dy2f175hxx] {
        grid-template-columns: 1fr;
    }

    .tc-guide-grid[b-dy2f175hxx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tc-fields-grid[b-dy2f175hxx] {
        grid-template-columns: 1fr;
    }

    .tc-field-full[b-dy2f175hxx] {
        grid-column: auto;
    }

    .tc-header-actions[b-dy2f175hxx],
    .tc-panel-actions[b-dy2f175hxx] {
        width: 100%;
    }

        .tc-header-actions .tc-action-btn[b-dy2f175hxx],
        .tc-header-actions .tc-primary-btn[b-dy2f175hxx],
        .tc-panel-actions .tc-action-btn[b-dy2f175hxx],
        .tc-panel-actions .tc-primary-btn[b-dy2f175hxx] {
            flex: 1 1 auto;
        }

    .tc-table-head[b-dy2f175hxx],
    .tc-table-row[b-dy2f175hxx] {
        grid-template-columns: 1fr;
    }

    .tc-table-head[b-dy2f175hxx] {
        display: none;
    }

    .tc-table-row[b-dy2f175hxx] {
        padding: 10px;
        border: 1px solid #edf2f7;
        border-radius: 12px;
        background: #f8fafc;
    }
}

@media (max-width: 640px) {
    .tc-title[b-dy2f175hxx] {
        font-size: 20px;
    }

    .tc-subtitle[b-dy2f175hxx] {
        font-size: 12px;
    }

    .card-panel[b-dy2f175hxx] {
        padding: 12px;
    }

    .tc-header-actions[b-dy2f175hxx],
    .tc-panel-actions[b-dy2f175hxx] {
        flex-direction: column;
        align-items: stretch;
    }

        .tc-header-actions .tc-action-btn[b-dy2f175hxx],
        .tc-header-actions .tc-primary-btn[b-dy2f175hxx],
        .tc-panel-actions .tc-action-btn[b-dy2f175hxx],
        .tc-panel-actions .tc-primary-btn[b-dy2f175hxx] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .tc-page[b-dy2f175hxx],
    .tc-page *[b-dy2f175hxx],
    .tc-page *[b-dy2f175hxx]::before,
    .tc-page *[b-dy2f175hxx]::after {
        animation: none !important;
        transition: none !important;
    }
}

.tc-field-span-2[b-dy2f175hxx] {
    grid-column: span 2;
}
/* ─── Juegos de claves por familia (F7) ─────────────────────────────────── */

.tc-checks-wrap[b-dy2f175hxx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 0;
}

.tc-check-inline[b-dy2f175hxx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .tc-check-inline input[type="checkbox"][b-dy2f175hxx] {
        margin: 0;
    }

.tc-juego-acciones[b-dy2f175hxx] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─── Dimensiones: lista a la izquierda, ficha de la elegida a la derecha ─────── */

.tc-dims-layout[b-dy2f175hxx] {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    /* La fila no crece con el contenido: así la lista y la ficha hacen scroll dentro de su alto. */
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.tc-dims-list[b-dy2f175hxx] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 2px 3px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Color de acento de cada dimensión (por su posición en la lista): la tarjeta, su icono, sus etiquetas
   y el icono grande de la ficha toman el mismo. */
.acc-0[b-dy2f175hxx] { --acc: #2563eb; --acc-2: #6366f1; --acc-soft: #eff6ff; --acc-line: #bfdbfe; --acc-ink: #1d4ed8; }
.acc-1[b-dy2f175hxx] { --acc: #db2777; --acc-2: #f97316; --acc-soft: #fdf2f8; --acc-line: #fbcfe8; --acc-ink: #be185d; }
.acc-2[b-dy2f175hxx] { --acc: #059669; --acc-2: #14b8a6; --acc-soft: #ecfdf5; --acc-line: #a7f3d0; --acc-ink: #047857; }
.acc-3[b-dy2f175hxx] { --acc: #7c3aed; --acc-2: #c026d3; --acc-soft: #f5f3ff; --acc-line: #ddd6fe; --acc-ink: #6d28d9; }
.acc-4[b-dy2f175hxx] { --acc: #d97706; --acc-2: #eab308; --acc-soft: #fffbeb; --acc-line: #fde68a; --acc-ink: #b45309; }

.tc-dim-item[b-dy2f175hxx] {
    /* Alto propio: con muchas dimensiones la lista hace scroll en vez de aplastar las tarjetas. */
    flex: 0 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    width: 100%;
    padding: 14px 14px 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

    /* Franja de color a la izquierda: discreta en reposo, llena en la elegida. */
    .tc-dim-item[b-dy2f175hxx]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, var(--acc), var(--acc-2));
        opacity: 0.35;
        transition: opacity 0.16s ease;
    }

    .tc-dim-item:hover[b-dy2f175hxx] {
        border-color: var(--acc-line);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
        transform: translateY(-1px);
    }

        .tc-dim-item:hover[b-dy2f175hxx]::before {
            opacity: 0.7;
        }

    .tc-dim-item.active[b-dy2f175hxx] {
        border-color: var(--acc-line);
        background: linear-gradient(135deg, var(--acc-soft), #ffffff 70%);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

        .tc-dim-item.active[b-dy2f175hxx]::before {
            opacity: 1;
        }

    .tc-dim-item:focus-visible[b-dy2f175hxx] {
        outline: 2px solid var(--acc-line);
        outline-offset: 2px;
    }

/* El acento lo hereda de su tarjeta (lista) o lo lleva puesto (ficha). */
.tc-dim-icon[b-dy2f175hxx] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acc), var(--acc-2));
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

    .tc-dim-icon .material-symbols-outlined[b-dy2f175hxx] {
        font-size: 22px;
    }

    .tc-dim-icon.big[b-dy2f175hxx] {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

        .tc-dim-icon.big .material-symbols-outlined[b-dy2f175hxx] {
            font-size: 26px;
        }

.tc-dim-main[b-dy2f175hxx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .tc-dim-main strong[b-dy2f175hxx] {
        font-size: 14px;
        font-weight: 850;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tc-dim-tags[b-dy2f175hxx] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tc-tag[b-dy2f175hxx] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    color: var(--acc-ink);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
}

.tc-tag-muted[b-dy2f175hxx] {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #64748b;
}

.tc-dim-count[b-dy2f175hxx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

    .tc-dim-count strong[b-dy2f175hxx] {
        font-size: 22px;
        font-weight: 900;
        color: var(--acc-ink);
    }

    .tc-dim-count small[b-dy2f175hxx] {
        margin-top: 3px;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
    }

.tc-dim-values[b-dy2f175hxx] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

.tc-dim-novalues[b-dy2f175hxx] {
    font-size: 11px;
    font-style: italic;
    color: #9ca3af;
}

.tc-swatch[b-dy2f175hxx] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #d1d5db;
}

.tc-chip[b-dy2f175hxx] {
    padding: 2px 9px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid var(--acc-line);
    color: #374151;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.tc-chip-more[b-dy2f175hxx] {
    background: var(--acc-soft);
    color: var(--acc-ink);
}

.tc-dim-detail[b-dy2f175hxx] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.tc-dim-detail-head[b-dy2f175hxx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
}

.tc-dim-detail-title[b-dy2f175hxx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 850;
    color: #1f2937;
}

.tc-badge[b-dy2f175hxx] {
    padding: 3px 9px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
}

    .tc-badge.color[b-dy2f175hxx] {
        background: #eff6ff;
        color: #1d4ed8;
    }

/* Datos básicos y valores, uno al lado del otro: los datos en una columna estrecha y los valores ocupan
   el resto. */
.tc-dim-body[b-dy2f175hxx] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.tc-dim-section[b-dy2f175hxx] {
    min-width: 0;
    min-height: 0;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    overflow-y: auto;
}

.tc-dim-section-grow[b-dy2f175hxx] {
    display: flex;
    flex-direction: column;
}

    /* Las filas de valores van pegadas a la cabecera, sin estirarse para llenar el alto. */
    .tc-dim-section-grow .tc-table[b-dy2f175hxx] {
        flex: 1 1 auto;
        grid-template-rows: none;
        align-content: start;
    }

.tc-card-title-actions[b-dy2f175hxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* En la columna estrecha: los cuatro campos uno debajo de otro, a todo el ancho. */
.tc-fields-4[b-dy2f175hxx] {
    grid-template-columns: minmax(0, 1fr);
}

.tc-dim-footer[b-dy2f175hxx] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}

.tc-danger-btn[b-dy2f175hxx] {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

    .tc-danger-btn:hover[b-dy2f175hxx] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

/* Desplegable de dimensiones: solo en pantalla estrecha, en lugar de la lista. Aspecto del <select>: el
   global (desplegables.css); aquí solo su sitio. */
.tc-dims-select[b-dy2f175hxx] {
    display: none;
}

    .tc-dims-select label[b-dy2f175hxx] {
        font-size: 12px;
        font-weight: 750;
        color: #4b5563;
    }

/* ─── Dimensiones en pantallas medianas y pequeñas ───────────────────────────────────────────────── */

/* Hasta 1100 px: la lista no cabe al lado de la ficha. Se cambia por el desplegable, la ficha ocupa todo
   el ancho y sus dos bloques (datos y valores) van uno debajo de otro. */
@media (max-width: 1100px) {
    .tc-dims-layout[b-dy2f175hxx] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    .tc-dims-list[b-dy2f175hxx] {
        display: none;
    }

    .tc-dims-select[b-dy2f175hxx] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Cabecera y pie de la ficha quietos; lo de en medio (datos y valores) hace scroll. Las secciones
       NUNCA se encogen por debajo de su contenido: sin esto se aplastaban y se montaban una encima de otra. */
    .tc-dim-body[b-dy2f175hxx] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        align-content: start;
        overflow-y: auto;
        padding-right: 2px;
    }

    .tc-dim-section[b-dy2f175hxx],
    .tc-dim-section-grow[b-dy2f175hxx] {
        min-height: auto;
        overflow: visible;
    }

        .tc-dim-section-grow .tc-table[b-dy2f175hxx] {
            flex: 0 0 auto;
            overflow: visible;
        }

    /* Con todo el ancho, los cuatro datos básicos en una fila (o en dos si no caben). */
    .tc-fields-4[b-dy2f175hxx] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    /* Hueco a la derecha del pie para el botón flotante (+) de la aplicación, que tapaba «Guardar». */
    .tc-dim-footer[b-dy2f175hxx] {
        padding-right: 60px;
    }
}

/* Hasta 980 px la página deja de tener alto fijo y hace scroll entera: nada de scroll por dentro. */
@media (max-width: 980px) {
    .tc-dims-layout[b-dy2f175hxx],
    .tc-dim-detail[b-dy2f175hxx],
    .tc-dim-body[b-dy2f175hxx],
    .tc-dim-section-grow .tc-table[b-dy2f175hxx] {
        overflow: visible;
        min-height: auto;
    }

    .tc-dim-detail[b-dy2f175hxx] {
        padding: 12px;
    }
}

/* Hasta 768 px: cada valor deja de ser una fila de tabla y pasa a ser una tarjeta con sus rótulos
   (la cabecera de columnas sobra). Clave y orden a medias, valor y descripción a lo ancho. Lleva la misma
   especificidad que las columnas de escritorio (.tc-cols-*.tc-table-row) para poder ganarles. */
@media (max-width: 768px) {
    .tc-cols-texto.tc-table-head[b-dy2f175hxx],
    .tc-cols-color.tc-table-head[b-dy2f175hxx] {
        display: none;
    }

    .tc-cols-texto.tc-table-row[b-dy2f175hxx],
    .tc-cols-color.tc-table-row[b-dy2f175hxx] {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        padding: 12px 44px 12px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #f8fafc;
    }

    .tc-cell[b-dy2f175hxx] {
        flex-direction: column;
        gap: 4px;
    }

        .tc-cell[b-dy2f175hxx]::before {
            content: attr(data-rotulo);
            font-size: 11px;
            font-weight: 750;
            color: #64748b;
        }

        .tc-cell[id$="-Valor"][b-dy2f175hxx],
        .tc-cell[id$="-Descripcion"][b-dy2f175hxx] {
            grid-column: 1 / -1;
        }

        .tc-cell > .tc-color[b-dy2f175hxx] {
            flex: 0 0 auto;
            width: 64px;
        }

    /* Quitar valor: arriba a la derecha de la tarjeta. */
    .tc-row-del[b-dy2f175hxx] {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .tc-dim-detail-title[b-dy2f175hxx] {
        font-size: 16px;
    }

    .tc-dim-icon.big[b-dy2f175hxx] {
        width: 40px;
        height: 40px;
    }
}

/* Hasta 560 px: datos básicos en una columna y botones del pie a lo ancho, el de guardar primero. */
@media (max-width: 560px) {
    .tc-fields-4[b-dy2f175hxx] {
        grid-template-columns: 1fr;
    }

    .tc-dim-detail-head[b-dy2f175hxx] {
        gap: 10px;
    }

    .tc-card-title-actions[b-dy2f175hxx] {
        flex-wrap: wrap;
    }

    .tc-dim-footer[b-dy2f175hxx] {
        flex-direction: column-reverse;
    }

        .tc-dim-footer[b-dy2f175hxx]  .tc-action-btn,
        .tc-dim-footer[b-dy2f175hxx]  .tc-primary-btn {
            width: 100%;
        }
}
/* _content/ErpPowergest/Presentation/Almacenes/Almacenes/Pages/AlmacenesPage.razor.rz.scp.css */
.almacenes-page[b-x15xof7hjb],
.almacenes-page *[b-x15xof7hjb],
.almacenes-page *[b-x15xof7hjb]::before,
.almacenes-page *[b-x15xof7hjb]::after {
    box-sizing: border-box;
}

.almacenes-page[b-x15xof7hjb] {
    /* Rellena el alto disponible que le cede .main-body (sin número mágico).
       min-height actúa como suelo de comodidad: si el viewport es muy bajo,
       la página crece y deja que .main-body haga scroll en vez de aplastar el grid. */
    height: 100%;
    min-height: 520px;
    /* Flex en columna (no grid): el número de hijos varía según aparezca o no el banner de error, y con
       filas fijas la fila sobrante seguía aportando su gap (doble separación bajo el buscador). */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: almacenesPageIn-b-x15xof7hjb 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.almacenes-header[b-x15xof7hjb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .almacenes-header > div:first-child[b-x15xof7hjb] {
        /* Absorbe el espacio libre para empujar el CommandBar a la esquina superior derecha; nunca
           cede por debajo de este suelo, así el texto envuelve por palabras (no letra a letra). */
        flex: 1 1 auto;
        min-width: min(100%, 16rem);
    }

.almacenes-title[b-x15xof7hjb] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.almacenes-subtitle[b-x15xof7hjb] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.almacenes-header.command-bar-host-collapsed .almacenes-title[b-x15xof7hjb],
.almacenes-header.command-bar-host-collapsed .almacenes-subtitle[b-x15xof7hjb] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa el estilo por
   defecto del componente (botones compactos icono+texto). */
.almacenes-header-actions[b-x15xof7hjb] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.almacenes-error-banner[b-x15xof7hjb] {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    font-size: 13px;
}

.almacenes-filters[b-x15xof7hjb] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr);
    gap: 10px;
    align-items: center;
}

.alm-filter-item[b-x15xof7hjb],
.alm-filter-item-search[b-x15xof7hjb] {
    min-width: 0;
}

.alm-filter-searchbox[b-x15xof7hjb] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.alm-filter-search-icon[b-x15xof7hjb] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.alm-filter-input[b-x15xof7hjb] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alm-filter-input-search[b-x15xof7hjb] {
    padding-left: 38px;
}

.alm-filter-input[b-x15xof7hjb]::placeholder {
    color: #9ca3af;
}

.alm-filter-input:focus[b-x15xof7hjb] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA */

/* Marco de la tabla: consume el alto que dejan libre la cabecera y el buscador (con o sin banner de
   error), y dentro de él el paginador queda anclado abajo. */
.alm-table-shell[b-x15xof7hjb] {
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

/* Sin scroll propio: la tabla se despliega entera y el desplazamiento vertical lo hace el contenedor
   de la página. */
.alm-table-scroll[b-x15xof7hjb] {
    min-height: 0;
}

.alm-table[b-x15xof7hjb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

/* Cabecera fija: se mantiene visible mientras el cuerpo hace scroll. */
.alm-table thead th[b-x15xof7hjb] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

/* Cabecera sin orden (Acciones): mismo alto y ritmo tipográfico que las ordenables. */
.alm-table thead th.alm-th-plain[b-x15xof7hjb] {
    padding: 0 14px;
    height: 42px;
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.alm-sort[b-x15xof7hjb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .alm-sort:hover[b-x15xof7hjb] {
        background: #f1f5f9;
        color: #334155;
    }

    .alm-sort:focus-visible[b-x15xof7hjb] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.alm-sort-center[b-x15xof7hjb] {
    justify-content: center;
}

.alm-sort-icon[b-x15xof7hjb] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto de la cabecera
   no se desplace) y solo aparece al pasar el puntero o al enfocar con teclado. */
.alm-sort-icon-inactivo[b-x15xof7hjb] {
    opacity: 0;
}

.alm-sort:hover .alm-sort-icon-inactivo[b-x15xof7hjb],
.alm-sort:focus-visible .alm-sort-icon-inactivo[b-x15xof7hjb] {
    opacity: 1;
}

.alm-table tbody td[b-x15xof7hjb] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    /* Permite el salto de línea (incluso partiendo palabras largas sin espacios) en celdas estrechas. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.alm-table tbody tr[b-x15xof7hjb] {
    cursor: pointer;
    transition: background 0.14s ease;
}

    .alm-table tbody tr:hover td[b-x15xof7hjb] {
        background: #f8fbff;
    }

    /* La última fila no dibuja separador: el borde inferior lo pone el paginador. */
    .alm-table tbody tr:last-child td[b-x15xof7hjb] {
        border-bottom: none;
    }

/* Anchos de columna: «Descripción» absorbe el espacio sobrante; el resto es contenido. */
.alm-col-codigo[b-x15xof7hjb] {
    width: 140px;
}

.alm-col-nivel[b-x15xof7hjb] {
    width: 96px;
    text-align: center;
}

.alm-col-estado[b-x15xof7hjb] {
    width: 130px;
    text-align: center;
}

.alm-col-acciones[b-x15xof7hjb] {
    width: 110px;
    text-align: center;
}

/* ESTADO VACÍO */

.alm-empty[b-x15xof7hjb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 20px;
    text-align: center;
}

.alm-empty-icon[b-x15xof7hjb] {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.alm-empty-title[b-x15xof7hjb] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.alm-empty-text[b-x15xof7hjb] {
    font-size: 12px;
    color: #94a3b8;
    max-width: 380px;
}

/* PAGINADOR */

.alm-pager[b-x15xof7hjb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.alm-pager-info[b-x15xof7hjb] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.alm-pager-nav[b-x15xof7hjb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.alm-pager-btn[b-x15xof7hjb],
.alm-pager-page[b-x15xof7hjb] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .alm-pager-btn:hover:not(:disabled)[b-x15xof7hjb],
    .alm-pager-page:hover[b-x15xof7hjb] {
        background: #eef2f7;
        color: #1f2937;
    }

    .alm-pager-btn:disabled[b-x15xof7hjb] {
        opacity: 0.4;
        cursor: default;
    }

    .alm-pager-btn .material-symbols-outlined[b-x15xof7hjb] {
        font-size: 18px;
        pointer-events: none;
    }

/* Página activa: relleno primary sólido, como el botón principal de la cabecera. */
.alm-pager-page-active[b-x15xof7hjb],
.alm-pager-page-active:hover[b-x15xof7hjb] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila (editar / borrar): botones-icono compactos, modelados en .art-property-remove-btn. */
.alm-row-actions[b-x15xof7hjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.alm-action-btn[b-x15xof7hjb] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que el usuario pueda seleccionar/resaltar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .alm-action-btn .material-symbols-outlined[b-x15xof7hjb] {
        font-size: 18px;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.alm-action-btn-edit[b-x15xof7hjb] {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .alm-action-btn-edit:hover[b-x15xof7hjb] {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.alm-action-btn-delete[b-x15xof7hjb] {
    color: #444653;
}

    .alm-action-btn-delete:hover[b-x15xof7hjb] {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* Badge circular de nivel (tinte primary, como el mockup). */
.alm-nivel-badge[b-x15xof7hjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(0, 40, 142, 0.1);
    color: #00288e;
    border: 1px solid rgba(0, 40, 142, 0.2);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.alm-estado-badge[b-x15xof7hjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.alm-estado-green[b-x15xof7hjb] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.alm-estado-orange[b-x15xof7hjb] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.alm-estado-red[b-x15xof7hjb] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* CUARTA TARJETA KPI: acceso al informe (acento primario, estilo destacado del mockup). */
.alm-kpi-report[b-x15xof7hjb] {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
    border-radius: clamp(8px, 1.1cqi, 12px);
    border: 1px solid #1e3a8a;
    background: linear-gradient(135deg, #1e40af 0%, #3755c3 100%);
    color: #ffffff;
    padding: clamp(7px, 1.1cqi, 11px);
    padding-left: clamp(9px, 1.3cqi, 13px);
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.22);
}

.alm-kpi-report__content[b-x15xof7hjb] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.4cqi, 4px);
    min-width: 0;
}

.alm-kpi-report__label[b-x15xof7hjb] {
    font-size: clamp(9px, 1cqi, 11px);
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alm-kpi-report__value[b-x15xof7hjb] {
    font-size: clamp(12px, 1.6cqi, 15px);
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alm-kpi-report__btn[b-x15xof7hjb] {
    margin-top: clamp(4px, 0.8cqi, 8px);
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: clamp(10px, 1cqi, 12px);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease;
}

    .alm-kpi-report__btn:hover[b-x15xof7hjb] {
        background: rgba(255, 255, 255, 0.26);
    }

    .alm-kpi-report__btn .material-symbols-outlined[b-x15xof7hjb] {
        font-size: 14px;
    }

/* Icono ambiental decorativo en la esquina inferior derecha. */
.alm-kpi-report__ambient[b-x15xof7hjb] {
    position: absolute;
    right: -10px;
    bottom: -14px;
    font-size: 96px;
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
}

/* Tier compacto: en paneles estrechos densificamos la tarjeta igual que los KpiTile (menos padding,
   radio y fuentes más finos, botón e icono ambiental más pequeños). La container query se resuelve
   contra <KpiBoard> (container-type: inline-size), igual que el resto de tarjetas. */
@container (max-width: 520px) {
    .alm-kpi-report[b-x15xof7hjb] {
        padding: 5px;
        padding-left: 8px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.18);
    }

    .alm-kpi-report__content[b-x15xof7hjb] {
        gap: 2px;
    }

    .alm-kpi-report__label[b-x15xof7hjb] {
        font-size: clamp(8px, 1cqi, 10px);
    }

    .alm-kpi-report__value[b-x15xof7hjb] {
        font-size: clamp(11px, 1.6cqi, 13px);
    }

    .alm-kpi-report__btn[b-x15xof7hjb] {
        margin-top: 4px;
        padding: 3px 9px;
        font-size: clamp(9px, 1cqi, 11px);
    }

        .alm-kpi-report__btn .material-symbols-outlined[b-x15xof7hjb] {
            font-size: 12px;
        }

    .alm-kpi-report__ambient[b-x15xof7hjb] {
        font-size: 72px;
        right: -8px;
        bottom: -12px;
    }
}

/* ANIMACIONES */

@keyframes almacenesPageIn-b-x15xof7hjb {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .almacenes-page[b-x15xof7hjb] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }
}

/* Pantallas BAJAS (poca altura): el modelo de "rellenar el alto disponible" aplastaría la tabla.
   En su lugar dejamos que la página crezca (height auto + overflow visible) para que sea el contenedor
   (.main-body) quien haga el scroll vertical, y garantizamos una altura mínima utilizable de la tabla
   para que sus filas sigan siendo visibles aunque la pantalla sea muy baja. */
@media (max-height: 720px) {
    .almacenes-page[b-x15xof7hjb] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .alm-table-shell[b-x15xof7hjb] {
        /* Suelo de altura para que la tabla muestre varias filas antes de desplazar internamente. */
        min-height: 320px;
    }
}

/* Columnas replegables: «Nivel» y «Estado» desaparecen en pantallas estrechas; «Código», «Descripción»
   y «Acciones» permanecen siempre visibles. */
@media (max-width: 620px) {
    .alm-col-nivel[b-x15xof7hjb] {
        display: none;
    }
}

@media (max-width: 560px) {
    .alm-col-estado[b-x15xof7hjb] {
        display: none;
    }
}

@media (max-width: 640px) {
    .almacenes-title[b-x15xof7hjb] {
        font-size: 20px;
    }

    .almacenes-subtitle[b-x15xof7hjb] {
        font-size: 12px;
    }

    .alm-pager[b-x15xof7hjb] {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .almacenes-page[b-x15xof7hjb],
    .almacenes-page *[b-x15xof7hjb],
    .almacenes-page *[b-x15xof7hjb]::before,
    .almacenes-page *[b-x15xof7hjb]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/ArticuloDetalle.razor.rz.scp.css */
/* Estilos propios de la pestaña Inmovilizado (IF6). El resto de la ficha de artículo se apoya en la
   hoja global articulos.css; aquí solo van las piezas nuevas, para no tocar estilos compartidos. */

.articulo-inm-cargando[b-adf8s26q69] {
    color: #61707d;
    font-size: .85rem;
}

.articulo-inm-nota[b-adf8s26q69] {
    display: block;
    margin-top: .6rem;
    color: #8a97a3;
    font-size: .8rem;
    font-style: italic;
}

.articulo-inm-error[b-adf8s26q69] {
    margin: .8rem 0;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #fdecea;
    color: #a02020;
    font-size: .85rem;
}

/* Pie de acciones de la pestaña: los comandos (CommandBar, .cb-seccion) van a la derecha, como en
   la cabecera de la ficha, y la pregunta de confirmación ocupa el hueco de la izquierda. */
.articulo-inm-acciones[b-adf8s26q69] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: .9rem;
}

.articulo-inm-confirm[b-adf8s26q69] {
    /* Empuja los comandos a la derecha y es el único que cede espacio al estrecharse (la barra
       conserva su ancho: es ella la que decide replegarse al menú «···»). */
    margin-right: auto;
    color: #8a5a00;
    font-size: .85rem;
}

/* Pestaña Tallas (TC4): la explicación de «Añadir talla / color», bajo los campos. */
.articulo-tallas-ayuda[b-adf8s26q69] {
    display: block;
    margin-top: .5rem;
    color: #61707d;
    font-size: .8rem;
}

/* Pestaña Tallas (TC4b): un bloque por dimensión con los valores que admite el artículo y el campo de añadir. */
.articulo-tallas-dimension[b-adf8s26q69] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    gap: .4rem 1rem;
    align-items: end;
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid #e6eaee;
}

.articulo-tallas-dimension-head[b-adf8s26q69] {
    grid-column: 1 / -1;
    display: flex;
    gap: .6rem;
    align-items: baseline;
}

.articulo-tallas-dimension-head small[b-adf8s26q69],
.articulo-tallas-vacio[b-adf8s26q69] {
    color: #61707d;
    font-size: .8rem;
}

.articulo-tallas-valores[b-adf8s26q69] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    min-height: 2rem;
}

.articulo-tallas-valor[b-adf8s26q69] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border: 1px solid #d5dce2;
    border-radius: 999px;
    background: #f6f8fa;
    font-size: .85rem;
}

.articulo-tallas-color[b-adf8s26q69] {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
}

.articulo-tallas-quitar[b-adf8s26q69] {
    border: 0;
    background: none;
    padding: 0 .1rem;
    color: #8a97a3;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.articulo-tallas-quitar:hover[b-adf8s26q69] {
    color: #a02020;
}

/* Parrilla de la ficha (TC5): la última dimensión en columnas. */
.articulo-tallas-vista[b-adf8s26q69] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.articulo-tallas-vista label[b-adf8s26q69] {
    color: #61707d;
    font-size: .8rem;
}

.articulo-tallas-vista select[b-adf8s26q69] {
    width: auto;
    min-width: 10rem;
}

.articulo-tallas-vista-btn[b-adf8s26q69] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border: 1px solid #d5dce2;
    border-radius: 6px;
    background: #fff;
    color: #3b4a57;
    font-size: .85rem;
    cursor: pointer;
}

.articulo-tallas-vista-btn .material-symbols-outlined[b-adf8s26q69] {
    font-size: 1.05rem;
}

.articulo-tallas-vista-btn.is-activa[b-adf8s26q69] {
    background: #eaf2fb;
    border-color: #8fb4dc;
    color: #1f4f80;
}

.articulo-tallas-parrilla th.articulo-tallas-col[b-adf8s26q69],
.articulo-tallas-parrilla td.articulo-tallas-celda[b-adf8s26q69] {
    text-align: center;
    min-width: 5.5rem;
}

.articulo-tallas-celda.is-vacia[b-adf8s26q69] {
    background: #fafbfc;
}

.articulo-tallas-celda input[b-adf8s26q69] {
    width: 100%;
    min-width: 5rem;
    text-align: right;
}

.articulo-tallas-existe[b-adf8s26q69] {
    color: #2e7d4f;
    font-weight: 600;
}

.articulo-tallas-crear[b-adf8s26q69] {
    border: 1px dashed #b9c4ce;
    border-radius: 4px;
    background: none;
    color: #8a97a3;
    width: 1.8rem;
    height: 1.6rem;
    cursor: pointer;
    line-height: 1;
}

.articulo-tallas-crear:hover:not(:disabled)[b-adf8s26q69] {
    border-color: #4a7fb5;
    color: #1f4f80;
    background: #eaf2fb;
}

.articulo-tallas-mas input[b-adf8s26q69] {
    min-width: 7rem;
}

@media (max-width: 640px) {
    .articulo-tallas-dimension[b-adf8s26q69] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/ArticuloNuevoModal.razor.rz.scp.css */
.art-modal-backdrop[b-d40ytr9r7n] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.art-modal-card[b-d40ytr9r7n] {
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.art-modal-card-large[b-d40ytr9r7n] {
    max-width: 720px;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.art-modal-card .material-symbols-outlined[b-d40ytr9r7n] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.art-modal-header[b-d40ytr9r7n] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.art-modal-title[b-d40ytr9r7n] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-d40ytr9r7n] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-body[b-d40ytr9r7n] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.art-modal-info-box[b-d40ytr9r7n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.art-modal-info-icon[b-d40ytr9r7n] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-d40ytr9r7n] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-d40ytr9r7n] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-modal-grid[b-d40ytr9r7n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.art-modal-field[b-d40ytr9r7n] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.art-modal-field-span-2[b-d40ytr9r7n] {
    grid-column: span 2;
}

.art-modal-label[b-d40ytr9r7n] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* «::deep» además del selector directo: los selectores de entidad (familia, proveedor) son
   <CampoConBuscador>, y su <input> hereda esta clase vía ClaseInput pero lo renderiza el componente HIJO,
   asi que el CSS scoped no lo marcaria y el campo saldria SIN estilo. Anclado en .art-modal-field (de este
   modal) para no sangrar a otros componentes. Misma solucion que .fdp-field en facturacion. */
.art-modal-input[b-d40ytr9r7n],
.art-modal-field[b-d40ytr9r7n]  .art-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .art-modal-input[b-d40ytr9r7n]::placeholder,
    .art-modal-field[b-d40ytr9r7n]  .art-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .art-modal-input:focus[b-d40ytr9r7n],
    .art-modal-field[b-d40ytr9r7n]  .art-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* La lupa embebida a la derecha y el hueco que le deja al texto los aporta el propio CampoConBuscador
   (clases ccb-*). Aqui solo se le da la piel del input; no hay estilo de selector propio. */

.art-modal-preview[b-d40ytr9r7n] {
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    padding: 14px;
}

.art-modal-preview-label[b-d40ytr9r7n] {
    font-size: 12px;
    font-weight: 900;
    color: #64748b;
    margin-bottom: 10px;
}

/* Vista previa con el mismo aspecto que el arbol de familias (ArbolFamilias.razor): el articulo se
   anida bajo la carpeta de su familia. */
.art-modal-tree[b-d40ytr9r7n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.art-modal-tree-familia-row[b-d40ytr9r7n] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
}

.art-modal-tree-toggle[b-d40ytr9r7n] {
    font-size: 18px !important;
    color: #94a3b8;
    flex: 0 0 auto;
}

.art-modal-tree-familia-icon[b-d40ytr9r7n] {
    font-size: 19px !important;
    color: #64748b;
    flex: 0 0 auto;
}

.art-modal-tree-familia-name[b-d40ytr9r7n] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-modal-tree-articulos[b-d40ytr9r7n] {
    margin: 1px 0 0 16px;
    padding-left: 10px;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.art-modal-tree-articulo-row[b-d40ytr9r7n] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #475569;
}

.art-modal-tree-articulo-icon[b-d40ytr9r7n] {
    font-size: 17px !important;
    color: #94a3b8;
    flex: 0 0 auto;
}

.art-modal-tree-articulo-name[b-d40ytr9r7n] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-modal-tree-chip[b-d40ytr9r7n] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
}

.art-modal-note[b-d40ytr9r7n] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
}

.art-modal-actions[b-d40ytr9r7n] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que EditPerfilForm (sin animaciones de traslación en hover). */
.btn[b-d40ytr9r7n] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-d40ytr9r7n] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-d40ytr9r7n] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-d40ytr9r7n] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-d40ytr9r7n] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-d40ytr9r7n] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-d40ytr9r7n] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-d40ytr9r7n] {
        background: #4b5563;
    }

/* Pantallas medianas (tablets): el modal puede ensancharse y el grid se reduce a 2 columnas. */
@media (max-width: 768px) {
    .art-modal-grid[b-d40ytr9r7n] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .art-modal-field-span-2[b-d40ytr9r7n] {
        grid-column: span 2;
    }
}

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .art-modal-backdrop[b-d40ytr9r7n] {
        padding: 0;
    }

    .art-modal-card[b-d40ytr9r7n],
    .art-modal-card-large[b-d40ytr9r7n] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .art-modal-grid[b-d40ytr9r7n] {
        grid-template-columns: 1fr;
    }

    .art-modal-field-span-2[b-d40ytr9r7n] {
        grid-column: auto;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/CopiarPropiedadesModal.razor.rz.scp.css */
.art-modal-backdrop[b-pz3dpin7yy] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.art-modal-card[b-pz3dpin7yy] {
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.art-modal-header[b-pz3dpin7yy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}

.art-modal-kicker[b-pz3dpin7yy] {
    font-size: 11px;
    font-weight: 900;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.art-modal-title[b-pz3dpin7yy] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-pz3dpin7yy] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-close[b-pz3dpin7yy] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .art-modal-close:hover[b-pz3dpin7yy] {
        background: #eef2f7;
        color: #334155;
    }

    .art-modal-close .material-symbols-outlined[b-pz3dpin7yy] {
        font-size: 20px;
    }

.art-modal-body[b-pz3dpin7yy] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    min-height: 0;
}

.art-modal-info-box[b-pz3dpin7yy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    flex-shrink: 0;
}

.art-modal-info-icon[b-pz3dpin7yy] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-pz3dpin7yy] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-pz3dpin7yy] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-properties-select-card[b-pz3dpin7yy],
.art-modal-preview[b-pz3dpin7yy] {
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    padding: 14px;
}

.art-properties-select-head[b-pz3dpin7yy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.art-properties-select-title[b-pz3dpin7yy] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.art-properties-select-subtitle[b-pz3dpin7yy] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.art-properties-select-actions[b-pz3dpin7yy] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.art-mini-btn[b-pz3dpin7yy] {
    height: 32px;
    border-radius: 10px;
    padding: 0 12px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

    .art-mini-btn:hover[b-pz3dpin7yy] {
        background: #f8fafc;
        border-color: #cfd8e3;
    }

.art-properties-select-list[b-pz3dpin7yy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 6px;
}

.art-property-copy-item[b-pz3dpin7yy] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.16s ease;
}

    .art-property-copy-item:hover[b-pz3dpin7yy] {
        border-color: #bfdbfe;
        background: #f8fbff;
    }

    .art-property-copy-item.selected[b-pz3dpin7yy] {
        border-color: #bfdbfe;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px #bfdbfe;
    }

    .art-property-copy-item input[b-pz3dpin7yy] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

.art-property-copy-main[b-pz3dpin7yy] {
    min-width: 0;
}

    .art-property-copy-main strong[b-pz3dpin7yy] {
        display: block;
        font-size: 13px;
        font-weight: 900;
        color: #0f172a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .art-property-copy-main small[b-pz3dpin7yy] {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #64748b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.art-property-copy-chip[b-pz3dpin7yy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.art-field[b-pz3dpin7yy] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .art-field label[b-pz3dpin7yy] {
        font-size: 13px;
        font-weight: 900;
        color: #334155;
    }

.art-modal-input[b-pz3dpin7yy] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
}

    .art-modal-input:focus[b-pz3dpin7yy] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

.art-copy-range[b-pz3dpin7yy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.art-check-card[b-pz3dpin7yy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

    .art-check-card input[b-pz3dpin7yy] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: #2563eb;
        flex-shrink: 0;
    }

    .art-check-card strong[b-pz3dpin7yy] {
        display: block;
        font-size: 13px;
        font-weight: 900;
        color: #0f172a;
    }

    .art-check-card small[b-pz3dpin7yy] {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
    }

.art-modal-preview-label[b-pz3dpin7yy] {
    font-size: 12px;
    font-weight: 900;
    color: #64748b;
    margin-bottom: 10px;
}

.art-modal-preview-row[b-pz3dpin7yy] {
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
}

.art-modal-preview-icon[b-pz3dpin7yy] {
    font-size: 18px;
    color: #2563eb;
}

.art-modal-preview-name[b-pz3dpin7yy] {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-modal-status-draft[b-pz3dpin7yy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    white-space: nowrap;
}

.art-modal-note[b-pz3dpin7yy] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
}

.art-empty[b-pz3dpin7yy] {
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid #e2e8f0;
}

.art-modal-actions[b-pz3dpin7yy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
    flex-shrink: 0;
}

.art-modal-secondary-btn[b-pz3dpin7yy],
.art-modal-primary-btn[b-pz3dpin7yy] {
    height: 40px;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.16s ease;
}

.art-modal-secondary-btn[b-pz3dpin7yy] {
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #334155;
}

    .art-modal-secondary-btn:hover[b-pz3dpin7yy] {
        background: #f8fafc;
    }

.art-modal-primary-btn[b-pz3dpin7yy] {
    border: 0;
    background: #2563eb;
    color: #ffffff;
}

    .art-modal-primary-btn:hover[b-pz3dpin7yy] {
        background: #1d4ed8;
    }

    .art-modal-primary-btn:disabled[b-pz3dpin7yy] {
        opacity: 0.45;
        cursor: not-allowed;
    }

@media (max-width: 768px) {
    .art-modal-backdrop[b-pz3dpin7yy] {
        padding: 14px;
    }

    .art-modal-card[b-pz3dpin7yy] {
        max-width: 100%;
        max-height: calc(100dvh - 28px);
    }

    .art-modal-header[b-pz3dpin7yy],
    .art-modal-body[b-pz3dpin7yy],
    .art-modal-actions[b-pz3dpin7yy] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .art-copy-range[b-pz3dpin7yy] {
        grid-template-columns: 1fr;
    }

    .art-properties-select-head[b-pz3dpin7yy] {
        flex-direction: column;
        align-items: stretch;
    }

    .art-properties-select-actions[b-pz3dpin7yy] {
        width: 100%;
    }

    .art-mini-btn[b-pz3dpin7yy] {
        flex: 1;
    }

    .art-property-copy-item[b-pz3dpin7yy] {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .art-property-copy-chip[b-pz3dpin7yy] {
        grid-column: 2;
        justify-self: flex-start;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/CrearCombinacionesModal.razor.rz.scp.css */
/* Diálogo «Crear combinaciones» (Tallas y colores 2, TC4b): una fila por dimensión con su primer y último valor,
   y debajo lo que dice Application de cuántas saldrían. */

.ccmb[b-gackt9jwbm] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: min(32rem, 90vw);
}

.ccmb-intro[b-gackt9jwbm] {
    margin: 0;
    color: #61707d;
    font-size: .85rem;
}

.ccmb-dimension[b-gackt9jwbm] {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    align-items: end;
}

.ccmb-nombre[b-gackt9jwbm] {
    align-self: center;
}

.ccmb-campo[b-gackt9jwbm] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ccmb-campo label[b-gackt9jwbm] {
    font-size: .75rem;
    color: #61707d;
}

.ccmb-campo select[b-gackt9jwbm] {
    height: 2.1rem;
}

.ccmb-nota[b-gackt9jwbm] {
    grid-column: 2 / -1;
    color: #8a97a3;
    font-size: .8rem;
}

.ccmb-prevision[b-gackt9jwbm] {
    padding: .6rem .75rem;
    border-radius: 6px;
    font-size: .85rem;
    background: #eef4fb;
    color: #1d4f7a;
}

.ccmb-aviso-muchas[b-gackt9jwbm] {
    background: #fff6e0;
    color: #7a5200;
}

.ccmb-aviso-confirmar[b-gackt9jwbm],
.ccmb-aviso-excede[b-gackt9jwbm] {
    background: #fdecea;
    color: #a02020;
}

.ccmb-confirmar[b-gackt9jwbm] {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .85rem;
}

.ccmb-error[b-gackt9jwbm] {
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #fdecea;
    color: #a02020;
    font-size: .85rem;
}

.ccmb-acciones[b-gackt9jwbm] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

@media (max-width: 640px) {
    .ccmb-dimension[b-gackt9jwbm] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ccmb-nombre[b-gackt9jwbm] {
        grid-column: 1 / -1;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/FamiliaNuevaModal.razor.rz.scp.css */
.art-modal-backdrop[b-9asp7ulm69] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.art-modal-card[b-9asp7ulm69] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.art-modal-card .material-symbols-outlined[b-9asp7ulm69] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.art-modal-header[b-9asp7ulm69] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.art-modal-title[b-9asp7ulm69] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-9asp7ulm69] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-body[b-9asp7ulm69] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.art-modal-info-box[b-9asp7ulm69] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.art-modal-info-icon[b-9asp7ulm69] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-9asp7ulm69] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-9asp7ulm69] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-modal-field[b-9asp7ulm69] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.art-modal-label[b-9asp7ulm69] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* «::deep» además del selector directo: el selector de familia padre es un <CampoConBuscador>, y su
   <input> hereda esta clase vía ClaseInput pero lo renderiza el componente HIJO, asi que el CSS scoped no
   lo marcaria y el campo saldria SIN estilo. Anclado en .art-modal-field (de este modal) para no sangrar a
   otros componentes. Misma solucion que .fdp-field en facturacion. */
.art-modal-input[b-9asp7ulm69],
.art-modal-field[b-9asp7ulm69]  .art-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .art-modal-input[b-9asp7ulm69]::placeholder,
    .art-modal-field[b-9asp7ulm69]  .art-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .art-modal-input:focus[b-9asp7ulm69],
    .art-modal-field[b-9asp7ulm69]  .art-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* La lupa embebida a la derecha y el hueco que le deja al texto los aporta el propio CampoConBuscador
   (clases ccb-*). Aqui solo se le da la piel del input; no hay estilo de selector propio. */

.art-modal-preview[b-9asp7ulm69] {
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    padding: 14px;
}

.art-modal-preview-label[b-9asp7ulm69] {
    font-size: 12px;
    font-weight: 900;
    color: #64748b;
    margin-bottom: 10px;
}

/* Vista previa con el mismo aspecto que el arbol de familias (ArbolFamilias.razor). */
.art-modal-tree[b-9asp7ulm69] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.art-modal-tree-familia-row[b-9asp7ulm69] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
}

.art-modal-tree-toggle[b-9asp7ulm69] {
    font-size: 18px !important;
    color: #94a3b8;
    flex: 0 0 auto;
}

.art-modal-tree-familia-icon[b-9asp7ulm69] {
    font-size: 19px !important;
    color: #64748b;
    flex: 0 0 auto;
}

.art-modal-tree-familia-name[b-9asp7ulm69] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-modal-tree-badge[b-9asp7ulm69] {
    flex: 0 0 auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.art-modal-actions[b-9asp7ulm69] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que EditPerfilForm (sin animaciones de traslación en hover). */
.btn[b-9asp7ulm69] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-9asp7ulm69] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-9asp7ulm69] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-9asp7ulm69] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-9asp7ulm69] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-9asp7ulm69] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-9asp7ulm69] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-9asp7ulm69] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .art-modal-backdrop[b-9asp7ulm69] {
        padding: 0;
    }

    .art-modal-card[b-9asp7ulm69] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Almacenes/Articulos/Components/NuevaPropiedadArticuloModal.razor.rz.scp.css */
.art-modal-backdrop[b-c7gt4dp9p9] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.art-modal-card[b-c7gt4dp9p9] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.art-modal-card-large[b-c7gt4dp9p9] {
    max-width: 900px;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.art-modal-card .material-symbols-outlined[b-c7gt4dp9p9] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.art-modal-header[b-c7gt4dp9p9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}

.art-modal-title[b-c7gt4dp9p9] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-c7gt4dp9p9] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-body[b-c7gt4dp9p9] {
    flex: 1 1 auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    min-height: 0;
}

    .art-modal-body[b-c7gt4dp9p9]::-webkit-scrollbar {
        width: 8px;
    }

    .art-modal-body[b-c7gt4dp9p9]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 999px;
    }

    .art-modal-body[b-c7gt4dp9p9]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .art-modal-body[b-c7gt4dp9p9]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.art-modal-info-box[b-c7gt4dp9p9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    flex-shrink: 0;
}

.art-modal-info-icon[b-c7gt4dp9p9] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-c7gt4dp9p9] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-c7gt4dp9p9] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-properties-toolbar[b-c7gt4dp9p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fafcff;
    flex-shrink: 0;
}

.art-properties-count[b-c7gt4dp9p9] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.art-properties-help[b-c7gt4dp9p9] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.art-properties-table[b-c7gt4dp9p9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}

.art-property-row[b-c7gt4dp9p9] {
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #ffffff;
    overflow: visible;
    flex-shrink: 0;
}

.art-property-head[b-c7gt4dp9p9] {
    min-height: 50px;
    padding: 10px 14px;
    background: #fafcff;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px 16px 0 0;
}

.art-property-title[b-c7gt4dp9p9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

    .art-property-title .material-symbols-outlined[b-c7gt4dp9p9] {
        font-size: 18px;
        color: #2563eb;
    }

    .art-property-title span:last-child[b-c7gt4dp9p9] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.art-property-grid[b-c7gt4dp9p9] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) 130px;
    gap: 14px;
    padding: 16px 14px 18px;
    align-items: end;
}

.art-field[b-c7gt4dp9p9] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .art-field label[b-c7gt4dp9p9] {
        font-size: 12px;
        font-weight: 900;
        color: #334155;
    }

.art-field-order[b-c7gt4dp9p9] {
    max-width: none;
}

.art-modal-input[b-c7gt4dp9p9] {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .art-modal-input[b-c7gt4dp9p9]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .art-modal-input:focus[b-c7gt4dp9p9] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

.art-order-input[b-c7gt4dp9p9] {
    text-align: center;
}

.art-property-remove-btn[b-c7gt4dp9p9] {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid #fee2e2;
    background: #fff7f7;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.16s ease;
    flex-shrink: 0;
}

    .art-property-remove-btn:hover[b-c7gt4dp9p9] {
        background: #fef2f2;
        border-color: #fecaca;
    }

    .art-property-remove-btn .material-symbols-outlined[b-c7gt4dp9p9] {
        font-size: 18px;
    }

.art-empty[b-c7gt4dp9p9] {
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid #e2e8f0;
}

.art-modal-note[b-c7gt4dp9p9] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    flex-shrink: 0;
}

.art-modal-actions[b-c7gt4dp9p9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
    flex-shrink: 0;
}

.art-modal-secondary-btn[b-c7gt4dp9p9] {
    height: 40px;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.16s ease;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #334155;
}

    .art-modal-secondary-btn:hover[b-c7gt4dp9p9] {
        background: #f8fafc;
    }

    .art-modal-secondary-btn:disabled[b-c7gt4dp9p9] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Botones del footer con el mismo estilo que FamiliaNuevaModal (EditPerfilForm). */
.btn[b-c7gt4dp9p9] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-c7gt4dp9p9] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-c7gt4dp9p9] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar */
.btn-accept[b-c7gt4dp9p9] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-c7gt4dp9p9] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-c7gt4dp9p9] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-c7gt4dp9p9] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-c7gt4dp9p9] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla. */
@media (max-width: 768px) {
    .art-modal-backdrop[b-c7gt4dp9p9] {
        padding: 0;
    }

    .art-modal-card[b-c7gt4dp9p9] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .art-modal-header[b-c7gt4dp9p9],
    .art-modal-body[b-c7gt4dp9p9],
    .art-modal-actions[b-c7gt4dp9p9] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .art-property-grid[b-c7gt4dp9p9] {
        grid-template-columns: 1fr;
    }

    .art-field-order[b-c7gt4dp9p9] {
        max-width: none;
    }

    .art-properties-toolbar[b-c7gt4dp9p9] {
        flex-direction: column;
        align-items: stretch;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Almacenes/CambioPrecios/CambioPreciosPage.razor.rz.scp.css */
/* Cambio de precios: una tarjeta con la orden y otra con la vista previa. Mismo aire que el resto de pantallas
   de almacén: fondo claro, tarjetas con radio y sombra suave. */

.cpr-page[b-wbiq4u84un] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    max-width: 1200px;
}

.cpr-title[b-wbiq4u84un] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.cpr-subtitle[b-wbiq4u84un] {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
}

.cpr-card[b-wbiq4u84un] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.cpr-grid[b-wbiq4u84un] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cpr-grid-5[b-wbiq4u84un] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .cpr-grid[b-wbiq4u84un], .cpr-grid-5[b-wbiq4u84un] {
        grid-template-columns: 1fr;
    }
}

.cpr-page[b-wbiq4u84un]  .cpr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cpr-page[b-wbiq4u84un]  .cpr-label,
.cpr-page[b-wbiq4u84un]  .cpr-field label {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
}

.cpr-page[b-wbiq4u84un]  .cpr-input {
    width: 100%;
    height: 40px;
    border: 1px solid #dde5ee;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
}

.cpr-page[b-wbiq4u84un]  .cpr-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.cpr-num[b-wbiq4u84un] {
    text-align: right;
}

.cpr-check[b-wbiq4u84un] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.cpr-actions[b-wbiq4u84un] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cpr-error[b-wbiq4u84un] {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.cpr-resumen[b-wbiq4u84un] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* La vista previa puede tener miles de filas: scroll propio con la cabecera fija. */
.cpr-tabla-envoltorio[b-wbiq4u84un] {
    max-height: 55vh;
    overflow: auto;
    border: 1px solid #eef2f7;
    border-radius: 12px;
}

.cpr-tabla[b-wbiq4u84un] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cpr-tabla thead th[b-wbiq4u84un] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    text-align: left;
    font-weight: 700;
    color: #475569;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.cpr-tabla td[b-wbiq4u84un] {
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.cpr-tabla th.cpr-num[b-wbiq4u84un],
.cpr-tabla td.cpr-num[b-wbiq4u84un] {
    text-align: right;
}
/* _content/ErpPowergest/Presentation/Almacenes/CatalogoTablet/Pages/CatalogoTabletPage.razor.rz.scp.css */
/* CENTRAL DE TABLETS (`/catalogo-tablet`) — cómo reparte SU alto y su ancho.

   El ASPECTO (tarjetas, campos, interruptores, botones, insignias y el juego de comandos) NO está
   aquí: vive en `wwwroot/css/catalogo-tablet.css`, porque lo comparte con la ficha del terminal,
   que es otro componente —y el CSS aislado de Blazor no cruza esa frontera—. Aquí solo queda el
   cromo de ESTA pantalla: la fila «pestañas + comandos» y el panel de la pestaña activa.

   La raíz lleva tres clases y cada una aporta lo suyo: `tienda-web-page` (tokens y tarjeta, global),
   `ctab-page` (el aspecto del módulo, global) y `catalogo-tablet-page` (esto). */

/* La página reparte el alto: fila del rail y parte con su alto natural, y el panel de la pestaña se
   queda con lo que sobra y desplaza por dentro. Sin título ni subtítulo: la pantalla empieza en las
   pestañas. */
.catalogo-tablet-page[b-1wslds1ifa] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* LA FILA: vuelta al origen + rail de pestañas + comandos.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   La línea de 1px la lleva la FILA y no la pista de <ScrollableTabs> (que va en `tabbar--flush`,
   sin rail propio): así cruza el ancho completo, también por debajo de la barra de comandos, en vez
   de cortarse donde acaban las pestañas.

   El reparto de ancho lo gobierna `js/commandBar.js` midiendo el desbordamiento de esta fila, así
   que su contenido NO puede envolver ni encogerse por su cuenta: si lo hiciera, la fila siempre
   «cabría» y la barra no se replegaría nunca. */
.ctab-barra[b-1wslds1ifa] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* La vuelta al origen (N9) es otro componente y de fábrica mide 48px, que es justo lo que miden los
   comandos de esta fila (`cmdbar-plain`, como en el listado de clientes): se sienta con ellos sin
   tocarle nada. Rígida a propósito: si se encogiera, la fila «cabría» siempre y el script nunca
   replegaría la barra. Sin «volver=» en la URL no pinta nada y no deja hueco. */
.ctab-barra[b-1wslds1ifa]  .volver-chip {
    flex: 0 0 auto;
    align-self: center;
}

/* Título de la pantalla, a la izquierda de la fila; los comandos a la derecha.
   Dos fases, como en Tienda web: mientras los comandos tengan texto, el título va en una línea y NO
   cede (si pudiera encoger a 0 y partirse palabra a palabra, la fila «cabría» siempre y el script
   nunca replegaría la barra). Solo cuando la barra ya está replegada del todo
   (`command-bar-host-collapsed`) el título cede y envuelve. */
.ctab-titulo[b-1wslds1ifa] { flex: 0 0 auto; min-width: 0; }
.ctab-barra.command-bar-host-collapsed .ctab-titulo[b-1wslds1ifa] { flex: 1 1 auto; }
.ctab-titulo-h[b-1wslds1ifa] { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 850; color: #1f2937; letter-spacing: -0.02em; white-space: nowrap; }
.ctab-titulo-sub[b-1wslds1ifa] { margin-top: 4px; font-size: 13px; color: #6b7280; line-height: 1.45; white-space: nowrap; }
.ctab-barra.command-bar-host-collapsed .ctab-titulo-h[b-1wslds1ifa] { white-space: normal; overflow-wrap: break-word; }
.ctab-barra.command-bar-host-collapsed .ctab-titulo-sub[b-1wslds1ifa] { display: none; }

/* Las pestañas van en su fila, bajo la barra (pastillas de css/pestanas-pastilla.css). */
.ctab-tabs[b-1wslds1ifa] { flex: 0 0 auto; margin: 12px 0 0; }

/* Parte de la última corrida: una línea, no una tarjeta. Es un hecho reciente, no una sección. */
.ctab-parte[b-1wslds1ifa] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #dbe7fb;
    border-radius: 8px;
    background: #f6faff;
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
}

    .ctab-parte .material-symbols-rounded[b-1wslds1ifa] {
        font-size: 16px;
        color: #2563eb;
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }

/* Panel de la pestaña activa: rellena el alto restante y desplaza en vertical.

   El relleno lateral de 3 px no es decorativo: las tarjetas de dentro llevan sombra y este
   contenedor recorta en horizontal para que una tabla ancha no empuje la página. Sin ese margen la
   sombra se vería cortada a plomo contra el filo. */
.ctab-tab-content[b-1wslds1ifa] {
    flex: 1 1 auto;
    min-height: 0;
    /* COLUMNA FLEX, no bloque: es lo que hace que la sección de dentro ocupe TODO el alto que sobra.
       Como bloque, lo único que tenía la sección era el `height: 100%` de la hoja global, que se mide
       contra la caja de contenido de este panel —el relleno queda fuera— y, sobre todo, que la propia
       hoja global anula por debajo de 1100 px (`height: auto`): justo el ancho al que se mira esta
       pantalla en una tablet, y por eso la tabla se quedaba en su alto natural con hueco debajo. */
    display: flex;
    flex-direction: column;
    padding: 16px 3px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* La sección de la pestaña toma el alto sobrante y ni un píxel menos, a cualquier ancho: el reparto
   lo hace flex y no un porcentaje, así que ya no depende de que un ancestro tenga alto definido.
   El resto de la cadena hasta la tabla (`.tw-config-panel` → `.tw-tiendas-lista` →
   `.tw-tiendas-tabla` → `.tp-panel` → `.tp-shell`) ya es `flex: 1 1 auto` en la hoja global del
   módulo y en la de <TablaPaginada>; esta regla es el único eslabón que faltaba.

   El selector lleva la clase de la página además de la del módulo (0,3,0 frente a 0,2,0) a propósito:
   así gana también dentro del `@media (max-width: 1100px)` de la hoja global, que es justo donde se
   perdía el alto. */
.catalogo-tablet-page .tw-config-page[b-1wslds1ifa] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* Pestaña «Catálogo de las tablets»: el diseñador de Tienda web (<TiendaWebCatalogoTab>) toma el
   alto sobrante igual que las demás secciones. Es un componente hijo, por eso `::deep`. Su suelo
   (`min-height`) lo pone su propia hoja; por debajo de él se desplaza este panel, como allí. */
.ctab-tab-content[b-1wslds1ifa]  .cw-layout {
    flex: 1 1 auto;
}

    .ctab-tab-content[b-1wslds1ifa]::-webkit-scrollbar {
        width: 6px;
    }

    .ctab-tab-content[b-1wslds1ifa]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* PANTALLA ESTRECHA: el suelo sigue siendo la pantalla, y a partir de ahí la página crece.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Aquí la página deja de estar acotada al alto visible (`height: auto` + `overflow: visible`) para
   que un contenido largo —el formulario de «Conexión»— se desplace con la ventana en vez de
   comprimirse. Pero conserva el SUELO (`min-height: 100%`), y esa mitad es la que importa: con
   `min-height: 0`, estrechar la ventana por debajo de 980 px hacía que la página valiera lo que su
   contenido, y entonces toda la cadena de `flex: 1 1 auto` que llega hasta la tabla se quedaba sin
   nada que repartir. El resultado era una tabla que ENCOGÍA al estrechar la ventana, hasta el suelo
   de 240 px de su marco, con el hueco debajo.

   Por lo mismo `.ctab-tab-content` pasa a `min-height: auto`: como elemento flexible no debe
   encogerse por debajo de su contenido, porque aquí ya no lo recorta nadie —lo que sobra empuja el
   alto de la página y lo desplaza `.main-body`, que es justo lo que se busca en estrecho—. Es el
   mismo modelo del listado de clientes. */
@media (max-width: 980px) {
    .catalogo-tablet-page[b-1wslds1ifa] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .ctab-tab-content[b-1wslds1ifa] {
        overflow-y: visible;
        min-height: auto;
    }
}

/* COLUMNAS REPLEGABLES
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Mismo mecanismo que el listado de clientes: al estrechar la ventana caen primero las columnas que
   menos dicen, en vez de apretar todas hasta que el texto se parte. Los anchos los declara cada
   columna (`ColumnaTabla.Ancho`, inline en el `<th>`); aquí solo se decide QUÉ columna desaparece y
   a QUÉ ancho. La clase la lleva la cabecera Y sus celdas (`ColumnaTabla.CssClass`), así que basta
   con ocultarla una vez.

   Van con `::deep` porque el markup lo pinta <TablaPaginada>, otro componente: el CSS aislado de
   esta página no lo alcanza por sí solo.

   Los cortes son los mismos para las dos tablas —están en pestañas distintas, nunca se ven a la vez—
   y salen de sus anchos fijos: terminales suma 590 px de columnas fijas más el nombre; actividad,
   490 px más el resultado. */

/* Terminales: primero los contadores de envío/recepción, que son un dato de diagnóstico. */
@media (max-width: 1180px) {
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-col-contadores {
        display: none;
    }
}

/* Actividad: primero el nombre del fichero; el «Resultado», que se queda, ya lleva el detalle. */
@media (max-width: 1180px) {
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-col-fichero {
        display: none;
    }
}

@media (max-width: 1000px) {
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-col-ultimo,
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-col-jterminal {
        display: none;
    }
}

/* Última en caer de la actividad: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho más que para identificar la fila. */
@media (max-width: 820px) {
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-col-sentido {
        display: none;
    }
}

/* «ESTADO» NO SE REPLIEGA: SE ENCOGE
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Si una tablet está activa es lo primero que se viene a mirar, así que la columna no desaparece
   nunca; lo que hace en pantalla estrecha es soltar el ancho que ocupa el texto. La insignia pasa a
   ser un punto de color —el mismo que ya distingue activo de inactivo, ahora en versión sólida para
   que se vea a 12 px— y la nota de debajo no se pinta. Nada de eso se pierde: la plantilla pone
   siempre el estado completo en el `title` de la celda, que es lo que se lee al posarse encima. El
   texto de la insignia sigue en el DOM (`font-size: 0`, no `display: none`) para que un lector de
   pantalla lo cante igual. */
@media (max-width: 820px) {
    /* El ancho lo declara el descriptor de la columna, y llega como `style="width:170px"` en el
       `<th>`: un estilo en línea no lo baja una regla normal. Aquí `!important` es la vía, no un
       parche. Los 68 px son la cabecera «ESTADO» (11 px en versalitas) más su botón de orden. */
    .catalogo-tablet-page[b-1wslds1ifa]  th.ctab-col-estado {
        width: 68px !important;
    }

    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-estado-celda .tw-tienda-badge {
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        min-height: 0;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
    }

    /* El fondo pálido de la insignia larga es invisible en un punto de 12 px: color sólido. */
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-estado-celda .tw-tienda-badge.ok {
        background: #16a34a;
        border-color: #16a34a;
    }

    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-estado-celda .tw-tienda-badge.neutral {
        background: #9ca3af;
        border-color: #9ca3af;
    }

    /* «reinicio pendiente de subir», «envío completo pendiente»: lo dice el `title` de la celda. */
    .catalogo-tablet-page[b-1wslds1ifa]  .ctab-estado-celda .tw-order-subtext {
        display: none;
    }
}


/* FILA DE LA CENTRAL
   La central de la empresa encabeza el listado pero no es una tablet: no tiene ficha que abrir, así
   que la fila no se ofrece como pulsable, y un fondo tenue la separa de las tablets. La marca la pone
   la vista con `ClaseFilaExtra`; `::deep` porque la fila la pinta <TablaPaginada>. */
.catalogo-tablet-page[b-1wslds1ifa]  .ctab-fila-central,
.catalogo-tablet-page[b-1wslds1ifa]  .ctab-fila-central:hover {
    cursor: default;
}

.catalogo-tablet-page[b-1wslds1ifa]  .ctab-fila-central > td,
.catalogo-tablet-page[b-1wslds1ifa]  .ctab-fila-central:hover > td {
    background: #f8fafc;
}
/* _content/ErpPowergest/Presentation/Almacenes/CatalogoTablet/Pages/TerminalFicha.razor.rz.scp.css */
/* FICHA DE UN TERMINAL (`/catalogo-tablet/terminal/…`) — cómo reparte SU alto.

   El ASPECTO (tarjetas, campos, interruptores, insignias y el juego de comandos) NO está aquí: es
   el mismo que el de la central y vive en `wwwroot/css/catalogo-tablet.css`, que es global porque
   el CSS aislado de Blazor no cruza de un componente a otro. Aquí solo queda el cromo de ESTA
   pantalla: una cabecera que no se mueve y un cuerpo que rueda.

   La raíz lleva tres clases y cada una aporta lo suyo: `tienda-web-page` (tokens y tarjeta, global),
   `ctab-page` (el aspecto del módulo, global) y `ctab-ficha-page` (esto). */

/* Dos franjas: la cabecera con su alto natural y el formulario con todo lo demás. El `overflow:
   hidden` de aquí es lo que obliga al cuerpo a desplazarse POR DENTRO en vez de estirar la página:
   sin él, la cabecera se iría hacia arriba con el resto al bajar por el formulario. */
.ctab-ficha-page[b-pkymhkj0u0] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* LA CABECERA — fija: vuelta, identidad y comandos.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Misma fila y misma línea de 1px que el rail de pestañas de la central, para que las dos
   pantallas del módulo empiecen igual.

   El reparto de ancho lo gobierna `js/commandBar.js` midiendo el desbordamiento de esta fila, así
   que su contenido NO puede envolver ni encogerse por su cuenta: si lo hiciera, la fila siempre
   «cabría» y la barra no se replegaría nunca. */
.ctab-ficha-header[b-pkymhkj0u0] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

/* FASES 1-3: el nombre del terminal conserva su ancho y no cede; quien se estrecha es la barra de
   comandos (pierde los textos y repliega botones al «···»). */
.ctab-ficha-identidad[b-pkymhkj0u0] {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    /* La insignia Activo/Inactivo no se estrecha: quien cede es el nombre, que sí puede recortarse. */
    .ctab-ficha-identidad .tw-tienda-badge[b-pkymhkj0u0] {
        flex: 0 0 auto;
    }

/* FASE 4: la barra ya está en el hueso («···» y nada más) y aún no cabe. El script marca la fila
   con `command-bar-host-collapsed` y solo ENTONCES el nombre cede y se recorta con puntos
   suspensivos (`text-overflow` de `.tw-ficha-titulo`). */
.ctab-ficha-header.command-bar-host-collapsed .ctab-ficha-identidad[b-pkymhkj0u0] {
    flex: 1 1 auto;
}

/* EL CUERPO — lo único que se desplaza.

   El relleno lateral de 3 px no es decorativo: las tarjetas llevan sombra y este contenedor recorta
   en horizontal para que nada empuje la página. Sin ese margen la sombra se vería cortada a plomo
   contra el filo. */
.ctab-ficha-body[b-pkymhkj0u0] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 3px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ctab-ficha-body[b-pkymhkj0u0]::-webkit-scrollbar {
        width: 6px;
    }

    .ctab-ficha-body[b-pkymhkj0u0]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* NO hay excepción por ancho: la ficha reparte su alto SIEMPRE, en un monitor y en un móvil. Que la
   cabecera se quede fija y el formulario ruede por dentro —con su propia barra de desplazamiento a la
   vista— es justo lo que se quiere de una ficha larga: los comandos y el nombre del terminal no se van
   nunca de la pantalla, y se ve de un vistazo cuánto queda por debajo.

   Aquí hubo una media query que por debajo de 980 px de ancho pasaba el scroll a la página (copiada de
   la central, que sí la necesita: sus pestañas llevan tablas con su propio desplazamiento). Sobraba, y
   además escondía una trampa que dejó la pantalla sin scroll ninguno: relajaba el `overflow-y` del
   cuerpo a `visible`, pero con `overflow-x: hidden` puesto eso COMPUTA A `auto` —la especificación de
   CSS no admite `visible` junto a `hidden` en el otro eje—, así que el cuerpo seguía siendo un
   contenedor de scroll sin nada que desplazar, y su `overscroll-behavior: contain` se comía la rueda
   antes de que llegara al `.main-body`. Medido: 928 px que bajar y ni un píxel de movimiento.

   Si algún día vuelve a hacer falta ceder el scroll a la página, hay que apagar el contenedor ENTERO
   (`overflow: visible` en los dos ejes) y soltar la contención; a medias no funciona. */
/* _content/ErpPowergest/Presentation/Almacenes/Recuento/Pages/RecuentoPage.razor.rz.scp.css */
/* Recuento de inventario (FUN-11). Sobrio y sin dependencias de Syncfusion, como el resto de almacén.
   La paleta se declara en un selector que cubre TAMBIÉN lo que se pinte fuera de .rec-page (si algún día
   hay diálogo): una variable sin valor no da un color por defecto, tumba la declaración entera y deja
   botones invisibles y campos sin borde (lo que pasó en FUN-356). */
.rec-page[b-gqahcw9ds4],
.rec-dialogo[b-gqahcw9ds4] {
    --rec-border: #e8ecf2;
    --rec-border-strong: #d7dee8;
    --rec-text: #0f172a;
    --rec-muted: #64748b;
    --rec-primary: #2563eb;
    --rec-falta: #dc2626;
    --rec-sobra: #16a34a;
    color: var(--rec-text);
}

.rec-page[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    width: 100%;
    box-sizing: border-box;
}

.rec-header[b-gqahcw9ds4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rec-title[b-gqahcw9ds4] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.rec-subtitle[b-gqahcw9ds4] {
    margin-top: 4px;
    font-size: 13px;
    color: var(--rec-muted);
}

.rec-panel[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--rec-border);
    border-radius: 12px;
}

.rec-almacen[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 460px;
}

.rec-label[b-gqahcw9ds4] {
    font-size: 12.5px;
    font-weight: 700;
    color: #414754;
}

.rec-select[b-gqahcw9ds4],
.rec-input[b-gqahcw9ds4] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--rec-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--rec-text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.rec-select:focus[b-gqahcw9ds4],
.rec-input:focus[b-gqahcw9ds4] {
    outline: 2px solid #bfdbfe;
    outline-offset: -1px;
    border-color: var(--rec-primary);
}

.rec-hint[b-gqahcw9ds4] {
    font-size: 12px;
    color: var(--rec-muted);
}

/* ── Tabla ────────────────────────────────────────────── */

/* El envoltorio es quien scrolla en horizontal: la página nunca lo hace. */
.rec-tabla-envoltorio[b-gqahcw9ds4] {
    width: 100%;
    overflow-x: auto;
}

.rec-tabla[b-gqahcw9ds4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rec-tabla th[b-gqahcw9ds4] {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--rec-border);
    color: var(--rec-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.rec-tabla td[b-gqahcw9ds4] {
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.rec-num[b-gqahcw9ds4] {
    text-align: right;
    white-space: nowrap;
}

.rec-tabla th.rec-num[b-gqahcw9ds4] {
    text-align: right;
}

.rec-col-codigo[b-gqahcw9ds4] {
    width: 170px;
}

.rec-col-quitar[b-gqahcw9ds4] {
    width: 44px;
}

.rec-input-codigo[b-gqahcw9ds4] {
    width: 100%;
    text-transform: uppercase;
}

.rec-input-num[b-gqahcw9ds4] {
    width: 110px;
    text-align: right;
}

.rec-nombre[b-gqahcw9ds4] {
    color: var(--rec-text);
}

.rec-bloqueo[b-gqahcw9ds4] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--rec-falta);
}

.rec-fila-bloqueada[b-gqahcw9ds4] {
    background: #fef2f2;
}

.rec-dif-falta[b-gqahcw9ds4] {
    color: var(--rec-falta);
    font-weight: 700;
}

.rec-dif-sobra[b-gqahcw9ds4] {
    color: var(--rec-sobra);
    font-weight: 700;
}

.rec-dif-cero[b-gqahcw9ds4] {
    color: var(--rec-muted);
}

.rec-sin-lineas[b-gqahcw9ds4] {
    padding: 18px 10px;
    color: var(--rec-muted);
    text-align: center;
}

/* ── Acciones ─────────────────────────────────────────── */

.rec-acciones[b-gqahcw9ds4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rec-spacer[b-gqahcw9ds4] {
    flex: 1 1 auto;
}

.rec-resumen[b-gqahcw9ds4] {
    font-size: 12.5px;
    color: var(--rec-muted);
}

.rec-btn[b-gqahcw9ds4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--rec-border-strong);
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.rec-btn:hover:not(:disabled)[b-gqahcw9ds4] {
    background: rgba(211, 228, 254, .4);
    border-color: #a9b3cc;
    color: #0b1c30;
}

.rec-btn:disabled[b-gqahcw9ds4] {
    opacity: .5;
    cursor: not-allowed;
}

.rec-btn-primary[b-gqahcw9ds4] {
    border-color: var(--rec-primary);
    background: var(--rec-primary);
    color: #fff;
}

.rec-btn-primary:hover:not(:disabled)[b-gqahcw9ds4] {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.rec-btn-quitar[b-gqahcw9ds4] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-color: transparent;
    color: var(--rec-muted);
}

.rec-btn-quitar:hover[b-gqahcw9ds4] {
    color: var(--rec-falta);
}

.rec-btn .material-symbols-rounded[b-gqahcw9ds4],
.rec-btn-quitar .material-symbols-rounded[b-gqahcw9ds4] {
    font-size: 18px;
}

/* ── Estado vacío y resultado ─────────────────────────── */

.rec-vacio[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 12px;
    color: var(--rec-muted);
}

.rec-vacio-ico[b-gqahcw9ds4] {
    font-size: 34px;
    color: #94a3b8;
}

.rec-vacio p[b-gqahcw9ds4] {
    margin: 0;
}

.rec-resultado[b-gqahcw9ds4] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

.rec-resultado-ok[b-gqahcw9ds4] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.rec-resultado-mal[b-gqahcw9ds4] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Aviso dentro del panel. En su versión FUERTE lo lleva el modo absoluto, que es el único sitio de
   la pantalla donde una elección puede hacer perder datos: lo que se mueva entre contar y aplicar. */
.rec-aviso[b-gqahcw9ds4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 12.5px;
    color: #854d0e;
}

.rec-aviso .material-symbols-rounded[b-gqahcw9ds4] {
    font-size: 18px;
    line-height: 1.2;
}

.rec-aviso-fuerte[b-gqahcw9ds4] {
    background: #fff7ed;
    border-color: #fdba74;
    border-left-width: 4px;
    color: #7c2d12;
}

.rec-aviso-fuerte .material-symbols-rounded[b-gqahcw9ds4] {
    color: #c2410c;
}

/* ── Lista de recuentos abiertos y alta de uno nuevo ───── */

/* Los dos bloques de la primera vista. Se separan con una línea en vez de con una tarjeta cada uno:
   son dos partes de la misma pregunta («¿continúo uno o empiezo otro?»), no dos secciones. */
.rec-bloque[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rec-bloque + .rec-bloque[b-gqahcw9ds4] {
    padding-top: 16px;
    border-top: 1px solid var(--rec-border);
}

.rec-bloque-titulo[b-gqahcw9ds4] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.rec-bloque-ayuda[b-gqahcw9ds4] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rec-muted);
    max-width: 78ch;
}

.rec-col-continuar[b-gqahcw9ds4] {
    width: 130px;
    text-align: right;
}

.rec-tabla-abiertos td[b-gqahcw9ds4] {
    white-space: nowrap;
}

.rec-tabla-abiertos td.rec-nombre[b-gqahcw9ds4] {
    white-space: normal;
}

/* Almacén y nombre, uno al lado del otro mientras quepan. */
.rec-nuevo-campos[b-gqahcw9ds4] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.rec-input-nombre[b-gqahcw9ds4] {
    width: 100%;
}

/* ── El modo del recuento ──────────────────────────────── */

/* Las dos opciones se ven ENTERAS, con su explicación: es la decisión que más cuesta si se toma mal
   y no se toma todos los días, así que no cabe en un desplegable con un tooltip. */
.rec-modos[b-gqahcw9ds4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.rec-modos legend[b-gqahcw9ds4] {
    padding: 0;
    margin-bottom: 8px;
}

.rec-modo[b-gqahcw9ds4] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex: 1 1 320px;
    padding: 11px 13px;
    border: 1px solid var(--rec-border-strong);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.rec-modo:hover[b-gqahcw9ds4] {
    border-color: #a9b3cc;
}

.rec-modo-elegido[b-gqahcw9ds4] {
    border-color: var(--rec-primary);
    background: #f5f9ff;
}

.rec-modo input[type="radio"][b-gqahcw9ds4] {
    margin-top: 2px;
    flex: 0 0 auto;
}

.rec-modo-texto[b-gqahcw9ds4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rec-modo-texto strong[b-gqahcw9ds4] {
    font-size: 13px;
}

.rec-modo-texto small[b-gqahcw9ds4] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--rec-muted);
}

/* ── Cabecera del recuento que se está contando ─────────── */

.rec-cabecera-recuento[b-gqahcw9ds4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rec-cabecera-nombre[b-gqahcw9ds4] {
    font-size: 15px;
    font-weight: 700;
}

.rec-cabecera-datos[b-gqahcw9ds4] {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--rec-muted);
}

/* Quién hizo la lectura desde un terminal. Vacío = se contó en esta pantalla, y ahí el hueco dice
   más que un «—»: lo que se busca en esta columna es justamente lo que NO se contó aquí. */
.rec-col-contadopor[b-gqahcw9ds4] {
    width: 180px;
    font-size: 12px;
    color: var(--rec-muted);
}

/* Descartar cierra el recuento: se ve que es destructivo antes de pulsarlo, no solo en el modal. */
.rec-btn-peligro[b-gqahcw9ds4] {
    color: var(--rec-falta);
}

.rec-btn-peligro:hover:not(:disabled)[b-gqahcw9ds4] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/AvisoSincronizacionTienda.razor.rz.scp.css */
/* ---- Aviso flotante de la sincronización con la tienda en curso ----
   Fijo arriba y centrado, por encima de cualquier pantalla: una publicación puede tardar minutos y el
   aviso tiene que verse aunque se trabaje en otra parte de la aplicación. Es un enlace a la tienda web. */

.tw-progreso[b-2qf7j5h0ei] {
    position: fixed;
    z-index: 1100;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(28rem, calc(100vw - 32px));
    padding: 12px 16px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    animation: tw-progreso-entra-b-2qf7j5h0ei 0.2s ease-out;
    color: inherit;
    text-decoration: none;
    display: block;
}

    .tw-progreso:hover[b-2qf7j5h0ei] {
        border-color: #bfdbfe;
    }

.tw-progreso-cabecera[b-2qf7j5h0ei] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #24292f;
}

.tw-progreso-icono[b-2qf7j5h0ei] {
    font-size: 20px;
    color: #2563eb;
}

.tw-progreso-texto[b-2qf7j5h0ei] {
    flex: 1;
    font-weight: 600;
}

.tw-progreso-porcentaje[b-2qf7j5h0ei] {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

.tw-progreso-tienda[b-2qf7j5h0ei] {
    margin: 0 0 8px 28px;
    font-size: 12px;
    color: #6b7280;
}

.tw-progreso-pista[b-2qf7j5h0ei] {
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.tw-progreso-barra[b-2qf7j5h0ei] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transition: width 0.3s ease;
}

@keyframes tw-progreso-entra-b-2qf7j5h0ei {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebCatalogosModal.razor.rz.scp.css */
/* Gestión de catálogos (G6). MISMO lenguaje visual que el resto de altas de la aplicación —«Nueva
   categoría» (TiendaWebCategoriaModal), «Nueva familia» y «Nuevo artículo»—: tarjeta de 560 px con
   radio 20, cabecera con título, cuerpo como única pieza que se desplaza y pie con las acciones a la
   derecha. Antes esto era una ventanita de 11 px con su propio estilo compacto que no se parecía a
   ningún otro modal de la casa.

   Las clases base (cw-input, cw-label, cw-btn, cw-mini-btn…) se repiten aquí porque el CSS de Blazor
   está AISLADO por componente: las del diseñador no alcanzan a este modal. */

/* Fondo: el mismo velo y la misma altura de pila que los demás modales, para que no quede por debajo
   de nada cuando se abre encima del diseñador. */
.cw-menu-overlay[b-9yc4re7vb1] {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(15, 23, 42, 0.48);
}

/* ─── Tarjeta ────────────────────────────────────────────────────────────────────────────────────
   Columna de tres piezas —cabecera, cuerpo y pie— con el CUERPO como única parte que se estira y se
   desplaza. Sin eso, el tope de alto recorta por abajo y el pie con «Crear vacío» se queda fuera de
   la pantalla en cuanto hay unos cuantos catálogos. */
.cwc-modal[b-9yc4re7vb1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: min(560px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    box-sizing: border-box;
}

/* Los iconos no se seleccionan (mismo criterio que en el resto de la pantalla). Este modal se pinta
   FUERA de `.tienda-web-page`, así que la regla global no lo alcanza. */
.cwc-modal .material-symbols-outlined[b-9yc4re7vb1] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ─── Cabecera ───────────────────────────────────────────────────────────────────────────────────
   Solo el título, como en el alta de categoría y en el alta de familias. El aspa se queda porque
   este modal no tiene «Cancelar» en el pie: es la única salida además de pulsar fuera. */

.cwc-head[b-9yc4re7vb1] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.cwc-titulo[b-9yc4re7vb1] {
    font-size: 20px;
    font-weight: 900;
    color: #24292f;
    line-height: 1.15;
}

.cwc-cerrar[b-9yc4re7vb1] {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .cwc-cerrar:hover[b-9yc4re7vb1] {
        background: #f6f8fa;
        border-color: #d0d7de;
        color: #24292f;
    }

    .cwc-cerrar .material-symbols-outlined[b-9yc4re7vb1] {
        font-size: 19px;
        pointer-events: none;
    }

/* ─── Cuerpo: la ÚNICA pieza que se desplaza ─────────────────────────────────────────────────────
   `min-height: 0` no es adorno: sin él un hijo flex se niega a encoger por debajo de su contenido y
   el desplazamiento nunca aparece. */
.cwc-body[b-9yc4re7vb1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─── Ficha de un catálogo ───────────────────────────────────────────────────────────────────── */

.cwc-fila[b-9yc4re7vb1] {
    border: 1px solid #d0d7de;
    border-radius: 16px;
    background: #fafcff;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* El catálogo en el que se está trabajando: el mismo azul suave de las cajas informativas. */
.cwc-fila.activo[b-9yc4re7vb1] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.cwc-fila-cab[b-9yc4re7vb1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cwc-fila-cab .cw-input[b-9yc4re7vb1] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* El tipo («Catálogo de las tablets» / «de la tienda») no se estira: el sitio es del nombre.
       Solo ancho: el aspecto del desplegable es el global (desplegables.css). */
    .cwc-fila-cab .cwc-tipo-select[b-9yc4re7vb1] {
        flex: 0 0 auto;
        width: auto;
    }

/* Distintivos del catálogo: pastillas, como el «Borrador» de la vista previa del alta de categoría. */
.cwc-tipo[b-9yc4re7vb1],
.cwc-defecto[b-9yc4re7vb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.cwc-tipo[b-9yc4re7vb1] {
    background: #ffffff;
    color: #57606a;
    border: 1px solid #d0d7de;
}

.cwc-defecto[b-9yc4re7vb1] {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

/* Idiomas: campo de verdad —rótulo arriba, campo debajo, ayuda al pie—, como en el resto de modales.
   Antes iba en una sola línea apretada con el rótulo a la izquierda. */
.cwc-fila-idiomas[b-9yc4re7vb1] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* El pie lleva el campo «Publica en» Y las acciones de la ficha: el rótulo ocupa su propia línea y
   debajo se reparten el desplegable (que crece) y los botones. */
.cwc-fila-pie[b-9yc4re7vb1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .cwc-fila-pie .cw-label[b-9yc4re7vb1] {
        flex: 0 0 100%;
    }

    .cwc-fila-pie .cw-input[b-9yc4re7vb1] {
        flex: 1 1 160px;
        min-width: 0;
    }

    /* Sin tienda (catálogo digital) la ayuda ocupa el hueco del campo y los botones siguen a la derecha. */
    .cwc-fila-pie .cw-ayuda[b-9yc4re7vb1] {
        flex: 1 1 160px;
    }

/* ─── Pie: alta de un catálogo nuevo ─────────────────────────────────────────────────────────────
   Se separa a propósito del listado de arriba —fondo gris, línea de corte y sombra hacia el cuerpo—
   porque NO es un catálogo más de la lista: es el formulario para crear uno. Sin ese corte, sus dos
   campos parecían la última ficha del listado. */

.cwc-nuevo[b-9yc4re7vb1] {
    flex: 0 0 auto;
    border-top: 1px solid #d0d7de;
    background: #f6f8fa;
    box-shadow: inset 0 6px 10px -8px rgba(15, 23, 42, 0.14);
    padding: 16px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* Rótulo de la SECCIÓN, no de un campo: manda sobre los dos que tiene debajo. */
    .cwc-nuevo > .cw-label[b-9yc4re7vb1] {
        font-size: 14px;
        font-weight: 900;
        color: #24292f;
    }

.cwc-nuevo-campos[b-9yc4re7vb1] {
    display: flex;
    gap: 10px;
}

    .cwc-nuevo-campos .cw-input[b-9yc4re7vb1] {
        flex: 1 1 0;
        min-width: 0;
    }

.cwc-nuevo-acciones[b-9yc4re7vb1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ─── Piezas de formulario ───────────────────────────────────────────────────────────────────── */

.cw-label[b-9yc4re7vb1] {
    font-size: 13px;
    font-weight: 900;
    color: #24292f;
}

/* `min-height` ADEMÁS de `height`: dentro de un flex en columna (el pie en móvil) `flex-basis: 0`
   gana a `height` y los campos se aplastan a una raya de dos píxeles. El mínimo los sostiene pase lo
   que pase con el reparto de espacio. */
.cw-input[b-9yc4re7vb1] {
    width: 100%;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .cw-input[b-9yc4re7vb1]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .cw-input:focus[b-9yc4re7vb1] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    /* Sin permiso de gestión los campos se ven, pero apagados: que estén muertos tiene que notarse
       antes de intentar escribir en ellos. */
    .cw-input:disabled[b-9yc4re7vb1] {
        background: #f6f8fa;
        color: #9ca3af;
        cursor: not-allowed;
    }

/* En el pie, sobre fondo gris, los campos blancos son los que dicen «aquí se escribe». */
.cwc-nuevo .cw-input:disabled[b-9yc4re7vb1] {
    background: #d0d7de;
}

.cw-ayuda[b-9yc4re7vb1] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* ─── Botones del pie ────────────────────────────────────────────────────────────────────────────
   LOS MISMOS que el pie del alta de categoría y del alta de familias (`.btn` + `.btn-cancel` /
   `.btn-accept`, que vienen de EditPerfilForm): el secundario en gris relleno a la izquierda y el
   afirmativo en blanco con marco a la derecha.

   «::deep» NO es opcional: los dos botones son <SfButton>, y el <button> real lo pinta el componente
   HIJO, así que NO lleva el atributo de ámbito y un `.cw-btn.e-btn` a secas no lo toca nunca —era la
   razón de que estos dos siguieran con la piel de Syncfusion pasara lo que pasara aquí—. Anclado en
   `.cwc-nuevo-acciones`, que sí es de este componente, para no sangrar a otros. Misma solución que
   `.tw-modal-input` en el alta de categoría.

   Los `!important` son contra los estilos de Syncfusion (`.e-btn`), no contra el resto del fichero. */

.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn.e-btn {
    height: auto;
    min-height: 0;
    padding: 0.55rem 1.25rem !important;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    text-transform: none !important;
    cursor: pointer;
    background: #6b7280 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn.e-btn:hover {
    background: #4b5563 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn.e-btn:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn.e-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* El afirmativo: «Crear vacío». Va después para ganarle el borde y el fondo al base. */
.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn-primary.e-btn {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #000000 !important;
}

.cwc-nuevo-acciones[b-9yc4re7vb1]  .cw-btn-primary.e-btn:hover {
    background: #f3f4f6 !important;
}

/* ─── Acciones de cada ficha ─────────────────────────────────────────────────────────────────────
   Los MISMOS botones-icono que la columna «Acciones» de la rejilla de almacenes (`.alm-action-btn`):
   30 px, radio 8, fondo transparente; el de trabajar en tinte primary y el de borrar en gris que
   vira a rojo al pasar por encima. También <SfButton>, así que también por «::deep». */

.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn.e-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 0;
    padding: 0 !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent !important;
    border: 1px solid rgba(0, 40, 142, 0.2) !important;
    color: #00288e !important;
    box-shadow: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn.e-btn:hover {
    background: rgba(0, 40, 142, 0.1) !important;
}

.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn.e-btn .material-symbols-outlined {
    font-size: 18px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn.e-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Eliminar: gris neutro SIN marco; el rojo aparece solo al apuntarlo. Un borrado no se anuncia en
   rojo permanente al lado de una acción corriente. */
.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn-danger.e-btn {
    border-color: transparent !important;
    color: #444653 !important;
}

.cwc-fila-pie[b-9yc4re7vb1]  .cw-mini-btn-danger.e-btn:hover {
    background: rgba(186, 26, 26, 0.1) !important;
    border-color: transparent !important;
    color: #ba1a1a !important;
}

/* Pantallas pequeñas: el modal ocupa TODA la pantalla y se desplaza por dentro; mismo corte y mismo
   trato que el alta de categoría y el alta de familias. */
@media (max-width: 560px) {
    .cwc-modal[b-9yc4re7vb1] {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* Los campos del pie se apilan. `flex: 0 0 auto` es OBLIGATORIO: heredar el `flex: 1 1 0` de la
       fila los dejaría con altura base cero y el reparto de espacio los aplastaría. */
    .cwc-nuevo-campos[b-9yc4re7vb1] {
        flex-direction: column;
    }

        .cwc-nuevo-campos .cw-input[b-9yc4re7vb1] {
            flex: 0 0 auto;
            width: 100%;
        }

    /* Los dos botones se reparten el ancho mitad y mitad, como el pie de los demás modales. Por
       «::deep» por lo mismo que arriba: el <button> lo pinta SfButton, no este componente. */
    .cwc-nuevo-acciones[b-9yc4re7vb1]  .e-btn {
        flex: 1 1 0;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebCategoriaModal.razor.rz.scp.css */
.tw-modal-backdrop[b-anhbauursn] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Columna de tres piezas —cabecera, cuerpo y pie— con el CUERPO como única parte que se estira y
   se desplaza. Sin esto, el `max-height` recorta por abajo (`overflow: hidden`) y el pie con los
   botones se queda fuera de la pantalla: es lo que hace falta para que a pantalla completa el
   formulario siga siendo usable. Misma estructura que el alta de familias de Artículos. */
.tw-modal-card[b-anhbauursn] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos no se seleccionan (mismo criterio que en el resto de la pantalla y que el alta de
   familias). El modal se pinta FUERA de `.tienda-web-page`, así que la regla global no lo alcanza. */
.tw-modal-card .material-symbols-outlined[b-anhbauursn] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.tw-modal-header[b-anhbauursn] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.tw-modal-title[b-anhbauursn] {
    font-size: 20px;
    font-weight: 900;
    color: #24292f;
    line-height: 1.15;
}

.tw-modal-subtitle[b-anhbauursn] {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

/* La ÚNICA pieza que se estira y se desplaza. `min-height: 0` no es adorno: sin él un hijo flex se
   niega a encoger por debajo de su contenido y el scroll nunca aparece. */
.tw-modal-body[b-anhbauursn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tw-modal-info-box[b-anhbauursn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.tw-modal-info-icon[b-anhbauursn] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.tw-modal-info-title[b-anhbauursn] {
    font-size: 13px;
    font-weight: 900;
    color: #24292f;
    margin-bottom: 3px;
}

.tw-modal-info-text[b-anhbauursn] {
    font-size: 12px;
    color: #57606a;
    line-height: 1.4;
}

.tw-modal-field[b-anhbauursn] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tw-modal-label[b-anhbauursn] {
    font-size: 13px;
    font-weight: 900;
    color: #24292f;
}

.tw-modal-field-help[b-anhbauursn] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.tw-modal-preview[b-anhbauursn] {
    border: 1px solid #d0d7de;
    border-radius: 16px;
    background: #fafcff;
    padding: 14px;
}

.tw-modal-preview-label[b-anhbauursn] {
    font-size: 12px;
    font-weight: 900;
    color: #6b7280;
    margin-bottom: 10px;
}

.tw-modal-preview-row[b-anhbauursn] {
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
}

.tw-modal-preview-icon[b-anhbauursn] {
    font-size: 18px;
    color: #2563eb;
}

.tw-modal-preview-name[b-anhbauursn] {
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-modal-note[b-anhbauursn] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 14px;
    padding: 12px 14px;
}

.tw-modal-actions[b-anhbauursn] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones del pie: los MISMOS que el alta de familias (FamiliaNuevaModal), que a su vez los toma de
   EditPerfilForm. Se repiten aquí y no se comparten porque el CSS de Blazor está AISLADO por
   componente. Antes esto era un par propio (`tw-modal-primary/secondary-btn`, azul relleno) y hacía
   que dos altas equivalentes de la aplicación no se parecieran en nada. */
.btn[b-anhbauursn] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-anhbauursn] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-anhbauursn] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Crear categoría) */
.btn-accept[b-anhbauursn] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-anhbauursn] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-anhbauursn] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-anhbauursn] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-anhbauursn] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa TODA la pantalla, con desplazamiento vertical dentro
   del cuerpo. Mismo corte y mismo trato que el alta de familias de Artículos: se le quita el relleno
   al fondo y a la tarjeta el radio, el marco y los topes de ancho y alto. */
@media (max-width: 560px) {
    .tw-modal-backdrop[b-anhbauursn] {
        padding: 0;
    }

    .tw-modal-card[b-anhbauursn] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}

/* «::deep» además del selector directo: el campo de categoría padre es un <CampoConBuscador>, y su
   <input> hereda esta clase vía ClaseInput pero lo renderiza el componente HIJO, así que el CSS con
   ámbito no lo marcaría y el campo saldría SIN estilo. Anclado en .tw-modal-field para no sangrar a
   otros componentes. Misma solución que .art-modal-input en el alta de familias. */
.tw-modal-input[b-anhbauursn],
.tw-modal-field[b-anhbauursn]  .tw-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .tw-modal-input[b-anhbauursn]::placeholder,
    .tw-modal-field[b-anhbauursn]  .tw-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .tw-modal-input:focus[b-anhbauursn],
    .tw-modal-field[b-anhbauursn]  .tw-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* La lupa embebida a la derecha y el hueco que le deja al texto los pone el propio CampoConBuscador
   (clases ccb-*). Aquí solo se le da la piel del input. */

.tw-modal-preview-row[b-anhbauursn] {
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
}

.tw-modal-preview-icon[b-anhbauursn] {
    font-size: 18px;
    color: #2563eb;
}

.tw-modal-preview-name[b-anhbauursn] {
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-modal-status-draft[b-anhbauursn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    white-space: nowrap;
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebContenidoPanel.razor.rz.scp.css */
/* Ficha de contenido publicable (G4) dentro de la tercera columna del diseñador.
   CSS propio (aislamiento por componente): las clases `cw-` de la pestaña y del panel de detalle no
   alcanzan aquí, así que lo que este bloque usa se declara en este fichero. */

.cw-contenido[b-hhxgwc021g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.cw-contenido-head[b-hhxgwc021g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Idioma de trabajo. Hoy es fijo; en G7 pasa a ser el selector, y por eso ya tiene su sitio. */
.cw-contenido-idioma[b-hhxgwc021g] {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Traducir la ficha (G7): a la derecha de la cabecera, discreto —es una comodidad, no la acción
   principal del panel— pero legible. */
.cw-traducir[b-hhxgwc021g] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #fff;
    color: #24292f;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    cursor: pointer;
    flex-shrink: 0;
}

    .cw-traducir:hover:not(:disabled)[b-hhxgwc021g] {
        background: #f6f8fa;
    }

    .cw-traducir:disabled[b-hhxgwc021g] {
        opacity: .55;
        cursor: default;
    }

    .cw-traducir .material-symbols-outlined[b-hhxgwc021g] {
        font-size: 14px;
    }

.cw-traducir-pisar[b-hhxgwc021g] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* `cw-campo`, `cw-label`, `cw-input`, `cw-textarea` y `cw-ayuda` estaban declarados AQUÍ y otra vez
   en la columna de definición, con valores ya divergentes. Son el mismo formulario para quien lo
   mira, así que ahora salen de `wwwroot/css/tienda-web.css`. No se redeclaran: el paquete aislado se
   enlaza DESPUÉS y, a igual especificidad, cualquier regla puesta aquí volvería a ganarle. */

/* Una propiedad publicable por fila: casilla, nombre y —en gris— el valor que se publicaría. */
.cw-propiedad[b-hhxgwc021g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 2px;
    cursor: pointer;
    user-select: none;
}

.cw-propiedad-nombre[b-hhxgwc021g] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #24292f;
}

.cw-propiedad-valor[b-hhxgwc021g] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #6b7280;
}

/* Concepto en SOLO LECTURA (sin permiso de gestión): el HTML publicable pintado tal cual, con el
   marco del resto de campos para que se lea como un campo apagado y no como un hueco. */
.cw-concepto-lectura[b-hhxgwc021g] {
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f6f8fa;
    font-size: 12px;
    color: #24292f;
    overflow-wrap: anywhere;
}

.cw-concepto-lectura :first-child[b-hhxgwc021g] {
    margin-top: 0;
}

.cw-concepto-lectura :last-child[b-hhxgwc021g] {
    margin-bottom: 0;
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebDetallePanel.razor.rz.scp.css */
/* Tercera columna del diseñador.
   Los tokens de FORMULARIO (`cw-campo`, `cw-label`, `cw-input`, `cw-ayuda`) ya NO están aquí: viven
   en `wwwroot/css/tienda-web.css`, porque este panel y el de contenido publicable los declaraban por
   duplicado —el CSS de Blazor está aislado por componente— y acababan divergiendo campo a campo.
   Aquí solo queda lo propio de esta columna. */

.cw-detalle[b-if6kg1urg1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 10px;
}

/* ---- Sin nada apuntado ---- */

.cw-vacio[b-if6kg1urg1] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    max-width: 240px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}

.cw-vacio-icono[b-if6kg1urg1] {
    font-size: 30px;
    color: #cbd5e1;
}

/* ---- Identidad: quién está apuntado y en qué estado ----
   Una sola fila: icono, nombre con su explicación debajo, y el estado en una etiqueta. Antes había
   encima un rótulo en versalitas («Definición de la categoría») que repetía la cabecera de la
   columna; el icono dice lo mismo —carpeta o artículo— sin gastar una línea. */

.cw-detalle-head[b-if6kg1urg1] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.cw-detalle-icono[b-if6kg1urg1] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.cw-detalle-identidad[b-if6kg1urg1] {
    flex: 1 1 auto;
    min-width: 0;
}

.cw-detalle-title[b-if6kg1urg1] {
    font-size: 15px;
    font-weight: 700;
    color: #24292f;
    line-height: 1.25;
    word-break: break-word;
}

.cw-detalle-sub[b-if6kg1urg1] {
    margin-top: 2px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
}

/* Etiqueta de estado. Tres paradas, no dos: «Oculta» es publicada pero sin ver, y el ámbar es lo
   que la separa de un simple borrador. Misma familia que `.tw-modal-status-draft` del alta. */
.cw-chip[b-if6kg1urg1] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

    .cw-chip.ok[b-if6kg1urg1] {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    .cw-chip.warn[b-if6kg1urg1] {
        background: #fffbeb;
        color: #b45309;
        border: 1px solid #fde68a;
    }

    .cw-chip.draft[b-if6kg1urg1] {
        background: #fff7ed;
        color: #c2410c;
        border: 1px solid #fed7aa;
    }

/* Aquí vivía `.cw-chip.pendiente` («Sin guardar»). Se fue con el borrador de la ficha: ya no hay
   nada sin guardar que anunciar, porque cada campo se persiste al salir de él. */

/* ---- Cuerpo ---- */

.cw-detalle-body[b-if6kg1urg1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cw-detalle-body[b-if6kg1urg1]::-webkit-scrollbar {
        width: 6px;
    }

    .cw-detalle-body[b-if6kg1urg1]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* Bloque temático (datos · imagen · contenido · artículos). Separados por una línea y no por
   tarjetas: la columna YA es una tarjeta, y meter cajas dentro de cajas es el marco que esta
   pantalla eliminó a propósito (ver `wwwroot/css/tienda-web.css`). */
.cw-seccion[b-if6kg1urg1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .cw-seccion + .cw-seccion[b-if6kg1urg1] {
        padding-top: 14px;
        border-top: 1px solid #e5e7eb;
    }

/* Aviso o explicación dentro de una sección (vacíos, espejo, «esto se edita en otra pantalla»). */
.cw-nota[b-if6kg1urg1] {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f6f8fa;
    border: 1px solid #eef2f7;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.45;
}

/* Espejo de familia (G5): el aviso explica por qué esta lista no se toca, así que se lee. */
.cw-espejo[b-if6kg1urg1] {
    border-color: #dbeafe;
    background: #eff6ff;
    border-left: 3px solid #2563eb;
}

/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebGaleriaPanel.razor.rz.scp.css */
/* Banda de galería dentro de la columna de definición. Las miniaturas van en una tira horizontal
   con scroll propio: la columna nunca se ensancha por tener muchas imágenes. */

.gw-galeria[b-1c76fa344c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #fafcff;
}

.gw-head[b-1c76fa344c] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #57606a;
}

    .gw-head .material-symbols-outlined[b-1c76fa344c] {
        font-size: 16px;
        color: #6b7280;
    }

.gw-cuenta[b-1c76fa344c] {
    margin-left: auto;
    font-weight: 700;
    color: #9ca3af;
}

.gw-dropzone[b-1c76fa344c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px;
    border: 1px dashed #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    text-align: center;
}

    .gw-dropzone:hover[b-1c76fa344c] {
        background: #dbeafe;
    }

    .gw-dropzone.subiendo[b-1c76fa344c] {
        opacity: 0.6;
        cursor: default;
    }

    .gw-dropzone .material-symbols-outlined[b-1c76fa344c] {
        font-size: 22px;
    }

.gw-dropzone-titulo[b-1c76fa344c] {
    font-size: 11px;
    font-weight: 600;
}

.gw-dropzone-hint[b-1c76fa344c] {
    font-size: 10px;
    color: #6b7280;
}

/* El input de fichero, transparente y cubriendo TODA la zona de soltar.

   Dos cosas que hay que hacer juntas o no funciona ninguna:
   · `::deep`, porque el input lo pinta <InputFile> —otro componente— y el aislamiento de CSS no le
     pone el atributo de ámbito: una regla `.gw-file` a secas no le llega (por eso se veía el
     selector de fichero nativo dentro de la caja).
   · Ocupar la zona en vez de ocultarse: un input de fichero oculto no recibe el SOLTADO nativo del
     navegador. El <label> abre el diálogo al hacer clic, pero no le reenvía los ficheros soltados
     encima —de ahí que el botón subiera y arrastrar no hiciera nada—. Cubriendo la zona, el mismo
     elemento atiende el clic y el arrastre y el navegador dispara `change` en los dos casos, sin
     una línea de JavaScript. */
.gw-dropzone[b-1c76fa344c]  .gw-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gw-dropzone[b-1c76fa344c]  .gw-file:disabled {
    cursor: default;
}

.gw-vacia[b-1c76fa344c] {
    padding: 8px;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
}

/* «Traer la imagen de la ficha»: una fila pulsable con la foto que se traería. Lleva la miniatura
   porque la pregunta que se hace el operador no es «¿qué hace este botón?» sino «¿cuál es esa
   imagen?». Misma forma que la zona de subida que tiene justo encima. */
.gw-traer[b-1c76fa344c] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 1px dashed #d0d7de;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .gw-traer:hover:not(:disabled)[b-1c76fa344c] {
        border-color: #7aa7f0;
        background: #f6f8fa;
    }

    .gw-traer:focus-visible[b-1c76fa344c] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    .gw-traer:disabled[b-1c76fa344c] {
        cursor: default;
        opacity: 0.7;
    }

.gw-traer-thumb[b-1c76fa344c] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f6f8fa;
    object-fit: cover;
}

.gw-traer-texto[b-1c76fa344c] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.gw-traer-titulo[b-1c76fa344c] {
    font-size: 12px;
    font-weight: 700;
    color: #24292f;
}

.gw-traer-origen[b-1c76fa344c] {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gw-traer-icono[b-1c76fa344c] {
    flex: 0 0 auto;
    font-size: 22px;
    color: #4b5563;
}

/* Tira horizontal: una imagen por columna, scroll propio. */
.gw-tira[b-1c76fa344c] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .gw-tira[b-1c76fa344c]::-webkit-scrollbar {
        height: 6px;
    }

    .gw-tira[b-1c76fa344c]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* La tarjeta de cada imagen. 116 px era el ancho de cuando aquí solo cabían la miniatura y una caja
   de texto recortada; con una fila de botones debajo, ese ancho es lo que obligaba a que los botones
   fuesen de 22 px. Se ensancha, y con el dedo se ensancha más: es el ancho el que decide el tamaño
   de las dianas, no al revés. */
.gw-item[b-1c76fa344c] {
    flex: 0 0 auto;
    width: 144px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    background: #ffffff;
}

/* Caja de la miniatura: solo existe para anclar el botón de borrar a su esquina. */
.gw-thumb-caja[b-1c76fa344c] {
    position: relative;
}

/* Eliminar, sobre la esquina de la foto. Blanco translúcido para que se lea sobre cualquier imagen,
   y rojo pleno al apuntarlo: en reposo no grita, pero tampoco se confunde con las flechas. */
.gw-borrar[b-1c76fa344c] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #b91c1c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    transition: background 0.15s ease, color 0.15s ease;
}

    .gw-borrar:hover[b-1c76fa344c] {
        background: #dc2626;
        color: #ffffff;
    }

    .gw-borrar:focus-visible[b-1c76fa344c] {
        outline: 2px solid #dc2626;
        outline-offset: 2px;
    }

    .gw-borrar .material-symbols-outlined[b-1c76fa344c] {
        font-size: 17px;
    }

    .gw-item.principal[b-1c76fa344c] {
        border-color: #bfdbfe;
        box-shadow: inset 0 0 0 1px #bfdbfe;
    }

.gw-thumb-btn[b-1c76fa344c] {
    position: relative;
    border: 0;
    padding: 0;
    background: #f6f8fa;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.gw-thumb[b-1c76fa344c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gw-badge[b-1c76fa344c] {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.92);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
}

.gw-alt[b-1c76fa344c] {
    width: 100%;
    border: 1px solid #d0d7de;
    border-radius: 7px;
    padding: 3px 6px;
    font-size: 10px;
    font-family: inherit;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
}

    .gw-alt:focus[b-1c76fa344c] {
        border-color: #bfdbfe;
    }

    .gw-alt:disabled[b-1c76fa344c] {
        background: #f6f8fa;
        color: #9ca3af;
    }

/* «De qué talla o color es esta foto». Misma caja que el alt: son dos datos de la misma imagen y
   deben leerse como una unidad, no como un formulario aparte. */
.gw-valor[b-1c76fa344c] {
    width: 100%;
    border: 1px solid #d0d7de;
    border-radius: 7px;
    padding: 2px 4px;
    font-size: 10px;
    font-family: inherit;
    color: #24292f;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
}

    .gw-valor:focus[b-1c76fa344c] {
        border-color: #bfdbfe;
    }

    .gw-valor:disabled[b-1c76fa344c] {
        background: #f6f8fa;
        color: #9ca3af;
    }

/* Rejilla de columnas IGUALES, una sola fila. Los botones no miden lo que yo diga: miden lo que la
   tarjeta les deja, se repartan tres o cuatro. Con anchos fijos había que comprobar a mano si
   «4 × 26 + 3 × 2» cabía en la tarjeta —y no cabía: el último se iba a una segunda línea—; con la
   rejilla ese cálculo desaparece y no hay `flex-wrap` que pueda romper la fila. */
.gw-acciones[b-1c76fa344c] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
}

/* `<button>` plano, ya no SfButton: cada propiedad tenía que ganarle a la piel de `.e-btn` con un
   `!important`, y lo que hace falta aquí es lo contrario. Ocupa TODA su columna: la diana es la
   celda entera, bastante más ancha que el glifo. */
.gw-mini-btn[b-1c76fa344c] {
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gw-mini-btn:hover:not(:disabled)[b-1c76fa344c] {
        background: #eef2f7;
        color: #24292f;
    }

    .gw-mini-btn:disabled[b-1c76fa344c] {
        opacity: 0.45;
        cursor: default;
    }

    .gw-mini-btn:focus-visible[b-1c76fa344c] {
        outline: 2px solid #2563eb;
        outline-offset: 1px;
    }

    .gw-mini-btn .material-symbols-outlined[b-1c76fa344c] {
        font-size: 17px;
    }

.gw-mini-btn-on[b-1c76fa344c] {
    color: #2563eb;
}

/* ---- Con el dedo ----
   Se ensancha la TARJETA y la rejilla reparte: cuatro botones en 188 px de hueco salen a ~45 px de
   ancho por 44 de alto, que es la diana que se recomienda para tocar. De paso, el texto alternativo
   deja de salir recortado a media palabra y el botón de borrar crece con ellos. */
@media (pointer: coarse) {
    .gw-item[b-1c76fa344c] {
        width: 200px;
    }

    .gw-acciones[b-1c76fa344c] {
        gap: 4px;
    }

    .gw-mini-btn[b-1c76fa344c] {
        height: 44px;
        border-radius: 10px;
    }

        .gw-mini-btn .material-symbols-outlined[b-1c76fa344c] {
            font-size: 22px;
        }

    .gw-borrar[b-1c76fa344c] {
        top: 6px;
        right: 6px;
        width: 38px;
        height: 38px;
    }

        .gw-borrar .material-symbols-outlined[b-1c76fa344c] {
            font-size: 21px;
        }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Components/TiendaWebVisorImagen.razor.rz.scp.css */
/* Visor a tamaño completo. El lienzo recorta (overflow:hidden) y la imagen se mueve dentro con el
   `transform` que gobierna el JavaScript: por eso aquí no hay ninguna regla de posición sobre .vi-img
   que pudiera pelearse con él. */

.vi-backdrop[b-f8jvcayz06] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vi-card[b-f8jvcayz06] {
    display: flex;
    flex-direction: column;
    width: min(1000px, 92vw);
    height: min(760px, 88vh);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.vi-head[b-f8jvcayz06] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.vi-titulo[b-f8jvcayz06] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vi-posicion[b-f8jvcayz06] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
}

.vi-lienzo[b-f8jvcayz06] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vi-img[b-f8jvcayz06] {
    max-width: 100%;
    max-height: 100%;
    display: block;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.vi-pie[b-f8jvcayz06] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid #e5e7eb;
}

.vi-zoom[b-f8jvcayz06] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vi-ayuda[b-f8jvcayz06] {
    flex: 0 0 auto;
    padding: 0 14px 10px;
    font-size: 10px;
    color: #6b7280;
    text-align: center;
}

/* LOS BOTONES DEL VISOR
   44 px de lado, que es el mínimo recomendado para un objetivo que se pulsa (WCAG 2.5.5): a los 32
   de antes había que apuntar, y en una pantalla táctil se fallaba. Son `<button>` propios y ya no
   `<SfButton>`: aquel obligaba a un `!important` por declaración para deshacer los estilos de
   Syncfusion —fondo, borde, relleno, mayúsculas, sombra—, y bastaba con no heredarlos. */
.vi-btn[b-f8jvcayz06] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .vi-btn .material-symbols-outlined[b-f8jvcayz06] {
        font-size: 24px;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        /* El icono es la ligadura de un tipo de letra, o sea texto: sin esto se selecciona al
           arrastrar —y aquí arrastrar es el gesto para mover la imagen— y se traga el clic. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    .vi-btn:hover:not(:disabled)[b-f8jvcayz06] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #1f2937;
    }

    /* El foco de teclado SÍ lleva color: es la única señal de dónde está el cursor sin ratón, y un
       anillo gris sobre un borde gris no se vería. */
    .vi-btn:focus-visible[b-f8jvcayz06] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }

    .vi-btn:disabled[b-f8jvcayz06] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Las dos flechas de la galería: las más grandes del pie. Son las que se pulsan una y otra vez para
   recorrer las imágenes, y las únicas que se buscan sin mirar. Con sitio muestran su rótulo, porque
   un botón con texto se acierta antes que uno que hay que reconocer por su forma. */
.vi-btn-nav[b-f8jvcayz06] {
    width: auto;
    min-width: 52px;
    height: 52px;
    padding: 0 16px;
}

/* «Cerrar» se separa del título y del contador que tiene al lado: pegado a ellos se pulsa por
   error justo al ir a leer el nombre del archivo. */
.vi-btn-cerrar[b-f8jvcayz06] {
    margin-left: 6px;
}

/* En estrecho, el rótulo de las flechas cede y quedan como botones de icono —grandes—: antes que
   apretar tres grupos en una fila, se conserva el tamaño de lo que se pulsa. */
@media (max-width: 560px) {
    .vi-btn-texto[b-f8jvcayz06] {
        display: none;
    }

    .vi-btn-nav[b-f8jvcayz06] {
        width: 52px;
        min-width: 52px;
        padding: 0;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Pages/TiendaWebPage.razor.rz.scp.css */
.tienda-web-page[b-bxwk0swu1t],
.tienda-web-page *[b-bxwk0swu1t],
.tienda-web-page *[b-bxwk0swu1t]::before,
.tienda-web-page *[b-bxwk0swu1t]::after {
    box-sizing: border-box;
}

.tienda-web-page[b-bxwk0swu1t] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.tienda-web-header[b-bxwk0swu1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .tienda-web-header > div:first-child[b-bxwk0swu1t] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .tienda-web-header.command-bar-host-collapsed > div:first-child[b-bxwk0swu1t] {
        flex: 1 1 auto;
    }

/* Arranque de la cabecera: la vuelta al origen (si la hay) y, a su derecha, título y subtítulo.
   El botón mide 48px —lo mismo que los del CommandBar— así que centrar en vertical deja la fila
   cuadrada con la barra de la derecha. Cuando no hay vuelta que pintar no hay hueco: el separador
   es un «gap», no un margen del título. */
.tienda-web-header-inicio[b-bxwk0swu1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tienda-web-title[b-bxwk0swu1t] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.tienda-web-subtitle[b-bxwk0swu1t] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    max-width: 1050px;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.tienda-web-header.command-bar-host-collapsed .tienda-web-title[b-bxwk0swu1t],
.tienda-web-header.command-bar-host-collapsed .tienda-web-subtitle[b-bxwk0swu1t] {
    white-space: normal;
    overflow-wrap: break-word;
}

.tienda-web-header-actions[b-bxwk0swu1t] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* NOTA: aquí había una redefinición local de `.card-panel`, palabra por palabra igual a la de
   `app.css`. Se ha borrado con la clase del markup: este panel ya no es una tarjeta. */

/* Area de contenido de la pestana activa: rellena el espacio restante y desplaza en vertical.

   El relleno lateral de 3 px no es decorativo: las tarjetas de dentro llevan sombra, y este
   contenedor recorta en horizontal (`overflow-x: hidden`) para que una tabla ancha no empuje la
   página. Sin ese margen la sombra se vería cortada a plomo contra el filo. */
.tienda-web-tab-content[b-bxwk0swu1t] {
    flex: 1 1 auto;
    min-height: 0;
    /* 16px arriba = el `--cf-gap` con el que la ficha separa el panel de su rail. */
    padding: 16px 3px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .tienda-web-tab-content[b-bxwk0swu1t]::-webkit-scrollbar {
        width: 6px;
    }

    .tienda-web-tab-content[b-bxwk0swu1t]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* Los KPIs del Resumen usan el patrón global reutilizable .kpi-* (app.css):
   .kpi-section / .kpi-grid / .kpi-card, que escala por container query. */

/* Panel principal: rail de pestanas (ScrollableTabs) + contenido debajo. NO es una tarjeta: solo
   reparte el alto. Crece para ocupar el disponible y el scroll vertical vive en el contenido. */
.tienda-web-tabs-panel[b-bxwk0swu1t] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Contenedor del rail, equivalente a `.cform-tabs` de la ficha de cliente. */
.tienda-web-tabs[b-bxwk0swu1t] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (max-width: 980px) {
    .tienda-web-page[b-bxwk0swu1t] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tienda-web-tab-content[b-bxwk0swu1t] {
        overflow-y: visible;
        min-height: 0;
    }
}


/* Parte de la ultima corrida lanzada desde la pantalla (TW9): el journal en una linea, junto al
   KPI. Es lo que sustituye al "sincronizado OK" ciego que prohibe D7. */
.tienda-web-sync-parte[b-bxwk0swu1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-muted, #f8fafc);
    font-size: 13px;
    color: var(--color-text-muted, #475569);
}

    .tienda-web-sync-parte .material-symbols-rounded[b-bxwk0swu1t] {
        font-size: 18px;
        color: var(--color-success, #16a34a);
    }

    .tienda-web-sync-parte.con-errores .material-symbols-rounded[b-bxwk0swu1t] {
        color: var(--color-warning, #d97706);
    }
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebAdopcionTab.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PESTAÑA ADOPCIÓN — el MISMO lenguaje visual que la pestaña Configuración
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   Tarjetas de contorno gris sin sombra, cabecera con icono en pastilla gris, botones blancos con
   icono a la izquierda, y una sola escala de grises: `#24292f` texto, `#6b7280` atenuado, `#d0d7de`
   bordes, `#e5e7eb` separadores internos, `#f6f8fa` rellenos.

   Se repite aquí en vez de compartirse porque el CSS va aislado por componente: el de Configuración
   no alcanza a esta pestaña. Lo que se comparte entre las dos es el ASPECTO —que es lo que el
   usuario reconoce al cambiar de pestaña—, no el fichero.

   Se retiran de este componente `.tw-chip`, `.tw-status`, `.tw-panel`, `.panel-header`,
   `.panel-subtitle` y `.section-title`: los tres primeros NO estaban definidos en ninguna hoja —ni
   global ni local—, así que los recuentos y las píldoras de estado salían como texto suelto, y
   `.panel-subtitle` solo existe dentro de `.articulos-page`. El apilado y su hueco los sigue
   poniendo `.tw-stack` (`wwwroot/css/tienda-web.css`).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* La caja: contorno gris nítido y SIN sombra, como las secciones de Configuración. El selector
   cuelga de `.tw-adopcion` para ganarle a `.tienda-web-page .tw-card` (hoja global), que empataría
   en especificidad con un `.tw-adopcion-card` a secas — y en un empate decide el orden de carga de
   las hojas, que no puede gobernar el aspecto de una tarjeta. */
.tw-adopcion .tw-adopcion-card[b-2lwj3lzvok] {
    border: 1px solid #d0d7de;
    box-shadow: none;
}

/* ── CABECERA DE SECCIÓN ──────────────────────────────────────────────────────────────────────── */

.tw-adopcion-head[b-2lwj3lzvok] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--twc-pad, 16px);
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

    /* El icono de la sección, en pastilla gris. El `:not()` es imprescindible: el chevrón del pliegue
       es otro Material Symbol dentro de la misma cabecera, y sin excluirlo saldría también como una
       pastilla de 34 px con borde. */
    .tw-adopcion-head .material-symbols-outlined:not(.tw-plegable-chevron)[b-2lwj3lzvok] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #f6f8fa;
        border: 1px solid #d0d7de;
        color: #57606a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        flex: 0 0 auto;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

.tw-adopcion-title[b-2lwj3lzvok] {
    font-size: 14px;
    font-weight: 700;
    color: #24292f;
}

.tw-adopcion-subtitle[b-2lwj3lzvok] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* Las acciones masivas de «Solo en la tienda» se van al extremo derecho de su cabecera. */
.tw-adopcion-head-acciones[b-2lwj3lzvok] {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
}

/* ── CABECERA PLEGABLE ────────────────────────────────────────────────────────────────────────── */
/* La cabecera ENTERA es el interruptor: un <button> que ocupa toda la fila, con el chevrón a la
   derecha. Hay que devolver a cero lo que el navegador pinta en un <button> —fondo, borde, fuente,
   alineación—, porque la cabecera se diseñó como un <div>; del botón solo se conserva que es
   pulsable y enfocable con el teclado, que es para lo que se convirtió. */
button.tw-adopcion-head[b-2lwj3lzvok] {
    background: none;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 6px 12px;
    /* Los márgenes negativos compensan el padding lateral: el área pulsable llega a los bordes de la
       tarjeta, pero el icono y el título siguen alineados con el contenido de las demás secciones. */
    margin-left: -6px;
    margin-right: -6px;
    width: calc(100% + 12px);
    font: inherit;
    color: inherit;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.16s ease;
}

    button.tw-adopcion-head:hover[b-2lwj3lzvok] {
        background: #f6f8fa;
    }

    button.tw-adopcion-head:focus-visible[b-2lwj3lzvok] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    /* El texto se lleva el hueco sobrante; así el chevrón queda pegado al borde derecho. */
    button.tw-adopcion-head > div[b-2lwj3lzvok] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Cerrada, la cabecera es toda la tarjeta: sin línea inferior ni hueco debajo, que dejarían un
       borde suelto y un vacío al pie de una tarjeta sin contenido. */
    button.tw-adopcion-head:not(.abierto)[b-2lwj3lzvok] {
        border-bottom-color: transparent;
        margin-bottom: 0;
        padding-bottom: 4px;
    }

.tw-plegable-chevron[b-2lwj3lzvok] {
    align-self: center;
    flex: 0 0 auto;
    font-size: 22px;
    color: #6b7280;
    transition: transform 0.18s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tw-plegable.abierto .tw-plegable-chevron[b-2lwj3lzvok] {
    transform: rotate(180deg);
}

/* ── CAMPOS ───────────────────────────────────────────────────────────────────────────────────── */

.tw-form-grid[b-2lwj3lzvok] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.tw-field[b-2lwj3lzvok] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tw-field label[b-2lwj3lzvok] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.tw-input[b-2lwj3lzvok] {
    width: 100%;
    height: 36px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

    .tw-input:hover:not(:focus):not(:disabled)[b-2lwj3lzvok] {
        border-color: #afb8c1;
    }

    /* El foco SÍ lleva color, y es lo único que lo lleva en el formulario: es la única señal de en
       qué campo se está, y un anillo gris sobre un borde gris no se vería. */
    .tw-input:focus[b-2lwj3lzvok] {
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tw-input:disabled[b-2lwj3lzvok] {
        background: #f6f8fa;
        color: #8c959f;
        cursor: not-allowed;
    }

/* El desplegable de candidatos vive DENTRO de una celda de tabla: más bajo y sin ancho mínimo, o
   estiraría su columna por encima de las demás. */
.tw-input-sm[b-2lwj3lzvok] {
    height: 30px;
    font-size: 12px;
    padding: 0 8px;
    min-width: 160px;
}

.tw-adopcion-estado[b-2lwj3lzvok] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* Iguala el alto del campo de al lado, para que la insignia no quede flotando a media altura. */
    min-height: 36px;
}

.tw-adopcion-fecha[b-2lwj3lzvok] {
    font-size: 12px;
    color: #6b7280;
    /* La fecha exacta vive en el `title`: se avisa de que hay algo que mirar al pasar por encima. */
    cursor: help;
}

/* ── BOTONES ──────────────────────────────────────────────────────────────────────────────────── */
/* El MISMO `.tw-btn` de la pestaña Configuración: blanco, contorno gris, texto e icono en gris y con
   el peso de los comandos de la barra. Todo en gris, sin acento de color en ninguno: la acción
   principal se distingue por ir primera y por su icono, no por gritar más que el contenido. */
.tw-acciones-linea[b-2lwj3lzvok] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* La banda de acciones de una TARJETA, separada del formulario que tiene encima: pegada a él se leía
   como una fila más del formulario, no como lo que se hace con lo de arriba.

   El selector es de HIJO DIRECTO a propósito. `.tw-acciones-linea` se usa en tres sitios —aquí, en
   la cabecera de «Solo en la tienda» y dentro de cada celda de acciones de las tablas— y un margen
   superior en los otros dos descuadraría la cabecera y las filas. */
.tw-adopcion-card > .tw-acciones-linea[b-2lwj3lzvok] {
    margin-top: 16px;
}

.tw-btn[b-2lwj3lzvok] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    /* El icono sigue al color de su botón (`inherit`, no un color fijo) y se ALIGERA: la hoja global
       pinta todos los Material Symbols a `wght 500`, que junto al texto en negrita hacía un botón
       más pesado que cualquier otra cosa de la pantalla. */
    .tw-btn .material-symbols-outlined[b-2lwj3lzvok] {
        font-size: 18px;
        flex: 0 0 auto;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        /* El icono es la ligadura de un tipo de letra, o sea texto: sin esto se selecciona al
           arrastrar y se traga el clic del botón. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    .tw-btn:hover:not(:disabled)[b-2lwj3lzvok] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #1f2937;
    }

    .tw-btn:focus-visible[b-2lwj3lzvok] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tw-btn:disabled[b-2lwj3lzvok] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Variante pequeña: los botones POR FILA y las acciones masivas de una cabecera. Una fila de tabla
   con botones de 36 px se convierte en una fila de 52. */
.tw-btn-sm[b-2lwj3lzvok] {
    height: 28px;
    padding: 0 9px;
    gap: 6px;
    font-size: 12px;
}

    .tw-btn-sm .material-symbols-outlined[b-2lwj3lzvok] {
        font-size: 16px;
    }

/* ── INSIGNIAS Y RECUENTOS ────────────────────────────────────────────────────────────────────── */
/* Las mismas insignias que el listado de tiendas. El color ACOMPAÑA a la palabra, nunca la
   sustituye. */
.tw-badge[b-2lwj3lzvok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .tw-badge.ok[b-2lwj3lzvok] {
        background: #ecfdf3;
        color: #15803d;
        border-color: #d1fadf;
    }

    .tw-badge.warn[b-2lwj3lzvok] {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .tw-badge.neutral[b-2lwj3lzvok] {
        background: #f6f8fa;
        color: #57606a;
        border-color: #d0d7de;
    }

/* Nota de «aquí todavía no hay nada»: fondo gris relleno, que es lo que la separa de una tarjeta
   —blanca y con contorno— y hace que se lea como una indicación y no como una sección más. Ocupa el
   sitio de los recuentos mientras no hay cruce que enseñar. */
.tw-nota[b-2lwj3lzvok] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f6f8fa;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

    .tw-nota strong[b-2lwj3lzvok] {
        font-weight: 600;
        color: #24292f;
    }

/* Los cuatro recuentos del cruce: cifra grande arriba y rótulo debajo. Lo que se busca al mirar
   aquí es cuánto queda por resolver, no leer cuatro frases seguidas. */
.tw-adopcion-kpis[b-2lwj3lzvok] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.tw-kpi[b-2lwj3lzvok] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

    /* Ámbar SOLO cuando hay ambiguos: es el único recuento que exige trabajo a mano, y teñirlo
       siempre lo convertiría en decoración. */
    .tw-kpi.warn[b-2lwj3lzvok] {
        border-color: #fed7aa;
        background: #fff7ed;
    }

.tw-kpi-num[b-2lwj3lzvok] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #24292f;
    font-variant-numeric: tabular-nums;
}

.tw-kpi.warn .tw-kpi-num[b-2lwj3lzvok] {
    color: #c2410c;
}

.tw-kpi-lbl[b-2lwj3lzvok] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

/* ── AVISO ────────────────────────────────────────────────────────────────────────────────────── */
/* El motivo por el que no se puede confirmar. Ámbar y no gris: es lo único que separa al operador de
   terminar la adopción. Rejilla de icono + texto para que la segunda línea no se meta debajo del
   icono. */
.tw-aviso[b-2lwj3lzvok] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #92400e;
    font-size: 12px;
    line-height: 1.45;
}

    .tw-aviso .material-symbols-outlined[b-2lwj3lzvok] {
        font-size: 18px;
        line-height: 1.2;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

/* ── TABLAS ───────────────────────────────────────────────────────────────────────────────────── */
/* Tablas a mano, no <TablaPaginada>: aquí no hay un listado de entidades que abrir, sino el
   resultado de un cruce con controles dentro de cada fila. Lo que sí se copia es el aspecto de
   aquella —cabecera atenuada en versalitas, líneas finas, hover de fila—.

   El envoltorio con `overflow-x` es lo que evita que una tabla ancha estire la tarjeta y, con ella,
   la pestaña entera: la que se desplaza es la tabla, nunca la página. */
.tw-tabla-scroll[b-2lwj3lzvok] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.tw-tabla[b-2lwj3lzvok] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #24292f;
}

.tw-tabla th[b-2lwj3lzvok] {
    text-align: left;
    padding: 0 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #d0d7de;
    white-space: nowrap;
}

.tw-tabla td[b-2lwj3lzvok] {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.tw-tabla tbody tr:last-child td[b-2lwj3lzvok] {
    border-bottom: 0;
}

.tw-tabla tbody tr:hover td[b-2lwj3lzvok] {
    background: #f6f8fa;
}

/* La columna de acciones no se estira: manda su contenido. */
.tw-tabla-acciones-col[b-2lwj3lzvok] {
    width: 1%;
}

.tw-adopcion-nombre[b-2lwj3lzvok] {
    font-weight: 600;
    color: #24292f;
}

.tw-adopcion-sub[b-2lwj3lzvok] {
    margin-top: 3px;
    font-size: 11px;
    color: #6b7280;
}

.tw-adopcion-claves[b-2lwj3lzvok] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.tw-adopcion-motivo[b-2lwj3lzvok] {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

.tw-adopcion-sugerencia[b-2lwj3lzvok] {
    margin-top: 4px;
    color: #1d4ed8;
    font-size: 12px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tw-form-grid[b-2lwj3lzvok] {
        grid-template-columns: 1fr;
    }

    /* En estrecho, las acciones masivas bajan bajo su título en vez de apretarlo contra el borde. */
    .tw-adopcion-head[b-2lwj3lzvok] {
        flex-wrap: wrap;
    }

    .tw-adopcion-head-acciones[b-2lwj3lzvok] {
        margin-left: 0;
        width: 100%;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebCatalogoTab.razor.rz.scp.css */
/* Diseñador del catálogo web: tres columnas (maestro · publicado · definición).
   Las clases `over`, `dropcat`, `quitar` y `drop-root` las pone y quita el JavaScript del arrastre
   (catalogoWebDiseno.js); aquí solo se declara qué aspecto tienen. */

.cw-layout[b-z4hbdufqqg] {
    height: 100%;
    /* Suelo de trabajo. `height: 100%` reparte lo que sobre de la página, y en una pantalla de
       portátil eso son ~300 px para las tres columnas: la de definición se queda con ~35 px de
       cuerpo entre su cabecera y su barra de acciones, y la galería deja de ser alcanzable. Por
       debajo de este suelo el diseñador NO se encoge más: se desplaza el contenedor de la pestaña
       (`.tienda-web-tab-content`, que ya es `overflow-y: auto`). En pantallas altas no cambia nada,
       porque el 100% es mayor que el mínimo. */
    min-height: 460px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(280px, 1.15fr);
    /* Mismo hueco que el resto de la pantalla (`wwwroot/css/tienda-web.css`). */
    gap: var(--twc-gap, 16px);
    align-items: stretch;
    overflow: hidden;
}

/* La caja (fondo, borde, radio, sombra y relleno) la pone `.tw-card` del CSS del módulo: es la
   MISMA tarjeta en las seis pestañas. Aquí solo queda lo que es de esta pantalla: que la columna
   llene el alto de la rejilla.
   Antes había aquí una `.card-panel` local que repetía la de `app.css` con otros valores, y esas
   tarjetas vivían DENTRO de otra tarjeta (el panel de pestañas), que ya no existe. */
.cw-panel[b-z4hbdufqqg] {
    height: 100%;
}

/* El título de columna usa `.tw-card-head` (compartido). Esto es lo propio de aquí: el aviso de
   «suelta para quitar» se va al extremo derecho de la cabecera. */
.cw-panel-head[b-z4hbdufqqg] {
    justify-content: flex-start;
}

/* El aviso de «suelta aquí para quitar» solo aparece mientras se arrastra algo del catálogo. */
.cw-quitar-hint[b-z4hbdufqqg] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
    display: none;
}

.cw-layout.arrastrando-nodo .cw-quitar-hint[b-z4hbdufqqg] {
    display: inline;
}

/* ---- Buscador: el mismo que el del árbol de Artículos ----
   Copia de `.articulos-search-row` / `.articulos-search-icon` / `.articulos-input`
   (`wwwroot/css/articulos.css`): lupa absoluta a la izquierda y el input con hueco para ella.
   Los valores se escriben aquí porque aquel CSS cuelga de `.articulos-page`, que no es ancestro
   de esta pantalla; si allí cambian, hay que cambiarlos aquí. */
.cw-search[b-z4hbdufqqg] {
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.cw-search-icon[b-z4hbdufqqg] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    color: #9ca3af;
    pointer-events: none;
}

.cw-input[b-z4hbdufqqg] {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 13px;
    font-size: 13px;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .cw-input:focus[b-z4hbdufqqg] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        background: #fbfdff;
    }

    .cw-input:disabled[b-z4hbdufqqg] {
        background: #f6f8fa;
        color: #9ca3af;
    }

/* DESPUÉS de `.cw-input` a propósito: aquel declara el `padding` ABREVIADO, que a igual
   especificidad repone el lado izquierdo. Puesto antes, el texto arrancaba debajo de la lupa.
   (En `articulos.css` el mismo choque se resuelve con `!important`; aquí basta el orden.) */
.cw-search-input[b-z4hbdufqqg] {
    padding-left: 42px;
}

.cw-panel-body[b-z4hbdufqqg] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cw-panel-body[b-z4hbdufqqg]::-webkit-scrollbar {
        width: 6px;
    }

    .cw-panel-body[b-z4hbdufqqg]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.cw-panel-body.drop-root[b-z4hbdufqqg] {
    background: #f0f9ff;
    border-radius: 12px;
}

/* Las filas del catálogo publicado arrancan más pegadas al borde que las del maestro. Ya no cuelgan
   de una fila raíz que justificara el margen, y con los 8 px de `.cw-row` el árbol quedaba flotando
   lejos del canto de la tarjeta. Se ancla en `data-drop="root"` —el contrato del arrastre, lo más
   estable que hay aquí— para no tocar la columna de familias, que sí conserva su rótulo. */
.cw-panel-body[data-drop="root"] .cw-row[b-z4hbdufqqg] {
    padding-left: 3px;
}

/* La rama sangra menos, por lo mismo: el nivel se sigue leyendo por su línea vertical. */
.cw-panel-body[data-drop="root"] .cw-branch[b-z4hbdufqqg] {
    margin-left: 11px;
    padding-left: 8px;
}

/* Panel izquierdo resaltado mientras se arrastra algo del catálogo sobre él (= quitarlo). */
.cw-panel.quitar[b-z4hbdufqqg] {
    outline: 2px dashed #f87171;
    outline-offset: -3px;
    background: #fef2f2;
}

/* ---- Filas del árbol ---- */

/* Fila del árbol: mismas medidas y colores que `.arbol-familia-row` de Artículos —incluido el
   borde de 1px transparente, que es lo que evita que la fila «salte» al seleccionarse—. */
.cw-row[b-z4hbdufqqg] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    color: #24292f;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cw-row:hover[b-z4hbdufqqg] {
        background: #f6f8fa;
    }

    .cw-row.selected[b-z4hbdufqqg] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

/* Fila de ARTÍCULO (la hoja): algo más apretada y con la esquina un punto menor que la de su
   carpeta, y un gris más claro en reposo. Son los valores de `.arbol-articulo-row` de Artículos,
   donde esa diferencia es lo que hace que la hoja «pese» menos que el nodo que la contiene.
   Antes las filas de artículo usaban las medidas de familia para todo. */
.cw-row-art[b-z4hbdufqqg] {
    padding: 3px 8px;
    border-radius: 8px;
    color: #57606a;
}

    .cw-row-art:hover[b-z4hbdufqqg] {
        color: #24292f;
    }

    /* Al seleccionarla engorda: el peso va en la FILA, y el nombre lo hereda. */
    .cw-row-art.selected[b-z4hbdufqqg] {
        font-weight: 600;
    }

    .cw-row.dropcat[b-z4hbdufqqg] {
        outline: 2px dashed #60a5fa;
        outline-offset: -2px;
        background: #eff6ff;
    }

/* Chevron: cuadrado de 20px con su propio hover, como `.arbol-toggle` de Artículos. */
.cw-toggle[b-z4hbdufqqg] {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cw-toggle:hover[b-z4hbdufqqg] {
        background: #d0d7de;
        color: #57606a;
    }

    /* Sin hijos: se oculta pero OCUPA, para que la sangría del nivel no se descuadre. */
    .cw-toggle.hidden[b-z4hbdufqqg] {
        visibility: hidden;
        cursor: default;
    }

    .cw-toggle .material-symbols-outlined[b-z4hbdufqqg] {
        font-size: 18px;
        line-height: 1;
    }

/* Icono de la fila: 19px para las carpetas/categorías (nivel padre) y 17px para los artículos,
   la misma jerarquía de tamaños que `.arbol-familia-icon` / `.arbol-articulo-icon`. */
.cw-icon[b-z4hbdufqqg] {
    font-size: 19px;
    flex: 0 0 auto;
}

.cw-icon-cat[b-z4hbdufqqg] {
    color: #d97706;
}

/* Carpeta del maestro: el gris de `.arbol-familia-icon` de Artículos. Era azul fijo; el azul pasa
   a significar SELECCIÓN (regla `.cw-row.selected .cw-icon`, igual que en Artículos), que es
   información más útil que repetir «esto es una familia» en cada fila. */
.cw-icon-fam[b-z4hbdufqqg] {
    color: #6b7280;
}

/* Espejo de familia (G5): MISMO color que la familia del maestro, porque es de quien depende. Lo
   que importa es el emparejamiento, no el color concreto: los dos bajan juntos a gris y la
   relación se conserva. La categoría propia sigue en ámbar, que es lo que los distingue. */
.cw-icon-espejo[b-z4hbdufqqg] {
    color: #6b7280;
}

/* Selector de catálogo (G6): ocupa el sitio del rótulo de la columna, sin parecer un campo de
   formulario — es una cabecera que además se puede cambiar. */
.cw-catalogo-select[b-z4hbdufqqg] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: inherit;
    padding: 2px 4px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

    .cw-catalogo-select:hover[b-z4hbdufqqg] {
        background: #eef2f7;
    }

/* Idioma de trabajo (G7): al lado del catálogo, corto y sin marco. */
.cw-idioma-select[b-z4hbdufqqg] {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    padding: 2px 3px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

/* Chips de idioma por nodo: qué está escrito y qué falta. */
.cw-idiomas[b-z4hbdufqqg] {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.cw-idioma-chip[b-z4hbdufqqg] {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 7px;
    line-height: 1.4;
}

    .cw-idioma-chip.ok[b-z4hbdufqqg] {
        background: #dcfce7;
        color: #15803d;
    }

    .cw-idioma-chip.falta[b-z4hbdufqqg] {
        background: #f6f8fa;
        color: #cbd5e1;
    }

/* El artículo es la hoja: icono más pequeño y apagado que el de su carpeta, como en Artículos. */
.cw-icon-art[b-z4hbdufqqg] {
    font-size: 17px;
    color: #9ca3af;
}

/* «Sin familia» (Id 0) no es una familia: es el cajón donde caen los artículos que no tienen
   ninguna. Se atenúa igual que su equivalente en Artículos (`.arbol-familia-row-sin`), para que no
   se confunda con una familia real que se pueda arrastrar. */
.cw-row-sin .cw-icon-fam[b-z4hbdufqqg] {
    color: #9ca3af;
}

.cw-row-sin .cw-name[b-z4hbdufqqg] {
    font-style: italic;
    font-weight: 600;
    color: #6b7280;
}

/* La fila seleccionada tiñe su icono de azul (en Artículos lo hace `.selected .arbol-*-icon`). */
.cw-row.selected .cw-icon[b-z4hbdufqqg] {
    color: #2563eb;
}

/* Nombre: 13px/700 en una carpeta o categoría y 12,5px normal en un artículo — la misma diferencia
   de peso que separa `.arbol-familia-name` de `.arbol-articulo-name`. */
.cw-name[b-z4hbdufqqg] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
}

/* El nombre del artículo NO fija grosor: lo hereda de su fila, que es donde `.arbol-articulo-row`
   engorda al seleccionarse. Fijarlo aquí (estaba en 500) impedía que engordara al elegirlo. */
.cw-icon-art + .cw-name[b-z4hbdufqqg] {
    font-size: 12.5px;
    font-weight: inherit;
}

/* Contador y etiquetas de la fila: pastilla gris, como `.arbol-badge` / `.arbol-articulo-chip`.
   Antes era texto suelto de 10px, que junto al nombre se leía como parte de él. */
.cw-meta[b-z4hbdufqqg] {
    flex: 0 0 auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f6f8fa;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cw-row.selected .cw-meta[b-z4hbdufqqg] {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Punto de estado de publicación de la categoría. */
.cw-estado[b-z4hbdufqqg] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

    .cw-estado.ok[b-z4hbdufqqg] {
        background: #16a34a;
    }

    .cw-estado.draft[b-z4hbdufqqg] {
        background: #f59e0b;
    }

.cw-row.sin-imagen .cw-name[b-z4hbdufqqg] {
    color: #7c5322;
}

/* Sangría con guía de nivel. Igual que `.arbol-rama` de Artículos: la línea la aporta el
   CONTENEDOR de la rama, no las filas, así que es continua por nivel y anidar ramas produce una
   línea por nivel sin cortes. El margen la alinea bajo el chevron de la fila padre.
   Antes era discontinua (1px dashed) con un conector en `::before` a cada hijo; la continua de 2px
   es lo que se ve en Artículos y lo que hace legible un árbol de varios niveles. */
.cw-branch[b-z4hbdufqqg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 17px;
    padding-left: 11px;
    border-left: 2px solid #d0d7de;
}

/* Hueco de inserción entre filas: invisible hasta que el arrastre lo señala. */
.cw-gap[b-z4hbdufqqg] {
    height: 4px;
    border-radius: 3px;
    margin: 1px 4px;
}

    .cw-gap.over[b-z4hbdufqqg] {
        background: #93c5fd;
        height: 8px;
    }

/* Vacío dentro del árbol: cursiva atenuada, como `.arbol-articulos-empty` de Artículos. */
.cw-hint[b-z4hbdufqqg] {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    padding: 4px 8px;
    line-height: 1.4;
}

/* De quién es el catálogo abierto (tablets o tienda): una línea bajo la cabecera de la columna.
   Sin cursiva: no es un vacío, es lo que hay que leer antes de tocar nada. */
.cw-catalogo-tipo[b-z4hbdufqqg] {
    font-style: normal;
    color: #57606a;
    padding: 6px 10px 2px;
}

.cw-crear-catalogo[b-z4hbdufqqg] {
    display: inline-flex;
    margin: 8px 0;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    align-items: center;
    cursor: pointer;
}

    .cw-crear-catalogo:hover[b-z4hbdufqqg] {
        background: #1d4ed8;
    }

/* ---- Menú del botón derecho y caja de nombre ---- */

.cw-menu-overlay[b-z4hbdufqqg] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.cw-menu[b-z4hbdufqqg] {
    position: fixed;
    z-index: 1001;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 4px;
    min-width: 13rem;
}

    .cw-menu button[b-z4hbdufqqg] {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 7px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: #24292f;
        text-align: left;
    }

        .cw-menu button:hover[b-z4hbdufqqg] {
            background: #f3f4f6;
        }

        .cw-menu button.danger[b-z4hbdufqqg] {
            color: #b91c1c;
        }

    .cw-menu .material-symbols-outlined[b-z4hbdufqqg] {
        font-size: 17px;
    }

.cw-menu-sep[b-z4hbdufqqg] {
    height: 1px;
    background: #e5e7eb;
    margin: 3px 0;
}

.cw-prompt[b-z4hbdufqqg] {
    position: fixed;
    z-index: 1001;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: min(26rem, 90vw);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 16px;
}

.cw-prompt-acciones[b-z4hbdufqqg] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.cw-prompt-texto[b-z4hbdufqqg] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #24292f;
}

/* ---- Botones ----
   «::deep» NO es opcional: son <SfButton>, y el <button> real lo pinta el componente HIJO, sin el
   atributo de ámbito; un `.cw-btn.e-btn` a secas no lo toca nunca y salían con la piel de Syncfusion
   (texto plano, sin marco). Anclado en `.cw-prompt-acciones`, que sí es de este componente. Misma
   solución que `.cwc-nuevo-acciones` en el modal de catálogos. */

.cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn.e-btn {
    height: 34px !important;
    min-width: 92px;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid #d0d7de !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

    .cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn.e-btn:hover {
        background: #f3f4f6 !important;
        border-color: #c4cbd3 !important;
    }

    .cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn.e-btn:active {
        transform: translateY(1px);
    }

    .cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn.e-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
    }

.cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn-primary.e-btn {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

    .cw-prompt-acciones[b-z4hbdufqqg]  .cw-btn-primary.e-btn:hover {
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
        border-color: #1d4ed8 !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    }

/* Marca de galería en la fila del artículo: informa, no es un botón (las imágenes se gestionan en
   la columna de definición). «Sin imagen» va en ámbar, no en rojo: es un aviso, no un error. */
.cw-marca[b-z4hbdufqqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #2563eb;
    flex-shrink: 0;
}

    .cw-marca .material-symbols-outlined[b-z4hbdufqqg] {
        font-size: 15px;
    }

    .cw-marca.vacio[b-z4hbdufqqg] {
        color: #c2410c;
        background: #fff7ed;
    }

/* Ya NO hay botones de icono en las cabeceras de columna: el de gestión de catálogos y el de nueva
   categoría se fueron a la CommandBar de la página, y el que plegaba el resumen de indicadores
   desapareció con el resumen. Lo que ocupa ahora ese extremo derecho es la barra de acciones de la
   categoría apuntada, y su estilo vive en `wwwroot/css/tienda-web.css` —la pinta otro componente y
   el CSS con ámbito no la alcanza—. */

/* Cabecera estrecha: antes que aplastar el selector de catálogo hasta dejarlo ilegible, el grupo de
   botones baja a una segunda línea. Los botones NO encogen (`flex-shrink: 0`), así que sin esto lo
   único que cedía era el nombre del catálogo. */
@media (max-width: 900px) {
    .cw-panel-head[b-z4hbdufqqg] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .cw-catalogo-select[b-z4hbdufqqg] {
        flex: 1 1 140px;
    }
}

@media (max-width: 1200px) {
    .cw-layout[b-z4hbdufqqg] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 0.8fr);
        /* Aquí la definición baja a una segunda fila: hacen falta dos altos de panel donde antes
           bastaba uno, así que el suelo sube en consecuencia. Sin esto, plegar a dos columnas
           REPARTE el mismo alto entre dos filas y aplasta las dos. */
        min-height: 720px;
    }

        .cw-layout > .cw-panel:nth-child(3)[b-z4hbdufqqg] {
            grid-column: 1 / -1;
        }
}

@media (max-width: 820px) {
    .cw-layout[b-z4hbdufqqg] {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        overflow: visible;
    }

    .cw-panel[b-z4hbdufqqg],
    .cw-panel-body[b-z4hbdufqqg] {
        height: auto;
        max-height: 60vh;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebClientesTab.razor.rz.scp.css */
/* PESTAÑA CLIENTES WEB
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Misma forma que la pestaña Pedidos: filtros sueltos sobre el gris y <TablaPaginada> debajo, con el
   panel de resumen a la derecha. Ya NO hay tarjeta envolviendo filtros y tabla (`.tw-table-card`):
   la tabla trae su propio marco (`.tp-panel`) y meterla en un `.tw-card` era caja dentro de caja.

   Se han retirado con ella la tabla a mano (`.tw-table`, `.tw-table-wrap`, `.tw-empty-state`,
   `.text-right`), el contador «N clientes web» —lo dice ahora el paginador— y los estilos de la caja
   de búsqueda vieja (`.tw-search-*`, `.tw-filter-select`), que estaba APAGADA y decía «filtra
   escribiendo en la pestaña Pedidos»: era falso, ese texto nunca recortó esta lista. */

.tw-customers-page[b-glatko15k2] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.tw-customers-layout[b-glatko15k2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--twc-gap, 16px);
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

    .tw-customers-main[b-glatko15k2],
    .tw-customer-detail-card[b-glatko15k2] {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

/* El cuerpo es columna flex: filtros arriba (alto fijo) y la tabla rellenando el resto. */
.tw-customers-main[b-glatko15k2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .tw-customers-main > .tw-clientes-toolbar[b-glatko15k2] {
        flex: 0 0 auto;
    }

    .tw-customers-main > .tw-clientes-tabla[b-glatko15k2] {
        flex: 1 1 auto;
        min-height: 0;
    }

/* ===== FILTROS =====
   Buscador (que crece), tienda y el botón de limpiar. La tienda va AQUÍ, entre los filtros, y no en
   una barra propia como en Pedidos: allí es la tienda de trabajo —manda sobre «Ingerir ahora» y
   «Convertir pendientes»— y por eso vive con sus botones; aquí no hay ninguna acción de tienda. */
.tw-clientes-toolbar[b-glatko15k2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    align-items: center;
    gap: 12px;
}

.tw-clientes-buscador[b-glatko15k2] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.tw-clientes-buscador-icono[b-glatko15k2] {
    position: absolute;
    left: 12px;
    font-size: 19px;
    color: #94a3b8;
    pointer-events: none;
}

/* Base común de los dos campos. El alto es 38 px, el del `.xx-filter-select` de todos los listados
   de la aplicación. */
.tw-input[b-glatko15k2] {
    width: 100%;
    height: 38px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
}

    .tw-input:focus[b-glatko15k2] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

/* El hueco de la lupa va DESPUÉS de `.tw-input` y con el `padding` completo, no con `padding-left`:
   las dos reglas empatan en especificidad (misma marca de ámbito, una clase cada una), así que
   decide el orden, y la forma abreviada de `.tw-input` repondría el lado izquierdo. Puesto antes, el
   placeholder aparecía debajo del icono. */
.tw-clientes-buscador-input[b-glatko15k2] {
    padding: 0 14px 0 38px;
}

.tw-clientes-tienda-select[b-glatko15k2] {
    min-width: 0;
    padding: 0 12px;
}

/* Botón de acción de la barra de filtros (solo «Limpiar filtros»). Mismo lenguaje que el de la
   pestaña Pedidos. */
.tw-accion-btn[b-glatko15k2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .tw-accion-btn .material-symbols-outlined[b-glatko15k2] {
        font-size: 19px;
    }

    .tw-accion-btn:hover:not(:disabled)[b-glatko15k2] {
        border-color: #bfdbfe;
        background: #f8fbff;
    }

    .tw-accion-btn:focus-visible[b-glatko15k2] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    /* Apagado, pero legible: sigue diciendo qué haría. */
    .tw-accion-btn:disabled[b-glatko15k2] {
        background: #f8fafc;
        border-color: #e6ecf3;
        color: #9aa6b6;
        cursor: default;
    }

/* ===== LISTADO =====
   Lo pinta <TablaPaginada>; su estilo vive en su propio CSS y NO se replica aquí. Lo que queda es lo
   que la tabla no puede saber: las celdas que aporta esta vista como plantilla y la marca de la fila
   apuntada. Va con `::deep` porque ese markup lo renderiza otro componente. */
.tw-clientes-tabla[b-glatko15k2] {
    /* Contenedor flex-columna: es lo que espera `.tp-panel` para repartirse el alto. */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-customers-page[b-glatko15k2]  .tw-customer-name {
    font-weight: 800;
    color: #0f172a;
}

.tw-customers-page[b-glatko15k2]  .tw-table-action-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    font-family: inherit;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .tw-customers-page[b-glatko15k2]  .tw-table-action-btn:hover {
        border-color: #bfdbfe;
        background: #f8fbff;
        color: #1d4ed8;
    }

/* FILA APUNTADA
   La tabla no tiene noción de selección: la marca la aporta la vista (`ClaseFilaExtra`), que es
   quien sabe qué cliente está abierto a la derecha. El hover no debe pisarla, de ahí el `:hover`
   explícito con el mismo fondo. */
.tw-customers-page[b-glatko15k2]  .tw-row-sel > td,
.tw-customers-page[b-glatko15k2]  .tw-row-sel:hover > td {
    background: #eff6ff;
}

/* Insignia «Creado por la tienda» de la celda de cliente. También con `::deep`. */
.tw-customers-page[b-glatko15k2]  .tw-customer-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .tw-customers-page[b-glatko15k2]  .tw-customer-status.ok {
        background: #ecfdf3;
        color: #15803d;
        border-color: #d1fadf;
    }

    .tw-customers-page[b-glatko15k2]  .tw-customer-status.pending {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .tw-customers-page[b-glatko15k2]  .tw-customer-status.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .tw-customers-page[b-glatko15k2]  .tw-customer-status.neutral {
        background: #f1f5f9;
        color: #475569;
        border-color: #e2e8f0;
    }

/* ===== PANEL DE RESUMEN =====
   El relleno lo gobierna `--twc-pad` de `.tw-card`, que es fluido y el mismo en toda la pantalla. */

.tw-customer-detail-card[b-glatko15k2] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 18px;
}

/* El contenido interno desplaza en vertical si desborda la tarjeta */
.tw-customer-detail-body[b-glatko15k2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .tw-customer-detail-body[b-glatko15k2]::-webkit-scrollbar {
        width: 6px;
    }

    .tw-customer-detail-body[b-glatko15k2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tw-customer-detail-body[b-glatko15k2]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.tw-detail-top[b-glatko15k2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tw-avatar[b-glatko15k2] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
}

.tw-detail-name[b-glatko15k2] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.tw-detail-email[b-glatko15k2] {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
}

/* Tercer nivel de caja que había aquí: cuatro recuadros («Código de cliente», «Teléfono»,
   «Pedidos web», «Último pedido») dentro del detalle, que a su vez estaba dentro de otra tarjeta.
   Son pares etiqueta/valor de una ficha, no objetos: los pinta `.tw-rows`
   (`wwwroot/css/tienda-web.css`) como filas alineadas, que es como se lee una ficha. */
.tw-detail-grid[b-glatko15k2] {
    margin-bottom: 16px;
}

.tw-detail-note[b-glatko15k2] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}

.tw-detail-actions[b-glatko15k2] {
    display: flex;
    gap: 10px;
}

.tw-primary-btn[b-glatko15k2] {
    height: 38px;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    background: #2563eb;
    color: #ffffff;
}

.tw-empty-detail[b-glatko15k2] {
    padding: 18px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Responsive: al FINAL para ganar a las reglas de columnas fijas de arriba.
   Por debajo del breakpoint la tabla y el resumen se apilan en vertical.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .tw-customers-page[b-glatko15k2],
    .tw-customers-layout[b-glatko15k2],
    .tw-customers-main[b-glatko15k2],
    .tw-customer-detail-card[b-glatko15k2],
    .tw-customer-detail-body[b-glatko15k2] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tw-customers-layout[b-glatko15k2] {
        grid-template-columns: 1fr;
    }

    /* Apilado bajo el listado, el resumen deja de ir pegado arriba. */
    .tw-customer-detail-card[b-glatko15k2] {
        position: static;
    }
}

@media (max-width: 768px) {
    .tw-clientes-toolbar[b-glatko15k2] {
        grid-template-columns: 1fr;
    }

    .tw-accion-btn[b-glatko15k2],
    .tw-primary-btn[b-glatko15k2] {
        width: 100%;
        justify-content: center;
    }

    .tw-detail-actions[b-glatko15k2] {
        flex-direction: column;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebCobrosTab.razor.rz.scp.css */
/* Pestaña Cobros de la tienda web (plan CB, CB3). */

.twc-page[b-e3uvlxbb04] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

.twc-barra[b-e3uvlxbb04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.twc-acciones[b-e3uvlxbb04] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.twc-card[b-e3uvlxbb04] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.twc-titulo[b-e3uvlxbb04] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.twc-subtitulo[b-e3uvlxbb04] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.twc-cabecera-lista[b-e3uvlxbb04] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.twc-vacio[b-e3uvlxbb04] {
    padding: 16px 8px;
    color: #6b7280;
    font-size: 13px;
}

.twc-tabla-scroll[b-e3uvlxbb04] {
    overflow-x: auto;
}

.twc-tabla[b-e3uvlxbb04] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .twc-tabla th[b-e3uvlxbb04] {
        text-align: left;
        color: #6b7280;
        font-weight: 750;
        padding: 6px 8px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .twc-tabla td[b-e3uvlxbb04] {
        padding: 6px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        vertical-align: top;
    }

.twc-num[b-e3uvlxbb04] {
    text-align: right;
    white-space: nowrap;
}

.twc-metodo[b-e3uvlxbb04] {
    font-weight: 700;
}

.twc-aviso[b-e3uvlxbb04] {
    margin-top: 3px;
    font-size: 11px;
    color: #b45309;
}

.twc-con-aviso td:first-child[b-e3uvlxbb04] {
    border-left: 3px solid #f59e0b;
}

.twc-input[b-e3uvlxbb04],
.twc-page[b-e3uvlxbb04]  .twc-input {
    height: 32px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    padding: 0 8px;
    font-size: 12px;
    color: #1f2937;
    background: #ffffff;
    min-width: 0;
}

.twc-corto[b-e3uvlxbb04] {
    width: 110px;
}

.twc-mini[b-e3uvlxbb04] {
    width: 80px;
}

.twc-btn[b-e3uvlxbb04] {
    height: 34px;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
}

    .twc-btn:disabled[b-e3uvlxbb04] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.twc-btn-primario[b-e3uvlxbb04] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

.twc-ajustes[b-e3uvlxbb04] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.twc-check[b-e3uvlxbb04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
}

.twc-paginador[b-e3uvlxbb04] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 12px;
    color: #4b5563;
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebConfiguracionTab.razor.rz.scp.css */
.tw-config-page[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tw-config-layout[b-9ujiz7ygl8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--twc-gap, 16px);
    align-items: start;
}

.tw-config-main[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
    gap: var(--twc-gap, 16px);
}

/* La caja base la pone `.tw-card` (`wwwroot/css/tienda-web.css`). Las cinco secciones de la columna
   principal se dibujan como las dos tarjetas del lateral: contorno gris nítido y SIN sombra. Es la
   misma decisión y por la misma razón —una tarjeta que flota dice «esto está por encima del
   contenido», y aquí todas las secciones pesan lo mismo—, así que la pantalla entera se lee como
   una rejilla de bloques delimitados en vez de como papeles apilados.

   El selector cuelga de `.tw-config-main` para ganarle a `.tienda-web-page .tw-card`, que vive en la
   hoja global y empataría en especificidad con un `.tw-config-card` a secas (ver la nota larga en
   `.tw-config-side .tw-side-card`, más abajo: mismo problema, misma solución).

   `.tw-side-note` NO es una tarjeta: es un aviso, y se dibuja distinto a propósito (ver abajo). */
.tw-config-main .tw-config-card[b-9ujiz7ygl8] {
    border: 1px solid #d0d7de;
    box-shadow: none;
}

.tw-config-card-head[b-9ujiz7ygl8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--twc-pad, 16px);
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

    /* El icono de la sección, en gris como todo lo demás. Era una pastilla azul y llamaba la
       atención cinco veces en la misma columna sin decir nada que el título no dijera: un icono
       decorativo no debería competir con el contenido.

       El `:not()` es imprescindible: el chevrón del pliegue es otro Material Symbol dentro de la
       misma cabecera, y sin excluirlo saldría también como una pastilla de 34 px con borde. */
    .tw-config-card-head .material-symbols-outlined:not(.tw-plegable-chevron)[b-9ujiz7ygl8] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #f6f8fa;
        border: 1px solid #d0d7de;
        color: #57606a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        flex: 0 0 auto;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

/* CABECERA PLEGABLE
   La cabecera de «Opciones» ES el interruptor del pliegue: un <button> que ocupa toda la fila, con
   el chevrón a la derecha. Antes el control era un «ver»/«ocultar» de 12 px subrayado y metido
   dentro del título —un blanco diminuto que ni parecía un control—.

   Hay que devolver a cero lo que el navegador pinta en un <button> (fondo, borde, fuente, alineación
   del texto) porque la cabecera se diseñó como un <div>; lo único que se conserva del botón es que
   es pulsable y enfocable con el teclado, que es justo lo que se buscaba al convertirlo. */
button.tw-config-card-head[b-9ujiz7ygl8] {
    background: none;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 6px 12px;
    /* Los márgenes negativos compensan el padding lateral: el área pulsable se ensancha hasta los
       bordes de la tarjeta, pero el icono y el título siguen alineados con los campos de las demás
       secciones. */
    margin-left: -6px;
    margin-right: -6px;
    width: calc(100% + 12px);
    font: inherit;
    color: inherit;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.16s ease;
}

    button.tw-config-card-head:hover[b-9ujiz7ygl8] {
        background: #f6f8fa;
    }

    button.tw-config-card-head:focus-visible[b-9ujiz7ygl8] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    /* El texto se lleva el hueco sobrante; así el chevrón queda pegado al borde derecho. */
    button.tw-config-card-head > div[b-9ujiz7ygl8] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Cerrado, la cabecera es toda la tarjeta: sin línea inferior ni hueco debajo, que dejarían un
       borde suelto y un vacío al pie de una tarjeta sin contenido. */
    button.tw-config-card-head:not(.abierto)[b-9ujiz7ygl8] {
        border-bottom-color: transparent;
        margin-bottom: 0;
        padding-bottom: 4px;
    }

/* El chevrón: gira 180° al abrir. Es lo que dice si lo de dentro está desplegado sin leer ninguna
   palabra, y por eso el rótulo «ver»/«ocultar» ya no hace falta. */
.tw-plegable-chevron[b-9ujiz7ygl8] {
    align-self: center;
    flex: 0 0 auto;
    font-size: 22px;
    color: #6b7280;
    transition: transform 0.18s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tw-plegable.abierto .tw-plegable-chevron[b-9ujiz7ygl8] {
    transform: rotate(180deg);
}

/* Los títulos bajan de 900 a 700: el 900 es un peso de titular, y en una columna con cinco secciones
   seguidas convertía cada cabecera en un grito. */
.tw-config-card-title[b-9ujiz7ygl8] {
    font-size: 14px;
    font-weight: 700;
    color: #24292f;
}

.tw-config-card-subtitle[b-9ujiz7ygl8] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.tw-form-grid[b-9ujiz7ygl8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.tw-field[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tw-field-span-2[b-9ujiz7ygl8] {
    grid-column: span 2;
}

/* Rótulo del campo, en el gris atenuado de la pantalla. El que manda es el VALOR que hay debajo: el
   rótulo solo dice qué es, y en un formulario que ya se lee de arriba abajo no necesita más peso.
   Comparte color con el texto de ayuda a propósito —los dos son texto de apoyo— y se distingue por
   el grosor, no por el color. */
.tw-field label[b-9ujiz7ygl8] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.tw-field-help[b-9ujiz7ygl8] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.tw-input[b-9ujiz7ygl8] {
    width: 100%;
    height: 42px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

    .tw-input[b-9ujiz7ygl8]::placeholder {
        color: #9ca3af;
    }

    .tw-input:hover:not(:focus):not(:disabled)[b-9ujiz7ygl8] {
        border-color: #afb8c1;
    }

    /* El foco SÍ lleva color, y es lo único que lo lleva en el formulario: es la única señal de en
       qué campo se está escribiendo, y un anillo gris sobre un borde gris no se vería. */
    .tw-input:focus[b-9ujiz7ygl8] {
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tw-input:disabled[b-9ujiz7ygl8] {
        background: #f6f8fa;
        color: #8c959f;
        cursor: not-allowed;
    }

.tw-switch-grid[b-9ujiz7ygl8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* El interruptor va CENTRADO con su texto, no pegado arriba. Con `flex-start` quedaba a la altura de
   la primera línea y la tarjeta se leía torcida, porque el texto son dos líneas (rótulo + pista) y
   el interruptor una sola. */
.tw-switch-card[b-9ujiz7ygl8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

    /* El hover del interruptor es lo ÚNICO que se mueve al pasar por encima en toda la columna, y
       eso es a propósito: es lo único que se puede pulsar sin llevar el cursor a un campo. */
    .tw-switch-card:hover[b-9ujiz7ygl8] {
        background: #f6f8fa;
        border-color: #d0d7de;
    }

    .tw-switch-card input[b-9ujiz7ygl8] {
        display: none;
    }

    /* Encendido: la tarjeta entera lo dice, no solo el interruptor de 38 px. En una rejilla de cinco
       hay que poder ver de un vistazo cuáles están activos. */
    .tw-switch-card:has(input:checked)[b-9ujiz7ygl8] {
        border-color: #c3d9f7;
        background: #f7fafe;
    }

.tw-switch-ui[b-9ujiz7ygl8] {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.16s ease;
    /* Sin `margin-top`: lo centra la rejilla (`align-items: center`). El desplazamiento de 1 px
       existía para compensar el `flex-start` de antes, y ahora torcería justo lo que se acaba de
       alinear. */
}

    .tw-switch-ui[b-9ujiz7ygl8]::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        background: #ffffff;
        transition: transform 0.16s ease;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    }

.tw-switch-card input:checked + .tw-switch-ui[b-9ujiz7ygl8] {
    background: #2563eb;
}

    .tw-switch-card input:checked + .tw-switch-ui[b-9ujiz7ygl8]::after {
        transform: translateX(16px);
    }

.tw-switch-card strong[b-9ujiz7ygl8] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
}

.tw-switch-card small[b-9ujiz7ygl8] {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.tw-config-side[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Rótulo de cada tarjeta del lateral. Menos peso que antes (900 en 14 px sobre un panel estrecho
   competía con los propios datos) y en mayúsculas pequeñas: se lee como una etiqueta de sección y
   deja el protagonismo al contenido. */
.tw-side-title[b-9ujiz7ygl8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
}

/* Aviso: fondo gris relleno, que es lo que lo separa de una tarjeta —blanca y con contorno— y hace
   que se lea como una nota y no como una sección más. Ahora que ninguna tarjeta lleva sombra, el
   relleno es LO ÚNICO que las distingue, así que aquí sí importa. */
.tw-side-note[b-9ujiz7ygl8] {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f6f8fa;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.tw-config-page[b-9ujiz7ygl8] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

/* Contenedor sin tarjeta: solo entra en la cadena de llenado como columna flex */
.tw-config-panel[b-9ujiz7ygl8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tw-config-layout[b-9ujiz7ygl8] {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 10px;
    overflow: hidden;
}

.tw-config-main[b-9ujiz7ygl8],
.tw-config-side[b-9ujiz7ygl8] {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* El relleno de las tarjetas lo gobierna `--twc-pad` (fluido, común a toda la pantalla): aquí
   había un `padding: 12px` fijo que lo pisaba solo en esta pestaña. */

.tw-form-grid[b-9ujiz7ygl8] {
    gap: 10px 12px;
}

.tw-input[b-9ujiz7ygl8] {
    height: 36px;
}

/* ---------------------------------------------------------------------------
   Responsive: al FINAL para ganar a las reglas de columnas fijas de arriba.
   Por debajo del breakpoint, contenido principal y lateral se apilan vertical.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .tw-config-page[b-9ujiz7ygl8],
    .tw-config-panel[b-9ujiz7ygl8],
    .tw-config-layout[b-9ujiz7ygl8],
    .tw-config-main[b-9ujiz7ygl8],
    .tw-config-side[b-9ujiz7ygl8] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tw-config-layout[b-9ujiz7ygl8] {
        grid-template-columns: 1fr;
    }

    .tw-switch-grid[b-9ujiz7ygl8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tw-form-grid[b-9ujiz7ygl8] {
        grid-template-columns: 1fr;
    }

    .tw-field-span-2[b-9ujiz7ygl8] {
        grid-column: auto;
    }
}

/* TW10: piezas nuevas de la configuracion real — veredicto de «Probar conexion», JSON avanzado,
   URL de webhook (larga, monoespaciada para poder leerla) y journal del panel lateral. */

/* Veredicto de la prueba. Va fuera de tarjeta, colgando de su botón: rejilla de icono + texto para
   que la segunda línea del mensaje no se meta debajo del icono. */
.tw-prueba[b-9ujiz7ygl8] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
}

    .tw-prueba .material-symbols-outlined[b-9ujiz7ygl8] {
        font-size: 18px;
        line-height: 1.2;
    }

    .tw-prueba.ok[b-9ujiz7ygl8] {
        background: #ecfdf3;
        border-color: #d1fadf;
        color: #15803d;
    }

    .tw-prueba.ko[b-9ujiz7ygl8] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

.tw-config-json[b-9ujiz7ygl8],
.tw-webhook-url[b-9ujiz7ygl8] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
}

.tw-config-json[b-9ujiz7ygl8] {
    min-height: 180px;
    height: auto;
    padding: 8px 10px;
    resize: vertical;
}

.tw-adopcion-link[b-9ujiz7ygl8] {
    background: none;
    border: 0;
    padding: 0 4px;
    color: #2563eb;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
}

.tw-order-subtext[b-9ujiz7ygl8] {
    font-size: 11px;
    color: #6b7280;
}

.tw-journal-detalle[b-9ujiz7ygl8] {
    margin: 6px 0 0;
    max-height: 180px;
    overflow: auto;
    background: #f8fafc;
    border-radius: 6px;
    padding: 8px;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LATERAL DE LA FICHA — acciones, estado y línea de tiempo
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Las dos tarjetas del lateral («Estado» y «Últimas sincronizaciones») se dibujan con un contorno
   gris NÍTIDO y sin sombra, en vez del `.tw-card` de la pantalla —que flota con `--twc-shadow` y
   lleva una línea casi invisible (`--twc-line`, un gris azulado muy claro)—. Una tarjeta que flota
   dice «esto está por encima del contenido», y estas dos son una nota al margen del formulario: se
   leen mejor delimitadas por su borde que levantadas del fondo.
   `.tw-side-card` era hasta ahora una clase marcadora SIN ninguna regla; esto es lo primero que
   pinta.

   El selector cuelga de `.tw-config-side` a propósito. La regla que hay que ganar es
   `.tienda-web-page .tw-card`, que vive en la hoja GLOBAL (`wwwroot/css/tienda-web.css`) y empata en
   especificidad con un `.tw-side-card` a secas: empatando, gana la que el navegador cargue después,
   que no es algo que deba decidir el aspecto de una tarjeta. Con el ancestro delante hay una clase
   más y el empate desaparece. */
.tw-config-side .tw-side-card[b-9ujiz7ygl8] {
    border: 1px solid #d0d7de;
    box-shadow: none;
}

/* EL BOTÓN DE LA PESTAÑA
   Uno solo para toda la ficha: las acciones del lateral («Guardar», «Probar conexión») y las del
   webhook («Copiar», «Generar token»). Se llamaba `.tw-side-btn` cuando solo existía en el lateral;
   ahora ese nombre sería mentira en la columna principal.

   Habla el MISMO idioma que la CommandBar de esta pantalla
   (`.tienda-web-page .cw-detalle-cmdbar .command-bar__btn`, en la hoja global): peso 600, radio 8,
   sin sombra y el mismo hover gris. Así lo pulsable de la pestaña se reconoce por su forma y no hay
   que aprenderse dos familias de botón.

   Dos desviaciones deliberadas de la barra: el fondo es BLANCO y no transparente —en el lateral
   reposan sobre el gris de la página, no dentro de una tarjeta—, y son un poco más altos y con más
   cuerpo de letra (36 px / 13 px frente a 30 / 12), porque son acciones de la ficha y no comandos de
   una barra apretada.

   TODO en gris —texto, borde e icono—, sin acento de color en ninguno. «Guardar» no se distingue por
   color: se distingue por ir primero y por su icono. Una columna que no compite en color con el
   formulario de al lado es más fácil de leer que una con un azul llamando la atención. */
.tw-side-acciones[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tw-btn[b-9ujiz7ygl8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    /* El icono sigue al color de su botón (`inherit`, no un color fijo) y se ALIGERA: la hoja global
       pinta todos los Material Symbols a `wght 500`, que junto al texto en negrita hacía un botón
       más pesado que cualquier otro de la pantalla. A 400 el trazo acompaña al texto en vez de
       competir con él. */
    .tw-btn .material-symbols-outlined[b-9ujiz7ygl8] {
        font-size: 18px;
        flex: 0 0 auto;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        /* El icono es la ligadura de un tipo de letra, o sea texto: sin esto se selecciona al
           arrastrar y se traga el clic del botón. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    /* El hover solo oscurece el gris: es la señal de «esto se puede pulsar», no un cambio de color. */
    .tw-btn:hover:not(:disabled)[b-9ujiz7ygl8] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #1f2937;
    }

    /* El foco de teclado SÍ lleva color: es la única forma de ver dónde está el cursor sin ratón, y
       un anillo gris sobre un botón gris no se vería. */
    .tw-btn:focus-visible[b-9ujiz7ygl8] {
        outline: none;
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tw-btn:disabled[b-9ujiz7ygl8] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Variante de BLOQUE: ocupa el ancho de su columna. La usan las dos acciones del lateral, que son
   una lista vertical; en la columna principal el botón se queda en su ancho natural, porque ahí
   estirarlo de lado a lado lo convertiría en una banda. */
.tw-btn-bloque[b-9ujiz7ygl8] {
    width: 100%;
}

/* Fila de acciones dentro de un campo del formulario (el webhook). Existe para que el botón NO
   herede el `align-items: stretch` de `.tw-field`, que lo estiraría al ancho de la celda. */
.tw-acciones-linea[b-9ujiz7ygl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ESTADO
   Cuatro hechos en cuatro filas. Antes eran etiqueta gris a la izquierda y valor negro a la derecha,
   los dos en negrita y compitiendo; ahora la etiqueta cede (más pequeña y sin peso) y el valor manda,
   con su punto de color delante. */
.tw-estado-lista[b-9ujiz7ygl8] {
    display: flex;
    flex-direction: column;
}

.tw-estado-row[b-9ujiz7ygl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
}

    .tw-estado-row:last-child[b-9ujiz7ygl8] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tw-estado-row:first-child[b-9ujiz7ygl8] {
        padding-top: 0;
    }

.tw-estado-label[b-9ujiz7ygl8] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.tw-estado-valor[b-9ujiz7ygl8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #24292f;
    text-align: right;
}

/* El punto acompaña a la palabra, nunca la sustituye: el color no puede ser la única señal. */
.tw-punto[b-9ujiz7ygl8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #cbd5e1;
}

    .tw-punto.ok[b-9ujiz7ygl8] {
        background: #16a34a;
    }

    .tw-punto.warn[b-9ujiz7ygl8] {
        background: #f59e0b;
    }

    .tw-punto.neutral[b-9ujiz7ygl8] {
        background: #cbd5e1;
    }

/* LÍNEA DE TIEMPO DEL JOURNAL
   Una corrida = un punto en una línea, con «hace cuánto» encima y qué pasó debajo. El orden de
   lectura es el de la pregunta que trae aquí al operador: primero cuándo, después de qué era y solo
   al final los números. */
.tw-timeline[b-9ujiz7ygl8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tw-timeline-item[b-9ujiz7ygl8] {
    position: relative;
    padding: 0 0 16px 20px;
}

    .tw-timeline-item:last-child[b-9ujiz7ygl8] {
        padding-bottom: 0;
    }

    /* El hilo que une los puntos. Arranca DEBAJO del punto y muere en el borde inferior de la
       entrada; en la última no se pinta, para que la línea no quede colgando. */
    .tw-timeline-item[b-9ujiz7ygl8]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 14px;
        bottom: 0;
        width: 1px;
        background: #e5eaf1;
    }

    .tw-timeline-item:last-child[b-9ujiz7ygl8]::before {
        display: none;
    }

.tw-timeline-punto[b-9ujiz7ygl8] {
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    /* El aro blanco separa el punto del hilo que pasa por detrás. */
    box-shadow: 0 0 0 2px #ffffff;
}

    .tw-timeline-punto.error[b-9ujiz7ygl8] {
        background: #dc2626;
    }

    .tw-timeline-punto.curso[b-9ujiz7ygl8] {
        background: #2563eb;
    }

.tw-timeline-tiempo[b-9ujiz7ygl8] {
    font-size: 11px;
    color: #6b7280;
    /* La fecha exacta vive en el `title`: se avisa de que hay algo que mirar al pasar por encima. */
    cursor: help;
}

.tw-timeline-titulo[b-9ujiz7ygl8] {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: #24292f;
    line-height: 1.35;
}

/* Los números, en tercer plano: se leen cuando ya se sabe de qué corrida se está hablando. */
.tw-timeline-meta[b-9ujiz7ygl8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
}

.tw-timeline-cuenta[b-9ujiz7ygl8] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #334155;
}

    .tw-timeline-cuenta.error[b-9ujiz7ygl8] {
        color: #b91c1c;
    }

.tw-timeline-errores[b-9ujiz7ygl8] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 700;
}

.tw-timeline-encurso[b-9ujiz7ygl8] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-weight: 700;
}

/* Pie de la lista, en el sitio del «View changelog →» de la tarjeta que inspira esto: aquí no
   enlaza a ninguna parte —no hay pantalla con el journal completo—, así que dice lo único cierto
   que se puede decir ahí, que la lista está recortada. */
.tw-timeline-pie[b-9ujiz7ygl8] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 11px;
    color: #94a3b8;
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LISTADO DE TIENDAS (maestro)
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   La pestaña tiene ahora DOS pantallas —listado y ficha— y solo una está montada a la vez. El
   listado entra en la misma cadena de llenado que la ficha: columna flex que cede su alto a la
   tabla, que es la que se desplaza por dentro. */
.tw-tiendas-lista[b-9ujiz7ygl8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

/* Barra de trabajo: el rótulo a la izquierda y la CommandBar pegada al extremo derecho (se empuja
   sola con el `margin-left: auto` de `cw-detalle-cmdbar`, en la hoja global). `nowrap` porque el
   reparto lo hace el script de la barra replegando comandos, nunca el salto de línea. */
.tw-tiendas-barra[b-9ujiz7ygl8] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tw-tiendas-titulo[b-9ujiz7ygl8] {
    font-size: 14px;
    font-weight: 700;
    color: #24292f;
}

.tw-tiendas-subtitulo[b-9ujiz7ygl8] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.tw-tiendas-tabla[b-9ujiz7ygl8] {
    /* Contenedor flex-columna: es lo que espera `.tp-panel` para repartirse el alto. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* CELDAS DEL LISTADO
   Van con `::deep` porque ese markup lo renderiza <TablaPaginada> y el CSS con ámbito no lo alcanza
   por sí solo. Cuelgan de `.tw-config-page` —y no de la tabla— para que la MISMA regla sirva en la
   celda y en la cabecera de la ficha, que reutiliza la insignia de estado. */
.tw-config-page[b-9ujiz7ygl8]  .tw-tienda-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
}

.tw-config-page[b-9ujiz7ygl8]  .tw-order-subtext {
    margin-top: 3px;
    font-size: 11px;
    color: #6b7280;
}

.tw-config-page[b-9ujiz7ygl8]  .tw-tienda-badge,
.tw-tienda-badge[b-9ujiz7ygl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .tw-config-page[b-9ujiz7ygl8]  .tw-tienda-badge.ok,
    .tw-tienda-badge.ok[b-9ujiz7ygl8] {
        background: #ecfdf3;
        color: #15803d;
        border-color: #d1fadf;
    }

    .tw-config-page[b-9ujiz7ygl8]  .tw-tienda-badge.warn,
    .tw-tienda-badge.warn[b-9ujiz7ygl8] {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .tw-config-page[b-9ujiz7ygl8]  .tw-tienda-badge.neutral,
    .tw-tienda-badge.neutral[b-9ujiz7ygl8] {
        background: #f6f8fa;
        color: #57606a;
        border-color: #d0d7de;
    }

/* ACCIONES POR FILA
   Los MISMOS botones que el listado de almacenes (`.alm-row-actions` / `.alm-action-btn` en
   `AlmacenesPage.razor.css`), con sus mismos valores: 30 px, radio 8, sin relleno en reposo, editar
   en el azul primario con borde tenue y borrar en gris neutro que solo vira a rojo en el hover.
   Se repiten aquí y no se comparten porque aquel CSS tiene ámbito de su propia página; lo que se
   comparte es el aspecto, que es lo que el usuario reconoce de una pantalla a otra.

   `user-select` apagado por lo mismo que allí: el icono es la ligadura de un tipo de letra, o sea
   texto, y sin esto se puede seleccionar y resaltar al arrastrar sobre la fila. */
.tw-config-page[b-9ujiz7ygl8]  .tw-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tw-config-page[b-9ujiz7ygl8]  .tw-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    user-select: none;
    -webkit-user-select: none;
}

    .tw-config-page[b-9ujiz7ygl8]  .tw-action-btn .material-symbols-outlined {
        font-size: 18px;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.tw-config-page[b-9ujiz7ygl8]  .tw-action-btn-edit {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .tw-config-page[b-9ujiz7ygl8]  .tw-action-btn-edit:hover {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.tw-config-page[b-9ujiz7ygl8]  .tw-action-btn-delete {
    color: #444653;
}

    .tw-config-page[b-9ujiz7ygl8]  .tw-action-btn-delete:hover:not(:disabled) {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

.tw-config-page[b-9ujiz7ygl8]  .tw-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FILA VIGENTE
   La tabla no tiene noción de selección: la marca la aporta la vista (`ClaseFilaExtra`), que sabe
   cuál es la tienda del módulo. Es lo que sustituye a la columna de la estrella: ya no hay nada que
   marcar aparte, porque abrir una tienda ES elegirla. El hover de la tabla no debe pisarla, de ahí
   el `:hover` explícito con el mismo fondo. */
.tw-config-page[b-9ujiz7ygl8]  .tw-row-sel > td,
.tw-config-page[b-9ujiz7ygl8]  .tw-row-sel:hover > td {
    background: #eff6ff;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CABECERA DE LA FICHA (detalle)
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   Es la única pieza que dice dónde está el operador y cómo se sale: va arriba del todo, fuera de
   las tarjetas, y no se desplaza con ellas. */
.tw-ficha-cabecera[b-9ujiz7ygl8] {
    display: flex;
    align-items: center;
    /* Pegado al título: la flecha es su acompañante, no un botón aparte. Los 12 px de antes la
       dejaban flotando entre dos elementos sin pertenecer a ninguno. */
    gap: 4px;
    min-width: 0;
    /* Aire por debajo, para que el título respire frente a la primera tarjeta. Va aquí y no en la
       tarjeta porque es la cabecera la que manda la separación. */
    padding: 2px 0 2px;
}

/* Vuelta al listado: SOLO la flecha, con el mismo comportamiento que el botón de vuelta de la
   cabecera de la pantalla (`.volver-chip.volver-boton`, en `VolverAlOrigen.razor.css`) y que los
   comandos planos del CommandBar en los que aquel se inspira: sin fondo ni borde en reposo, y en
   hover superficie blanca + línea + una sombra mínima, o sea que el botón «aparece» al apuntarlo.

   Era un botón con contorno y el rótulo «Listado de tiendas» dentro: pesaba lo mismo que el título
   que tenía al lado y competía con él, cuando lo que hace es solo salir de la ficha. */
.tw-volver-btn[b-9ujiz7ygl8] {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .tw-volver-btn:hover[b-9ujiz7ygl8] {
        background: #ffffff;
        border-color: #d0d7de;
        color: #24292f;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    .tw-volver-btn:focus-visible[b-9ujiz7ygl8] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tw-volver-btn .material-symbols-outlined[b-9ujiz7ygl8] {
        font-size: 20px;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    /* El rótulo vive en el `title`/`aria-label`, pero se conserva en el DOM y oculto: hay lectores
       de pantalla que no anuncian `aria-label`. Mismo criterio que `.volver-chip.volver-boton`. */
    .tw-volver-texto[b-9ujiz7ygl8] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

/* El nombre de la tienda es lo más importante de esta pantalla y ahora lo parece: 18 px frente a los
   15 de antes, que lo dejaban al nivel de un rótulo de sección. Se queda por debajo del <h1> de la
   pantalla (22 px) porque es un nivel más abajo, no un título que compita con él. */
.tw-ficha-titulo[b-9ujiz7ygl8] {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* La insignia recupera el aire que el `gap: 4px` —pensado para la pareja flecha+título— le quitaba.
   No es un hueco arbitrario: separa el nombre de su estado, que son dos cosas distintas. */
.tw-ficha-cabecera .tw-tienda-badge[b-9ujiz7ygl8] {
    margin-left: 6px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .tw-tiendas-barra[b-9ujiz7ygl8] {
        flex-wrap: wrap;
    }
}

/* ---- Almacenes que cuentan para el stock de la web ---- */

.tw-almacenes-stock[b-9ujiz7ygl8] {
    margin-top: 14px;
}

.tw-almacenes[b-9ujiz7ygl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 4px;
}

.tw-almacen[b-9ujiz7ygl8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.tw-almacen.inactivo[b-9ujiz7ygl8] {
    color: #9ca3af;
}

/* ---- Productos borrados en la tienda ---- */

.tw-recrear-borrados[b-9ujiz7ygl8] {
    margin-top: 14px;
}

.tw-borrados[b-9ujiz7ygl8] {
    border-color: #fcd34d;
    background: #fffbeb;
}

.tw-borrados .tw-side-title[b-9ujiz7ygl8] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
}

.tw-borrados > small[b-9ujiz7ygl8] {
    display: block;
    color: #78350f;
    margin-bottom: 8px;
}

.tw-borrados-lista[b-9ujiz7ygl8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tw-borrados-lista li[b-9ujiz7ygl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.tw-borrado-texto[b-9ujiz7ygl8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-borrado-accion[b-9ujiz7ygl8] {
    flex-shrink: 0;
    border: 1px solid #d97706;
    background: #ffffff;
    color: #92400e;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tw-borrado-accion:hover:not(:disabled)[b-9ujiz7ygl8] {
    background: #fef3c7;
}

.tw-borrado-accion:disabled[b-9ujiz7ygl8] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebMuestrariosTab.razor.rz.scp.css */
/* Pestaña Colores y texturas: mosaico de valores de talla/color a la izquierda, la galería del que
   esté señalado a la derecha. Mosaico y no lista porque lo que hay que reconocer es la muestra. */

.mu-layout[b-k9mjio0l8k] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
    gap: var(--twc-gap, 16px);
    align-items: stretch;
    overflow: hidden;
}

/* La caja la pone `.tw-card` (`wwwroot/css/tienda-web.css`); la cabecera, `.tw-card-head`. Aquí
   queda solo lo propio: llenar el alto de la rejilla. */
.mu-panel[b-k9mjio0l8k] {
    height: 100%;
}

/* «Traer de la tienda», a la derecha de la cabecera del mosaico. Mismo aspecto que los `.tw-btn` de
   Configuración y Adopción (blanco, contorno y texto gris), en tamaño de cabecera. */
.mu-traer[b-k9mjio0l8k] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .mu-traer .material-symbols-outlined[b-k9mjio0l8k] {
        font-size: 16px;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        pointer-events: none;
        user-select: none;
    }

    .mu-traer:hover:not(:disabled)[b-k9mjio0l8k] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #1f2937;
    }

    .mu-traer:disabled[b-k9mjio0l8k] {
        opacity: 0.55;
        cursor: default;
    }

.mu-search[b-k9mjio0l8k] {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.mu-input[b-k9mjio0l8k] {
    width: 100%;
    height: 32px;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    padding: 0 11px;
    font-size: 12px;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
}

    .mu-input:focus[b-k9mjio0l8k] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

.mu-body[b-k9mjio0l8k] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .mu-body[b-k9mjio0l8k]::-webkit-scrollbar {
        width: 6px;
    }

    .mu-body[b-k9mjio0l8k]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* Cabecera de grupo: es un botón porque pliega su nivel (las tallas nacen plegadas). */
.mu-nivel[b-k9mjio0l8k] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 6px;
    border: 0;
    background: transparent;
    padding: 2px 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9ca3af;
    cursor: pointer;
    text-align: left;
}

    .mu-nivel:hover[b-k9mjio0l8k] {
        color: #6b7280;
    }

    .mu-nivel .material-symbols-outlined[b-k9mjio0l8k] {
        font-size: 16px;
    }

.mu-nivel-cuenta[b-k9mjio0l8k] {
    margin-left: auto;
    letter-spacing: 0;
}

/* El mosaico: celdas de ancho fijo que rellenan el panel. Con muchos valores, lo que se busca se
   reconoce por la muestra, no por la clave. */
.mu-mosaico[b-k9mjio0l8k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    padding: 2px 0 6px;
}

.mu-celda[b-k9mjio0l8k] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #ffffff;
    padding: 6px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

    .mu-celda:hover[b-k9mjio0l8k] {
        border-color: #cbd5e1;
        background: #f6f8fa;
    }

    .mu-celda.selected[b-k9mjio0l8k] {
        border-color: #bfdbfe;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px #bfdbfe;
    }

/* La muestra: la imagen si la hay; si no, el color de respaldo —que es lo que enseñaría la tienda—;
   y si tampoco hay color, cuadros grises, que se leen como «no hay» en vez de como «blanco». */
.mu-muestra[b-k9mjio0l8k] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 9px;
    border: 1px solid #d0d7de;
    overflow: hidden;
    color: #cbd5e1;
}

    .mu-muestra.vacia[b-k9mjio0l8k] {
        background-image: linear-gradient(45deg, #d0d7de 25%, transparent 25%, transparent 75%, #d0d7de 75%),
                          linear-gradient(45deg, #d0d7de 25%, transparent 25%, transparent 75%, #d0d7de 75%);
        background-size: 10px 10px;
        background-position: 0 0, 5px 5px;
    }

    .mu-muestra img[b-k9mjio0l8k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mu-muestra .material-symbols-outlined[b-k9mjio0l8k] {
        font-size: 20px;
    }

.mu-celda-clave[b-k9mjio0l8k] {
    font-size: 11px;
    font-weight: 700;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mu-celda-desc[b-k9mjio0l8k] {
    font-size: 10px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mu-detalle-head[b-k9mjio0l8k] {
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.mu-detalle-title[b-k9mjio0l8k] {
    font-size: 15px;
    font-weight: 700;
    color: #24292f;
    line-height: 1.25;
}

.mu-detalle-sub[b-k9mjio0l8k] {
    margin-top: 2px;
    font-size: 11px;
    color: #6b7280;
}

.mu-aviso[b-k9mjio0l8k] {
    padding: 8px 10px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.mu-hint[b-k9mjio0l8k] {
    color: #9ca3af;
    font-size: 12px;
    padding: 14px 6px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .mu-layout[b-k9mjio0l8k] {
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .mu-panel[b-k9mjio0l8k],
    .mu-body[b-k9mjio0l8k] {
        height: auto;
        max-height: 55vh;
    }
}
/* _content/ErpPowergest/Presentation/Almacenes/TiendaWeb/Views/TiendaWebPedidosTab.razor.rz.scp.css */
.tw-pedidos-page[b-rsshxjhtjj] {
    display: flex;
    flex-direction: column;
    gap: var(--twc-gap, 16px);
}

.tw-pedidos-grid[b-rsshxjhtjj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--twc-gap, 16px);
    align-items: start;
}

/* El cuerpo NO es una tarjeta: apila la barra de trabajo, los filtros —sueltos sobre el gris— y la
   tabla, que trae su propio marco (`.tp-panel`). Ya no hay tarjeta envolviendo filtros y tabla: era
   una caja dentro de otra, y con `TablaPaginada` había pasado a ser una caja dentro de otra dentro
   de otra. (Su `display`, `gap` y `container-type` se declaran más abajo, con el reparto de alto.) */

.tw-pedidos-primary-btn[b-rsshxjhtjj],
.tw-pedidos-danger-btn[b-rsshxjhtjj] {
    height: 38px;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.16s ease;
}

/* El enlace al documento de la fila. Con `::deep`: ahora vive en una plantilla de columna, y ese
   markup lo renderiza <TablaPaginada>. Va más bajo que antes (30 px): una fila de tabla no es sitio
   para un botón de 38. */
.tw-pedidos-page[b-rsshxjhtjj]  .tw-table-action-btn {
    height: 30px;
    border: 1px solid #dbe3ec;
    border-radius: 9px;
    padding: 0 11px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-table-action-btn:hover {
        border-color: #bfdbfe;
        background: #f8fbff;
        color: #1d4ed8;
    }

.tw-pedidos-primary-btn[b-rsshxjhtjj] {
    border: 0;
    background: #2563eb;
    color: #ffffff;
}

.tw-pedidos-danger-btn[b-rsshxjhtjj] {
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

.full[b-rsshxjhtjj] {
    width: 100%;
}

/* BARRA DE TRABAJO — la tienda y las dos corridas que se hacen sobre ella.
   Va la primera y fuera de la barra de FILTROS a propósito: no filtra la lista, actúa sobre la
   tienda. Antes las acciones estaban dentro de la barra de FILTROS, en una CommandBar que se
   replegaba a «···» en cuanto la columna se estrechaba (que es siempre, con el detalle abierto), y a
   dos controles de distancia del desplegable de tienda del que dependen.

   UNA sola línea, siempre: `nowrap` no es cosmético, es lo que hace que la barra de comandos sepa
   replegarse. Su script mide el DESBORDAMIENTO de este contenedor (`scrollWidth > clientWidth`); con
   `wrap`, los botones se iban a la línea de abajo, el contenedor nunca desbordaba y la barra no
   llegaba a pasar a iconos ni al «···». Es el mismo montaje que `.tw-card-head`, y el orden en que
   ceden queda así: primero se estrecha el desplegable hasta su mínimo, después los comandos pierden
   el texto y se quedan en iconos, y solo al final se repliegan al «···». */
.tw-pedidos-barra[b-rsshxjhtjj] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

/* El desplegable de tienda se declara ABAJO, detrás de `.tw-input`: comparte con él marca de ámbito
   y especificidad, así que puesto aquí su alto lo repondría la regla de `.tw-input`. */

/* El botón de acción propio de esta pestaña. Ya solo lo usa «Limpiar filtros»: las dos corridas de
   la barra de trabajo son una CommandBar, con el mismo estilo que las acciones de «Definición» en la
   pestaña Catálogo (`cw-detalle-cmdbar`, en `wwwroot/css/tienda-web.css`). */
.tw-accion-btn[b-rsshxjhtjj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .tw-accion-btn .material-symbols-outlined[b-rsshxjhtjj] {
        font-size: 19px;
    }

    .tw-accion-btn:hover:not(:disabled)[b-rsshxjhtjj] {
        border-color: #bfdbfe;
        background: #f8fbff;
    }

    .tw-accion-btn:focus-visible[b-rsshxjhtjj] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    /* Apagado, pero legible: sigue diciendo qué haría, y el tooltip dice por qué no puede ahora. */
    .tw-accion-btn:disabled[b-rsshxjhtjj] {
        background: #f8fafc;
        border-color: #e6ecf3;
        color: #9aa6b6;
        cursor: default;
    }

/* Filtros de la LISTA: buscador (que crece), estados y el botón de limpiar. La tienda ya no está
   aquí —subió a la barra de trabajo—, así que son tres huecos y no cuatro. Sin `margin-bottom`: al
   salir de la tarjeta, la separación con la tabla la pone el `gap` de `.tw-pedidos-main`, y las dos
   sumaban. */
.tw-pedidos-toolbar[b-rsshxjhtjj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    align-items: center;
    gap: 12px;
}

/* Caja de búsqueda con la lupa dentro, como en el resto de listados de la aplicación. */
.tw-pedidos-buscador[b-rsshxjhtjj] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.tw-pedidos-buscador-icono[b-rsshxjhtjj] {
    position: absolute;
    left: 12px;
    font-size: 19px;
    color: #94a3b8;
    pointer-events: none;
}

/* El botón de limpiar acompaña a los filtros: más bajo que los de corrida y sin peso de acción. */
.tw-pedidos-limpiar[b-rsshxjhtjj] {
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
}

.tw-input[b-rsshxjhtjj] {
    width: 100%;
    height: 42px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
}

    .tw-input:focus[b-rsshxjhtjj] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

/* El hueco de la lupa, DESPUÉS de `.tw-input` y con el `padding` completo, no con `padding-left`.
   Las dos reglas empatan en especificidad (las dos son una clase con la misma marca de ámbito), así
   que decide el orden: puesto antes, el `padding: 0 14px` de `.tw-input` volvía a pegar el texto a
   la izquierda y el placeholder aparecía DEBAJO del icono. El alto es 38 px, no 42, porque es el que
   traen `.fmul-boton` y el `.xx-filter-select` de todos los listados: al lado del desplegable de
   estados, cualquier otro se ve como un escalón. */
.tw-pedidos-buscador-input[b-rsshxjhtjj] {
    height: 38px;
    padding: 0 14px 0 38px;
}

/* La tienda de trabajo: más baja que un `.tw-input` normal (34 px, no 42) para no pesar más que los
   botones de 30 px que lleva al lado —es un selector de ámbito, no un campo que haya que rellenar—.
   Va aquí, y no arriba junto a `.tw-pedidos-barra`, por lo mismo que el buscador: `.tw-input` empata
   en especificidad y gana quien va después. Su ancho no crece; la barra de comandos se empuja sola
   al extremo derecho con el `margin-left: auto` de `cw-detalle-cmdbar`. */
.tw-pedidos-tienda-select[b-rsshxjhtjj] {
    /* Es QUIEN CEDE en la fila: parte de 300 px y se estrecha hasta 150, que es donde todavía se lee
       el nombre de una tienda. Ese suelo es lo que decide cuándo los comandos pasan a iconos: sin él
       (`min-width: auto`, el mínimo de contenido de un desplegable) el desplegable no cedería casi
       nada y el desbordamiento llegaría demasiado pronto. */
    flex: 0 1 300px;
    min-width: 150px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
}

/* LISTADO
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera, filas, estado vacío y paginador): ese estilo
   vive en su propio CSS y NO se replica aquí. Se han retirado la tabla a mano que había (`.tw-table`,
   `.tw-table-wrap`, `.tw-empty-state`, `.text-right`) y sus botones de paginación.

   Lo que queda es lo que la tabla no puede saber: el aspecto de las celdas que aporta esta vista como
   plantilla y la marca de la fila apuntada. Va con `::deep` porque ese markup lo renderiza otro
   componente y el CSS con ámbito no lo alcanza por sí solo. Colgar de `.tw-pedidos-page` (y no de la
   tabla) es lo que hace que la MISMA regla sirva para la celda y para el panel de detalle, que usa
   las mismas piezas y sí es markup propio. */
.tw-pedidos-tabla[b-rsshxjhtjj] {
    /* Contenedor flex-columna: es lo que espera `.tp-panel` para repartirse el alto. */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-pedidos-page[b-rsshxjhtjj]  .tw-order-number,
.tw-pedidos-page[b-rsshxjhtjj]  .tw-order-client {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.tw-pedidos-page[b-rsshxjhtjj]  .tw-order-subtext {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* FILA APUNTADA
   La tabla no tiene noción de selección: la marca la aporta esta vista (`ClaseFilaExtra`), que es
   quien sabe qué pedido está abierto en el panel de la derecha. El hover de la tabla no debe
   pisarla, de ahí el `:hover` explícito con el mismo fondo. */
.tw-pedidos-page[b-rsshxjhtjj]  .tw-row-sel > td,
.tw-pedidos-page[b-rsshxjhtjj]  .tw-row-sel:hover > td {
    background: #eff6ff;
}

.tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status.pending {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status.progress {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status.ok {
        background: #ecfdf3;
        color: #15803d;
        border-color: #d1fadf;
    }

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .tw-pedidos-page[b-rsshxjhtjj]  .tw-order-status.neutral {
        background: #f1f5f9;
        color: #475569;
        border-color: #e2e8f0;
    }

.tw-pedidos-detail[b-rsshxjhtjj] {
    position: sticky;
    top: 18px;
}

.tw-detail-head[b-rsshxjhtjj] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.tw-detail-title[b-rsshxjhtjj] {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.tw-detail-subtitle[b-rsshxjhtjj] {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
}

/* Bloque de datos del pedido: pares etiqueta/valor. Los pinta `.tw-rows`
   (`wwwroot/css/tienda-web.css`); aquí solo el hueco hasta lo siguiente. Tenía marco propio dentro
   de la tarjeta del detalle, que era el tercer nivel de caja. */
.tw-detail-block[b-rsshxjhtjj] {
    margin-bottom: 16px;
}

    .tw-detail-block > .tw-detail-row:last-child[b-rsshxjhtjj] {
        border-bottom: 0;
    }

.tw-detail-warning[b-rsshxjhtjj] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 14px;
}

.tw-detail-actions[b-rsshxjhtjj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tw-empty-detail[b-rsshxjhtjj] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    text-align: center;
}

    .tw-empty-detail .material-symbols-outlined[b-rsshxjhtjj] {
        font-size: 36px;
        color: #2563eb;
    }

    .tw-empty-detail strong[b-rsshxjhtjj] {
        color: #0f172a;
        font-size: 15px;
    }

    .tw-empty-detail p[b-rsshxjhtjj] {
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
    }

.tw-pedidos-page[b-rsshxjhtjj] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.tw-pedidos-grid[b-rsshxjhtjj] {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 10px;
    overflow: hidden;
}

    .tw-pedidos-main[b-rsshxjhtjj],
    .tw-pedidos-detail[b-rsshxjhtjj] {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

/* El cuerpo es columna flex: barra de trabajo y filtros arriba (alto fijo) y la tabla rellenando el
   resto (en vez de un max-height calculado a mano). Ya no hay tarjeta intermedia: los tres son hijos
   directos, que es lo que hace que este reparto se lea de un vistazo. */
.tw-pedidos-main[b-rsshxjhtjj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .tw-pedidos-main > .tw-pedidos-barra[b-rsshxjhtjj],
    .tw-pedidos-main > .tw-pedidos-toolbar[b-rsshxjhtjj] {
        flex: 0 0 auto;
    }

    /* La tabla es la que crece. */
    .tw-pedidos-main > .tw-pedidos-tabla[b-rsshxjhtjj] {
        flex: 1 1 auto;
        min-height: 0;
    }

/* El detalle es columna flex; su contenido interno desplaza en vertical si desborda. Ahora ES una
   tarjeta (`.tw-card` en el markup), así que la línea que lo separaba del listado sobra: lo separa
   el hueco de la rejilla, como a cualquier otra tarjeta. */
.tw-pedidos-detail[b-rsshxjhtjj] {
    display: flex;
    flex-direction: column;
}

.tw-pedidos-detail-body[b-rsshxjhtjj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .tw-pedidos-detail-body[b-rsshxjhtjj]::-webkit-scrollbar {
        width: 6px;
    }

    .tw-pedidos-detail-body[b-rsshxjhtjj]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tw-pedidos-detail-body[b-rsshxjhtjj]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.tw-detail-block[b-rsshxjhtjj] {
    margin-bottom: 10px;
}

.tw-detail-row[b-rsshxjhtjj] {
    padding: 9px 12px;
}

.tw-detail-warning[b-rsshxjhtjj] {
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   Responsive: deben ir al FINAL para ganar a las reglas de columnas fijas de
   arriba. Por debajo del breakpoint, el layout se apila en vertical (la tabla
   sobre el detalle) y se libera el alto fijo / overflow del modo escritorio.
   --------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .tw-pedidos-page[b-rsshxjhtjj],
    .tw-pedidos-grid[b-rsshxjhtjj],
    .tw-pedidos-detail[b-rsshxjhtjj],
    .tw-pedidos-detail-body[b-rsshxjhtjj],
    .tw-pedidos-main[b-rsshxjhtjj] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tw-pedidos-grid[b-rsshxjhtjj] {
        grid-template-columns: 1fr;
    }

    /* Apilado bajo el listado, el detalle deja de ir pegado arriba. Ya no hace falta línea de
       separación: es una tarjeta y la separa el hueco de la rejilla. */
    .tw-pedidos-detail[b-rsshxjhtjj] {
        position: static;
    }
}

@media (max-width: 768px) {
    .tw-pedidos-toolbar[b-rsshxjhtjj] {
        grid-template-columns: 1fr;
    }

    /* La barra de trabajo NO se apila aquí: la tienda y sus dos corridas se leen juntas o no se
       entienden, así que en estrecho ceden por dentro —el desplegable se encoge y los comandos se
       quedan en iconos— en vez de partirse en dos líneas. Lo resuelve `nowrap` arriba; este bloque
       solo tiene que no deshacerlo. */

    .tw-accion-btn[b-rsshxjhtjj] {
        width: 100%;
        justify-content: center;
    }

    .tw-pedidos-primary-btn[b-rsshxjhtjj],
    .tw-pedidos-danger-btn[b-rsshxjhtjj] {
        width: 100%;
    }
}
/* TW10 — piezas nuevas del listado real de pedidos: el hueco del motivo de descarte, que comparte el
   ancho del panel de detalle. El buscador ya no se lanza con Enter: se aplica solo tras el debounce,
   y el filtrado sigue siendo de SERVIDOR. El `.tw-select` que había aquí (un `min-width: 180px`) se
   retira: iba DESPUÉS de `.tw-pedidos-tienda-select` y le reponía el suelo, que es justo el número
   que decide cuándo la barra de comandos pasa a iconos. */

.tw-detail-actions .tw-input[b-rsshxjhtjj] {
    width: 100%;
}
/* _content/ErpPowergest/Presentation/Alta/Pages/AltaPage.razor.rz.scp.css */
/* Asistente de alta (AL2). Mismo lenguaje visual que la puesta en marcha (PM4) — es literalmente la
   misma conversación, antes de que exista el cliente—, con el chasis de una página pública: fondo
   propio, marca arriba y todo centrado. El estilo se repite en vez de compartir selectores con la
   puesta en marcha, por el mismo criterio que las tarjetas de opciones: unirlos ataría el aspecto
   de una pantalla al de la otra. */

.alta-page[b-xnu5qgputg],
.alta-page *[b-xnu5qgputg],
.alta-page *[b-xnu5qgputg]::before,
.alta-page *[b-xnu5qgputg]::after {
    box-sizing: border-box;
}

.alta-page[b-xnu5qgputg] {
    min-height: 100vh;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px clamp(16px, 4vw, 48px) 34px;
    max-width: 1180px;
    margin: 0 auto;
}

/* MARCA */

.alta-marca[b-xnu5qgputg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alta-marca-logo[b-xnu5qgputg] {
    width: 26px;
    height: 26px;
}

.alta-marca-texto[b-xnu5qgputg] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* CABECERA */

.alta-header[b-xnu5qgputg] {
    margin-top: 6px;
}

.alta-kicker[b-xnu5qgputg] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6366f1;
}

.alta-title[b-xnu5qgputg] {
    margin: 4px 0 0;
    font-size: clamp(20px, 1.4vw + 14px, 26px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.alta-subtitle[b-xnu5qgputg] {
    margin-top: 6px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.4;
    max-width: 720px;
}

/* TARJETA */

.alta-card[b-xnu5qgputg] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.alta-msg[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    padding: 44px 18px;
    max-width: 560px;
    margin: 8vh auto 0;
    width: 100%;
}

.alta-msg-ico[b-xnu5qgputg] {
    font-size: 36px;
    color: #9ca3af;
}

.alta-msg-ok[b-xnu5qgputg] {
    color: #16a34a;
}

.alta-msg strong[b-xnu5qgputg] {
    color: #1f2937;
    font-size: 16px;
}

.alta-msg p[b-xnu5qgputg] {
    margin: 0;
    max-width: 440px;
    line-height: 1.45;
}

.alta-msg .alta-btn[b-xnu5qgputg] {
    margin-top: 10px;
}

.alta-link[b-xnu5qgputg] {
    color: #4338ca;
    font-weight: 750;
    text-decoration: none;
}

.alta-link:hover[b-xnu5qgputg] {
    text-decoration: underline;
}

/* PASOS */

.alta-steps[b-xnu5qgputg] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.alta-step[b-xnu5qgputg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.alta-step:hover:not(:disabled)[b-xnu5qgputg] {
    border-color: #c7d2fe;
    color: #4338ca;
}

.alta-step:disabled[b-xnu5qgputg] {
    cursor: default;
    opacity: .7;
}

.alta-step.active[b-xnu5qgputg] {
    border-color: #6366f1;
    background: #eef2ff;
    color: #3730a3;
}

.alta-step.done .alta-step-num[b-xnu5qgputg] {
    background: #dcfce7;
    color: #166534;
}

.alta-step-num[b-xnu5qgputg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    flex: 0 0 auto;
}

.alta-step-num .material-symbols-rounded[b-xnu5qgputg] {
    font-size: 15px;
}

.alta-step.active .alta-step-num[b-xnu5qgputg] {
    background: #6366f1;
    color: #ffffff;
}

/* CUERPO */

.alta-body[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alta-step-head h2[b-xnu5qgputg] {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
    color: #1f2937;
}

.alta-step-head p[b-xnu5qgputg] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Dos columnas: preguntas y vista previa (PM5). En estrecho la previa se oculta. */

.alta-con-previa[b-xnu5qgputg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.alta-preguntas[b-xnu5qgputg] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1100px) {
    .alta-con-previa[b-xnu5qgputg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* EL ACCESO (AL3): un formulario corto y centrado en su tarjeta. */

.alta-acceso .alta-fields[b-xnu5qgputg] {
    max-width: 460px;
}

/* CAMPOS */

.alta-fields[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

.alta-field[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.alta-field label[b-xnu5qgputg] {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

.alta-field-sub[b-xnu5qgputg] {
    margin: -4px 0 4px 34px;
    max-width: 320px;
}

.alta-input[b-xnu5qgputg] {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

.alta-input:focus[b-xnu5qgputg] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.alta-hint[b-xnu5qgputg] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.alta-check[b-xnu5qgputg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    background: #ffffff;
}

.alta-check:hover[b-xnu5qgputg] {
    border-color: #c7d2fe;
}

.alta-check-off[b-xnu5qgputg] {
    opacity: .55;
}

.alta-check input[b-xnu5qgputg] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: #6366f1;
}

.alta-check span[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alta-check strong[b-xnu5qgputg] {
    font-size: 14px;
    font-weight: 750;
    color: #1f2937;
}

.alta-check em[b-xnu5qgputg] {
    font-style: normal;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* NOTA INFORMATIVA («cómo cobras») */

.alta-note[b-xnu5qgputg] {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    max-width: 720px;
}

.alta-note-ico[b-xnu5qgputg] {
    font-size: 26px;
    color: #2563eb;
    flex: 0 0 auto;
}

.alta-note strong[b-xnu5qgputg] {
    display: block;
    font-size: 14px;
    color: #1e3a8a;
    margin-bottom: 6px;
}

.alta-note p[b-xnu5qgputg] {
    margin: 0 0 8px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.45;
}

/* AL8: el enlace discreto del código de activación. */

.alta-codigo-abrir[b-xnu5qgputg] {
    align-self: flex-start;
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 750;
    color: #4338ca;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* LA ELECCIÓN (AL5): dos tarjetas del mismo tamaño — dos opciones legítimas, no una principal y
   una escondida. AL8: el migrado ve una sola, acotada. */

.alta-caminos-uno[b-xnu5qgputg] {
    grid-template-columns: minmax(0, 420px);
}

.alta-caminos[b-xnu5qgputg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    max-width: 760px;
}

.alta-camino[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    font-family: inherit;
}

.alta-camino:hover:not(:disabled)[b-xnu5qgputg] {
    border-color: #6366f1;
    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.12);
    transform: translateY(-1px);
}

.alta-camino:disabled[b-xnu5qgputg] {
    opacity: .6;
    cursor: default;
}

.alta-camino-ico[b-xnu5qgputg] {
    font-size: 30px;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alta-camino-titulo[b-xnu5qgputg] {
    font-size: 17px;
    font-weight: 850;
    color: #1f2937;
}

.alta-camino-desc[b-xnu5qgputg] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

.alta-camino-espera[b-xnu5qgputg] {
    font-size: 12px;
    font-weight: 750;
    color: #b45309;
}

.alta-salidas[b-xnu5qgputg] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* LOS PLANES (AL4/AL5) */

.alta-planes-cab[b-xnu5qgputg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.alta-periodo[b-xnu5qgputg] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    overflow: hidden;
}

.alta-periodo-btn[b-xnu5qgputg] {
    padding: 7px 16px;
    border: 0;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.alta-periodo-btn.active[b-xnu5qgputg] {
    background: #6366f1;
    color: #ffffff;
}

.alta-planes[b-xnu5qgputg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.alta-plan[b-xnu5qgputg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

/* R4: el plan que la web ya dijo, señalado — no elegido por nadie más que el cliente. */

.alta-plan-elegido[b-xnu5qgputg] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.alta-plan-marca[b-xnu5qgputg] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4338ca;
}

.alta-plan-nombre[b-xnu5qgputg] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.alta-plan-desc[b-xnu5qgputg] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
    min-height: 34px;
}

.alta-plan-precio[b-xnu5qgputg] {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.alta-plan-precio strong[b-xnu5qgputg] {
    font-size: 26px;
    font-weight: 850;
    color: #1f2937;
}

.alta-plan-precio span[b-xnu5qgputg] {
    font-size: 13px;
    color: #6b7280;
}

.alta-plan-consultanos[b-xnu5qgputg] {
    font-size: 18px !important;
    color: #4338ca !important;
}

.alta-plan-btn[b-xnu5qgputg] {
    margin-top: auto;
    text-align: center;
}

.alta-plan-btn-link[b-xnu5qgputg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ERRORES */

.alta-error[b-xnu5qgputg] {
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
}

/* El rebote del aterrizaje. En AZUL y no en rojo a propósito: el alta salió bien y el programa
   está montado — lo que falla es el atajo de entrada, y pintarlo de rojo diría lo contrario. */
.alta-aviso[b-xnu5qgputg] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 14px;
}

.alta-aviso-ico[b-xnu5qgputg] {
    font-size: 20px;
    flex: 0 0 auto;
    color: #3b82f6;
}

/* PIE */

.alta-footer[b-xnu5qgputg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.alta-footer-right[b-xnu5qgputg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.alta-btn[b-xnu5qgputg] {
    height: 36px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.alta-btn:hover:not(:disabled)[b-xnu5qgputg] {
    border-color: #9ca3af;
}

.alta-btn:disabled[b-xnu5qgputg] {
    opacity: .5;
    cursor: default;
}

.alta-btn-ghost[b-xnu5qgputg] {
    border-color: transparent;
    color: #6b7280;
}

.alta-btn-primary[b-xnu5qgputg] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.alta-btn-primary:hover:not(:disabled)[b-xnu5qgputg] {
    background: #4f46e5;
    border-color: #4f46e5;
}

/* ── Campaña del plan (FUN-J15) ──────────────────────────────────────────────────────────────────
   El alta enseñaba el precio de tarifa mientras la web anunciaba la rebaja. Se pinta aquí con la
   escala de esta pantalla, pero lo que dice cada trozo —qué se tacha, qué reclamo y qué se paga
   después— lo decide `OfertaPlan`, el mismo que usa «Elegir plan» dentro del programa. */
.alta-plan-antes[b-xnu5qgputg] {
    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;
}

.alta-plan-promo[b-xnu5qgputg] {
    display: inline-flex;
    align-self: flex-start;
    margin: 6px 0 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 12px;
    font-weight: 700;
}

.alta-plan-nota[b-xnu5qgputg] {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #94a3b8;
}
/* _content/ErpPowergest/Presentation/Alta/Pages/BienvenidaPage.razor.rz.scp.css */
/* La bienvenida del cliente recién dado de alta (FUN-409). Mismo lenguaje visual que el asistente
   de alta y el registro, repetido en vez de compartido por el criterio de siempre: los estilos
   scoped de una página no llegan a otra.

   Una sola tarjeta centrada, y a propósito: es la única pantalla del recorrido que no pide nada.
   Todo lo que hay aquí es HTML estático —ver el comentario de BienvenidaPage.razor—, así que
   tampoco hay estados de carga que estilar. */

.bienv[b-vlwmvc3jrx],
.bienv *[b-vlwmvc3jrx],
.bienv *[b-vlwmvc3jrx]::before,
.bienv *[b-vlwmvc3jrx]::after {
    box-sizing: border-box;
}

.bienv[b-vlwmvc3jrx] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px);
    background: linear-gradient(160deg, #0b1a3a 0%, #16356b 55%, #1e3a8a 100%);
}

.bienv-caja[b-vlwmvc3jrx] {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(28px, 5vw, 52px);
    box-shadow: 0 1px 3px rgba(11, 26, 58, .12), 0 18px 48px rgba(11, 26, 58, .22);
    text-align: center;
}

.bienv-marca[b-vlwmvc3jrx] {
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0.01em;
    color: #16356b;
}

.bienv-titulo[b-vlwmvc3jrx] {
    margin: 18px 0 0;
    font-size: clamp(24px, 1.8vw + 14px, 34px);
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -0.01em;
    color: #0b1a3a;
}

.bienv-texto[b-vlwmvc3jrx] {
    margin: 14px 0 0;
    font-size: clamp(14px, 0.4vw + 12px, 16px);
    line-height: 1.55;
    color: #4a5568;
}

/* El único camino de salida, y por eso es un enlace de verdad y no un botón de Blazor: sin circuito
   un @onclick no hace nada al pulsarlo, que es exactamente el fallo que esta pantalla corrige. */
.bienv-btn[b-vlwmvc3jrx] {
    display: inline-block;
    margin: 28px 0 0;
    padding: 14px 30px;
    background: #1e3a8a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s ease;
}

.bienv-btn:hover[b-vlwmvc3jrx],
.bienv-btn:focus-visible[b-vlwmvc3jrx] {
    background: #16356b;
}

.bienv-nota[b-vlwmvc3jrx] {
    margin: 26px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #7b8794;
}

.bienv-nota a[b-vlwmvc3jrx] {
    color: #1e3a8a;
    font-weight: 600;
}
/* _content/ErpPowergest/Presentation/Alta/Pages/EntrarPage.razor.rz.scp.css */
/* La entrada única (R3). Una tarjeta centrada con el mismo lenguaje visual que el registro. */

.entrar-page[b-94ryke3yxq],
.entrar-page *[b-94ryke3yxq],
.entrar-page *[b-94ryke3yxq]::before,
.entrar-page *[b-94ryke3yxq]::after {
    box-sizing: border-box;
}

.entrar-page[b-94ryke3yxq] {
    min-height: 100vh;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 40px clamp(16px, 4vw, 48px);
}

.entrar-marca[b-94ryke3yxq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entrar-marca-logo[b-94ryke3yxq] {
    width: 28px;
    height: 28px;
}

.entrar-marca-texto[b-94ryke3yxq] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.entrar-card[b-94ryke3yxq] {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entrar-cab h1[b-94ryke3yxq] {
    margin: 0;
    font-size: clamp(20px, 1.2vw + 14px, 26px);
    font-weight: 850;
    color: #1f2937;
    line-height: 1.2;
}

.entrar-cab p[b-94ryke3yxq] {
    margin: 8px 0 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.45;
}

.entrar-form[b-94ryke3yxq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.entrar-field[b-94ryke3yxq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.entrar-field label[b-94ryke3yxq] {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

.entrar-input[b-94ryke3yxq] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

.entrar-input:focus[b-94ryke3yxq] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.entrar-btn[b-94ryke3yxq] {
    height: 42px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.entrar-btn:disabled[b-94ryke3yxq] {
    opacity: .5;
    cursor: default;
}

.entrar-btn-primary[b-94ryke3yxq] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.entrar-btn-primary:hover:not(:disabled)[b-94ryke3yxq] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.entrar-error[b-94ryke3yxq] {
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
}

.entrar-aviso[b-94ryke3yxq] {
    margin: 0;
    font-size: 13px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 9px 12px;
    line-height: 1.45;
}

/* R2: el botón de Google, solo cuando hay claves. */

.entrar-google[b-94ryke3yxq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.entrar-google:hover[b-94ryke3yxq] {
    background: #f9fafb;
}

.entrar-google img[b-94ryke3yxq] {
    width: 20px;
    height: 20px;
}

.entrar-o[b-94ryke3yxq] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca3af;
    font-size: 12px;
}

.entrar-o[b-94ryke3yxq]::before,
.entrar-o[b-94ryke3yxq]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.entrar-pie[b-94ryke3yxq] {
    margin: 0;
    font-size: 13.5px;
    color: #4b5563;
    text-align: center;
}

.entrar-pie a[b-94ryke3yxq] {
    color: #4338ca;
    font-weight: 750;
    text-decoration: none;
}

.entrar-pie a:hover[b-94ryke3yxq] {
    text-decoration: underline;
}

.entrar-pie-small[b-94ryke3yxq] {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.45;
}
/* _content/ErpPowergest/Presentation/Alta/Pages/RegistroPage.razor.rz.scp.css */
/* El registro en autoservicio (R1). Dos columnas como la competencia: a la izquierda por qué, a la
   derecha el formulario. Mismo lenguaje visual que el asistente de alta (AltaPage), repetido en vez
   de compartido por el mismo criterio de siempre: los estilos scoped de una página no llegan a otra,
   y atar las dos costaría más que copiar.

   LOS COLORES SALEN DEL LOGOTIPO, no de un naranja cualquiera. Muestreados de
   `wwwroot/images/powergest.png`: el naranja de la marca es #ff6800 (el degradado llega a #ff8e29) y
   el azul, #006284. Si algún día cambia el logotipo, este bloque es lo que hay que volver a
   muestrear — no hay variables de marca en el sitio para heredarlas. */

.registro-page[b-svci6sq3va],
.registro-page *[b-svci6sq3va],
.registro-page *[b-svci6sq3va]::before,
.registro-page *[b-svci6sq3va]::after {
    box-sizing: border-box;
}

.registro-page[b-svci6sq3va] {
    --marca-naranja: #ff6800;
    --marca-naranja-claro: #ff8e29;
    --marca-naranja-oscuro: #e65c00;
    --marca-azul: #006284;
    --marca-azul-claro: #4fc3f0;

    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: #f4f6fb;
}

@media (max-width: 980px) {
    .registro-page[b-svci6sq3va] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* LA IZQUIERDA: el argumento */

.registro-hero[b-svci6sq3va] {
    background: linear-gradient(150deg, #041d3d 0%, #072a56 45%, #0a3c74 100%);
    color: #ffffff;
    padding: clamp(28px, 4vw, 60px) clamp(28px, 4vw, 60px) 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
}

.registro-marca[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.registro-marca-logo[b-svci6sq3va] {
    width: 34px;
    height: 34px;
}

.registro-marca-texto[b-svci6sq3va] {
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -0.01em;
}

/* «PowerGest»: la primera mitad en blanco y la segunda en el naranja del logotipo. */
.registro-marca-texto span[b-svci6sq3va] {
    color: var(--marca-naranja);
}

.registro-hero-titulo[b-svci6sq3va] {
    margin: 22px 0 0;
    font-size: clamp(28px, 2.6vw + 12px, 44px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -0.015em;
    max-width: 560px;
}

/* «IA» se lee como un letrero encendido: es la palabra que trae al cliente a esta página. */
.registro-hero-ia[b-svci6sq3va] {
    color: #6cd3ff;
    text-shadow: 0 0 18px rgba(108, 211, 255, .55);
}

.registro-hero-realce[b-svci6sq3va] {
    color: var(--marca-naranja-claro);
}

.registro-hero-texto[b-svci6sq3va] {
    margin: 0;
    font-size: clamp(14px, 0.5vw + 11px, 17px);
    line-height: 1.5;
    color: #b9cae6;
    max-width: 520px;
}

.registro-argumentos[b-svci6sq3va] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    gap: clamp(14px, 2vw, 26px);
    flex-wrap: wrap;
}

.registro-argumentos li[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 140px;
    min-width: 0;
}

.registro-argumento-ico[b-svci6sq3va] {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #8fd6ff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(143, 214, 255, .3);
}

.registro-argumento-texto[b-svci6sq3va] {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
}

/* LA MUESTRA DEL PROGRAMA.

   Dibujada, no capturada: un PNG de la pantalla real envejece a cada versión y nadie lo repone.
   Se sangra a la derecha a propósito, como si el portátil siguiera fuera del encuadre. */

.registro-muestra[b-svci6sq3va] {
    margin-top: auto;
    padding-top: 22px;
    /* Sale del padding del hero por la derecha: el portátil se corta, no termina. */
    margin-right: clamp(-60px, -4vw, -28px);
    min-width: 0;
    /* El borde inferior se pierde en el fondo en vez de cortarse en seco contra él. */
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

.registro-portatil[b-svci6sq3va] {
    position: relative;
    border-radius: 14px 0 0 0;
    background: #0e2140;
    border: 1px solid rgba(255, 255, 255, .14);
    border-right: 0;
    border-bottom: 0;
    padding: 10px 0 0 10px;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .35);
}

.registro-app[b-svci6sq3va] {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 0;
    position: relative;
    background: #ffffff;
    border-radius: 10px 0 0 0;
    overflow: hidden;
    font-size: 9px;
    color: #1f2937;
    min-height: 210px;
}

.registro-app-menu[b-svci6sq3va] {
    background: #f7f9fc;
    border-right: 1px solid #e8edf5;
    padding: 9px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.registro-app-marca[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 850;
    color: #0e2140;
}

.registro-app-marca img[b-svci6sq3va] {
    width: 14px;
    height: 14px;
}

.registro-app-marca span span[b-svci6sq3va] {
    color: var(--marca-naranja);
}

.registro-app-item[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 5px;
    color: #55637a;
    font-weight: 600;
    white-space: nowrap;
}

.registro-app-item .material-symbols-rounded[b-svci6sq3va] {
    font-size: 12px;
}

.registro-app-item.activo[b-svci6sq3va] {
    background: #e8f1fb;
    color: var(--marca-azul);
    font-weight: 800;
}

.registro-app-cuerpo[b-svci6sq3va] {
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.registro-app-barra[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid #e3e8f0;
    border-radius: 999px;
    color: #9aa5b5;
    background: #fbfcfe;
}

.registro-app-barra .material-symbols-rounded[b-svci6sq3va] {
    font-size: 11px;
}

.registro-app-cifras[b-svci6sq3va] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.registro-app-cifra[b-svci6sq3va] {
    border: 1px solid #e8edf5;
    border-radius: 7px;
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #ffffff;
    min-width: 0;
}

.registro-app-cifra-rotulo[b-svci6sq3va] {
    color: #8b95a6;
    font-size: 8px;
    font-weight: 650;
}

.registro-app-cifra strong[b-svci6sq3va] {
    font-size: 12px;
    font-weight: 850;
    color: #0e2140;
}

.registro-app-cifra-sube[b-svci6sq3va] {
    font-size: 8px;
    font-weight: 750;
    color: #12a150;
}

.registro-app-grafico[b-svci6sq3va] {
    border: 1px solid #e8edf5;
    border-radius: 7px;
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-height: 60px;
}

.registro-app-grafico-rotulo[b-svci6sq3va] {
    font-size: 8px;
    font-weight: 750;
    color: #55637a;
}

.registro-app-linea[b-svci6sq3va] {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.registro-app-linea polyline[b-svci6sq3va] {
    fill: none;
    stroke: var(--marca-azul);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* El asistente, flotando sobre la pantalla: es el argumento de la página, así que se superpone. */
.registro-app-ia[b-svci6sq3va] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 128px;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(14, 33, 64, .18);
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.registro-app-ia-cab[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 850;
    color: #0e2140;
}

.registro-app-ia-cab .material-symbols-rounded[b-svci6sq3va] {
    font-size: 14px;
    color: var(--marca-azul);
}

.registro-app-ia-saludo[b-svci6sq3va] {
    margin: 0;
    font-size: 8.5px;
    color: #55637a;
    line-height: 1.3;
}

.registro-app-ia-sugerencia[b-svci6sq3va] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 8px;
    font-weight: 650;
    color: #34405a;
    border: 1px solid #e8edf5;
    border-radius: 999px;
    padding: 3px 7px;
}

.registro-app-ia-sugerencia span[b-svci6sq3va] {
    color: var(--marca-azul);
}

.registro-app-ia-caja[b-svci6sq3va] {
    font-size: 8px;
    color: #9aa5b5;
    border: 1px solid #e8edf5;
    border-radius: 999px;
    padding: 3px 7px;
}

@media (max-width: 980px) {
    .registro-hero[b-svci6sq3va] {
        padding-bottom: 26px;
        gap: 14px;
    }

    .registro-hero-titulo[b-svci6sq3va] {
        margin-top: 10px;
    }

    /* En pantalla estrecha el formulario es lo único que importa: los adornos estorban y el
       portátil dibujado a 108px de menú no se lee. */
    .registro-argumentos[b-svci6sq3va],
    .registro-muestra[b-svci6sq3va] {
        display: none;
    }
}

/* LA DERECHA: el formulario */

.registro-card[b-svci6sq3va] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(24px, 3.5vw, 52px);
    gap: 14px;
}

/* La insignia de IA corona la columna: dice de qué va el producto antes que el titular. */
.registro-insignia[b-svci6sq3va] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: #e8f1fe;
    color: #0a3c74;
    font-size: 14px;
    font-weight: 800;
}

.registro-insignia .material-symbols-rounded[b-svci6sq3va] {
    font-size: 18px;
    color: var(--marca-azul);
}

.registro-cab[b-svci6sq3va] {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.registro-cab h2[b-svci6sq3va] {
    margin: 0;
    font-size: clamp(24px, 1.6vw + 15px, 34px);
    font-weight: 850;
    color: #0e2140;
    line-height: 1.15;
    letter-spacing: -0.015em;
    /* Sin esto el título parte en tres líneas y deja «gratis» solo en la última. */
    text-wrap: balance;
}

.registro-cab h2 span[b-svci6sq3va] {
    color: var(--marca-naranja);
}

.registro-cab p[b-svci6sq3va] {
    margin: 8px 0 0;
    font-size: 15px;
    color: #6b7280;
    line-height: 1.45;
}

.registro-cab strong[b-svci6sq3va] {
    color: #1f2937;
}

.registro-form[b-svci6sq3va] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: clamp(20px, 2vw, 28px);
    box-shadow: 0 10px 30px rgba(14, 33, 64, .07);
}

.registro-field[b-svci6sq3va] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.registro-field label[b-svci6sq3va] {
    font-size: 13px;
    font-weight: 800;
    color: #374151;
}

/* «(opcional)» en la etiqueta: se lee ANTES de pulsar el campo, que es cuando se decide saltarlo.
   Va más claro y sin la negrita de la etiqueta para que no compita con el nombre del campo. */
.registro-opcional[b-svci6sq3va] {
    font-weight: 600;
    color: #9ca3af;
}

.registro-input[b-svci6sq3va] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

.registro-input[b-svci6sq3va]::placeholder {
    color: #b3bcc9;
}

.registro-input:focus[b-svci6sq3va] {
    border-color: var(--marca-naranja);
    box-shadow: 0 0 0 3px rgba(255, 104, 0, .15);
}

.registro-input:disabled[b-svci6sq3va] {
    background: #f9fafb;
}

.registro-input-codigo[b-svci6sq3va] {
    height: 56px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.35em;
    text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.registro-pass[b-svci6sq3va] {
    position: relative;
}

.registro-pass .registro-input[b-svci6sq3va] {
    padding-right: 44px;
}

.registro-pass-ver[b-svci6sq3va] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #8b95a6;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
}

.registro-pass-ver .material-symbols-rounded[b-svci6sq3va] {
    font-size: 20px;
}

.registro-hint[b-svci6sq3va] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.registro-hint strong[b-svci6sq3va] {
    color: #1f2937;
}

/* EL DESPLEGABLE DE «QUÉ QUIERES USAR».

   Es un <select> nativo y su aspecto —cuadro y lista— lo pone css/desplegables.css, como en todo el
   ERP. Aquí solo se le da lo del cuadro cerrado que comparte con los campos de texto (`.registro-input`:
   alto, borde, redondeo y foco naranja) y el cursor de mano. Nada de `appearance` ni de reglas sobre
   `option`: quitarían la lista vestida y volvería la del sistema operativo. */

.registro-select[b-svci6sq3va] {
    cursor: pointer;
}

.registro-select:disabled[b-svci6sq3va] {
    cursor: default;
}

.registro-btn[b-svci6sq3va] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.registro-btn:disabled[b-svci6sq3va] {
    opacity: .5;
    cursor: default;
}

.registro-btn-primary[b-svci6sq3va] {
    background: var(--marca-naranja);
    border-color: var(--marca-naranja);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(255, 104, 0, .28);
}

.registro-btn-primary:hover:not(:disabled)[b-svci6sq3va] {
    background: var(--marca-naranja-oscuro);
    border-color: var(--marca-naranja-oscuro);
}

.registro-btn-primary:disabled[b-svci6sq3va] {
    box-shadow: none;
}

.registro-btn .material-symbols-rounded[b-svci6sq3va] {
    font-size: 20px;
}

.registro-secundarias[b-svci6sq3va] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.registro-link-btn[b-svci6sq3va] {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 750;
    color: var(--marca-azul);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registro-link-btn:disabled[b-svci6sq3va] {
    color: #9ca3af;
    cursor: default;
    text-decoration: none;
}

.registro-error[b-svci6sq3va] {
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
}

.registro-aviso[b-svci6sq3va] {
    margin: 0;
    font-size: 13px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 9px 12px;
    line-height: 1.45;
}

/* R2: el botón de Google, solo cuando hay claves. */

.registro-google[b-svci6sq3va] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.registro-google:hover[b-svci6sq3va] {
    background: #f9fafb;
}

.registro-google img[b-svci6sq3va] {
    width: 20px;
    height: 20px;
}

.registro-o[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca3af;
    font-size: 12px;
}

.registro-o[b-svci6sq3va]::before,
.registro-o[b-svci6sq3va]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.registro-legal[b-svci6sq3va] {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    line-height: 1.4;
}

.registro-legal a[b-svci6sq3va] {
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* LAS GARANTÍAS, al pie de la columna. Responden a las tres objeciones que frenan un alta: que
   cobren, que tarde, y qué pasa con mis datos. */

.registro-garantias[b-svci6sq3va] {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 2.5vw, 40px);
    flex-wrap: wrap;
    max-width: 460px;
    width: 100%;
    margin: 4px auto 0;
}

.registro-garantia[b-svci6sq3va] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}

.registro-garantia .material-symbols-rounded[b-svci6sq3va] {
    font-size: 24px;
    color: var(--marca-azul);
    flex: none;
}
/* _content/ErpPowergest/Presentation/Asistente/Pages/ChatWebPage.razor.rz.scp.css */
/* Pantalla de administración del chat de la web. CSS scoped: vive junto a su .razor y no se
   comparte. Sin ::deep: aquí no hay plantillas de Syncfusion, es HTML propio. */

/* Ocupa el ancho del área de contenido, como Clientes: sin max-width ni padding propio (el borde lo
   pone .main-body); columna flex con el mismo respiro que el resto de pantallas. */
.cw-page[b-x0o58iemop],
.cw-page *[b-x0o58iemop],
.cw-page *[b-x0o58iemop]::before,
.cw-page *[b-x0o58iemop]::after {
    box-sizing: border-box;
}

.cw-page[b-x0o58iemop] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Cabecera con el patrón común: título a la izquierda y CommandBar arriba a la derecha. Sin
   flex-wrap: la barra repliega al «···» cuando falta sitio. */
.cw-header[b-x0o58iemop] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

/* Título en dos fases, como en Diario: el bloque no cede y el título va en una línea, así la barra
   ve que falta sitio y pasa a solo iconos y luego al «···». Con la barra replegada del todo
   (command-bar-host-collapsed, la pone el script) el texto envuelve. */
.cw-header > .cw-header-text[b-x0o58iemop] {
    flex: 0 0 auto;
    min-width: 0;
}

.cw-header.command-bar-host-collapsed > .cw-header-text[b-x0o58iemop] {
    flex: 1 1 auto;
}

.cw-title[b-x0o58iemop] {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}

.cw-subtitle[b-x0o58iemop] {
    color: var(--texto-suave, #6b7280);
    font-size: .875rem;
    max-width: 70ch;
}

.cw-header.command-bar-host-collapsed .cw-title[b-x0o58iemop],
.cw-header.command-bar-host-collapsed .cw-subtitle[b-x0o58iemop] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.cw-header[b-x0o58iemop]  .cw-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ── Tarjetas y secciones ────────────────────────────────────────────────────────────────────── */

.cw-card[b-x0o58iemop] {
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: var(--fondo-card, #fff);
    padding: 1rem;
    min-width: 0;
}

.cw-card-titulo[b-x0o58iemop] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.cw-card-titulo .material-symbols-rounded[b-x0o58iemop] {
    font-size: 1.15rem;
    color: var(--texto-suave, #6b7280);
    vertical-align: -.2rem;
}

.cw-nota[b-x0o58iemop] {
    font-weight: 400;
    font-size: .8rem;
    color: var(--texto-suave, #6b7280);
}

.cw-empty[b-x0o58iemop] {
    color: var(--texto-suave, #6b7280);
    padding: .75rem 0;
    font-size: .875rem;
}

/* ── La clave recién generada ─────────────────────────────────────────────────────────────────
   Se queda a la vista hasta que el usuario dice que la ha copiado: no se vuelve a mostrar, así
   que un toast que se desvanece haría perder la única copia que existe. */
.cw-clave[b-x0o58iemop] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    border: 1px solid #fde68a;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
}

.cw-clave code[b-x0o58iemop] {
    display: block;
    font-family: ui-monospace, monospace;
    font-size: .9rem;
    word-break: break-all;
    margin: .4rem 0;
    padding: .4rem .55rem;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 4px;
    user-select: all;
}

.cw-clave-pie[b-x0o58iemop] {
    font-size: .8rem;
    margin-bottom: .5rem;
}

/* ── Tabla de canales ────────────────────────────────────────────────────────────────────────── */

.cw-tabla-scroll[b-x0o58iemop] {
    max-height: 26rem;
    overflow: auto;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 6px;
}

/* La cabecera se queda fija al hacer scroll: con varios canales, a mitad de lista ya no se sabe
   qué columna es cuál. */
.cw-tabla-scroll thead th[b-x0o58iemop] {
    position: sticky;
    top: 0;
    background: var(--fondo-card, #fff);
    z-index: 1;
}

.cw-tabla[b-x0o58iemop] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.cw-tabla th[b-x0o58iemop] {
    text-align: left;
    font-weight: 600;
    padding: .5rem .6rem;
    border-bottom: 2px solid var(--borde, #e5e7eb);
    color: var(--texto-suave, #6b7280);
    font-size: .8rem;
}

.cw-tabla td[b-x0o58iemop] {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--borde-suave, #f3f4f6);
    vertical-align: top;
}

.cw-tabla tbody tr:hover[b-x0o58iemop] { background: var(--fondo-hover, #f9fafb); }

/* Un canal desactivado sigue en la lista con su historial, pero no atiende: se ve apagado. */
.cw-fila-inactiva[b-x0o58iemop] { opacity: .55; }

.cw-nombre[b-x0o58iemop] { font-weight: 500; }

.cw-detalle[b-x0o58iemop] {
    font-size: .8rem;
    color: var(--texto-suave, #6b7280);
}

.cw-num[b-x0o58iemop] { text-align: right; white-space: nowrap; }

/* ── Chips de estado ─────────────────────────────────────────────────────────────────────────── */

.cw-chip[b-x0o58iemop] {
    display: inline-block;
    padding: .1rem .45rem;
    margin: 0 .2rem .2rem 0;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.cw-chip-on[b-x0o58iemop] { background: #dcfce7; color: #166534; }
.cw-chip-off[b-x0o58iemop] { background: #fee2e2; color: #991b1b; }
.cw-chip-gratis[b-x0o58iemop] { background: #ede9fe; color: #5b21b6; }

/* ── Botones del contenido ────────────────────────────────────────────────────────────────────
   El vocabulario común del proyecto: 36px, radio 8, icono + texto; primario azul relleno,
   secundario blanco con borde, peligro rojo suave. */

.cw-acciones[b-x0o58iemop] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cw-btn[b-x0o58iemop] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 36px;
    padding: 0 .85rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

.cw-btn:hover:not(:disabled)[b-x0o58iemop] { background: #f3f6fa; }
.cw-btn:disabled[b-x0o58iemop] { opacity: .55; cursor: default; }

.cw-btn .material-symbols-rounded[b-x0o58iemop] { font-size: 1.05rem; }

.cw-btn-primary[b-x0o58iemop] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.cw-btn-primary:hover:not(:disabled)[b-x0o58iemop] { background: #1d4ed8; }

/* Borrar un canal deja muda la web que lo usa: se pinta como lo que es. */
.cw-btn-danger[b-x0o58iemop] {
    background: #fff;
    border-color: #f0c4c7;
    color: #c22f39;
}

.cw-btn-danger:hover:not(:disabled)[b-x0o58iemop] { background: #fdf1f2; }

/* Los botones de la fila del canal: los mismos botones, en una fila que envuelve. */
.cw-acciones-fila[b-x0o58iemop] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Formularios ─────────────────────────────────────────────────────────────────────────────── */

.cw-campos[b-x0o58iemop] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}

.cw-campos label[b-x0o58iemop],
.cw-campo label[b-x0o58iemop] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--texto-suave, #6b7280);
}

.cw-campos input:not([type="checkbox"])[b-x0o58iemop],
.cw-campos select[b-x0o58iemop],
.cw-campo input:not([type="checkbox"])[b-x0o58iemop],
.cw-campo select[b-x0o58iemop],
.cw-campo textarea[b-x0o58iemop] {
    padding: .4rem .5rem;
    border: 1px solid var(--borde, #d1d5db);
    border-radius: 5px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--texto, #111827);
    background: var(--fondo-input, #fff);
}

.cw-campo[b-x0o58iemop] { margin-bottom: .75rem; }

.cw-campo textarea[b-x0o58iemop] {
    min-height: 6.5rem;
    resize: vertical;
    width: 100%;
}

.cw-hint[b-x0o58iemop] {
    font-weight: 400;
    font-size: .75rem;
    color: var(--texto-suave, #9ca3af);
}

.cw-check[b-x0o58iemop] {
    flex-direction: row !important;
    align-items: center;
    gap: .4rem !important;
    color: var(--texto, #111827) !important;
    font-weight: 400 !important;
}

/* ── Conversaciones ──────────────────────────────────────────────────────────────────────────── */

.cw-conv[b-x0o58iemop] {
    border-top: 1px solid var(--borde-suave, #f3f4f6);
    padding: .6rem 0;
    font-size: .875rem;
}

.cw-conv:first-of-type[b-x0o58iemop] { border-top: 0; }

.cw-conv-meta[b-x0o58iemop] {
    color: var(--texto-suave, #6b7280);
    font-size: .78rem;
    margin-bottom: .3rem;
}

.cw-turno[b-x0o58iemop] {
    padding: .15rem 0 .15rem .6rem;
    border-left: 2px solid transparent;
}

.cw-turno-u[b-x0o58iemop] {
    color: #1e3a8a;
    border-left-color: #bfdbfe;
}

.cw-turno-a[b-x0o58iemop] {
    color: var(--texto, #374151);
    border-left-color: var(--borde, #e5e7eb);
}

@media (max-width: 700px) {
    .cw-campos[b-x0o58iemop] { grid-template-columns: 1fr; }
    .cw-acciones-fila[b-x0o58iemop] { justify-content: flex-start; }
}

/* Móvil: sin scroll horizontal de página (la tabla se desplaza dentro de su marco). */
@media (max-width: 600px) {
    .cw-title[b-x0o58iemop] { font-size: 1.25rem; }
    .cw-card[b-x0o58iemop] { padding: .8rem .75rem; }
    .cw-card-titulo[b-x0o58iemop] { flex-wrap: wrap; }
    .cw-acciones .cw-btn[b-x0o58iemop] { flex: 1 1 auto; }
}
/* _content/ErpPowergest/Presentation/Asistente/Pages/TelemetriaAsistentePage.razor.rz.scp.css */
/* Telemetría del asistente IA (EU6). Pantalla TÉCNICA: modelos, coste real y transcripciones.
   Sale del <style> embebido en el .razor al CSS scoped que usan las demás pantallas, con sus mismos
   valores —tarjeta blanca de 12 px sobre borde #e5e7eb, azul #2563eb, gris de apoyo #6b7280— para que
   una pantalla de servicio técnico no parezca de otra aplicación. Lo específico de aquí (el latido del
   refresco, la raya de «no se midió», las etiquetas de tramo) se conserva tal cual: son significado,
   no adorno. */

.tel-page[b-g2f2ue9369] { padding: 20px 24px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.tel-head[b-g2f2ue9369] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tel-title[b-g2f2ue9369] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.tel-sub[b-g2f2ue9369] { color: #6b7280; font-size: .84rem; margin-top: 2px; max-width: 760px; }
.tel-controls[b-g2f2ue9369] { display: flex; gap: 8px; align-items: center; }

.tel-select[b-g2f2ue9369] {
    padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px;
    font: inherit; font-size: .88rem; background: #fff; color: #374151;
}
.tel-select:focus[b-g2f2ue9369] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Tarjetas de cabecera: las siete cifras que se miran primero. La banda de color superior es la misma de
   las demás pantallas de totales del ERP: identifica cada cifra antes de leer su etiqueta, y agrupa por
   familia (los dos recuentos de tokens comparten color, el coste va aparte en ámbar). */
.tel-cards[b-g2f2ue9369] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tel-card[b-g2f2ue9369] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 14px 16px;
    border-top: 3px solid #cbd5e1;
}
.tel-card-turnos[b-g2f2ue9369] { border-top-color: #2563eb; }
.tel-card-coste[b-g2f2ue9369] { border-top-color: #d97706; }
.tel-card-entrada[b-g2f2ue9369] { border-top-color: #7c3aed; }
.tel-card-total[b-g2f2ue9369] { border-top-color: #7c3aed; }
.tel-card-cache[b-g2f2ue9369] { border-top-color: #059669; }
.tel-card-latencia[b-g2f2ue9369] { border-top-color: #0891b2; }
.tel-card-tools[b-g2f2ue9369] { border-top-color: #db2777; }
.tel-card-label[b-g2f2ue9369] { color: #9ca3af; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tel-card-value[b-g2f2ue9369] { font-size: 1.5rem; font-weight: 700; color: #111827; margin-top: 4px; }
.tel-card-hint[b-g2f2ue9369] { color: #9ca3af; font-size: .74rem; margin-top: 3px; }

/* Cada bloque es una tarjeta, como en Tenants/Operadores: sin marco, las siete secciones de esta
   pantalla se leían como una lista continua sin principio ni fin. */
.tel-section[b-g2f2ue9369] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 16px 18px;
}
.tel-section h2[b-g2f2ue9369] {
    font-size: .95rem; font-weight: 700; color: #111827;
    margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.tel-table[b-g2f2ue9369] { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tel-table th[b-g2f2ue9369], .tel-table td[b-g2f2ue9369] { text-align: right; padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.tel-table th:first-child[b-g2f2ue9369], .tel-table td:first-child[b-g2f2ue9369] { text-align: left; }
.tel-table thead th[b-g2f2ue9369] {
    color: #6b7280; font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e5e7eb;
}
.tel-table tbody tr:last-child td[b-g2f2ue9369] { border-bottom: none; }

/* Cuotas */
.tel-quota-row[b-g2f2ue9369] { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: .85rem; }
.tel-quota-label[b-g2f2ue9369] { min-width: 220px; color: #374151; font-weight: 500; }
.tel-bar[b-g2f2ue9369] { flex: 1; height: 10px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.tel-bar-fill[b-g2f2ue9369] { height: 100%; background: #2563eb; transition: width .2s; }
.tel-bar-fill.warn[b-g2f2ue9369] { background: #f59e0b; }
.tel-bar-fill.over[b-g2f2ue9369] { background: #dc2626; }
.tel-quota-num[b-g2f2ue9369] { min-width: 130px; text-align: right; color: #4b5563; font-variant-numeric: tabular-nums; }

.tel-badge[b-g2f2ue9369] { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tel-badge-on[b-g2f2ue9369] { background: #dcfce7; color: #166534; }
.tel-badge-off[b-g2f2ue9369] { background: #f3f4f6; color: #6b7280; }

/* Valoraciones */
.tel-fb[b-g2f2ue9369] { border: 1px solid #eef0f3; border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; background: #fff; }
.tel-fb:last-of-type[b-g2f2ue9369] { margin-bottom: 0; }
.tel-fb-head[b-g2f2ue9369] { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: #6b7280; }
.tel-fb-q[b-g2f2ue9369] { font-weight: 600; color: #111827; margin: 5px 0; }
.tel-fb-a[b-g2f2ue9369] { color: #4b5563; font-size: .85rem; white-space: pre-wrap; line-height: 1.5; }
.tel-fb-com[b-g2f2ue9369] { margin-top: 5px; font-size: .82rem; color: #b45309; }

.tel-empty[b-g2f2ue9369] { padding: 24px; text-align: center; color: #6b7280; font-size: .88rem; }
/* Un 0 % de caché con turnos registrados es un aviso, no un dato más: se pinta en ámbar. */
.tel-cero[b-g2f2ue9369] { color: #b45309; font-weight: 600; }
/* La casilla «solo negativas» filtra la lista que va debajo: el hueco la separa de sus resultados
   (antes era un <div> vacío de 0,6rem en el marcado). */
.tel-chk[b-g2f2ue9369] { font-size: .82rem; color: #374151; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 12px; }

/* EU6 — turnos recientes: la tabla es ancha (17 columnas) y se lee mientras se refresca sola. */
.tel-turnos-head[b-g2f2ue9369] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tel-turnos-head .tel-sub[b-g2f2ue9369] { margin: 0 2px 0 0; }
.tel-scroll[b-g2f2ue9369] { overflow-x: auto; }
.tel-table-turnos[b-g2f2ue9369] { min-width: 1240px; }
.tel-table-turnos tbody tr:hover[b-g2f2ue9369] { background: #f9fafb; }

/* La ventana puede traer cientos de turnos: la tabla se desplaza DENTRO de su caja en vez de empujar
   fuera de pantalla las secciones de debajo. La cabecera se queda pegada porque con 18 columnas, en
   cuanto se baja un poco, ya no se sabe qué columna se está mirando. */
.tel-scroll-alto[b-g2f2ue9369] { max-height: 60vh; overflow-y: auto; }
.tel-scroll-alto thead th[b-g2f2ue9369] {
    position: sticky; top: 0; z-index: 1;
    background: #fff; box-shadow: inset 0 -1px 0 #e5e7eb;
}

/* Columna de marcado: estrecha, centrada y sin el text-align derecha que llevan las demás celdas. */
.tel-col-chk[b-g2f2ue9369] { width: 34px; text-align: center !important; padding-right: 4px; }
.tel-marcada td[b-g2f2ue9369] { background: #eff6ff; }

/* Borrado del histórico. Va en su propia línea, separado de los filtros, con fondo tenue: es la única
   zona de esta pantalla que destruye datos y no puede parecer un control más de la tabla. */
.tel-borrado[b-g2f2ue9369] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 10px 12px;
    background: #fafafa; border: 1px solid #f3f4f6; border-radius: 10px;
}
.tel-borrado .tel-sub[b-g2f2ue9369] { margin: 0; }
.tel-borrado-sep[b-g2f2ue9369] { width: 1px; align-self: stretch; background: #e5e7eb; margin: 0 4px; }
.tel-btn-peligro[b-g2f2ue9369] { border-color: #fecaca; color: #b91c1c; }
.tel-btn-peligro:hover:not(:disabled)[b-g2f2ue9369] { background: #fef2f2; }

/* La confirmación aparece en la misma línea, en rojo: el borrado es físico y no hay deshacer. */
.tel-confirma[b-g2f2ue9369] {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .84rem; font-weight: 600; color: #b91c1c;
}
.tel-aviso-borrado[b-g2f2ue9369] { font-size: .84rem; color: #047857; font-weight: 600; }

.tel-btn[b-g2f2ue9369] {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.tel-btn:hover:not(:disabled)[b-g2f2ue9369] { background: #f3f4f6; }
.tel-btn:disabled[b-g2f2ue9369] { opacity: .55; cursor: default; }
.tel-btn-pausa[b-g2f2ue9369] { border-color: #fcd34d; color: #b45309; background: #fffbeb; }
.tel-btn-pausa:hover:not(:disabled)[b-g2f2ue9369] { background: #fef3c7; }

/* El punto que late solo mientras el refresco está VIVO: si está en pausa se apaga, para que nadie
   interprete una tabla quieta como «no hay turnos nuevos». */
.tel-live[b-g2f2ue9369] { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: #166534; }
.tel-live-dot[b-g2f2ue9369] { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; animation: tel-latido-b-g2f2ue9369 2s ease-in-out infinite; }
.tel-live.pausado[b-g2f2ue9369] { color: #b45309; }
.tel-live.pausado .tel-live-dot[b-g2f2ue9369] { background: #f59e0b; animation: none; }
@keyframes tel-latido-b-g2f2ue9369 { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* NULL ≠ valor. Un campo que nunca se midió se pinta como una raya gris tenue, JAMÁS como «no» ni como
   un cero: la diferencia entre «no escaló» y «no se le preguntó si escalar» es el dato que da sentido a
   esta pantalla, y si los dos casos se pintan igual la pantalla miente. */
.tel-nulo[b-g2f2ue9369] { color: #cbd5e1; font-style: italic; }
.tel-sintraza td[b-g2f2ue9369] { background: #fcfcfd; }

.tel-tag[b-g2f2ue9369] { font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.tel-tag-premium[b-g2f2ue9369] { background: #ede9fe; color: #5b21b6; }
.tel-tag-substrato[b-g2f2ue9369] { background: #e0f2fe; color: #075985; }
.tel-tag-criterio[b-g2f2ue9369] { background: #fef3c7; color: #92400e; }
.tel-tag-dato[b-g2f2ue9369] { background: #f1f5f9; color: #475569; }

.tel-nota[b-g2f2ue9369] { margin-top: 10px; }
.tel-nota code[b-g2f2ue9369] {
    background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em;
}

@media (max-width: 880px) {
    .tel-page[b-g2f2ue9369] { padding: 16px; }
    .tel-quota-label[b-g2f2ue9369] { min-width: 140px; }
}
/* _content/ErpPowergest/Presentation/Auth/Pages/ActivateAccount.razor.rz.scp.css */
.forgot-wrapper[b-74c4q248u7] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-74c4q248u7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-74c4q248u7] {
    height: 32px;
    width: auto;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.app-title[b-74c4q248u7] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.forgot-box[b-74c4q248u7] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .forgot-box[b-74c4q248u7] {
        max-width: 90%;
        padding: 25px;
        gap: 0.6rem;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-box[b-74c4q248u7] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-box[b-74c4q248u7] {
        max-width: 50%;
    }
}

.forgot-title[b-74c4q248u7] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.input-container[b-74c4q248u7] {
    width: 100%;
}

.btn-primary[b-74c4q248u7] {
    width: 100%;
    padding: 10px 0;
    margin-top: 5px;
    background: #0078ff;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

    .btn-primary:hover[b-74c4q248u7] {
        background: #0066dd;
    }

.btn-back[b-74c4q248u7] {
    width: 100%;
    padding: 10px 0;
    margin-top: 15px;
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

    .btn-back:hover[b-74c4q248u7] {
        background: #eee;
    }

.success-message[b-74c4q248u7] {
    color: #1f8f3a;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

.normal-message[b-74c4q248u7] {
    color: black;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Textos */
.text[b-74c4q248u7] {
    margin-top: 1.2rem;
}

.small[b-74c4q248u7] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-74c4q248u7],
.terms a[b-74c4q248u7] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-74c4q248u7] {
    margin-top: 0.5rem !important;
}

.subtitle[b-74c4q248u7] {
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}

/* Mensaje de error */
.error-message[b-74c4q248u7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.error-icon[b-74c4q248u7] {
    font-size: 1.3rem; /* tamano del icono */

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}
/* _content/ErpPowergest/Presentation/Auth/Pages/ForgotPassword.razor.rz.scp.css */
.forgot-wrapper[b-28a956p0ux] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-28a956p0ux] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-28a956p0ux] {
    height: 32px;
    width: auto;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.app-title[b-28a956p0ux] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.forgot-box[b-28a956p0ux] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Móviles (vertical) */
@media (max-width: 480px) {
    .forgot-box[b-28a956p0ux] {
        max-width: 90%;
        padding: 25px;
        gap: 0.6rem;
    }
}

/* Móviles grandes / Tablets pequeñas */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-box[b-28a956p0ux] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-box[b-28a956p0ux] {
        max-width: 50%;
    }
}


.forgot-title[b-28a956p0ux] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.input-container[b-28a956p0ux] {
    width: 100%;
}

.btn-primary[b-28a956p0ux] {
    width: 100%;
    padding: 10px 0;
    margin-top: 5px;
    background: #0078ff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

    .btn-primary:hover[b-28a956p0ux] {
        background: #0066dd;
    }

.btn-back[b-28a956p0ux] {
    width: 100%;
    padding: 10px 0;
    margin-top: 15px;
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

    .btn-back:hover[b-28a956p0ux] {
        background: #eee;
    }

.success-message[b-28a956p0ux] {
    color: #1f8f3a;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/*Textos*/
.text[b-28a956p0ux] {
    margin-top: 1.2rem;
}

.small[b-28a956p0ux] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-28a956p0ux],
.terms a[b-28a956p0ux] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-28a956p0ux] {
    margin-top: 0.5rem !important;
}

.subtitle[b-28a956p0ux] {
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}

/* Mensaje de error */
.error-message[b-28a956p0ux] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.error-icon[b-28a956p0ux] {
    font-size: 1.3rem; /* tamaño del ícono */

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}
/* _content/ErpPowergest/Presentation/Auth/Pages/InvalidInvitation.razor.rz.scp.css */
.forgot-wrapper[b-yufjhzz9mg] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-yufjhzz9mg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-yufjhzz9mg] {
    height: 32px;
    width: auto;
    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.app-title[b-yufjhzz9mg] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.forgot-box[b-yufjhzz9mg] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .forgot-box[b-yufjhzz9mg] {
        max-width: 90%;
        padding: 25px;
        gap: 0.6rem;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-box[b-yufjhzz9mg] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-box[b-yufjhzz9mg] {
        max-width: 50%;
    }
}

.forgot-title[b-yufjhzz9mg] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.input-container[b-yufjhzz9mg] {
    width: 100%;
}

.btn-primary[b-yufjhzz9mg] {
    width: 100%;
    padding: 10px 0;
    margin-top: 5px;
    background: #0078ff;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

    .btn-primary:hover[b-yufjhzz9mg] {
        background: #0066dd;
    }

.btn-back[b-yufjhzz9mg] {
    width: 100%;
    padding: 10px 0;
    margin-top: 15px;
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

    .btn-back:hover[b-yufjhzz9mg] {
        background: #eee;
    }

.message[b-yufjhzz9mg] {
    color: #e53935;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Textos */
.text[b-yufjhzz9mg] {
    margin-top: 1.2rem;
}

.small[b-yufjhzz9mg] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-yufjhzz9mg],
.terms a[b-yufjhzz9mg] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-yufjhzz9mg] {
    margin-top: 0.5rem !important;
}

.subtitle[b-yufjhzz9mg] {
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}
/* _content/ErpPowergest/Presentation/Auth/Pages/Login.razor.rz.scp.css */
/* Layout general */
.login-container[b-uex5dj9urr] {
    display: flex;
    height: 100%;
    width: 100%;
}


/* IZQUIERDA */
.left[b-uex5dj9urr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #ededed;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    max-height: 100%;
    box-sizing: border-box;

    /*Scrollbar*/
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);
    transition: scrollbar-color 0.3s;
}

    /* Scrollbar para Webkit (Chrome, Edge, Safari) */
    .left[b-uex5dj9urr]::-webkit-scrollbar {
        height: 4px;
        transition: all 0.3s;
    }

    .left[b-uex5dj9urr]::-webkit-scrollbar-track {
        background: transparent;
    }

    .left[b-uex5dj9urr]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
        border-radius: 2px;
    }

    /* Mostrar scrollbar solo en hover, con efecto más suave y sutil */
    .left:hover[b-uex5dj9urr]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.15);
    }

    .left:hover[b-uex5dj9urr] {
        scrollbar-color: rgba(0,0,0,0.15) rgba(0,0,0,0);
    }

.left-content[b-uex5dj9urr] {
    width: 100%;
    height:100%;
    align-content: center;
}

/* HEADER de marca */
.brand-bar[b-uex5dj9urr] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.brand-link[b-uex5dj9urr] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.brand-logo[b-uex5dj9urr] {
    height: 28px;
    width: auto;
    user-select: none;
}

.brand-text[b-uex5dj9urr] {
    font-size: 1rem;
    font-weight: 900;
    color: #333;
}

/* Contenido de left separado */
.title[b-uex5dj9urr] {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.subtitle[b-uex5dj9urr] {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 1rem;
    text-align: center;
}


/* Botón de Google */
.google-btn[b-uex5dj9urr] {
    width: 100%;
    padding: 0.9rem;
    border-radius: 10px;
    border: 1px solid #d0d0d0;
    background: #fff;
    /* Botón de Google oculto (no eliminado del markup). */
    display: none;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

    /* R2: con claves de Google configuradas, la pagina pinta el boton con esta clase. */
    .google-btn.google-on[b-uex5dj9urr],
    .separator.google-on[b-uex5dj9urr] {
        display: flex;
        text-decoration: none;
        color: #1f2937;
    }

    .google-btn:hover[b-uex5dj9urr] {
        background: #f5f5f5;
    }

.google-logo[b-uex5dj9urr] {
    width: 22px;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

/* Separador */
.separator[b-uex5dj9urr] {
    /* Separador "or" oculto (no eliminado del markup). */
    display: none;
    align-items: center;
    text-align: center;
    margin: 0.5rem 0;
    color: #aaa;
}

    .separator[b-uex5dj9urr]::before,
    .separator[b-uex5dj9urr]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e0e0e0;
    }

    .separator span[b-uex5dj9urr] {
        padding: 0 10px;
    }


/* INPUTS cuadrados */
.input[b-uex5dj9urr] {
    width: 100%;
    padding: 0.95rem;
    padding-right: 3rem; /* espacio para el botón */
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    font-size: 1rem;
    background: #fafafa;
    transition: 0.2s;
    margin-bottom: 1.1rem;
}

    .input:focus[b-uex5dj9urr] {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

/* Boton primario */
.btn-primary[b-uex5dj9urr] {
    width: 100%;
    padding: 0.95rem;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1.05rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

    .btn-primary:hover[b-uex5dj9urr] {
        background: #2563eb;
    }

/* Textos */
.text[b-uex5dj9urr] {
    margin-top: 1.2rem;
}

.resend-email[b-uex5dj9urr] {
    font-size: 0.8rem;
    color: #e53935;
}

.small[b-uex5dj9urr] {
    margin-top:0rem !important;
    font-size: 0.9rem;
}

.text a[b-uex5dj9urr],
.resend-email a[b-uex5dj9urr],
.terms a[b-uex5dj9urr] {
    color: #3b82f6;
    text-decoration: none;
}

.text a:hover[b-uex5dj9urr],
.resend-email a:hover[b-uex5dj9urr],
.terms a:hover[b-uex5dj9urr] {
    text-decoration: underline;
}

.terms[b-uex5dj9urr] {
    font-size: 0.7rem;
    color: #777;
    margin-top: 2rem;
    max-width: 330px;
    line-height: 1.4rem;
}

/* Mensaje de error */
.error-message[b-uex5dj9urr] {
    display: flex;
    align-items: center;
    text-align:justify;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.error-icon[b-uex5dj9urr] {
    font-size: 1.3rem; /* tamaño del ícono */

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

/*Mensaje de reenvio*/
.disabled-link[b-uex5dj9urr] {
    color: #ccc !important;
    cursor: default; 
    text-decoration: none !important;
}

/* DERECHA */
.right[b-uex5dj9urr] {
    flex: 3;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
}

.right-image[b-uex5dj9urr] {
    width: 100%;
    height: 100%;
    background-image: url('/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Overlay degradado negro más marcado */
.right-overlay[b-uex5dj9urr] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.0) 100%);
}

/* Contenedor de texto más abajo */
.right-text[b-uex5dj9urr] {
    position: absolute;
    bottom: 5%; 
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    padding: 0 1rem;
}

    .right-text h1[b-uex5dj9urr] {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .right-text p[b-uex5dj9urr] {
        font-size: 1.1rem;
        color: #ddd;
        margin-top: 0.5rem;
        height: 3rem;
        transition: opacity 1s ease-in-out;
        opacity: 1;
    }

    /* Línea encima del texto */
    .right-text .line[b-uex5dj9urr] {
        width: 10rem;
        height: 3px;
        background-color: white;
        margin: 0 auto 1rem auto;
        border-radius: 2px;
    }


/* RESPONSIVE */
@media (max-width: 900px) {
    .right[b-uex5dj9urr] {
        display: none;
    }

    .left[b-uex5dj9urr] {
        flex: 1;
        padding: 2rem;
    }
}

/* Responsive por altura */
@media (max-height: 800px) {
    .left[b-uex5dj9urr] {
        padding: 1rem 1.5rem;
    }

    .title[b-uex5dj9urr] {
        font-size: 1.7rem;
    }

    .subtitle[b-uex5dj9urr] {
        font-size: 0.9rem;
    }

    .google-btn[b-uex5dj9urr] {
        padding: 0.7rem;
        font-size: 0.9rem;
    }

    .input[b-uex5dj9urr] {
        padding: 0.7rem;
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }

    .btn-primary[b-uex5dj9urr] {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    .text[b-uex5dj9urr], .resend-email[b-uex5dj9urr], .small[b-uex5dj9urr], .terms[b-uex5dj9urr] {
        font-size: 0.8rem;
    }

    .brand-logo[b-uex5dj9urr] {
        height: 24px;
    }

    .brand-text[b-uex5dj9urr] {
        font-size: 0.9rem;
    }
}

/* Más agresivo para alturas aún más pequeñas */
@media (max-height: 600px) {
    .title[b-uex5dj9urr] {
        font-size: 1.5rem;
    }

    .subtitle[b-uex5dj9urr] {
        font-size: 0.8rem;
    }

    .google-btn[b-uex5dj9urr], .input[b-uex5dj9urr], .btn-primary[b-uex5dj9urr] {
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    .text[b-uex5dj9urr], .resend-email[b-uex5dj9urr], .small[b-uex5dj9urr], .terms[b-uex5dj9urr] {
        font-size: 0.75rem;
    }

    .brand-logo[b-uex5dj9urr] {
        height: 20px;
    }

    .brand-text[b-uex5dj9urr] {
        font-size: 0.8rem;
    }
}
/* _content/ErpPowergest/Presentation/Auth/Pages/ResetPassword.razor.rz.scp.css */
.forgot-wrapper[b-tucfnbz52z] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-tucfnbz52z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-tucfnbz52z] {
    height: 32px;
    width: auto;
    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.app-title[b-tucfnbz52z] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.forgot-box[b-tucfnbz52z] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .forgot-box[b-tucfnbz52z] {
        max-width: 90%;
        padding: 25px;
        gap: 0.6rem;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-box[b-tucfnbz52z] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-box[b-tucfnbz52z] {
        max-width: 50%;
    }
}

.forgot-title[b-tucfnbz52z] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.input-container[b-tucfnbz52z] {
    width: 100%;
}

.btn-primary[b-tucfnbz52z] {
    width: 100%;
    padding: 10px 0;
    margin-top: 5px;
    background: #0078ff;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

    .btn-primary:hover[b-tucfnbz52z] {
        background: #0066dd;
    }

.btn-back[b-tucfnbz52z] {
    width: 100%;
    padding: 10px 0;
    margin-top: 15px;
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

    .btn-back:hover[b-tucfnbz52z] {
        background: #eee;
    }

.success-message[b-tucfnbz52z] {
    color: #1f8f3a;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Textos */
.text[b-tucfnbz52z] {
    margin-top: 1.2rem;
}

.small[b-tucfnbz52z] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-tucfnbz52z],
.terms a[b-tucfnbz52z] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-tucfnbz52z] {
    margin-top: 0.5rem !important;
}

.subtitle[b-tucfnbz52z] {
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}

/* Mensaje de error */
.error-message[b-tucfnbz52z] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.error-icon[b-tucfnbz52z] {
    font-size: 1.3rem; /* tamano del icono */

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}
/* _content/ErpPowergest/Presentation/Auth/Pages/Signup.razor.rz.scp.css */
/* Layout general */
.login-container[b-5m172x43ha] {
    display: flex;
    height: 100%;
    width: 100%;
}


/* IZQUIERDA */
.left[b-5m172x43ha] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #ededed;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    max-height: 100%;
    box-sizing: border-box;
    /*Scrollbar*/
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);
    transition: scrollbar-color 0.3s;
}

    /* Scrollbar para Webkit (Chrome, Edge, Safari) */
    .left[b-5m172x43ha]::-webkit-scrollbar {
        height: 4px;
        transition: all 0.3s;
    }

    .left[b-5m172x43ha]::-webkit-scrollbar-track {
        background: transparent;
    }

    .left[b-5m172x43ha]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
        border-radius: 2px;
    }

    /* Mostrar scrollbar solo en hover, con efecto más suave y sutil */
    .left:hover[b-5m172x43ha]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.15);
    }

    .left:hover[b-5m172x43ha] {
        scrollbar-color: rgba(0,0,0,0.15) rgba(0,0,0,0);
    }

.left-content[b-5m172x43ha] {
    width: 100%;
    height: 100%;
    align-content: center;
}

/* HEADER de marca */
.brand-bar[b-5m172x43ha] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.brand-link[b-5m172x43ha] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.brand-logo[b-5m172x43ha] {
    height: 28px;
    width: auto;
    user-select: none;
}

.brand-text[b-5m172x43ha] {
    font-size: 1rem;
    font-weight: 900;
    color: #333;
}

/* Contenido de left separado */
.title[b-5m172x43ha] {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.subtitle[b-5m172x43ha] {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 1rem;
    text-align: center;
}


/* Botón de Google */
.google-btn[b-5m172x43ha] {
    width: 100%;
    padding: 0.9rem;
    border-radius: 10px;
    border: 1px solid #d0d0d0;
    background: #fff;
    /* Botón de Google oculto (no eliminado del markup). */
    display: none;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

    .google-btn:hover[b-5m172x43ha] {
        background: #f5f5f5;
    }

.google-logo[b-5m172x43ha] {
    width: 22px;
    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

/* Separador */
/* R2: con claves de Google configuradas, la pagina pinta el boton con esta clase. */
.google-btn.google-on[b-5m172x43ha],
.separator.google-on[b-5m172x43ha] {
    display: flex;
    text-decoration: none;
    color: #1f2937;
}

.separator[b-5m172x43ha] {
    /* Separador "or" oculto (no eliminado del markup). */
    display: none;
    align-items: center;
    text-align: center;
    margin: 0.5rem 0;
    color: #aaa;
}

    .separator[b-5m172x43ha]::before,
    .separator[b-5m172x43ha]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e0e0e0;
    }

    .separator span[b-5m172x43ha] {
        padding: 0 10px;
    }


/* INPUTS cuadrados */
.input[b-5m172x43ha] {
    width: 100%;
    padding: 0.95rem;
    padding-right: 3rem; /* espacio para el botón */
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    font-size: 1rem;
    background: #fafafa;
    transition: 0.2s;
    margin-bottom: 1.1rem;
}

    .input:focus[b-5m172x43ha] {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

/* Boton primario */
.btn-primary[b-5m172x43ha] {
    width: 100%;
    padding: 0.95rem;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1.05rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

    .btn-primary:hover[b-5m172x43ha] {
        background: #2563eb;
    }

/* Textos */
.text[b-5m172x43ha] {
    margin-top: 1.2rem;
}

.resend-email[b-5m172x43ha] {
    font-size: 0.8rem;
    color: #e53935;
}

.small[b-5m172x43ha] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-5m172x43ha],
.resend-email a[b-5m172x43ha],
.terms a[b-5m172x43ha] {
    color: #3b82f6;
    text-decoration: none;
}

    .text a:hover[b-5m172x43ha],
    .resend-email a:hover[b-5m172x43ha],
    .terms a:hover[b-5m172x43ha] {
        text-decoration: underline;
    }

.terms[b-5m172x43ha] {
    font-size: 0.7rem;
    color: #777;
    margin-top: 2rem;
    max-width: 330px;
    line-height: 1.4rem;
}

/* Mensaje de error */
.error-message[b-5m172x43ha] {
    display: flex;
    align-items: center;
    text-align: justify;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.error-icon[b-5m172x43ha] {
    font-size: 1.3rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/*Mensaje de reenvio*/
.disabled-link[b-5m172x43ha] {
    color: #ccc !important;
    cursor: default;
    text-decoration: none !important;
}

/* DERECHA */
.right[b-5m172x43ha] {
    flex: 3;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
}

.right-image[b-5m172x43ha] {
    width: 100%;
    height: 100%;
    background-image: url('/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Overlay degradado negro más marcado */
.right-overlay[b-5m172x43ha] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.0) 100%);
}

/* Contenedor de texto más abajo */
.right-text[b-5m172x43ha] {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    padding: 0 1rem;
}

    .right-text h1[b-5m172x43ha] {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .right-text p[b-5m172x43ha] {
        font-size: 1.1rem;
        color: #ddd;
        margin-top: 0.5rem;
        height: 3rem;
        transition: opacity 1s ease-in-out;
        opacity: 1;
    }

    /* Línea encima del texto */
    .right-text .line[b-5m172x43ha] {
        width: 10rem;
        height: 3px;
        background-color: white;
        margin: 0 auto 1rem auto;
        border-radius: 2px;
    }


/* RESPONSIVE */
@media (max-width: 900px) {
    .right[b-5m172x43ha] {
        display: none;
    }

    .left[b-5m172x43ha] {
        flex: 1;
        padding: 2rem;
    }
}

/* Responsive por altura */
@media (max-height: 800px) {
    .left[b-5m172x43ha] {
        padding: 1rem 1.5rem;
    }

    .title[b-5m172x43ha] {
        font-size: 1.7rem;
    }

    .subtitle[b-5m172x43ha] {
        font-size: 0.9rem;
    }

    .google-btn[b-5m172x43ha] {
        padding: 0.7rem;
        font-size: 0.9rem;
    }

    .input[b-5m172x43ha] {
        padding: 0.7rem;
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }

    .btn-primary[b-5m172x43ha] {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    .text[b-5m172x43ha], .resend-email[b-5m172x43ha], .small[b-5m172x43ha], .terms[b-5m172x43ha] {
        font-size: 0.8rem;
    }

    .brand-logo[b-5m172x43ha] {
        height: 24px;
    }

    .brand-text[b-5m172x43ha] {
        font-size: 0.9rem;
    }
}

/* Más agresivo para alturas aún más pequeñas */
@media (max-height: 600px) {
    .title[b-5m172x43ha] {
        font-size: 1.5rem;
    }

    .subtitle[b-5m172x43ha] {
        font-size: 0.8rem;
    }

    .google-btn[b-5m172x43ha], .input[b-5m172x43ha], .btn-primary[b-5m172x43ha] {
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    .text[b-5m172x43ha], .resend-email[b-5m172x43ha], .small[b-5m172x43ha], .terms[b-5m172x43ha] {
        font-size: 0.75rem;
    }

    .brand-logo[b-5m172x43ha] {
        height: 20px;
    }

    .brand-text[b-5m172x43ha] {
        font-size: 0.8rem;
    }
}
/* _content/ErpPowergest/Presentation/Auth/Pages/ValidationSended.razor.rz.scp.css */
.forgot-wrapper[b-0i812djtpm] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-0i812djtpm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-0i812djtpm] {
    height: 32px;
    width: auto;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.app-title[b-0i812djtpm] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.forgot-box[b-0i812djtpm] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .forgot-box[b-0i812djtpm] {
        max-width: 90%;
        padding: 25px;
        gap: 0.6rem;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-box[b-0i812djtpm] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-box[b-0i812djtpm] {
        max-width: 50%;
    }
}

.forgot-title[b-0i812djtpm] {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.input-container[b-0i812djtpm] {
    width: 100%;
}

.btn-primary[b-0i812djtpm] {
    width: 100%;
    padding: 10px 0;
    margin-top: 5px;
    background: #0078ff;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

    .btn-primary:hover[b-0i812djtpm] {
        background: #0066dd;
    }

.btn-back[b-0i812djtpm] {
    width: 100%;
    padding: 10px 0;
    margin-top: 15px;
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}

    .btn-back:hover[b-0i812djtpm] {
        background: #eee;
    }

.success-message[b-0i812djtpm] {
    color: #1f8f3a;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Textos */
.text[b-0i812djtpm] {
    margin-top: 1.2rem;
}

.small[b-0i812djtpm] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-0i812djtpm],
.terms a[b-0i812djtpm] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-0i812djtpm] {
    margin-top: 0.5rem !important;
}

.subtitle[b-0i812djtpm] {
    color: #555;
    font-size: 1.1rem;
    text-align: center;
}

/* Mensaje de error */
.error-message[b-0i812djtpm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #e53935;
    padding: 0rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.error-icon[b-0i812djtpm] {
    font-size: 1.3rem; /* tamano del icono */

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}
/* _content/ErpPowergest/Presentation/Ayuda/Pages/AyudaPage.razor.rz.scp.css */
/* AY3: la pantalla de ayuda, con el mismo aspecto que Actividad: sin marco propio (el borde lo pone .main-body),
   cabecera con título y subtítulo, las pestañas en un segmento gris con la activa en blanco, y el contenido con
   todo el alto que sobra. El contenido es el mismo componente que la ventana flotante (ContenidoAyuda): lo de
   aquí solo cambia su aspecto EN ESTA PÁGINA (::deep desde .ayuda-pagina-cuerpo); la ventana sigue igual. */
.ayuda-pagina[b-dcr923ek9s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 420px;
    box-sizing: border-box;
}

.ayuda-pagina-cab[b-dcr923ek9s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.ayuda-pagina-texto[b-dcr923ek9s] {
    flex: 1 1 auto;
    min-width: 0;
}

.ayuda-pagina-cab[b-dcr923ek9s]  .ayuda-pagina-acciones {
    flex: 0 0 auto;
    justify-content: flex-end;
    align-self: center;
}

.ayuda-pagina-titulo[b-dcr923ek9s] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.ayuda-pagina-lema[b-dcr923ek9s] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.ayuda-pagina-cuerpo[b-dcr923ek9s] {
    flex: 1;
    min-height: 0;
}

.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-contenido {
    background: transparent;
    gap: 12px;
}

/* Pestañas: el segmento de Actividad (.act-segment / .act-segment-btn). */
.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-menu {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 3px;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #f1f5f9;
    scrollbar-width: none;
}

.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-menu-btn {
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

    .ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-menu-btn:hover {
        background: transparent;
        color: #334155;
    }

    .ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-menu-btn.activa {
        background: #ffffff;
        color: #005ab7;
        font-weight: 850;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    }

.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-sugerida {
    margin: 0;
}

.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-acciones {
    padding: 0;
    border-bottom: 0;
}

.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-accion {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-weight: 600;
}

    .ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-accion:hover {
        background: #f6f8fa;
        border-color: #afb8c1;
        color: #111827;
    }

/* El documento, en una tarjeta blanca como las de la lista de Actividad. */
.ayuda-pagina-cuerpo[b-dcr923ek9s]  .ayuda-marco {
    border: 1px solid #e3eaf3;
    border-radius: 14px;
    background: #ffffff;
}

@media (max-width: 700px) {
    .ayuda-pagina-cab[b-dcr923ek9s] {
        flex-wrap: wrap;
    }
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/CalendarioEditorialWebPestana.razor.rz.scp.css */
/*
    Pestaña «Calendario» del posicionamiento web: la barra (web, vista, color, ir al día), los objetivos de marketing, las fechas
    propuestas, la pieza elegida, la rejilla del mes o la semana con la bandeja de las piezas sin fecha al lado, y los avisos.
    Hoja propia porque el CSS de Blazor tiene ámbito por componente; mismas medidas y colores que el plan editorial. Los colores de
    los clusters (ca-c0 … ca-c7) se repiten si hay más de ocho.
*/

.ca-pestana[b-yx1udbxrdt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ca-barra[b-yx1udbxrdt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ca-barra-texto[b-yx1udbxrdt] {
    flex: 1 1 320px;
    min-width: 0;
}

.ca-titulo[b-yx1udbxrdt] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.ca-subtitulo[b-yx1udbxrdt] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 90ch;
}

.ca-resultado[b-yx1udbxrdt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    font-size: 13px;
}

    .ca-resultado .material-symbols-rounded[b-yx1udbxrdt] {
        font-size: 18px;
    }

.ca-tarjeta[b-yx1udbxrdt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.ca-tarjeta-cabecera[b-yx1udbxrdt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ca-tarjeta-titulo[b-yx1udbxrdt] {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.ca-tarjeta-botones[b-yx1udbxrdt],
.ca-acciones[b-yx1udbxrdt],
.ca-navegar[b-yx1udbxrdt] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.ca-fila-campos[b-yx1udbxrdt] {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
}

    .ca-fila-campos > .ca-campo[b-yx1udbxrdt] {
        flex: 0 1 180px;
    }

        .ca-fila-campos > .ca-campo.ca-ancho[b-yx1udbxrdt] {
            flex: 1 1 280px;
        }

.ca-campo[b-yx1udbxrdt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .ca-campo > label[b-yx1udbxrdt] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.ca-input[b-yx1udbxrdt] {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .ca-input:focus[b-yx1udbxrdt] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .ca-input:disabled[b-yx1udbxrdt] {
        background: #f9fafb;
        color: #6b7280;
    }

.ca-boton[b-yx1udbxrdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .ca-boton .material-symbols-rounded[b-yx1udbxrdt] {
        font-size: 17px;
    }

    .ca-boton:disabled[b-yx1udbxrdt] {
        opacity: 0.55;
        cursor: default;
    }

    .ca-boton.primario[b-yx1udbxrdt] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .ca-boton.chico[b-yx1udbxrdt] {
        padding: 3px 7px;
    }

.ca-nota[b-yx1udbxrdt] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.ca-ayuda[b-yx1udbxrdt] {
    font-size: 11.5px;
    color: #6b7280;
}

.ca-enlace[b-yx1udbxrdt] {
    border: none;
    background: none;
    padding: 0;
    color: #0f766e;
    font-weight: 650;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.ca-insignia[b-yx1udbxrdt] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #374151;
}

    .ca-insignia.aviso[b-yx1udbxrdt] {
        background: #fef3c7;
        color: #92400e;
    }

/* ── Objetivos ── */

.ca-huecos[b-yx1udbxrdt],
.ca-avisos[b-yx1udbxrdt] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
}

    .ca-huecos li[b-yx1udbxrdt],
    .ca-avisos li[b-yx1udbxrdt] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ca-huecos li.hueco[b-yx1udbxrdt] {
        color: #92400e;
    }

    .ca-huecos li.cumplido[b-yx1udbxrdt] {
        color: #166534;
    }

    .ca-huecos .material-symbols-rounded[b-yx1udbxrdt] {
        font-size: 18px;
    }

.ca-hueco-texto[b-yx1udbxrdt] {
    flex: 1 1 240px;
    min-width: 0;
}

.ca-avisos li.saltado[b-yx1udbxrdt] {
    color: #9ca3af;
}

.ca-regla[b-yx1udbxrdt] {
    font-weight: 700;
    color: #92400e;
}

.ca-avisos li.saltado .ca-regla[b-yx1udbxrdt] {
    color: #9ca3af;
}

/* ── La pieza elegida y las propuestas ── */

.ca-elegida[b-yx1udbxrdt] {
    border-left: 4px solid #0f766e;
}

.ca-sugerida[b-yx1udbxrdt] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

.ca-tabla-caja[b-yx1udbxrdt] {
    overflow-x: auto;
    min-width: 0;
}

.ca-tabla[b-yx1udbxrdt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ca-tabla th[b-yx1udbxrdt] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .ca-tabla td[b-yx1udbxrdt] {
        padding: 6px 8px;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
    }

/* ── El calendario y la bandeja ── */

.ca-cuerpo[b-yx1udbxrdt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .ca-cuerpo[b-yx1udbxrdt] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ca-rejilla-caja[b-yx1udbxrdt] {
    overflow-x: auto;
    min-width: 0;
}

.ca-rejilla[b-yx1udbxrdt] {
    display: grid;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
}

.ca-cabecera-dia[b-yx1udbxrdt] {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: capitalize;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ca-dia[b-yx1udbxrdt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 92px;
    padding: 4px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    min-width: 0;
}

    .ca-dia.alto[b-yx1udbxrdt] {
        min-height: 260px;
    }

    .ca-dia.fuera[b-yx1udbxrdt] {
        background: #fafafa;
    }

        .ca-dia.fuera .ca-numero[b-yx1udbxrdt] {
            color: #c4c8cf;
        }

    .ca-dia.hoy .ca-numero[b-yx1udbxrdt] {
        background: #0f766e;
        color: #fff;
        border-radius: 999px;
        padding: 0 6px;
    }

.ca-numero[b-yx1udbxrdt] {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    color: #374151;
}

.ca-pieza[b-yx1udbxrdt],
.ca-pagina[b-yx1udbxrdt],
.ca-invitado[b-yx1udbxrdt] {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-family: inherit;
    text-align: left;
    line-height: 1.3;
    text-decoration: none;
}

.ca-pieza[b-yx1udbxrdt] {
    cursor: pointer;
    font-weight: 650;
}

    .ca-pieza[draggable="true"][b-yx1udbxrdt] {
        cursor: grab;
    }

    .ca-pieza.elegida[b-yx1udbxrdt] {
        outline: 2px solid #0f766e;
        outline-offset: 1px;
    }

    .ca-pieza:focus-visible[b-yx1udbxrdt] {
        outline: 2px solid #1d4ed8;
        outline-offset: 1px;
    }

.ca-pagina[b-yx1udbxrdt] {
    background: #f9fafb;
    border-style: dashed;
    border-color: #d1d5db;
    color: #4b5563;
}

.ca-invitado[b-yx1udbxrdt] {
    background: #f5f3ff;
    color: #5b21b6;
}

.ca-pagina .material-symbols-rounded[b-yx1udbxrdt],
.ca-invitado .material-symbols-rounded[b-yx1udbxrdt],
.ca-marca[b-yx1udbxrdt] {
    font-size: 14px;
    flex: 0 0 auto;
}

.ca-marca.aviso[b-yx1udbxrdt] {
    color: #b45309;
}

.ca-marca.choque[b-yx1udbxrdt] {
    color: #b91c1c;
}

.ca-texto[b-yx1udbxrdt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ca-bandeja[b-yx1udbxrdt] {
    min-height: 160px;
}

    .ca-bandeja .ca-pieza[b-yx1udbxrdt] {
        margin-bottom: 3px;
    }

.ca-leyenda[b-yx1udbxrdt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 11.5px;
    color: #4b5563;
}

.ca-leyenda-item[b-yx1udbxrdt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .ca-leyenda-item .material-symbols-rounded[b-yx1udbxrdt] {
        font-size: 15px;
    }

.ca-punto[b-yx1udbxrdt] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1px solid transparent;
}

/* Colores de los clusters. */
.ca-c0[b-yx1udbxrdt] { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
.ca-c1[b-yx1udbxrdt] { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }
.ca-c2[b-yx1udbxrdt] { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.ca-c3[b-yx1udbxrdt] { background: #fce7f3; color: #831843; border-color: #fbcfe8; }
.ca-c4[b-yx1udbxrdt] { background: #ede9fe; color: #4c1d95; border-color: #ddd6fe; }
.ca-c5[b-yx1udbxrdt] { background: #ccfbf1; color: #134e4a; border-color: #99f6e4; }
.ca-c6[b-yx1udbxrdt] { background: #ffedd5; color: #7c2d12; border-color: #fed7aa; }
.ca-c7[b-yx1udbxrdt] { background: #e0e7ff; color: #312e81; border-color: #c7d2fe; }
.ca-csin[b-yx1udbxrdt] { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }

/* Colores de los estados (los del plan editorial). */
.ca-idea[b-yx1udbxrdt] { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.ca-planificada[b-yx1udbxrdt] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ca-encurso[b-yx1udbxrdt] { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ca-publicada[b-yx1udbxrdt] { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ca-descartada[b-yx1udbxrdt] { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/ChoquesWebPestana.razor.rz.scp.css */
/*
    Pestaña «Choques» del posicionamiento web: recuentos por estado, filtros, la lista de choques y, al abrir uno,
    su ficha con las dos páginas lado a lado y las salidas. Hoja propia porque el CSS de Blazor tiene ámbito por
    componente; mismas medidas y colores que la pestaña del mapa.
*/

.cw-pestana[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.cw-barra[b-70j6aa2yg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cw-barra-texto[b-70j6aa2yg3] {
    flex: 1 1 auto;
    min-width: 0;
}

.cw-titulo[b-70j6aa2yg3] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.cw-subtitulo[b-70j6aa2yg3] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.cw-nota[b-70j6aa2yg3] {
    padding: 10px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 12.5px;
}

.cw-vacio[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
}

    .cw-vacio .material-symbols-rounded[b-70j6aa2yg3] {
        font-size: 34px;
        color: #9ca3af;
    }

.cw-vacio-titulo[b-70j6aa2yg3] {
    font-weight: 750;
    color: #374151;
}

.cw-vacio-texto[b-70j6aa2yg3] {
    font-size: 12.5px;
    max-width: 52ch;
}

/* ── Recuentos por estado ────────────────────────────────────────────────────────────────────── */

.cw-chips[b-70j6aa2yg3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cw-chip[b-70j6aa2yg3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 650;
    color: #374151;
    cursor: pointer;
}

    .cw-chip:hover:not(:disabled)[b-70j6aa2yg3] {
        border-color: #99f6e4;
    }

    .cw-chip.activo[b-70j6aa2yg3] {
        border-color: #0f766e;
        background: #f0fdfa;
        color: #0f766e;
    }

.cw-chip-n[b-70j6aa2yg3] {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

/* ── Filtros y botones ───────────────────────────────────────────────────────────────────────── */

.cw-filtros[b-70j6aa2yg3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cw-input[b-70j6aa2yg3] {
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    color: #1f2937;
}

    .cw-input:focus[b-70j6aa2yg3] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .cw-input:disabled[b-70j6aa2yg3] {
        background: #f9fafb;
        color: #6b7280;
    }

/* Contenedor anclado de un campo suelto en una fila (BloqueTeclado): una caja de verdad, que el teclado necesita,
   pero sin alterar la fila; el campo la llena. */
.cw-ancla[b-70j6aa2yg3] {
    display: flex;
    min-width: 0;
}

    .cw-ancla > .cw-input[b-70j6aa2yg3] {
        flex: 1 1 auto;
    }

.cw-buscar[b-70j6aa2yg3] {
    flex: 1 1 260px;
}

.cw-sitio[b-70j6aa2yg3] {
    max-width: 240px;
}

.cw-boton[b-70j6aa2yg3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .cw-boton .material-symbols-rounded[b-70j6aa2yg3] {
        font-size: 17px;
    }

    .cw-boton:disabled[b-70j6aa2yg3] {
        opacity: 0.55;
        cursor: default;
    }

.cw-boton-icono[b-70j6aa2yg3] {
    padding: 4px 6px;
}

/* ── Lista ───────────────────────────────────────────────────────────────────────────────────── */

.cw-reparto[b-70j6aa2yg3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

    .cw-reparto.con-ficha[b-70j6aa2yg3] {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
    }

@media (max-width: 1100px) {
    .cw-reparto.con-ficha[b-70j6aa2yg3] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cw-tabla-caja[b-70j6aa2yg3] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.cw-tabla[b-70j6aa2yg3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .cw-tabla th[b-70j6aa2yg3] {
        position: sticky;
        top: 0;
        padding: 8px 10px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        text-align: left;
        white-space: nowrap;
    }

    .cw-tabla td[b-70j6aa2yg3] {
        padding: 7px 10px;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        vertical-align: top;
    }

    .cw-tabla tbody tr[b-70j6aa2yg3] {
        cursor: pointer;
    }

        .cw-tabla tbody tr:hover[b-70j6aa2yg3] {
            background: #f8fafc;
        }

        .cw-tabla tbody tr.abierta[b-70j6aa2yg3] {
            background: #f0fdfa;
        }

.cw-num[b-70j6aa2yg3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cw-col-paginas[b-70j6aa2yg3] {
    max-width: 380px;
}

.cw-pagina[b-70j6aa2yg3] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

    .cw-pagina + .cw-pagina[b-70j6aa2yg3] {
        margin-top: 3px;
    }

.cw-pagina-titulo[b-70j6aa2yg3] {
    font-weight: 650;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.cw-tipo[b-70j6aa2yg3] {
    font-weight: 650;
    color: #374151;
    white-space: nowrap;
}

.cw-evidencia[b-70j6aa2yg3] {
    font-size: 11.5px;
    color: #6b7280;
    max-width: 380px;
}

.cw-ambito[b-70j6aa2yg3],
.cw-estado[b-70j6aa2yg3] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
}

    .cw-ambito.a-comercial[b-70j6aa2yg3], .cw-ambito.a-producto[b-70j6aa2yg3] { background: #e0f2fe; color: #075985; }
    .cw-ambito.a-pilar[b-70j6aa2yg3] { background: #ede9fe; color: #5b21b6; }
    .cw-ambito.a-blog[b-70j6aa2yg3] { background: #fef3c7; color: #92400e; }
    .cw-ambito.a-ayuda[b-70j6aa2yg3], .cw-ambito.a-glosario[b-70j6aa2yg3] { background: #dcfce7; color: #166534; }
    .cw-ambito.a-categoria[b-70j6aa2yg3] { background: #fee2e2; color: #991b1b; }

    .cw-estado.e-abierto[b-70j6aa2yg3] { background: #fef3c7; color: #92400e; }
    .cw-estado.e-resuelto[b-70j6aa2yg3] { background: #dcfce7; color: #166534; }
    .cw-estado.e-descartado[b-70j6aa2yg3] { background: #f3f4f6; color: #6b7280; }

.cw-con-tarea[b-70j6aa2yg3],
.cw-pilar[b-70j6aa2yg3] {
    font-size: 15px;
    vertical-align: -3px;
    margin-left: 2px;
    color: #0f766e;
}

.cw-pilar[b-70j6aa2yg3] {
    color: #7c3aed;
    margin: 0 2px 0 0;
}

.cw-falta[b-70j6aa2yg3] {
    color: #9ca3af;
    font-style: italic;
}

/* ── Ficha ───────────────────────────────────────────────────────────────────────────────────── */

.cw-ficha[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.cw-ficha-cabecera[b-70j6aa2yg3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cw-ficha-titulos[b-70j6aa2yg3] {
    flex: 1 1 auto;
    min-width: 0;
}

.cw-ficha-titulo[b-70j6aa2yg3] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.cw-ayuda[b-70j6aa2yg3] {
    font-size: 11.5px;
    color: #6b7280;
}

.cw-evidencia-ficha[b-70j6aa2yg3] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 12px;
    color: #92400e;
}

.cw-lados[b-70j6aa2yg3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .cw-lados[b-70j6aa2yg3] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cw-lado[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    background: #fafafa;
    min-width: 0;
}

.cw-lado-letra[b-70j6aa2yg3] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.cw-lado-titulo[b-70j6aa2yg3] {
    font-size: 13px;
    font-weight: 750;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.cw-lado-url[b-70j6aa2yg3] {
    font-size: 11.5px;
    color: #0f766e;
    overflow-wrap: anywhere;
}

.cw-datos[b-70j6aa2yg3] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 8px;
    margin: 4px 0 0;
    font-size: 11.5px;
}

    .cw-datos dt[b-70j6aa2yg3] {
        color: #6b7280;
        font-weight: 650;
    }

    .cw-datos dd[b-70j6aa2yg3] {
        margin: 0;
        color: #1f2937;
        overflow-wrap: anywhere;
    }

.cw-seccion[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.cw-seccion-titulo[b-70j6aa2yg3] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.cw-salidas[b-70j6aa2yg3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cw-salida[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

    .cw-salida:hover:not(:disabled)[b-70j6aa2yg3] {
        border-color: #0f766e;
        background: #f0fdfa;
    }

    .cw-salida:disabled[b-70j6aa2yg3] {
        opacity: 0.55;
        cursor: default;
    }

.cw-salida-nombre[b-70j6aa2yg3] {
    font-size: 12.5px;
    font-weight: 750;
    color: #0f766e;
}

.cw-salida-texto[b-70j6aa2yg3] {
    font-size: 11.5px;
    color: #6b7280;
}

.cw-acciones[b-70j6aa2yg3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Las piezas del plan editorial que chocan al proponerlas. */
.cw-piezas[b-70j6aa2yg3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.cw-choque-pieza[b-70j6aa2yg3] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .cw-choque-pieza.rojo[b-70j6aa2yg3] { background: #fee2e2; color: #991b1b; }
    .cw-choque-pieza.ambar[b-70j6aa2yg3] { background: #fef3c7; color: #92400e; }
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/ClustersWebPestana.razor.rz.scp.css */
/*
    Pestaña «Clusters» del posicionamiento web: la lista de clusters a la izquierda y la ficha del abierto (con
    sus páginas) a la derecha, debajo en pantallas estrechas. Hoja propia porque el CSS de Blazor tiene ámbito
    por componente; mismas medidas y colores que la pestaña de sitios.
*/

.cw-pestana[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.cw-barra[b-x82ydkf47e] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.cw-barra-texto[b-x82ydkf47e] {
    flex: 1 1 320px;
    min-width: 0;
}

.cw-titulo[b-x82ydkf47e] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.cw-subtitulo[b-x82ydkf47e] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 80ch;
}

.cw-reparto[b-x82ydkf47e] {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .cw-reparto[b-x82ydkf47e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cw-lista[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cw-fila[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

    .cw-fila:hover[b-x82ydkf47e] {
        border-color: #99f6e4;
    }

    .cw-fila.abierta[b-x82ydkf47e] {
        border-color: #0f766e;
        box-shadow: 0 0 0 2px #ccfbf1;
    }

.cw-fila-nombre[b-x82ydkf47e] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

.cw-fila-datos[b-x82ydkf47e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: #6b7280;
}

.cw-falta[b-x82ydkf47e] {
    color: #b45309;
    font-weight: 650;
}

.cw-insignia[b-x82ydkf47e] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

    .cw-insignia.producto[b-x82ydkf47e] {
        background: #e0f2fe;
        color: #075985;
    }

    .cw-insignia.tema[b-x82ydkf47e] {
        background: #ede9fe;
        color: #5b21b6;
    }

.cw-detalle[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.cw-tarjeta[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.cw-tarjeta-cabecera[b-x82ydkf47e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-tarjeta-titulo[b-x82ydkf47e] {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.cw-tarjeta-botones[b-x82ydkf47e] {
    display: flex;
    gap: 6px;
}

.cw-rejilla[b-x82ydkf47e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

.cw-campo[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .cw-campo > label[b-x82ydkf47e] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.cw-input[b-x82ydkf47e] {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .cw-input:focus[b-x82ydkf47e] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .cw-input:disabled[b-x82ydkf47e] {
        background: #f9fafb;
        color: #6b7280;
    }

.cw-sitio[b-x82ydkf47e] {
    width: auto;
    max-width: 240px;
}

/* Contenedor anclado de un campo suelto en una fila (BloqueTeclado): una caja de verdad, que el teclado necesita,
   pero sin alterar la fila. */
.cw-ancla[b-x82ydkf47e] {
    display: flex;
    min-width: 0;
}

.cw-acciones[b-x82ydkf47e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-boton[b-x82ydkf47e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

    .cw-boton .material-symbols-rounded[b-x82ydkf47e] {
        font-size: 17px;
    }

    .cw-boton:disabled[b-x82ydkf47e] {
        opacity: 0.55;
        cursor: default;
    }

    .cw-boton.primario[b-x82ydkf47e] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .cw-boton.peligro[b-x82ydkf47e] {
        color: #b91c1c;
        border-color: #fecaca;
    }

.cw-nota[b-x82ydkf47e] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.cw-ayuda[b-x82ydkf47e] {
    font-size: 11.5px;
    color: #6b7280;
}

.cw-paginas[b-x82ydkf47e] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

    .cw-paginas li[b-x82ydkf47e] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 0;
        border-bottom: 1px solid #f3f4f6;
        min-width: 0;
    }

.cw-pagina-titulo[b-x82ydkf47e] {
    flex: 1 1 auto;
    min-width: 0;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-pagina-dato[b-x82ydkf47e] {
    color: #6b7280;
    font-size: 11.5px;
    white-space: nowrap;
}

.cw-pilar[b-x82ydkf47e] {
    font-size: 16px;
    color: #7c3aed;
}

/* ── Clusters propuestos (SEO5) ── */

.cw-resultado[b-x82ydkf47e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    color: #134e4a;
    font-size: 12.5px;
}

    .cw-resultado .material-symbols-rounded[b-x82ydkf47e] {
        font-size: 18px;
    }

    .cw-resultado.cw-impacto[b-x82ydkf47e] {
        background: #f5f3ff;
        border-color: #ede9fe;
        color: #4c1d95;
    }

.cw-casilla[b-x82ydkf47e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #374151;
}

.cw-plan[b-x82ydkf47e] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 12.5px;
    color: #374151;
}

.cw-propuesta[b-x82ydkf47e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    min-width: 0;
}

.cw-propuesta-cabecera[b-x82ydkf47e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}

.cw-propuesta-nombre[b-x82ydkf47e] {
    flex: 1 1 260px;
}

    .cw-insignia.ia[b-x82ydkf47e] {
        background: #fef3c7;
        color: #92400e;
    }

    .cw-insignia.bloqueado[b-x82ydkf47e] {
        background: #fee2e2;
        color: #991b1b;
    }

.cw-chico[b-x82ydkf47e] {
    width: auto;
    max-width: 180px;
    padding: 3px 6px;
    font-size: 12px;
}

.cw-destino[b-x82ydkf47e] {
    width: auto;
    max-width: 280px;
}

.cw-marca[b-x82ydkf47e] {
    flex: 0 0 auto;
}

.cw-boton.chico[b-x82ydkf47e] {
    padding: 3px 6px;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/DirectricesWebPestana.razor.rz.scp.css */
/*
    Pestaña «Directrices» del posicionamiento web: el formulario de una directriz, la lista con su vigencia y los pesos y
    umbrales del SEO. Hoja propia porque el CSS de Blazor tiene ámbito por componente; mismas medidas y colores que la
    pestaña de clusters.
*/

.dw-pestana[b-hk83caxhlt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dw-barra[b-hk83caxhlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.dw-barra-texto[b-hk83caxhlt] {
    flex: 1 1 320px;
    min-width: 0;
}

.dw-titulo[b-hk83caxhlt] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.dw-subtitulo[b-hk83caxhlt] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 90ch;
}

.dw-impacto[b-hk83caxhlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 13px;
}

    .dw-impacto .material-symbols-rounded[b-hk83caxhlt] {
        font-size: 18px;
    }

.dw-tarjeta[b-hk83caxhlt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.dw-tarjeta-cabecera[b-hk83caxhlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dw-tarjeta-titulo[b-hk83caxhlt] {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.dw-rejilla[b-hk83caxhlt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
}

.dw-campo[b-hk83caxhlt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .dw-campo > label[b-hk83caxhlt] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

    .dw-campo.cambiado > label[b-hk83caxhlt] {
        color: #0f766e;
    }

/* Un campo de texto largo (las formas de una búsqueda de definición del glosario). */
.dw-ancho[b-hk83caxhlt] {
    max-width: 720px;
    margin-top: 6px;
}

.dw-input[b-hk83caxhlt] {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .dw-input:focus[b-hk83caxhlt] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .dw-input:disabled[b-hk83caxhlt] {
        background: #f9fafb;
        color: #6b7280;
    }

.dw-acciones[b-hk83caxhlt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dw-boton[b-hk83caxhlt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

    .dw-boton .material-symbols-rounded[b-hk83caxhlt] {
        font-size: 17px;
    }

    .dw-boton:disabled[b-hk83caxhlt] {
        opacity: 0.55;
        cursor: default;
    }

    .dw-boton.primario[b-hk83caxhlt] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .dw-boton.peligro[b-hk83caxhlt] {
        color: #b91c1c;
        border-color: #fecaca;
    }

    .dw-boton.chico[b-hk83caxhlt] {
        padding: 3px 7px;
    }

.dw-nota[b-hk83caxhlt] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.dw-ayuda[b-hk83caxhlt] {
    font-size: 11.5px;
    color: #6b7280;
}

.dw-sub[b-hk83caxhlt] {
    font-size: 11.5px;
    color: #6b7280;
}

.dw-tabla-caja[b-hk83caxhlt] {
    overflow-x: auto;
    min-width: 0;
}

.dw-tabla[b-hk83caxhlt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .dw-tabla th[b-hk83caxhlt] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .dw-tabla td[b-hk83caxhlt] {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        vertical-align: top;
    }

    .dw-tabla tr.dw-apagada td[b-hk83caxhlt] {
        color: #9ca3af;
    }

.dw-botones[b-hk83caxhlt] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.dw-insignia[b-hk83caxhlt] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .dw-insignia.vigor[b-hk83caxhlt] {
        background: #dcfce7;
        color: #166534;
    }

    .dw-insignia.programada[b-hk83caxhlt] {
        background: #e0f2fe;
        color: #075985;
    }

    .dw-insignia.apagada[b-hk83caxhlt] {
        background: #f3f4f6;
        color: #6b7280;
    }

.dw-grupo[b-hk83caxhlt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.dw-grupo-titulo[b-hk83caxhlt] {
    font-size: 13px;
    font-weight: 750;
    color: #1f2937;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/InvitadosWebPestana.razor.rz.scp.css */
/*
    Pestaña «Invitados» del posicionamiento web: el alta rápida, los filtros, la ficha de un artículo invitado (con su choque, su
    aviso y su enlace) y la lista. Hoja propia porque el CSS de Blazor tiene ámbito por componente; mismas medidas y colores que el
    plan editorial. El campo del autor lo pinta CampoCodigo (un componente hijo): sus clases van con ::deep.
*/

.iv-pestana[b-q93sczlas5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.iv-barra[b-q93sczlas5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.iv-barra-texto[b-q93sczlas5] {
    flex: 1 1 320px;
    min-width: 0;
}

.iv-titulo[b-q93sczlas5] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.iv-subtitulo[b-q93sczlas5] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 90ch;
}

.iv-resultado[b-q93sczlas5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    font-size: 13px;
}

    .iv-resultado.iv-alerta[b-q93sczlas5] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #991b1b;
    }

    .iv-resultado .material-symbols-rounded[b-q93sczlas5] {
        font-size: 18px;
    }

.iv-tarjeta[b-q93sczlas5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.iv-tarjeta-cabecera[b-q93sczlas5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.iv-tarjeta-titulo[b-q93sczlas5] {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.iv-tarjeta-botones[b-q93sczlas5] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.iv-fila-campos[b-q93sczlas5] {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
}

    .iv-fila-campos > .iv-campo[b-q93sczlas5] {
        flex: 0 1 200px;
    }

        .iv-fila-campos > .iv-campo.iv-ancho[b-q93sczlas5] {
            flex: 1 1 280px;
        }

.iv-rejilla[b-q93sczlas5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
}

    .iv-rejilla > .iv-ancho[b-q93sczlas5] {
        grid-column: span 2;
    }

.iv-campo[b-q93sczlas5],
.iv-pestana[b-q93sczlas5]  .iv-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .iv-campo > label[b-q93sczlas5],
    .iv-pestana[b-q93sczlas5]  .iv-campo > label {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.iv-input[b-q93sczlas5],
.iv-pestana[b-q93sczlas5]  .iv-input {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .iv-input:focus[b-q93sczlas5],
    .iv-pestana[b-q93sczlas5]  .iv-input:focus {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .iv-input:disabled[b-q93sczlas5],
    .iv-pestana[b-q93sczlas5]  .iv-input:disabled {
        background: #f9fafb;
        color: #6b7280;
    }

.iv-acciones[b-q93sczlas5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iv-boton[b-q93sczlas5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .iv-boton .material-symbols-rounded[b-q93sczlas5] {
        font-size: 17px;
    }

    .iv-boton:disabled[b-q93sczlas5] {
        opacity: 0.55;
        cursor: default;
    }

    .iv-boton.primario[b-q93sczlas5] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .iv-boton.peligro[b-q93sczlas5] {
        color: #b91c1c;
        border-color: #fecaca;
    }

    .iv-boton.chico[b-q93sczlas5] {
        padding: 3px 7px;
    }

.iv-nota[b-q93sczlas5] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.iv-ayuda[b-q93sczlas5],
.iv-sub[b-q93sczlas5] {
    font-size: 11.5px;
    color: #6b7280;
}

.iv-caja[b-q93sczlas5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    background: #fafafa;
    font-size: 12.5px;
}

    .iv-caja.verde[b-q93sczlas5] {
        border-left-color: #16a34a;
    }

    .iv-caja.ambar[b-q93sczlas5] {
        border-left-color: #d97706;
    }

    .iv-caja.rojo[b-q93sczlas5] {
        border-left-color: #dc2626;
    }

    .iv-caja.gris[b-q93sczlas5] {
        border-left-color: #9ca3af;
    }

.iv-caja-cabecera[b-q93sczlas5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.iv-candidatas[b-q93sczlas5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}

.iv-candidata[b-q93sczlas5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 12.5px;
    color: #1f2937;
    text-align: left;
    cursor: pointer;
}

    .iv-candidata:hover[b-q93sczlas5],
    .iv-candidata:focus[b-q93sczlas5] {
        background: #f0fdfa;
        outline: none;
    }

.iv-tabla-caja[b-q93sczlas5] {
    overflow-x: auto;
    min-width: 0;
}

.iv-tabla[b-q93sczlas5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .iv-tabla th[b-q93sczlas5] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .iv-tabla td[b-q93sczlas5] {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        vertical-align: top;
    }

    .iv-tabla tr.iv-apagada td[b-q93sczlas5] {
        color: #9ca3af;
    }

    .iv-tabla tr.iv-abierta td[b-q93sczlas5] {
        background: #f0fdfa;
    }

.iv-enlace[b-q93sczlas5] {
    border: none;
    background: none;
    padding: 0;
    color: #0f766e;
    font-weight: 650;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

    .iv-enlace:disabled[b-q93sczlas5] {
        cursor: default;
    }

.iv-botones[b-q93sczlas5] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.iv-insignia[b-q93sczlas5] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #6b7280;
}

    .iv-insignia.propuesta[b-q93sczlas5] {
        background: #f3f4f6;
        color: #374151;
    }

    .iv-insignia.aceptada[b-q93sczlas5] {
        background: #e0f2fe;
        color: #075985;
    }

    .iv-insignia.publicada[b-q93sczlas5],
    .iv-insignia.verde[b-q93sczlas5] {
        background: #dcfce7;
        color: #166534;
    }

    .iv-insignia.ambar[b-q93sczlas5] {
        background: #fef3c7;
        color: #92400e;
    }

    .iv-insignia.rojo[b-q93sczlas5] {
        background: #fee2e2;
        color: #991b1b;
    }

    .iv-insignia.apagada[b-q93sczlas5],
    .iv-insignia.gris[b-q93sczlas5] {
        background: #f3f4f6;
        color: #6b7280;
    }
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/MantenimientoWebPestana.razor.rz.scp.css */
/*
    Pestaña «Mantenimiento» del posicionamiento web: la barra (web y filtro), lo que hizo la última orden con el enlace a lo creado
    y la tabla de propuestas con su motivo, su evidencia y aceptar o descartar. Hoja propia porque el CSS de Blazor tiene ámbito
    por componente; mismas medidas y colores que las pestañas de palabras clave y directrices. Los desplegables toman su aspecto
    de css/desplegables.css: aquí solo su alto y su ancho.
*/

.mt-pestana[b-wantjsp073] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.mt-barra-texto[b-wantjsp073] {
    min-width: 0;
}

.mt-titulo[b-wantjsp073] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.mt-subtitulo[b-wantjsp073],
.mt-pie[b-wantjsp073] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 110ch;
}

.mt-barra[b-wantjsp073] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.mt-campo[b-wantjsp073] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .mt-campo > label[b-wantjsp073],
    .mt-rotulo[b-wantjsp073] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.mt-input[b-wantjsp073] {
    width: auto;
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

.mt-nota[b-wantjsp073] {
    font-size: 13px;
    color: #6b7280;
    padding: 6px 0;
}

.mt-resultado[b-wantjsp073],
.mt-medicion[b-wantjsp073] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

    .mt-resultado .material-symbols-rounded[b-wantjsp073],
    .mt-medicion .material-symbols-rounded[b-wantjsp073] {
        font-size: 18px;
        flex: none;
    }

.mt-resultado[b-wantjsp073] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
}

.mt-medicion[b-wantjsp073] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.mt-enlace[b-wantjsp073] {
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: underline;
}

.mt-tabla-caja[b-wantjsp073] {
    overflow-x: auto;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.mt-tabla[b-wantjsp073] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .mt-tabla th[b-wantjsp073] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .mt-tabla td[b-wantjsp073] {
        padding: 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

.mt-sobre[b-wantjsp073] {
    font-weight: 650;
    color: #111827;
    min-width: 160px;
    max-width: 32ch;
}

    .mt-sobre a[b-wantjsp073] {
        color: #1d4ed8;
    }

.mt-sub[b-wantjsp073] {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7280;
    word-break: break-all;
}

.mt-motivo[b-wantjsp073] {
    color: #374151;
    min-width: 280px;
    max-width: 70ch;
}

.mt-evidencia[b-wantjsp073] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: #4b5563;
}

.mt-insignia[b-wantjsp073] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
    background: #eef2ff;
    color: #3730a3;
}

    .mt-insignia.apaga[b-wantjsp073] {
        background: #fff7ed;
        color: #9a3412;
    }

    .mt-insignia.mejora[b-wantjsp073] {
        background: #f0fdf4;
        color: #166534;
    }

    .mt-insignia.noventa[b-wantjsp073] {
        background: #fef2f2;
        color: #991b1b;
    }

    /* El enlazado interno (SEO12): al pilar, entre hermanas y a las huérfanas. */
    .mt-insignia.enlace[b-wantjsp073] {
        background: #eff6ff;
        color: #1e40af;
    }

.mt-nueva[b-wantjsp073] {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #fef9c3;
    color: #854d0e;
    font-size: 11px;
    font-weight: 700;
}

.mt-acciones[b-wantjsp073] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 220px;
}

.mt-detalle[b-wantjsp073] {
    font-size: 11.5px;
    color: #6b7280;
    max-width: 48ch;
}

.mt-boton[b-wantjsp073] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

    .mt-boton:hover:not(:disabled)[b-wantjsp073] {
        background: #f9fafb;
    }

    .mt-boton:disabled[b-wantjsp073] {
        opacity: 0.55;
        cursor: default;
    }

    .mt-boton.primario[b-wantjsp073] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

        .mt-boton.primario:hover:not(:disabled)[b-wantjsp073] {
            background: #115e59;
        }

    .mt-boton .material-symbols-rounded[b-wantjsp073] {
        font-size: 16px;
    }

.mt-descartar[b-wantjsp073] {
    margin-top: 2px;
    color: #6b7280;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/MapaWebPestana.razor.rz.scp.css */
/*
    Pestaña «Mapa» del posicionamiento web: los recuentos por ámbito, los filtros, la rejilla de páginas y, al
    abrir una, su ficha a la derecha (debajo en pantallas estrechas). Hoja propia porque el CSS de Blazor tiene
    ámbito por componente; mismas medidas y colores que la pestaña de sitios.
*/

.mw-pestana[b-lijw53c8w0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.mw-barra[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mw-barra-texto[b-lijw53c8w0] {
    flex: 1 1 auto;
    min-width: 0;
}

.mw-titulo[b-lijw53c8w0] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.mw-subtitulo[b-lijw53c8w0] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.mw-nota[b-lijw53c8w0] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.mw-vacio[b-lijw53c8w0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
}

    .mw-vacio .material-symbols-rounded[b-lijw53c8w0] {
        font-size: 34px;
        color: #9ca3af;
    }

.mw-vacio-titulo[b-lijw53c8w0] {
    font-weight: 750;
    color: #374151;
}

.mw-vacio-texto[b-lijw53c8w0] {
    font-size: 12.5px;
    max-width: 52ch;
}

/* ── Recuentos por ámbito ────────────────────────────────────────────────────────────────────── */

.mw-chips[b-lijw53c8w0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mw-chip[b-lijw53c8w0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 650;
    color: #374151;
    cursor: pointer;
}

    .mw-chip:hover:not(:disabled)[b-lijw53c8w0] {
        border-color: #99f6e4;
    }

    .mw-chip.activo[b-lijw53c8w0] {
        border-color: #0f766e;
        background: #f0fdfa;
        color: #0f766e;
    }

.mw-chip-n[b-lijw53c8w0] {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

/* ── Filtros ─────────────────────────────────────────────────────────────────────────────────── */

.mw-filtros[b-lijw53c8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mw-input[b-lijw53c8w0] {
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    color: #1f2937;
}

    .mw-input:focus[b-lijw53c8w0] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .mw-input:disabled[b-lijw53c8w0] {
        background: #f9fafb;
        color: #6b7280;
    }

/* Contenedor anclado de un campo suelto en una fila (BloqueTeclado): una caja de verdad, que el teclado necesita,
   pero sin alterar la fila; el campo la llena. */
.mw-ancla[b-lijw53c8w0] {
    display: flex;
    min-width: 0;
}

    .mw-ancla > .mw-input[b-lijw53c8w0] {
        flex: 1 1 auto;
    }

.mw-buscar[b-lijw53c8w0] {
    flex: 1 1 260px;
}

.mw-sitio[b-lijw53c8w0] {
    max-width: 240px;
}

.mw-check[b-lijw53c8w0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.mw-boton[b-lijw53c8w0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

    .mw-boton .material-symbols-rounded[b-lijw53c8w0] {
        font-size: 17px;
    }

    .mw-boton:disabled[b-lijw53c8w0] {
        opacity: 0.55;
        cursor: default;
    }

.mw-boton-icono[b-lijw53c8w0] {
    padding: 4px 6px;
}

/* ── Rejilla ─────────────────────────────────────────────────────────────────────────────────── */

.mw-reparto[b-lijw53c8w0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

    .mw-reparto.con-ficha[b-lijw53c8w0] {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    }

@media (max-width: 1000px) {
    .mw-reparto.con-ficha[b-lijw53c8w0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mw-tabla-caja[b-lijw53c8w0] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.mw-tabla[b-lijw53c8w0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .mw-tabla th[b-lijw53c8w0] {
        position: sticky;
        top: 0;
        padding: 8px 10px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        text-align: left;
        white-space: nowrap;
    }

    .mw-tabla td[b-lijw53c8w0] {
        padding: 7px 10px;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        vertical-align: top;
    }

    .mw-tabla tbody tr[b-lijw53c8w0] {
        cursor: pointer;
    }

        .mw-tabla tbody tr:hover[b-lijw53c8w0] {
            background: #f8fafc;
        }

        .mw-tabla tbody tr.abierta[b-lijw53c8w0] {
            background: #f0fdfa;
        }

.mw-col-pagina[b-lijw53c8w0] {
    max-width: 360px;
}

.mw-pagina-titulo[b-lijw53c8w0] {
    font-weight: 650;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mw-pagina-ruta[b-lijw53c8w0] {
    font-size: 11.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

.mw-falta[b-lijw53c8w0] {
    color: #9ca3af;
    font-style: italic;
}

.mw-ambito[b-lijw53c8w0],
.mw-estado[b-lijw53c8w0] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
}

    .mw-ambito.a-comercial[b-lijw53c8w0], .mw-ambito.a-producto[b-lijw53c8w0] { background: #e0f2fe; color: #075985; }
    .mw-ambito.a-pilar[b-lijw53c8w0] { background: #ede9fe; color: #5b21b6; }
    .mw-ambito.a-blog[b-lijw53c8w0] { background: #fef3c7; color: #92400e; }
    .mw-ambito.a-ayuda[b-lijw53c8w0], .mw-ambito.a-glosario[b-lijw53c8w0] { background: #dcfce7; color: #166534; }
    .mw-ambito.a-categoria[b-lijw53c8w0] { background: #fee2e2; color: #991b1b; }

    .mw-estado.e-publicada[b-lijw53c8w0] { background: #dcfce7; color: #166534; }
    .mw-estado.e-retirada[b-lijw53c8w0] { background: #fee2e2; color: #991b1b; }

.mw-candado[b-lijw53c8w0],
.mw-pilar[b-lijw53c8w0],
.mw-atrasada[b-lijw53c8w0] {
    font-size: 15px;
    vertical-align: -3px;
    margin-left: 2px;
    color: #9ca3af;
}

.mw-pilar[b-lijw53c8w0] {
    color: #7c3aed;
    margin: 0 2px 0 0;
}

/* El semáforo de la última revisión de la página, junto a su estado. */
.mw-semaforo[b-lijw53c8w0] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: -1px;
    background: #9ca3af;
}

    .mw-semaforo.s-verde[b-lijw53c8w0] { background: #16a34a; }
    .mw-semaforo.s-ambar[b-lijw53c8w0] { background: #f59e0b; }
    .mw-semaforo.s-rojo[b-lijw53c8w0] { background: #dc2626; }

.mw-paginador[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* ── Ficha ───────────────────────────────────────────────────────────────────────────────────── */

.mw-ficha[b-lijw53c8w0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.mw-ficha-cabecera[b-lijw53c8w0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mw-ficha-titulos[b-lijw53c8w0] {
    flex: 1 1 auto;
    min-width: 0;
}

.mw-ficha-titulo[b-lijw53c8w0] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mw-ficha-url[b-lijw53c8w0] {
    font-size: 12px;
    color: #0f766e;
    overflow-wrap: anywhere;
}

.mw-seccion[b-lijw53c8w0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.mw-seccion-titulo[b-lijw53c8w0] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.mw-campo[b-lijw53c8w0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .mw-campo > label[b-lijw53c8w0] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.mw-fila-campo[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .mw-fila-campo > select[b-lijw53c8w0] {
        flex: 1 1 160px;
    }

.mw-notas[b-lijw53c8w0] {
    resize: vertical;
    font-family: inherit;
}

.mw-ayuda[b-lijw53c8w0] {
    font-size: 11.5px;
    color: #6b7280;
}

.mw-aviso[b-lijw53c8w0] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 12px;
    color: #92400e;
}

    .mw-aviso .material-symbols-rounded[b-lijw53c8w0] {
        font-size: 16px;
    }

.mw-enlace[b-lijw53c8w0] {
    border: 0;
    background: none;
    padding: 0 2px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
}

.mw-datos[b-lijw53c8w0] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 10px;
    margin: 0;
    font-size: 12px;
}

    .mw-datos dt[b-lijw53c8w0] {
        color: #6b7280;
        font-weight: 650;
    }

    .mw-datos dd[b-lijw53c8w0] {
        margin: 0;
        color: #1f2937;
        overflow-wrap: anywhere;
    }

.mw-partir[b-lijw53c8w0] {
    word-break: break-all;
}

/* ── Rendimiento en Google: las búsquedas que traen a la página ─────────────────────────────────────────── */

.mw-busquedas[b-lijw53c8w0] {
    margin: 4px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}

.mw-busqueda-texto[b-lijw53c8w0] {
    font-weight: 600;
    color: #1f2937;
    margin-right: 6px;
}

/* ── Propuestas del asistente: pedir, revisar en la rejilla y decidir en bloque ────────────────────────── */

.mw-propuestas[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #eef2ff;
}

.mw-propuestas-icono[b-lijw53c8w0] {
    font-size: 22px;
    color: #4f46e5;
}

.mw-propuestas-texto[b-lijw53c8w0] {
    flex: 1 1 280px;
    min-width: 0;
}

.mw-propuestas-titulo[b-lijw53c8w0] {
    font-size: 13px;
    font-weight: 750;
    color: #312e81;
}

.mw-propuestas-ultima[b-lijw53c8w0] {
    margin-top: 2px;
    color: #3730a3;
}

.mw-numero[b-lijw53c8w0] {
    width: 72px;
}

.mw-boton-si[b-lijw53c8w0] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

    .mw-boton-si:hover:not(:disabled)[b-lijw53c8w0] {
        background: #4338ca;
    }

.mw-bloque[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.mw-col-marca[b-lijw53c8w0] {
    width: 28px;
    text-align: center;
}

.mw-oculto[b-lijw53c8w0] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.mw-col-propuesta[b-lijw53c8w0] {
    min-width: 260px;
    cursor: default;
}

.mw-propuesta[b-lijw53c8w0] {
    overflow-wrap: anywhere;
}

.mw-propuesta-busqueda[b-lijw53c8w0] {
    font-weight: 700;
    color: #312e81;
}

.mw-propuesta-motivo[b-lijw53c8w0] {
    margin-top: 2px;
    font-size: 11.5px;
    color: #4b5563;
    font-style: italic;
}

.mw-propuesta-corta[b-lijw53c8w0] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 11.5px;
    font-style: normal;
    color: #4f46e5;
}

    .mw-propuesta-corta .material-symbols-rounded[b-lijw53c8w0] {
        font-size: 14px;
    }

.mw-fila-botones[b-lijw53c8w0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.mw-seccion-propuesta[b-lijw53c8w0] {
    padding: 10px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/PalabrasClaveWebPestana.razor.rz.scp.css */
/*
    Pestaña «Palabras clave» del posicionamiento web: la barra del tema, los formularios de proponer y de tema nuevo, los
    filtros, las acciones en bloque y la tabla del banco con sus columnas SEO. Hoja propia porque el CSS de Blazor tiene
    ámbito por componente; mismas medidas y colores que la pestaña de directrices. Los desplegables toman su aspecto de
    css/desplegables.css: aquí solo su alto y su ancho.
*/

.pk-pestana[b-3q212f1ciw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pk-barra-texto[b-3q212f1ciw] {
    min-width: 0;
}

.pk-titulo[b-3q212f1ciw] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.pk-subtitulo[b-3q212f1ciw] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 100ch;
}

.pk-barra[b-3q212f1ciw] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.pk-botones[b-3q212f1ciw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pk-aviso[b-3q212f1ciw],
.pk-resultado[b-3q212f1ciw],
.pk-impacto[b-3q212f1ciw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

    .pk-aviso .material-symbols-rounded[b-3q212f1ciw],
    .pk-resultado .material-symbols-rounded[b-3q212f1ciw],
    .pk-impacto .material-symbols-rounded[b-3q212f1ciw] {
        font-size: 18px;
        flex: none;
    }

.pk-aviso[b-3q212f1ciw] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.pk-resultado[b-3q212f1ciw] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
}

.pk-impacto[b-3q212f1ciw] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.pk-tarjeta[b-3q212f1ciw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.pk-tarjeta-titulo[b-3q212f1ciw] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.pk-rejilla[b-3q212f1ciw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

.pk-campo[b-3q212f1ciw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .pk-campo > label[b-3q212f1ciw] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.pk-input[b-3q212f1ciw] {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .pk-input:focus[b-3q212f1ciw] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .pk-input:disabled[b-3q212f1ciw] {
        background: #f9fafb;
        color: #6b7280;
    }

.pk-chico[b-3q212f1ciw] {
    width: auto;
    min-width: 120px;
    padding: 4px 8px;
    font-size: 12px;
}

.pk-fuentes[b-3q212f1ciw] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pk-casilla[b-3q212f1ciw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.pk-plan[b-3q212f1ciw] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    color: #374151;
    font-size: 12.5px;
}

.pk-acciones[b-3q212f1ciw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pk-boton[b-3q212f1ciw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

    .pk-boton .material-symbols-rounded[b-3q212f1ciw] {
        font-size: 17px;
    }

    .pk-boton:disabled[b-3q212f1ciw],
    .pk-boton.apagado[b-3q212f1ciw] {
        opacity: 0.55;
        cursor: default;
    }

    .pk-boton.primario[b-3q212f1ciw] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .pk-boton.chico[b-3q212f1ciw] {
        padding: 3px 7px;
    }

    .pk-boton.activo[b-3q212f1ciw] {
        color: #b91c1c;
        border-color: #fecaca;
        background: #fef2f2;
    }

.pk-subir[b-3q212f1ciw] {
    position: relative;
    overflow: hidden;
}

    .pk-subir[b-3q212f1ciw]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.pk-filtros[b-3q212f1ciw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pk-buscar[b-3q212f1ciw] {
    width: auto;
    flex: 1 1 220px;
}

.pk-anadir[b-3q212f1ciw] {
    display: inline-flex;
    gap: 6px;
    flex: 1 1 280px;
}

.pk-bloque[b-3q212f1ciw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.pk-bloque-cuenta[b-3q212f1ciw] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f766e;
}

.pk-nota[b-3q212f1ciw] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.pk-ayuda[b-3q212f1ciw] {
    font-size: 11.5px;
    color: #6b7280;
}

.pk-sub[b-3q212f1ciw] {
    display: block;
    font-size: 11px;
    color: #6b7280;
}

.pk-porque[b-3q212f1ciw] {
    font-weight: 400;
    max-width: 34ch;
    white-space: normal;
}

.pk-sin-demanda[b-3q212f1ciw] {
    color: #b45309;
}

.pk-tabla-caja[b-3q212f1ciw] {
    overflow-x: auto;
    min-width: 0;
}

.pk-tabla[b-3q212f1ciw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .pk-tabla th[b-3q212f1ciw] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .pk-tabla td[b-3q212f1ciw] {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        vertical-align: top;
    }

    .pk-tabla tr.pk-fuera td[b-3q212f1ciw] {
        color: #9ca3af;
    }

    .pk-tabla .pk-num[b-3q212f1ciw] {
        text-align: right;
    }

.pk-fila-acciones[b-3q212f1ciw] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

.pk-insignia[b-3q212f1ciw] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #6b7280;
}

    .pk-insignia.sube[b-3q212f1ciw] {
        background: #dcfce7;
        color: #166534;
    }

    .pk-insignia.baja[b-3q212f1ciw] {
        background: #fee2e2;
        color: #991b1b;
    }

    .pk-insignia.estacional[b-3q212f1ciw] {
        background: #e0f2fe;
        color: #075985;
    }

    .pk-insignia.pk-veto[b-3q212f1ciw] {
        background: #fee2e2;
        color: #991b1b;
    }

    .pk-insignia.pk-canal[b-3q212f1ciw] {
        background: #ede9fe;
        color: #5b21b6;
    }
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/PlanEditorialWebPestana.razor.rz.scp.css */
/*
    Pestaña «Plan editorial» del posicionamiento web: el alta rápida, los filtros, las acciones sobre las marcadas, la ficha de
    una pieza y la lista. Hoja propia porque el CSS de Blazor tiene ámbito por componente; mismas medidas y colores que las
    pestañas de clusters y directrices. El campo del autor lo pinta CampoCodigo (un componente hijo): sus clases van con ::deep.
*/

.pe-pestana[b-0voj5kxxei] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pe-barra[b-0voj5kxxei] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.pe-barra-texto[b-0voj5kxxei] {
    flex: 1 1 320px;
    min-width: 0;
}

.pe-titulo[b-0voj5kxxei] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.pe-subtitulo[b-0voj5kxxei] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 90ch;
}

.pe-resultado[b-0voj5kxxei] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    font-size: 13px;
}

    .pe-resultado.pe-impacto[b-0voj5kxxei] {
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #065f46;
    }

    .pe-resultado .material-symbols-rounded[b-0voj5kxxei] {
        font-size: 18px;
    }

.pe-tarjeta[b-0voj5kxxei] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.pe-tarjeta-cabecera[b-0voj5kxxei] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pe-tarjeta-titulo[b-0voj5kxxei] {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.pe-tarjeta-botones[b-0voj5kxxei] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pe-fila-campos[b-0voj5kxxei] {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
}

    .pe-fila-campos > .pe-campo[b-0voj5kxxei] {
        flex: 0 1 200px;
    }

        .pe-fila-campos > .pe-campo.pe-ancho[b-0voj5kxxei] {
            flex: 1 1 280px;
        }

.pe-masivas[b-0voj5kxxei] {
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.pe-cuenta[b-0voj5kxxei] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f766e;
    padding-bottom: 8px;
}

.pe-rejilla[b-0voj5kxxei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
}

    .pe-rejilla > .pe-ancho[b-0voj5kxxei] {
        grid-column: span 2;
    }

.pe-campo[b-0voj5kxxei],
.pe-pestana[b-0voj5kxxei]  .pe-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .pe-campo > label[b-0voj5kxxei],
    .pe-pestana[b-0voj5kxxei]  .pe-campo > label {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.pe-input[b-0voj5kxxei],
.pe-pestana[b-0voj5kxxei]  .pe-input {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    font-family: inherit;
}

    .pe-input:focus[b-0voj5kxxei],
    .pe-pestana[b-0voj5kxxei]  .pe-input:focus {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .pe-input:disabled[b-0voj5kxxei],
    .pe-pestana[b-0voj5kxxei]  .pe-input:disabled {
        background: #f9fafb;
        color: #6b7280;
    }

.pe-acciones[b-0voj5kxxei] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pe-boton[b-0voj5kxxei] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .pe-boton .material-symbols-rounded[b-0voj5kxxei] {
        font-size: 17px;
    }

    .pe-boton:disabled[b-0voj5kxxei] {
        opacity: 0.55;
        cursor: default;
    }

    .pe-boton.primario[b-0voj5kxxei] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .pe-boton.peligro[b-0voj5kxxei] {
        color: #b91c1c;
        border-color: #fecaca;
    }

    .pe-boton.chico[b-0voj5kxxei] {
        padding: 3px 7px;
    }

.pe-nota[b-0voj5kxxei] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

.pe-ayuda[b-0voj5kxxei],
.pe-sub[b-0voj5kxxei] {
    font-size: 11.5px;
    color: #6b7280;
}

/* La medición a los 30 y a los 90 días de una pieza publicada. */
.pe-medicion[b-0voj5kxxei] {
    max-width: 34ch;
    color: #374151;
}

.pe-propuesta[b-0voj5kxxei] {
    color: #b45309;
}

.pe-propuesta-caja[b-0voj5kxxei] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

.pe-tabla-caja[b-0voj5kxxei] {
    overflow-x: auto;
    min-width: 0;
}

.pe-tabla[b-0voj5kxxei] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .pe-tabla th[b-0voj5kxxei] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .pe-tabla td[b-0voj5kxxei] {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        vertical-align: top;
    }

    .pe-tabla tr.pe-apagada td[b-0voj5kxxei] {
        color: #9ca3af;
    }

    .pe-tabla tr.pe-abierta td[b-0voj5kxxei] {
        background: #f0fdfa;
    }

.pe-marca[b-0voj5kxxei] {
    width: 28px;
}

.pe-enlace[b-0voj5kxxei] {
    border: none;
    background: none;
    padding: 0;
    color: #0f766e;
    font-weight: 650;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

    .pe-enlace:disabled[b-0voj5kxxei] {
        cursor: default;
    }

.pe-botones[b-0voj5kxxei] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.pe-insignia[b-0voj5kxxei] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #6b7280;
}

    .pe-insignia.idea[b-0voj5kxxei] {
        background: #f3f4f6;
        color: #374151;
    }

    .pe-insignia.planificada[b-0voj5kxxei] {
        background: #e0f2fe;
        color: #075985;
    }

    .pe-insignia.encurso[b-0voj5kxxei] {
        background: #fef3c7;
        color: #92400e;
    }

    .pe-insignia.publicada[b-0voj5kxxei] {
        background: #dcfce7;
        color: #166534;
    }

    .pe-insignia.descartada[b-0voj5kxxei] {
        background: #f3f4f6;
        color: #9ca3af;
    }

/* ── Choques al proponer ── */

    .pe-insignia.pe-choque.verde[b-0voj5kxxei] {
        background: #dcfce7;
        color: #166534;
    }

    .pe-insignia.pe-choque.ambar[b-0voj5kxxei] {
        background: #fef3c7;
        color: #92400e;
    }

    .pe-insignia.pe-choque.rojo[b-0voj5kxxei] {
        background: #fee2e2;
        color: #991b1b;
    }

    .pe-insignia.pe-choque.aceptado[b-0voj5kxxei] {
        background: #f3f4f6;
        color: #4b5563;
    }

.pe-choque-caja[b-0voj5kxxei] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    background: #fafafa;
}

    .pe-choque-caja.verde[b-0voj5kxxei] {
        border-left-color: #16a34a;
    }

    .pe-choque-caja.ambar[b-0voj5kxxei] {
        border-left-color: #d97706;
    }

    .pe-choque-caja.rojo[b-0voj5kxxei] {
        border-left-color: #dc2626;
    }

    .pe-choque-caja.aceptado[b-0voj5kxxei] {
        border-left-color: #9ca3af;
    }

.pe-choque-cabecera[b-0voj5kxxei] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.pe-senales[b-0voj5kxxei] {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .pe-senales li.rojo[b-0voj5kxxei]::marker {
        color: #dc2626;
    }

    .pe-senales li.ambar[b-0voj5kxxei]::marker {
        color: #d97706;
    }

.pe-senal-nombre[b-0voj5kxxei] {
    font-weight: 600;
    margin-right: 4px;
}

.pe-casilla label[b-0voj5kxxei] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

/* El guion de la pieza (SEO12): el texto que se prepara con la IA, se edita, se guarda y se copia. */
.pe-guion[b-0voj5kxxei] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    min-width: 0;
}

.pe-guion-cabecera[b-0voj5kxxei] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pe-guion-titulo[b-0voj5kxxei] {
    font-size: 13.5px;
    font-weight: 800;
    color: #1f2937;
}

.pe-guion-texto[b-0voj5kxxei] {
    width: 100%;
    min-height: 260px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    resize: vertical;
}

.pe-guion-descartes[b-0voj5kxxei] {
    font-size: 12px;
    color: #6b7280;
}

    .pe-guion-descartes summary[b-0voj5kxxei] {
        cursor: pointer;
    }

    .pe-guion-descartes ul[b-0voj5kxxei] {
        margin: 6px 0 0 18px;
        padding: 0;
    }
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/PosicionamientoWebPage.razor.rz.scp.css */
/*
    Cabecera y pestañas de la pantalla del posicionamiento web. Mismas medidas y colores que el resto de
    listados del ERP (título 22px/850, subtítulo 13px gris). Hoja propia porque el CSS de Blazor tiene ámbito
    por componente: sin ella la pantalla se vería sin estilo. Lo de cada pestaña va en la hoja de su
    componente.
*/

/* A todo el ancho de la pantalla, como las demás: sin tope ni centrado (el borde lo pone .main-body). */
.pw-page[b-00jsm3rh0c] {
    padding: 0 0 3rem;
    width: 100%;
    color: #1f2933;
}

.pw-header[b-00jsm3rh0c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 1.25rem;
}

.pw-icono[b-00jsm3rh0c] {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: #0f766e;
    background: #ecfdf5;
    border-radius: 10px;
    padding: 8px;
}

.pw-title[b-00jsm3rh0c] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.pw-subtitle[b-00jsm3rh0c] {
    margin-top: 4px;
    max-width: 72ch;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

/* Pestañas: pastillas de css/pestanas-pastilla.css (como el panel de campañas). */

.pw-cuerpo[b-00jsm3rh0c] {
    min-width: 0;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/RevisionPaginaWebPanel.razor.rz.scp.css */
/*
    Panel de revisión de la ficha de una página (pestaña Mapa): el semáforo, los hallazgos por gravedad y la
    historia. Hoja propia (el CSS de Blazor tiene ámbito por componente); mismas medidas y colores que la ficha.
*/

.rp-panel[b-wbc7xztvcy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fcfcfd;
    min-width: 0;
}

.rp-cabecera[b-wbc7xztvcy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rp-titulos[b-wbc7xztvcy] {
    flex: 1 1 auto;
    min-width: 0;
}

.rp-titulo[b-wbc7xztvcy] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.rp-subtitulo[b-wbc7xztvcy] {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 2px;
}

.rp-nota[b-wbc7xztvcy] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12px;
}

.rp-boton[b-wbc7xztvcy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

    .rp-boton .material-symbols-rounded[b-wbc7xztvcy] {
        font-size: 17px;
    }

    .rp-boton.primario[b-wbc7xztvcy] {
        border-color: #0f766e;
        background: #0f766e;
        color: #fff;
    }

    .rp-boton:disabled[b-wbc7xztvcy] {
        opacity: 0.55;
        cursor: default;
    }

/* ── El semáforo ─────────────────────────────────────────────────────────────────────────────── */

.rp-semaforo[b-wbc7xztvcy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

    .rp-semaforo.s-verde[b-wbc7xztvcy] { border-color: #bbf7d0; background: #f0fdf4; }
    .rp-semaforo.s-ambar[b-wbc7xztvcy] { border-color: #fde68a; background: #fffbeb; }
    .rp-semaforo.s-rojo[b-wbc7xztvcy] { border-color: #fecaca; background: #fef2f2; }

.rp-luz[b-wbc7xztvcy] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: #9ca3af;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.s-verde .rp-luz[b-wbc7xztvcy] { background: #16a34a; }
.s-ambar .rp-luz[b-wbc7xztvcy] { background: #f59e0b; }
.s-rojo .rp-luz[b-wbc7xztvcy] { background: #dc2626; }

.rp-semaforo-texto[b-wbc7xztvcy] {
    min-width: 0;
}

.rp-semaforo-color[b-wbc7xztvcy] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.rp-cuenta[b-wbc7xztvcy] {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 650;
    color: #6b7280;
}

.rp-semaforo-explicacion[b-wbc7xztvcy] {
    font-size: 12px;
    color: #374151;
    margin-top: 2px;
}

.rp-semaforo-quien[b-wbc7xztvcy] {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 4px;
}

/* ── Los hallazgos ───────────────────────────────────────────────────────────────────────────── */

.rp-grupo[b-wbc7xztvcy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp-grupo-titulo[b-wbc7xztvcy] {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

.g-rojo .rp-grupo-titulo[b-wbc7xztvcy] { color: #b91c1c; }
.g-ambar .rp-grupo-titulo[b-wbc7xztvcy] { color: #b45309; }
.g-verde .rp-grupo-titulo[b-wbc7xztvcy] { color: #15803d; }

.rp-hallazgos[b-wbc7xztvcy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp-hallazgo[b-wbc7xztvcy] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    background: #fff;
    min-width: 0;
}

.g-rojo .rp-hallazgo[b-wbc7xztvcy] { border-left-color: #dc2626; }
.g-ambar .rp-hallazgo[b-wbc7xztvcy] { border-left-color: #f59e0b; }
.g-verde .rp-hallazgo[b-wbc7xztvcy] { border-left-color: #16a34a; }

.rp-regla[b-wbc7xztvcy] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.rp-mensaje[b-wbc7xztvcy] {
    font-size: 12.5px;
    color: #1f2937;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.rp-sugerencia[b-wbc7xztvcy] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
    font-size: 12px;
    color: #0f766e;
    overflow-wrap: anywhere;
}

    .rp-sugerencia .material-symbols-rounded[b-wbc7xztvcy] {
        font-size: 15px;
        margin-top: 1px;
    }

.rp-enlace[b-wbc7xztvcy] {
    margin-top: 4px;
    border: 0;
    background: none;
    padding: 0;
    color: #0f766e;
    font-size: 12px;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
}

    .rp-enlace:disabled[b-wbc7xztvcy] {
        opacity: 0.55;
        cursor: default;
    }

/* ── La historia ─────────────────────────────────────────────────────────────────────────────── */

.rp-historia summary[b-wbc7xztvcy] {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

.rp-historia ul[b-wbc7xztvcy] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-historia-fila[b-wbc7xztvcy] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    color: #374151;
    text-align: left;
    cursor: pointer;
}

    .rp-historia-fila:hover:not(:disabled)[b-wbc7xztvcy] {
        background: #f8fafc;
    }

    .rp-historia-fila.elegida[b-wbc7xztvcy] {
        border-color: #99f6e4;
        background: #f0fdfa;
    }

.rp-punto[b-wbc7xztvcy] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ca3af;
}

    .rp-punto.s-verde[b-wbc7xztvcy] { background: #16a34a; }
    .rp-punto.s-ambar[b-wbc7xztvcy] { background: #f59e0b; }
    .rp-punto.s-rojo[b-wbc7xztvcy] { background: #dc2626; }

.rp-historia-fecha[b-wbc7xztvcy],
.rp-historia-cuenta[b-wbc7xztvcy] {
    font-variant-numeric: tabular-nums;
}

.rp-historia-cuenta[b-wbc7xztvcy],
.rp-historia-origen[b-wbc7xztvcy] {
    color: #6b7280;
}

.rp-historia-origen[b-wbc7xztvcy] {
    margin-left: auto;
}
/* _content/ErpPowergest/Presentation/Canales/PosicionamientoWeb/SitiosWebPestana.razor.rz.scp.css */
/*
    Pestaña «Sitios» del posicionamiento web: la lista de webs a la izquierda y su ficha a la derecha (debajo en
    pantallas estrechas). Hoja propia porque el CSS de Blazor tiene ámbito por componente; los colores y
    medidas son los del resto de fichas del ERP (tarjeta blanca con borde gris, rótulos de 12px, verde de la
    cabecera del módulo).
*/

.sw-pestana[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sw-barra[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sw-barra-texto[b-hn962nlr1u] {
    flex: 1 1 auto;
    min-width: 0;
}

.sw-titulo[b-hn962nlr1u] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.sw-subtitulo[b-hn962nlr1u] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.sw-reparto[b-hn962nlr1u] {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .sw-reparto[b-hn962nlr1u] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Lista de sitios ─────────────────────────────────────────────────────────────────────────── */

.sw-lista[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sw-fila[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .sw-fila:hover[b-hn962nlr1u] {
        border-color: #99f6e4;
    }

    .sw-fila.abierta[b-hn962nlr1u] {
        border-color: #0f766e;
        box-shadow: 0 0 0 2px #ccfbf1;
    }

.sw-fila-nombre[b-hn962nlr1u] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

.sw-fila-url[b-hn962nlr1u] {
    font-size: 12px;
    color: #6b7280;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-fila-datos[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #6b7280;
}

.sw-vacio[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
}

    .sw-vacio .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 32px;
        color: #9ca3af;
    }

.sw-vacio-titulo[b-hn962nlr1u] {
    font-weight: 750;
    color: #374151;
}

.sw-vacio-texto[b-hn962nlr1u] {
    font-size: 12.5px;
}

.sw-nota[b-hn962nlr1u] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12.5px;
}

/* ── Ficha ───────────────────────────────────────────────────────────────────────────────────── */

.sw-detalle[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sw-tarjeta[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.sw-tarjeta-cabecera[b-hn962nlr1u] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

    .sw-tarjeta-cabecera > .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 22px;
        color: #0f766e;
        margin-top: 1px;
    }

.sw-tarjeta-titulos[b-hn962nlr1u] {
    flex: 1 1 auto;
    min-width: 0;
}

.sw-tarjeta-titulo[b-hn962nlr1u] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.sw-tarjeta-subtitulo[b-hn962nlr1u] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.sw-tarjeta-botones[b-hn962nlr1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.sw-rejilla[b-hn962nlr1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

.sw-campo[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .sw-campo > label[b-hn962nlr1u] {
        font-size: 12px;
        font-weight: 650;
        color: #374151;
    }

.sw-campo-corto[b-hn962nlr1u] {
    max-width: 220px;
}

.sw-input[b-hn962nlr1u] {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
}

    .sw-input:focus[b-hn962nlr1u] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px #ccfbf1;
    }

    .sw-input:disabled[b-hn962nlr1u] {
        background: #f9fafb;
        color: #6b7280;
    }

/* Contenedor anclado de un campo suelto en una fila (BloqueTeclado): una caja de verdad, que el teclado necesita.
   Se lleva la clase de medida que antes tenía el campo (sw-regla-valor, sw-fuente-url…) y el campo la llena. */
.sw-ancla[b-hn962nlr1u] {
    display: flex;
    min-width: 0;
}

    .sw-ancla > .sw-input[b-hn962nlr1u] {
        flex: 1 1 auto;
    }

.sw-ayuda[b-hn962nlr1u] {
    font-size: 11.5px;
    color: #6b7280;
}

.sw-interruptor[b-hn962nlr1u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.sw-acciones[b-hn962nlr1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sw-boton[b-hn962nlr1u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    /* También hay enlaces con forma de botón (abrir la hoja, crear el panel en Looker Studio). */
    text-decoration: none;
}

    .sw-boton .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 17px;
    }

    .sw-boton:hover:not(:disabled)[b-hn962nlr1u] {
        border-color: #9ca3af;
    }

    .sw-boton:disabled[b-hn962nlr1u] {
        opacity: 0.55;
        cursor: default;
    }

    .sw-boton.primario[b-hn962nlr1u] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .sw-boton.peligro[b-hn962nlr1u] {
        color: #b91c1c;
        border-color: #fecaca;
    }

.sw-boton-icono[b-hn962nlr1u] {
    padding: 6px 8px;
}

.sw-insignia[b-hn962nlr1u] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .sw-insignia.ok[b-hn962nlr1u] {
        background: #dcfce7;
        color: #166534;
    }

    .sw-insignia.neutra[b-hn962nlr1u] {
        background: #f3f4f6;
        color: #4b5563;
    }

    .sw-insignia.wp[b-hn962nlr1u] {
        background: #e0f2fe;
        color: #075985;
    }

    .sw-insignia.mapa[b-hn962nlr1u] {
        background: #fef3c7;
        color: #92400e;
    }

/* ── Fuentes ─────────────────────────────────────────────────────────────────────────────────── */

.sw-fuente[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fcfcfd;
}

.sw-fuente-cabecera[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sw-fuente-url[b-hn962nlr1u] {
    flex: 1 1 260px;
}

.sw-credencial[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

.sw-credencial-estado[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #374151;
}

    .sw-credencial-estado .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 18px;
        color: #6b7280;
    }

.sw-prueba[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
}

    .sw-prueba.correcta[b-hn962nlr1u] {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
    }

    .sw-prueba.fallida[b-hn962nlr1u] {
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

.sw-prueba-motivo[b-hn962nlr1u] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 650;
    color: #1f2937;
}

    .sw-prueba.correcta .sw-prueba-motivo .material-symbols-rounded[b-hn962nlr1u] {
        color: #16a34a;
    }

    .sw-prueba.fallida .sw-prueba-motivo .material-symbols-rounded[b-hn962nlr1u] {
        color: #dc2626;
    }

.sw-prueba-detalles[b-hn962nlr1u] {
    margin: 0;
    padding-left: 30px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sw-tipos[b-hn962nlr1u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

    .sw-tipos th[b-hn962nlr1u],
    .sw-tipos td[b-hn962nlr1u] {
        padding: 6px 8px;
        border-bottom: 1px solid #f3f4f6;
        text-align: left;
    }

    .sw-tipos th[b-hn962nlr1u] {
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        background: #f9fafb;
    }

    .sw-tipos .num[b-hn962nlr1u] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.sw-clave[b-hn962nlr1u] {
    margin-left: 6px;
    font-size: 11px;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Sincronización ──────────────────────────────────────────────────────────────────────────── */

.sw-resumen[b-hn962nlr1u] {
    margin: 0;
    padding: 10px 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 12.5px;
    color: #374151;
}

    .sw-resumen li[b-hn962nlr1u] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .sw-resumen .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 16px;
        color: #16a34a;
        margin-top: 1px;
    }

    .sw-resumen li.fallo[b-hn962nlr1u] {
        color: #991b1b;
    }

        .sw-resumen li.fallo .material-symbols-rounded[b-hn962nlr1u] {
            color: #dc2626;
        }

/* ── Reglas de ámbito ────────────────────────────────────────────────────────────────────────── */

.sw-regla[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sw-regla-orden[b-hn962nlr1u] {
    min-width: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.sw-regla-condicion[b-hn962nlr1u] {
    flex: 0 1 200px;
}

.sw-regla-valor[b-hn962nlr1u] {
    flex: 1 1 180px;
}

.sw-regla-ambito[b-hn962nlr1u] {
    flex: 0 1 150px;
}

.sw-regla-flecha[b-hn962nlr1u] {
    font-size: 18px;
    color: #9ca3af;
}

.sw-regla-nueva[b-hn962nlr1u] {
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

/* ── Idiomas ─────────────────────────────────────────────────────────────────────────────────── */

.sw-idioma[b-hn962nlr1u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sw-idioma-codigo[b-hn962nlr1u] {
    min-width: 48px;
    font-weight: 750;
    color: #1f2937;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sw-input-prefijo[b-hn962nlr1u] {
    max-width: 160px;
}

/* ── Reglas de la revisión ──────────────────────────────────────────────────────────────────── */

.sw-reglas-revision[b-hn962nlr1u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.sw-regla-revision[b-hn962nlr1u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

    .sw-regla-revision.apagada[b-hn962nlr1u] {
        background: #f9fafb;
    }

        .sw-regla-revision.apagada .sw-regla-revision-nombre[b-hn962nlr1u],
        .sw-regla-revision.apagada .sw-regla-revision-texto[b-hn962nlr1u] {
            color: #9ca3af;
        }

.sw-regla-revision-casilla[b-hn962nlr1u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 0;
}

.sw-regla-revision-nombre[b-hn962nlr1u] {
    font-size: 12.5px;
    font-weight: 750;
    color: #1f2937;
}

.sw-regla-revision-texto[b-hn962nlr1u],
.sw-regla-revision-estado[b-hn962nlr1u] {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: #4b5563;
}

.sw-regla-revision-estado[b-hn962nlr1u] {
    color: #6b7280;
    font-style: italic;
}

.sw-gravedad[b-hn962nlr1u] {
    align-self: start;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
}

    .sw-gravedad.g-rojo[b-hn962nlr1u] { background: #fee2e2; color: #991b1b; }
    .sw-gravedad.g-ambar[b-hn962nlr1u] { background: #fef3c7; color: #92400e; }
    .sw-gravedad.g-verde[b-hn962nlr1u] { background: #dcfce7; color: #166534; }

/* ── Google: la cuenta de servicio, las propiedades y la lista de conexiones ─────────────────────────────── */

.sw-google-correo[b-hn962nlr1u] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    font-size: 12.5px;
    color: #134e4a;
}

    .sw-google-correo .material-symbols-rounded[b-hn962nlr1u] {
        font-size: 18px;
        color: #0f766e;
    }

.sw-google-correo code[b-hn962nlr1u],
.sw-google-conexion code[b-hn962nlr1u] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    word-break: break-all;
    user-select: all;
}

.sw-google-conexiones[b-hn962nlr1u] {
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}

    .sw-google-conexiones > summary[b-hn962nlr1u] {
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 650;
        color: #374151;
    }

.sw-google-conexion[b-hn962nlr1u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.sw-google-conexion-datos[b-hn962nlr1u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
}

.sw-google-conexion-nombre[b-hn962nlr1u] {
    font-weight: 650;
    color: #1f2937;
}

.sw-google-clave[b-hn962nlr1u] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11.5px;
    resize: vertical;
}
/* _content/ErpPowergest/Presentation/Canales/Terminales/Components/CodigoEmparejamientoAviso.razor.rz.scp.css */
/* EL CÓDIGO DE EMPAREJAMIENTO
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Un aviso a plena anchura y con el código en grande: quien lo está dictando por teléfono lo tiene
   que leer de un vistazo y desde lejos. `tabular-nums` y el espaciado entre letras son para que no
   se confundan al dictarlo.

   Todo el aspecto está AQUÍ, sin depender de las hojas del módulo (`tw-*`, `ctab-*`): el aviso se
   pinta también dentro de la ventana del terminal, que cuelga fuera de la raíz de la página y a la
   que esas hojas no llegan. */
.codigo-aviso[b-j8h12xjgcp] {
    flex: 0 0 auto;
    padding: 14px 16px;
    border: 1px solid #f59e0b;
    border-left-width: 4px;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
}

.codigo-aviso-cabecera[b-j8h12xjgcp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .codigo-aviso-cabecera .material-symbols-outlined[b-j8h12xjgcp] {
        font-size: 20px;
        color: #b45309;
        user-select: none;
    }

.codigo-aviso-titulo[b-j8h12xjgcp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* «Ocultar»: el mismo botón de contorno que el resto del módulo, en el tono del aviso. */
.codigo-aviso-ocultar[b-j8h12xjgcp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: transparent;
    color: #92400e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

    .codigo-aviso-ocultar:hover[b-j8h12xjgcp] {
        background: #fef3c7;
        border-color: #f59e0b;
    }

    .codigo-aviso-ocultar .material-symbols-rounded[b-j8h12xjgcp] {
        font-size: 16px;
        line-height: 1;
        user-select: none;
    }

.codigo-aviso-valor[b-j8h12xjgcp] {
    margin: 10px 0 8px;
    font-size: clamp(32px, 7vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: #92400e;
    /* Se dicta y se teclea: que se pueda seleccionar con doble clic sin arrastrar medio aviso. */
    user-select: all;
}

.codigo-aviso-ayuda[b-j8h12xjgcp] {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.codigo-aviso-caduca[b-j8h12xjgcp] {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #92400e;
}
/* _content/ErpPowergest/Presentation/Canales/Terminales/Components/OperarioTerminalModal.razor.rz.scp.css */
/* LA FICHA DE LA PERSONA EN VENTANA MODAL.
   El mismo aspecto que los modales de Artículos y Clientes (`.art-modal-*`) y que <TerminalModal>, su
   vecina de pantalla. Va entero aquí, sin tirar de las hojas del módulo (`tw-*`, `ctab-*`): la ventana
   cuelga fuera de la raíz de la página y esas hojas no la alcanzan. */

.tlec-modal-backdrop[b-9blh6wu5t1] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.tlec-modal-card[b-9blh6wu5t1] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.tlec-modal-card .material-symbols-outlined[b-9blh6wu5t1] {
    user-select: none;
    -webkit-user-select: none;
}

.tlec-modal-header[b-9blh6wu5t1] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.tlec-modal-title[b-9blh6wu5t1] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tlec-modal-subtitle[b-9blh6wu5t1] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.tlec-modal-body[b-9blh6wu5t1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tlec-modal-info-box[b-9blh6wu5t1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.tlec-modal-info-icon[b-9blh6wu5t1] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.tlec-modal-info-title[b-9blh6wu5t1] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.tlec-modal-info-text[b-9blh6wu5t1] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

/* Dos columnas: el nombre ocupa la fila entera; código y empleado, debajo, uno al lado del otro. */
.tlec-modal-grid[b-9blh6wu5t1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tlec-modal-field[b-9blh6wu5t1] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.tlec-modal-field-ancho[b-9blh6wu5t1] {
    grid-column: span 2;
}

.tlec-modal-label[b-9blh6wu5t1] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.tlec-modal-ayuda[b-9blh6wu5t1] {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.35;
}

/* «::deep» además del selector directo: el empleado es un <CampoConBuscador>, y su <input> recibe esta
   clase por ClaseInput pero lo pinta el componente HIJO, así que el CSS aislado de esta ventana no lo
   marcaría y el campo saldría sin estilo. Anclado en .tlec-modal-field para no sangrar a otros sitios.
   La misma solución que .art-modal-field en los modales de Artículos. */
.tlec-modal-input[b-9blh6wu5t1],
.tlec-modal-field[b-9blh6wu5t1]  .tlec-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .tlec-modal-input[b-9blh6wu5t1]::placeholder,
    .tlec-modal-field[b-9blh6wu5t1]  .tlec-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .tlec-modal-input:focus[b-9blh6wu5t1],
    .tlec-modal-field[b-9blh6wu5t1]  .tlec-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    .tlec-modal-input:disabled[b-9blh6wu5t1] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

.tlec-modal-toggle[b-9blh6wu5t1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

    .tlec-modal-toggle input[type="checkbox"][b-9blh6wu5t1] {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: #2563eb;
    }

    .tlec-modal-toggle span[b-9blh6wu5t1] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .tlec-modal-toggle strong[b-9blh6wu5t1] {
        font-size: 13px;
        font-weight: 850;
        color: #0f172a;
    }

    .tlec-modal-toggle small[b-9blh6wu5t1] {
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
    }

.tlec-modal-actions[b-9blh6wu5t1] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que el resto de modales de mantenimiento. */
.btn[b-9blh6wu5t1] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover:not(:disabled)[b-9blh6wu5t1] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active:not(:disabled)[b-9blh6wu5t1] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .btn:disabled[b-9blh6wu5t1] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-accept[b-9blh6wu5t1] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover:not(:disabled)[b-9blh6wu5t1] {
        background: #f3f4f6;
    }

.btn-cancel[b-9blh6wu5t1] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover:not(:disabled)[b-9blh6wu5t1] {
        background: #4b5563;
    }

/* Pantallas pequeñas: la ventana ocupa toda la pantalla y la rejilla pasa a una columna. El pie no se
   apila: los botones se reparten el ancho, lo gobierna `.modal-actions` en app.css. */
@media (max-width: 560px) {
    .tlec-modal-backdrop[b-9blh6wu5t1] {
        padding: 0;
    }

    .tlec-modal-card[b-9blh6wu5t1] {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .tlec-modal-grid[b-9blh6wu5t1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tlec-modal-field-ancho[b-9blh6wu5t1] {
        grid-column: span 1;
    }
}
/* _content/ErpPowergest/Presentation/Canales/Terminales/Components/TerminalModal.razor.rz.scp.css */
/* LA FICHA DEL TERMINAL EN VENTANA MODAL.
   El mismo aspecto que los modales de Artículos y Clientes (`.art-modal-*` de FamiliaNuevaModal o
   ClienteTarifaModal): fondo que cubre la pantalla, tarjeta con cabecera, cuerpo que se desplaza y pie
   fijo. Va entero aquí, sin tirar de las hojas del módulo (`tw-*`, `ctab-*`): la ventana cuelga fuera
   de la raíz de la página y esas hojas no la alcanzan. */

.tlec-modal-backdrop[b-med0ewu0ln] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.tlec-modal-card[b-med0ewu0ln] {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.tlec-modal-card .material-symbols-outlined[b-med0ewu0ln],
.tlec-modal-card .material-symbols-rounded[b-med0ewu0ln] {
    user-select: none;
    -webkit-user-select: none;
}

.tlec-modal-header[b-med0ewu0ln] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.tlec-modal-title[b-med0ewu0ln] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tlec-modal-subtitle[b-med0ewu0ln] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

/* El cuerpo es la ÚNICA pieza que se desplaza: cabecera y pie se quedan quietos. `min-height: 0` es
   lo que le deja encogerse por debajo de su contenido; sin él empujaría el pie fuera de la ventana. */
.tlec-modal-body[b-med0ewu0ln] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tlec-modal-info-box[b-med0ewu0ln] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.tlec-modal-info-icon[b-med0ewu0ln] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.tlec-modal-info-title[b-med0ewu0ln] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.tlec-modal-info-text[b-med0ewu0ln] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

/* Dos columnas: el nombre y la tarifa (textos largos) ocupan la fila entera; almacén y nivel de
   precio, que se eligen juntos, van uno al lado del otro. */
.tlec-modal-grid[b-med0ewu0ln] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tlec-modal-field[b-med0ewu0ln] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.tlec-modal-field-ancho[b-med0ewu0ln] {
    grid-column: span 2;
}

.tlec-modal-label[b-med0ewu0ln] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.tlec-modal-ayuda[b-med0ewu0ln] {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.35;
}

/* «::deep» además del selector directo: el almacén es un <CampoConBuscador>, y su <input> recibe esta
   clase por ClaseInput pero lo pinta el componente HIJO, así que el CSS aislado de esta ventana no lo
   marcaría y el campo saldría sin estilo. Anclado en .tlec-modal-field para no sangrar a otros sitios.
   La misma solución que .art-modal-field en los modales de Artículos. */
.tlec-modal-input[b-med0ewu0ln],
.tlec-modal-field[b-med0ewu0ln]  .tlec-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .tlec-modal-input[b-med0ewu0ln]::placeholder,
    .tlec-modal-field[b-med0ewu0ln]  .tlec-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .tlec-modal-input:focus[b-med0ewu0ln],
    .tlec-modal-field[b-med0ewu0ln]  .tlec-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* El nombre del almacén ya resuelto, debajo de su código: «001» a secas no dice qué almacén es. */
.tlec-modal-resuelto[b-med0ewu0ln] {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
}

/* LOS INTERRUPTORES: una tarjeta por opción, con su explicación debajo del rótulo. */
.tlec-modal-toggles[b-med0ewu0ln] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tlec-modal-toggle[b-med0ewu0ln] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

    .tlec-modal-toggle input[type="checkbox"][b-med0ewu0ln] {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: #2563eb;
    }

    .tlec-modal-toggle span[b-med0ewu0ln] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .tlec-modal-toggle strong[b-med0ewu0ln] {
        font-size: 13px;
        font-weight: 850;
        color: #0f172a;
    }

    .tlec-modal-toggle small[b-med0ewu0ln] {
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
    }

/* EMPAREJAMIENTO: lo que se sabe del aparato (solo lectura) y lo que se le puede hacer. Separado del
   formulario con una línea: nada de aquí se guarda con «Guardar», cada botón es una orden aparte. */
.tlec-modal-seccion[b-med0ewu0ln] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.tlec-modal-seccion-titulo[b-med0ewu0ln] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

.tlec-modal-datos[b-med0ewu0ln] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

    .tlec-modal-datos div[b-med0ewu0ln] {
        min-width: 0;
    }

    .tlec-modal-datos dt[b-med0ewu0ln] {
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
    }

    .tlec-modal-datos dd[b-med0ewu0ln] {
        margin: 2px 0 0;
        font-size: 14px;
        color: #0f172a;
        overflow-wrap: anywhere;
    }

.tlec-modal-acciones[b-med0ewu0ln] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tlec-modal-accion[b-med0ewu0ln] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .tlec-modal-accion:hover:not(:disabled)[b-med0ewu0ln] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .tlec-modal-accion:focus-visible[b-med0ewu0ln] {
        outline: none;
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tlec-modal-accion:disabled[b-med0ewu0ln] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .tlec-modal-accion .material-symbols-rounded[b-med0ewu0ln] {
        font-size: 16px;
        line-height: 1;
    }

/* Retirar la credencial deja el aparato fuera de juego: en rojo, pero de contorno —la confirmación ya
   la pide el modal de borrado—. */
.tlec-modal-accion-peligro[b-med0ewu0ln] {
    color: #b91c1c;
    border-color: #fecaca;
}

    .tlec-modal-accion-peligro:hover:not(:disabled)[b-med0ewu0ln] {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #991b1b;
    }

/* EL PIE: salida y acción principal a la derecha, como en el resto de modales; «Borrar», el gesto
   destructivo, apartado a la izquierda para que no se pulse por inercia. */
.tlec-modal-actions[b-med0ewu0ln] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que el resto de modales de mantenimiento. */
.btn[b-med0ewu0ln] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover:not(:disabled)[b-med0ewu0ln] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active:not(:disabled)[b-med0ewu0ln] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .btn:disabled[b-med0ewu0ln] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-accept[b-med0ewu0ln] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover:not(:disabled)[b-med0ewu0ln] {
        background: #f3f4f6;
    }

.btn-cancel[b-med0ewu0ln] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover:not(:disabled)[b-med0ewu0ln] {
        background: #4b5563;
    }

.btn-danger[b-med0ewu0ln] {
    margin-right: auto;
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

    .btn-danger:hover:not(:disabled)[b-med0ewu0ln] {
        background: #fef2f2;
    }

/* Pantallas pequeñas: la ventana ocupa toda la pantalla y la rejilla pasa a una columna. El pie no se
   apila: los botones se reparten el ancho, lo gobierna `.modal-actions` en app.css. */
@media (max-width: 560px) {
    .tlec-modal-backdrop[b-med0ewu0ln] {
        padding: 0;
    }

    .tlec-modal-card[b-med0ewu0ln] {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .tlec-modal-grid[b-med0ewu0ln],
    .tlec-modal-datos[b-med0ewu0ln] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tlec-modal-field-ancho[b-med0ewu0ln] {
        grid-column: span 1;
    }

    .btn-danger[b-med0ewu0ln] {
        margin-right: 0;
    }
}
/* _content/ErpPowergest/Presentation/Canales/Terminales/TerminalesPage.razor.rz.scp.css */
/* VERIFICADOR Y STOCK (`/canales/terminales`) — cómo reparte SU alto y su ancho.

   El ASPECTO (tarjetas, campos, interruptores, botones, insignias y el juego de comandos) NO está
   aquí: sale de las dos hojas GLOBALES que ya carga `App.razor` —`css/tienda-web.css` (`tw-*`) y
   `css/catalogo-tablet.css` (`ctab-*`)—, que es de donde lo toma también la central de tablets.
   Aquí solo queda el cromo de ESTA pantalla: la fila de comandos, el panel que rueda y qué columnas
   caen al estrechar. Las fichas (ventanas modales) y el aviso del código de emparejamiento llevan su
   propia hoja, en `Components/`. */

   La raíz lleva tres clases y cada una aporta lo suyo: `tienda-web-page` (tokens y tarjeta, global)[b-kjmrj9qf3d],
   `ctab-page` (el aspecto del módulo, global) y `terminales-page` (esto). */

/* La página reparte el alto: la fila de comandos con su alto natural y el cuerpo con lo que sobra,
   que desplaza por dentro. Sin título: la pantalla ya la nombra el menú. */
.terminales-page[b-kjmrj9qf3d] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* LA FILA: vuelta al origen + comandos, con la línea de 1px cruzando el ancho completo.

   El reparto de ancho lo gobierna `js/commandBar.js` midiendo el desbordamiento de esta fila, así
   que su contenido NO puede envolver: si lo hiciera, la fila siempre «cabría» y la barra no se
   replegaría nunca. El hueco central es rígido en su mínimo y elástico hacia arriba, que es lo que
   empuja los comandos a la derecha sin falsear la medida. */
.terminales-barra[b-kjmrj9qf3d] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    border-bottom: 1px solid #e5e7eb;
}

.terminales-barra-hueco[b-kjmrj9qf3d] {
    flex: 1 1 auto;
    min-width: 0;
}

/* La vuelta al origen (N9) es otro componente y de fábrica mide 48px, que es justo lo que miden los
   comandos de esta fila. Rígida a propósito, por lo mismo que arriba. Sin «volver=» en la URL no
   pinta nada y no deja hueco. */
.terminales-barra[b-kjmrj9qf3d]  .volver-chip {
    flex: 0 0 auto;
    align-self: center;
}

/* Cuerpo: los dos bloques uno debajo de otro, y lo que no cabe se desplaza aquí dentro.

   El relleno lateral de 3 px no es decorativo: las tarjetas de dentro llevan sombra y este
   contenedor recorta en horizontal; sin ese margen la sombra se vería cortada a plomo. */
.terminales-body[b-kjmrj9qf3d] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 3px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .terminales-body[b-kjmrj9qf3d]::-webkit-scrollbar {
        width: 6px;
    }

    .terminales-body[b-kjmrj9qf3d]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* Los dos bloques valen lo que su contenido: aquí NO se reparte el alto sobrante entre ellos —son
   dos listas cortas que se leen seguidas— y la hoja global del módulo intenta lo contrario
   (`.tw-config-page { height: 100% }`). El selector lleva la clase de la página además de la del
   módulo (0,2,0 frente a 0,1,0) para ganarle también dentro de su `@media`. */
.terminales-page .tw-config-page[b-kjmrj9qf3d] {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
}

/* PANTALLA ESTRECHA: la página deja de estar acotada al alto visible y crece con su contenido, que
   lo desplaza `.main-body`. Conserva el suelo (`min-height: 100%`) para que una pantalla con un
   solo terminal no deje la tabla flotando a media altura. */
@media (max-width: 980px) {
    .terminales-page[b-kjmrj9qf3d] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .terminales-body[b-kjmrj9qf3d] {
        overflow-y: visible;
        min-height: auto;
    }
}

/* LA DIFERENCIA DE UN AJUSTE
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Color DISCRETO y no semáforo: bajar existencias es justo lo que se viene a mirar en este listado,
   pero no es un error ni una alarma —alguien contó y corrigió—. Si se pintara en rojo de aviso, la
   tabla entera parecería una lista de incidencias. Cifras tabulares para que los signos se alineen
   en columna y se lean de una pasada. */
.tlec-dif[b-kjmrj9qf3d] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tlec-dif-baja[b-kjmrj9qf3d] {
    color: #b45309;
}

.tlec-dif-sube[b-kjmrj9qf3d] {
    color: #15803d;
}

/* EL INSTALADOR
   ──────────────────────────────────────────────────────────────────────────────────────────────
   La descarga es un enlace normal (`<a download>`), no un botón de Blazor: va con la cookie de
   sesión a una ruta de API. Se le da el aspecto de botón primario del módulo, y por eso hay que
   devolverle el `display` y quitarle el subrayado que trae por ser un enlace. */
.tlec-instalador-descarga[b-kjmrj9qf3d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

    .tlec-instalador-descarga a[b-kjmrj9qf3d] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
    }

.tlec-instalador-ayuda[b-kjmrj9qf3d] {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

/* Publicar es cosa del técnico y se ve solo cuando lo es: se separa con una línea para que no se
   confunda con lo que mira todo el mundo, que es la descarga. */
.tlec-publicar[b-kjmrj9qf3d] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.tlec-publicar-titulo[b-kjmrj9qf3d] {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

/* El motivo del rechazo lo redacta el servicio; aquí solo se pinta como aviso y no como nota. */
.tlec-rechazo[b-kjmrj9qf3d] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

/* COLUMNAS REPLEGABLES
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Mismo mecanismo que la central de tablets y el listado de clientes: al estrechar caen primero las
   columnas que menos dicen, en vez de apretar todas hasta que el texto se parte. La clase la lleva
   la cabecera Y sus celdas (`ColumnaTabla.CssClass`), así que basta con ocultarla una vez; va con
   `::deep` porque el markup lo pinta <TablaPaginada>.

   Orden de caída en terminales: «Dispositivo» (un identificador de diagnóstico) → «Última conexión»
   → «Almacén». NUNCA cae «Terminal», que identifica la fila, ni «Estado», que es a lo que se viene
   a mirar. En el personal solo se repliega «Empleado», que es un enlace opcional. */
@media (max-width: 1180px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-dispositivo {
        display: none;
    }
}

@media (max-width: 1000px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-conexion,
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-empleado {
        display: none;
    }
}

@media (max-width: 820px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-almacen {
        display: none;
    }
}

/* Los ajustes son ocho columnas y es la tabla más ancha de la pantalla. Orden de caída: el almacén
   (casi siempre es el mismo), luego el terminal —quién lo hizo ya lo dice «Quién»— y por último
   «Había», que se deduce de «Dejó» y la diferencia. Nunca caen «Cuándo», «Quién», «Artículo» ni
   «Diferencia», que es a lo que se viene. */
@media (max-width: 1180px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-ajalmacen {
        display: none;
    }
}

@media (max-width: 1000px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-ajterminal {
        display: none;
    }
}

@media (max-width: 820px) {
    .terminales-page[b-kjmrj9qf3d]  .tlec-col-antes {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Citas/Components/CitaModal.razor.rz.scp.css */
/* El formulario de una cita (RV1): tarjeta centrada con radio 12, bloques separados por línea fina y los huecos libres
   como píldoras. El cuerpo se desplaza dentro de la tarjeta: con muchos servicios o huecos no se sale de la pantalla. */

.cm-fondo[b-rwk7a41w8r] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
}

.cm-tarjeta[b-rwk7a41w8r] {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.cm-cabecera[b-rwk7a41w8r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.cm-titulo[b-rwk7a41w8r] {
    font-size: 1.15rem;
    font-weight: 600;
}

.cm-cerrar[b-rwk7a41w8r],
.cm-boton-icono[b-rwk7a41w8r] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.cm-cerrar:hover[b-rwk7a41w8r],
.cm-boton-icono:hover[b-rwk7a41w8r] {
    background: #eff6ff;
    color: #2563eb;
}

.cm-estado[b-rwk7a41w8r] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
}

.cm-estado--llegada[b-rwk7a41w8r] { background: #fffbeb; color: #b45309; }
.cm-estado--atendida[b-rwk7a41w8r] { background: #ecfdf5; color: #047857; }
.cm-estado--nopresentada[b-rwk7a41w8r] { background: #fef2f2; color: #b91c1c; }
.cm-estado--cancelada[b-rwk7a41w8r] { background: #f3f4f6; color: #4b5563; }
.cm-estado--solicitada[b-rwk7a41w8r] { background: #f5f3ff; color: #6d28d9; }

.cm-cuerpo[b-rwk7a41w8r] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 18px 12px;
}

.cm-bloque[b-rwk7a41w8r] {
    padding: 12px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.cm-bloque:last-child[b-rwk7a41w8r] {
    border-bottom: none;
}

.cm-subtitulo[b-rwk7a41w8r] {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--texto-secundario, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cm-destinatario[b-rwk7a41w8r] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.cm-opcion[b-rwk7a41w8r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.88rem;
    cursor: pointer;
}

.cm-opcion--activa[b-rwk7a41w8r] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.cm-rejilla[b-rwk7a41w8r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 14px;
}

.cm-campo[b-rwk7a41w8r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cm-campo label[b-rwk7a41w8r],
.cm-bloque[b-rwk7a41w8r]  .cm-campo label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-secundario, #6b7280);
}

.cm-input[b-rwk7a41w8r],
.cm-bloque[b-rwk7a41w8r]  .cm-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

.cm-notas[b-rwk7a41w8r] {
    height: auto;
    min-height: 56px;
    padding: 8px 10px;
    resize: vertical;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, borde y radio. */
.cm-select[b-rwk7a41w8r] {
    height: 34px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.cm-dato[b-rwk7a41w8r] {
    line-height: 34px;
    font-weight: 600;
}

.cm-servicios[b-rwk7a41w8r] {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.cm-servicios li[b-rwk7a41w8r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.cm-servicio-nombre[b-rwk7a41w8r] {
    flex: 1 1 auto;
}

.cm-servicio-duracion[b-rwk7a41w8r] {
    color: var(--texto-secundario, #6b7280);
    font-size: 0.85rem;
}

.cm-huecos[b-rwk7a41w8r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 132px;
    margin-top: 10px;
    overflow-y: auto;
}

.cm-hueco[b-rwk7a41w8r] {
    padding: 4px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #047857;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.cm-hueco--elegido[b-rwk7a41w8r] {
    border-color: #047857;
    background: #047857;
    color: #fff;
}

.cm-nota[b-rwk7a41w8r] {
    margin: 8px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.cm-avisos[b-rwk7a41w8r] {
    display: flex;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.9rem;
}

.cm-pie[b-rwk7a41w8r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--borde, #e5e7eb);
}

.cm-estados[b-rwk7a41w8r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
}

.cm-boton[b-rwk7a41w8r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cm-boton .material-symbols-rounded[b-rwk7a41w8r] {
    font-size: 18px;
}

.cm-boton:disabled[b-rwk7a41w8r] {
    opacity: 0.5;
    cursor: default;
}

.cm-boton--primario[b-rwk7a41w8r] { border-color: #2563eb; background: #2563eb; color: #fff; }
.cm-boton--secundario[b-rwk7a41w8r] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }
.cm-boton--suave[b-rwk7a41w8r] { margin-top: 2px; }
.cm-boton--aviso[b-rwk7a41w8r] { margin-top: 8px; border-color: #d97706; background: #d97706; color: #fff; }
.cm-boton--estado[b-rwk7a41w8r] { height: 30px; padding: 0 10px; font-size: 0.85rem; }
.cm-boton--cancelada[b-rwk7a41w8r],
.cm-boton--nopresentada[b-rwk7a41w8r] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.cm-boton--atendida[b-rwk7a41w8r] { border-color: #bbf7d0; background: #f0fdf4; color: #047857; }

/* RV6: el cobro de la cita (ticket, factura o parte). */
.cm-cobro-acciones[b-rwk7a41w8r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cm-boton--cobro[b-rwk7a41w8r] { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }

.cm-cobro-hecho[b-rwk7a41w8r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #065f46;
    font-size: 0.9rem;
}

.cm-cobro-hecho > span:nth-child(2)[b-rwk7a41w8r] { flex: 1; }

.cm-casilla[b-rwk7a41w8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/Citas/Components/CitasFichaPanel.razor.rz.scp.css */
/* RV6: la pestaña «Citas» de las fichas de cliente y de contacto. */
.cfp[b-lp8r8uh93r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cfp-cabecera[b-lp8r8uh93r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cfp-titulo[b-lp8r8uh93r] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.cfp-boton[b-lp8r8uh93r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cfp-boton .material-symbols-rounded[b-lp8r8uh93r] { font-size: 18px; }

.cfp-grupo[b-lp8r8uh93r] {
    margin: 8px 0 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.cfp-lista[b-lp8r8uh93r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.cfp-fila[b-lp8r8uh93r] {
    display: grid;
    grid-template-columns: 170px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.9rem;
    cursor: pointer;
}

.cfp-fila:hover[b-lp8r8uh93r] { background: #eff6ff; }

.cfp-fecha[b-lp8r8uh93r] {
    font-variant-numeric: tabular-nums;
    color: #334155;
    white-space: nowrap;
}

.cfp-servicios[b-lp8r8uh93r] {
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfp-estado[b-lp8r8uh93r] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cfp-estado--atendida[b-lp8r8uh93r] { background: #dcfce7; color: #166534; }
.cfp-estado--cancelada[b-lp8r8uh93r],
.cfp-estado--nopresentada[b-lp8r8uh93r] { background: #fee2e2; color: #991b1b; }
.cfp-estado--llegada[b-lp8r8uh93r] { background: #fef3c7; color: #92400e; }

.cfp-doc[b-lp8r8uh93r] {
    color: #047857;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cfp-doc:hover[b-lp8r8uh93r] { text-decoration: underline; }

.cfp-nota[b-lp8r8uh93r] {
    margin: 4px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .cfp-fila[b-lp8r8uh93r] { grid-template-columns: 1fr auto; }
    .cfp-servicios[b-lp8r8uh93r] { grid-column: 1 / -1; }
}
/* _content/ErpPowergest/Presentation/Citas/Pages/AgendaPage.razor.rz.scp.css */
/* La agenda (RV1): cabecera con icono, el conmutador por profesional / por recurso y la agenda a todo el alto que
   queda. Las cajitas de cita se colorean por estado; el color de cada fila lo pone Syncfusion desde el recurso. */

.ag-page[b-mkq7u2qdxi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.ag-cabecera[b-mkq7u2qdxi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.ag-cabecera-icono[b-mkq7u2qdxi] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ag-cabecera-textos[b-mkq7u2qdxi] {
    flex: 1 1 260px;
}

.ag-titulo[b-mkq7u2qdxi] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ag-lema[b-mkq7u2qdxi] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ag-acciones[b-mkq7u2qdxi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ag-vista[b-mkq7u2qdxi] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 10px;
    background: #f9fafb;
}

.ag-vista-boton[b-mkq7u2qdxi] {
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ag-vista-boton--activa[b-mkq7u2qdxi] {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.ag-boton[b-mkq7u2qdxi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ag-boton .material-symbols-rounded[b-mkq7u2qdxi] {
    font-size: 18px;
}

.ag-boton--primario[b-mkq7u2qdxi] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ag-boton--aviso[b-mkq7u2qdxi] { border-color: #d97706; background: #d97706; color: #fff; }

.ag-aviso[b-mkq7u2qdxi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
}

.ag-aviso-texto[b-mkq7u2qdxi] {
    flex: 1 1 240px;
}

.ag-error[b-mkq7u2qdxi] {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
}

.ag-vacio[b-mkq7u2qdxi] {
    display: flex;
    gap: 14px;
    padding: 24px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 12px;
    color: var(--texto-secundario, #6b7280);
}

.ag-vacio .material-symbols-rounded[b-mkq7u2qdxi] {
    font-size: 32px;
}

.ag-vacio p[b-mkq7u2qdxi] {
    margin: 4px 0 8px;
}

.ag-enlace[b-mkq7u2qdxi] {
    color: #2563eb;
    font-weight: 600;
}

.ag-cuerpo[b-mkq7u2qdxi] {
    flex: 1 1 auto;
    min-height: 480px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fondo-tarjeta, #fff);
}

.ag-evento[b-mkq7u2qdxi] {
    display: flex;
    gap: 6px;
    height: 100%;
    padding: 2px 4px;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.25;
}

.ag-evento-hora[b-mkq7u2qdxi] {
    font-weight: 700;
}

.ag-evento-texto[b-mkq7u2qdxi] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-evento--llegada[b-mkq7u2qdxi] { box-shadow: inset 4px 0 0 #fbbf24; }
.ag-evento--atendida[b-mkq7u2qdxi] { opacity: 0.65; }
.ag-evento--nopresentada[b-mkq7u2qdxi] { opacity: 0.55; text-decoration: line-through; }
.ag-evento--solicitada[b-mkq7u2qdxi] { font-style: italic; }
/* _content/ErpPowergest/Presentation/Citas/Pages/BonosPage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-seltu6f1ps] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-seltu6f1ps] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-seltu6f1ps] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-seltu6f1ps] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-seltu6f1ps],
.ma-nota[b-seltu6f1ps] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-seltu6f1ps] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-seltu6f1ps] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-seltu6f1ps] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-seltu6f1ps] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-seltu6f1ps] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-seltu6f1ps] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-seltu6f1ps] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-seltu6f1ps] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-seltu6f1ps] {
    opacity: 0.6;
}

.ma-col-casilla[b-seltu6f1ps] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-seltu6f1ps] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-seltu6f1ps] {
    width: 110px;
}

.ma-input[b-seltu6f1ps] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-seltu6f1ps] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-seltu6f1ps] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-seltu6f1ps] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-seltu6f1ps] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-seltu6f1ps] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-seltu6f1ps] {
    font-size: 18px;
}

.ma-boton:disabled[b-seltu6f1ps] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-seltu6f1ps] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-seltu6f1ps] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-seltu6f1ps] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-seltu6f1ps] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-seltu6f1ps] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-seltu6f1ps] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-seltu6f1ps] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-seltu6f1ps] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-seltu6f1ps] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-seltu6f1ps] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-seltu6f1ps] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-seltu6f1ps] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-seltu6f1ps] {
    width: 110px;
}

/* RV8: bonos de sesiones. */
.bo-subtitulo[b-seltu6f1ps] { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.bo-casilla[b-seltu6f1ps] { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }
.bo-filtro[b-seltu6f1ps], .bo-alta[b-seltu6f1ps] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 10px 0; }
.bo-alta[b-seltu6f1ps] { padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.bo-campo[b-seltu6f1ps] { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.bo-campo label[b-seltu6f1ps] { font-size: 0.82rem; font-weight: 600; color: #475569; }
.bo-campo--ancho[b-seltu6f1ps] { flex: 1; min-width: 240px; }
.bo-lista[b-seltu6f1ps] { max-height: 420px; overflow-y: auto; }
.bo-chip[b-seltu6f1ps] { padding: 2px 8px; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: 0.78rem; font-weight: 600; }
/* _content/ErpPowergest/Presentation/Citas/Pages/EsperaAgendaPage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-iax7p5x1bq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-iax7p5x1bq] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-iax7p5x1bq] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-iax7p5x1bq] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-iax7p5x1bq],
.ma-nota[b-iax7p5x1bq] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-iax7p5x1bq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-iax7p5x1bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-iax7p5x1bq] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-iax7p5x1bq] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-iax7p5x1bq] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-iax7p5x1bq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-iax7p5x1bq] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-iax7p5x1bq] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-iax7p5x1bq] {
    opacity: 0.6;
}

.ma-col-casilla[b-iax7p5x1bq] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-iax7p5x1bq] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-iax7p5x1bq] {
    width: 110px;
}

.ma-input[b-iax7p5x1bq] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-iax7p5x1bq] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-iax7p5x1bq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-iax7p5x1bq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-iax7p5x1bq] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-iax7p5x1bq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-iax7p5x1bq] {
    font-size: 18px;
}

.ma-boton:disabled[b-iax7p5x1bq] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-iax7p5x1bq] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-iax7p5x1bq] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-iax7p5x1bq] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-iax7p5x1bq] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-iax7p5x1bq] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-iax7p5x1bq] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-iax7p5x1bq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-iax7p5x1bq] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-iax7p5x1bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-iax7p5x1bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-iax7p5x1bq] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-iax7p5x1bq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-iax7p5x1bq] {
    width: 110px;
}

/* RV5: el alta de la lista de espera, en una fila que se reparte. Los campos con lupa los pinta CampoCodigo (otro componente):
   su clase llega sin el atributo de esta hoja, de ahí ::deep. */
.ma-espera-alta[b-iax7p5x1bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.ma-espera-quien[b-iax7p5x1bq] {
    display: flex;
    gap: 6px;
    width: 100%;
}

.ma-espera-alta[b-iax7p5x1bq]  .ma-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    font-size: 12px;
    color: #475569;
}

.ma-espera-alta[b-iax7p5x1bq]  .ma-campo--ancho {
    flex: 1 1 240px;
}
/* _content/ErpPowergest/Presentation/Citas/Pages/HorariosAgendaPage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-8e8noj0oup] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-8e8noj0oup] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-8e8noj0oup] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-8e8noj0oup] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-8e8noj0oup],
.ma-nota[b-8e8noj0oup] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-8e8noj0oup] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-8e8noj0oup] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-8e8noj0oup] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-8e8noj0oup] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-8e8noj0oup] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-8e8noj0oup] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-8e8noj0oup] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-8e8noj0oup] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-8e8noj0oup] {
    opacity: 0.6;
}

.ma-col-casilla[b-8e8noj0oup] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-8e8noj0oup] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-8e8noj0oup] {
    width: 110px;
}

.ma-input[b-8e8noj0oup] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-8e8noj0oup] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-8e8noj0oup] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-8e8noj0oup] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-8e8noj0oup] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-8e8noj0oup] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-8e8noj0oup] {
    font-size: 18px;
}

.ma-boton:disabled[b-8e8noj0oup] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-8e8noj0oup] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-8e8noj0oup] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-8e8noj0oup] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-8e8noj0oup] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-8e8noj0oup] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-8e8noj0oup] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-8e8noj0oup] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-8e8noj0oup] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-8e8noj0oup] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-8e8noj0oup] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-8e8noj0oup] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-8e8noj0oup] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-8e8noj0oup] {
    width: 110px;
}
/* _content/ErpPowergest/Presentation/Citas/Pages/RecursosAgendaPage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-lp6mnja4et] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-lp6mnja4et] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-lp6mnja4et] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-lp6mnja4et] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-lp6mnja4et],
.ma-nota[b-lp6mnja4et] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-lp6mnja4et] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-lp6mnja4et] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-lp6mnja4et] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-lp6mnja4et] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-lp6mnja4et] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-lp6mnja4et] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-lp6mnja4et] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-lp6mnja4et] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-lp6mnja4et] {
    opacity: 0.6;
}

.ma-col-casilla[b-lp6mnja4et] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-lp6mnja4et] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-lp6mnja4et] {
    width: 110px;
}

.ma-input[b-lp6mnja4et] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-lp6mnja4et] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-lp6mnja4et] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-lp6mnja4et] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-lp6mnja4et] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-lp6mnja4et] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-lp6mnja4et] {
    font-size: 18px;
}

.ma-boton:disabled[b-lp6mnja4et] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-lp6mnja4et] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-lp6mnja4et] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-lp6mnja4et] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-lp6mnja4et] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-lp6mnja4et] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-lp6mnja4et] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-lp6mnja4et] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-lp6mnja4et] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-lp6mnja4et] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-lp6mnja4et] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-lp6mnja4et] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-lp6mnja4et] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-lp6mnja4et] {
    width: 110px;
}
/* _content/ErpPowergest/Presentation/Citas/Pages/ReservaOnlinePage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-bqiixikr08] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-bqiixikr08] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-bqiixikr08] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-bqiixikr08] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-bqiixikr08],
.ma-nota[b-bqiixikr08] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-bqiixikr08] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-bqiixikr08] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-bqiixikr08] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-bqiixikr08] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-bqiixikr08] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-bqiixikr08] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-bqiixikr08] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-bqiixikr08] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-bqiixikr08] {
    opacity: 0.6;
}

.ma-col-casilla[b-bqiixikr08] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-bqiixikr08] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-bqiixikr08] {
    width: 110px;
}

.ma-input[b-bqiixikr08] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-bqiixikr08] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-bqiixikr08] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-bqiixikr08] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-bqiixikr08] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-bqiixikr08] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-bqiixikr08] {
    font-size: 18px;
}

.ma-boton:disabled[b-bqiixikr08] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-bqiixikr08] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-bqiixikr08] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-bqiixikr08] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-bqiixikr08] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-bqiixikr08] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-bqiixikr08] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-bqiixikr08] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-bqiixikr08] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-bqiixikr08] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-bqiixikr08] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-bqiixikr08] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-bqiixikr08] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-bqiixikr08] {
    width: 110px;
}

/* RV7: las puertas de reserva por internet. */
.ro-aviso[b-bqiixikr08] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.9rem;
}

.ro-canal[b-bqiixikr08] {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
}

.ro-canal--inactivo[b-bqiixikr08] { opacity: 0.65; }

.ro-rejilla[b-bqiixikr08] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: end;
}

.ro-campo[b-bqiixikr08] { display: flex; flex-direction: column; gap: 4px; }
.ro-campo label[b-bqiixikr08] { font-size: 0.82rem; font-weight: 600; color: #475569; }
.ro-campo--ancho[b-bqiixikr08] { grid-column: span 2; }
.ro-campo--entero[b-bqiixikr08] { grid-column: 1 / -1; }
.ro-texto[b-bqiixikr08] { resize: vertical; min-height: 54px; }

.ro-casilla[b-bqiixikr08] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.ro-publicar[b-bqiixikr08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
}

.ro-copiar[b-bqiixikr08] {
    display: grid;
    grid-template-columns: 220px 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.ro-copiar-rotulo[b-bqiixikr08] { font-size: 0.82rem; font-weight: 600; color: #475569; }

.ro-copiar code[b-bqiixikr08] {
    overflow: hidden;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-acciones[b-bqiixikr08] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ro-quitar[b-bqiixikr08] { color: #b91c1c; }

@media (max-width: 760px) {
    .ro-rejilla[b-bqiixikr08] { grid-template-columns: 1fr 1fr; }
    .ro-copiar[b-bqiixikr08] { grid-template-columns: 1fr auto auto; }
    .ro-copiar-rotulo[b-bqiixikr08] { grid-column: 1 / -1; }
}
/* _content/ErpPowergest/Presentation/Citas/Pages/ServiciosAgendaPage.razor.rz.scp.css */
/* Fichas de la agenda (recursos, servicios, horarios, RV1): el estilo de las pantallas nuevas —cabecera con icono,
   tarjetas con radio 12— y las listas con su propio desplazamiento, para que la página no crezca sin fin. Las tres
   fichas comparten estas reglas (cada una lleva su copia: el CSS de una página no llega a otra). */

.ma-page[b-0w9fbjb0ic] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    box-sizing: border-box;
}

.ma-cabecera[b-0w9fbjb0ic] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ma-cabecera-icono[b-0w9fbjb0ic] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #2563eb;
    font-size: 26px;
}

.ma-titulo[b-0w9fbjb0ic] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.ma-lema[b-0w9fbjb0ic],
.ma-nota[b-0w9fbjb0ic] {
    margin: 2px 0 0;
    color: var(--texto-secundario, #6b7280);
    font-size: 0.88rem;
}

.ma-tarjeta[b-0w9fbjb0ic] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 12px;
    background: var(--fondo-tarjeta, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ma-tarjeta-cabecera[b-0w9fbjb0ic] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ma-tarjeta-titulo[b-0w9fbjb0ic] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.ma-vacio[b-0w9fbjb0ic] {
    padding: 14px;
    border: 1px dashed var(--borde, #e5e7eb);
    border-radius: 10px;
    color: var(--texto-secundario, #6b7280);
}

.ma-tabla-wrap[b-0w9fbjb0ic] {
    max-height: 520px;
    overflow: auto;
}

.ma-tabla[b-0w9fbjb0ic] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabla th[b-0w9fbjb0ic] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    background: var(--fondo-tarjeta, #fff);
    color: var(--texto-secundario, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.ma-tabla td[b-0w9fbjb0ic] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--borde, #e5e7eb);
    vertical-align: middle;
}

.ma-fila-inactiva td[b-0w9fbjb0ic] {
    opacity: 0.6;
}

.ma-col-casilla[b-0w9fbjb0ic] {
    width: 70px;
    text-align: center;
}

.ma-col-accion[b-0w9fbjb0ic] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.ma-col-numero[b-0w9fbjb0ic] {
    width: 110px;
}

.ma-input[b-0w9fbjb0ic] {
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo alto, ancho, borde y radio. */
.ma-select[b-0w9fbjb0ic] {
    width: 100%;
    min-width: 140px;
    height: 32px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
}

.ma-chips[b-0w9fbjb0ic] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ma-chip[b-0w9fbjb0ic] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}

.ma-chip--activo[b-0w9fbjb0ic] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ma-boton[b-0w9fbjb0ic] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ma-boton .material-symbols-rounded[b-0w9fbjb0ic] {
    font-size: 18px;
}

.ma-boton:disabled[b-0w9fbjb0ic] {
    opacity: 0.5;
    cursor: default;
}

.ma-boton--primario[b-0w9fbjb0ic] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ma-boton--secundario[b-0w9fbjb0ic] { border-color: var(--borde, #e5e7eb); background: #fff; color: inherit; }

.ma-boton-icono[b-0w9fbjb0ic] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto-secundario, #6b7280);
    cursor: pointer;
}

.ma-boton-icono .material-symbols-rounded[b-0w9fbjb0ic] {
    font-size: 18px;
}

.ma-boton-icono:hover[b-0w9fbjb0ic] {
    background: #eff6ff;
    color: #2563eb;
}

.ma-boton-icono--peligro:hover[b-0w9fbjb0ic] {
    background: #fef2f2;
    color: #b91c1c;
}

.ma-pie[b-0w9fbjb0ic] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ma-pie-aviso[b-0w9fbjb0ic] {
    margin-right: auto;
    color: #b45309;
    font-size: 0.88rem;
}

.ma-selector[b-0w9fbjb0ic] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ma-dia[b-0w9fbjb0ic] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.ma-dia-nombre[b-0w9fbjb0ic] {
    width: 100px;
    font-weight: 600;
}

.ma-tramo[b-0w9fbjb0ic] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ma-tramo .ma-input[b-0w9fbjb0ic] {
    width: 110px;
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/Conciliacion/ConciliacionWorkbenchView.razor.rz.scp.css */
/* PUESTO DE CONCILIACIÓN BANCARIA (B8). Prefijo `cw-`.

   Hoja AUTÓNOMA: todo lo que pinta la vista está declarado aquí. Antes tomaba prestadas clases de
   otras pantallas (`cobros-*`, `cb-*`, `cd-*`, `mb-*`), pero el CSS de Blazor es aislado por
   componente y esas reglas no llegaban: filtros, insignias, avisos e importes salían sin estilo.

   Vocabulario visual: el de los listados (Órdenes de fabricación, Partes de servicio): mismos tokens de
   medida, misma cabecera con CommandBar, mismos campos, insignias y tarjetas. */

.cw-page[b-6yxmmz3do6],
.cw-page *[b-6yxmmz3do6],
.cw-page *[b-6yxmmz3do6]::before,
.cw-page *[b-6yxmmz3do6]::after {
    box-sizing: border-box;
}

.cw-page[b-6yxmmz3do6] {
    --cw-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --cw-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --cw-panel-pad: clamp(0.85rem, 1.1vw, 1.1rem);
    --cw-radius: clamp(0.75rem, 0.85vw, 1rem);
    --cw-radius-sm: clamp(0.55rem, 0.5rem + 0.2vw, 0.75rem);
    --cw-field-block: clamp(2.35rem, 3.8dvh, 2.6rem);
    --cw-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --cw-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.05rem);
    --cw-font-text: clamp(0.78rem, 0.73rem + 0.18vw, 0.88rem);
    --cw-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --cw-line: #e5e7eb;
    --cw-line-soft: #eef2f7;
    --cw-text: #1f2937;
    --cw-muted: #6b7280;
    --cw-accent: #2563eb;
    --cw-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body— y a partir de ahí la página
       crece con su contenido (mismo criterio que Clientes). Nada de `height: 100%` + `overflow: hidden`:
       si los paneles no caben, la página se alarga y el scroll lo lleva .main-body.
       Columna flexible y no rejilla con filas fijas porque los dos avisos son condicionales: sin ellos
       no hay elemento, y una lista de filas fija dejaría huecos o estiraría la fila equivocada. */
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cw-gap);
    color: var(--cw-text);
    font-size: var(--cw-font-text);
    /* Sin `animation-fill-mode: both`: conservar el último fotograma deja un `transform` en la página, y
       eso la convierte en bloque contenedor de lo `position: fixed` (el desplegable «···» del CommandBar
       y su fondo quedarían recortados a la página en vez de a la ventana). */
    animation: cwPageIn-b-6yxmmz3do6 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.cw-heading[b-6yxmmz3do6],
.cw-kpis[b-6yxmmz3do6],
.cw-layout[b-6yxmmz3do6],
.cw-panel[b-6yxmmz3do6] {
    min-inline-size: 0;
}

/* Cabecera, KPIs y avisos miden lo que su contenido; nunca se encogen para dejar sitio. */
.cw-page > *[b-6yxmmz3do6] {
    flex: 0 0 auto;
}

/* CABECERA */

.cw-heading[b-6yxmmz3do6] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cw-gap);
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .cw-heading > div:first-child[b-6yxmmz3do6] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .cw-heading.command-bar-host-collapsed > div:first-child[b-6yxmmz3do6] {
        flex: 1 1 auto;
    }

.cw-title[b-6yxmmz3do6] {
    margin: 0;
    font-size: var(--cw-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: var(--cw-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.cw-subtitle[b-6yxmmz3do6] {
    margin-block-start: 0.25rem;
    font-size: var(--cw-font-text);
    color: var(--cw-muted);
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.cw-heading.command-bar-host-collapsed .cw-title[b-6yxmmz3do6],
.cw-heading.command-bar-host-collapsed .cw-subtitle[b-6yxmmz3do6] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* KPIs: el tablero es otro componente; solo se le pide que ocupe el ancho. */

.cw-kpis[b-6yxmmz3do6] {
    inline-size: 100%;
}

    .cw-kpis[b-6yxmmz3do6]  .kpi-board,
    .cw-kpis[b-6yxmmz3do6]  .kpi-board__grid {
        inline-size: 100%;
        max-inline-size: 100%;
    }

/* AVISOS (los textos los da Application; aquí solo se pintan) */

.cw-banner[b-6yxmmz3do6] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding-block: 0.65rem;
    padding-inline: 0.9rem;
    border-radius: var(--cw-radius-sm);
    border: 0.0625rem solid transparent;
    font-size: var(--cw-font-text);
    line-height: 1.45;
}

.cw-banner-ico[b-6yxmmz3do6] {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.25;
}

.cw-banner--error[b-6yxmmz3do6] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.cw-banner--ok[b-6yxmmz3do6] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* REPARTO: cola a la izquierda, resolución a la derecha */

/* La zona de paneles es la pieza elástica: se queda con todo el alto que sobra (`flex-grow`) y, si su
   contenido pide más, crece y empuja la página (`flex-basis: auto`, sin encoger). Los dos paneles se
   estiran al alto de la fila, así que siempre llegan juntos hasta abajo. */
.cw-page > .cw-layout[b-6yxmmz3do6] {
    flex: 1 0 auto;
}

.cw-layout[b-6yxmmz3do6] {
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    gap: var(--cw-gap);
    align-items: stretch;
}

.cw-panel[b-6yxmmz3do6] {
    display: flex;
    flex-direction: column;
    gap: var(--cw-inner-gap);
    padding: var(--cw-panel-pad);
    border: 0.0625rem solid var(--cw-line);
    border-radius: var(--cw-radius);
    background: #ffffff;
    box-shadow: var(--cw-shadow);
}

.cw-panel-head[b-6yxmmz3do6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cw-inner-gap);
}

.cw-panel-title[b-6yxmmz3do6] {
    font-size: var(--cw-font-panel-title);
    font-weight: 850;
    color: var(--cw-text);
}

.cw-contador[b-6yxmmz3do6] {
    min-inline-size: 1.7rem;
    padding-block: 0.1rem;
    padding-inline: 0.5rem;
    border-radius: 999rem;
    background: #f1f5f9;
    color: #475569;
    font-size: var(--cw-font-small);
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* CAMPOS (mismo aspecto que los filtros de los listados) */

.cw-filters[b-6yxmmz3do6] {
    display: grid;
    gap: 0.45rem;
}

.cw-select[b-6yxmmz3do6],
.cw-input[b-6yxmmz3do6] {
    inline-size: 100%;
    min-block-size: var(--cw-field-block);
    padding-block: 0;
    padding-inline: 0.85rem;
    border: 0.0625rem solid #dbe2ea;
    border-radius: var(--cw-radius-sm);
    background: #ffffff;
    font: inherit;
    font-size: var(--cw-font-text);
    color: var(--cw-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cw-select[b-6yxmmz3do6] {
    cursor: pointer;
}

.cw-input[b-6yxmmz3do6]::placeholder {
    color: #9ca3af;
}

.cw-select:focus[b-6yxmmz3do6],
.cw-input:focus[b-6yxmmz3do6] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* COLA DE TRABAJO */

.cw-cola-list[b-6yxmmz3do6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Sin scroll propio: si la cola es larga, alarga el panel y desplaza la página entera. */
}

.cw-cola-item[b-6yxmmz3do6] {
    display: grid;
    gap: 0.3rem;
    padding-block: 0.6rem;
    padding-inline: 0.75rem;
    border: 0.0625rem solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: #ffffff;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

    .cw-cola-item:hover[b-6yxmmz3do6] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cw-cola-item--sel[b-6yxmmz3do6],
.cw-cola-item--sel:hover[b-6yxmmz3do6] {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: inset 0.2rem 0 0 var(--cw-accent);
}

.cw-cola-item-top[b-6yxmmz3do6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cw-fecha[b-6yxmmz3do6] {
    color: var(--cw-muted);
    font-size: var(--cw-font-small);
    font-variant-numeric: tabular-nums;
}

.cw-cola-item-desc[b-6yxmmz3do6] {
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-cola-item .cw-badge[b-6yxmmz3do6] {
    justify-self: start;
}

/* ESTADOS VACÍOS */

.cw-vacio[b-6yxmmz3do6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-block: 1.5rem;
    padding-inline: 1rem;
    color: var(--cw-muted);
    text-align: center;
    line-height: 1.45;
}

/* Un estado vacío ocupa el resto del panel y queda centrado en él, no pegado arriba. */
.cw-panel > .cw-vacio[b-6yxmmz3do6] {
    flex: 1 1 auto;
}

.cw-vacio--alto[b-6yxmmz3do6] {
    min-block-size: 12rem;
}

.cw-vacio-ico[b-6yxmmz3do6] {
    font-size: 1.9rem;
    color: #cbd5e1;
}

/* INSIGNIAS DE ESTADO (mismos colores que los listados) */

.cw-badge[b-6yxmmz3do6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5.4rem;
    min-block-size: 1.45rem;
    padding-block: 0.15rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    border: 0.0625rem solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.cw-badge--green[b-6yxmmz3do6] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cw-badge--blue[b-6yxmmz3do6] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.cw-badge--orange[b-6yxmmz3do6] {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fed7aa;
}

.cw-badge--red[b-6yxmmz3do6] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* IMPORTES */

.cw-importe[b-6yxmmz3do6] {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cw-importe--pos[b-6yxmmz3do6] {
    color: #15803d;
}

.cw-importe--neg[b-6yxmmz3do6] {
    color: #b91c1c;
}

/* DETALLE DE LA LÍNEA: rótulo encima, valor debajo (como los campos de las fichas) */

.cw-linea-info[b-6yxmmz3do6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--cw-radius-sm);
    background: #f8fafc;
    border: 0.0625rem solid var(--cw-line-soft);
}

/* `align-content: start`: si el vecino de fila ocupa dos renglones, el valor sigue pegado a su rótulo. */
.cw-dato[b-6yxmmz3do6] {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    min-inline-size: 0;
}

    .cw-dato dt[b-6yxmmz3do6] {
        font-size: var(--cw-font-small);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
    }

    .cw-dato dd[b-6yxmmz3do6] {
        margin: 0;
        color: var(--cw-text);
        overflow-wrap: anywhere;
    }

.cw-full[b-6yxmmz3do6] {
    grid-column: 1 / -1;
}

.cw-audit dd[b-6yxmmz3do6] {
    color: #475569;
}

/* BLOQUES DE RESOLUCIÓN */

.cw-block[b-6yxmmz3do6] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-block-start: var(--cw-inner-gap);
    border-block-start: 0.0625rem solid var(--cw-line);
}

.cw-block--destacado[b-6yxmmz3do6] {
    padding: 0.85rem;
    border: 0.0625rem solid #bfdbfe;
    border-radius: var(--cw-radius-sm);
    background: #f5f9ff;
}

.cw-block-title[b-6yxmmz3do6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-weight: 800;
    color: var(--cw-text);
}

.cw-block-ico[b-6yxmmz3do6] {
    font-size: 1.1rem;
    color: var(--cw-accent);
}

.cw-meta[b-6yxmmz3do6] {
    color: var(--cw-muted);
    font-size: var(--cw-font-small);
}

.cw-sin-resultados[b-6yxmmz3do6] {
    padding-block: 0.35rem;
}

.cw-cand[b-6yxmmz3do6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.5rem;
    padding-inline: 0.65rem;
    border: 0.0625rem solid var(--cw-line-soft);
    border-radius: var(--cw-radius-sm);
    background: #ffffff;
    transition: border-color 0.14s ease, background 0.14s ease;
}

    .cw-cand:hover[b-6yxmmz3do6] {
        border-color: #cbd5e1;
        background: #fbfdff;
    }

.cw-cand-texto[b-6yxmmz3do6] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.cw-search-row[b-6yxmmz3do6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

    .cw-search-row .cw-input[b-6yxmmz3do6] {
        flex: 1 1 14rem;
        inline-size: auto;
    }

    /* Teclado de serie: el texto va dentro de su ancla (CampoTeclado, componente hijo: el CSS aislado solo
       le llega con ::deep). El ancla es la que se estira en la fila; el texto la llena. */
    .cw-search-row[b-6yxmmz3do6]  .cw-search-campo {
        flex: 1 1 14rem;
        display: flex;
        min-inline-size: 0;
    }

.cw-grupo[b-6yxmmz3do6] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cw-actions[b-6yxmmz3do6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cw-neto[b-6yxmmz3do6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.5rem;
    padding-inline: 0.65rem;
    border-radius: var(--cw-radius-sm);
    background: #f8fafc;
}

/* CONFIRMACIONES: ámbar, porque mueven dinero y hay que leerlas antes de pulsar */

.cw-confirm[b-6yxmmz3do6] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem;
    border: 0.0625rem solid #fde68a;
    border-radius: var(--cw-radius-sm);
    background: #fffbeb;
    color: #92400e;
}

.cw-confirm--neutro[b-6yxmmz3do6] {
    border-color: var(--cw-line);
    background: #f8fafc;
    color: var(--cw-text);
}

.cw-confirm-texto[b-6yxmmz3do6] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.45;
}

.cw-confirm-ico[b-6yxmmz3do6] {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.25;
}

/* LIQUIDACIÓN */

.cw-liq-cuadre[b-6yxmmz3do6] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.cw-cifra[b-6yxmmz3do6] {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.4rem;
    padding-inline: 0.7rem;
    border: 0.0625rem solid var(--cw-line-soft);
    border-radius: var(--cw-radius-sm);
    background: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.cw-cifra-lbl[b-6yxmmz3do6] {
    font-size: var(--cw-font-small);
    color: var(--cw-muted);
}

.cw-liq-casado[b-6yxmmz3do6] {
    align-self: center;
}

/* TABLAS */

.cw-tabla-wrap[b-6yxmmz3do6] {
    overflow-x: auto;
    border: 0.0625rem solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
}

.cw-tabla[b-6yxmmz3do6] {
    inline-size: 100%;
    border-collapse: collapse;
}

    .cw-tabla th[b-6yxmmz3do6] {
        padding-block: 0.5rem;
        padding-inline: 0.7rem;
        background: #f8fafc;
        border-block-end: 0.0625rem solid var(--cw-line);
        color: #64748b;
        font-size: var(--cw-font-small);
        font-weight: 700;
        text-align: start;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .cw-tabla td[b-6yxmmz3do6] {
        padding-block: 0.45rem;
        padding-inline: 0.7rem;
        border-block-end: 0.0625rem solid var(--cw-line-soft);
        vertical-align: middle;
    }

    .cw-tabla tbody tr:last-child td[b-6yxmmz3do6] {
        border-block-end: none;
    }

    .cw-tabla tbody tr:hover td[b-6yxmmz3do6] {
        background: #fbfdff;
    }

    .cw-tabla .cw-r[b-6yxmmz3do6] {
        text-align: end;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.cw-col-accion[b-6yxmmz3do6] {
    inline-size: 1%;
    text-align: end;
    white-space: nowrap;
}

/* BOTONES: un solo juego para toda la vista (neutro, principal, peligro) */

.cw-btn[b-6yxmmz3do6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.25rem;
    padding-block: 0;
    padding-inline: 0.85rem;
    border: 0.0625rem solid #dbe2ea;
    border-radius: var(--cw-radius-sm);
    background: #ffffff;
    color: #374151;
    font: inherit;
    font-size: var(--cw-font-text);
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

    .cw-btn:hover:not(:disabled)[b-6yxmmz3do6] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .cw-btn:focus-visible[b-6yxmmz3do6] {
        outline: none;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.22);
    }

    .cw-btn:disabled[b-6yxmmz3do6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.cw-btn--primary[b-6yxmmz3do6] {
    border-color: var(--cw-accent);
    background: var(--cw-accent);
    color: #ffffff;
}

    .cw-btn--primary:hover:not(:disabled)[b-6yxmmz3do6] {
        border-color: #1d4ed8;
        background: #1d4ed8;
        box-shadow: 0 0.45rem 0.9rem rgba(37, 99, 235, 0.16);
    }

.cw-btn--danger[b-6yxmmz3do6] {
    border-color: #fecaca;
    color: #b91c1c;
}

    .cw-btn--danger:hover:not(:disabled)[b-6yxmmz3do6] {
        border-color: #fca5a5;
        background: #fef2f2;
    }

.cw-btn--sm[b-6yxmmz3do6] {
    flex: 0 0 auto;
    min-block-size: 1.95rem;
    padding-inline: 0.7rem;
}

.cw-btn-ico[b-6yxmmz3do6] {
    font-size: 1.1rem;
    line-height: 1;
}

.cw-file[b-6yxmmz3do6] {
    margin: 0;
}

.cw-icon-btn[b-6yxmmz3do6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

    .cw-icon-btn .material-symbols-rounded[b-6yxmmz3do6] {
        font-size: 1.1rem;
    }

.cw-icon-btn--danger:hover[b-6yxmmz3do6] {
    background: #fef2f2;
    color: #b91c1c;
}

.cw-link-btn[b-6yxmmz3do6] {
    padding: 0;
    border: none;
    background: none;
    color: var(--cw-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .cw-link-btn:hover[b-6yxmmz3do6] {
        text-decoration: underline;
    }

/* RESPONSIVE: por debajo de ~64rem la cola pasa encima del detalle. La cola mide su contenido y el
   detalle se queda con el alto que sobre (fila `1fr`). */

@media (max-width: 64rem) {
    .cw-layout[b-6yxmmz3do6] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .cw-filters[b-6yxmmz3do6] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    .cw-filters[b-6yxmmz3do6],
    .cw-linea-info[b-6yxmmz3do6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cw-cand[b-6yxmmz3do6] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ANIMACIÓN */

@keyframes cwPageIn-b-6yxmmz3do6 {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-page[b-6yxmmz3do6],
    .cw-page *[b-6yxmmz3do6],
    .cw-page *[b-6yxmmz3do6]::before,
    .cw-page *[b-6yxmmz3do6]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/Conexiones/ConexionesBancariasView.razor.rz.scp.css */
/* Copiado de RemesaListaView.razor.css (mismo look que Cobros/Pagos) + estilos propios de tarjeta
   de conexión (cx-*) y el modal de RemesaDetalleView.razor.css para el wizard de alta/renovación. */

.cobros-page[b-s1la6bbdbz],
.cobros-page *[b-s1la6bbdbz],
.cobros-page *[b-s1la6bbdbz]::before,
.cobros-page *[b-s1la6bbdbz]::after {
    box-sizing: border-box;
}

.cobros-page[b-s1la6bbdbz] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: cobrosPageIn-b-s1la6bbdbz 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.cobros-header[b-s1la6bbdbz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que el script del CommandBar pone en este mismo div). */
    .cobros-header > div:first-child[b-s1la6bbdbz] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .cobros-header.command-bar-host-collapsed > div:first-child[b-s1la6bbdbz] {
        flex: 1 1 auto;
    }

.cobros-title[b-s1la6bbdbz] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.cobros-subtitle[b-s1la6bbdbz] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.cobros-header.command-bar-host-collapsed .cobros-title[b-s1la6bbdbz],
.cobros-header.command-bar-host-collapsed .cobros-subtitle[b-s1la6bbdbz] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* PANEL GENERAL */

.card-panel[b-s1la6bbdbz] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* LISTADO */

.cobros-list-panel[b-s1la6bbdbz] {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.cobros-list-header[b-s1la6bbdbz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .cobros-list-header > div:first-child[b-s1la6bbdbz] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-s1la6bbdbz] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-s1la6bbdbz] {
    margin: 0;
}

.cobros-list-subtitle[b-s1la6bbdbz] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al lado del texto, sin caja hasta el
   hover), igual que el listado de clientes. Los botones POR conexión («Sincronizar ahora»,
   «Renovar») siguen siendo SfButton dentro de su tarjeta: ver .cx-card-actions. */
.cobros-header-actions[b-s1la6bbdbz] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* BOTONES (compartidos con Cobros) */

.cb-primary-btn[b-s1la6bbdbz],
.cb-action-btn[b-s1la6bbdbz] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.cb-primary-btn[b-s1la6bbdbz] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .cb-primary-btn:hover[b-s1la6bbdbz] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.cb-action-btn[b-s1la6bbdbz] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cb-action-btn:hover[b-s1la6bbdbz] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.cb-filter-select[b-s1la6bbdbz] {
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    font-size: 12px;
    color: #1f2937;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cb-filter-select:focus[b-s1la6bbdbz] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* ESTADOS */

.cb-estado-badge[b-s1la6bbdbz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cb-estado-green[b-s1la6bbdbz] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cb-estado-orange[b-s1la6bbdbz] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cb-estado-red[b-s1la6bbdbz] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* Estados de carga / error */
.cb-loading[b-s1la6bbdbz] {
    padding: 24px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.cb-error-banner[b-s1la6bbdbz] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    border-radius: 6px;
}

.cd-success-banner[b-s1la6bbdbz] {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    border-radius: 6px;
    flex: 0 0 auto;
}

/* LISTA DE CONEXIONES (tarjetas) */

.cx-lista[b-s1la6bbdbz] {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.cx-card[b-s1la6bbdbz] {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fbfcfe;
}

.cx-card-header[b-s1la6bbdbz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cx-card-heading[b-s1la6bbdbz] {
    min-width: 0;
}

.cx-card-banco[b-s1la6bbdbz] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.cx-card-meta[b-s1la6bbdbz] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.cx-caduca-aviso[b-s1la6bbdbz] {
    color: #b45309;
    font-weight: 750;
}

.cx-card-actions[b-s1la6bbdbz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cx-sin-cuentas[b-s1la6bbdbz] {
    margin-top: 10px;
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

.cx-cuentas-tabla[b-s1la6bbdbz] {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .cx-cuentas-tabla th[b-s1la6bbdbz] {
        text-align: left;
        color: #6b7280;
        font-weight: 750;
        padding: 6px 8px;
        border-bottom: 1px solid #eef2f7;
    }

    .cx-cuentas-tabla td[b-s1la6bbdbz] {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
    }

.cx-mapeo-select[b-s1la6bbdbz] {
    min-width: 220px;
}

/* ANIMACIONES */

@keyframes cobrosPageIn-b-s1la6bbdbz {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cobros-page[b-s1la6bbdbz],
    .cobros-page *[b-s1la6bbdbz],
    .cobros-page *[b-s1la6bbdbz]::before,
    .cobros-page *[b-s1la6bbdbz]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* DIÁLOGO (wizard de alta / renovación) — contenido del <Modal> compartido. La caja, el overlay y el
   título los pone Modal.razor; el campo lo pinta InputField. Aquí solo va el contenido propio y los
   botones, con el mismo estilo que EditPerfilForm. */

.cx-modal-intro[b-s1la6bbdbz] {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
}

.cx-modal-error[b-s1la6bbdbz] {
    margin-bottom: 0.75rem;
    padding: 9px 12px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Acciones alineadas a la derecha (igual que EditPerfilForm). */
.modal-actions[b-s1la6bbdbz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ---- BOTONES DEL MODAL (mismo estilo que EditPerfilForm) ---- */

.btn[b-s1la6bbdbz] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-s1la6bbdbz] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    .btn:active[b-s1la6bbdbz] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .btn:disabled[b-s1la6bbdbz] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Aceptar */
.btn-accept[b-s1la6bbdbz] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-s1la6bbdbz] {
        background: #f3f4f6;
    }

/* Cancelar */
.btn-cancel[b-s1la6bbdbz] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-s1la6bbdbz] {
        background: #4b5563;
    }

@media (max-width: 980px) {
    .cobros-page[b-s1la6bbdbz] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-panel[b-s1la6bbdbz] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-header[b-s1la6bbdbz] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/Conexiones/CredencialesCentralesBancosPanel.razor.rz.scp.css */
/* Panel de la aplicación central de Enable Banking (CB1b), calcado del de la empresa (CB1a). CSS aislado propio: las clases de la página
   (card-panel, cobros-list-header, botones) se repiten aquí porque el aislamiento no las comparte. */

.card-panel[b-3mhun3ntqv] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cxc[b-3mhun3ntqv] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cobros-list-header[b-3mhun3ntqv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .cobros-list-header > div:first-child[b-3mhun3ntqv] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-3mhun3ntqv] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-3mhun3ntqv] {
    margin: 0;
}

.cobros-list-subtitle[b-3mhun3ntqv] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.cb-loading[b-3mhun3ntqv] {
    padding: 12px 8px;
    color: #6b7280;
    font-size: 13px;
}

.cb-error-banner[b-3mhun3ntqv],
.cd-success-banner[b-3mhun3ntqv] {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.cb-error-banner[b-3mhun3ntqv] {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.cd-success-banner[b-3mhun3ntqv] {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
}

.cxc-avisos[b-3mhun3ntqv] {
    margin: 0;
    padding: 10px 14px 10px 30px;
    border-left: 4px solid #d97706;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cxc-campos[b-3mhun3ntqv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 14px;
}

.cxc-campo[b-3mhun3ntqv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .cxc-campo label[b-3mhun3ntqv] {
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
    }

    .cxc-campo input[type="text"][b-3mhun3ntqv],
    .cxc-campo input[type="date"][b-3mhun3ntqv],
    .cxc-campo select[b-3mhun3ntqv] {
        height: 34px;
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        padding: 0 10px;
        font-size: 13px;
        color: #1f2937;
        background: #ffffff;
        min-width: 0;
    }

.cxc-ancho[b-3mhun3ntqv] {
    grid-column: span 2;
}

.cxc-clave[b-3mhun3ntqv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cxc-clave-estado[b-3mhun3ntqv] {
    color: #374151;
    font-weight: 600;
}

.cxc-retorno[b-3mhun3ntqv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    color: #4b5563;
}

    .cxc-retorno code[b-3mhun3ntqv] {
        padding: 2px 6px;
        border-radius: 6px;
        background: #f3f4f6;
        color: #111827;
        user-select: all;
        word-break: break-all;
    }

.cxc-ayuda[b-3mhun3ntqv] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.modal-actions[b-3mhun3ntqv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn[b-3mhun3ntqv] {
    padding: 0.5rem 1.15rem;
    border-radius: 20px;
    font-size: 0.9rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:disabled[b-3mhun3ntqv] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-accept[b-3mhun3ntqv] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-3mhun3ntqv] {
        background: #f3f4f6;
    }

.btn-cancel[b-3mhun3ntqv] {
    background: #6b7280;
    color: #fff;
}

    .btn-cancel:hover[b-3mhun3ntqv] {
        background: #4b5563;
    }

@media (max-width: 640px) {
    .cxc-ancho[b-3mhun3ntqv] {
        grid-column: auto;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/Conexiones/CredencialesEnableBankingPanel.razor.rz.scp.css */
/* Panel de credenciales de Enable Banking (CB1a). CSS aislado propio: las clases de la página
   (card-panel, cobros-list-header, botones) se repiten aquí porque el aislamiento no las comparte. */

.card-panel[b-wbhqcywgo2] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cxc[b-wbhqcywgo2] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cobros-list-header[b-wbhqcywgo2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .cobros-list-header > div:first-child[b-wbhqcywgo2] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-wbhqcywgo2] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-wbhqcywgo2] {
    margin: 0;
}

.cobros-list-subtitle[b-wbhqcywgo2] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.cb-loading[b-wbhqcywgo2] {
    padding: 12px 8px;
    color: #6b7280;
    font-size: 13px;
}

.cb-error-banner[b-wbhqcywgo2],
.cd-success-banner[b-wbhqcywgo2] {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.cb-error-banner[b-wbhqcywgo2] {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.cd-success-banner[b-wbhqcywgo2] {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
}

.cxc-avisos[b-wbhqcywgo2] {
    margin: 0;
    padding: 10px 14px 10px 30px;
    border-left: 4px solid #d97706;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cxc-campos[b-wbhqcywgo2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 14px;
}

.cxc-campo[b-wbhqcywgo2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .cxc-campo label[b-wbhqcywgo2] {
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
    }

    .cxc-campo input[type="text"][b-wbhqcywgo2],
    .cxc-campo input[type="date"][b-wbhqcywgo2],
    .cxc-campo select[b-wbhqcywgo2] {
        height: 34px;
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        padding: 0 10px;
        font-size: 13px;
        color: #1f2937;
        background: #ffffff;
        min-width: 0;
    }

.cxc-ancho[b-wbhqcywgo2] {
    grid-column: span 2;
}

.cxc-clave[b-wbhqcywgo2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cxc-clave-estado[b-wbhqcywgo2] {
    color: #374151;
    font-weight: 600;
}

.cxc-retorno[b-wbhqcywgo2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    color: #4b5563;
}

    .cxc-retorno code[b-wbhqcywgo2] {
        padding: 2px 6px;
        border-radius: 6px;
        background: #f3f4f6;
        color: #111827;
        user-select: all;
        word-break: break-all;
    }

.cxc-ayuda[b-wbhqcywgo2] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.modal-actions[b-wbhqcywgo2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn[b-wbhqcywgo2] {
    padding: 0.5rem 1.15rem;
    border-radius: 20px;
    font-size: 0.9rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:disabled[b-wbhqcywgo2] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-accept[b-wbhqcywgo2] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-wbhqcywgo2] {
        background: #f3f4f6;
    }

.btn-cancel[b-wbhqcywgo2] {
    background: #6b7280;
    color: #fff;
}

    .btn-cancel:hover[b-wbhqcywgo2] {
        background: #4b5563;
    }

@media (max-width: 640px) {
    .cxc-ancho[b-wbhqcywgo2] {
        grid-column: auto;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/Movimientos/MovimientosBandejaView.razor.rz.scp.css */
/* Copiado de RemesaListaView.razor.css (mismo look que Cobros/Pagos) + estilos propios de la
   bandeja (mb-*: importe con signo, paginador manual). */

.cobros-page[b-8c80p99w1i],
.cobros-page *[b-8c80p99w1i],
.cobros-page *[b-8c80p99w1i]::before,
.cobros-page *[b-8c80p99w1i]::after {
    box-sizing: border-box;
}

.cobros-page[b-8c80p99w1i] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: cobrosPageIn-b-8c80p99w1i 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.cobros-header[b-8c80p99w1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que el script del CommandBar pone en este mismo div). */
    .cobros-header > div:first-child[b-8c80p99w1i] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .cobros-header.command-bar-host-collapsed > div:first-child[b-8c80p99w1i] {
        flex: 1 1 auto;
    }

.cobros-title[b-8c80p99w1i] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.cobros-subtitle[b-8c80p99w1i] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.cobros-header.command-bar-host-collapsed .cobros-title[b-8c80p99w1i],
.cobros-header.command-bar-host-collapsed .cobros-subtitle[b-8c80p99w1i] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* PANEL GENERAL */

.card-panel[b-8c80p99w1i] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* LISTADO */

.cobros-list-panel[b-8c80p99w1i] {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.cobros-list-header[b-8c80p99w1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .cobros-list-header > div:first-child[b-8c80p99w1i] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-8c80p99w1i] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-8c80p99w1i] {
    margin: 0;
}

.cobros-list-subtitle[b-8c80p99w1i] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al lado del texto, sin caja hasta el
   hover), igual que el listado de clientes. */
.cobros-header-actions[b-8c80p99w1i] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* FILTROS */

.cobros-filters.mb-filtros[b-8c80p99w1i] {
    display: grid;
    grid-template-columns: 260px 220px;
    gap: 10px;
    align-items: center;
}

.cb-filter-item[b-8c80p99w1i] {
    min-width: 0;
}

.cb-filter-select[b-8c80p99w1i] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .cb-filter-select:focus[b-8c80p99w1i] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* BOTONES */

.cb-primary-btn[b-8c80p99w1i],
.cb-action-btn[b-8c80p99w1i] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.cb-primary-btn[b-8c80p99w1i] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .cb-primary-btn:hover[b-8c80p99w1i] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.cb-action-btn[b-8c80p99w1i] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cb-action-btn:hover[b-8c80p99w1i] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* GRID */

.cb-grid-wrapper[b-8c80p99w1i] {
    min-height: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
}

.cb-grid.e-grid[b-8c80p99w1i] {
    height: 100%;
    width: 100%;
    min-width: 980px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.cb-grid .e-gridheader[b-8c80p99w1i] {
    border-bottom: 1px solid #eef2f7;
}

.cb-grid .e-headercell[b-8c80p99w1i] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.cb-grid .e-headertext[b-8c80p99w1i] {
    font-size: 12px;
    font-weight: 850;
}

.cb-grid .e-rowcell[b-8c80p99w1i] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cb-grid .e-gridcontent[b-8c80p99w1i],
.cb-grid .e-table[b-8c80p99w1i] {
    cursor: pointer;
}

.cb-grid .e-row:hover .e-rowcell[b-8c80p99w1i] {
    background: #f8fbff;
}

.cb-grid .e-altrow .e-rowcell[b-8c80p99w1i] {
    background: #fcfdff;
}

.cb-grid .e-content[b-8c80p99w1i] {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* ESTADOS */

.cb-estado-badge[b-8c80p99w1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cb-estado-green[b-8c80p99w1i] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cb-estado-orange[b-8c80p99w1i] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cb-estado-red[b-8c80p99w1i] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.cb-estado-blue[b-8c80p99w1i] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* IMPORTES CON SIGNO (presentación, sin cálculo: el signo real ya viene del extracto) */

.mb-importe-positivo[b-8c80p99w1i] {
    color: #15803d;
    font-weight: 800;
}

.mb-importe-negativo[b-8c80p99w1i] {
    color: #b91c1c;
    font-weight: 800;
}

/* PAGINADOR MANUAL */

.mb-pager[b-8c80p99w1i] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 8px;
}

.mb-pager-texto[b-8c80p99w1i] {
    font-size: 12px;
    color: #64748b;
    font-weight: 750;
}

/* Estados de carga / error */
.cb-loading[b-8c80p99w1i] {
    padding: 24px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.cb-error-banner[b-8c80p99w1i] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    border-radius: 6px;
}

.cd-success-banner[b-8c80p99w1i] {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    border-radius: 6px;
    flex: 0 0 auto;
}

/* ANIMACIONES */

@keyframes cobrosPageIn-b-8c80p99w1i {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cobros-page[b-8c80p99w1i],
    .cobros-page *[b-8c80p99w1i],
    .cobros-page *[b-8c80p99w1i]::before,
    .cobros-page *[b-8c80p99w1i]::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 980px) {
    .cobros-page[b-8c80p99w1i] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-panel[b-8c80p99w1i] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-header[b-8c80p99w1i] {
        flex-direction: column;
        align-items: stretch;
    }

    .cobros-filters.mb-filtros[b-8c80p99w1i] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .cobros-filters.mb-filtros[b-8c80p99w1i] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Bancos/RemesasTpv/RemesasTpvView.razor.rz.scp.css */
/* Remesas TPV (plan CB, CB8): mismo aspecto que la bandeja de movimientos bancarios, más su tabla. */
/* Copiado de RemesaListaView.razor.css (mismo look que Cobros/Pagos) + estilos propios de la
   bandeja (mb-*: importe con signo, paginador manual). */

.cobros-page[b-3a0jl5tnrp],
.cobros-page *[b-3a0jl5tnrp],
.cobros-page *[b-3a0jl5tnrp]::before,
.cobros-page *[b-3a0jl5tnrp]::after {
    box-sizing: border-box;
}

.cobros-page[b-3a0jl5tnrp] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: cobrosPageIn-b-3a0jl5tnrp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.cobros-header[b-3a0jl5tnrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que el script del CommandBar pone en este mismo div). */
    .cobros-header > div:first-child[b-3a0jl5tnrp] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .cobros-header.command-bar-host-collapsed > div:first-child[b-3a0jl5tnrp] {
        flex: 1 1 auto;
    }

.cobros-title[b-3a0jl5tnrp] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.cobros-subtitle[b-3a0jl5tnrp] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.cobros-header.command-bar-host-collapsed .cobros-title[b-3a0jl5tnrp],
.cobros-header.command-bar-host-collapsed .cobros-subtitle[b-3a0jl5tnrp] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* PANEL GENERAL */

.card-panel[b-3a0jl5tnrp] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* LISTADO */

.cobros-list-panel[b-3a0jl5tnrp] {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.cobros-list-header[b-3a0jl5tnrp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .cobros-list-header > div:first-child[b-3a0jl5tnrp] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-3a0jl5tnrp] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-3a0jl5tnrp] {
    margin: 0;
}

.cobros-list-subtitle[b-3a0jl5tnrp] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al lado del texto, sin caja hasta el
   hover), igual que el listado de clientes. */
.cobros-header-actions[b-3a0jl5tnrp] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* FILTROS */

.cobros-filters.mb-filtros[b-3a0jl5tnrp] {
    display: grid;
    grid-template-columns: 260px 220px;
    gap: 10px;
    align-items: center;
}

.cb-filter-item[b-3a0jl5tnrp] {
    min-width: 0;
}

.cb-filter-select[b-3a0jl5tnrp] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .cb-filter-select:focus[b-3a0jl5tnrp] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* BOTONES */

.cb-primary-btn[b-3a0jl5tnrp],
.cb-action-btn[b-3a0jl5tnrp] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.cb-primary-btn[b-3a0jl5tnrp] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .cb-primary-btn:hover[b-3a0jl5tnrp] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.cb-action-btn[b-3a0jl5tnrp] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cb-action-btn:hover[b-3a0jl5tnrp] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* GRID */

.cb-grid-wrapper[b-3a0jl5tnrp] {
    min-height: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
}

.cb-grid.e-grid[b-3a0jl5tnrp] {
    height: 100%;
    width: 100%;
    min-width: 980px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.cb-grid .e-gridheader[b-3a0jl5tnrp] {
    border-bottom: 1px solid #eef2f7;
}

.cb-grid .e-headercell[b-3a0jl5tnrp] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.cb-grid .e-headertext[b-3a0jl5tnrp] {
    font-size: 12px;
    font-weight: 850;
}

.cb-grid .e-rowcell[b-3a0jl5tnrp] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cb-grid .e-gridcontent[b-3a0jl5tnrp],
.cb-grid .e-table[b-3a0jl5tnrp] {
    cursor: pointer;
}

.cb-grid .e-row:hover .e-rowcell[b-3a0jl5tnrp] {
    background: #f8fbff;
}

.cb-grid .e-altrow .e-rowcell[b-3a0jl5tnrp] {
    background: #fcfdff;
}

.cb-grid .e-content[b-3a0jl5tnrp] {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* ESTADOS */

.cb-estado-badge[b-3a0jl5tnrp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cb-estado-green[b-3a0jl5tnrp] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cb-estado-orange[b-3a0jl5tnrp] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cb-estado-red[b-3a0jl5tnrp] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.cb-estado-blue[b-3a0jl5tnrp] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* IMPORTES CON SIGNO (presentación, sin cálculo: el signo real ya viene del extracto) */

.mb-importe-positivo[b-3a0jl5tnrp] {
    color: #15803d;
    font-weight: 800;
}

.mb-importe-negativo[b-3a0jl5tnrp] {
    color: #b91c1c;
    font-weight: 800;
}

/* PAGINADOR MANUAL */

.mb-pager[b-3a0jl5tnrp] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 8px;
}

.mb-pager-texto[b-3a0jl5tnrp] {
    font-size: 12px;
    color: #64748b;
    font-weight: 750;
}

/* Estados de carga / error */
.cb-loading[b-3a0jl5tnrp] {
    padding: 24px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.cb-error-banner[b-3a0jl5tnrp] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    border-radius: 6px;
}

.cd-success-banner[b-3a0jl5tnrp] {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    border-radius: 6px;
    flex: 0 0 auto;
}

/* ANIMACIONES */

@keyframes cobrosPageIn-b-3a0jl5tnrp {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cobros-page[b-3a0jl5tnrp],
    .cobros-page *[b-3a0jl5tnrp],
    .cobros-page *[b-3a0jl5tnrp]::before,
    .cobros-page *[b-3a0jl5tnrp]::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 980px) {
    .cobros-page[b-3a0jl5tnrp] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-panel[b-3a0jl5tnrp] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .cobros-list-header[b-3a0jl5tnrp] {
        flex-direction: column;
        align-items: stretch;
    }

    .cobros-filters.mb-filtros[b-3a0jl5tnrp] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .cobros-filters.mb-filtros[b-3a0jl5tnrp] {
        grid-template-columns: 1fr;
    }
}

/* ── Remesas TPV (CB8): tabla de remesas y detalle de operaciones ─────────────────────────── */
.rt-tabla[b-3a0jl5tnrp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rt-tabla th[b-3a0jl5tnrp] {
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .rt-tabla td[b-3a0jl5tnrp] {
        padding: 8px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .rt-tabla .rt-num[b-3a0jl5tnrp] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .rt-tabla tbody tr.rt-fila[b-3a0jl5tnrp] {
        cursor: pointer;
    }

        .rt-tabla tbody tr.rt-fila:hover[b-3a0jl5tnrp] {
            background: #f8fafc;
        }

        .rt-tabla tbody tr.rt-fila.rt-sel[b-3a0jl5tnrp] {
            background: #eef2ff;
        }

.rt-tabla-scroll[b-3a0jl5tnrp] {
    overflow-x: auto;
}

.rt-estado[b-3a0jl5tnrp] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

    .rt-estado.rt-esperando[b-3a0jl5tnrp] { background: #eff6ff; color: #1d4ed8; }
    .rt-estado.rt-descuadrada[b-3a0jl5tnrp] { background: #fef2f2; color: #b91c1c; }
    .rt-estado.rt-cuadrada[b-3a0jl5tnrp] { background: #fffbeb; color: #b45309; }
    .rt-estado.rt-conciliada[b-3a0jl5tnrp] { background: #f0fdf4; color: #15803d; }

.rt-negativo[b-3a0jl5tnrp] {
    color: #b91c1c;
}

.rt-acciones[b-3a0jl5tnrp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin: 10px 0;
}

.rt-motivo[b-3a0jl5tnrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
    flex: 1 1 280px;
}

    .rt-motivo label[b-3a0jl5tnrp] {
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
    }

    .rt-motivo input[b-3a0jl5tnrp] {
        height: 34px;
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        padding: 0 10px;
        font-size: 13px;
    }

.rt-btn[b-3a0jl5tnrp] {
    padding: 0.45rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
}

    .rt-btn:disabled[b-3a0jl5tnrp] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .rt-btn.rt-secundario[b-3a0jl5tnrp] {
        background: #6b7280;
        border-color: #6b7280;
        color: #ffffff;
    }

.rt-enlace[b-3a0jl5tnrp] {
    background: none;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.rt-vacio[b-3a0jl5tnrp] {
    padding: 14px 8px;
    color: #6b7280;
    font-size: 13px;
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/ClavesCaja/Pages/ClavesCajaPage.razor.rz.scp.css */
/*
    Asientos predefinidos (C4). Mismo vocabulario visual que «Libros oficiales» e «Inmovilizado»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    InmovilizadoPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho, como Clientes: sin tope de ancho ni padding propio (el borde lo pone .main-body);
   columna flexible con 9px entre bloques. */
.op-page[b-1yh5raraeg] {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #1f2933;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Cabecera con el mismo reparto que el resto de listados: sin `flex-wrap` (si la barra bajara de línea,
   su script nunca vería que falta sitio y no replegaría nada). */
.op-header[b-1yh5raraeg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .op-header > div:first-child[b-1yh5raraeg] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .op-header.command-bar-host-collapsed > div:first-child[b-1yh5raraeg] {
        flex: 1 1 auto;
    }

.op-title[b-1yh5raraeg] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.op-subtitle[b-1yh5raraeg] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.op-header.command-bar-host-collapsed .op-title[b-1yh5raraeg],
.op-header.command-bar-host-collapsed .op-subtitle[b-1yh5raraeg] {
    white-space: normal;
    overflow-wrap: break-word;
}

.op-card[b-1yh5raraeg] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-1yh5raraeg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-1yh5raraeg] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-1yh5raraeg] { margin-top: .9rem; }

.op-subhead[b-1yh5raraeg] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

.op-form-row[b-1yh5raraeg] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-1yh5raraeg] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-1yh5raraeg] { flex: 1 1 16rem; }

.op-field label[b-1yh5raraeg] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

/* Con ::deep además del selector directo: el input de la cuenta de contrapartida lo pinta CampoCodigo
   (componente hijo, que recibe la clase por parámetro) y el CSS aislado de la página no lo marca. */
.op-select[b-1yh5raraeg], .op-input[b-1yh5raraeg],
.op-field[b-1yh5raraeg]  .op-input {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-1yh5raraeg] { min-width: 7rem; }
.op-select-sm[b-1yh5raraeg] { min-width: 5.5rem; }
.op-input-num[b-1yh5raraeg] { text-align: right; width: 9rem; }
.op-input-pct[b-1yh5raraeg] { text-align: right; width: 5rem; }
.op-input-cuenta[b-1yh5raraeg] { width: 9rem; font-variant-numeric: tabular-nums; }
.op-field[b-1yh5raraeg]  .op-input-cuenta { width: 9rem; box-sizing: border-box; font-variant-numeric: tabular-nums; }

/* El par «21 % de la línea 2» se lee como una frase: si se parte en dos controles sueltos deja de
   verse que el porcentaje y su base son un mismo dato. */
.op-inline[b-1yh5raraeg] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.op-inline-sep[b-1yh5raraeg] { font-size: .82rem; color: #61707d; }

.op-actions[b-1yh5raraeg] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-1yh5raraeg] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-1yh5raraeg] { opacity: .55; cursor: default; }
.op-btn-ico[b-1yh5raraeg] { font-size: 1.05rem; }

.op-btn-primary[b-1yh5raraeg] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-1yh5raraeg] { background: #245cd0; }

.op-btn-ghost[b-1yh5raraeg] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-1yh5raraeg] { background: #e7edf4; }

.op-btn-danger[b-1yh5raraeg] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-1yh5raraeg] { background: #c22f39; }

.op-btn-danger-ghost[b-1yh5raraeg] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-1yh5raraeg] { background: #fdf1f2; }

.op-link-btn[b-1yh5raraeg] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Botones de fila (subir/bajar/quitar): sin marco, para que la rejilla no parezca una botonera. */
.op-icon-btn[b-1yh5raraeg] {
    background: none;
    border: none;
    color: #61707d;
    cursor: pointer;
    padding: .15rem;
    line-height: 1;
    border-radius: 6px;
}

.op-icon-btn:hover:not(:disabled)[b-1yh5raraeg] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-1yh5raraeg] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-1yh5raraeg] { font-size: 1.15rem; }
.op-icon-danger:hover:not(:disabled)[b-1yh5raraeg] { background: #fdf1f2; color: #c22f39; }

.op-grid-wrapper[b-1yh5raraeg] { overflow-x: auto; }

.op-table[b-1yh5raraeg] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-1yh5raraeg] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.op-table td[b-1yh5raraeg] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-1yh5raraeg] { text-align: right; font-variant-numeric: tabular-nums; }

/* La rejilla de líneas lleva controles: necesita más aire vertical que una tabla de solo lectura. */
.op-table-lineas td[b-1yh5raraeg] { padding: .35rem .5rem; }
.op-col-orden[b-1yh5raraeg] { width: 2.5rem; }
.op-col-acciones[b-1yh5raraeg] { width: 6.5rem; white-space: nowrap; text-align: right; }

/* El listado abre el editor al pulsar la fila: hay que verse que es pulsable. */
.op-table-click tbody tr[b-1yh5raraeg] { cursor: pointer; }
.op-table-click tbody tr:hover[b-1yh5raraeg] { background: #f5f8fc; }
.op-row-sel[b-1yh5raraeg], .op-table-click tbody tr.op-row-sel:hover[b-1yh5raraeg] { background: #e8f0fe; }

/*
    Ámbar y no rojo: lo que marca —una plantilla sin líneas suficientes— es algo que hay que completar
    antes de seguir, no un error de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-1yh5raraeg] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso .material-symbols-rounded[b-1yh5raraeg] { font-size: 1.1rem; }

.op-check[b-1yh5raraeg] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

/* La casilla «Activa» convive con campos que tienen rótulo encima: se baja a su línea base. */
.op-check-campo[b-1yh5raraeg] { align-self: center; padding-bottom: .45rem; }

.op-confirm[b-1yh5raraeg] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-1yh5raraeg] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-1yh5raraeg] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-1yh5raraeg] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-1yh5raraeg] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-1yh5raraeg] { background: #e2f4e8; color: #1c7a3a; }

/* ── Ventana del formulario ──
   El envoltorio solo lleva el ancla de las pruebas (cc-editor): no ocupa sitio en la página. */
.op-modal-clave[b-1yh5raraeg] {
    display: contents;
}

    /* Más ancha que la de serie: la fila de código, título, familia y «Activa» cabe en una línea. */
    .op-modal-clave[b-1yh5raraeg]  .mm-card {
        max-width: 760px;
    }


    .op-modal-clave .op-confirm[b-1yh5raraeg] {
        font-size: .8rem;
    }

/* ── Pantallas pequeñas ── */
@media (max-width: 768px) {
    .op-card[b-1yh5raraeg] { padding: .9rem 1rem; }
    .op-title[b-1yh5raraeg] { font-size: 19px; }

    /* Botones e icono de fila tocables. */
    .op-btn[b-1yh5raraeg],
    .op-icon-btn[b-1yh5raraeg] { min-height: 36px; }
    .op-icon-btn[b-1yh5raraeg] { min-width: 36px; }
}

@media (max-width: 600px) {
    .op-card[b-1yh5raraeg] { padding: .8rem .75rem; }

    /* Formulario en una columna: cada campo al 100%, también los estrechos (código, IVA, cuenta). */
    .op-form-row[b-1yh5raraeg] { flex-direction: column; align-items: stretch; }
    .op-field[b-1yh5raraeg],
    .op-field-ancho[b-1yh5raraeg] { flex: 1 1 auto; width: 100%; }
    .op-input[b-1yh5raraeg],
    .op-select[b-1yh5raraeg],
    .op-input-cuenta[b-1yh5raraeg],
    .op-input-pct[b-1yh5raraeg] { width: 100%; }
    .op-check-campo[b-1yh5raraeg] { padding-bottom: 0; align-self: flex-start; }

    /* La tabla no cabe entera: se desplaza dentro de su recuadro, nunca la página. */
    .op-table[b-1yh5raraeg] { min-width: 640px; }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/CobrosPagos/Components/AnticipoModal.razor.rz.scp.css */
/* Cuerpo del modal de anticipo. El overlay, la tarjeta y la cabecera los pone el Modal compartido;
   aquí solo el contenido, con el mismo aspecto que los modales de fichas (art-modal-*).

   Los campos del cuerpo se estilan con `::deep` desde .anm-body —igual que la ficha de cliente con
   .cform-page— porque el input del campo con buscador (CampoConBuscador) lo renderiza OTRO componente:
   sin ::deep el CSS aislado no lo alcanzaría y el «Documento»/«Banco» se verían sin marco. */

/* El padding lateral (16px) se suma al `0.5rem` de la tarjeta del Modal compartido: 24px hasta el borde,
   los mismos que el pie. Así los campos y los botones caen sobre la misma vertical. */
.anm-body[b-36xkx36rwv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 16px 4px;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.anm-body[b-36xkx36rwv]  .material-symbols-outlined {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.anm-body[b-36xkx36rwv]  .anm-error {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.4;
}

.anm-body[b-36xkx36rwv]  .anm-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Fila de dos campos lado a lado (anticipo/gastos, fecha/vencimiento) en pantallas anchas. */
.anm-body[b-36xkx36rwv]  .anm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.anm-body[b-36xkx36rwv]  .anm-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* Casilla «Emitir factura de anticipo» (PA8): etiqueta corta, el porqué va en el tooltip. */
.anm-body[b-36xkx36rwv]  .anm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
}

.anm-body[b-36xkx36rwv]  .anm-check input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

/* Dato derivado de la elección (p. ej. el cliente del documento). */
.anm-body[b-36xkx36rwv]  .anm-hint {
    font-size: 12px;
    color: #64748b;
}

.anm-body[b-36xkx36rwv]  .anm-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .anm-body[b-36xkx36rwv]  .anm-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .anm-body[b-36xkx36rwv]  .anm-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* El marco del pie —la línea, el padding y el aire de abajo— lo pone el Modal compartido (.modal-footer
   en Modal.razor.css), igual para todos los diálogos. Aquí solo se coloca lo que va dentro. */
.anm-actions[b-36xkx36rwv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* El aviso empuja a los botones al extremo contrario. La regla es la misma que la global de app.css, pero
   escrita aquí para que el pie no dependa de ella. */
.anm-actions .form-aviso[b-36xkx36rwv] {
    margin-right: auto;
}

/* Pantalla estrecha: el aviso se lleva la primera línea entera, empezando por la izquierda, y los dos
   botones bajan debajo repartiéndose TODO el ancho, mitad y mitad. */
@media (max-width: 560px) {
    .anm-actions[b-36xkx36rwv] {
        flex-wrap: wrap;
    }

        .anm-actions .form-aviso[b-36xkx36rwv] {
            flex: 0 0 100%;
            margin-right: 0;
        }

        .anm-actions .btn[b-36xkx36rwv] {
            flex: 1 1 0;
            min-width: 0;
        }
}

/* Botones con el mismo estilo que los modales de fichas (sin traslación en hover). */
.btn[b-36xkx36rwv] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-36xkx36rwv] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-36xkx36rwv] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-36xkx36rwv] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-36xkx36rwv] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-36xkx36rwv] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-36xkx36rwv] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-36xkx36rwv] {
        background: #4b5563;
    }

/* Pantallas pequeñas: los pares de campos se apilan. El pie NO —los botones se reparten el ancho mitad y
   mitad y el aviso se coloca encima—, pero eso lo gobierna `.modal-actions` en app.css, igual en todos
   los modales de la aplicación. */
@media (max-width: 560px) {
    .anm-body[b-36xkx36rwv]  .anm-row {
        grid-template-columns: 1fr;
    }
}

/* Tercero fijado por el documento: se ve, no se toca. */
.anm-input-fijo[b-36xkx36rwv] {
    background: #f9fafb;
    color: #6b7280;
    cursor: default;
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/CobrosPagos/Components/CobroModal.razor.rz.scp.css */
/* Cuerpo del modal de cobro/pago. El overlay, la tarjeta y la cabecera los pone el Modal compartido;
   aquí solo el contenido, con el mismo aspecto que el modal de anticipo (anm-*) y los de fichas.

   Los campos del cuerpo se estilan con `::deep` desde .cbm-body —igual que AnticipoModal— porque el input
   del campo con buscador (CampoConBuscador) lo renderiza OTRO componente: sin ::deep el CSS aislado no lo
   alcanzaría y el «Documento»/«Banco» se verían sin marco. */

/* El padding lateral (16px) se suma al `0.5rem` de la tarjeta del Modal compartido: 24px hasta el borde,
   los mismos que el pie y que el cuerpo de los modales de Artículos. Así los campos y los botones caen
   sobre la misma vertical. */
.cbm-body[b-sacf23t6og] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 16px 4px;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.cbm-body[b-sacf23t6og]  .material-symbols-outlined {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cbm-body[b-sacf23t6og]  .cbm-error {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.4;
}

/* Qué se está saldando (recibos y tercero(s)). No es un campo ni un aviso: es el encabezado de lectura
   del formulario, así que va sobre fondo neutro y con el mismo aire que los campos. */
.cbm-body[b-sacf23t6og]  .cbm-marcado {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.4;
}

.cbm-body[b-sacf23t6og]  .cbm-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Fila de dos campos lado a lado (importe/gastos, fecha/banco) en pantallas anchas. */
.cbm-body[b-sacf23t6og]  .cbm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cbm-body[b-sacf23t6og]  .cbm-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* La marca de campo obligatorio (`.req`) es GLOBAL, en app.css: es la misma señal en toda la aplicación
   y no depende del prefijo de clases de cada modal. */

/* Dato derivado de lo tecleado (el resto que queda pendiente, el nombre de la cuenta). */
.cbm-body[b-sacf23t6og]  .cbm-hint {
    font-size: 12px;
    color: #64748b;
}

.cbm-body[b-sacf23t6og]  .cbm-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .cbm-body[b-sacf23t6og]  .cbm-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .cbm-body[b-sacf23t6og]  .cbm-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* Interruptores de la operación: en línea, separados del último campo. */
.cbm-body[b-sacf23t6og]  .cbm-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 2px;
}

.cbm-body[b-sacf23t6og]  .cbm-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
}

    /* Un interruptor sin efecto todavía no debe parecer disponible. */
    .cbm-body[b-sacf23t6og]  .cbm-check:has(input:disabled) {
        color: #94a3b8;
        cursor: not-allowed;
    }

    .cbm-body[b-sacf23t6og]  .cbm-check input {
        width: 16px;
        height: 16px;
        cursor: inherit;
    }

/* El marco del pie —la línea, el padding y el aire de abajo— lo pone el Modal compartido (.modal-footer
   en Modal.razor.css), igual para todos los diálogos. Aquí solo se coloca lo que va dentro: el aviso a la
   izquierda y los botones a la derecha. */
.cbm-actions[b-sacf23t6og] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* El aviso empuja a los botones al extremo contrario. La regla es la misma que la global de app.css, pero
   escrita aquí para que el pie no dependa de ella. */
.cbm-actions .form-aviso[b-sacf23t6og] {
    margin-right: auto;
}

/* Pantalla estrecha: el aviso se lleva la primera línea entera, empezando por la izquierda, y los dos
   botones bajan debajo repartiéndose TODO el ancho, mitad y mitad. */
@media (max-width: 560px) {
    .cbm-actions[b-sacf23t6og] {
        flex-wrap: wrap;
    }

        .cbm-actions .form-aviso[b-sacf23t6og] {
            flex: 0 0 100%;
            margin-right: 0;
        }

        .cbm-actions .btn[b-sacf23t6og] {
            flex: 1 1 0;
            min-width: 0;
        }
}

/* El aviso del pie (`.form-aviso`) y el marco rojo del campo (`.campo-mal`) son GLOBALES, en app.css: son
   la misma señal en toda la aplicación. */

/* Botones con el mismo estilo que los modales de fichas (sin traslación en hover). */
.btn[b-sacf23t6og] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-sacf23t6og] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-sacf23t6og] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Cobrar / Pagar) */
.btn-accept[b-sacf23t6og] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-sacf23t6og] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-sacf23t6og] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-sacf23t6og] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-sacf23t6og] {
        background: #4b5563;
    }

/* Pantallas pequeñas: los pares de campos se apilan. El pie NO —los botones se reparten el ancho mitad y
   mitad y el aviso se coloca encima—, pero eso lo gobierna `.modal-actions` en app.css, igual en todos
   los modales de la aplicación. */
@media (max-width: 560px) {
    .cbm-body[b-sacf23t6og]  .cbm-row {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/CobrosPagos/Components/RemesaFormularioView.razor.rz.scp.css */
.cobro-form-page[b-dnarn86szo],
.cobro-form-page *[b-dnarn86szo],
.cobro-form-page *[b-dnarn86szo]::before,
.cobro-form-page *[b-dnarn86szo]::after {
    box-sizing: border-box;
}

.cobro-form-page[b-dnarn86szo] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: cobroFormPageIn-b-dnarn86szo 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.cobro-form-header[b-dnarn86szo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.cobro-form-heading[b-dnarn86szo] {
    min-width: 0;
}

.cobro-form-title[b-dnarn86szo] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.cobro-form-subtitle[b-dnarn86szo] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.cobro-form-header-actions[b-dnarn86szo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* PANEL GENERAL */

.card-panel[b-dnarn86szo] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* TABS */

.cobro-form-tabs-panel[b-dnarn86szo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.cfb-tabs[b-dnarn86szo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
}

.cfb-tab[b-dnarn86szo] {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

    .cfb-tab:hover[b-dnarn86szo] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .cfb-tab.active[b-dnarn86szo] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

.cfb-tab-content[b-dnarn86szo] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cfb-tab-content[b-dnarn86szo]::-webkit-scrollbar {
        width: 6px;
    }

    .cfb-tab-content[b-dnarn86szo]::-webkit-scrollbar-track {
        background: transparent;
    }

    .cfb-tab-content[b-dnarn86szo]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .cfb-tab-content[b-dnarn86szo]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* SUBTABS */

.cfb-subtabs[b-dnarn86szo] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.cfb-subtab[b-dnarn86szo] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

    .cfb-subtab:hover[b-dnarn86szo] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .cfb-subtab.active[b-dnarn86szo] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

.cfb-data-tab-panel[b-dnarn86szo] {
    margin-top: 10px;
}

/* TITULOS */

.cobro-form-panel-header[b-dnarn86szo],
.cobro-form-docs-header[b-dnarn86szo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
}

.cobro-form-panel-title[b-dnarn86szo] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.cobro-form-panel-subtitle[b-dnarn86szo],
.cobro-form-docs-subtitle[b-dnarn86szo] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* FORMULARIO */

.cfb-form-card[b-dnarn86szo] {
    min-width: 0;
    align-self: start;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
}

.cfb-card-title[b-dnarn86szo] {
    margin: 0 0 10px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.cfb-fields-grid[b-dnarn86szo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cfb-fields-grid-wide[b-dnarn86szo] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cfb-field[b-dnarn86szo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfb-field-full[b-dnarn86szo] {
    grid-column: 1 / -1;
}

.cfb-field label[b-dnarn86szo] {
    font-size: 12px;
    font-weight: 750;
    color: #4b5563;
}

/* Casilla «Emitir factura de anticipo» (PA8): a la altura del campo de al lado, el porqué en el tooltip. */
.cfb-field label.cfb-check[b-dnarn86szo] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
}

.cfb-field label.cfb-check input[b-dnarn86szo] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.cfb-input[b-dnarn86szo],
.cfb-select[b-dnarn86szo],
.cfb-textarea[b-dnarn86szo] {
    width: 100%;
    min-width: 0;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cfb-input[b-dnarn86szo],
.cfb-select[b-dnarn86szo] {
    height: 38px;
    padding: 0 12px;
}

.cfb-select[b-dnarn86szo] {
    cursor: pointer;
}

.cfb-textarea[b-dnarn86szo] {
    min-height: 112px;
    padding: 12px;
    resize: vertical;
    line-height: 1.45;
}

.cfb-textarea-large[b-dnarn86szo] {
    min-height: 170px;
}

.cfb-input:focus[b-dnarn86szo],
.cfb-select:focus[b-dnarn86szo],
.cfb-textarea:focus[b-dnarn86szo] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Códigos con lupa (tercero y cuenta, CampoCodigo): su input lo pinta OTRO componente y el CSS aislado no
   llega a él sin ::deep. El mismo aspecto que los demás campos; el hueco de la lupa lo pone el componente. */
.cfb-field[b-dnarn86szo]  .cfb-input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cfb-field[b-dnarn86szo]  .cfb-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* RESUMEN */

.cfb-resumen-grid[b-dnarn86szo] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cfb-total-row[b-dnarn86szo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

    .cfb-total-row span[b-dnarn86szo] {
        font-size: 12px;
        color: #4b5563;
        font-weight: 750;
    }

    .cfb-total-row strong[b-dnarn86szo] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
    }

.cfb-total-row-highlight[b-dnarn86szo] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* Enlace en línea para acciones rápidas dentro del resumen (p. ej. poner anticipos a cero). */
.cfb-linklike[b-dnarn86szo] {
    margin-left: 8px;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

    .cfb-linklike:hover[b-dnarn86szo] {
        color: #1d4ed8;
    }

/* DOCUMENTOS */

.cfb-docs-actions[b-dnarn86szo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cfb-docs-summary[b-dnarn86szo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 850;
    color: #1d4ed8;
    white-space: nowrap;
}

.cfb-grid-wrapper[b-dnarn86szo] {
    margin-top: 10px;
    min-height: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
}

.cfb-grid.e-grid[b-dnarn86szo] {
    height: 100%;
    width: 100%;
    min-width: 900px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.cfb-grid .e-gridheader[b-dnarn86szo] {
    border-bottom: 1px solid #eef2f7;
}

.cfb-grid .e-headercell[b-dnarn86szo] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.cfb-grid .e-headertext[b-dnarn86szo] {
    font-size: 12px;
    font-weight: 850;
}

.cfb-grid .e-rowcell[b-dnarn86szo] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding: 6px 7px;
    vertical-align: middle;
}

.cfb-grid .e-row:hover .e-rowcell[b-dnarn86szo] {
    background: #f8fbff;
}

.cfb-grid .e-altrow .e-rowcell[b-dnarn86szo] {
    background: #fcfdff;
}

.cfb-grid-input[b-dnarn86szo],
.cfb-grid-select[b-dnarn86szo] {
    width: 100%;
    min-width: 0;
    height: 32px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    padding: 0 9px;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cfb-grid-input-number[b-dnarn86szo] {
    text-align: right;
}

.cfb-grid-input:focus[b-dnarn86szo],
.cfb-grid-select:focus[b-dnarn86szo] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.cfb-grid-delete-btn[b-dnarn86szo] {
    height: 32px;
    border-radius: 9px;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .cfb-grid-delete-btn:hover[b-dnarn86szo] {
        background: #fee2e2;
        border-color: #fca5a5;
        transform: translateY(-1px);
    }

/* BOTONES */

.cfb-primary-btn[b-dnarn86szo],
.cfb-action-btn[b-dnarn86szo],
.cfb-mini-btn[b-dnarn86szo] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.cfb-primary-btn[b-dnarn86szo] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .cfb-primary-btn:hover[b-dnarn86szo] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.cfb-action-btn[b-dnarn86szo],
.cfb-mini-btn[b-dnarn86szo] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cfb-action-btn:hover[b-dnarn86szo],
    .cfb-mini-btn:hover[b-dnarn86szo] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* ANIMACIONES */

@keyframes cobroFormPageIn-b-dnarn86szo {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .cobro-form-page[b-dnarn86szo] {
        height: calc(100dvh - 96px);
    }

    .cfb-fields-grid-wide[b-dnarn86szo],
    .cfb-resumen-grid[b-dnarn86szo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .cobro-form-page[b-dnarn86szo] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .cobro-form-header[b-dnarn86szo] {
        flex-direction: column;
        align-items: stretch;
    }

    .cobro-form-header-actions[b-dnarn86szo] {
        justify-content: space-between;
    }

    .cobro-form-tabs-panel[b-dnarn86szo] {
        height: auto;
        overflow: visible;
    }

    .cfb-tab-content[b-dnarn86szo] {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .cfb-fields-grid-wide[b-dnarn86szo],
    .cfb-resumen-grid[b-dnarn86szo] {
        grid-template-columns: 1fr;
    }

    .cfb-grid-wrapper[b-dnarn86szo] {
        height: auto;
        min-height: 360px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .cfb-grid.e-grid[b-dnarn86szo] {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .cobro-form-header-actions[b-dnarn86szo] {
        width: 100%;
    }

        .cobro-form-header-actions .cfb-action-btn[b-dnarn86szo],
        .cobro-form-header-actions .cfb-primary-btn[b-dnarn86szo] {
            flex: 1 1 auto;
        }

    .cfb-fields-grid[b-dnarn86szo] {
        grid-template-columns: 1fr;
    }

    .cfb-field-full[b-dnarn86szo] {
        grid-column: auto;
    }

    .cobro-form-docs-header[b-dnarn86szo] {
        flex-direction: column;
        align-items: stretch;
    }

    .cfb-docs-actions[b-dnarn86szo] {
        width: 100%;
    }

        .cfb-docs-actions .cfb-action-btn[b-dnarn86szo] {
            width: 100%;
        }

    .cfb-total-row[b-dnarn86szo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

@media (max-width: 640px) {
    .cobro-form-title[b-dnarn86szo] {
        font-size: 20px;
    }

    .cobro-form-subtitle[b-dnarn86szo] {
        font-size: 12px;
    }

    .card-panel[b-dnarn86szo] {
        padding: 12px;
    }

    .cobro-form-header-actions[b-dnarn86szo] {
        flex-direction: column;
        align-items: stretch;
    }

        .cobro-form-header-actions .cfb-action-btn[b-dnarn86szo],
        .cobro-form-header-actions .cfb-primary-btn[b-dnarn86szo] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .cobro-form-page[b-dnarn86szo],
    .cobro-form-page *[b-dnarn86szo],
    .cobro-form-page *[b-dnarn86szo]::before,
    .cobro-form-page *[b-dnarn86szo]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Estados y controles del alta de cobro/pago */
.cfb-error-banner[b-dnarn86szo] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    border-radius: 6px;
}

.cfb-empty-hint[b-dnarn86szo] {
    padding: 24px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.cfb-grid-check[b-dnarn86szo] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2563eb;
}

/* DIÁLOGO DE CONFIRMACIÓN (totales previos a emitir) */
.cfb-modal-overlay[b-dnarn86szo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    animation: cfbOverlayIn-b-dnarn86szo 0.16s ease both;
}

.cfb-modal[b-dnarn86szo] {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: cfbModalIn-b-dnarn86szo 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cfb-modal-title[b-dnarn86szo] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.cfb-modal-subtitle[b-dnarn86szo] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.cfb-modal-rows[b-dnarn86szo] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cfb-modal-row[b-dnarn86szo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

    .cfb-modal-row span[b-dnarn86szo] {
        font-size: 12px;
        color: #4b5563;
        font-weight: 750;
    }

    .cfb-modal-row strong[b-dnarn86szo] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
    }

.cfb-modal-row-total[b-dnarn86szo] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

    .cfb-modal-row-total span[b-dnarn86szo] {
        color: #1d4ed8;
    }

    .cfb-modal-row-total strong[b-dnarn86szo] {
        color: #1d4ed8;
        font-size: 15px;
    }

.cfb-modal-error[b-dnarn86szo] {
    margin-top: 12px;
    padding: 9px 12px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
    border-radius: 6px;
}

.cfb-modal-actions[b-dnarn86szo] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@keyframes cfbOverlayIn-b-dnarn86szo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cfbModalIn-b-dnarn86szo {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/CobrosPagos/Components/RemesaListaView.razor.rz.scp.css */
.cobros-page[b-sa0oled97j],
.cobros-page *[b-sa0oled97j],
.cobros-page *[b-sa0oled97j]::before,
.cobros-page *[b-sa0oled97j]::after {
    box-sizing: border-box;
}

.cobros-page[b-sa0oled97j] {
    /* ALTO: la página vale exactamente la pantalla —el alto visible que cede .main-body— y NO crece con
       su contenido. Cuando las filas no caben, quien se desplaza es el cuerpo de la tabla por dentro;
       la cabecera de columnas, el paginador y el resumen del pie se quedan donde están, siempre a la
       vista. La alternativa (página que crece y scroll de .main-body) dejaba el resumen fuera de
       pantalla, y pegarlo con `sticky` hacía pasar las filas por detrás.
       `min-height: 0` para que la restricción de alto llegue hasta abajo: sin él, un item flex nunca
       se encoge por debajo de su contenido y la tabla volvería a empujar la página.
       La página no tiene título: la primera cosa que se ve es el listado, y su cabecera son los propios
       tabs. Columna flexible en vez de rejilla porque los dos banners son condicionales: sin ellos no
       hay item, y por tanto tampoco un hueco muerto arriba. */
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* SIN `animation-fill-mode`. Con `both`, al terminar la entrada la página CONSERVA los valores del
       último fotograma —`transform: translateY(0)` y `filter: blur(0)`—, y un transform o un filter,
       aunque sean neutros, convierten al elemento en bloque contenedor de sus descendientes
       `position: fixed`. Eso encerraba los overlays de los modales dentro del listado en vez de dejarlos
       cubrir la ventana. Sin fill, al acabar se vuelve a los valores naturales y el efecto desaparece;
       como no hay `animation-delay`, el primer fotograma se aplica igual y no hay parpadeo. */
    animation: cobrosPageIn-b-sa0oled97j 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.cobros-list-panel[b-sa0oled97j] {
    /* Ocupa el alto que sobra tras los avisos, sin desbordarlo: `min-height: 0` deja que se encoja y
       traslade la restricción a la tabla, que es la única pieza que cede (por dentro). */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Cabecera (tabs + comandos) y filtros: su alto natural, ni crecen ni se comprimen. */
.cobros-list-panel > .cb-barra[b-sa0oled97j],
.cobros-list-panel > .cobros-filters[b-sa0oled97j] {
    flex: 0 0 auto;
}

/* CABECERA DEL LISTADO: TABS + COMANDOS
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Una sola fila: el conmutador de secciones a la izquierda y el <CommandBar> a la derecha. La línea
   inferior la lleva la FILA (no los tabs), para que siga cruzando el ancho completo aunque los tabs
   se queden cortos o se hagan scrollables.

   El reparto de ancho lo gobierna commandBar.js midiendo el desbordamiento de esta fila, así que su
   contenido NO puede envolver ni encogerse por su cuenta: si lo hiciera, la fila siempre «cabría» y
   la barra no se replegaría nunca. La clase `cobros-header` viene del markup y es lo que ancla al
   CommandBar (regla global en app.css: `flex: 0 0 auto`, nunca crece). */

.cobros-page .cb-barra[b-sa0oled97j] {
    border-bottom: 1px solid #e5eaf0;
}

/* Incrustada en una ficha no hay bloque de título, y el CommandBar se queda como hijo único de una fila
   `space-between`: sin esto se iría al borde izquierdo, que es justo donde no va una botonera. */
.cobros-page .cb-barra.cb-barra-sin-titulo[b-sa0oled97j] {
    justify-content: flex-end;
}

/* Los tabs se apoyan en la línea de la fila aunque la barra de comandos sea más alta. */
.cobros-page .cb-barra .cb-secciones[b-sa0oled97j] {
    align-self: flex-end;
}

.cb-secciones[b-sa0oled97j] {
    display: flex;
    gap: 4px;
    /* FASES 1-3: los tabs conservan SU ancho y no ceden ni un píxel; quien se estrecha es la barra
       de comandos (pierde los textos y repliega botones al «···»). El desbordamiento que eso deja
       en la fila es justo lo que el script mide. */
    flex: 0 0 auto;
}

/* FASE 4: la barra ya está en el hueso («···» y nada más) y aún no cabe. El script marca la fila con
   `command-bar-host-collapsed` y solo ENTONCES los tabs ceden el ancho sobrante y se desplazan por
   dentro. Es el único estado en el que aparece scroll. */
.cobros-page .cb-barra.command-bar-host-collapsed .cb-secciones[b-sa0oled97j] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.cb-seccion[b-sa0oled97j] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    /* Un tab se lee entero o no se lee: nunca se estrecha ni parte su etiqueta. */
    flex: 0 0 auto;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .cb-seccion:hover[b-sa0oled97j] {
        color: #1f2937;
    }

.cb-seccion-activa[b-sa0oled97j] {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* Vencimiento pendiente cuya fecha ya pasó: se marca en la propia fecha. */
[b-sa0oled97j] .cb-vto-vencido {
    color: #b91c1c;
    font-weight: 600;
}

/* FILTROS */

.cobros-filters[b-sa0oled97j] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px 180px;
    gap: 10px;
    align-items: center;
}

.cb-filter-item[b-sa0oled97j],
.cb-filter-item-search[b-sa0oled97j] {
    min-width: 0;
}

.cb-filter-input[b-sa0oled97j],
.cb-filter-select[b-sa0oled97j] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cb-filter-input[b-sa0oled97j] {
    padding: 0 13px;
}

.cb-filter-select[b-sa0oled97j] {
    padding: 0 12px;
    cursor: pointer;
}

.cb-filter-input[b-sa0oled97j]::placeholder {
    color: #9ca3af;
}

.cb-filter-input:focus[b-sa0oled97j],
.cb-filter-select:focus[b-sa0oled97j] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en este componente es solo lo
   que la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las
   celdas que aporta el propio listado como plantilla (insignia de estado).

   Todas esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que
   el CSS scoped de este componente no lo alcanza por sí solo. */

.cb-tabla[b-sa0oled97j] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Se queda con el alto que sobra en el panel y SÍ se comprime: es la pieza elástica de la página.
       `min-height: 0` es lo que permite que baje de su contenido; sin él la tabla empujaría el panel. */
    flex: 1 1 auto;
    min-height: 0;
}

/* La tabla se comprime hasta el alto disponible y se desplaza por dentro: es justo el comportamiento
   por defecto de .tp-panel (`min-height: 0`), así que aquí no hay nada que corregir. */

/* SELECTOR DE FILA (plantilla de la primera columna)
   La columna no dice nada: solo sostiene la casilla. Se le recorta el acolchado lateral —el de la
   tabla (14px por lado) es el que da el ritmo de las columnas CON contenido— para que no robe ancho
   a las que sí lo tienen. Va sobre `.tp-table` para ganar a `.tp-table thead th.tp-th-plain`, que
   fija el acolchado de las cabeceras sin orden. */
.cobros-page[b-sa0oled97j]  .tp-table .cb-col-check {
    padding-left: 6px;
    padding-right: 6px;
}

.cobros-page[b-sa0oled97j]  .cb-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cobros-page[b-sa0oled97j]  .cb-check input {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* Fila marcada: es la que reciben «Devolver» y «Anular». */
.cobros-page[b-sa0oled97j]  .cb-row-sel > td {
    background: #eff6ff;
}

/* RESUMEN DE LO MARCADO
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Tabla de solo lectura bajo el listado: una fila de totales de las filas marcadas. El markup es de
   este componente (no de TablaPaginada), así que NO necesita `::deep`, pero sí repetir el marco para
   que se lea como hermana de la tabla de arriba. */

.cb-resumen[b-sa0oled97j] {
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    /* Alto natural, al pie de la página. No necesita pegarse a nada: la página cabe siempre en la
       pantalla y es el cuerpo de la tabla el que se desplaza, así que ninguna fila pasa por detrás. */
    flex: 0 0 auto;
}

.cb-resumen-tabla[b-sa0oled97j] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

    /* Cabecera y valor centrados en su celda, y separados por línea vertical: son cinco magnitudes
       independientes, no una lista que se lea en columna. La línea se pone como borde IZQUIERDO de
       cada celda salvo la primera, así no sobra una al final. */
    .cb-resumen-tabla th[b-sa0oled97j],
    .cb-resumen-tabla td[b-sa0oled97j] {
        text-align: center;
        white-space: nowrap;
        border-left: 1px solid #e5eaf0;
    }

        .cb-resumen-tabla th:first-child[b-sa0oled97j],
        .cb-resumen-tabla td:first-child[b-sa0oled97j] {
            border-left: none;
        }

    .cb-resumen-tabla th[b-sa0oled97j] {
        padding: 9px 14px;
        border-bottom: 1px solid #e5eaf0;
        background: #f8fafc;
        font-size: 11.5px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .cb-resumen-tabla td[b-sa0oled97j] {
        padding: 11px 14px;
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
    }

/* Sin nada marcado los totales son ceros: se apagan para que no compitan con la tabla de arriba. */
.cb-resumen-vacio td[b-sa0oled97j] {
    color: #9ca3af;
    font-weight: 600;
}

/* INSIGNIA DE ESTADO (plantilla de la columna «Estado»)
   La forma es de esta pantalla; el COLOR es del semáforo de estado (wwwroot/css/semaforo.css), el mismo
   del listado de documentos y de las fichas: la insignia lleva la clase del significado (sem-pendiente,
   sem-vencido, sem-completo, sem-anticipo, sem-historico) y aquí solo se leen sus variables.
   Un pendiente VENCIDO se sigue leyendo «Pendiente», pero va en rojo, y su fecha también (.cb-vto-vencido). */

.cobros-page[b-sa0oled97j]  .cb-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--sem-fg, inherit);
    background: var(--sem-bg, transparent);
    border: 1px solid var(--sem-bd, transparent);
    white-space: nowrap;
}

/* La celda de estado puede llevar DOS insignias: el estado y, si lo es, «Abono». Se apilan para no
   estrechar el estado en una columna que ya es justa. */
.cobros-page[b-sa0oled97j]  .cb-estado-celda {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* El abono no es un estado ni un error: es una naturaleza. Va en un tono propio y con el mínimo más
   corto, para que se lea como una etiqueta y no compita con el estado. */
.cobros-page[b-sa0oled97j]  .cb-estado-abono {
    min-width: 0;
    height: 18px;
    font-size: 10px;
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* ESTADOS DE CARGA / ERROR DEL LISTADO */

.cb-loading[b-sa0oled97j] {
    padding: 24px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.cb-error-banner[b-sa0oled97j] {
    padding: 12px 16px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    border-radius: 6px;
}

/* AVISO DE ÉXITO (devolución / anulación) */
.cb-aviso-banner[b-sa0oled97j] {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    border-radius: 6px;
}

/* ANIMACIONES */

@keyframes cobrosPageIn-b-sa0oled97j {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE (Desktop first) */

/* PANTALLA MUY BAJA: se cede el modelo de alto.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El modelo normal («la página vale la pantalla y solo se desplazan las filas») necesita que sobre
   alto para el cuerpo de la tabla. Por debajo de este punto ya no sobra: el marco de la tabla
   toparía con su suelo (.tp-shell, 240px), la página desbordaría igualmente y encima nos quedaríamos
   con una ventanita de dos filas. Así que aquí se hace lo contrario a propósito: cada bloque ocupa
   lo que necesita, la página crece y el scroll lo lleva .main-body, como cualquier pantalla larga.

   El umbral sale de sumar el alto que NO es tabla: cabecera de la aplicación (64) + padding de
   .main-body (32) + tabs (~41) + filtros (38) + resumen (~76) + huecos (~33) ≈ 284, más el suelo de
   la tabla (240) ≈ 524. Se redondea a 600 para que el cambio ocurra antes de quedarse sin filas
   útiles, no justo cuando ya no cabe nada. */
@media (max-height: 600px) {
    .cobros-page[b-sa0oled97j] {
        height: auto;
        min-height: 100%;
    }

    /* flex-shrink: 0 — la tabla deja de ser la pieza elástica y empuja el alto de la página. */
    .cb-tabla[b-sa0oled97j] {
        flex: 1 0 auto;
    }
}

/* COLUMNAS REPLEGABLES
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Al estrechar la ventana caen primero las menos importantes. La clase la lleva la cabecera Y sus
   celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez.

   En CARTERA no se van nunca: «Documento», «Cobrado» y «Pendiente» —qué es, cuánto se ha saldado y
   cuánto queda—. El resto cae en este orden:
     1280 · Forma de pago — condición bajo la que nació, no lo que se mira aquí.
     1120 · Importe       — es exactamente Cobrado + Pendiente, así que no aporta nada nuevo.
      980 · Vencimiento   — se sigue viendo en el documento.
      820 · Tercero       — el último en irse: de los prescindibles es el que más identifica la fila.
   «Estado» no se oculta: a partir de 1120 se reduce a un punto de color (ver más abajo).

   En REMESAS el orden se mantiene: concepto (1280), nº de documentos (1120) y tipo (980). */

@media (max-width: 1280px) {
    .cobros-page[b-sa0oled97j]  .cb-col-concepto,
    .cobros-page[b-sa0oled97j]  .cb-col-formapago {
        display: none;
    }
}

@media (max-width: 1120px) {
    /* La FECHA de la operación cede antes que el vencimiento: cuando el sitio aprieta, de un recibo
       importa cuándo hay que cobrarlo, no de cuándo es su factura. */
    .cobros-page[b-sa0oled97j]  .cb-col-docs,
    .cobros-page[b-sa0oled97j]  .cb-col-fecha,
    .cobros-page[b-sa0oled97j]  .cb-col-importe {
        display: none;
    }
}

@media (max-width: 980px) {
    .cobros-page[b-sa0oled97j]  .cb-col-tipo,
    .cobros-page[b-sa0oled97j]  .cb-col-vencimiento {
        display: none;
    }
}

@media (max-width: 820px) {
    .cobros-page[b-sa0oled97j]  .cb-col-tercero {
        display: none;
    }
}

/* ESTADO REDUCIDO A PUNTO DE COLOR
   La insignia con texto pide ~110px; como punto pide 12. Se reduce en vez de ocultarse porque el
   estado es lo que más dice de un vistazo, y a este tamaño ya no compite con nada. El texto sigue
   en el DOM (`font-size: 0`, no `display:none`): los lectores de pantalla lo leen igual, y el
   `title` de la plantilla lo devuelve al puntero.

   El rótulo de la cabecera se va con él: en cuanto la celda es un punto, «ESTADO» pasa a ser la pieza
   más ancha de la columna y marcaría el suelo (~95px con `table-layout: auto`), justo lo que se venía
   a ahorrar. Se oculta solo el TEXTO del botón de orden, no el botón: la columna se sigue pudiendo
   ordenar, y su icono aparece al pasar por encima como en cualquier otra.

   El ancho de la columna viene inline desde ColumnaTabla.Ancho, y `!important` es lo único que lo
   recupera. */
@media (max-width: 1120px) {
    .cobros-page[b-sa0oled97j]  .cb-col-estado {
        width: 56px !important;
    }

    /* Texto del rótulo fuera; el icono de orden (segundo span) se queda. */
    .cobros-page[b-sa0oled97j]  .cb-col-estado .tp-sort > span:not(.tp-sort-icon) {
        display: none;
    }

    .cobros-page[b-sa0oled97j]  .cb-col-estado .tp-sort {
        padding: 0 8px;
    }

    .cobros-page[b-sa0oled97j]  .cb-estado-badge {
        min-width: 0;
        width: 12px;
        height: 12px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        /* Relleno sólido (el del semáforo): en punto, el fondo pálido de la insignia no se distinguiría. */
        background: var(--sem-solido, #94a3b8);
        border-color: transparent;
    }
}

@media (max-width: 1280px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px 160px;
    }
}

@media (max-width: 980px) {
    /* El modelo de alto («suelo = la pantalla, y crece si hace falta») ya es el mismo en todos los
       anchos, así que aquí no hay nada que corregir: solo el reparto de los filtros. Dos por fila
       —buscador y recibos/abonos arriba, estados y fechas abajo—: con el buscador ocupando una fila
       entera, los tres desplegables dejaban un hueco vacío al final. */
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cobros-page[b-sa0oled97j],
    .cobros-page *[b-sa0oled97j],
    .cobros-page *[b-sa0oled97j]::before,
    .cobros-page *[b-sa0oled97j]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLA ÚNICA: título, insignia de estado y columnas de dinero
   ───────────────────────────────────────────────────────────────────────────── */

/* El título sustituye al conmutador de pestañas: ocupa su sitio en la barra y cede el ancho igual que
   cedían los tabs cuando el CommandBar se repliega. */
.cb-titulo[b-sa0oled97j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cb-titulo-texto[b-sa0oled97j] {
    margin: 0;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 850;
    color: #1f2937;
    line-height: 1.15;
}

.cb-titulo-sub[b-sa0oled97j] {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los colores de las insignias de estado los pone el semáforo (SemaforoCss), no esta hoja. */

/* Cuatro celdas de filtro: buscador + tres desplegables (recibos y abonos, estado y fechas). */
.cobros-filters[b-sa0oled97j] {
    grid-template-columns: minmax(240px, 1fr) 170px 170px 170px;
}

/* REPLEGADO
   Con cuatro columnas de dinero hay que ceder antes. Orden: Gastos → Forma de pago → Anticipo →
   Estado → Vencimiento → Documento → Tercero. Las dos columnas que más se miran
   (Importe y lo pagado) no se repliegan nunca. */
@media (max-width: 1400px) {
    .cobros-page[b-sa0oled97j]  .cb-col-gastos {
        display: none;
    }
}

@media (max-width: 1180px) {
    .cobros-page[b-sa0oled97j]  .cb-col-anticipo {
        display: none;
    }
}

@media (max-width: 1280px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px 160px;
    }
}

@media (max-width: 980px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: 1fr 1fr;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/CobrosPagos/Components/VencimientosModal.razor.rz.scp.css */
/* Modal de «Modificar vencimientos». El overlay, la tarjeta y la cabecera los pone el Modal compartido; aquí
   el contenido, con el mismo aspecto que el modal de cobro (cbm-*). */

.vtm-body[b-q73jkc85jt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 16px 4px;
}

.vtm-body[b-q73jkc85jt]  .material-symbols-outlined {
    user-select: none;
    -webkit-user-select: none;
}

.vtm-error[b-q73jkc85jt] {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.4;
}

.vtm-resumen[b-q73jkc85jt] {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
}

.vtm-diferencia[b-q73jkc85jt] {
    color: #b45309;
    font-weight: 700;
}

/* La lista puede ser larga (un plazo por mes de un año): scroll propio, cabecera fija. */
.vtm-tabla[b-q73jkc85jt] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    display: block;
    max-height: 50vh;
    overflow-y: auto;
}

.vtm-tabla thead th[b-q73jkc85jt] {
    position: sticky;
    top: 0;
    background: #fff;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    padding: 0 6px 4px;
}

.vtm-tabla td[b-q73jkc85jt] {
    padding: 0 6px;
    vertical-align: middle;
}

.vtm-input[b-q73jkc85jt] {
    width: 100%;
    height: 40px;
    border: 1px solid #dde5ee;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
}

.vtm-input:focus[b-q73jkc85jt] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.vtm-num[b-q73jkc85jt] {
    text-align: right;
    min-width: 110px;
}

.vtm-quitar[b-q73jkc85jt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    cursor: pointer;
}

.vtm-quitar:disabled[b-q73jkc85jt] {
    color: #cbd5e1;
    cursor: default;
}

.vtm-anadir[b-q73jkc85jt] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px dashed #93c5fd;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Cuentas/Pages/CuentaFicha.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE CUENTA DE TESORERÍA — pantalla unificada (ver + editar + alta)
   ───────────────────────────────────────────────────────────────────────────
   Usa el MISMO sistema visual `cform-*` que la ficha de cliente (tarjetas,
   rejilla de 12 columnas, inputs y controles) más el cromo propio de la ficha
   (cabecera con navegador y modal de borrado, clases cf-*). Dos bloques:

     1. SISTEMA cform-*  — tokens, rejilla, tarjetas, campos y controles.
     2. CROMO DE FICHA   — cabecera con el navegador y el modal de borrado.

   El contenido de los tabs vive en componentes hijos (Views/), así que casi
   todas las reglas van con `::deep`: el CSS scoped de esta página no alcanza
   el DOM de sus hijos por sí solo. Las insignias de la ventana de búsqueda
   (cf-sel-estado-*) son GLOBALES y viven en wwwroot/css/ficha-terceros.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El reset alcanza también el DOM de las vistas de Views/ (`::deep`): sin él, Blazor ataría el `*` al
   scope de ESTA página y los hijos se quedarían sin box-sizing. */
.cform-page[b-2iriricyso],
.cform-page[b-2iriricyso]  *,
.cform-page[b-2iriricyso]  *::before,
.cform-page[b-2iriricyso]  *::after {
    box-sizing: border-box;
}

.cform-page[b-2iriricyso] {
    /* Fondo de .main-body: lo replican la barra pegada y su sangrado superior. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* min-height:100% = suelo de comodidad: la página llena como mínimo el alto que le cede .main-body
       (y crece por encima si su contenido no cabe; el scroll lo lleva la ventana). */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--cf-text);
    animation: cuentaFichaPageIn-b-2iriricyso 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA PEGADA  ─────────────────────────────
   Navegador/título, acciones y pestañas viajan juntos en un único elemento sticky:
   así no hay que saber cuánto mide la cabecera para posicionar el resto. */

.cform-chrome[b-2iriricyso] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cf-bg);
}

    /* .main-body tiene padding: sin este sangrado, el contenido asomaría por encima de la barra
       pegada al desplazar. */
    .cform-chrome[b-2iriricyso]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 20px;
        background: var(--cf-bg);
    }

.cform-topbar[b-2iriricyso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    min-width: 0;
}

/* El bloque de título cede espacio para que el CommandBar conserve su ancho natural. */
.cform-topbar-text[b-2iriricyso] {
    min-width: 0;
}

.cform-title[b-2iriricyso] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cform-subtitle[b-2iriricyso] {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

/* El propio CommandBar repliega comandos al menú «···» cuando falta ancho. */
.cform-page[b-2iriricyso]  .cform-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* ===== CABECERA CON NAVEGADOR (modo ficha/edición) =====
   Fila del navegador entre cuentas (izquierda) + CommandBar (derecha). Reemplaza
   al `cform-topbar` cuando hay una cuenta cargada. */
.cuenta-ficha-header[b-2iriricyso] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
}

/* Fase 2: el CommandBar ya está totalmente replegado a «···» y aún no cabe -> el navegador cede. */
.cuenta-ficha-header.command-bar-host-collapsed[b-2iriricyso]  .cf-nav {
    flex: 1 1 auto;
}

/* Último recurso: si ni con el CommandBar replegado cabe todo, la info de la cuenta cede. */
.cuenta-ficha-header.command-bar-host-collapsed[b-2iriricyso]  .cf-identity-wrap {
    min-width: 0;
}

.cuenta-ficha-header[b-2iriricyso]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* Pestañas: el rail inferior lo dibuja <ScrollableTabs>; aquí solo los botones. */
.cform-tabs[b-2iriricyso] {
    min-width: 0;
}

.cform-tab[b-2iriricyso] {
    flex: 0 0 auto;
    height: 38px;
    margin-bottom: -1px;    /* el subrayado activo solapa el rail de 1px */
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .cform-tab:hover[b-2iriricyso] {
        color: var(--cf-text-2);
    }

    .cform-tab.active[b-2iriricyso] {
        color: var(--cf-brand-strong);
        border-bottom-color: var(--cf-brand);
    }

    .cform-tab:focus-visible[b-2iriricyso] {
        outline: 2px solid var(--cf-brand-line);
        outline-offset: -2px;
    }

.cform-tabpanel[b-2iriricyso] {
    /* Rellena el alto sobrante bajo la cabecera pegada y se lo cede a su contenido.
       flex-basis:auto + min-height:0 → puede crecer por encima si el contenido no cabe. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--cf-gap);
    padding-bottom: 4px;
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.cform-alert[b-2iriricyso] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cf-gap);
    padding: 10px 14px;
    border: 1px solid var(--cf-danger-line);
    border-left: 3px solid #dc2626;
    border-radius: var(--cf-r-md);
    background: var(--cf-danger-soft);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .cform-alert .material-symbols-outlined[b-2iriricyso] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ─────────────────────  REJILLA DE PÁGINA (TARJETAS)  ───────────────────── */

.cform-page[b-2iriricyso]  .cform-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cf-gap);
    align-items: start;
    min-width: 0;
}

.cform-page[b-2iriricyso]  .cform-col-4 {
    grid-column: span 4;
}

.cform-page[b-2iriricyso]  .cform-col-6 {
    grid-column: span 6;
}

.cform-page[b-2iriricyso]  .cform-col-8 {
    grid-column: span 8;
}

.cform-page[b-2iriricyso]  .cform-col-12 {
    grid-column: 1 / -1;
}

/* Una sola columna de tarjetas cuando el ancho ya no da para dos. */
@media (max-width: 1100px) {
    .cform-page[b-2iriricyso]  .cform-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cform-page[b-2iriricyso]  .cform-col-4,
    .cform-page[b-2iriricyso]  .cform-col-6,
    .cform-page[b-2iriricyso]  .cform-col-8,
    .cform-page[b-2iriricyso]  .cform-col-12 {
        grid-column: 1 / -1;
    }
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-2iriricyso]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

.cform-page[b-2iriricyso]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-2iriricyso]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho de ESTA tarjeta,
   no del viewport. */
.cform-page[b-2iriricyso]  .cform-card-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-2iriricyso]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-2iriricyso]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-2iriricyso]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-2iriricyso]  .cform-field-2 {
    grid-column: span 2;
}

.cform-page[b-2iriricyso]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-2iriricyso]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-2iriricyso]  .cform-field-5 {
    grid-column: span 5;
}

.cform-page[b-2iriricyso]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-2iriricyso]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-2iriricyso]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-2iriricyso]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-2iriricyso]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-2iriricyso]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-2iriricyso]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ─────────────────────────────
   `::deep` además del selector directo: el input puede venir de un componente hijo
   (CampoConBuscador hereda la clase del host vía ClaseInput) y el CSS scoped de esta
   página no lo marcaría. Anclado en .cform-page para no sangrar a otros componentes. */

.cform-page[b-2iriricyso]  .cform-input,
.cform-page[b-2iriricyso]  .cform-select,
.cform-page[b-2iriricyso]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-2iriricyso]  .cform-input,
.cform-page[b-2iriricyso]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-2iriricyso]  .cform-select {
    cursor: pointer;
}

.cform-page[b-2iriricyso]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-2iriricyso]  .cform-input::placeholder,
.cform-page[b-2iriricyso]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-2iriricyso]  .cform-input:hover,
.cform-page[b-2iriricyso]  .cform-select:hover,
.cform-page[b-2iriricyso]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-2iriricyso]  .cform-input:focus,
.cform-page[b-2iriricyso]  .cform-select:focus,
.cform-page[b-2iriricyso]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

/* El input con buscador (Cuenta contable) necesita hueco a la derecha para la lupa. */
.cform-page[b-2iriricyso]  .ccb-input-con-boton {
    padding-inline-end: 1.9rem;
}

/* Observaciones ocupa aproximadamente el alto de la tarjeta vecina (Datos bancarios). */
.cform-page[b-2iriricyso]  .cform-field-full > .cform-textarea {
    min-height: 168px;
}

/* IBAN y BIC se leen mejor con cifras de ancho fijo. */
.cform-page[b-2iriricyso]  #fct-Iban .cform-input,
.cform-page[b-2iriricyso]  #fct-CodigoBic .cform-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ─────────────────────────────  CASILLAS  ───────────────────────────── */

.cform-page[b-2iriricyso]  .cform-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-2iriricyso]  .cform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-2iriricyso]  .cform-check:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    /* La casilla marcada se lee de un vistazo, sin mirar el cuadrito. */
    .cform-page[b-2iriricyso]  .cform-check:has(input:checked) {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-2iriricyso]  .cform-check:focus-within {
        box-shadow: var(--cf-ring);
    }

    .cform-page[b-2iriricyso]  .cform-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cf-brand);
    }

/* ────────────────────────  PANEL VACÍO (tabs pendientes)  ──────────────────────── */

.cform-page[b-2iriricyso]  .cform-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    padding: 32px;
    text-align: center;
}

    .cform-page[b-2iriricyso]  .cform-placeholder .material-symbols-outlined {
        font-size: 34px;
        color: var(--cf-faint);
    }

.cform-page[b-2iriricyso]  .cform-placeholder-title {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--cf-text);
}

.cform-page[b-2iriricyso]  .cform-placeholder-hint {
    margin: 0;
    max-width: 40ch;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   CROMO DE FICHA — modal de confirmación de borrado (contenido del <Modal>)
   ══════════════════════════════════════════════════════════════════════════ */

.cf-action-btn[b-2iriricyso] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cf-action-btn:hover[b-2iriricyso] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cf-danger-btn[b-2iriricyso] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .cf-danger-btn:hover:not(:disabled)[b-2iriricyso] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .cf-danger-btn:disabled[b-2iriricyso] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.cf-confirm-modal[b-2iriricyso] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cf-confirm-icon[b-2iriricyso] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.cf-confirm-body[b-2iriricyso] {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-confirm-subtitle[b-2iriricyso] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .cf-confirm-subtitle strong[b-2iriricyso] {
        font-weight: 850;
        color: #1f2937;
    }

.cf-confirm-error[b-2iriricyso] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 750;
}

.cf-confirm-actions[b-2iriricyso] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ───────────────────────────────  ANIMACIÓN  ─────────────────────────────
   Solo opacidad: NO usar filter/transform aquí. Un ancestro con filter (aunque sea blur(0)) crea un
   «containing block» para los descendientes position:fixed, lo que atraparía los modales dentro del
   área de la ficha en vez de cubrir el viewport. */
@keyframes cuentaFichaPageIn-b-2iriricyso {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-2iriricyso] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-2iriricyso] {
        font-size: 18px;
    }

    .cform-subtitle[b-2iriricyso] {
        display: none;   /* en móvil el subtítulo solo roba altura a la barra pegada */
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-2iriricyso],
    .cform-page[b-2iriricyso]  *,
    .cform-page[b-2iriricyso]  *::before,
    .cform-page[b-2iriricyso]  *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Cuentas/Pages/CuentasPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   GESTIÓN DE CUENTAS — listado de cuentas de tesorería
   ───────────────────────────────────────────────────────────────────────────
   Mismo sistema visual que el listado de clientes (ClientesPage.razor.css):
   cabecera + filtros + <TablaPaginada>, sin tarjeta envolvente. El marco lo
   pone la propia tabla, así que aquí solo vive lo que la tabla no puede saber:
   el replegado de columnas por ancho de ventana y el aspecto de las celdas que
   aporta la página como plantilla (insignias y botones de acción).
   ═══════════════════════════════════════════════════════════════════════════ */

.cuentas-page[b-vzky3ddu3i],
.cuentas-page *[b-vzky3ddu3i],
.cuentas-page *[b-vzky3ddu3i]::before,
.cuentas-page *[b-vzky3ddu3i]::after {
    box-sizing: border-box;
}

/* ALTO: el suelo es la pantalla —el alto que cede .main-body— y a partir de ahí la página crece con su
   contenido. La última fila es `1fr`: reparte el espacio sobrante cuando sobra, y empuja el alto de la
   página cuando falta. Filas: cabecera, aviso de error y listado. */
.cuentas-page[b-vzky3ddu3i] {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    animation: cuentasPageIn-b-vzky3ddu3i 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA  ───────────────────────────── */

.cuentas-header[b-vzky3ddu3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Fase 1: el bloque de título se mantiene en una línea y NO cede; los botones del CommandBar se
       repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2). */
    .cuentas-header > div:first-child[b-vzky3ddu3i] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .cuentas-header.command-bar-host-collapsed > div:first-child[b-vzky3ddu3i] {
        flex: 1 1 auto;
    }

.cuentas-title[b-vzky3ddu3i] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.cuentas-subtitle[b-vzky3ddu3i] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.cuentas-header.command-bar-host-collapsed .cuentas-title[b-vzky3ddu3i],
.cuentas-header.command-bar-host-collapsed .cuentas-subtitle[b-vzky3ddu3i] {
    white-space: normal;
    overflow-wrap: break-word;
}

.cuentas-header-actions[b-vzky3ddu3i] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.ct-alert[b-vzky3ddu3i] {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    font-size: 13px;
}

/* ─────────────────────────  PANEL DEL LISTADO  ───────────────────────── */

.cuentas-list-panel[b-vzky3ddu3i] {
    /* Se ancla siempre a la última fila (la de 1fr), esté o no el banner de error. */
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 9px;
}

.cuentas-filters[b-vzky3ddu3i] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: center;
}

.ct-filter-item[b-vzky3ddu3i],
.ct-filter-item-search[b-vzky3ddu3i] {
    min-width: 0;
}

.ct-filter-searchbox[b-vzky3ddu3i] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ct-filter-search-icon[b-vzky3ddu3i] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ct-filter-input[b-vzky3ddu3i],
.ct-filter-select[b-vzky3ddu3i] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ct-filter-input[b-vzky3ddu3i] {
    padding: 0 13px;
}

.ct-filter-input-search[b-vzky3ddu3i] {
    padding-left: 38px;
}

.ct-filter-select[b-vzky3ddu3i] {
    padding: 0 12px;
    cursor: pointer;
}

.ct-filter-input[b-vzky3ddu3i]::placeholder {
    color: #9ca3af;
}

.ct-filter-input:focus[b-vzky3ddu3i],
.ct-filter-select:focus[b-vzky3ddu3i] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ───────────────────────────────  TABLA  ───────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado
   vacío y paginador): ese estilo vive en su propio CSS y NO se replica aquí. Las
   reglas de abajo van con `::deep` porque apuntan a markup que renderiza la
   tabla, no esta página. */

.ct-tabla[b-vzky3ddu3i] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto. */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con su `min-height: 0` por defecto el contenido no
   podría empujar la fila `1fr` del grid y la tabla se desplazaría por dentro en vez de crecer. */
.cuentas-page[b-vzky3ddu3i]  .tp-panel {
    min-height: auto;
}

/* IBAN: tipografía tabular para que los grupos de dígitos queden alineados entre filas. */
.cuentas-page[b-vzky3ddu3i]  .ct-col-iban {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ──────────────────────  ACCIONES POR FILA  ────────────────────── */

.cuentas-page[b-vzky3ddu3i]  .ct-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cuentas-page[b-vzky3ddu3i]  .ct-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que se pueda seleccionar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
}

    .cuentas-page[b-vzky3ddu3i]  .ct-action-btn .material-symbols-outlined {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

.cuentas-page[b-vzky3ddu3i]  .ct-action-btn-edit {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .cuentas-page[b-vzky3ddu3i]  .ct-action-btn-edit:hover {
        background: rgba(0, 40, 142, 0.1);
    }

.cuentas-page[b-vzky3ddu3i]  .ct-action-btn-delete {
    color: #444653;
}

    .cuentas-page[b-vzky3ddu3i]  .ct-action-btn-delete:hover {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* ────────────────────────────  INSIGNIAS  ──────────────────────────── */

.cuentas-page[b-vzky3ddu3i]  .ct-estado-badge,
.cuentas-page[b-vzky3ddu3i]  .ct-tipo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cuentas-page[b-vzky3ddu3i]  .ct-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cuentas-page[b-vzky3ddu3i]  .ct-estado-gray {
    color: #4b5563;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

/* Categoría: un color por naturaleza de cuenta, para distinguirlas de un vistazo. */
.cuentas-page[b-vzky3ddu3i]  .ct-tipo-caja {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cuentas-page[b-vzky3ddu3i]  .ct-tipo-banco {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.cuentas-page[b-vzky3ddu3i]  .ct-tipo-tpv {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* ──────────────────────────────  ANIMACIÓN  ────────────────────────── */

@keyframes cuentasPageIn-b-vzky3ddu3i {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ─────────────────────────────  RESPONSIVE  ───────────────────────────
   Columnas replegables: al estrechar la ventana caen primero las menos
   importantes. «Código», «Nombre», «Estado» y «Acciones» no se van nunca. La
   clase la llevan la cabecera Y sus celdas (ColumnaTabla.CssClass), así que
   basta con ocultarla una vez. */

@media (max-width: 1440px) {
    .cuentas-page[b-vzky3ddu3i]  .ct-col-telefono {
        display: none;
    }
}

@media (max-width: 1280px) {
    .cuentas-page[b-vzky3ddu3i]  .ct-col-poblacion {
        display: none;
    }
}

@media (max-width: 1120px) {
    .cuentas-page[b-vzky3ddu3i]  .ct-col-iban {
        display: none;
    }
}

@media (max-width: 900px) {
    .cuentas-page[b-vzky3ddu3i]  .ct-col-banco {
        display: none;
    }
}

@media (max-width: 720px) {
    .cuentas-page[b-vzky3ddu3i]  .ct-col-categoria {
        display: none;
    }
}

@media (max-width: 1280px) {
    .cuentas-filters[b-vzky3ddu3i] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .cuentas-filters[b-vzky3ddu3i] {
        grid-template-columns: 1fr 1fr;
    }

    .ct-filter-item-search[b-vzky3ddu3i] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .cuentas-filters[b-vzky3ddu3i] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cuentas-title[b-vzky3ddu3i] {
        font-size: 20px;
    }

    .cuentas-subtitle[b-vzky3ddu3i] {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cuentas-page[b-vzky3ddu3i],
    .cuentas-page *[b-vzky3ddu3i],
    .cuentas-page *[b-vzky3ddu3i]::before,
    .cuentas-page *[b-vzky3ddu3i]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Cuentas/Views/CuentaExtractoView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TAB «EXTRACTO» de la ficha de cuenta
   ───────────────────────────────────────────────────────────────────────────
   Barra de filtros + <TablaPaginada>. Los filtros usan el MISMO lenguaje visual
   que el listado de cuentas (clases `ct-filter-*` de CuentasPage.razor.css):
   buscador con lupa embebida a la izquierda y campos de 38px redondeados. Se
   repiten aquí porque el CSS scoped de aquella página no alcanza a este
   componente, y anclarlo a un CSS global solo por esto no compensa.

   El marco, la cabecera con orden, las filas y el paginador los pinta la tabla
   (su propio CSS); aquí solo vive lo que ella no puede saber: el aspecto de las
   columnas de importe y su replegado por ancho.

   «Limpiar filtros» no está en esta barra: es un comando secundario del
   CommandBar de la ficha.
   ═══════════════════════════════════════════════════════════════════════════ */

.ct-extracto[b-68byk939h7] {
    /* Filas: filtros, aviso y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* ─────────────────────────────  BARRA DE FILTROS  ───────────────────────────── */

.ct-extracto-filtros[b-68byk939h7] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: end;
}

.ct-filter-item[b-68byk939h7] {
    min-width: 0;
}

/* La etiqueta solo la llevan las fechas: sin ella, dos campos de fecha contiguos no se
   distinguen. El buscador se explica con su placeholder. */
.ct-filter-label[b-68byk939h7] {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 600;
    color: #5b6472;
}

.ct-filter-searchbox[b-68byk939h7] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ct-filter-search-icon[b-68byk939h7] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ct-filter-input[b-68byk939h7] {
    width: 100%;
    height: 38px;
    padding: 0 13px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ct-filter-input-search[b-68byk939h7] {
    padding-left: 38px;
}

.ct-filter-input[b-68byk939h7]::placeholder {
    color: #9ca3af;
}

.ct-filter-input:focus[b-68byk939h7] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.ct-extracto-alert[b-68byk939h7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .ct-extracto-alert .material-symbols-outlined[b-68byk939h7] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ───────────────────────────────  TABLA  ─────────────────────────────── */

.ct-extracto-tabla[b-68byk939h7] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Se ancla a la última fila (la de 1fr) del grid, esté o no el aviso de error. */
    grid-row: -2 / -1;
}

/* Importes y referencia del apunte: cifras de ancho fijo para que las columnas queden alineadas
   entre filas, como en un extracto de papel. Las reglas van con `::deep` porque el markup al que
   apuntan lo renderiza <TablaPaginada>, no esta vista. */
.ct-extracto[b-68byk939h7]  .ct-ext-col-importe,
.ct-extracto[b-68byk939h7]  .ct-ext-col-apunte {
    font-variant-numeric: tabular-nums;
}

/* Título y factura son referencias largas: se recortan antes que descuadrar la tabla. */
.ct-extracto[b-68byk939h7]  .ct-ext-col-titulo,
.ct-extracto[b-68byk939h7]  .ct-ext-col-factura {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────  RESPONSIVE  ─────────────────────────────
   Al estrechar caen primero las columnas que menos identifican la fila. «Fecha»,
   «Concepto», «Ingresos» y «Salidas» no se van nunca: son el extracto en sí. */

@media (max-width: 1100px) {
    .ct-extracto[b-68byk939h7]  .ct-ext-col-apunte {
        display: none;
    }
}

@media (max-width: 900px) {
    .ct-extracto[b-68byk939h7]  .ct-ext-col-titulo {
        display: none;
    }
}

@media (max-width: 720px) {
    .ct-extracto[b-68byk939h7]  .ct-ext-col-factura {
        display: none;
    }
}

/* Mismo reparto que los filtros del listado de cuentas: primero se estrechan los campos, luego
   el buscador pasa a ocupar toda la fila y por último todo se apila. */
@media (max-width: 1280px) {
    .ct-extracto-filtros[b-68byk939h7] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .ct-extracto-filtros[b-68byk939h7] {
        grid-template-columns: 1fr 1fr;
    }

    .ct-filter-item-search[b-68byk939h7] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .ct-extracto-filtros[b-68byk939h7] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/DiarioCaja/Pages/DiarioCajaPage.razor.rz.scp.css */
/*
    Diario de caja/banco (DC5). Mismo vocabulario visual que el diario contable (DiarioPage): la rejilla
    propia con <colgroup> arrastrable, el cursor azul de la lista, la celda activa y las celdas del
    editor. Se repite aquí porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de DiarioPage
    no alcanza a esta página. Las clases que el transporte JS espera (dg-cursor, dg-celda-activa,
    dg-cell, dg-editing) conservan su nombre.
*/

.dc-page[b-lgy4588r0k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 24px;
    color: #1f2937;
}

/* CABECERA */

/* Mismo reparto que el resto de listados: sin `flex-wrap` (si la barra bajara de línea, su script nunca
   vería que falta sitio y no replegaría nada). */
.dc-header[b-lgy4588r0k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .dc-header > div:first-child[b-lgy4588r0k] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .dc-header.command-bar-host-collapsed > div:first-child[b-lgy4588r0k] {
        flex: 1 1 auto;
    }

.dc-title[b-lgy4588r0k] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.dc-subtitle[b-lgy4588r0k] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.dc-header.command-bar-host-collapsed .dc-title[b-lgy4588r0k],
.dc-header.command-bar-host-collapsed .dc-subtitle[b-lgy4588r0k] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* BOTONES */

.dc-btn[b-lgy4588r0k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

    .dc-btn:hover[b-lgy4588r0k] {
        background: #f8fafc;
    }

    .dc-btn:disabled[b-lgy4588r0k] {
        opacity: .55;
        cursor: default;
    }

.dc-btn-primary[b-lgy4588r0k] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

    .dc-btn-primary:hover[b-lgy4588r0k] {
        background: #1d4ed8;
    }

.dc-btn-ghost[b-lgy4588r0k] {
    background: #ffffff;
}

.dc-btn-danger[b-lgy4588r0k] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.dc-btn-sm[b-lgy4588r0k] {
    height: 32px;
    padding: 0 10px;
}

.dc-btn-xs[b-lgy4588r0k] {
    height: 24px;
    padding: 0 8px;
    font-size: 11.5px;
    border-radius: 6px;
}

.dc-btn-ico[b-lgy4588r0k] {
    font-size: 18px;
    line-height: 1;
}

.dc-icon-btn[b-lgy4588r0k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
}

    .dc-icon-btn:hover[b-lgy4588r0k] {
        background: #f1f5f9;
        color: #1f2937;
    }

    .dc-icon-btn:disabled[b-lgy4588r0k] {
        opacity: .5;
        cursor: default;
    }

    .dc-icon-btn .material-symbols-rounded[b-lgy4588r0k] {
        font-size: 20px;
    }

.dc-icon-danger[b-lgy4588r0k] {
    color: #b91c1c;
}

/* TARJETA Y CABECERA DE LA LISTA */

.dc-card[b-lgy4588r0k] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.dc-list-head[b-lgy4588r0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dc-cuenta[b-lgy4588r0k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dc-cuenta-select[b-lgy4588r0k] {
    min-width: 240px;
    font-weight: 700;
}

.dc-cuenta-tipo[b-lgy4588r0k] {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.dc-list-range[b-lgy4588r0k] {
    display: flex;
    align-items: end;
    gap: 8px;
}

.dc-field[b-lgy4588r0k] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .dc-field label[b-lgy4588r0k] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.dc-input[b-lgy4588r0k] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .dc-input:focus[b-lgy4588r0k] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.dc-input-sm[b-lgy4588r0k] {
    height: 32px;
}

.dc-empty[b-lgy4588r0k] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* REJILLA */

.dc-grid-wrapper[b-lgy4588r0k] {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.dc-tabla[b-lgy4588r0k] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

/* `table-layout: fixed` hace que el <colgroup> MANDE; `width: max-content` deja que la suma de
   columnas desborde al contenedor, que ya tiene scroll horizontal. */
#diario-caja-grid[b-lgy4588r0k] {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

    #diario-caja-grid thead th[b-lgy4588r0k] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 8px 10px 8px 10px;
        padding-right: 4px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    #diario-caja-grid tbody td[b-lgy4588r0k] {
        padding: 5px 10px;
        color: #1f2937;
        border-bottom: 1px solid #f5f7fa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

.dc-fila[b-lgy4588r0k] {
    cursor: pointer;
    outline: none;   /* el foco lo dice el cursor, no el anillo del navegador */
}

    .dc-fila:hover[b-lgy4588r0k] {
        background: #f8fbff;
    }

.dc-fila-protegida[b-lgy4588r0k] {
    color: #64748b;
}

.dc-col-importe[b-lgy4588r0k] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dc-col-cuenta[b-lgy4588r0k],
.dc-col-clave[b-lgy4588r0k] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #334155;
}

.dc-col-numero[b-lgy4588r0k] {
    color: #1d4ed8;
    font-weight: 700;
}

.dc-col-marca[b-lgy4588r0k] {
    text-align: center;
}

.dc-candado[b-lgy4588r0k] {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
    color: #94a3b8;
}

.dc-marca[b-lgy4588r0k] {
    display: inline-block;
    width: 16px;
    cursor: pointer;
    font-size: 12px;
}

.dc-marcada[b-lgy4588r0k] {
    color: #15803d;
}

.dc-sin-marcar[b-lgy4588r0k] {
    color: #cbd5e1;
}

/* CURSOR de la LISTA (lo mueve gridTeclado.js): fila azul y celda activa con borde. */

#diario-caja-grid tr[data-fila-lista].dg-cursor[b-lgy4588r0k] {
    scroll-margin-block: 40px;
}

#diario-caja-grid tr[data-fila-lista].dg-cursor > td[b-lgy4588r0k] {
    background: #eaf2fe;
    box-shadow: inset 0 -1px 0 #c7dcfb, inset 0 1px 0 #c7dcfb;
}

#diario-caja-grid tr[data-fila-lista].dg-cursor > td.dg-celda-activa[b-lgy4588r0k] {
    box-shadow: inset 0 0 0 2px #4c8bf5;
    background: #ffffff;
}

/* Con una fila en MODIFICACIÓN solo hay una casilla resaltada: la del editor. */
#diario-caja-grid.dg-con-editor tr[data-fila-lista].dg-cursor > td[b-lgy4588r0k] {
    background: inherit;
    box-shadow: none;
}

/* FILA EN CURSO (editor in-situ) */

.dc-fila-edicion[b-lgy4588r0k] {
    background: #fbfdff;
    outline: 2px solid #4c8bf5;
    outline-offset: -2px;
}

    .dc-fila-edicion td[b-lgy4588r0k] {
        padding: 2px 4px !important;
    }

.dc-edicion-ico[b-lgy4588r0k] {
    font-size: 16px;
    color: #4c8bf5;
    vertical-align: middle;
}

.dc-nueva-marca[b-lgy4588r0k] {
    color: #94a3b8;
    font-weight: 800;
}

.dc-col-acciones[b-lgy4588r0k] {
    white-space: nowrap;
}

/* Celdas del editor: un input por celda. */

.dg-cell[b-lgy4588r0k] {
    width: 100%;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 8px;
    font: inherit;
    color: #111827;
    background: transparent;
    caret-color: transparent;   /* navegación: la celda se ve activa, no «en modo tecleo» */
}

    .dg-cell:hover[b-lgy4588r0k] {
        border-color: #e2e8f0;
        background: #fafcff;
    }

    .dg-cell:focus[b-lgy4588r0k] {
        outline: none;
        border-color: #4c8bf5;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(76, 139, 245, .18);
    }

    .dg-cell.dg-editing[b-lgy4588r0k] {
        caret-color: auto;
    }

.dg-cell-num[b-lgy4588r0k] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dg-cell-cuenta[b-lgy4588r0k] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

/* Celda que NO aplica a la familia de la clave (un gasto no tiene factura): apagada y sin borde. */
.dg-cell-apagada[b-lgy4588r0k] {
    background: repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 4px, #f1f5f9 4px, #f1f5f9 8px);
    color: #94a3b8;
    cursor: default;
}

    .dg-cell-apagada:hover[b-lgy4588r0k],
    .dg-cell-apagada:focus[b-lgy4588r0k] {
        border-color: transparent;
        box-shadow: none;
        background: repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 4px, #f1f5f9 4px, #f1f5f9 8px);
    }

/* Importe en la columna CONTRARIA a la clave: la fila es un abono. Ámbar, no rojo: es legal, solo
   hay que verlo. */
.dg-cell-abono[b-lgy4588r0k] {
    color: #b45309;
    font-weight: 700;
}

/* LUPA embebida en las celdas con ventana de búsqueda (misma pieza que el diario contable):
   aparece al posarse o al enfocar la celda, para no ensuciar la fila entera de iconos. */
.dg-cellwrap[b-lgy4588r0k] {
    position: relative;
    display: block;
}

.dg-cell-lupa[b-lgy4588r0k] {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    color: #94a3b8;
    display: none;
    line-height: 0;
}

    .dg-cell-lupa .material-symbols-rounded[b-lgy4588r0k] {
        font-size: 16px;
    }

.dg-cellwrap:hover .dg-cell-lupa[b-lgy4588r0k],
.dg-cellwrap:focus-within .dg-cell-lupa[b-lgy4588r0k] {
    display: block;
}

    .dg-cell-lupa:hover[b-lgy4588r0k] {
        color: #2563eb;
    }

/* TIRADOR de redimensionado (inline en la cabecera; flotado a la derecha). */

.dg-col-tirador[b-lgy4588r0k] {
    float: right;
    width: 9px;
    height: 17px;
    margin: 0 -4px 0 6px;
    cursor: col-resize;
    background: linear-gradient(to right, transparent 0, transparent 4px, #cbd5e1 4px, #cbd5e1 5px, transparent 5px);
    touch-action: none;
    user-select: none;
}

    .dg-col-tirador:hover[b-lgy4588r0k] {
        background: linear-gradient(to right, transparent 0, transparent 3px, #2563eb 3px, #2563eb 6px, transparent 6px);
    }

:global(body.grid-col-arrastrando)[b-lgy4588r0k] {
    cursor: col-resize !important;
    user-select: none !important;
}

/* BORDES de la ventana */

.dc-ventana-borde td[b-lgy4588r0k] {
    text-align: center;
    padding: 4px !important;
    background: #f8fafc;
}

    .dc-ventana-borde button[b-lgy4588r0k] {
        border: 0;
        background: transparent;
        color: #2563eb;
        font-weight: 700;
        font-size: 12px;
        cursor: pointer;
    }

/* BARRA DE ESTADO de la fila */

.dc-estado[b-lgy4588r0k] {
    margin-top: 8px;
    min-height: 20px;
    font-size: 12.5px;
    color: #475569;
}

.dc-estado-aviso[b-lgy4588r0k] {
    color: #b45309;
    font-weight: 700;
}

/* PIE: totales + teclas */

.dc-pie[b-lgy4588r0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.dc-totales[b-lgy4588r0k] {
    display: flex;
    gap: 22px;
}

.dc-total[b-lgy4588r0k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dc-total-rotulo[b-lgy4588r0k] {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.dc-total-num[b-lgy4588r0k] {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}

.dc-total-saldo .dc-total-num[b-lgy4588r0k] {
    color: #1d4ed8;
}

.dc-barra-teclas[b-lgy4588r0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.dc-tecla[b-lgy4588r0k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    /* El icono es la única pista visual que distingue un botón de otro: la tecla vive en el tooltip
       (misma regla que el diario contable), así que el icono toma color. */
    .dc-tecla-ico[b-lgy4588r0k] {
        font-size: 16px;
        line-height: 1;
        color: #475569;
    }

    .dc-tecla:hover:not(:disabled)[b-lgy4588r0k] {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .dc-tecla:hover:not(:disabled) .dc-tecla-ico[b-lgy4588r0k] {
        color: #1d4ed8;
    }

    .dc-tecla:disabled[b-lgy4588r0k] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.dc-barra-sep[b-lgy4588r0k] {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: #e2e8f0;
}

/* PANEL DE CARTERA (F6) */

.dc-overlay[b-lgy4588r0k] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
}

.dc-cartera[b-lgy4588r0k] {
    width: min(760px, 100%);
    max-height: 84vh;
    overflow: auto;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}

.dc-section-title[b-lgy4588r0k] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.dc-cartera-tabla[b-lgy4588r0k] {
    max-height: 44vh;
    overflow: auto;
    outline: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

    .dc-cartera-tabla:focus[b-lgy4588r0k] {
        border-color: #4338ca;
        box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15);
    }

    .dc-cartera-tabla thead th[b-lgy4588r0k] {
        position: sticky;
        top: 0;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
    }

    .dc-cartera-tabla tbody td[b-lgy4588r0k] {
        padding: 6px 10px;
        border-bottom: 1px solid #f5f7fa;
        white-space: nowrap;
    }

    .dc-cartera-tabla tbody tr[b-lgy4588r0k] {
        cursor: pointer;
    }

.dc-cartera-marca[b-lgy4588r0k] {
    width: 30px;
    text-align: center;
    color: #15803d;
    font-weight: 800;
}

.dc-cartera-tabla tr.dc-cartera-sel td[b-lgy4588r0k] {
    background: #eef2ff;
}

.dc-cartera-tabla tr.dc-cartera-marcada td[b-lgy4588r0k] {
    background: #ecfdf5;
}

.dc-cartera-tabla tr.dc-cartera-sel.dc-cartera-marcada td[b-lgy4588r0k] {
    background: #d1fae5;
}

.dc-cartera-pie[b-lgy4588r0k] {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dc-cartera-total[b-lgy4588r0k] {
    font-size: 13px;
    color: #334155;
}

.dc-cartera-ayuda[b-lgy4588r0k] {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

@media (max-width: 900px) {
    .dc-cuenta-select[b-lgy4588r0k] {
        min-width: 160px;
    }

    .dc-grid-wrapper[b-lgy4588r0k] {
        max-height: none;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Vales/Pages/ValeFormulario.razor.rz.scp.css */
.vales-page[b-hlkef7l4dl],
.vales-page *[b-hlkef7l4dl],
.vales-page *[b-hlkef7l4dl]::before,
.vales-page *[b-hlkef7l4dl]::after {
    box-sizing: border-box;
}

.vales-page[b-hlkef7l4dl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: valeFormIn-b-hlkef7l4dl 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vales-title[b-hlkef7l4dl] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.vales-subtitle[b-hlkef7l4dl] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.vale-detalle-header[b-hlkef7l4dl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vale-detalle-actions[b-hlkef7l4dl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-panel[b-hlkef7l4dl] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.vld-info-grid[b-hlkef7l4dl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vld-info-card[b-hlkef7l4dl] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.vld-info-title[b-hlkef7l4dl] {
    margin: 0 0 12px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.vfb-field[b-hlkef7l4dl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

    .vfb-field label[b-hlkef7l4dl] {
        font-size: 12px;
        font-weight: 750;
        color: #6b7280;
    }

/* Con ::deep además del selector directo: el input del cliente lo pinta CampoCodigo (componente hijo, que
   recibe la clase por parámetro) y el CSS aislado de la página no lo marca. */
.vl-filter-input[b-hlkef7l4dl],
.vales-page[b-hlkef7l4dl]  .vl-filter-input,
.vl-filter-select[b-hlkef7l4dl] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vl-filter-select[b-hlkef7l4dl] {
    cursor: pointer;
}

.vfb-textarea[b-hlkef7l4dl] {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.vl-filter-input:focus[b-hlkef7l4dl],
.vales-page[b-hlkef7l4dl]  .vl-filter-input:focus,
.vl-filter-select:focus[b-hlkef7l4dl] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.vl-primary-btn[b-hlkef7l4dl] {
    height: 38px;
    border-radius: 11px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    border: none;
    background: #2563eb;
    color: #ffffff;
    transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .vl-primary-btn:hover[b-hlkef7l4dl] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.vld-action-btn[b-hlkef7l4dl] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

.vfb-actions[b-hlkef7l4dl] {
    margin-top: 16px;
    justify-content: flex-end;
}

.rb-error-box[b-hlkef7l4dl] {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

@keyframes valeFormIn-b-hlkef7l4dl {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (max-width: 980px) {
    .vld-info-grid[b-hlkef7l4dl] {
        grid-template-columns: 1fr;
    }

    .vale-detalle-header[b-hlkef7l4dl] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vales-page[b-hlkef7l4dl],
    .vales-page *[b-hlkef7l4dl] {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Vales/Pages/Vales.razor.rz.scp.css */
.vales-page[b-w32kffiqcz],
.vales-page *[b-w32kffiqcz],
.vales-page *[b-w32kffiqcz]::before,
.vales-page *[b-w32kffiqcz]::after {
    box-sizing: border-box;
}

.vales-page[b-w32kffiqcz] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: valesPageIn-b-w32kffiqcz 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.vales-header[b-w32kffiqcz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que el propio CommandBar añade sobre la cabecera). */
.vales-heading[b-w32kffiqcz] {
    /* Absorbe el espacio libre para empujar el CommandBar a la esquina superior derecha; nunca cede
       por debajo de este suelo, así el texto envuelve por palabras (no letra a letra). */
    min-width: min(100%, 16rem);
    flex: 1 1 auto;
}

/* CommandBar de la cabecera superior: ancho natural, anclado arriba a la derecha. Clase propia para
   NO heredar el `width: 100%` móvil de `.vales-header-actions` (que pertenece al encabezado de la
   lista y, compartido, estiraba la barra a todo el ancho aplastando el título). */
.vales-cmdbar[b-w32kffiqcz] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.vales-title[b-w32kffiqcz] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.vales-subtitle[b-w32kffiqcz] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* PANEL GENERAL */

.card-panel[b-w32kffiqcz] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. El título de la lista tampoco está: lo dice ya el de la página. */

.vales-list-panel[b-w32kffiqcz] {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    display: grid;
    /* Filtros y tabla. La tabla absorbe el alto sobrante. */
    grid-template-rows: auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

/* FILTROS */

.vales-filters[b-w32kffiqcz] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: center;
}

.vl-filter-item[b-w32kffiqcz],
.vl-filter-item-search[b-w32kffiqcz] {
    min-width: 0;
}

.vl-filter-input[b-w32kffiqcz],
.vl-filter-select[b-w32kffiqcz] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vl-filter-input[b-w32kffiqcz] {
    padding: 0 13px;
}

.vl-filter-select[b-w32kffiqcz] {
    padding: 0 12px;
    cursor: pointer;
}

.vl-filter-input[b-w32kffiqcz]::placeholder {
    color: #9ca3af;
}

.vl-filter-input:focus[b-w32kffiqcz],
.vl-filter-select:focus[b-w32kffiqcz] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* AVISO DE CARGA
   Los botones de esta página los pinta ahora el CommandBar de la cabecera («Nuevo vale» y «Limpiar
   filtros»), con su propio estilo; aquí ya no queda ninguno que vestir. El recuento de resultados lo
   da el paginador de la tabla, así que de la antigua barra solo queda su caja, que reutiliza el aviso
   de «Cargando vales…». */

.vl-results-bar[b-w32kffiqcz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de la insignia
   de estado, que aporta la propia página como plantilla.

   Esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que el CSS
   scoped de esta página no lo alcanza por sí solo. */

.vl-tabla[b-w32kffiqcz] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
}

/* ESTADOS (plantilla de la columna «Estado», dentro de <TablaPaginada>) */

.vales-page[b-w32kffiqcz]  .vl-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vales-page[b-w32kffiqcz]  .vl-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.vales-page[b-w32kffiqcz]  .vl-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.vales-page[b-w32kffiqcz]  .vl-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.vales-page[b-w32kffiqcz]  .vl-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* AVISOS */

.rb-error-box[b-w32kffiqcz] {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

/* ANIMACIONES */

@keyframes valesPageIn-b-w32kffiqcz {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .vales-page[b-w32kffiqcz] {
        height: calc(100dvh - 96px);
    }

    .vales-filters[b-w32kffiqcz] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .vales-page[b-w32kffiqcz] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .vales-list-panel[b-w32kffiqcz] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .vales-filters[b-w32kffiqcz] {
        grid-template-columns: 1fr 1fr;
    }

    .vl-filter-item-search[b-w32kffiqcz] {
        grid-column: 1 / -1;
    }

    /* La página deja de acotarse a la pantalla y crece con su contenido, así que la tabla ya no se
       reparte un alto fijo: se extiende con sus filas y el scroll lo lleva la página. */
    .vl-tabla[b-w32kffiqcz] {
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .vales-filters[b-w32kffiqcz] {
        grid-template-columns: 1fr;
    }
}

/* COLUMNAS REPLEGABLES: al estrechar la ventana caen primero las menos importantes. «Vale», «Cliente»
   e «Importe» permanecen siempre visibles: identifican el vale y dicen cuánto vale, que es lo que se
   viene a ver aquí. La clase la lleva la cabecera Y sus celdas (ColumnaTabla.CssClass), así que basta
   con ocultarla una vez. */

@media (max-width: 1180px) {
    .vales-page[b-w32kffiqcz]  .vl-col-origen {
        display: none;
    }
}

@media (max-width: 980px) {
    .vales-page[b-w32kffiqcz]  .vl-col-disponible {
        display: none;
    }
}

@media (max-width: 760px) {
    .vales-page[b-w32kffiqcz]  .vl-col-fecha {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo. */
@media (max-width: 620px) {
    .vales-page[b-w32kffiqcz]  .vl-col-estado {
        display: none;
    }
}

@media (max-width: 640px) {
    /* El título y el subtítulo escalan con el clamp responsive; no se fija tamaño aquí. */

    .card-panel[b-w32kffiqcz] {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vales-page[b-w32kffiqcz],
    .vales-page *[b-w32kffiqcz],
    .vales-page *[b-w32kffiqcz]::before,
    .vales-page *[b-w32kffiqcz]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/CobrosYBancos/Vales/Pages/ValesDetalle.razor.rz.scp.css */
.vale-detalle-page[b-tyyxx7la4a],
.vale-detalle-page *[b-tyyxx7la4a],
.vale-detalle-page *[b-tyyxx7la4a]::before,
.vale-detalle-page *[b-tyyxx7la4a]::after {
    box-sizing: border-box;
}

.vale-detalle-page[b-tyyxx7la4a] {
    height: calc(100dvh - 150px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: valeDetallePageIn-b-tyyxx7la4a 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.vale-detalle-header[b-tyyxx7la4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.vale-detalle-heading[b-tyyxx7la4a] {
    min-width: 0;
}

.vale-detalle-title[b-tyyxx7la4a] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.vale-detalle-subtitle[b-tyyxx7la4a] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.vale-detalle-actions[b-tyyxx7la4a] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* PANEL GENERAL */

.card-panel[b-tyyxx7la4a] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}


/* TABS */

.vale-detalle-tabs-panel[b-tyyxx7la4a] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.vld-tabs[b-tyyxx7la4a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
}

.vld-tab[b-tyyxx7la4a] {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

    .vld-tab:hover[b-tyyxx7la4a] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .vld-tab.active[b-tyyxx7la4a] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

.vld-tab-content[b-tyyxx7la4a] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .vld-tab-content[b-tyyxx7la4a]::-webkit-scrollbar {
        width: 6px;
    }

    .vld-tab-content[b-tyyxx7la4a]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vld-tab-content[b-tyyxx7la4a]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .vld-tab-content[b-tyyxx7la4a]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* TITULOS */

.vale-detalle-panel-header[b-tyyxx7la4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
}

.vale-detalle-panel-title[b-tyyxx7la4a] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.vale-detalle-panel-subtitle[b-tyyxx7la4a] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* DATOS */

.vld-info-grid[b-tyyxx7la4a] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vld-info-card[b-tyyxx7la4a] {
    min-width: 0;
    align-self: start;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
}

.vld-info-card-full[b-tyyxx7la4a] {
    grid-column: 1 / -1;
}

.vld-info-title[b-tyyxx7la4a] {
    margin: 0 0 10px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.vld-info-list[b-tyyxx7la4a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vld-info-row[b-tyyxx7la4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #f8fafc;
}

    .vld-info-row span[b-tyyxx7la4a] {
        font-size: 12px;
        color: #6b7280;
        font-weight: 750;
    }

    .vld-info-row strong[b-tyyxx7la4a] {
        min-width: 0;
        font-size: 12px;
        color: #111827;
        font-weight: 900;
        text-align: right;
        overflow-wrap: anywhere;
    }

.vld-observaciones-box[b-tyyxx7la4a] {
    min-height: 118px;
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #4b5563;
}

/* RESUMEN */

.vld-resumen-grid[b-tyyxx7la4a] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vld-total-row[b-tyyxx7la4a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

    .vld-total-row span[b-tyyxx7la4a] {
        font-size: 12px;
        color: #4b5563;
        font-weight: 750;
    }

    .vld-total-row strong[b-tyyxx7la4a] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
    }

.vld-total-row-highlight[b-tyyxx7la4a] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* APLICACIONES */

.vld-lines-summary[b-tyyxx7la4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 850;
    color: #1d4ed8;
    white-space: nowrap;
}

.vld-grid-wrapper[b-tyyxx7la4a] {
    margin-top: 10px;
    min-height: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
}

.vld-grid.e-grid[b-tyyxx7la4a] {
    height: 100%;
    width: 100%;
    min-width: 740px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.vld-grid .e-gridheader[b-tyyxx7la4a] {
    border-bottom: 1px solid #eef2f7;
}

.vld-grid .e-headercell[b-tyyxx7la4a] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.vld-grid .e-headertext[b-tyyxx7la4a] {
    font-size: 12px;
    font-weight: 850;
}

.vld-grid .e-rowcell[b-tyyxx7la4a] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.vld-grid .e-row:hover .e-rowcell[b-tyyxx7la4a] {
    background: #f8fbff;
}

.vld-grid .e-altrow .e-rowcell[b-tyyxx7la4a] {
    background: #fcfdff;
}

/* BOTONES */

.vld-action-btn[b-tyyxx7la4a] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .vld-action-btn:hover[b-tyyxx7la4a] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.vld-action-btn-danger[b-tyyxx7la4a] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

    .vld-action-btn-danger:hover[b-tyyxx7la4a] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

/* AVISOS */

.rb-error-box[b-tyyxx7la4a] {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.rb-success-box[b-tyyxx7la4a] {
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* MODAL DE CONFIRMACIÓN */

.cd-modal-overlay[b-tyyxx7la4a] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}

.cd-modal[b-tyyxx7la4a] {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-modal-title[b-tyyxx7la4a] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.cd-modal-body[b-tyyxx7la4a] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-modal-actions[b-tyyxx7la4a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ANIMACIONES */

@keyframes valeDetallePageIn-b-tyyxx7la4a {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .vale-detalle-page[b-tyyxx7la4a] {
        height: calc(100dvh - 96px);
    }

    .vld-resumen-grid[b-tyyxx7la4a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .vale-detalle-page[b-tyyxx7la4a] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .vale-detalle-header[b-tyyxx7la4a] {
        flex-direction: column;
        align-items: stretch;
    }

    .vale-detalle-actions[b-tyyxx7la4a] {
        justify-content: flex-end;
    }

    .vale-detalle-tabs-panel[b-tyyxx7la4a] {
        height: auto;
        overflow: visible;
    }

    .vld-tab-content[b-tyyxx7la4a] {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .vld-info-grid[b-tyyxx7la4a],
    .vld-resumen-grid[b-tyyxx7la4a] {
        grid-template-columns: 1fr;
    }

    .vld-grid-wrapper[b-tyyxx7la4a] {
        height: auto;
        min-height: 360px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .vld-grid.e-grid[b-tyyxx7la4a] {
        min-width: 740px;
    }
}

@media (max-width: 768px) {
    .vale-detalle-actions[b-tyyxx7la4a] {
        width: 100%;
    }

        .vale-detalle-actions .vld-action-btn[b-tyyxx7la4a] {
            width: 100%;
        }

    .vale-detalle-panel-header[b-tyyxx7la4a] {
        flex-direction: column;
        align-items: stretch;
    }

    .vld-info-row[b-tyyxx7la4a],
    .vld-total-row[b-tyyxx7la4a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

        .vld-info-row strong[b-tyyxx7la4a] {
            text-align: left;
        }
}

@media (max-width: 640px) {
    .vale-detalle-title[b-tyyxx7la4a] {
        font-size: 20px;
    }

    .vale-detalle-subtitle[b-tyyxx7la4a] {
        font-size: 12px;
    }

    .card-panel[b-tyyxx7la4a] {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vale-detalle-page[b-tyyxx7la4a],
    .vale-detalle-page *[b-tyyxx7la4a],
    .vale-detalle-page *[b-tyyxx7la4a]::before,
    .vale-detalle-page *[b-tyyxx7la4a]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Components/AvisoSinAceptar/AvisoSinAceptar.razor.rz.scp.css */
.asa[b-0gqxih4ph8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin: .5rem 1.25rem 0;
    padding: .6rem .8rem;
    border: 1px solid #fcd34d;
    border-radius: 9px;
    background: #fffbeb;
    color: #78350f;
    font-size: .86rem;
}

.asa-icono[b-0gqxih4ph8] {
    font-size: 20px;
    color: #d97706;
}

.asa-texto[b-0gqxih4ph8] {
    flex: 1 1 200px;
    font-weight: 600;
}

.asa-botones[b-0gqxih4ph8] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.asa-btn[b-0gqxih4ph8] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 .85rem;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}

.asa-btn-ghost[b-0gqxih4ph8] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .asa-btn-ghost:hover[b-0gqxih4ph8] {
        background: #f3f4f6;
    }

.asa-btn-primario[b-0gqxih4ph8] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .asa-btn-primario:hover[b-0gqxih4ph8] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.asa-btn:focus-visible[b-0gqxih4ph8] {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
/* _content/ErpPowergest/Presentation/Components/Campos/BloqueTeclado.razor.rz.scp.css */
/* El contenedor del bloque no es una caja: los campos siguen siendo hijos de la maqueta de la pantalla
   (rejillas, flex, pies pegados abajo). Lo necesita para observar el DOM y buscar la acción final, no para
   pintar. Si la pantalla le da Clase, su estilo manda (más específico que este). */
.bt[b-8z17k98jji] {
    display: contents;
}
/* _content/ErpPowergest/Presentation/Components/Campos/CampoCodigo.razor.rz.scp.css */
/*
    Campo de código de maestro: el input (con su lupa, que pone CampoConBuscador) y el nombre de la ficha
    al lado. Sin colores de tema ni aspecto del input: eso lo trae la pantalla por ClaseInput.
*/

.cc-campo[b-nec91wkcs3] {
    display: block;
    min-width: 0;
}

/* Código a la izquierda, del ancho de un código; el nombre se queda con el resto. En una columna
   estrecha el nombre baja debajo del código en vez de quedarse en tres letras. */
.cc-campo--con-nombre[b-nec91wkcs3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

    .cc-campo--con-nombre[b-nec91wkcs3]  .ccb-selector {
        flex: 1 1 7rem;
        min-width: 7rem;
        max-width: 12rem;
    }

.cc-nombre[b-nec91wkcs3] {
    flex: 1 1 6rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9em;
    opacity: .75;
}

    .cc-nombre:empty[b-nec91wkcs3] {
        display: none;
    }
/* _content/ErpPowergest/Presentation/Components/CommandBar/CommandBar.razor.rz.scp.css */
/*
    Barra de comandos (implementación propia, sin Syncfusion).
    Botones compactos estilo GitHub (borde gris redondeado, icono arriba y texto debajo) en una
    fila; los que no caben se ocultan (--hidden, vía js/commandBar.js) y aparecen en el menú "···".
*/

.command-bar[b-9woqa3uyyg] {
    display: flex;
    align-items: center;
    min-width: 0;
    /* Referencia del submenú de un comando desplegable, que se ancla a la esquina de la BARRA (ver
       `.command-bar__submenu`). No altera el flujo: el panel es absoluto. */
    position: relative;
    /* El host es rígido: el reparto de espacio lo hace el script replegando comandos, nunca el
       encogimiento flex. Si el root cediera, el botón «···» (que no cede) desbordaría por la
       derecha y se vería cortado. Nota: las reglas de las páginas sobre la clase del host
       (p. ej. `.xxx-header-actions`) viven en CSS scoped y NO alcanzan esta raíz (es markup de
       otro componente), por eso estas propiedades se fijan aquí. */
    flex: 0 0 auto;
    /* Anclado a la esquina superior derecha del contenedor aunque el título crezca a varias líneas. */
    align-self: flex-start;
    /* Su contenido (los botones y el «···») se alinea a la derecha dentro del host. Imprescindible
       aquí (no solo en `.command-bar__items`) porque en las páginas con CSS scoped la regla de la
       página sobre `.xxx-header-actions` no llega a esta raíz: sin esto, si el host es más ancho que
       su contenido, el «···» queda a la izquierda con hueco a su derecha. */
    justify-content: flex-end;
}

.command-bar__items[b-9woqa3uyyg] {
    /* Abraza su contenido: así un botón se ve entero o no se ve (nunca recortado a medias).
       El reparto lo decide el script midiendo el espacio del contenedor padre. */
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}

/* Botón de comando: compacto, borde gris, icono arriba y texto debajo.
   Altura fija para que coincida con el botón "···" aunque la fila quede vacía.
   El COLOR no se decide aquí: sale de las variables de css/botones.css según la función del botón
   (clase cb-*, la pone CommandBar.razor). --cb-f/-b/-t/-i son fondo, borde, texto e icono en reposo;
   --cb-hf/-hb/-ht, los de pasar el ratón. Cada función solo cambia esas variables. */
.command-bar__btn[b-9woqa3uyyg] {
    --cb-f: var(--cb-neutro-fondo, #ffffff);
    --cb-b: var(--cb-neutro-borde, #d0d7de);
    --cb-t: var(--cb-neutro-texto, #374151);
    --cb-i: var(--cb-neutro-icono, currentColor);
    --cb-hf: var(--cb-neutro-hover-fondo, #f6f8fa);
    --cb-hb: var(--cb-neutro-hover-borde, #afb8c1);
    --cb-ht: var(--cb-neutro-hover-texto, #111827);
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 58px;
    padding: 6px 10px;
    border: 1px solid var(--cb-b);
    border-radius: 6px;
    background: var(--cb-f);
    color: var(--cb-t);
    box-shadow: var(--cb-sombra, none);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    /* El contenido del botón (icono Material Symbols + texto) no es seleccionable por el usuario. */
    -webkit-user-select: none;
    user-select: none;
}

    /* :not(:disabled): «:hover» también casa con un botón deshabilitado, que no debe reaccionar. */
    .command-bar__btn:hover:not(:disabled)[b-9woqa3uyyg] {
        background: var(--cb-hf);
        border-color: var(--cb-hb);
        color: var(--cb-ht);
    }

/* Función de cada botón: solo cambia las variables. Lo que la función no declara en
   css/botones.css cae al botón neutro. */
.command-bar__btn.cb-principal[b-9woqa3uyyg] {
    --cb-f: var(--cb-principal-fondo, var(--cb-neutro-fondo, #ffffff));
    --cb-b: var(--cb-principal-borde, var(--cb-neutro-borde, #d0d7de));
    --cb-t: var(--cb-principal-texto, var(--cb-neutro-texto, #374151));
    --cb-i: var(--cb-principal-icono, var(--cb-neutro-icono, currentColor));
    --cb-hf: var(--cb-principal-hover-fondo, var(--cb-neutro-hover-fondo, #f6f8fa));
    --cb-hb: var(--cb-principal-hover-borde, var(--cb-neutro-hover-borde, #afb8c1));
    --cb-ht: var(--cb-principal-hover-texto, var(--cb-neutro-hover-texto, #111827));
}

.command-bar__btn.cb-crear[b-9woqa3uyyg] {
    --cb-f: var(--cb-crear-fondo, var(--cb-neutro-fondo, #ffffff));
    --cb-b: var(--cb-crear-borde, var(--cb-neutro-borde, #d0d7de));
    --cb-t: var(--cb-crear-texto, var(--cb-neutro-texto, #374151));
    --cb-i: var(--cb-crear-icono, var(--cb-neutro-icono, currentColor));
    --cb-hf: var(--cb-crear-hover-fondo, var(--cb-neutro-hover-fondo, #f6f8fa));
    --cb-hb: var(--cb-crear-hover-borde, var(--cb-neutro-hover-borde, #afb8c1));
    --cb-ht: var(--cb-crear-hover-texto, var(--cb-neutro-hover-texto, #111827));
}

.command-bar__btn.cb-informes[b-9woqa3uyyg] {
    --cb-f: var(--cb-informes-fondo, var(--cb-neutro-fondo, #ffffff));
    --cb-b: var(--cb-informes-borde, var(--cb-neutro-borde, #d0d7de));
    --cb-t: var(--cb-informes-texto, var(--cb-neutro-texto, #374151));
    --cb-i: var(--cb-informes-icono, var(--cb-neutro-icono, currentColor));
    --cb-hf: var(--cb-informes-hover-fondo, var(--cb-neutro-hover-fondo, #f6f8fa));
    --cb-hb: var(--cb-informes-hover-borde, var(--cb-neutro-hover-borde, #afb8c1));
    --cb-ht: var(--cb-informes-hover-texto, var(--cb-neutro-hover-texto, #111827));
}

.command-bar__btn.cb-borrar[b-9woqa3uyyg] {
    --cb-f: var(--cb-borrar-fondo, var(--cb-neutro-fondo, #ffffff));
    --cb-b: var(--cb-borrar-borde, var(--cb-neutro-borde, #d0d7de));
    --cb-t: var(--cb-borrar-texto, var(--cb-neutro-texto, #374151));
    --cb-i: var(--cb-borrar-icono, var(--cb-neutro-icono, currentColor));
    --cb-hf: var(--cb-borrar-hover-fondo, var(--cb-neutro-hover-fondo, #f6f8fa));
    --cb-hb: var(--cb-borrar-hover-borde, var(--cb-neutro-hover-borde, #afb8c1));
    --cb-ht: var(--cb-borrar-hover-texto, var(--cb-neutro-hover-texto, #111827));
}

    .command-bar__btn:disabled[b-9woqa3uyyg] {
        opacity: 0.55;
        cursor: default;
    }

/* Botón replegado por falta de espacio (lo gestiona el script de desbordamiento) */
.command-bar__btn--hidden[b-9woqa3uyyg] {
    display: none;
}

/* Línea vertical que separa los comandos primarios de los secundarios en la fila.
   El script la oculta cuando ya no queda ningún secundario visible. */
.command-bar__divider[b-9woqa3uyyg] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    margin: 8px 2px;
    background: var(--cf-line, #d0d7de);
}

.command-bar__divider--hidden[b-9woqa3uyyg] {
    display: none;
}

.command-bar__icon[b-9woqa3uyyg] {
    /* El color de la función del botón (--cb-i); fuera de un botón de comando, el del texto. */
    color: var(--cb-i, currentColor);
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Orden en marcha (CommandBarItem.Girando): el icono da vueltas hasta que termina. Una vuelta dura lo
   mismo que la espera mínima con la que lo usa «Actualizar», así que al pararse vuelve a su postura sin
   saltar. Con «reducir movimiento» gira despacio en vez de desaparecer la señal. */
.command-bar__icon--girando[b-9woqa3uyyg] {
    animation: command-bar-girar-b-9woqa3uyyg 0.7s linear infinite;
}

@keyframes command-bar-girar-b-9woqa3uyyg {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .command-bar__icon--girando[b-9woqa3uyyg] {
        animation-duration: 2.1s;
    }
}

.command-bar__text[b-9woqa3uyyg] {
    line-height: 1;
}

/* Zona del desbordamiento: disparador "···" + menú flotante */
.command-bar__overflow[b-9woqa3uyyg] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 6px;
}

/* Botón "···": misma altura fija que los botones de comando */
.command-bar__more[b-9woqa3uyyg] {
    display: none; /* solo visible cuando hay desbordamiento */
    box-sizing: border-box;
    height: 48px;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 6px 10px;
    border: 1px solid var(--cb-neutro-borde, #d0d7de);
    border-radius: 6px;
    background: var(--cb-neutro-fondo, #ffffff);
    color: var(--cb-neutro-texto, #374151);
    box-shadow: var(--cb-sombra, none);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

    .command-bar__more:hover[b-9woqa3uyyg] {
        background: var(--cb-neutro-hover-fondo, #f6f8fa);
        border-color: var(--cb-neutro-hover-borde, #afb8c1);
        color: var(--cb-neutro-hover-texto, #111827);
    }

.command-bar--has-overflow .command-bar__more[b-9woqa3uyyg] {
    display: inline-flex;
}

/* Menú desplegable de comandos replegados (siempre en el DOM, oculto hasta abrirse) */
.command-bar__menu[b-9woqa3uyyg] {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1001;
    min-width: 220px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
}

/* Abierto solo cuenta si además hay comandos replegados: al ensancharse la ventana el script
   quita --has-overflow en el mismo frame de la medición, antes de que el componente reaccione,
   y así el desplegable vacío no llega a verse. */
.command-bar--has-overflow .command-bar__menu--open[b-9woqa3uyyg] {
    display: block;
}

.command-bar__menu-item[b-9woqa3uyyg] {
    display: none; /* solo se muestran los desbordados (--shown, vía el script) */
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #24292f;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.command-bar__menu-item--shown[b-9woqa3uyyg] {
    display: inline-flex;
}

/* Separador horizontal entre la sección de primarios replegados y la de secundarios.
   El script solo lo muestra cuando el desplegable contiene comandos de ambos grupos. */
.command-bar__menu-divider[b-9woqa3uyyg] {
    display: none;
    height: 1px;
    margin: 6px 8px;
    background: var(--cf-line, #eaeef2);
}

.command-bar__menu-divider--shown[b-9woqa3uyyg] {
    display: block;
}

    .command-bar__menu-item:hover[b-9woqa3uyyg] {
        background: #f3f4f6;
    }

    .command-bar__menu-item:disabled[b-9woqa3uyyg] {
        opacity: 0.55;
        cursor: default;
    }

.command-bar__menu-icon[b-9woqa3uyyg] {
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.command-bar__menu-text[b-9woqa3uyyg] {
    line-height: 1;
}

.command-bar__menu-shortcut[b-9woqa3uyyg] {
    margin-left: auto;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
}

/* ===== SUBMENÚ DE UN COMANDO DESPLEGABLE =====
   Un comando con SubItems no ejecuta una acción: despliega su lista (p. ej. «Informes», que ofrece
   los listados de la ficha). El panel se ancla a la derecha de la BARRA —no al botón— porque el
   comando puede estar replegado en el «···», donde su botón de la fila ya no existe. Se le pone
   tope de alto: la lista la sirve Application y puede ser larga. */
.command-bar__submenu[b-9woqa3uyyg] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1001;
    min-width: 260px;
    max-width: 380px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
}

.command-bar__submenu-item[b-9woqa3uyyg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #24292f;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .command-bar__submenu-item:hover[b-9woqa3uyyg] {
        background: #f3f4f6;
    }

    .command-bar__submenu-item:disabled[b-9woqa3uyyg] {
        opacity: 0.55;
        cursor: default;
    }

.command-bar__submenu-text[b-9woqa3uyyg] {
    flex: 1 1 auto;
    font-weight: 600;
    line-height: 1.25;
}

/* Segunda etiqueta, a la derecha y apagada: el código de fábrica del listado (Shortcut del comando). */
.command-bar__submenu-cod[b-9woqa3uyyg] {
    flex: 0 0 auto;
    margin-left: auto;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
}

/* Capa para cerrar el menú al pulsar fuera */
.command-bar__backdrop[b-9woqa3uyyg] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* ===== MODO COMPACTO ===== */
/* Antes de replegar comandos al "···", se ocultan los textos y quedan solo los iconos. */
.command-bar--compact .command-bar__text[b-9woqa3uyyg] {
    display: none;
}

.command-bar--compact .command-bar__btn[b-9woqa3uyyg] {
    min-width: 0;
}

/* ===== VARIANTE EN LÍNEA (icono al lado del texto) ===== */
/* Solo cambia la disposición: el icono se coloca a la izquierda, alineado horizontalmente
   con su texto, en vez del apilado icono-arriba/texto-debajo por defecto (estilo GitHub).
   No toca colores: conserva el estilo (primario azul, peligro, neutro) de cada botón. */
.command-bar.cmdbar-inline .command-bar__btn[b-9woqa3uyyg] {
    flex-direction: row;
    gap: 6px;
    padding: 6px 12px;
}

/* ===== VARIANTE PLANA (cabecera de fichas y listados) ===== */
/* Solo cambia la forma (relleno y radio de la ficha). El color es el de todas las barras: sale de
   css/botones.css según la función del botón. */
.command-bar.cmdbar-plain .command-bar__btn[b-9woqa3uyyg] {
    padding: 6px;
    border-radius: var(--cf-r-sm, 8px);
}

.command-bar.cmdbar-plain .command-bar__more[b-9woqa3uyyg] {
    border-radius: var(--cf-r-sm, 8px);
}

/* ===== MENÚ «···»: el icono lleva el color de la función, como en la fila ===== */
.command-bar__menu-item.cb-principal .command-bar__menu-icon[b-9woqa3uyyg] {
    color: var(--cb-principal-icono, currentColor);
}

.command-bar__menu-item.cb-crear .command-bar__menu-icon[b-9woqa3uyyg] {
    color: var(--cb-crear-icono, currentColor);
}

.command-bar__menu-item.cb-informes .command-bar__menu-icon[b-9woqa3uyyg] {
    color: var(--cb-informes-icono, currentColor);
}

.command-bar__menu-item.cb-borrar[b-9woqa3uyyg],
.command-bar__menu-item.cb-borrar .command-bar__menu-icon[b-9woqa3uyyg] {
    color: var(--cb-borrar-icono, #b91c1c);
}
/* _content/ErpPowergest/Presentation/Components/Componentes/EditorComponentesArticulo.razor.rz.scp.css */
/* Editor de componentes de un artículo (Producción). CSS aislado y AUTOSUFICIENTE: el editor vive en dos
   sitios —la ficha del artículo y la pantalla maestro/detalle— y las clases de la ficha (articulos.css)
   están acotadas a .articulos-page, así que aquí no se depende de ninguna hoja de página. */

.ec-cargando[b-6aikc8f5lb] {
    color: #61707d;
    font-size: .85rem;
}

.ec-card[b-6aikc8f5lb] {
    padding: 1rem 1.1rem;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
}

.ec-card + .ec-card[b-6aikc8f5lb] {
    margin-top: 1rem;
}

/* Modo sin marco (parámetro SinMarco, lo pide la pestaña «Componentes» de la ficha del artículo): el
   editor se pinta a ras del contenido de la pestaña, que es quien pone ya el marco. Solo desaparece la
   caja; el ritmo vertical (la separación con el panel «Se usa como componente en») se conserva. */
.ec-card-plano[b-6aikc8f5lb] {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.ec-head[b-6aikc8f5lb] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Con los comandos en la cabecera, la fila deja de ser solo texto: se alinea por el centro para que la
   barra no cuelgue de la línea base del título. */
.ec-head-comandos[b-6aikc8f5lb] {
    align-items: center;
}

/* Y el coste deja de empujarse a la derecha: ahí van ahora los comandos. Título y coste se leen
   seguidos a la izquierda, y el hueco que sobra queda entre el texto y los botones. */
.ec-head-comandos .ec-coste[b-6aikc8f5lb] {
    margin-left: 0;
}

.ec-title[b-6aikc8f5lb] {
    font-size: 1rem;
    font-weight: 600;
    color: #22303c;
}

/* El coste calculado va en la cabecera del panel: es el número que el usuario compara con el precio
   de compra de la ficha. */
.ec-coste[b-6aikc8f5lb] {
    margin-left: auto;
    color: #61707d;
    font-size: .85rem;
}

.ec-vacia[b-6aikc8f5lb] {
    margin-bottom: .9rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: #f4f7fa;
    color: #61707d;
    font-size: .85rem;
}

/* Cabecera editable: unidades de base, producir al vender y observaciones. */
.ec-cabecera[b-6aikc8f5lb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.ec-campo[b-6aikc8f5lb] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ec-campo label[b-6aikc8f5lb] {
    color: #61707d;
    font-size: .78rem;
}

.ec-campo small[b-6aikc8f5lb] {
    color: #8a97a3;
    font-size: .75rem;
}

.ec-input[b-6aikc8f5lb] {
    width: 100%;
    max-width: 100%;
    padding: .4rem .55rem;
    border: 1px solid #d3dce4;
    border-radius: 6px;
    background: #fff;
    font-size: .88rem;
    color: #22303c;
    box-sizing: border-box;
}

.ec-input:focus[b-6aikc8f5lb] {
    border-color: #4a90d9;
    outline: none;
}

.ec-input-num[b-6aikc8f5lb] {
    text-align: right;
}

/* Inputs dentro de la rejilla: sin el ancho completo, que descuadraría la tabla. */
.ec-mini[b-6aikc8f5lb] {
    width: 6.5rem;
    text-align: right;
}

.ec-tabla-envoltorio[b-6aikc8f5lb] {
    overflow-x: auto;
}

.ec-tabla[b-6aikc8f5lb] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.ec-tabla th[b-6aikc8f5lb] {
    padding: .45rem .55rem;
    border-bottom: 1px solid #e3e9ef;
    color: #61707d;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ec-tabla td[b-6aikc8f5lb] {
    padding: .35rem .55rem;
    border-bottom: 1px solid #f0f4f8;
    color: #35434f;
    vertical-align: middle;
}

.ec-num[b-6aikc8f5lb] {
    text-align: right;
    white-space: nowrap;
}

.ec-col-orden[b-6aikc8f5lb],
.ec-col-acciones[b-6aikc8f5lb] {
    width: 5rem;
}

.ec-cod[b-6aikc8f5lb] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La pista y la descripción del componente resuelto pueden ser largas: aquí SÍ se parte la línea. */
.ec-desc[b-6aikc8f5lb] {
    white-space: normal;
    min-width: 12rem;
}

.ec-sin-filas[b-6aikc8f5lb] {
    padding: 1.2rem .55rem;
    color: #8a97a3;
    text-align: center;
}

/* Fila de alta (tfoot): se distingue del cuerpo por el fondo. */
.ec-alta td[b-6aikc8f5lb] {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
}

.ec-alta-orden[b-6aikc8f5lb] {
    color: #94a3b8;
    text-align: center;
}

.ec-alta-desc[b-6aikc8f5lb] {
    color: #64748b;
    font-style: italic;
}

/* El input del código lo pinta CampoConBuscador (componente HIJO): el atributo de aislamiento de esta
   hoja no le llega, así que se le alcanza con ::deep desde la fila, que sí es de este componente. */
.ec-alta[b-6aikc8f5lb]  .ec-codigo {
    width: 12rem;
    min-width: 12rem;
}

.ec-btn-ico[b-6aikc8f5lb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #61707d;
    cursor: pointer;
}

.ec-btn-ico:hover:not(:disabled)[b-6aikc8f5lb] {
    background: #f0f4f8;
    color: #22303c;
}

.ec-btn-ico:disabled[b-6aikc8f5lb] {
    opacity: .35;
    cursor: default;
}

.ec-alta-btn:not(:disabled)[b-6aikc8f5lb] {
    border-color: #2f6fb0;
    color: #2f6fb0;
}

.ec-btn[b-6aikc8f5lb] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .8rem;
    border: 1px solid #d3dce4;
    border-radius: 6px;
    background: #fff;
    color: #35434f;
    font-size: .85rem;
    cursor: pointer;
}

.ec-btn:hover:not(:disabled)[b-6aikc8f5lb] {
    background: #f4f7fa;
}

.ec-btn:disabled[b-6aikc8f5lb] {
    opacity: .55;
    cursor: default;
}

.ec-btn-primario[b-6aikc8f5lb] {
    border-color: #2f6fb0;
    background: #2f6fb0;
    color: #fff;
}

.ec-btn-primario:hover:not(:disabled)[b-6aikc8f5lb] {
    background: #275c93;
}

.ec-acciones[b-6aikc8f5lb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: .9rem;
}

.ec-confirm[b-6aikc8f5lb] {
    color: #8a5a00;
    font-size: .85rem;
}

/* La misma pregunta, cuando los comandos están arriba: banda propia bajo la cabecera, junto a los
   botones que la responden. */
.ec-confirm-banda[b-6aikc8f5lb] {
    display: block;
    margin-bottom: .75rem;
    padding: .5rem .7rem;
    border-radius: 6px;
    background: #fff8e8;
}

.ec-error[b-6aikc8f5lb] {
    margin: .8rem 0 0;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #fdecea;
    color: #a02020;
    font-size: .85rem;
}

.ec-aviso[b-6aikc8f5lb] {
    margin: .8rem 0 0;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #eaf6ec;
    color: #1d6b2c;
    font-size: .85rem;
}

/* ── CELDAS DE REJILLA (teclado tipo Excel) ──────────────────────────────────────────────────────
   Una celda NO parece un campo de formulario: sin borde ni fondo propios, ocupa toda la casilla y
   deja ver la tabla. El borde y el fondo aparecen SOLO donde está el cursor, que es lo que hace
   legible el modelo «hay una celda activa» de una hoja de cálculo. */
.ec-cell[b-6aikc8f5lb] {
    width: 100%;
    padding: .25rem .4rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font: inherit;
    color: inherit;
}

/* Lo editable se ve ANTES de tocarlo: cantidad, orden y observaciones llevan marca discreta; el código,
   que es de solo lectura, no. Así se distingue de un vistazo dónde se teclea y dónde no. */
.ec-cell:not([readonly])[b-6aikc8f5lb] {
    border-color: #dbe4ec;
    border-style: dashed;
    background: #fbfcfd;
}

.ec-cell:focus[b-6aikc8f5lb] {
    outline: none;
    border-color: #2b7cd3;
    border-style: solid;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(43, 124, 211, .15);
}

/* En NAVEGACIÓN el cursor de texto sobra: la celda está seleccionada entera, no se está escribiendo
   dentro. Se oculta con color transparente (el caret nativo no se quita de otro modo). */
.ec-cell:focus:not(.ec-editing)[b-6aikc8f5lb] {
    caret-color: transparent;
}

/* En EDICIÓN la celda se distingue de la celda meramente enfocada: aquí SÍ se está tecleando. */
.ec-cell.ec-editing[b-6aikc8f5lb] {
    border-color: #1a6fc4;
    background: #fff;
    caret-color: auto;
}

/* La celda de código es de solo lectura: el cursor dice que no se teclea, pero sigue siendo celda
   (se navega hasta ella y F2 la cambia). */
.ec-cell[readonly][b-6aikc8f5lb] {
    cursor: default;
}

/* «Unidades de base» es un número corto (casi siempre 1): con el ancho de columna de la rejilla de
   cabecera ocupaba media pantalla para cuatro dígitos. Se le da el ancho del dato, no el de la rejilla. */
.ec-campo-estrecho[b-6aikc8f5lb] {
    max-width: 11rem;
}

/* Check del veto de venta: casilla y etiqueta en línea, con su explicación debajo como los demás
   campos de la cabecera. */
.ec-campo-check[b-6aikc8f5lb] {
    justify-content: flex-start;
}

.ec-check[b-6aikc8f5lb] {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    color: #22303c;
    font-size: .85rem;
}

.ec-check input[b-6aikc8f5lb] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/Components/Copias/CopiaAntesDe.razor.rz.scp.css */
.cad[b-kebb5mfa2d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
}

.cad-check[b-kebb5mfa2d] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cad-avance[b-kebb5mfa2d],
.cad-ultima[b-kebb5mfa2d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--texto-secundario, #64748b);
}

.cad-ultima a[b-kebb5mfa2d] {
    color: #2563eb;
}

.cad-girando[b-kebb5mfa2d] {
    font-size: 18px;
    animation: cad-girar-b-kebb5mfa2d 1s linear infinite;
}

@keyframes cad-girar-b-kebb5mfa2d {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ErpPowergest/Presentation/Components/DesgloseComponentes/DesgloseComponentesModal.razor.rz.scp.css */
/* Ventana de componentes de escandallo — mismo lenguaje visual que la de lotes/series (dls-*) y que
   SelectorEntidad (sel-*). CSS del componente PROPIO: todo el marcado lo pinta este componente, así que
   no hace falta el combinador de profundidad (y sobre templates de Syncfusion no se usa: memoria del repo). */

.dcm-overlay[b-cffi8x8ql1] {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483646; /* uno por debajo de la ventana de lotes, que se abre ENCIMA de esta */
    animation: dcm-fade-b-cffi8x8ql1 .2s ease forwards;
}

.dcm-overlay .material-symbols-rounded[b-cffi8x8ql1] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes dcm-fade-b-cffi8x8ql1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dcm-card[b-cffi8x8ql1] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 900px;
    max-width: 94vw;
    max-height: 88vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: dcm-scale-b-cffi8x8ql1 .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dcm-scale-b-cffi8x8ql1 {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .dcm-card[b-cffi8x8ql1] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Header */
.dcm-header[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.25rem .8rem;
}

.dcm-title[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 0;
}

.dcm-title span:last-child[b-cffi8x8ql1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcm-title-icon[b-cffi8x8ql1] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.dcm-close[b-cffi8x8ql1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.dcm-close:hover[b-cffi8x8ql1] {
    background: #f3f4f6;
    color: #111827;
}

/* Resumen: cantidad / base producida / modo (los VALORES vienen de Application; aquí solo se pintan). */
.dcm-summary[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 1.25rem .7rem;
    flex-wrap: wrap;
}

.dcm-chip[b-cffi8x8ql1] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: .82rem;
}

.dcm-chip-ok[b-cffi8x8ql1] {
    background: #ecfdf5;
    color: #047857;
}

.dcm-chip-warn[b-cffi8x8ql1] {
    background: #fff7ed;
    color: #c2410c;
}

.dcm-chip-info[b-cffi8x8ql1] {
    background: #eff6ff;
    color: #1d4ed8;
}

.dcm-chip-manual[b-cffi8x8ql1] {
    background: #fef3c7;
    color: #92400e;
}

/* Avisos (los textos vienen de Application) */
.dcm-avisos[b-cffi8x8ql1] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0 1.25rem .7rem;
    padding: .55rem .8rem;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
    color: #92400e;
    font-size: .84rem;
}

.dcm-avisos > div[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dcm-aviso-error[b-cffi8x8ql1] {
    color: #b91c1c;
}

/* Alta: código + cantidad + añadir / regenerar / marcar manual */
.dcm-alta[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 1.25rem .8rem;
    flex-wrap: wrap;
}

.dcm-input[b-cffi8x8ql1] {
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dcm-input:focus[b-cffi8x8ql1] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dcm-alta-codigo[b-cffi8x8ql1] {
    flex: 1 1 200px;
    min-width: 0;
}

.dcm-alta-cantidad[b-cffi8x8ql1] {
    width: 110px;
    text-align: right;
    flex-shrink: 0;
}

/* Cuerpo: la tabla de componentes */
.dcm-body[b-cffi8x8ql1] {
    display: flex;
    gap: 1rem;
    padding: 0 1.25rem .5rem;
    min-height: 200px;
    overflow: hidden;
}

.dcm-panel[b-cffi8x8ql1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    overflow: hidden;
}

.dcm-panel-title[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .9rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f3;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.dcm-table-wrap[b-cffi8x8ql1] {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.dcm-table[b-cffi8x8ql1] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.dcm-table thead th[b-cffi8x8ql1] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: .5rem .9rem;
    background: #fff;
    color: #9ca3af;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #eef0f3;
    white-space: nowrap;
}

.dcm-table td[b-cffi8x8ql1] {
    padding: .5rem .9rem;
    color: #374151;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.dcm-codigo[b-cffi8x8ql1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dcm-num[b-cffi8x8ql1] {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dcm-quitar[b-cffi8x8ql1] {
    width: 44px;
    text-align: center !important;
}

.dcm-cantidad-input[b-cffi8x8ql1] {
    height: 30px;
    width: 90px;
    text-align: right;
    font-size: .85rem;
}

/* Componente que a su vez es compuesto: recuento de sus componentes junto al concepto. */
.dcm-sub[b-cffi8x8ql1] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    margin-inline-start: .5rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .74rem;
}

.dcm-sub .material-symbols-rounded[b-cffi8x8ql1] {
    font-size: .95rem;
}

.dcm-lotes[b-cffi8x8ql1] {
    white-space: nowrap;
}

.dcm-lotes-resumen[b-cffi8x8ql1] {
    color: #6b7280;
    font-size: .82rem;
}

.dcm-state[b-cffi8x8ql1] {
    padding: 1.6rem .9rem;
    text-align: center;
    color: #9ca3af;
    font-size: .86rem;
}

.dcm-icon-btn[b-cffi8x8ql1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.dcm-icon-btn:hover:not(:disabled)[b-cffi8x8ql1] {
    background: #f3f4f6;
    color: #b91c1c;
}

.dcm-lotes-btn:hover:not(:disabled)[b-cffi8x8ql1] {
    color: #2563eb;
}

/* Acciones */
.dcm-actions[b-cffi8x8ql1] {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
    margin-top: .5rem;
}

.dcm-hint[b-cffi8x8ql1] {
    margin-right: auto;
    font-size: .76rem;
    color: #9ca3af;
}

.dcm-btn[b-cffi8x8ql1] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.dcm-btn-ghost[b-cffi8x8ql1] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.dcm-btn-ghost:hover[b-cffi8x8ql1] {
    background: #f3f4f6;
}

.dcm-btn-primary[b-cffi8x8ql1] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.dcm-btn-primary:hover:not(:disabled)[b-cffi8x8ql1] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Components/DesgloseLotesSeries/DesgloseLotesSeriesModal.razor.rz.scp.css */
/* Ventana de desglose de lotes/series — mismo lenguaje visual que SelectorEntidad (sel-*). */

.dls-overlay[b-5u75x28cs4] {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;
    animation: dls-fade-b-5u75x28cs4 .2s ease forwards;
}

.dls-overlay .material-symbols-rounded[b-5u75x28cs4] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes dls-fade-b-5u75x28cs4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dls-card[b-5u75x28cs4] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 860px;
    max-width: 94vw;
    max-height: 88vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: dls-scale-b-5u75x28cs4 .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dls-scale-b-5u75x28cs4 {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .dls-card[b-5u75x28cs4] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Header */
.dls-header[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.25rem .8rem;
}

.dls-title[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 0;
}

.dls-title span:last-child[b-5u75x28cs4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dls-title-icon[b-5u75x28cs4] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.dls-close[b-5u75x28cs4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.dls-close:hover[b-5u75x28cs4] {
    background: #f3f4f6;
    color: #111827;
}

/* Resumen: cantidad / pendiente (los VALORES vienen de Application; aquí solo se pintan). */
.dls-summary[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 1.25rem .7rem;
    flex-wrap: wrap;
}

.dls-chip[b-5u75x28cs4] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: .82rem;
}

.dls-chip-ok[b-5u75x28cs4] {
    background: #ecfdf5;
    color: #047857;
}

.dls-chip-warn[b-5u75x28cs4] {
    background: #fff7ed;
    color: #c2410c;
}

.dls-chip-info[b-5u75x28cs4] {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Avisos (los textos vienen de Application) */
.dls-avisos[b-5u75x28cs4] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0 1.25rem .7rem;
    padding: .55rem .8rem;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
    color: #92400e;
    font-size: .84rem;
}

.dls-avisos > div[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dls-aviso-error[b-5u75x28cs4] {
    color: #b91c1c;
}

/* Alta: serie/rango o lote + cantidad + añadir/proponer */
.dls-alta[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 1.25rem .8rem;
}

.dls-input[b-5u75x28cs4] {
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dls-input:focus[b-5u75x28cs4] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dls-alta-texto[b-5u75x28cs4] {
    flex: 1;
    min-width: 0;
}

.dls-alta-cantidad[b-5u75x28cs4] {
    width: 110px;
    text-align: right;
    flex-shrink: 0;
}

.dls-alta-caducidad[b-5u75x28cs4] {
    width: 150px;
    flex-shrink: 0;
}

/* Cuerpo: dos paneles (desglose | disponibles) */
.dls-body[b-5u75x28cs4] {
    display: flex;
    gap: 1rem;
    padding: 0 1.25rem .5rem;
    min-height: 220px;
    overflow: hidden;
}

.dls-panel[b-5u75x28cs4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    overflow: hidden;
}

.dls-panel-title[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .9rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f3;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.dls-disp-filtro[b-5u75x28cs4] {
    height: 30px;
    width: 140px;
    font-size: .82rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.dls-table-wrap[b-5u75x28cs4] {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.dls-table[b-5u75x28cs4] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.dls-table thead th[b-5u75x28cs4] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: .5rem .9rem;
    background: #fff;
    color: #9ca3af;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #eef0f3;
    white-space: nowrap;
}

.dls-table td[b-5u75x28cs4] {
    padding: .5rem .9rem;
    color: #374151;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.dls-num[b-5u75x28cs4] {
    text-align: right !important;
    white-space: nowrap;
}

.dls-quitar[b-5u75x28cs4] {
    width: 44px;
    text-align: center !important;
}

.dls-cantidad-input[b-5u75x28cs4] {
    height: 30px;
    width: 90px;
    text-align: right;
    font-size: .85rem;
}

.dls-caducidad-input[b-5u75x28cs4] {
    height: 30px;
    width: 140px;
    font-size: .85rem;
}

/* Lote caducado en los disponibles: la DECISIÓN viene de Application; aquí solo el estilo. */
.dls-caducado[b-5u75x28cs4] {
    color: #b91c1c;
    font-weight: 600;
}

.dls-row[b-5u75x28cs4] {
    cursor: pointer;
    transition: background .12s ease;
}

.dls-row:hover[b-5u75x28cs4] {
    background: #f8fafc;
}

.dls-row.active[b-5u75x28cs4] {
    background: #eff5ff;
}

.dls-state[b-5u75x28cs4] {
    padding: 1.6rem .9rem;
    text-align: center;
    color: #9ca3af;
    font-size: .86rem;
}

.dls-icon-btn[b-5u75x28cs4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.dls-icon-btn:hover:not(:disabled)[b-5u75x28cs4] {
    background: #f3f4f6;
    color: #b91c1c;
}

.dls-icon-btn:disabled[b-5u75x28cs4] {
    opacity: .4;
    cursor: not-allowed;
}

/* Paginador de disponibles */
.dls-pager[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    padding: .35rem .6rem;
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
}

.dls-pager .dls-icon-btn:hover:not(:disabled)[b-5u75x28cs4] {
    color: #111827;
}

.dls-pageinfo[b-5u75x28cs4] {
    font-size: .78rem;
    color: #6b7280;
}

/* Acciones */
.dls-actions[b-5u75x28cs4] {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
    margin-top: .5rem;
}

.dls-hint[b-5u75x28cs4] {
    margin-right: auto;
    font-size: .76rem;
    color: #9ca3af;
}

.dls-btn[b-5u75x28cs4] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.dls-btn-ghost[b-5u75x28cs4] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.dls-btn-ghost:hover[b-5u75x28cs4] {
    background: #f3f4f6;
}

.dls-btn-primary[b-5u75x28cs4] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.dls-btn-primary:hover:not(:disabled)[b-5u75x28cs4] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Components/FichaNavigator/FichaNavigator.razor.rz.scp.css */
/* ===== NAVEGADOR + IDENTIDAD ===== */

.cf-nav[b-vc9yzdntdx] {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Crece hasta la barra de comandos —así el paso anterior/siguiente queda pegado a ella, en un
       sitio fijo— pero por defecto NO cede: la cabecera desborda cuando no caben navegador +
       CommandBar, y es el CommandBar quien reacciona (compacta y repliega). Crecer no estorba a esa
       medida: el script mira si la fila DESBORDA, y lo que crece solo ocupa el hueco que sobra. El
       override de fase 2 vive en la página (.command-bar-host-collapsed ::deep .cf-nav), que es quien
       posee la clase de colapso. */
    flex: 1 0 auto;
    min-width: 0;
}

/* Paso anterior/siguiente: un solo control «‹ 3 / 120 ›», a la derecha del todo del navegador. */
.cf-paso[b-vc9yzdntdx] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--cb-neutro-borde, #d0d7de);
    border-radius: 8px;
    background: var(--cb-neutro-fondo, #ffffff);
    box-shadow: var(--cb-sombra, none);
    overflow: hidden;
}

.cf-nav-btn[b-vc9yzdntdx] {
    flex: 0 0 auto;
    width: 36px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--cb-neutro-texto, #374151);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cf-nav-btn:hover:not(:disabled)[b-vc9yzdntdx] {
        background: var(--cb-neutro-hover-fondo, #f6f8fa);
        color: var(--cb-neutro-hover-texto, #111827);
    }

    .cf-nav-btn:disabled[b-vc9yzdntdx] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .cf-nav-btn .material-symbols-rounded[b-vc9yzdntdx] {
        font-size: 22px;
    }

.cf-identity-wrap[b-vc9yzdntdx] {
    position: relative;
    /* No crece: el hueco entre el nombre y el paso es del navegador, no del botón del nombre (si
       creciera, la zona que abre el buscador llegaría hasta las flechas). */
    flex: 0 1 auto;
    /* Ancho mínimo de la zona de info: no se reduce más de la cuenta. Al alcanzarlo, el CommandBar
       es quien cede (compacta y repliega). El override de último recurso vive en la página. */
    min-width: 300px;
}

.cf-identity[b-vc9yzdntdx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .cf-identity:hover[b-vc9yzdntdx] {
        background: #f8fafc;
        border-color: #e5e7eb;
    }

    .cf-identity:focus-visible[b-vc9yzdntdx] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.cf-avatar[b-vc9yzdntdx] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* Con logo: el recuadro solo enmarca la imagen (sin fondo ni relleno de iniciales). */
.cf-avatar-img[b-vc9yzdntdx] {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
}

    .cf-avatar-img img[b-vc9yzdntdx] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
    }

.cf-identity-main[b-vc9yzdntdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cf-identity-name[b-vc9yzdntdx] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f2937;
}

.cf-identity-name-text[b-vc9yzdntdx] {
    min-width: 0;
    /* Tope para que un nombre largo no agrande el navegador (recorta con ellipsis). */
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-identity-caret[b-vc9yzdntdx] {
    flex: 0 0 auto;
    font-size: 20px;
    color: #94a3b8;
}

.cf-identity-meta[b-vc9yzdntdx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cf-identity-code[b-vc9yzdntdx] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #6b7280;
    font-weight: 650;
}

.cf-nav-counter[b-vc9yzdntdx] {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-inline: 1px solid var(--cb-neutro-borde, #d0d7de);
    font-size: 12px;
    font-weight: 600;
    color: var(--cb-neutro-texto, #374151);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Badges de estado en la identidad */
.cf-estado-badge[b-vc9yzdntdx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cf-estado-green[b-vc9yzdntdx] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cf-estado-orange[b-vc9yzdntdx] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.cf-estado-red[b-vc9yzdntdx] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ===== POPOVER BUSCADOR ===== */

.cf-switcher[b-vc9yzdntdx] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1001;
    width: max(280px, 100%);
    max-width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    animation: cfMenuIn-b-vc9yzdntdx 0.13s ease both;
}

.cf-switcher-search[b-vc9yzdntdx] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #eef2f7;
}

.cf-switcher-search-icon[b-vc9yzdntdx] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cf-switcher-input[b-vc9yzdntdx] {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cf-switcher-input[b-vc9yzdntdx]::placeholder {
        color: #9ca3af;
    }

    .cf-switcher-input:focus[b-vc9yzdntdx] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.cf-switcher-list[b-vc9yzdntdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cf-switcher-list[b-vc9yzdntdx]::-webkit-scrollbar {
        width: 6px;
    }

    .cf-switcher-list[b-vc9yzdntdx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.cf-switcher-empty[b-vc9yzdntdx] {
    padding: 18px 12px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 650;
}

.cf-switcher-item[b-vc9yzdntdx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    transition: background 0.14s ease, border-color 0.14s ease;
}

    .cf-switcher-item:hover[b-vc9yzdntdx] {
        background: #f8fbff;
    }

    .cf-switcher-item.active[b-vc9yzdntdx] {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

.cf-switcher-item-avatar[b-vc9yzdntdx] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #eef2f7;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.cf-switcher-item.active .cf-switcher-item-avatar[b-vc9yzdntdx] {
    background: #dbeafe;
    color: #1d4ed8;
}

.cf-switcher-item-main[b-vc9yzdntdx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cf-switcher-item-name[b-vc9yzdntdx] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.cf-switcher-item-meta[b-vc9yzdntdx] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #6b7280;
}

.cf-switcher-item-check[b-vc9yzdntdx] {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 18px;
    color: #2563eb;
}

/* Capa para cerrar el popover al pulsar fuera */
.cf-backdrop[b-vc9yzdntdx] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

@keyframes cfMenuIn-b-vc9yzdntdx {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */

/* El contador de posición se oculta cuando no hay sitio; la info reduce su mínimo. */
@media (max-width: 640px) {
    .cf-nav-counter[b-vc9yzdntdx] {
        display: none;
    }

    .cf-identity-wrap[b-vc9yzdntdx] {
        min-width: 220px;
    }

    .cf-identity-name[b-vc9yzdntdx] {
        font-size: 17px;
    }

    .cf-avatar[b-vc9yzdntdx] {
        width: 36px;
        height: 36px;
    }
}

/* En pantallas muy estrechas se compacta la identidad para que nada se recorte. */
@media (max-width: 480px) {
    .cf-identity-caret[b-vc9yzdntdx] {
        display: none;
    }

    .cf-nav[b-vc9yzdntdx] {
        gap: 6px;
    }

    .cf-identity-wrap[b-vc9yzdntdx] {
        min-width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-switcher[b-vc9yzdntdx] {
        animation: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Components/Filtros/FiltroMultiple.razor.rz.scp.css */
/* FILTRO DE VARIAS OPCIONES
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El botón replica exactamente el `.xx-filter-select` de las páginas —mismo alto, mismo radio, mismo
   borde y mismo tipo de letra— para que, puesto al lado de un `<select>` de verdad, la fila de filtros
   no parezca dos controles distintos porque uno de ellos admita más de una respuesta.

   Los valores no se «parecen»: son los mismos que hoy repiten, idénticos, ClientesPage, ProveedoresPage,
   AgentesPage, Vales, Anticipos y RemesaListaView. Si algún día cambia el aspecto de los filtros, este
   fichero es uno de los sitios donde hay que tocarlo. */

.fmul[b-qowghy2vgm] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.fmul-boton[b-qowghy2vgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    /* Un <button> no hereda la tipografía de la página por su cuenta, y un <select> tampoco: sin esto,
       el control quedaría en la fuente del sistema y el de al lado no. */
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    text-align: left;
    outline: none;
    cursor: pointer;
    /* El botón respeta el ancho de su celda: el nombre de lo marcado se recorta antes que ensancharla. */
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fmul-boton:focus-visible[b-qowghy2vgm] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.fmul-boton:disabled[b-qowghy2vgm] {
    background: #f8fafc;
    color: #9ca3af;
    cursor: default;
}

.fmul-texto[b-qowghy2vgm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmul-flecha[b-qowghy2vgm] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #6b7280;
    transition: transform 0.15s ease;
}

.fmul-boton[aria-expanded="true"] .fmul-flecha[b-qowghy2vgm] {
    transform: rotate(180deg);
}

/* El panel NO se recorta contra nada: las filas de filtros no llevan `overflow`, así que cae libremente
   sobre la tabla que tienen debajo. */
.fmul-panel[b-qowghy2vgm] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* Al menos lo que mide el botón, y lo que necesiten los nombres si son más largos. */
    min-width: 100%;
    /* Por encima del recogeclics, que es su hermano en el árbol pero va detrás en la pantalla. */
    z-index: 1001;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
}

.fmul-opcion[b-qowghy2vgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.fmul-opcion:hover[b-qowghy2vgm] {
    background: #f3f6fa;
}

.fmul-opcion input[b-qowghy2vgm] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

/* «Todas» estando ya en todas: la casilla no se puede tocar, pero la fila NO se apaga —sigue siendo la
   respuesta correcta a «¿qué estoy viendo?»—. Solo se le quita el gesto de que aceptaría un clic. */
.fmul-opcion input:disabled[b-qowghy2vgm] {
    cursor: default;
}

.fmul-todos:has(input:disabled)[b-qowghy2vgm] {
    cursor: default;
}

.fmul-todos:has(input:disabled):hover[b-qowghy2vgm] {
    background: transparent;
}

.fmul-sep[b-qowghy2vgm] {
    height: 1px;
    margin: 5px 4px;
    background: #eef2f7;
}

/* Sin overlay para cerrar: lo hace <CierreExterior> con un vigía en fase de captura. Además de no
   tragarse el clic, eso libra a este control de depender de que ningún antepasado tenga un `transform`
   —ni siquiera neutro—, que es lo que convertiría a un overlay `position: fixed` en prisionero de la
   página en vez de dejarlo cubrir la ventana. */
/* _content/ErpPowergest/Presentation/Components/Filtros/FiltroUnico.razor.rz.scp.css */
/* FILTRO DE UNA OPCIÓN
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Gemelo de FiltroMultiple.razor.css: el botón es el MISMO (alto, radio, borde, letra) y el panel también (borde,
   radio, sombra, relleno), para que en una fila de filtros los dos controles se lean como uno solo que a veces admite
   varias respuestas. Si cambia el aspecto de los filtros, se toca en los dos ficheros. */

.funi[b-t5oyfq0l2v] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.funi-boton[b-t5oyfq0l2v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    text-align: left;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* Abierto se ve como enfocado: es el control con el que se está hablando. */
    .funi-boton:focus-visible[b-t5oyfq0l2v],
    .funi-boton[aria-expanded="true"][b-t5oyfq0l2v] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .funi-boton:disabled[b-t5oyfq0l2v] {
        background: #f8fafc;
        color: #9ca3af;
        cursor: default;
    }

.funi-texto[b-t5oyfq0l2v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funi-flecha[b-t5oyfq0l2v] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #6b7280;
    transition: transform 0.15s ease;
}

.funi-boton[aria-expanded="true"] .funi-flecha[b-t5oyfq0l2v] {
    transform: rotate(180deg);
}

/* LA LISTA
   Cae sobre la tabla de debajo (las filas de filtros no recortan). Aparece con un desliz corto —120 ms, lo justo para
   que se lea de dónde sale, no para esperarlo— y con scroll propio si algún día tiene más opciones de las que caben. */
.funi-panel[b-t5oyfq0l2v] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    z-index: 1001;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
    animation: funi-aparece-b-t5oyfq0l2v 0.12s ease-out;
}

@keyframes funi-aparece-b-t5oyfq0l2v {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Una opción: fila de 34 px —cómoda al ratón sin parecer un menú de tableta—, radio interior más pequeño que el del
   panel para que las esquinas vayan concéntricas, y una columna fija a la izquierda para el visto: con o sin él, los
   nombres empiezan todos en el mismo sitio. */
.funi-opcion[b-t5oyfq0l2v] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px 0 6px;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease, color 0.1s ease;
}

    /* La que señala el ratón y la que señala el teclado se ven igual: es «la que se elegiría ahora». */
    .funi-opcion:hover[b-t5oyfq0l2v],
    .funi-opcion.is-activa[b-t5oyfq0l2v] {
        background: #f3f6fa;
    }

    /* La elegida no se rellena: el visto y el azul bastan, y un fondo fijo competiría con el de la señalada. */
    .funi-opcion.is-elegida[b-t5oyfq0l2v] {
        color: #1d4ed8;
        font-weight: 600;
    }

        .funi-opcion.is-elegida:hover[b-t5oyfq0l2v],
        .funi-opcion.is-elegida.is-activa[b-t5oyfq0l2v] {
            background: #eef4ff;
        }

.funi-visto[b-t5oyfq0l2v] {
    flex: 0 0 18px;
    width: 18px;
    font-size: 17px;
    color: #2563eb;
    text-align: center;
}

.funi-etiqueta[b-t5oyfq0l2v] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .funi-panel[b-t5oyfq0l2v] {
        animation: none;
    }

    .funi-boton[b-t5oyfq0l2v],
    .funi-flecha[b-t5oyfq0l2v],
    .funi-opcion[b-t5oyfq0l2v] {
        transition: none;
    }
}
/* _content/ErpPowergest/Presentation/Components/Firma/FirmaModal.razor.rz.scp.css */
/* Ventana de FIRMA MANUSCRITA — mismo lenguaje visual que la de componentes (dcm-*) y la de
   lotes/series (dls-*). Todo el marcado lo pinta este componente, así que no hace falta el combinador
   de profundidad (y sobre templates de Syncfusion no se usa: memoria del repo). */

.frm-overlay[b-x6h7qo0m0p] {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483646;
    animation: frm-fade-b-x6h7qo0m0p .2s ease forwards;
}

.frm-overlay .material-symbols-rounded[b-x6h7qo0m0p] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes frm-fade-b-x6h7qo0m0p {
    from { opacity: 0; }
    to { opacity: 1; }
}

.frm-card[b-x6h7qo0m0p] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 660px;
    max-width: 94vw;
    max-height: 92vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: frm-scale-b-x6h7qo0m0p .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes frm-scale-b-x6h7qo0m0p {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .frm-card[b-x6h7qo0m0p] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Cabecera */
.frm-header[b-x6h7qo0m0p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.25rem .8rem;
}

.frm-title[b-x6h7qo0m0p] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 0;
}

.frm-title span:last-child[b-x6h7qo0m0p] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frm-title-icon[b-x6h7qo0m0p] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.frm-close[b-x6h7qo0m0p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.frm-close:hover[b-x6h7qo0m0p] {
    background: #f3f4f6;
    color: #111827;
}

/* Cuerpo */
.frm-body[b-x6h7qo0m0p] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 0 1.25rem .5rem;
    overflow-y: auto;
}

.frm-campo[b-x6h7qo0m0p] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.frm-label[b-x6h7qo0m0p] {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.frm-opcional[b-x6h7qo0m0p] {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #9ca3af;
}

.frm-input[b-x6h7qo0m0p] {
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.frm-input:focus[b-x6h7qo0m0p] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.frm-textarea[b-x6h7qo0m0p] {
    height: auto;
    padding: .5rem .8rem;
    resize: vertical;
    line-height: 1.4;
}

/* Lienzo: el tamaño CSS (600x220) es el del PNG que se exporta. El canvas se estira al ancho
   disponible; en móvil vale menos de 600 y el PNG sale proporcionalmente menor (y más ligero). */
.frm-lienzo-wrap[b-x6h7qo0m0p] {
    position: relative;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.frm-lienzo[b-x6h7qo0m0p] {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 220px;
    margin: 0 auto;
    /* El dedo DIBUJA, no desplaza la página. El módulo JS lo repite por si el CSS no llega a tiempo. */
    touch-action: none;
    cursor: crosshair;
    background: #fff;
}

/* Renglón de cortesía y pista: decorativos, van DEBAJO del trazo y no capturan el puntero. */
.frm-linea[b-x6h7qo0m0p] {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 46px;
    height: 1px;
    background: #e5e7eb;
    pointer-events: none;
}

.frm-pista[b-x6h7qo0m0p] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    font-size: .76rem;
    color: #cbd5e1;
    pointer-events: none;
    user-select: none;
}

.frm-lienzo-acciones[b-x6h7qo0m0p] {
    display: flex;
    justify-content: flex-end;
}

/* Aviso inline (firmante vacío, lienzo sin trazo) */
.frm-error[b-x6h7qo0m0p] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .84rem;
}

/* Acciones */
.frm-actions[b-x6h7qo0m0p] {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
    margin-top: .5rem;
}

.frm-hint[b-x6h7qo0m0p] {
    margin-right: auto;
    font-size: .76rem;
    color: #9ca3af;
}

.frm-btn[b-x6h7qo0m0p] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.frm-btn:disabled[b-x6h7qo0m0p] {
    opacity: .6;
    cursor: default;
}

.frm-btn-ghost[b-x6h7qo0m0p] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.frm-btn-ghost:hover:not(:disabled)[b-x6h7qo0m0p] {
    background: #f3f4f6;
}

.frm-btn-primary[b-x6h7qo0m0p] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.frm-btn-primary:hover:not(:disabled)[b-x6h7qo0m0p] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Components/Kpi/KpiBoard.razor.rz.scp.css */
/* Panel KPI: actúa como contenedor de container queries para que las tarjetas
   y el nº de columnas escalen según el ancho del panel (no del viewport). */
.kpi-board[b-cukwc7hnxg] {
    container-type: inline-size;
    /* En layouts de página en columna flex, la fila de KPIs no debe encogerse. */
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 16px;
}

.kpi-board__title[b-cukwc7hnxg] {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* 4 en línea por defecto; reflujo determinista 4 -> 2x2 -> 1 (nunca 3+1). */
.kpi-board__grid[b-cukwc7hnxg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.5cqi, 12px);
}


/* Tres KPIs: tres columnas. Con el grid de 4 por defecto, un panel de 3 tiles deja un hueco muerto a
   la derecha y la fila se lee como si faltara un dato. El nº de tiles lo declara la página, que es
   quien lo sabe; el panel solo reparte. */
.kpi-board--3 .kpi-board__grid[b-cukwc7hnxg] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Seis KPIs: seis columnas, por el mismo motivo que la variante de tres. Con el grid de 4 quedarían
   4+2 y los dos huecos de la segunda fila se leen como datos que faltan. */
.kpi-board--6 .kpi-board__grid[b-cukwc7hnxg] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}


@container (max-width: 900px) {
    .kpi-board__grid[b-cukwc7hnxg],
    .kpi-board--3 .kpi-board__grid[b-cukwc7hnxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Seis van a 3x2 y no a 2x3: seis tiles en dos columnas hacen una columna muy alta. */
    .kpi-board--6 .kpi-board__grid[b-cukwc7hnxg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (max-width: 520px) {
    .kpi-board--6 .kpi-board__grid[b-cukwc7hnxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tier compacto: en paneles estrechos no colapsamos a 1 columna (eso apila los
   tiles en un bloque muy alto). Mantenemos 2x2 y aligeramos el chrome del panel
   para que la fila de KPIs ocupe la mínima altura sin perder legibilidad. */
@container (max-width: 520px) {
    .kpi-board[b-cukwc7hnxg] {
        padding: 8px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    }

    .kpi-board__title[b-cukwc7hnxg] {
        margin: 0 0 6px 0;
        font-size: 13px;
    }

    .kpi-board__grid[b-cukwc7hnxg] {
        gap: clamp(6px, 1.5cqi, 10px);
    }
}

/* Variante «línea»: el resumen DENTRO de un panel de trabajo, en una sola fila de indicadores y sin
   marco de tarjeta. Es para las pantallas donde el alto es la herramienta —el diseñador del catálogo
   web—: el dato tiene que estar a la vista, pero sin quedarse con una banda de la pantalla. Con
   etiquetas de UNA palabra caben los cuatro incluso en una columna.

   Va AL FINAL a propósito: el tier compacto de arriba vuelve a poner relleno y sombra al panel con
   la misma especificidad, y en un panel estrecho ese tier siempre entra. Aquí gana el orden.

   El interior del tile se toca con `::deep` porque es OTRO componente: la variante la declara el
   panel, que es quien sabe cómo van sus tiles. */
.kpi-board--linea[b-cukwc7hnxg] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    /* Los cuatro EN LÍNEA siempre: las container queries de arriba los partirían en dos filas, que
       es justo el alto que esta variante existe para no gastar. */
    .kpi-board--linea .kpi-board__grid[b-cukwc7hnxg] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .kpi-board--linea[b-cukwc7hnxg]  .kpi-tile {
        gap: 1px;
        padding: 4px 7px;
        border-left-width: 3px;
        border-radius: 8px;
        box-shadow: none;
    }

    .kpi-board--linea[b-cukwc7hnxg]  .kpi-tile__label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .kpi-board--linea[b-cukwc7hnxg]  .kpi-tile__value {
        font-size: 15px;
    }

    .kpi-board--linea[b-cukwc7hnxg]  .kpi-tile__value--text {
        font-size: 11px;
    }

    /* El pie es lo prescindible cuando lo que se compra con él es alto de trabajo. */
    .kpi-board--linea[b-cukwc7hnxg]  .kpi-tile__hint {
        display: none;
    }
/* _content/ErpPowergest/Presentation/Components/Kpi/KpiTile.razor.rz.scp.css */
/* Tile KPI: escala de forma fluida (clamp + cqi) respecto al ancho del
   contenedor que define <KpiBoard> (container-type: inline-size). */
.kpi-tile[b-gyg5ythh64] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2px, 0.4cqi, 4px);
    padding: clamp(7px, 1.1cqi, 11px);
    padding-left: clamp(9px, 1.3cqi, 13px);
    border: 1px solid #e3eaf3;
    border-left: 4px solid #cbd5e1;
    border-radius: clamp(8px, 1.1cqi, 12px);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.kpi-tile__label[b-gyg5ythh64] {
    font-size: clamp(9px, 1cqi, 11px);
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-tile__value[b-gyg5ythh64] {
    font-size: clamp(14px, 2cqi, 18px);
    font-weight: 900;
    line-height: 1.1;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Valores de texto (fechas, estados...) algo más pequeños que las cifras. */
    .kpi-tile__value--text[b-gyg5ythh64] {
        font-size: clamp(12px, 1.6cqi, 15px);
    }

.kpi-tile__hint[b-gyg5ythh64] {
    font-size: clamp(9px, 0.9cqi, 11px);
    font-weight: 650;
    color: #8b95a7;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Acentos de color: borde izquierdo + fondo tintado sutil. */
.kpi-tile--blue[b-gyg5ythh64] {
    border-left-color: #2563eb;
    background: #f5f9ff;
}

.kpi-tile--green[b-gyg5ythh64] {
    border-left-color: #16a34a;
    background: #f3fcf6;
}

.kpi-tile--orange[b-gyg5ythh64] {
    border-left-color: #d97706;
    background: #fffaf3;
}

.kpi-tile--purple[b-gyg5ythh64] {
    border-left-color: #7c3aed;
    background: #f9f6ff;
}

.kpi-tile--red[b-gyg5ythh64] {
    border-left-color: #dc2626;
    background: #fef5f5;
}

.kpi-tile--slate[b-gyg5ythh64] {
    border-left-color: #64748b;
    background: #f8fafc;
}

/* Tier compacto: en paneles estrechos densificamos cada tile (menos padding,
   borde de acento y radio más finos) y ocultamos el Hint, que es la info menos
   esencial. Etiqueta y valor siguen siempre visibles. La container query se
   resuelve contra <KpiBoard> (container-type: inline-size). */
@container (max-width: 520px) {
    .kpi-tile[b-gyg5ythh64] {
        gap: 2px;
        padding: 5px;
        padding-left: 8px;
        border-left-width: 3px;
        border-radius: 8px;
    }

    .kpi-tile__label[b-gyg5ythh64] {
        font-size: clamp(8px, 1cqi, 10px);
    }

    .kpi-tile__value[b-gyg5ythh64] {
        font-size: clamp(12px, 2cqi, 15px);
    }

        .kpi-tile__value--text[b-gyg5ythh64] {
            font-size: clamp(11px, 1.6cqi, 13px);
        }

    .kpi-tile__hint[b-gyg5ythh64] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Components/Marketing/ConsultaDatosBusquedaPanel.razor.rz.scp.css */
/*
    Panel «Consulta de datos reales de búsqueda»: el mismo en los pasos del posicionamiento web y en los del panel de Google
    Ads. Hoja propia (el CSS de Blazor tiene ámbito por componente). Los interruptores son casillas dibujadas como interruptor
    (role="switch"): siguen siendo casillas para el teclado (Espacio las cambia).
*/

.cd-panel[b-372xtkgbuq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
    min-width: 0;
}

.cd-aviso[b-372xtkgbuq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    font-weight: 650;
}

    .cd-aviso .material-symbols-rounded[b-372xtkgbuq] {
        font-size: 18px;
        flex: none;
    }

.cd-nota[b-372xtkgbuq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #374151;
}

.cd-sub[b-372xtkgbuq] {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    max-width: 70ch;
}

.cd-tabla-caja[b-372xtkgbuq] {
    overflow-x: auto;
    min-width: 0;
}

.cd-tabla[b-372xtkgbuq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .cd-tabla th[b-372xtkgbuq] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .cd-tabla td[b-372xtkgbuq] {
        padding: 7px 8px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

    .cd-tabla tfoot td[b-372xtkgbuq] {
        border-bottom: none;
        border-top: 1px solid #e5e7eb;
        font-weight: 700;
    }

.cd-num[b-372xtkgbuq] {
    text-align: right;
    white-space: nowrap;
}

.cd-nombre[b-372xtkgbuq] {
    font-weight: 650;
    color: #111827;
}

.cd-apagada .cd-nombre[b-372xtkgbuq] {
    color: #6b7280;
}

.cd-no-cuenta[b-372xtkgbuq] {
    color: #9ca3af;
    text-decoration: line-through;
}

.cd-total-rotulo[b-372xtkgbuq] {
    color: #374151;
}

.cd-total[b-372xtkgbuq] {
    color: #111827;
}

.cd-saldo[b-372xtkgbuq],
.cd-supera[b-372xtkgbuq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

    .cd-saldo .material-symbols-rounded[b-372xtkgbuq],
    .cd-supera .material-symbols-rounded[b-372xtkgbuq] {
        font-size: 18px;
        flex: none;
    }

.cd-saldo[b-372xtkgbuq] {
    color: #374151;
}

.cd-supera[b-372xtkgbuq] {
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

    .cd-supera.grave[b-372xtkgbuq] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #991b1b;
    }

.cd-pie[b-372xtkgbuq] {
    font-size: 11.5px;
    color: #6b7280;
}

/* El interruptor: una casilla con forma de interruptor. Su contenedor lo pinta CampoTeclado (otro componente): ::deep. */
.cd-panel[b-372xtkgbuq]  .cd-interruptor {
    display: inline-flex;
    align-items: center;
}

    .cd-interruptor input[type="checkbox"][role="switch"][b-372xtkgbuq] {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        width: 34px;
        height: 20px;
        margin: 0;
        border-radius: 999px;
        background: #d1d5db;
        cursor: pointer;
        transition: background-color 0.15s ease;
        flex: none;
    }

        .cd-interruptor input[type="checkbox"][role="switch"][b-372xtkgbuq]::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
            transition: transform 0.15s ease;
        }

        .cd-interruptor input[type="checkbox"][role="switch"]:checked[b-372xtkgbuq] {
            background: #4f46e5;
        }

            .cd-interruptor input[type="checkbox"][role="switch"]:checked[b-372xtkgbuq]::after {
                transform: translateX(14px);
            }

        .cd-interruptor input[type="checkbox"][role="switch"]:focus-visible[b-372xtkgbuq] {
            outline: none;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
        }

        .cd-interruptor input[type="checkbox"][role="switch"]:disabled[b-372xtkgbuq] {
            opacity: 0.5;
            cursor: not-allowed;
        }
/* _content/ErpPowergest/Presentation/Components/Marketing/CrucesSeoAnunciosSeccion.razor.rz.scp.css */
/*
    Sección «Cruces SEO / anuncios»: la misma en «Oportunidades» (panel de Google Ads) y en «Palabras clave» (posicionamiento
    web). Hoja propia (el CSS de Blazor tiene ámbito por componente), con las medidas y los colores de las tarjetas del
    posicionamiento web.
*/

.cx-tarjeta[b-owh85ftw79] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.cx-cabecera[b-owh85ftw79] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cx-titulos[b-owh85ftw79] {
    min-width: 0;
    flex: 1 1 320px;
}

.cx-titulo[b-owh85ftw79] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

    .cx-titulo .material-symbols-rounded[b-owh85ftw79] {
        font-size: 18px;
        color: #4f46e5;
    }

.cx-ayuda[b-owh85ftw79],
.cx-pie[b-owh85ftw79] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 110ch;
}

.cx-nota[b-owh85ftw79] {
    font-size: 13px;
    color: #6b7280;
    padding: 6px 0;
}

.cx-resultado[b-owh85ftw79],
.cx-impacto[b-owh85ftw79] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

    .cx-resultado .material-symbols-rounded[b-owh85ftw79],
    .cx-impacto .material-symbols-rounded[b-owh85ftw79] {
        font-size: 18px;
        flex: none;
    }

.cx-resultado[b-owh85ftw79] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
}

.cx-impacto[b-owh85ftw79] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.cx-tabla-caja[b-owh85ftw79] {
    overflow-x: auto;
    min-width: 0;
}

.cx-tabla[b-owh85ftw79] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .cx-tabla th[b-owh85ftw79] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .cx-tabla td[b-owh85ftw79] {
        padding: 8px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

.cx-busqueda[b-owh85ftw79] {
    font-weight: 650;
    color: #111827;
    min-width: 140px;
}

.cx-motivo[b-owh85ftw79] {
    color: #374151;
    min-width: 260px;
    max-width: 60ch;
}

.cx-insignia[b-owh85ftw79] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.cx-acciones[b-owh85ftw79] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 220px;
}

.cx-detalle[b-owh85ftw79] {
    font-size: 11.5px;
    color: #6b7280;
    max-width: 48ch;
}

.cx-boton[b-owh85ftw79] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

    .cx-boton:hover:not(:disabled)[b-owh85ftw79] {
        background: #f9fafb;
    }

    .cx-boton:disabled[b-owh85ftw79] {
        opacity: 0.55;
        cursor: default;
    }

    .cx-boton.primario[b-owh85ftw79] {
        background: #4f46e5;
        border-color: #4f46e5;
        color: #fff;
    }

        .cx-boton.primario:hover:not(:disabled)[b-owh85ftw79] {
            background: #4338ca;
        }

    .cx-boton .material-symbols-rounded[b-owh85ftw79] {
        font-size: 16px;
    }

.cx-descartar[b-owh85ftw79] {
    margin-top: 2px;
    color: #6b7280;
}
/* _content/ErpPowergest/Presentation/Components/ParrillaTallas/ParrillaTallasModal.razor.rz.scp.css */
/* Ventana de parrilla de tallas (Tallas F5) — mismo lenguaje visual que SeleccionVarianteModal. */

.ptm-overlay[b-25b22y9s5j] {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;
    animation: ptm-fade-b-25b22y9s5j .2s ease forwards;
}

.ptm-overlay .material-symbols-outlined[b-25b22y9s5j] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes ptm-fade-b-25b22y9s5j {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ptm-card[b-25b22y9s5j] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 760px;
    max-width: 94vw;
    max-height: 84vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: ptm-scale-b-25b22y9s5j .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ptm-scale-b-25b22y9s5j {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 740px) {
    .ptm-card[b-25b22y9s5j] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.ptm-header[b-25b22y9s5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.25rem .8rem;
}

.ptm-title[b-25b22y9s5j] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 0;
}

.ptm-title span:last-child[b-25b22y9s5j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptm-title-icon[b-25b22y9s5j] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.ptm-close[b-25b22y9s5j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.ptm-close:hover[b-25b22y9s5j] {
    background: #f3f4f6;
    color: #111827;
}

.ptm-toolbar[b-25b22y9s5j] {
    display: flex;
    align-items: center;
    padding: 0 1.25rem .6rem;
}

.ptm-juego[b-25b22y9s5j] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.ptm-juego:hover[b-25b22y9s5j] {
    background: #eef2ff;
    border-color: #2563eb;
}

.ptm-juego-swap[b-25b22y9s5j] {
    color: #2563eb;
}

.ptm-aviso-error[b-25b22y9s5j],
.ptm-aviso[b-25b22y9s5j] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.25rem .5rem;
    padding: .45rem .7rem;
    border-radius: 8px;
    font-size: .88rem;
}

.ptm-aviso-error[b-25b22y9s5j] {
    background: #fef2f2;
    color: #b91c1c;
}

.ptm-aviso[b-25b22y9s5j] {
    background: #fffbeb;
    color: #92400e;
}

.ptm-body[b-25b22y9s5j] {
    flex: 1;
    min-height: 120px;
    overflow: auto;
    padding: 0 1.25rem;
}

.ptm-state[b-25b22y9s5j] {
    padding: 1.5rem 0;
    text-align: center;
    color: #6b7280;
}

.ptm-tabla[b-25b22y9s5j] {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.ptm-tabla th[b-25b22y9s5j] {
    position: sticky;
    top: 0;
    background: #f9fafb;
    text-align: left;
    padding: .45rem .6rem;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.ptm-tabla td[b-25b22y9s5j] {
    padding: .3rem .45rem;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
}

.ptm-tabla tfoot td[b-25b22y9s5j] {
    border-top: 1px solid #e5e7eb;
    border-bottom: none;
    font-weight: 600;
    background: #f9fafb;
}

.ptm-nivel1[b-25b22y9s5j] {
    font-weight: 600;
    white-space: nowrap;
}

.ptm-num[b-25b22y9s5j] {
    text-align: right;
}

/* FUN-500 — la cabecera de cada columna tiene que caer ENCIMA de su casilla. `.ptm-tabla th` fija
   `text-align: left` con más especificidad (clase + elemento) que `.ptm-num` (solo clase), así que en
   las cabeceras ganaba la izquierda mientras las casillas de debajo iban a la derecha: «NE» y «RJ» se
   leían sobre la columna de al lado. Se iguala subiendo la especificidad de la cabecera numérica. */
.ptm-tabla th.ptm-num[b-25b22y9s5j] {
    text-align: right;
}

.ptm-total[b-25b22y9s5j] {
    color: #1f2937;
    font-weight: 600;
}

.ptm-celda[b-25b22y9s5j] {
    width: 72px;
    padding: .32rem .45rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .92rem;
    text-align: right;
    outline: none;
}

.ptm-celda:focus[b-25b22y9s5j] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* TC7: combinación que el artículo aún no tiene; nace al grabar el documento. */
.ptm-celda-nueva[b-25b22y9s5j] {
    border-style: dashed;
    border-color: #93c5fd;
    background: #f8fbff;
}

.ptm-nota[b-25b22y9s5j] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.25rem .5rem;
    padding: .45rem .7rem;
    border-radius: 8px;
    font-size: .85rem;
    background: #eff6ff;
    color: #1e40af;
}

.ptm-hueco[b-25b22y9s5j] {
    display: inline-block;
    width: 72px;
    text-align: center;
    color: #d1d5db;
}

.ptm-actions[b-25b22y9s5j] {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .85rem 1.25rem 1.05rem;
    border-top: 1px solid #f3f4f6;
    margin-top: .5rem;
}

.ptm-btn[b-25b22y9s5j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    border: none;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}

.ptm-btn-ghost[b-25b22y9s5j] {
    background: #f3f4f6;
    color: #374151;
}

.ptm-btn-ghost:hover[b-25b22y9s5j] {
    background: #e5e7eb;
}

.ptm-btn-primary[b-25b22y9s5j] {
    background: #2563eb;
    color: #fff;
}

.ptm-btn-primary:hover[b-25b22y9s5j] {
    background: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Components/RecortadorImagen/RecortadorImagen.razor.rz.scp.css */
/* =============================================================================
   EDITOR DE IMAGEN CON ENCUADRE — <dialog> en la capa superior del navegador.

   Se abre desde pantallas con estilos propios (y a menudo desde otro modal), así que
   no hereda variables de ninguna: colores literales de la paleta de fichas, y cada
   botón declara todas sus propiedades, como en SelectorImagen.
   ============================================================================= */

/* ── Diálogo ──────────────────────────────────────────────────────────────── */

/* El <dialog> trae de serie borde, relleno, color y un ancho propio: se anulan
   todos para que el aspecto sea solo el de esta hoja. */
.recimg-dialogo[b-7sorw1iwba] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    color: #24292f;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    font-family: inherit;
}

    /* Cerrado, el <dialog> no se pinta; el `display: flex` de arriba lo anularía. */
    .recimg-dialogo:not([open])[b-7sorw1iwba] {
        display: none;
    }

    .recimg-dialogo[b-7sorw1iwba]::backdrop {
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(3px);
    }

    .recimg-dialogo[open][b-7sorw1iwba] {
        animation: recimg-entrada-b-7sorw1iwba 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

@keyframes recimg-entrada-b-7sorw1iwba {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}

.recimg-head[b-7sorw1iwba] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
}

.recimg-titulo[b-7sorw1iwba] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Lienzo y marco ───────────────────────────────────────────────────────── */

/* El lienzo recorta y la imagen se coloca dentro SOLO con el `transform` que pone el
   JavaScript (origen arriba a la izquierda). Ninguna regla de posición sobre la
   imagen puede pelearse con él.

   `container-type: size` deja que el marco se mida contra el lienzo (cqmin): el
   JavaScript lee el tamaño real del marco, así que el CSS es la única fuente. */
.recimg-lienzo[b-7sorw1iwba] {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 1 / 1;
    max-height: 60dvh;
    min-height: 220px;
    overflow: hidden;
    container-type: size;
    background:
        repeating-conic-gradient(#1e293b 0% 25%, #172033 0% 50%) 0 0 / 20px 20px;
    cursor: default;
    /* Sin esto, en táctil el arrastre desplaza la página en vez de la imagen. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

    .recimg-lienzo:focus-visible[b-7sorw1iwba] {
        outline: 3px solid rgba(147, 197, 253, 0.8);
        outline-offset: -3px;
    }

    .recimg-lienzo[data-estado="lista"][b-7sorw1iwba] {
        cursor: grab;
    }

        .recimg-lienzo[data-estado="lista"][data-arrastre][b-7sorw1iwba] {
            cursor: grabbing;
        }

    /* Arrastrando un archivo encima: el lienzo entero es la zona donde soltarlo. */
    .recimg-lienzo[data-soltando][b-7sorw1iwba]::after {
        content: "";
        position: absolute;
        inset: 10px;
        border: 2px dashed #93c5fd;
        border-radius: 12px;
        background: rgba(37, 99, 235, 0.18);
        pointer-events: none;
    }

.recimg-img[b-7sorw1iwba] {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    max-height: none;
    transform-origin: 0 0;
    will-change: transform;
    visibility: hidden;
    pointer-events: none;
    -webkit-user-drag: none;
}

.recimg-lienzo[data-estado="lista"] .recimg-img[b-7sorw1iwba] {
    visibility: visible;
}

/* El marco: un hueco centrado y todo lo de alrededor oscurecido con una sombra enorme.
   Un solo elemento, sin máscaras ni SVG. */
.recimg-marco[b-7sorw1iwba] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80cqmin;
    height: 80cqmin;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.62);
    pointer-events: none;
    visibility: hidden;
}

.recimg-lienzo[data-estado="lista"] .recimg-marco[b-7sorw1iwba] {
    visibility: visible;
}

.recimg-circulo .recimg-marco[b-7sorw1iwba] {
    border-radius: 50%;
}

.recimg-cuadrado .recimg-marco[b-7sorw1iwba] {
    border-radius: 6px;
}

/* ── Sin imagen ───────────────────────────────────────────────────────────── */

.recimg-vacio[b-7sorw1iwba] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
    color: #cbd5e1;
}

.recimg-vacio-icono[b-7sorw1iwba] {
    font-size: 56px;
    line-height: 1;
    color: #64748b;
}

.recimg-vacio-ayuda[b-7sorw1iwba] {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Zoom ─────────────────────────────────────────────────────────────────── */

.recimg-zoom[b-7sorw1iwba] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 4px;
}

.recimg-deslizador[b-7sorw1iwba] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

    .recimg-deslizador:disabled[b-7sorw1iwba] {
        cursor: not-allowed;
        opacity: 0.45;
    }

/* ── Error ────────────────────────────────────────────────────────────────── */

.recimg-error[b-7sorw1iwba] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 16px 0;
    padding: 8px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.35;
}

    .recimg-error .material-symbols-outlined[b-7sorw1iwba] {
        font-size: 20px;
    }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.recimg-pie[b-7sorw1iwba] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
}

.recimg-acciones[b-7sorw1iwba] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

/* Discretos: 36 px de alto (24 por encima del mínimo de WCAG 2.5.8), peso normal, borde
   suave e iconos de trazo fino. Lo que se ha venido a mirar es la imagen, no los botones. */
.recimg-btn[b-7sorw1iwba] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

    .recimg-btn .material-symbols-outlined[b-7sorw1iwba] {
        font-size: 18px;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
        /* El icono es una ligadura, o sea texto: sin esto se selecciona al arrastrar. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    .recimg-btn:hover:not(:disabled)[b-7sorw1iwba] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #1f2937;
    }

    .recimg-btn:focus-visible[b-7sorw1iwba] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }

    .recimg-btn:disabled[b-7sorw1iwba] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Solo icono: cuadrado y sin marco en reposo. */
.recimg-btn-icono[b-7sorw1iwba] {
    width: 36px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: #9ca3af;
}

    .recimg-btn-icono .material-symbols-outlined[b-7sorw1iwba] {
        font-size: 20px;
    }

    .recimg-btn-icono:hover:not(:disabled)[b-7sorw1iwba] {
        border-color: transparent;
        background: #f3f4f6;
        color: #374151;
    }

/* La acción principal se distingue por el color, no por el peso: azul suave, no relleno. */
.recimg-btn-principal[b-7sorw1iwba] {
    min-width: 96px;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

    .recimg-btn-principal:hover:not(:disabled)[b-7sorw1iwba] {
        border-color: #93c5fd;
        background: #dbeafe;
        color: #1e40af;
    }

/* «Quitar» es discreta en reposo y se pone roja al apuntarla, que es cuando avisar sirve. */
.recimg-btn-quitar[b-7sorw1iwba] {
    border-color: transparent;
    background: transparent;
    color: #6b7280;
}

    .recimg-btn-quitar:hover:not(:disabled)[b-7sorw1iwba] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

.recimg-girando[b-7sorw1iwba] {
    animation: recimg-giro-b-7sorw1iwba 1s linear infinite;
}

@keyframes recimg-giro-b-7sorw1iwba {
    to {
        transform: rotate(360deg);
    }
}

/* Estrecho: los rótulos secundarios ceden, sus iconos se quedan. Aplicar conserva el texto. */
@media (max-width: 460px) {
    .recimg-pie .recimg-btn:not(.recimg-btn-principal) .recimg-btn-texto[b-7sorw1iwba] {
        display: none;
    }

    .recimg-pie .recimg-btn:not(.recimg-btn-principal)[b-7sorw1iwba] {
        width: 36px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recimg-dialogo[open][b-7sorw1iwba] {
        animation: none;
    }

    .recimg-btn[b-7sorw1iwba] {
        transition: none;
    }

    .recimg-girando[b-7sorw1iwba] {
        animation: none;
    }
}
/* _content/ErpPowergest/Presentation/Components/ScrollableTabs/ScrollableTabs.razor.rz.scp.css */
/* Contenedor: flechas a los lados + pista desplazable en el centro */
.tabbar[b-8tkyktcn62] {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

/* Pista: una sola fila con scroll horizontal y la scrollbar oculta, sobre un rail inferior continuo.
   Los botones de pestaña (ChildContent) son sus hijos flex directos: no encogen, para que el
   contenido desborde y se pueda desplazar. */
.tabbar-track[b-8tkyktcn62] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;   /* el "rail" continuo bajo las pestañas */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;              /* Firefox: oculta scrollbar */
    -ms-overflow-style: none;          /* Edge antiguo */
}

    .tabbar-track[b-8tkyktcn62]::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari: oculta scrollbar */
    }

/* Variante sin rail inferior: se activa pasando CssClass="tabbar--flush" a <ScrollableTabs>.
   Solo afecta a las instancias que la piden; el resto conserva el rail. */
.tabbar--flush .tabbar-track[b-8tkyktcn62],
.tabbar--flush .tabbar-arrow[b-8tkyktcn62] {
    border-bottom: 0;
}

/* Flechas de desplazamiento: ocultas salvo que haya desbordamiento (la clase la pone el script).
   Su borde inferior prolonga el rail bajo la flecha para que la línea base sea continua. */
.tabbar-arrow[b-8tkyktcn62] {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.16s ease;
}

.tabbar--scrollable .tabbar-arrow[b-8tkyktcn62] {
    display: inline-flex;
}

.tabbar-arrow:hover[b-8tkyktcn62] {
    color: #1d4ed8;
}

.tabbar-arrow--disabled[b-8tkyktcn62] {
    color: #cbd5e1;
    pointer-events: none;
}

/* Chevron dibujado en CSS (sin dependencia de iconos) */
.tabbar-chevron[b-8tkyktcn62] {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.tabbar-chevron--left[b-8tkyktcn62] {
    transform: rotate(135deg);
    margin-left: 3px;       /* centra ópticamente el chevron que apunta a la izquierda */
}

.tabbar-chevron--right[b-8tkyktcn62] {
    transform: rotate(-45deg);
    margin-right: 3px;      /* centra ópticamente el chevron que apunta a la derecha */
}
/* _content/ErpPowergest/Presentation/Components/SeleccionVariante/SeleccionVarianteModal.razor.rz.scp.css */
/* Ventana de selección de variante (Tallas F4) — mismo lenguaje visual que DesgloseLotesSeriesModal. */

.svm-overlay[b-hba4gc5j07] {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;
    animation: svm-fade-b-hba4gc5j07 .2s ease forwards;
}

.svm-overlay .material-symbols-outlined[b-hba4gc5j07] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes svm-fade-b-hba4gc5j07 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.svm-card[b-hba4gc5j07] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 720px;
    max-width: 94vw;
    max-height: 84vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: svm-scale-b-hba4gc5j07 .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes svm-scale-b-hba4gc5j07 {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .svm-card[b-hba4gc5j07] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.svm-header[b-hba4gc5j07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.25rem .8rem;
}

.svm-title[b-hba4gc5j07] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 0;
}

.svm-title span:last-child[b-hba4gc5j07] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.svm-title-icon[b-hba4gc5j07] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.svm-close[b-hba4gc5j07] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.svm-close:hover[b-hba4gc5j07] {
    background: #f3f4f6;
    color: #111827;
}

.svm-filtro[b-hba4gc5j07] {
    padding: 0 1.25rem .6rem;
}

.svm-input[b-hba4gc5j07] {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .95rem;
    outline: none;
}

.svm-input:focus[b-hba4gc5j07] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.svm-aviso-error[b-hba4gc5j07] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.25rem .5rem;
    padding: .45rem .7rem;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .88rem;
}

.svm-body[b-hba4gc5j07] {
    flex: 1;
    min-height: 120px;
    overflow: auto;
    padding: 0 1.25rem;
}

.svm-state[b-hba4gc5j07] {
    padding: 1.5rem 0;
    text-align: center;
    color: #6b7280;
}

.svm-tabla[b-hba4gc5j07] {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.svm-tabla th[b-hba4gc5j07] {
    position: sticky;
    top: 0;
    background: #f9fafb;
    text-align: left;
    padding: .45rem .6rem;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.svm-tabla td[b-hba4gc5j07] {
    padding: .42rem .6rem;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
}

.svm-num[b-hba4gc5j07] {
    text-align: right;
}

.svm-fila[b-hba4gc5j07] {
    cursor: pointer;
}

.svm-fila:hover[b-hba4gc5j07] {
    background: #f3f4f6;
}

.svm-fila-activa[b-hba4gc5j07],
.svm-fila-activa:hover[b-hba4gc5j07] {
    background: #dbeafe;
}

.svm-fila-vigente[b-hba4gc5j07] {
    background: #f0fdf4;
}

.svm-actions[b-hba4gc5j07] {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .85rem 1.25rem 1.05rem;
    border-top: 1px solid #f3f4f6;
    margin-top: .5rem;
}

.svm-btn[b-hba4gc5j07] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    border: none;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}

.svm-btn-ghost[b-hba4gc5j07] {
    background: #f3f4f6;
    color: #374151;
}

.svm-btn-ghost:hover[b-hba4gc5j07] {
    background: #e5e7eb;
}

.svm-btn-primary[b-hba4gc5j07] {
    background: #2563eb;
    color: #fff;
}

.svm-btn-primary:hover[b-hba4gc5j07] {
    background: #1d4ed8;
}

.svm-btn-primary:disabled[b-hba4gc5j07] {
    background: #93c5fd;
    cursor: default;
}
/* _content/ErpPowergest/Presentation/Components/SelectorDivisa.razor.rz.scp.css */
/* Selector de divisa con bandera. El CSS vive AQUÍ (aislamiento de componente) y no en app.css: es el
   motivo de no usar un template de Syncfusion, cuyo nodo se monta fuera del árbol del componente y deja
   el ::deep sin casar. */

.sdv-root[b-vpa5kborsi] {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* El botón imita a un <select>: el host le pasa su clase (p. ej. "cform-select") y aquí solo se añade
   el layout de las tres piezas (bandera, código, nombre) y la flecha. */
.sdv-boton[b-vpa5kborsi] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.sdv-deshabilitado .sdv-boton[b-vpa5kborsi],
.sdv-boton:disabled[b-vpa5kborsi] {
    cursor: not-allowed;
    opacity: 0.6;
}

.sdv-chevron[b-vpa5kborsi] {
    margin-left: auto;
    font-size: 18px;
    line-height: 1;
    color: #64748b;
    pointer-events: none;
    flex-shrink: 0;
}

/* ── Modo COMPACTO (barras de acciones) ─────────────────────────────────────────────────────────
   El selector deja de ocupar el ancho del contenedor y se ajusta a su contenido (bandera + código),
   con el alto y el radio de los demás controles de la barra. Sin esto el `width: 100%` del modo
   normal empuja al resto de botones a una segunda línea, que es justo lo que no cabe: el alto
   vertical de la pantalla de documento es el recurso escaso. La LISTA no se toca — se despliega con
   su ancho propio para que el nombre de la moneda siga siendo legible al elegir. */
.sdv-compacto[b-vpa5kborsi] {
    width: auto;
    flex: 0 0 auto;
}

    .sdv-compacto .sdv-boton[b-vpa5kborsi] {
        width: auto;
        gap: 6px;
        block-size: 32px;
        padding-inline: 8px;
    }

    .sdv-compacto .sdv-chevron[b-vpa5kborsi] {
        margin-left: 2px;
        font-size: 16px;
    }

    /* La lista sí necesita ancho propio: el botón compacto es más estrecho que «USD Dólar
       estadounidense», y heredar su ancho recortaría los nombres. */
    .sdv-compacto .sdv-lista[b-vpa5kborsi] {
        right: auto;
        min-width: 240px;
    }

/* Proporción 4:3 con borde tenue: sin el borde, las banderas claras (la de EE. UU.) se funden con el
   fondo blanco del campo. */
.sdv-bandera[b-vpa5kborsi] {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    object-fit: cover;
    background: #ffffff;
}

/* Fallbacks: la moneda sin SVG y la opción «sin divisa» ocupan EL MISMO hueco que una bandera, para que
   las filas del desplegable no bailen. */
.sdv-bandera-generica[b-vpa5kborsi],
.sdv-bandera-vacia[b-vpa5kborsi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #94a3b8;
    border-color: transparent;
    background: transparent;
}

.sdv-codigo[b-vpa5kborsi] {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* El nombre cede primero: en un campo estrecho se recorta el nombre, nunca el código. */
.sdv-nombre[b-vpa5kborsi] {
    font-size: 13px;
    color: #64748b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdv-placeholder[b-vpa5kborsi],
.sdv-texto-vacio[b-vpa5kborsi] {
    font-size: 13px;
    color: #94a3b8;
}

.sdv-lista[b-vpa5kborsi] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.sdv-opcion[b-vpa5kborsi] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.14s ease;
}

    .sdv-opcion:hover[b-vpa5kborsi] {
        background: #f1f5f9;
    }

.sdv-opcion-activa[b-vpa5kborsi] {
    background: rgba(0, 40, 142, 0.08);
}

    .sdv-opcion-activa:hover[b-vpa5kborsi] {
        background: rgba(0, 40, 142, 0.12);
    }

.sdv-vacia[b-vpa5kborsi] {
    padding: 12px 10px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}
/* _content/ErpPowergest/Presentation/Components/SelectorEntidad/CampoConBuscador.razor.rz.scp.css */
/*
    Estilo AUTÓNOMO del campo con buscador: solo el layout de la lupa embebida a la derecha del input.
    A propósito NO define colores de tema ni el aspecto del input (borde, alto, fondo): eso lo aporta el
    host vía ClaseInput (cform-input / art-modal-input / fdp-input…), para que el campo se funda con cada
    pantalla. Así el componente no depende de variables --fdp-* (que solo existen en facturación).
*/

.ccb-selector[b-q2l3nux78b] {
    position: relative;
    display: block;

    /* El ancho de la lupa, en un sitio y no en tres. El hueco del input SE DERIVA de aquí, así que
       tocar el tamaño del icono o su padding no puede volver a descuadrar el hueco (FUN-424): antes
       eran tres números sueltos (1,25rem de icono + 2×0,4rem de padding = 2,05rem de botón) contra un
       hueco de 1,9rem escrito a mano, y el texto pasaba por debajo del icono. */
    --ccb-icono: 1.25rem;
    --ccb-icono-padding: .4rem;
    --ccb-boton-ancho: calc(var(--ccb-icono) + var(--ccb-icono-padding) * 2);
}

/* Deja hueco a la derecha para que el texto no pase por debajo de la lupa. El hueco es del componente,
   no del host: se le da más especificidad (0,2,1) que a la clase que trae ClaseInput, porque el host
   suele estilar el input con un `padding` shorthand y un selector de dos clases —p. ej.
   `.cform-field ::deep .cform-input` o `.fdp-field ::deep .fdp-input`— que si no le ganaría al hueco.

   El .25rem extra es aire entre el último carácter y el icono: pegados se leen como si el texto
   estuviera cortado, que es justo lo que se reportó. */
.ccb-selector > input.ccb-input-con-boton[b-q2l3nux78b] {
    padding-inline-end: calc(var(--ccb-boton-ancho) + .25rem);
}

.ccb-icon-btn[b-q2l3nux78b] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ccb-boton-ancho);
    padding: 0;
    border: none;
    background: transparent;
    color: currentColor;
    opacity: .55;
    cursor: pointer;
}

    .ccb-icon-btn:hover[b-q2l3nux78b] {
        opacity: 1;
    }

.ccb-icon[b-q2l3nux78b] {
    font-size: var(--ccb-icono);

    /* La ligadura de Material Symbols se pinta como la palabra literal («search», mucho más ancha que
       el glifo) hasta que carga la fuente. Sin este recorte, ese instante empuja el icono fuera del
       botón y tapa el texto — el mismo síntoma que se reportó, pero intermitente y por eso difícil de
       reproducir a mano. */
    width: var(--ccb-icono);
    overflow: hidden;
}
/* _content/ErpPowergest/Presentation/Components/SelectorEntidad/SelectorEntidad.razor.rz.scp.css */
/* Fondo oscuro con blur (mismo estilo que Modal.razor.css). Sin padding: el contenedor exterior
   no añade margen claro alrededor de la tarjeta. z-index máximo para quedar por encima de todo. */
.sel-overlay[b-o1basfbnue] {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;
    animation: sel-fade-b-o1basfbnue .2s ease forwards;
}

/* Los iconos (ligaduras de Material Symbols) no deben poder seleccionarse al arrastrar el ratón. */
.sel-overlay .material-symbols-rounded[b-o1basfbnue],
.sel-overlay .material-symbols-outlined[b-o1basfbnue] {
    user-select: none;
}

@keyframes sel-fade-b-o1basfbnue {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Contenedor */
.sel-card[b-o1basfbnue] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 760px;
    max-width: 92vw;
    max-height: 88vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: sel-scale-b-o1basfbnue .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sel-scale-b-o1basfbnue {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* En pantallas estrechas el modal ocupa toda la pantalla (sin bordes redondeados ni márgenes). */
@media (max-width: 640px) {
    .sel-card[b-o1basfbnue] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Header */
.sel-header[b-o1basfbnue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .9rem;
}

.sel-title[b-o1basfbnue] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
}

.sel-title-icon[b-o1basfbnue] {
    color: #2563eb;
    font-size: 1.5rem;
}

.sel-close[b-o1basfbnue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sel-close:hover[b-o1basfbnue] {
    background: #f3f4f6;
    color: #111827;
}

/* Toolbar: buscador + orden */
.sel-toolbar[b-o1basfbnue] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem 1rem;
}

.sel-search[b-o1basfbnue] {
    position: relative;
    flex: 1;
}

.sel-search-icon[b-o1basfbnue] {
    position: absolute;
    top: 50%;
    left: .7rem;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.2rem;
    pointer-events: none;
}

.sel-search-input[b-o1basfbnue] {
    width: 100%;
    height: 40px;
    padding: 0 .9rem 0 2.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sel-search-input:focus[b-o1basfbnue] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.sel-sort[b-o1basfbnue] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.sel-sort-label[b-o1basfbnue] {
    font-size: .85rem;
    color: #6b7280;
}

.sel-sort-select[b-o1basfbnue] {
    height: 40px;
    padding: 0 .7rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .88rem;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
}

.sel-sort-select:focus[b-o1basfbnue] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Tabla */
.sel-table-wrap[b-o1basfbnue] {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid #eef0f3;
}

.sel-table[b-o1basfbnue] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.sel-table thead th[b-o1basfbnue] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: .7rem 1.25rem;
    background: #f8fafc;
    color: #6b7280;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #eef0f3;
    white-space: nowrap;
}

.sel-row td[b-o1basfbnue] {
    padding: .8rem 1.25rem;
    color: #374151;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.sel-row[b-o1basfbnue] {
    cursor: pointer;
    transition: background .12s ease;
}

.sel-row:hover[b-o1basfbnue] {
    background: #f8fafc;
}

.sel-row.active[b-o1basfbnue] {
    background: #eff5ff;
}

.sel-row.active td[b-o1basfbnue] {
    border-bottom-color: #dbe7fb;
}

/* Enlace de celda (p. ej. la columna de código del mockup) */
.sel-link[b-o1basfbnue] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sel-link:hover[b-o1basfbnue] {
    text-decoration: underline;
}

/* Estado de carga / vacío */
.sel-state[b-o1basfbnue] {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: #9ca3af;
}

/* Footer: dos filas — paginador arriba, acciones debajo (como la pantalla de referencia). */
.sel-footer[b-o1basfbnue] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: .9rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
}

/* Fila 1: info de página a la izquierda, paginador a la derecha. */
.sel-footer-pager[b-o1basfbnue] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sel-pageinfo[b-o1basfbnue] {
    font-size: .82rem;
    color: #6b7280;
    flex-shrink: 0;
}

.sel-pager[b-o1basfbnue] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.sel-pager-btn[b-o1basfbnue],
.sel-pager-num[b-o1basfbnue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-width: 34px;
    height: 34px;
    padding: 0 .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.sel-pager-btn .material-symbols-rounded[b-o1basfbnue],
.sel-pager-num .material-symbols-rounded[b-o1basfbnue] {
    font-size: 1.1rem;
    line-height: 1;
}

.sel-pager-btn:hover:not(:disabled)[b-o1basfbnue],
.sel-pager-num:hover[b-o1basfbnue] {
    background: #f3f4f6;
}

.sel-pager-btn:disabled[b-o1basfbnue] {
    opacity: .5;
    cursor: not-allowed;
}

.sel-pager-num.active[b-o1basfbnue] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 600;
}

.sel-pager-ellipsis[b-o1basfbnue] {
    padding: 0 .3rem;
    color: #9ca3af;
}

/* Acciones: fila propia, alineadas a la derecha. */
.sel-actions[b-o1basfbnue] {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

.sel-btn[b-o1basfbnue] {
    height: 38px;
    padding: 0 1.1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.sel-btn-ghost[b-o1basfbnue] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.sel-btn-ghost:hover[b-o1basfbnue] {
    background: #f3f4f6;
}

.sel-btn-primary[b-o1basfbnue] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.sel-btn-primary:hover:not(:disabled)[b-o1basfbnue] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.sel-btn-primary:disabled[b-o1basfbnue] {
    opacity: .5;
    cursor: not-allowed;
}
/* _content/ErpPowergest/Presentation/Components/SelectorImagen/SelectorImagen.razor.rz.scp.css */
/* =============================================================================
   IMAGEN DE UNA FICHA — miniatura de cabecera + visor a tamaño completo.

   Se pinta dentro de cabeceras de fichas distintas, así que NO hereda variables de
   ninguna pantalla: los colores son literales de la paleta de fichas. Y todas las
   propiedades del botón se declaran (fondo, borde, relleno, tipo de letra): un
   <button> hereda del sitio donde caiga, y aquí cae en pantallas con estilos propios.
   ============================================================================= */

/* ── Miniatura de la cabecera ─────────────────────────────────────────────── */

.selimg-mini[b-ugqnypimvi] {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 15px;
    /* Sin imagen es el hueco del icono de la ficha: mismo azul suave que tenía. */
    background: #eff6ff;
    color: #2563eb;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    /* Con imagen, lienzo blanco con borde: la foto se lee sobre un fondo neutro. */
    .selimg-mini.tiene[b-ugqnypimvi] {
        background: #ffffff;
        border-color: #e5e7eb;
    }

    .selimg-mini img[b-ugqnypimvi] {
        display: block;
        width: 100%;
        height: 100%;
        /* Recorte centrado: llena el cuadrado sin deformar. El detalle completo está a un clic. */
        object-fit: cover;
    }

.selimg-mini-icono[b-ugqnypimvi] {
    font-size: 26px;
    line-height: 1;
}

/* Velo de edición: aparece al apuntar y al enfocar con el teclado; nunca se come el
   clic (el botón entero es la zona pulsable). */
.selimg-mini-velo[b-ugqnypimvi] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

    .selimg-mini-velo .material-symbols-outlined[b-ugqnypimvi] {
        font-size: 22px;
        line-height: 1;
    }

.selimg-mini:hover .selimg-mini-velo[b-ugqnypimvi],
.selimg-mini:focus-visible .selimg-mini-velo[b-ugqnypimvi] {
    opacity: 1;
}

.selimg-mini:focus-visible[b-ugqnypimvi] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.selimg-mini:disabled[b-ugqnypimvi] {
    cursor: default;
}

    .selimg-mini:disabled .selimg-mini-velo[b-ugqnypimvi] {
        display: none;
    }

/* ── Visor a tamaño completo ──────────────────────────────────────────────── */

/* El lienzo recorta (overflow:hidden) y la imagen se mueve dentro con el `transform`
   que gobierna el JavaScript: por eso no hay ninguna regla de posición sobre
   .selimg-img que pudiera pelearse con él. */

.selimg-fondo[b-ugqnypimvi] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.72);
}

.selimg-card[b-ugqnypimvi] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(900px, 92vw);
    height: min(700px, 88vh);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

    .selimg-card:focus[b-ugqnypimvi] {
        outline: none;
    }

.selimg-head[b-ugqnypimvi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.selimg-titulo[b-ugqnypimvi] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selimg-lienzo[b-ugqnypimvi] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0f172a;
}

.selimg-img[b-ugqnypimvi] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/* Mando de zoom flotante sobre la imagen, centrado abajo: se usa mirando el lienzo, y a la vez
   deja el pie limpio para las acciones de la ficha, que son otra cosa. Oscuro translúcido porque
   flota sobre una imagen cualquiera y tiene que leerse igual sobre claro y sobre oscuro. */
.selimg-zoom[b-ugqnypimvi] {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
    /* Sin esto el mando se difumina sobre una foto con detalle justo detrás. */
    backdrop-filter: blur(3px);
}

.selimg-zoom-btn[b-ugqnypimvi] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

    .selimg-zoom-btn .material-symbols-outlined[b-ugqnypimvi] {
        font-size: 22px;
        color: inherit;
        /* El icono es la ligadura de un tipo de letra, o sea texto: sin esto se selecciona al
           arrastrar —y aquí arrastrar es el gesto para mover la imagen— y se traga el clic. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    .selimg-zoom-btn:hover[b-ugqnypimvi] {
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }

    .selimg-zoom-btn:focus-visible[b-ugqnypimvi] {
        outline: none;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.55);
    }

/* Pie: una sola fila. La ayuda a la izquierda (texto de apoyo, no compite) y las acciones a la
   derecha, que es donde se buscan y donde no estorban al leer. */
.selimg-pie[b-ugqnypimvi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.selimg-acciones[b-ugqnypimvi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.selimg-ayuda[b-ugqnypimvi] {
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 44 px de alto: el mínimo recomendado para un objetivo que se pulsa (WCAG 2.5.5). Los botones
   con rótulo crecen a lo ancho; los de solo icono (cerrar) son cuadrados con .selimg-btn-icono. */
.selimg-btn[b-ugqnypimvi] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    background: #ffffff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

/* Cerrar: cuadrado y sin marco en reposo. Un botón enmarcado arriba a la derecha se lee como un
   control más de la ventana, y aquí lo único que importa de la cabecera es el título. El fondo y
   el borde grises los pone el hover de .selimg-btn, que gana por especificidad. */
.selimg-btn-icono[b-ugqnypimvi] {
    width: 44px;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

    .selimg-btn-icono .material-symbols-outlined[b-ugqnypimvi] {
        font-size: 24px;
    }

    /* Junto a un rótulo de 13px, el icono acompaña (20px); solo, es el objetivo y crece (24px). */
    .selimg-btn .material-symbols-outlined[b-ugqnypimvi] {
        font-size: 20px;
        color: inherit;
        /* El icono es la ligadura de un tipo de letra, o sea texto: sin esto se selecciona al
           arrastrar —y aquí arrastrar es el gesto para mover la imagen— y se traga el clic. */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    .selimg-btn:hover:not(:disabled)[b-ugqnypimvi] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #1f2937;
    }

    /* El foco de teclado SÍ lleva color: es la única señal de dónde está el cursor sin
       ratón, y un anillo gris sobre un borde gris no se vería. */
    .selimg-btn:focus-visible[b-ugqnypimvi] {
        outline: none;
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }

    .selimg-btn:disabled[b-ugqnypimvi] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* LAS DOS ACCIONES DEL PIE comparten forma: en reposo son texto con icono, sin fondo ni borde,
   para no competir con la imagen —que es lo que se ha venido a ver—. El fondo y el borde salen
   al apuntarlas, que es cuando hacen falta para saber qué se va a pulsar. */
.selimg-btn-cambiar[b-ugqnypimvi],
.selimg-btn-quitar[b-ugqnypimvi] {
    border-color: transparent;
    background: transparent;
    color: #6b7280;
}

    /* «Cambiar» se realza en gris: es la acción corriente y no tiene nada que advertir. */
    .selimg-btn-cambiar:hover:not(:disabled)[b-ugqnypimvi] {
        background: #f3f4f6;
        border-color: #d0d7de;
        color: #374151;
    }

    /* «Quitar» borra la imagen de la ficha: se pone roja al apuntarla, que es cuando avisar sirve
       de algo. Es lo único que la distingue de la otra, y basta. */
    .selimg-btn-quitar:hover:not(:disabled)[b-ugqnypimvi] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

/* El icono de «subiendo» gira; el resto de la ventana se queda quieta. */
.selimg-girando[b-ugqnypimvi] {
    animation: selimg-giro-b-ugqnypimvi 1s linear infinite;
}

@keyframes selimg-giro-b-ugqnypimvi {
    to {
        transform: rotate(360deg);
    }
}

/* Estrecho: primero se va la ayuda (es apoyo, no acción) y después el rótulo de «Quitar»,
   que ya tiene su icono. «Cambiar imagen» conserva el texto hasta el final: es la acción. */
@media (max-width: 700px) {
    .selimg-ayuda[b-ugqnypimvi] {
        display: none;
    }
}

@media (max-width: 460px) {
    .selimg-btn-quitar .selimg-btn-texto[b-ugqnypimvi] {
        display: none;
    }

    .selimg-btn-quitar[b-ugqnypimvi] {
        width: 44px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .selimg-mini[b-ugqnypimvi],
    .selimg-mini-velo[b-ugqnypimvi],
    .selimg-btn[b-ugqnypimvi],
    .selimg-zoom-btn[b-ugqnypimvi] {
        transition: none;
    }

    .selimg-girando[b-ugqnypimvi] {
        animation: none;
    }
}
/* _content/ErpPowergest/Presentation/Components/Tablas/TablaPaginada.razor.rz.scp.css */
/* ============================================================================
   TABLA PAGINADA — estilo de listado de la ficha (scoped)
   ----------------------------------------------------------------------------
   Réplica del estilo de la tabla de «Tarifas» (marco redondeado, cabecera con
   orden, filas con hover, estado vacío y paginador anclado abajo), generalizada
   para reutilizarse en Documentos, Cobros y Extracto. La alineación por columna
   y el ancho los aporta el descriptor (clases tp-right/tp-center + width inline).
   ============================================================================ */

.tp-panel[b-yr6zr4bm9p] {
    /* Como hijo flex del contenedor del tab, ocupa TODO el alto disponible como mínimo (flex-grow) y
       puede crecer por encima si su contenido no cabe (flex-basis:auto + min-height:0). Se usa flex-column
       (no grid de filas fijas) para que la tabla rellene el alto con o SIN cabecera informativa: si no hay
       cabecera, no queda una fila vacía ni un hueco superior. El marco (.tp-shell) toma el alto sobrante. */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: tpPanelIn-b-yr6zr4bm9p 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ===== CABECERA INFORMATIVA (opcional) ===== */

.tp-header[b-yr6zr4bm9p] {
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

/* ===== MARCO DE LA TABLA ===== */

.tp-shell[b-yr6zr4bm9p] {
    /* Toma el alto sobrante del panel (flex-grow) manteniendo un suelo cómodo; dentro, la zona de la
       tabla ocupa 1fr y el paginador queda anclado abajo. */
    position: relative;
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

/* Única zona que se desplaza cuando la tabla no cabe: las FILAS. La cabecera de columnas se queda
   pegada arriba (thead sticky) y el paginador vive fuera de aquí, en la otra fila del .tp-shell, así
   que ninguno de los dos se mueve. Si el marco no está acotado en alto, esto no se nota: no hay nada
   que desplazar. */
.tp-scroll[b-yr6zr4bm9p] {
    min-height: 0;
    overflow: auto;
}

/* Scroll infinito: la caja TIENE que estar acotada en alto. Si creciera con su contenido, el centinela
   del final estaría siempre «a la vista» y se pedirían trozos hasta traer la lista entera, que es justo
   lo que este modo evita. Si la página ya la acota más, manda la página. */
.tp-scroll-infinito[b-yr6zr4bm9p] {
    max-height: 70vh;
}

.tp-centinela[b-yr6zr4bm9p] {
    height: 1px;
}

.tp-cargando-mas[b-yr6zr4bm9p] {
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
}

.tp-table[b-yr6zr4bm9p] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

.tp-table thead th[b-yr6zr4bm9p] {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    /* Se queda arriba mientras las filas se desplazan por debajo. Va en cada `th` y no en el `thead`
       porque con `border-collapse: separate` el sticky solo lo respetan las celdas. El fondo es opaco
       (arriba) para que las filas no se transparenten al pasar. */
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Cabecera sin orden: mismo alto y ritmo tipográfico que las ordenables. */
.tp-table thead th.tp-th-plain[b-yr6zr4bm9p] {
    padding: 0 14px;
    height: 42px;
}

/* Alineación (cabecera y celdas). */
.tp-table .tp-right[b-yr6zr4bm9p] {
    text-align: right;
}

.tp-table .tp-center[b-yr6zr4bm9p] {
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.tp-sort[b-yr6zr4bm9p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .tp-sort.tp-right[b-yr6zr4bm9p] {
        justify-content: flex-end;
    }

    .tp-sort.tp-center[b-yr6zr4bm9p] {
        justify-content: center;
    }

    .tp-sort:hover[b-yr6zr4bm9p] {
        background: #f1f5f9;
        color: #334155;
    }

    .tp-sort:focus-visible[b-yr6zr4bm9p] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.tp-sort-icon[b-yr6zr4bm9p] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display) y solo aparece al hover/focus. */
.tp-sort-icon-inactivo[b-yr6zr4bm9p] {
    opacity: 0;
}

.tp-sort:hover .tp-sort-icon-inactivo[b-yr6zr4bm9p],
.tp-sort:focus-visible .tp-sort-icon-inactivo[b-yr6zr4bm9p] {
    opacity: 1;
}

.tp-table tbody td[b-yr6zr4bm9p] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tp-table tbody tr[b-yr6zr4bm9p] {
    transition: background 0.14s ease;
}

/* Fila accionable (hay OnFilaClick): se anuncia como pulsable. El hover lo tienen todas las filas. */
.tp-table tbody tr.tp-row-click[b-yr6zr4bm9p] {
    cursor: pointer;
}

    .tp-table tbody tr:hover td[b-yr6zr4bm9p] {
        background: #f8fbff;
    }

    /* La última fila no dibuja separador: el borde inferior lo pone el paginador. */
    .tp-table tbody tr:last-child td[b-yr6zr4bm9p] {
        border-bottom: none;
    }

/* ===== PAGINADOR ===== */

.tp-pager[b-yr6zr4bm9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.tp-pager-info[b-yr6zr4bm9p] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.tp-pager-seleccion[b-yr6zr4bm9p] {
    margin-left: 4px;
    color: #2563eb;
}

/* CASILLAS
   Todas las casillas que caen dentro de la tabla —la de marcar cada fila, la de «marcar todos» de la cabecera
   (CasillaTriestado) o una de «Activa» en una celda— se ven igual en todas las pantallas. Las pone la página en
   plantillas de columna, de ahí el ::deep. Dibujadas a mano y no con accent-color: la nativa es cuadrada y pesada al
   lado del resto de la tabla. Borde fino y redondeado en gris; marcada, relleno azul con el visto en blanco; a medias,
   una raya. Un interruptor (role="switch") lleva su propio dibujo y se queda fuera. */
.tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff center / 100% 100% no-repeat;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):hover:not(:disabled) {
        border-color: #93c5fd;
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):checked,
    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):indeterminate {
        border-color: #2563eb;
        background-color: #2563eb;
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):indeterminate {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):checked:hover:not(:disabled),
    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):indeterminate:hover:not(:disabled) {
        border-color: #1d4ed8;
        background-color: #1d4ed8;
    }

    .tp-table[b-yr6zr4bm9p]  input[type="checkbox"]:not([role="switch"]):disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.tp-pager-nav[b-yr6zr4bm9p] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tp-pager-btn[b-yr6zr4bm9p],
.tp-pager-page[b-yr6zr4bm9p] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .tp-pager-btn:hover:not(:disabled)[b-yr6zr4bm9p],
    .tp-pager-page:hover[b-yr6zr4bm9p] {
        background: #eef2f7;
        color: #1f2937;
    }

    .tp-pager-btn:disabled[b-yr6zr4bm9p] {
        opacity: 0.4;
        cursor: default;
    }

    .tp-pager-btn .material-symbols-outlined[b-yr6zr4bm9p] {
        font-size: 18px;
        pointer-events: none;
    }

/* Página activa: relleno primary sólido, como el botón principal de la cabecera. */
.tp-pager-page-active[b-yr6zr4bm9p],
.tp-pager-page-active:hover[b-yr6zr4bm9p] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* ===== RECARGA (otra página en camino, filas anteriores aún visibles) ===== */

/* Las filas que se ven ya no son las de la página pedida: se atenúan para que no se lean como tales. */
.tp-recargando .tp-table tbody[b-yr6zr4bm9p] {
    opacity: 0.45;
    transition: opacity 0.12s ease;
}

/* Barra fina arriba del marco: dice que la petición está en marcha sin tapar nada. */
.tp-progreso[b-yr6zr4bm9p] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    overflow: hidden;
    background: #e0e7ff;
}

    .tp-progreso[b-yr6zr4bm9p]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 35%;
        background: #00288e;
        animation: tpProgreso-b-yr6zr4bm9p 0.9s ease-in-out infinite;
    }

@keyframes tpProgreso-b-yr6zr4bm9p {
    from {
        left: -35%;
    }

    to {
        left: 100%;
    }
}

/* ===== ESTADO VACIO ===== */

.tp-empty[b-yr6zr4bm9p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 48px 20px;
}

.tp-empty-icon[b-yr6zr4bm9p] {
    font-size: 40px;
    color: #cbd5e1;
    line-height: 1;
    margin-bottom: 4px;
}

.tp-empty-title[b-yr6zr4bm9p] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.tp-empty-text[b-yr6zr4bm9p] {
    max-width: 380px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

/* ===== ANIMACIONES ===== */

@keyframes tpPanelIn-b-yr6zr4bm9p {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-panel[b-yr6zr4bm9p],
    .tp-progreso[b-yr6zr4bm9p]::after {
        animation: none !important;
    }

    .tp-table tbody tr[b-yr6zr4bm9p],
    .tp-sort[b-yr6zr4bm9p],
    .tp-pager-btn[b-yr6zr4bm9p],
    .tp-pager-page[b-yr6zr4bm9p] {
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Components/VisorPdf/VisorPdfModal.razor.rz.scp.css */
/* Visor de PDF en la página — mismo lenguaje visual que la ventana de firma (frm-*). */

.vpd-overlay[b-skapjx4jfw] {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483646;
    animation: vpd-fade-b-skapjx4jfw .2s ease forwards;
}

.vpd-overlay .material-symbols-rounded[b-skapjx4jfw] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes vpd-fade-b-skapjx4jfw {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vpd-card[b-skapjx4jfw] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 860px;
    max-width: 94vw;
    height: 90vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
    animation: vpd-scale-b-skapjx4jfw .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vpd-scale-b-skapjx4jfw {
    from { transform: translateY(15px) scale(.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .vpd-card[b-skapjx4jfw] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

.vpd-header[b-skapjx4jfw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .8rem;
    border-bottom: 1px solid #eef0f3;
}

.vpd-title[b-skapjx4jfw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.vpd-title-icon[b-skapjx4jfw] {
    color: #2563eb;
    font-size: 1.5rem !important;
}

.vpd-title-text[b-skapjx4jfw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.vpd-hoja[b-skapjx4jfw] {
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
}

.vpd-close[b-skapjx4jfw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.vpd-close:hover[b-skapjx4jfw] {
    background: #f3f4f6;
    color: #111827;
}

.vpd-body[b-skapjx4jfw] {
    flex: 1;
    min-height: 0;
    display: flex;
    background: #f1f5f9;
}

.vpd-pdf[b-skapjx4jfw] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

.vpd-estado[b-skapjx4jfw] {
    margin: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #6b7280;
    font-size: .95rem;
}

.vpd-girando[b-skapjx4jfw] {
    animation: vpd-girar-b-skapjx4jfw 1s linear infinite;
}

@keyframes vpd-girar-b-skapjx4jfw {
    to { transform: rotate(360deg); }
}

.vpd-error[b-skapjx4jfw] {
    margin: auto 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .9rem;
    max-width: 640px;
}

.vpd-actions[b-skapjx4jfw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
}

.vpd-hint[b-skapjx4jfw] {
    margin-right: auto;
    font-size: .76rem;
    color: #9ca3af;
}

.vpd-btn[b-skapjx4jfw] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.vpd-btn-ghost[b-skapjx4jfw] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.vpd-btn-ghost:hover[b-skapjx4jfw] {
    background: #f3f4f6;
}

.vpd-btn-primary[b-skapjx4jfw] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.vpd-btn-primary:hover[b-skapjx4jfw] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Compras/Pages/ComprasPage.razor.rz.scp.css */
/* Listado de COMPRAS (CP3). Copia del CSS del listado de ventas con el nombre de la página cambiado:
   el CSS de Blazor es scoped por componente, así que no puede compartirse; lo que sí se comparte es el
   vocabulario de clases `fc-*` (filtros, insignias, tabla) para que las dos pantallas se vean iguales.
   Fuera lo que aquí no existe: menú flotante de creación (nunca se usó) y columnas Comercial/Usuario. */

.compras-page[b-j9d1qs5kww],
.compras-page *[b-j9d1qs5kww],
.compras-page *[b-j9d1qs5kww]::before,
.compras-page *[b-j9d1qs5kww]::after {
    box-sizing: border-box;
}

.compras-page[b-j9d1qs5kww] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Filas: cabecera, KPIs y listado; la última es `1fr`, así que reparte el
       espacio sobrante cuando sobra y empuja el alto de la página cuando falta. */
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-gap);
    animation: comprasPageIn-b-j9d1qs5kww 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.compras-heading[b-j9d1qs5kww],
.compras-kpis[b-j9d1qs5kww],
.compras-list-panel[b-j9d1qs5kww],
.fc-filter-item[b-j9d1qs5kww],
.fc-filter-item-search[b-j9d1qs5kww],
.fc-filter-searchbox[b-j9d1qs5kww] {
    min-inline-size: 0;
}

/* CABECERA
   Título a la izquierda y CommandBar anclado a la esquina superior derecha. */

.compras-heading[b-j9d1qs5kww] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los comandos del CommandBar se
       repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2). */
    .compras-heading > div:first-child[b-j9d1qs5kww] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .compras-heading.command-bar-host-collapsed > div:first-child[b-j9d1qs5kww] {
        flex: 1 1 auto;
    }

.compras-title[b-j9d1qs5kww] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.compras-subtitle[b-j9d1qs5kww] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.compras-heading.command-bar-host-collapsed .compras-title[b-j9d1qs5kww],
.compras-heading.command-bar-host-collapsed .compras-subtitle[b-j9d1qs5kww] {
    white-space: normal;
    overflow-wrap: break-word;
}

.compras-header-actions[b-j9d1qs5kww] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

.compras-kpis[b-j9d1qs5kww] {
    inline-size: 100%;
    max-inline-size: 100%;
}

    .compras-kpis[b-j9d1qs5kww] (.kpi-board),
    .compras-kpis[b-j9d1qs5kww] (.kpi-grid),
    .compras-kpis[b-j9d1qs5kww] (.kpi-list) {
        inline-size: 100%;
        max-inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        gap: var(--fc-gap);
    }

    .compras-kpis[b-j9d1qs5kww] (.kpi-tile),
    .compras-kpis[b-j9d1qs5kww] (.kpi-card) {
        min-inline-size: 0;
        inline-size: 100%;
    }

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan sobre el fondo de la página. El único marco
   es el de la propia tabla (.tp-shell, dentro de TablaPaginada). */

.compras-list-panel[b-j9d1qs5kww] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS */

.compras-filters[b-j9d1qs5kww] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-j9d1qs5kww] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-j9d1qs5kww] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.fc-filter-input[b-j9d1qs5kww],
.fc-filter-select[b-j9d1qs5kww] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-filter-input[b-j9d1qs5kww] {
    padding-block: 0;
    padding-inline: 0.85rem;
}

.fc-filter-input-search[b-j9d1qs5kww] {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-select[b-j9d1qs5kww] {
    padding-block: 0;
    padding-inline: 0.85rem;
    cursor: pointer;
}

.fc-filter-input[b-j9d1qs5kww]::placeholder {
    color: #9ca3af;
}

.fc-filter-input:focus[b-j9d1qs5kww],
.fc-filter-select:focus[b-j9d1qs5kww] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* BOTONES */

.fc-primary-btn[b-j9d1qs5kww],
.fc-action-btn[b-j9d1qs5kww] {
    min-block-size: var(--fc-field-block);
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-block: 0;
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    font-size: var(--fc-font-text);
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
    flex: 1 1 max-content;
}

.fc-primary-btn[b-j9d1qs5kww] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fc-primary-btn:hover[b-j9d1qs5kww] {
        background: #1d4ed8;
        transform: translateY(-0.08rem);
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.fc-action-btn[b-j9d1qs5kww] {
    border: 0.0625rem solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fc-action-btn:hover[b-j9d1qs5kww] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

/* RESULTADOS */

.fc-results-zone[b-j9d1qs5kww] {
    display: grid;
    gap: 0.4rem;
    min-inline-size: 0;
}

.fc-results-bar[b-j9d1qs5kww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
    flex-wrap: wrap;
    min-block-size: 1.25rem;
}

.fc-results-text[b-j9d1qs5kww] {
    font-size: var(--fc-font-small);
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

.fc-results-sel[b-j9d1qs5kww] {
    color: #2563eb;
}

/* SELECCIÓN (acciones en bloque) */

.fc-results-toggles[b-j9d1qs5kww] {
    display: flex;
    align-items: center;
    gap: var(--fc-gap);
    flex-wrap: wrap;
    min-inline-size: 0;
}

.fc-toggle[b-j9d1qs5kww] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fc-font-small);
    color: #475569;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* La misma marca en los dos sitios donde vive: los conmutadores de la barra de resultados (markup de
   esta página) y la columna de selección de la tabla (markup de TablaPaginada → hace falta `::deep`). */
.fc-check[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-check {
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
    margin: 0;
}

    .fc-check:disabled[b-j9d1qs5kww],
    .compras-page[b-j9d1qs5kww]  .fc-check:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

/* PROGRESO DE LA EMISIÓN MASIVA */

.fc-progress[b-j9d1qs5kww] {
    display: grid;
    gap: 0.3rem;
}

.fc-progress-text[b-j9d1qs5kww] {
    font-size: var(--fc-font-small);
    color: #1d4ed8;
    font-weight: 800;
}

.fc-progress-track[b-j9d1qs5kww] {
    inline-size: 100%;
    block-size: 0.4rem;
    border-radius: 999rem;
    background: #eff6ff;
    overflow: hidden;
}

.fc-progress-bar[b-j9d1qs5kww] {
    block-size: 100%;
    border-radius: 999rem;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* TABLA
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador): ese
   estilo vive en su propio CSS y NO se replica aquí. Lo que queda es lo que la tabla no puede saber: el
   replegado de columnas por ancho de ventana y el aspecto de las celdas que aporta la página como
   plantilla. Todo con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>. */

.fc-tabla[b-j9d1qs5kww] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.compras-page[b-j9d1qs5kww]  .tp-panel {
    min-height: auto;
}

/* MARCA DE SELECCIÓN (plantilla de la primera columna) */

.compras-page[b-j9d1qs5kww]  .fc-row-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* INSIGNIAS DE TIPO
   La columna «Estado» usa el semáforo de estado (wwwroot/css/semaforo.css), el mismo de ventas, de la
   ficha del proveedor y de pagos. Estas clases quedan para la columna «Tipo» y el modal del informe.
   Las insignias las pinta la página como plantilla de las columnas, pero el markup
   vive dentro de la tabla: de ahí el `::deep`. El modal del informe usa las mismas clases y ese sí es
   markup propio, así que cada regla se declara por partida doble. */

.fc-estado-badge[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.fc-estado-green[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fc-estado-blue[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fc-estado-orange[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fc-estado-purple[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-purple {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.fc-estado-red[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-estado-gray[b-j9d1qs5kww],
.compras-page[b-j9d1qs5kww]  .fc-estado-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* MODAL DEL INFORME DE EMISIÓN MASIVA */

.fc-modal-overlay[b-j9d1qs5kww] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: comprasModalIn-b-j9d1qs5kww 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-modal[b-j9d1qs5kww] {
    inline-size: min(46rem, 100%);
    max-block-size: min(80dvh, 44rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--fc-inner-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    padding: var(--fc-panel-pad);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.fc-modal-header[b-j9d1qs5kww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
}

.fc-modal-title[b-j9d1qs5kww] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fc-modal-close[b-j9d1qs5kww] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .fc-modal-close:hover[b-j9d1qs5kww] {
        background: #f1f5f9;
        color: #1f2937;
    }

.fc-modal-summary[b-j9d1qs5kww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fc-modal-summary-total[b-j9d1qs5kww] {
    font-size: var(--fc-font-small);
    color: #64748b;
    font-weight: 750;
}

.fc-modal-body[b-j9d1qs5kww] {
    min-block-size: 0;
    overflow: auto;
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.fc-informe-table[b-j9d1qs5kww] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fc-font-small);
}

    .fc-informe-table th[b-j9d1qs5kww] {
        position: sticky;
        inset-block-start: 0;
        text-align: start;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #eef2f7;
    }

    .fc-informe-table td[b-j9d1qs5kww] {
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.fc-informe-error td[b-j9d1qs5kww] {
    background: #fffbfb;
}

.fc-informe-avisos[b-j9d1qs5kww] {
    margin: 0;
    padding-inline-start: 1rem;
    color: #b45309;
}

.fc-informe-vacio[b-j9d1qs5kww] {
    color: #94a3b8;
}

.fc-modal-actions[b-j9d1qs5kww] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-inner-gap);
}

.fc-export-link[b-j9d1qs5kww] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
}

/* ANIMACIONES */

@keyframes comprasModalIn-b-j9d1qs5kww {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes comprasPageIn-b-j9d1qs5kww {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. La marca de
   selección, «Número», «Proveedor» e «Importe» permanecen siempre visibles. La clase la lleva la
   cabecera Y sus celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1120px) {
    .compras-page[b-j9d1qs5kww]  .fc-col-serie {
        display: none;
    }
}

@media (max-width: 980px) {
    .compras-page[b-j9d1qs5kww]  .fc-col-fecha {
        display: none;
    }
}

@media (max-width: 760px) {
    .compras-page[b-j9d1qs5kww]  .fc-col-tipo {
        display: none;
    }
}

/* «Por recibir» cae pronto, como «Por servir» en ventas: el estado «Parcial» ya avisa. */
@media (max-width: 1200px) {
    .compras-page[b-j9d1qs5kww]  .fc-col-porservir {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo. */
@media (max-width: 640px) {
    .compras-page[b-j9d1qs5kww]  .fc-col-estado {
        display: none;
    }
}

@media (max-width: 80rem) {
    .compras-filters[b-j9d1qs5kww] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-j9d1qs5kww] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .compras-page[b-j9d1qs5kww] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .compras-filters[b-j9d1qs5kww] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fc-results-bar[b-j9d1qs5kww] {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compras-page[b-j9d1qs5kww],
    .compras-page *[b-j9d1qs5kww],
    .compras-page *[b-j9d1qs5kww]::before,
    .compras-page *[b-j9d1qs5kww]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Configuration/Asistente/Pages/CostesAsistentePage.razor.rz.scp.css */
/* Pantalla de costes del asistente (MP5): limpia, estilo "Claude" (barra de % gastado + histórico). */

/* Todo el ancho, como las demás pantallas: el borde lo pone .main-body. */
.costes-ia-page[b-9tmzwytyph] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.costes-ia-header h1[b-9tmzwytyph] {
    margin: 0;
    font-size: 1.4rem;
}

.costes-ia-subtitulo[b-9tmzwytyph] {
    margin: .35rem 0 0;
    opacity: .7;
}

.costes-ia-aviso[b-9tmzwytyph] {
    opacity: .7;
}

.costes-ia-error[b-9tmzwytyph] {
    background: #fdecea;
    color: #611a15;
    padding: .6rem .8rem;
    border-radius: 8px;
}

.costes-ia-resumen[b-9tmzwytyph] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.costes-ia-barra-wrap[b-9tmzwytyph] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.costes-ia-barra-cabecera[b-9tmzwytyph] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}

.costes-ia-porcentaje[b-9tmzwytyph] {
    font-weight: 600;
    font-size: 1.05rem;
}

.costes-ia-cifra[b-9tmzwytyph] {
    opacity: .7;
    font-size: .9rem;
}

.costes-ia-barra[b-9tmzwytyph] {
    height: 10px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.costes-ia-barra-relleno[b-9tmzwytyph] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    transition: width .3s ease;
}

.costes-ia-barra-relleno.en-exceso[b-9tmzwytyph] {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

/* AC1: techo del premium y reserva del básico, en una línea discreta bajo la barra. */
.costes-ia-reserva[b-9tmzwytyph] {
    margin: 0;
    font-size: .85rem;
    opacity: .75;
}

.costes-ia-aviso-exceso[b-9tmzwytyph] {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .9rem;
}

.costes-ia-historico h2[b-9tmzwytyph] {
    font-size: 1rem;
    margin: 0 0 .6rem;
}

.costes-ia-tabla-wrap[b-9tmzwytyph] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.costes-ia-tabla[b-9tmzwytyph] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.costes-ia-tabla th[b-9tmzwytyph] {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 2px solid #e5e7eb;
    background: #f8fafc;
}

.costes-ia-tabla td[b-9tmzwytyph] {
    padding: .5rem .75rem;
    border-bottom: 1px solid #f1f5f9;
}

.costes-ia-tabla tr:last-child td[b-9tmzwytyph] {
    border-bottom: none;
}

.costes-ia-creditos.es-ajuste[b-9tmzwytyph] {
    color: #16a34a;
}
/* _content/ErpPowergest/Presentation/Configuration/Certificado/CertificadoDigitalPage.razor.rz.scp.css */
.cert-page[b-jgxk7db1qd] {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cert-barra[b-jgxk7db1qd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cert-barra h1[b-jgxk7db1qd] {
    font-size: 1.35rem;
    margin: 0;
}

.cert-intro[b-jgxk7db1qd],
.cert-nota[b-jgxk7db1qd] {
    color: var(--texto-secundario, #555);
    margin: 0 0 8px;
}

.cert-tarjeta[b-jgxk7db1qd] {
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 10px;
    padding: 16px;
}

.cert-tarjeta h2[b-jgxk7db1qd] {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

.cert-activo[b-jgxk7db1qd] {
    border-left: 6px solid #16a34a;
    padding-left: 12px;
}

.cert-activo.cert-ambar[b-jgxk7db1qd] { border-left-color: #d97706; }
.cert-activo.cert-rojo[b-jgxk7db1qd] { border-left-color: #dc2626; }

.cert-dias[b-jgxk7db1qd] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.cert-dias strong[b-jgxk7db1qd] { font-size: 1.2rem; }

.cert-datos[b-jgxk7db1qd] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 8px;
}

.cert-datos dt[b-jgxk7db1qd] { color: var(--texto-secundario, #555); }
.cert-datos dd[b-jgxk7db1qd] { margin: 0; overflow-wrap: anywhere; }

.cert-rojo-texto[b-jgxk7db1qd] { color: #b91c1c; }

.cert-aviso[b-jgxk7db1qd] {
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
}

.cert-aviso-informacion[b-jgxk7db1qd] { background: #eff6ff; color: #1e3a8a; }
.cert-aviso-aviso[b-jgxk7db1qd] { background: #fffbeb; color: #92400e; }
.cert-aviso-riesgo[b-jgxk7db1qd] { background: #fef2f2; color: #991b1b; }

.cert-check[b-jgxk7db1qd] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0;
}

.cert-subida[b-jgxk7db1qd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cert-subida input[type=password][b-jgxk7db1qd] {
    min-width: 220px;
    padding: 6px 8px;
}

.cert-acciones[b-jgxk7db1qd] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cert-btn[b-jgxk7db1qd] {
    border: 1px solid var(--borde, #ccc);
    background: var(--superficie, #fff);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

.cert-btn:disabled[b-jgxk7db1qd] { opacity: .55; cursor: default; }

.cert-btn-primario[b-jgxk7db1qd] {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.cert-tabla[b-jgxk7db1qd] {
    width: 100%;
    border-collapse: collapse;
}

.cert-tabla th[b-jgxk7db1qd],
.cert-tabla td[b-jgxk7db1qd] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--borde, #eee);
}

/* ── Plan EA: Envío a Hacienda ─────────────────────────────────────────────────────────────── */

.eh-estado[b-jgxk7db1qd] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid;
}

.eh-verde[b-jgxk7db1qd] { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.eh-ambar[b-jgxk7db1qd] { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.eh-rojo[b-jgxk7db1qd]  { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }

.eh-icono[b-jgxk7db1qd] { font-size: 2.2rem; line-height: 1; }

.eh-titular[b-jgxk7db1qd] {
    font-size: 1.3rem;
    margin: 0 0 6px;
}

.eh-explicacion[b-jgxk7db1qd] {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.45;
}

.eh-lista[b-jgxk7db1qd] {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eh-lista > li[b-jgxk7db1qd]::marker {
    font-weight: 700;
    font-size: 1.15rem;
}

.eh-paso-titulo[b-jgxk7db1qd] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.eh-copiables[b-jgxk7db1qd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.eh-copiable[b-jgxk7db1qd] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 8px;
    padding: 8px 10px;
}

.eh-etiqueta[b-jgxk7db1qd] { color: var(--texto-secundario, #555); }

.eh-copiable code[b-jgxk7db1qd] {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.eh-enlace[b-jgxk7db1qd] {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 10px;
}

.eh-sede[b-jgxk7db1qd] {
    margin: 0 0 6px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eh-hecho[b-jgxk7db1qd] {
    font-size: 1.05rem;
    padding: 10px 22px;
}

.eh-errores summary[b-jgxk7db1qd] {
    cursor: pointer;
    font-weight: 600;
}

.eh-errores ul[b-jgxk7db1qd] { margin: 10px 0; }

.eh-subtitulo[b-jgxk7db1qd] {
    font-size: 1rem;
    margin: 16px 0 8px;
}
/* _content/ErpPowergest/Presentation/Configuration/ConfiguracionTpv/Pages/TpvConfiguracionPage.razor.rz.scp.css */
.tpv-page[b-dqvh3vjj3u],
.tpv-page *[b-dqvh3vjj3u],
.tpv-page *[b-dqvh3vjj3u]::before,
.tpv-page *[b-dqvh3vjj3u]::after {
    box-sizing: border-box;
}

/* FUN-V574 (incidencias 16): la página se desplaza y cada panel ocupa lo que necesita. Antes, un alto fijo
   repartido entre los paneles con scroll DENTRO de cada uno: con cinco paneles no se veía nada. */
.tpv-page[b-dqvh3vjj3u] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CABECERA (mismo patrón que el resto de pantallas): título a la izquierda, CommandBar a la derecha. */
.tpv-header[b-dqvh3vjj3u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Título en dos fases: el bloque no cede y el título va en una línea, así la barra ve que falta sitio
   y pasa a solo iconos y luego al «···». Con la barra replegada del todo (command-bar-host-collapsed,
   la pone el script) el texto envuelve. */
.tpv-header > .tpv-header-text[b-dqvh3vjj3u] {
    flex: 0 0 auto;
    min-width: 0;
}

.tpv-header.command-bar-host-collapsed > .tpv-header-text[b-dqvh3vjj3u] {
    flex: 1 1 auto;
}

.tpv-title[b-dqvh3vjj3u] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    white-space: nowrap;
}

.tpv-subtitle[b-dqvh3vjj3u] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

.tpv-header.command-bar-host-collapsed .tpv-title[b-dqvh3vjj3u],
.tpv-header.command-bar-host-collapsed .tpv-subtitle[b-dqvh3vjj3u] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.tpv-header[b-dqvh3vjj3u]  .tpv-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.card-panel[b-dqvh3vjj3u] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.section-title[b-dqvh3vjj3u] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-dqvh3vjj3u] {
    margin: 0;
}

.tpv-dashboard-grid[b-dqvh3vjj3u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.tpv-section-panel[b-dqvh3vjj3u] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
}

.tpv-panel-header[b-dqvh3vjj3u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tpv-panel-subtitle[b-dqvh3vjj3u] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

.tpv-list[b-dqvh3vjj3u] {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
}

    .tpv-list[b-dqvh3vjj3u]::-webkit-scrollbar {
        width: 6px;
    }

    .tpv-list[b-dqvh3vjj3u]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.tpv-list-single[b-dqvh3vjj3u] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tpv-item[b-dqvh3vjj3u] {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

.tpv-item-two[b-dqvh3vjj3u] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tpv-item-seller[b-dqvh3vjj3u] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.tpv-field[b-dqvh3vjj3u] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .tpv-field label[b-dqvh3vjj3u] {
        font-size: 12px;
        font-weight: 750;
        color: #4b5563;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tpv-input[b-dqvh3vjj3u] {
    width: 100%;
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .tpv-input:focus[b-dqvh3vjj3u] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.tpv-check[b-dqvh3vjj3u] {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    white-space: nowrap;
}

    .tpv-check input[b-dqvh3vjj3u] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
    }

.tpv-printer-grid[b-dqvh3vjj3u] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.tpv-help[b-dqvh3vjj3u] {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px dashed #dbe2ea;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12px;
    color: #6b7280;
}

/* BOTONES DEL CONTENIDO (los de una tarjeta o una fila): mismo vocabulario que el resto del proyecto. */
.tpv-btn[b-dqvh3vjj3u] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

    .tpv-btn:disabled[b-dqvh3vjj3u] {
        opacity: .55;
        cursor: default;
    }

.tpv-btn-ico[b-dqvh3vjj3u] {
    font-size: 18px;
    line-height: 1;
}

.tpv-btn-primary[b-dqvh3vjj3u] {
    background: #2563eb;
    color: #ffffff;
}

    .tpv-btn-primary:hover:not(:disabled)[b-dqvh3vjj3u] {
        background: #1d4ed8;
    }

/* Cambios sin guardar: añadir un cliente o cambiar una caja no cuenta hasta «Guardar configuración».
   Va en la cabecera, al lado del CommandBar. */
.tpv-pendiente[b-dqvh3vjj3u] {
    align-self: center;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

/* FUN-593: el guardado rechazado se dice en rojo, con el campo culpable señalado. */
.tpv-error[b-dqvh3vjj3u] {
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.tpv-field--error .tpv-input[b-dqvh3vjj3u],
.tpv-field--error[b-dqvh3vjj3u]  .tpv-input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.card-panel.tpv-field--error[b-dqvh3vjj3u] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.tpv-item-anadir[b-dqvh3vjj3u] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.tpv-item-alta[b-dqvh3vjj3u] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.tpv-subtitulo[b-dqvh3vjj3u] {
    font-size: 12px;
    font-weight: 750;
    color: #4b5563;
}

/* FUN-V572: lo que vuelve en vales es desproporcionado. Aviso, no error: se puede guardar. */
.tpv-aviso[b-dqvh3vjj3u] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 12px;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 12px;
    color: #92400e;
}

    .tpv-aviso .material-symbols-outlined[b-dqvh3vjj3u] {
        font-size: 18px;
    }

.tpv-help-texto[b-dqvh3vjj3u] {
    min-height: 0;
    padding: 8px 12px;
}

.tpv-enlaces[b-dqvh3vjj3u] {
    display: grid;
    gap: 6px;
}

    .tpv-enlaces a[b-dqvh3vjj3u] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border: 1px solid #dbeafe;
        border-radius: 12px;
        background: #eff6ff;
        color: #1e3a8a;
        font-size: 12.5px;
        text-decoration: none;
    }

    .tpv-enlaces a:hover[b-dqvh3vjj3u] {
        background: #dbeafe;
    }

    .tpv-enlaces .material-symbols-outlined[b-dqvh3vjj3u] {
        color: #2563eb;
    }

.tpv-btn-ghost[b-dqvh3vjj3u] {
    background: #ffffff;
    color: #374151;
    border-color: #dbe2ea;
}

    .tpv-btn-ghost:hover:not(:disabled)[b-dqvh3vjj3u] {
        background: #f3f6fa;
    }

.tpv-btn-danger-ghost[b-dqvh3vjj3u] {
    background: #ffffff;
    color: #c22f39;
    border-color: #f0c4c7;
}

    .tpv-btn-danger-ghost:hover:not(:disabled)[b-dqvh3vjj3u] {
        background: #fdf1f2;
    }

@media (max-width: 980px) {
    .tpv-dashboard-grid[b-dqvh3vjj3u] {
        grid-template-columns: 1fr;
    }

    .tpv-printer-grid[b-dqvh3vjj3u] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tpv-list-single[b-dqvh3vjj3u],
    .tpv-item-two[b-dqvh3vjj3u],
    .tpv-item-seller[b-dqvh3vjj3u],
    .tpv-item-anadir[b-dqvh3vjj3u],
    .tpv-item-alta[b-dqvh3vjj3u] {
        grid-template-columns: 1fr;
    }

    .tpv-panel-header[b-dqvh3vjj3u] {
        flex-direction: column;
        align-items: stretch;
    }

    .tpv-btn[b-dqvh3vjj3u] {
        width: 100%;
    }
}
/* _content/ErpPowergest/Presentation/Configuration/Copias/CopiasEmpresaClientePage.razor.rz.scp.css */
/* Copias de seguridad y restauración: el estilo de las pantallas nuevas (marketing, conciliación): cabecera con icono,
   cifras con fondo de color suave, tarjetas con radio 12 y chips de color por origen y estado. Las listas se desplazan
   dentro de su tarjeta: con muchas copias o peticiones la página no crece sin fin. */

.cpc-page[b-9p9ccibz9c] {
    --cpc-acento: #2563eb;
    --cpc-acento-suave: #eff6ff;
    --cpc-acento-borde: #bfdbfe;
    --cpc-ambar: #b45309;
    --cpc-ambar-suave: #fffbeb;
    --cpc-ambar-borde: #fde68a;
    --cpc-borde: var(--borde, #e5e7eb);
    --cpc-gris: var(--texto-secundario, #6b7280);
    --cpc-fondo: var(--fondo-tarjeta, #fff);

    /* Todo el ancho y todo el alto, como las demás pantallas: el borde lo pone .main-body, y la última tarjeta (tus
       peticiones) se queda con el alto que sobra. */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
}

.cpc-page > :last-child[b-9p9ccibz9c] {
    flex: 1 1 auto;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cpc-cabecera[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cpc-cabecera-icono[b-9p9ccibz9c] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: var(--cpc-acento);
    font-size: 26px;
}

.cpc-titulo[b-9p9ccibz9c] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.cpc-lema[b-9p9ccibz9c] {
    margin: 2px 0 0;
    font-size: 0.88rem;
    color: var(--cpc-gris);
}

/* ── Cifras ───────────────────────────────────────────────────────────────── */

.cpc-cifras[b-9p9ccibz9c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cpc-cifra[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.cpc-cifra .material-symbols-rounded[b-9p9ccibz9c] {
    font-size: 26px;
}

.cpc-cifra div[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cpc-cifra strong[b-9p9ccibz9c] {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpc-cifra div span[b-9p9ccibz9c] {
    font-size: 0.78rem;
    color: var(--cpc-gris);
}

.cpc-cifra-azul[b-9p9ccibz9c] { background: #eff6ff; border-color: #dbeafe; }
.cpc-cifra-azul .material-symbols-rounded[b-9p9ccibz9c] { color: #2563eb; }
.cpc-cifra-verde[b-9p9ccibz9c] { background: #f0fdf4; border-color: #dcfce7; }
.cpc-cifra-verde .material-symbols-rounded[b-9p9ccibz9c] { color: #16a34a; }
.cpc-cifra-violeta[b-9p9ccibz9c] { background: #f5f3ff; border-color: #ede9fe; }
.cpc-cifra-violeta .material-symbols-rounded[b-9p9ccibz9c] { color: #7c3aed; }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.cpc-tarjeta[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--cpc-borde);
    border-top: 3px solid var(--cpc-acento);
    border-radius: 12px;
    background: var(--cpc-fondo);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cpc-tarjeta-ambar[b-9p9ccibz9c] {
    border-top-color: #f59e0b;
}

.cpc-tarjeta-cab[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.cpc-h2[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.cpc-h2 .material-symbols-rounded[b-9p9ccibz9c] {
    font-size: 20px;
    color: var(--cpc-acento);
}

.cpc-tarjeta-ambar .cpc-h2 .material-symbols-rounded[b-9p9ccibz9c] {
    color: #d97706;
}

.cpc-cargando[b-9p9ccibz9c] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--cpc-gris);
    font-size: 0.88rem;
}

/* ── Franjas de aviso ─────────────────────────────────────────────────────── */

.cpc-franja[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
}

.cpc-franja .material-symbols-rounded[b-9p9ccibz9c] { font-size: 20px; flex: 0 0 auto; }

.cpc-franja-azul[b-9p9ccibz9c] { background: var(--cpc-acento-suave); color: #1e40af; }
.cpc-franja-gris[b-9p9ccibz9c] { background: #f8fafc; color: #475569; }
.cpc-franja-ambar[b-9p9ccibz9c] { background: var(--cpc-ambar-suave); color: #92400e; border: 1px solid var(--cpc-ambar-borde); }

.cpc-barra[b-9p9ccibz9c] {
    flex: 1 1 120px;
    max-width: 240px;
    height: 6px;
    border-radius: 3px;
    background: #dbeafe;
    overflow: hidden;
}

.cpc-barra span[b-9p9ccibz9c] {
    display: block;
    height: 100%;
    background: var(--cpc-acento);
    transition: width 0.4s ease;
}

.cpc-por[b-9p9ccibz9c] { font-variant-numeric: tabular-nums; }

/* ── Vacío ────────────────────────────────────────────────────────────────── */

.cpc-vacio[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px dashed var(--cpc-acento-borde);
    border-radius: 12px;
    background: var(--cpc-acento-suave);
}

.cpc-tarjeta-ambar .cpc-vacio[b-9p9ccibz9c] {
    border-color: var(--cpc-ambar-borde);
    background: var(--cpc-ambar-suave);
}

.cpc-vacio .material-symbols-rounded[b-9p9ccibz9c] {
    font-size: 30px;
    color: var(--cpc-acento);
}

.cpc-tarjeta-ambar .cpc-vacio .material-symbols-rounded[b-9p9ccibz9c] { color: #d97706; }

.cpc-vacio p[b-9p9ccibz9c] {
    margin: 0;
    font-size: 0.88rem;
}

/* ── Listas (con su propio desplazamiento) ────────────────────────────────── */

.cpc-lista[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--cpc-borde);
    border-radius: 10px;
}

.cpc-fila[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cpc-borde);
}

.cpc-fila:last-child[b-9p9ccibz9c],
.cpc-peticion:last-child[b-9p9ccibz9c] {
    border-bottom: none;
}

.cpc-fila:hover[b-9p9ccibz9c] { background: #f8fafc; }

.cpc-fila-icono[b-9p9ccibz9c] {
    font-size: 22px;
    color: #64748b;
}

.cpc-fila-texto[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.cpc-fila-texto .cpc-nota[b-9p9ccibz9c] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpc-tamano[b-9p9ccibz9c] {
    min-width: 64px;
    text-align: right;
    font-size: 0.82rem;
    color: var(--cpc-gris);
    font-variant-numeric: tabular-nums;
}

.cpc-peticion[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cpc-borde);
}

.cpc-peticion-cab[b-9p9ccibz9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cpc-fuerte[b-9p9ccibz9c] { font-weight: 600; }

.cpc-nota[b-9p9ccibz9c] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--cpc-gris);
}

.cpc-nota-sola[b-9p9ccibz9c] { padding: 2px 0; }

.cpc-resultado[b-9p9ccibz9c] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.82rem;
    white-space: pre-line;
}

/* ── Chips de origen y de estado ──────────────────────────────────────────── */

.cpc-chip[b-9p9ccibz9c] {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
}

/* Origen (OrigenCopiaEmpresa, por su número): a mano, programada, antes de una operación, previa a restaurar,
   rescate y pedida desde la empresa. */
.cpc-origen-0[b-9p9ccibz9c] { background: #f5f3ff; color: #6d28d9; }
.cpc-origen-1[b-9p9ccibz9c] { background: #f0fdfa; color: #0f766e; }
.cpc-origen-2[b-9p9ccibz9c] { background: #fffbeb; color: #b45309; }
.cpc-origen-3[b-9p9ccibz9c] { background: #f1f5f9; color: #475569; }
.cpc-origen-4[b-9p9ccibz9c] { background: #f0fdf4; color: #15803d; }
.cpc-origen-5[b-9p9ccibz9c] { background: #eff6ff; color: #1d4ed8; }

/* Estado de la petición (EstadoSolicitudRestauracion): pendiente, aceptada, hecha, con avisos, fallida, rechazada,
   retirada. */
.cpc-estado-0[b-9p9ccibz9c] { background: #fffbeb; color: #b45309; }
.cpc-estado-1[b-9p9ccibz9c] { background: #eff6ff; color: #1d4ed8; }
.cpc-estado-2[b-9p9ccibz9c] { background: #f0fdf4; color: #15803d; }
.cpc-estado-3[b-9p9ccibz9c] { background: #fff7ed; color: #c2410c; }
.cpc-estado-4[b-9p9ccibz9c],
.cpc-estado-5[b-9p9ccibz9c] { background: #fef2f2; color: #b91c1c; }
.cpc-estado-6[b-9p9ccibz9c] { background: #f1f5f9; color: #64748b; }

/* ── Formulario ───────────────────────────────────────────────────────────── */

.cpc-campos[b-9p9ccibz9c] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cpc-campo[b-9p9ccibz9c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.cpc-campo label[b-9p9ccibz9c] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.cpc-ancho[b-9p9ccibz9c] {
    flex: 1 1 320px;
}

.cpc-input[b-9p9ccibz9c] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--cpc-borde);
    border-radius: 8px;
}

input.cpc-input:focus[b-9p9ccibz9c] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.cpc-check[b-9p9ccibz9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    flex-basis: 100%;
}

.cpc-botones[b-9p9ccibz9c] {
    display: flex;
    justify-content: flex-end;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.cpc-btn[b-9p9ccibz9c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--cpc-borde);
    border-radius: 8px;
    background: var(--cpc-fondo);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
}

.cpc-btn .material-symbols-rounded[b-9p9ccibz9c] { font-size: 18px; }

.cpc-btn:hover:not(:disabled)[b-9p9ccibz9c] { background: #f8fafc; }

.cpc-btn-principal[b-9p9ccibz9c] {
    border-color: var(--cpc-acento);
    background: var(--cpc-acento);
    color: #fff;
    align-self: auto;
}

.cpc-btn-principal:hover:not(:disabled)[b-9p9ccibz9c] { background: #1d4ed8; }

.cpc-btn-ambar[b-9p9ccibz9c] {
    border-color: #d97706;
    background: #d97706;
    color: #fff;
    align-self: auto;
}

.cpc-btn-ambar:hover:not(:disabled)[b-9p9ccibz9c] { background: #b45309; }

.cpc-btn-icono[b-9p9ccibz9c] {
    width: 34px;
    padding: 0;
    justify-content: center;
    align-self: auto;
    color: var(--cpc-acento);
}

.cpc-btn:disabled[b-9p9ccibz9c] {
    opacity: 0.5;
    cursor: default;
}

.cpc-girando[b-9p9ccibz9c] {
    animation: cpc-girar-b-9p9ccibz9c 1s linear infinite;
}

@keyframes cpc-girar-b-9p9ccibz9c {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 720px) {
    .cpc-page[b-9p9ccibz9c] { padding: 14px 16px; }
    .cpc-cifras[b-9p9ccibz9c] { grid-template-columns: 1fr; }
    .cpc-chip[b-9p9ccibz9c] { display: none; }
}
/* _content/ErpPowergest/Presentation/Configuration/Dashboard/Pages/DashboardConfiguracionPage.razor.rz.scp.css */
/* Personalización de la home (DH4 + DH4b). Dos zonas: la paleta (lo disponible) y la matriz (el panel),
   que reproduce la rejilla de la pantalla principal para que la vista previa no mienta.

   El resaltado del arrastre lo pone y lo quita dashboardDnd.js (clases dnd-antes / dnd-despues /
   dnd-quitar); aquí solo se declara qué aspecto tienen. */

/* ---------------- Código de color por TIPO de widget (D12) ----------------

   El editor distingue de un vistazo qué es un indicador, un gráfico, una tabla o una lista. Es solo
   del EDITOR: los colores de los gráficos de la pantalla principal se deciden en DH7, con los charts
   reales delante, y esta paleta no llega hasta allí.

   ORIGEN DE LOS HEX: los chips del selector de empresa, en
   `Presentation/Empresas/Pages/EmpresaConfiguracionPage.razor.css`. Allí un chip son tres tonos de la
   misma familia —fondo casi blanco, borde pastel y texto fuerte—, y aquí se copia esa anatomía tal cual:

     · azul  = pill «Actual»  (--ec-primary-soft #eff6ff / borde #bfdbfe / --ec-primary #2563eb)
     · verde = pill «Activa»  (--ec-success-soft #ecfdf5 / borde #a7f3d0 / --ec-success #059669)

   El morado y el ámbar no existen como chip en esa pantalla: son hermanos derivados a la MISMA
   luminosidad que los dos reales (fondo ~97%, borde pastel, texto fuerte). El ámbar toma prestado el
   fondo que la propia pantalla ya usa para su familia cálida (--ec-warning-soft #fffbeb), así que ni
   siquiera es inventado del todo.

   Qué tipo lleva qué color: Indicador=azul, Gráfico=verde, Tabla=morado, Lista=ámbar. La correspondencia
   la decide `ClaseTipo` en el code-behind; aquí solo viven los tonos.

   Lo que NO se pinta con esto: el cromo de interacción —foco, hueco del drop, botones, zona de quitar—
   sigue en su azul y su rojo de siempre. Un estado de interacción teñido del color del tipo dejaría de
   leerse como estado. */
.dcfg-page[b-95mgf441he] {
    --dcfg-azul-fondo: #eff6ff;
    --dcfg-azul-borde: #bfdbfe;
    --dcfg-azul-texto: #2563eb;

    --dcfg-verde-fondo: #ecfdf5;
    --dcfg-verde-borde: #a7f3d0;
    --dcfg-verde-texto: #059669;

    --dcfg-morado-fondo: #f5f3ff;
    --dcfg-morado-borde: #ddd6fe;
    --dcfg-morado-texto: #7c3aed;

    --dcfg-ambar-fondo: #fffbeb;
    --dcfg-ambar-borde: #fde68a;
    --dcfg-ambar-texto: #b45309;

    --dcfg-neutro-fondo: #f8fafc;
    --dcfg-neutro-borde: #e2e8f0;
    --dcfg-neutro-texto: #64748b;

    /* Tareas (DH11): la familia rosa, hermana de las otras a la misma luminosidad (fondo ~97%, borde
       pastel, texto fuerte). La sugerencia va en neutro: no es un dato, es el programa hablando. */
    --dcfg-rosa-fondo: #fdf2f8;
    --dcfg-rosa-borde: #fbcfe8;
    --dcfg-rosa-texto: #be185d;
}

/* Cada tarjeta (de la paleta o de la matriz) resuelve su terna una sola vez; las reglas de más abajo
   usan --dcfg-tipo-*, así que añadir una familia es añadir tres variables y un selector, no reescribir
   el chip ni el filo. */
.dcfg-chip.tipo-azul[b-95mgf441he], .dcfg-celda.tipo-azul[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-azul-fondo); --dcfg-tipo-borde: var(--dcfg-azul-borde); --dcfg-tipo-texto: var(--dcfg-azul-texto); }
.dcfg-chip.tipo-verde[b-95mgf441he], .dcfg-celda.tipo-verde[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-verde-fondo); --dcfg-tipo-borde: var(--dcfg-verde-borde); --dcfg-tipo-texto: var(--dcfg-verde-texto); }
.dcfg-chip.tipo-morado[b-95mgf441he], .dcfg-celda.tipo-morado[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-morado-fondo); --dcfg-tipo-borde: var(--dcfg-morado-borde); --dcfg-tipo-texto: var(--dcfg-morado-texto); }
.dcfg-chip.tipo-ambar[b-95mgf441he], .dcfg-celda.tipo-ambar[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-ambar-fondo); --dcfg-tipo-borde: var(--dcfg-ambar-borde); --dcfg-tipo-texto: var(--dcfg-ambar-texto); }
.dcfg-chip.tipo-neutro[b-95mgf441he], .dcfg-celda.tipo-neutro[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-neutro-fondo); --dcfg-tipo-borde: var(--dcfg-neutro-borde); --dcfg-tipo-texto: var(--dcfg-neutro-texto); }
.dcfg-chip.tipo-rosa[b-95mgf441he], .dcfg-celda.tipo-rosa[b-95mgf441he] { --dcfg-tipo-fondo: var(--dcfg-rosa-fondo); --dcfg-tipo-borde: var(--dcfg-rosa-borde); --dcfg-tipo-texto: var(--dcfg-rosa-texto); }

/* Qué inicio se compone (DH11): una línea bajo el subtítulo, con el icono del espacio. */
.dcfg-espacio[b-95mgf441he] { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 9px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: .82rem; }
.dcfg-espacio .material-symbols-rounded[b-95mgf441he] { font-size: 18px; color: #64748b; }
.dcfg-espacio strong[b-95mgf441he] { color: #1f2937; }

/* Ocupa todo el ancho, como el resto de pantallas (Clientes): sin max-width ni padding propio —el borde
   lo pone .main-body— y en columna con 9px entre la cabecera y el contenido. */
.dcfg-page[b-95mgf441he] { width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; }

.dcfg-header[b-95mgf441he] { min-width: 0; }
.dcfg-header > div[b-95mgf441he] { min-width: 0; }
.dcfg-title[b-95mgf441he] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.dcfg-subtitle[b-95mgf441he] { color: #6b7280; font-size: .85rem; margin-top: 2px; }

.dcfg-card[b-95mgf441he] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 16px; }
.dcfg-empty[b-95mgf441he] { padding: 24px; text-align: center; color: #6b7280; }

.dcfg-section-head[b-95mgf441he] { margin-bottom: 14px; }
.dcfg-section-title[b-95mgf441he] { font-weight: 700; color: #374151; }
.dcfg-hint[b-95mgf441he] { font-size: .82rem; color: #6b7280; margin-top: 4px; line-height: 1.5; }
.dcfg-hint kbd[b-95mgf441he] { font-family: inherit; font-size: .75rem; background: #f3f4f6; border: 1px solid #e5e7eb;
                 border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: #374151; }
.dcfg-hint-global[b-95mgf441he] { margin-top: 0; }

/* ---------------- Las dos zonas ---------------- */

/* Tres columnas desde DH10: paleta · matriz · carril lateral. La lateral es estrecha a propósito —es lo
   que va a ser en la home—, así que la vista previa no miente en su forma tampoco. */
.dcfg-layout[b-95mgf441he] { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(170px, 210px);
               gap: 14px; align-items: start; min-width: 0; }
.dcfg-layout > *[b-95mgf441he] { min-width: 0; }

/* ---------------- Paleta ---------------- */

.dcfg-paleta[b-95mgf441he] { min-height: 220px; transition: background-color .12s, border-color .12s; }
/* Zona de «quitar» resaltada mientras se arrastra algo encima. */
.dcfg-paleta.dnd-quitar[b-95mgf441he] { border-color: #fca5a5; background: #fef2f2; }

.dcfg-paleta-lista[b-95mgf441he] { display: flex; flex-direction: column; gap: 8px; }
.dcfg-paleta-vacia[b-95mgf441he] { padding: 20px 8px; text-align: center; color: #9ca3af; font-size: .82rem; }

.dcfg-chip[b-95mgf441he] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: grab;
             border: 1px solid #eef0f3; border-radius: 10px; background: #fff; min-width: 0;
             /* Filo del color del tipo (D12). Va en border-left y no en un ::before para que el radio
                de la esquina lo recorte solo y no se salga al arrastrar la tarjeta. */
             border-left: 3px solid var(--dcfg-tipo-borde, #eef0f3); }
/* Hover y foco son cromo de interacción y NO se tiñen del tipo; se respeta el filo izquierdo (queda
   fuera del border-color) para que la tarjeta no pierda su tipo justo al tocarla. */
.dcfg-chip:hover[b-95mgf441he] { border-top-color: #c7d2fe; border-right-color: #c7d2fe; border-bottom-color: #c7d2fe; background: #f8faff; }
.dcfg-chip:focus[b-95mgf441he] { outline: none; border-top-color: #2563eb; border-right-color: #2563eb; border-bottom-color: #2563eb;
                   box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.dcfg-chip.dcfg-arrastrando[b-95mgf441he] { opacity: .45; }

/* El icono por tipo se conserva (ya distinguía la tarjeta antes de haber color) y toma el tono fuerte
   de su familia: icono y chip dicen lo mismo por dos vías, que es lo que hace que se lea sin pensar. */
.dcfg-chip-ico[b-95mgf441he] { font-size: 20px; color: var(--dcfg-tipo-texto, #6b7280); flex-shrink: 0; }
.dcfg-chip-txt[b-95mgf441he] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.dcfg-chip-titulo[b-95mgf441he] { font-weight: 600; color: #111827; font-size: .88rem; align-self: stretch;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La etiqueta de tipo, como CHIP: la anatomía exacta de los pills «Actual»/«Activa» del selector de
   empresa (fondo pastel + borde de la familia + texto del tono fuerte, píldora de 999px). */
.dcfg-chip-tipo[b-95mgf441he], .dcfg-tipo-chip[b-95mgf441he] {
    display: inline-flex; align-items: center; width: max-content; max-width: 100%;
    padding: 2px 8px; border-radius: 999px;
    background: var(--dcfg-tipo-fondo, #f3f4f6);
    border: 1px solid var(--dcfg-tipo-borde, #e5e7eb);
    color: var(--dcfg-tipo-texto, #6b7280);
    font-size: .68rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Ya está en el panel (DH10): la paleta enseña el techo ENTERO para poder mandar a zona algo que ya está
   puesto, así que hace falta distinguir de un vistazo lo que ya está de lo que no. Se atenúa, no se
   esconde: es una marca de estado, no un deshabilitado (sigue siendo arrastrable a las zonas). */
.dcfg-chip.puesto[b-95mgf441he] { background: #fbfcfe; }
.dcfg-chip.puesto .dcfg-chip-titulo[b-95mgf441he] { color: #6b7280; }

.dcfg-chip-acciones[b-95mgf441he] { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Botones de destino de zona: texto corto y no icono, porque «Resúmenes» y «Lateral» no tienen un icono
   que se entienda solo y son la única vía de teclado para llenar las zonas. Solo se pintan donde la zona
   admite el tipo del widget: un botón que no puede funcionar no se ofrece. */
.dcfg-chip-zona[b-95mgf441he] { border: 1px solid #e5e7eb; background: #fff; color: #4b5563; border-radius: 999px;
                  padding: 1px 8px; font-size: .68rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dcfg-chip-zona:hover:not(:disabled)[b-95mgf441he] { border-color: #c7d2fe; background: #eef2ff; color: #2563eb; }
.dcfg-chip-zona:disabled[b-95mgf441he] { opacity: .4; cursor: default; }
.dcfg-chip-zona:focus-visible[b-95mgf441he] { outline: 2px solid #2563eb; outline-offset: 2px; }

.dcfg-chip-add[b-95mgf441he] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 2px;
                 display: inline-flex; align-items: center; border-radius: 6px; flex-shrink: 0; }
.dcfg-chip-add .material-symbols-rounded[b-95mgf441he] { font-size: 20px; }
.dcfg-chip-add:hover:not(:disabled)[b-95mgf441he] { background: #eef2ff; color: #2563eb; }
.dcfg-chip-add:disabled[b-95mgf441he] { opacity: .35; cursor: default; }

/* ---------------- Matriz (el panel) ---------------- */

/* La tarjeta de la matriz es el CONTENEDOR de consulta de la rejilla: lo que decide si caben 4 columnas
   es el ancho de la matriz, no el del viewport (a la izquierda está la paleta comiéndose 300px). Es el
   mismo mecanismo que usa la home sobre su área de contenido, con el mismo umbral: si uno colapsara
   antes que el otro, la vista previa mentiría — que es justo lo que pasó al medirlo. */
.dcfg-matriz-card[b-95mgf441he] { min-width: 0; container: dcfg-matriz-card / inline-size; }

/* La MISMA rejilla que la home (D10): 4 columnas y el span de cada tarjeta lo dice el empaquetador
   compartido. Si esto no calcara la home, la vista previa mentiría. */
.dcfg-matriz[b-95mgf441he] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
               align-items: start; min-height: 160px; }

.dcfg-matriz-vacia[b-95mgf441he] { display: block; border: 2px dashed #d1d5db; border-radius: 10px; padding: 30px 16px; }
.dcfg-matriz-hint[b-95mgf441he] { text-align: center; color: #9ca3af; font-size: .84rem; }

.dcfg-celda[b-95mgf441he] { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: grab;
              border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; padding: 9px 10px;
              position: relative;
              /* Filo del color del tipo (D12): en una tarjeta de ¼ el chip puede quedar recortado, pero
                 el filo se ve a cualquier ancho — es lo que hace que la matriz se lea de un vistazo. */
              border-left: 3px solid var(--dcfg-tipo-borde, #e5e7eb); }

/* Hover/foco/foco-dentro son cromo de interacción: tiñen los otros tres lados y dejan el filo del tipo
   intacto (si el foco se comiera el filo, la tarjeta enfocada sería la única sin tipo visible). */
.dcfg-celda:hover[b-95mgf441he] { border-top-color: #c7d2fe; border-right-color: #c7d2fe; border-bottom-color: #c7d2fe; background: #f8faff; }
.dcfg-celda:focus[b-95mgf441he] { outline: none; border-top-color: #2563eb; border-right-color: #2563eb; border-bottom-color: #2563eb;
                    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.dcfg-celda:focus-within[b-95mgf441he] { border-top-color: #c7d2fe; border-right-color: #c7d2fe; border-bottom-color: #c7d2fe; }
.dcfg-celda.dcfg-arrastrando[b-95mgf441he] { opacity: .45; }

/* Cuartos de fila: el span sale del empaquetador (el 3 es el sobrante absorbido, no un tamaño). */
.dcfg-celda.span-1[b-95mgf441he] { grid-column: span 1; }
.dcfg-celda.span-2[b-95mgf441he] { grid-column: span 2; }
.dcfg-celda.span-3[b-95mgf441he] { grid-column: span 3; }
.dcfg-celda.span-4[b-95mgf441he] { grid-column: span 4; }

/* Los KPI ya NO tienen banda propia (D10): van por la misma rejilla y eligen ancho como los demás.
   El punteado se queda en los tres lados de cromo; el filo del tipo sigue siendo sólido, o el código de
   color de D12 se leería peor justo en el tipo más frecuente. */
.dcfg-celda.kpi[b-95mgf441he] { background: #fff; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }

.dcfg-celda-cab[b-95mgf441he] { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dcfg-celda-ico[b-95mgf441he] { font-size: 19px; color: var(--dcfg-tipo-texto, #6b7280); flex-shrink: 0; }
.dcfg-celda-titulo[b-95mgf441he] { flex: 1; min-width: 0; font-weight: 600; color: #111827; font-size: .88rem;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcfg-celda-acciones[b-95mgf441he] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* El cuerpo ya no es texto suelto: aloja el chip de tipo (D12) y solo tiene que dejarle sitio. */
.dcfg-celda-cuerpo[b-95mgf441he] { display: flex; min-width: 0; }

/* ---------------- Salto de fila (DH4d) ----------------

   Donde el usuario fijó un corte, se ve un corte. Ocupa la rejilla ENTERA, y eso no es solo estética:
   un hijo de grid que abarca las 4 columnas obliga a la fila siguiente a empezar de cero, así que el
   separador cae exactamente donde el empaquetador dice que hay salto. La línea es fina a propósito —es
   una marca, no un panel—, y lo único pulsable es el «×». */
.dcfg-salto[b-95mgf441he] { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
              margin: 2px 0; color: #9ca3af; }
.dcfg-salto-linea[b-95mgf441he] { flex: 1; height: 1px; background: #e5e7eb; }
.dcfg-salto-txt[b-95mgf441he] { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

.dcfg-salto-quitar[b-95mgf441he] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 1px;
                     display: inline-flex; align-items: center; border-radius: 6px; }
.dcfg-salto-quitar .material-symbols-rounded[b-95mgf441he] { font-size: 15px; }
.dcfg-salto-quitar:hover:not(:disabled)[b-95mgf441he] { background: #eef2ff; color: #2563eb; }
.dcfg-salto-quitar:disabled[b-95mgf441he] { opacity: .35; cursor: default; }
.dcfg-salto-quitar:focus-visible[b-95mgf441he] { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hueco de inserción: la barra azul aparece en el borde donde caerá la tarjeta arrastrada. */
.dcfg-celda.dnd-antes[b-95mgf441he]::before,
.dcfg-celda.dnd-despues[b-95mgf441he]::after {
    content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px;
    border-radius: 3px; background: #2563eb;
}
.dcfg-celda.dnd-antes[b-95mgf441he]::before { left: -7px; }
.dcfg-celda.dnd-despues[b-95mgf441he]::after { right: -7px; }

/* Tamaño: botón con texto, no un icono suelto — se lee lo que hará antes de pulsarlo. */
.dcfg-tamano[b-95mgf441he] { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e5e7eb; background: #fff;
               border-radius: 8px; padding: 2px 7px; cursor: pointer; color: #4b5563; font-size: .73rem;
               font-weight: 600; flex-shrink: 0; }
.dcfg-tamano .material-symbols-rounded[b-95mgf441he] { font-size: 16px; }
.dcfg-tamano:hover:not(:disabled)[b-95mgf441he] { border-color: #c7d2fe; background: #eef2ff; color: #2563eb; }
.dcfg-tamano:disabled[b-95mgf441he] { opacity: .4; cursor: default; }
/* «¼» / «½» / «Fila»: ancho fijo para que el botón no baile al ciclar (y quepa en una celda de ¼). */
.dcfg-tamano-txt[b-95mgf441he] { min-width: 26px; text-align: left; }

/* Y en una celda de ¼ ni con ancho fijo: entre el botón y la «×» no le dejaban al título ni una letra,
   que es como se veía «V…» donde ponía «Ventas del mes». Ahí el botón se queda en icono. No se pierde
   información: sigue diciendo su ancho por el title y por el aria-label, que ya los llevaba (FUN-63). */
.dcfg-celda[data-span="1"] .dcfg-tamano-txt[b-95mgf441he] { display: none; }

.dcfg-quitar[b-95mgf441he] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 2px;
               display: inline-flex; align-items: center; border-radius: 6px; }
.dcfg-quitar .material-symbols-rounded[b-95mgf441he] { font-size: 18px; }
.dcfg-quitar:hover:not(:disabled)[b-95mgf441he] { background: #fef2f2; color: #dc2626; }
.dcfg-quitar:disabled[b-95mgf441he] { opacity: .35; cursor: default; }

.dcfg-chip-add:focus-visible[b-95mgf441he], .dcfg-quitar:focus-visible[b-95mgf441he], .dcfg-tamano:focus-visible[b-95mgf441he], .dcfg-btn:focus-visible[b-95mgf441he] {
    outline: 2px solid #2563eb; outline-offset: 2px;
}

.dcfg-resumen[b-95mgf441he] { margin-top: 12px; font-size: .8rem; color: #6b7280; }

/* ---------------- Las dos ZONAS: resúmenes y lateral (DH10, D14) ----------------

   Las dos secciones se pintan con el mismo marcado (un RenderFragment común) y comparten estilos: lo
   único que cambia es su sitio en el layout —la tira, ancha y arriba; el carril, estrecho y a la derecha—
   y qué tipos admiten. Las tarjetas de zona son deliberadamente más SIMPLES que las de la matriz: sin
   botón de ancho (en zona no hay anchos) y sin separador de salto (no hay filas). */

.dcfg-zona[b-95mgf441he] { min-width: 0; transition: background-color .12s, border-color .12s; }

/* La tira se pinta en línea, como se verá; el carril, apilado hacia abajo, como se verá. */
.dcfg-zona-resumenes .dcfg-zona-lista[b-95mgf441he] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dcfg-zona-lateral .dcfg-zona-lista[b-95mgf441he] { display: flex; flex-direction: column; gap: 8px; }

.dcfg-zona-vacia[b-95mgf441he] { border: 2px dashed #d1d5db; border-radius: 10px; padding: 18px 12px; display: block; }

.dcfg-zona-celda[b-95mgf441he] { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: grab;
                   border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; padding: 7px 9px;
                   /* Mismo filo de color por tipo que la matriz: la zona se lee con el mismo código. */
                   border-left: 3px solid var(--dcfg-tipo-borde, #e5e7eb); }

.dcfg-zona-celda:hover[b-95mgf441he] { border-top-color: #c7d2fe; border-right-color: #c7d2fe; border-bottom-color: #c7d2fe; background: #f8faff; }
.dcfg-zona-celda:focus[b-95mgf441he] { outline: none; border-top-color: #2563eb; border-right-color: #2563eb; border-bottom-color: #2563eb;
                         box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.dcfg-zona-celda:focus-within[b-95mgf441he] { border-top-color: #c7d2fe; border-right-color: #c7d2fe; border-bottom-color: #c7d2fe; }
.dcfg-zona-celda.dcfg-arrastrando[b-95mgf441he] { opacity: .45; }

.dcfg-zona-titulo[b-95mgf441he] { flex: 1; min-width: 0; font-weight: 600; color: #111827; font-size: .84rem;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hueco de inserción dentro de la zona, con la misma barra azul que la matriz. En la tira el hueco va a
   los lados (se ordena en horizontal) y en el carril, arriba y abajo (se ordena en vertical): el gesto
   tiene que señalar en la dirección en la que de verdad se reordena. */
.dcfg-zona-celda[b-95mgf441he] { position: relative; }

.dcfg-zona-resumenes .dcfg-zona-celda.dnd-antes[b-95mgf441he]::before,
.dcfg-zona-resumenes .dcfg-zona-celda.dnd-despues[b-95mgf441he]::after {
    content: ""; position: absolute; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: #2563eb;
}
.dcfg-zona-resumenes .dcfg-zona-celda.dnd-antes[b-95mgf441he]::before { left: -6px; }
.dcfg-zona-resumenes .dcfg-zona-celda.dnd-despues[b-95mgf441he]::after { right: -6px; }

.dcfg-zona-lateral .dcfg-zona-celda.dnd-antes[b-95mgf441he]::before,
.dcfg-zona-lateral .dcfg-zona-celda.dnd-despues[b-95mgf441he]::after {
    content: ""; position: absolute; left: 3px; right: 3px; height: 4px; border-radius: 3px; background: #2563eb;
}
.dcfg-zona-lateral .dcfg-zona-celda.dnd-antes[b-95mgf441he]::before { top: -6px; }
.dcfg-zona-lateral .dcfg-zona-celda.dnd-despues[b-95mgf441he]::after { bottom: -6px; }

/* Feedback del arrastre sobre la zona (DH10): verde apagado = «cabe aquí», rojo = «esta zona NO admite
   este tipo». El rojo se pone ANTES de soltar, que es el momento en que sirve de algo: soltar y que no
   pase nada se lee como que la aplicación falla. Lo pinta dashboardDnd.js comparando el tipo del widget
   arrastrado con el data-dnd-admite de la zona. */
.dcfg-zona.dnd-admite[b-95mgf441he] { border-color: #a7f3d0; background: #f6fefb; }
.dcfg-zona.dnd-rechaza[b-95mgf441he] { border-color: #fca5a5; background: #fef2f2; cursor: not-allowed; }

.dcfg-zona.dnd-rechaza .dcfg-section-title[b-95mgf441he]::after {
    content: " — no admite este tipo"; color: #b91c1c; font-weight: 600; font-size: .8rem;
}

/* ---------------- Pie de acciones ---------------- */

/* ---------------- Cómo se calculan las cifras (FUN-V347, FUN-V351) ----------------
   Selectores segmentados con la misma anatomía que el de periodo de la home (azul del botón primario). */
.dcfg-calculo-fila[b-95mgf441he] { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 6px 16px; }
.dcfg-calculo-fila + .dcfg-calculo-fila[b-95mgf441he] { margin-top: 14px; }
.dcfg-calculo-fila > .dcfg-hint[b-95mgf441he] { grid-column: 2; margin-top: 0; }
.dcfg-calculo-rotulo[b-95mgf441he] { font-size: .87rem; font-weight: 600; color: #374151; }
.dcfg-segmentos[b-95mgf441he] { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1px solid #e5e7eb;
                  border-radius: 8px; overflow: hidden; }
.dcfg-segmento[b-95mgf441he] { border: 0; border-left: 1px solid #e5e7eb; background: #fff; color: #374151; padding: 7px 14px;
                 font-size: .85rem; font-weight: 600; cursor: pointer; }
.dcfg-segmento:first-child[b-95mgf441he] { border-left: 0; }
.dcfg-segmento:hover:not(:disabled):not(.activo)[b-95mgf441he] { background: #f9fafb; }
.dcfg-segmento.activo[b-95mgf441he] { background: #2563eb; color: #fff; }
.dcfg-segmento:disabled[b-95mgf441he] { opacity: .5; cursor: default; }
.dcfg-segmento:focus-visible[b-95mgf441he] { outline: 2px solid #2563eb; outline-offset: -2px; }

@media (max-width: 640px) {
    .dcfg-calculo-fila[b-95mgf441he] { grid-template-columns: 1fr; }
    .dcfg-calculo-fila > .dcfg-hint[b-95mgf441he] { grid-column: 1; }
}

.dcfg-pie[b-95mgf441he] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dcfg-pie-derecha[b-95mgf441he] { display: flex; gap: 8px; margin-left: auto; }

.dcfg-btn[b-95mgf441he] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff;
            color: #374151; border-radius: 8px; padding: 8px 14px; font-size: .87rem; font-weight: 600;
            cursor: pointer; }
.dcfg-btn .material-symbols-rounded[b-95mgf441he] { font-size: 18px; }
.dcfg-btn:hover:not(:disabled)[b-95mgf441he] { background: #f9fafb; border-color: #d1d5db; }
.dcfg-btn:disabled[b-95mgf441he] { opacity: .5; cursor: default; }

.dcfg-btn-primary[b-95mgf441he] { background: #2563eb; border-color: #2563eb; color: #fff; }
.dcfg-btn-primary:hover:not(:disabled)[b-95mgf441he] { background: #1d4ed8; border-color: #1d4ed8; }

.dcfg-btn-danger[b-95mgf441he] { background: #dc2626; border-color: #dc2626; color: #fff; }
.dcfg-btn-danger:hover:not(:disabled)[b-95mgf441he] { background: #b91c1c; border-color: #b91c1c; }

.dcfg-btn-suave[b-95mgf441he] { color: #6b7280; }

.dcfg-confirm[b-95mgf441he] { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
                border-color: #fecaca; background: #fef2f2; }
.dcfg-confirm-acciones[b-95mgf441he] { display: flex; gap: 8px; margin-left: auto; }

/* Con tres columnas el corte llega antes: la matriz necesita sitio para que su rejilla de 4 siga siendo
   creíble. Primero se va la lateral debajo (sigue habiendo paleta + matriz), y más abajo todo en pila. */
@media (max-width: 1280px) {
    .dcfg-layout[b-95mgf441he] { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
    .dcfg-zona-lateral[b-95mgf441he] { grid-column: 1 / -1; }
    .dcfg-zona-lateral .dcfg-zona-lista[b-95mgf441he] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 980px) {
    .dcfg-layout[b-95mgf441he] { grid-template-columns: minmax(0, 1fr); }
    .dcfg-paleta-lista[b-95mgf441he] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Móvil: todo en una columna y sin scroll horizontal de página. Las listas pasan a una sola columna
   (un mínimo de 200px no cabe con el padding de la tarjeta en un teléfono estrecho) y la matriz recorta
   lo que una celda de ¼ no pueda encoger, en vez de empujar la página hacia la derecha. */
@media (max-width: 600px) {
    .dcfg-card[b-95mgf441he] { padding: 12px; }
    .dcfg-paleta-lista[b-95mgf441he],
    .dcfg-zona-lateral .dcfg-zona-lista[b-95mgf441he] { grid-template-columns: minmax(0, 1fr); }
    .dcfg-zona-resumenes .dcfg-zona-lista[b-95mgf441he] { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
    .dcfg-matriz-card[b-95mgf441he] { overflow-x: clip; }
    .dcfg-confirm-acciones[b-95mgf441he], .dcfg-pie-derecha[b-95mgf441he] { flex-wrap: wrap; }
}

/* La matriz NO colapsa por su propio ancho, y esto es una corrección de criterio.

   Antes tenía sus propios cortes (4→2 a 560px de tarjeta, 4→1 a 380) «igual que la home», con el mismo
   umbral sobre su propio contenedor. No podía funcionar, y las cuentas lo dicen: la matriz comparte la
   fila con la paleta (260px) y con el carril (210px), así que SIEMPRE es mucho más estrecha que el área
   de contenido de la home. A viewport 1180 la home tiene 1078px y enseña sus 4 columnas, mientras la
   matriz se queda en 534 —por debajo de los 560— y enseñaba 2. La vista previa mentía justo en la
   pantalla más normal que hay, que es lo que estos cortes venían a evitar.
   (El 534 sale de 568 de tarjeta menos su padding de 16 y su borde de 1, a cada lado: la container
   query mide el CONTENIDO, y el umbral estaba escrito como si midiera el exterior.)

   Y no hay un par de números que lo arregle: la proporción entre la matriz y la home cambia con el
   viewport —tres columnas por encima de 1280, dos entre 980 y 1280, una por debajo—, así que cualquier
   umbral fijo acierta en un tramo y falla en los otros.

   Así que la matriz mantiene sus cuatro columnas siempre. Lo que enseña es el REPARTO en cuartos que el
   usuario está componiendo —que es lo que decide aquí, y es el mismo en toda pantalla—, no cómo se verá
   en un ancho concreto. Las tarjetas se estrechan, pero la rejilla sigue diciendo la verdad sobre lo
   único que esta pantalla decide. */

/* El texto del ancho («¼» / «½» / «Fila») NO se esconde al estrechar, aunque antes sí: es lo ÚNICO que
   dice a qué ancho está la tarjeta ahora, y con tres estados un icono solo no lo distingue. Cabe: son
   uno o cuatro caracteres. Lo que se recorta si hace falta es el título, que ya lleva ellipsis. */
/* _content/ErpPowergest/Presentation/Configuration/Menu/Components/ConcesionesModulosPanel.razor.rz.scp.css */
/* Panel de concesión de módulos por instalación (embebido en la ventana de menú, F5).
   Sin marco de página (lo aporta la ventana anfitriona): solo el contenido. */

.mc-empty[b-j9x31bjeln] { padding: 28px; text-align: center; color: #6b7280; }
.mc-denied[b-j9x31bjeln] { display: flex; align-items: center; gap: 14px; text-align: left; padding: 20px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.mc-denied .material-symbols-rounded[b-j9x31bjeln] { font-size: 32px; color: #9ca3af; }
.mc-denied-title[b-j9x31bjeln] { font-weight: 700; color: #374151; }

.mc-card[b-j9x31bjeln] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

.mc-main[b-j9x31bjeln] { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 780px) { .mc-main[b-j9x31bjeln] { grid-template-columns: 1fr; } }

/* Lista */
.mc-list-panel[b-j9x31bjeln] { padding: 14px; }
.mc-list-head[b-j9x31bjeln] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.mc-section-title[b-j9x31bjeln] { font-weight: 700; color: #374151; }
.mc-search[b-j9x31bjeln] { position: relative; }
.mc-search-icon[b-j9x31bjeln] { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; }
.mc-search-input[b-j9x31bjeln] { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; box-sizing: border-box; }

.mc-list[b-j9x31bjeln] { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.mc-card-item[b-j9x31bjeln] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.mc-card-item:hover[b-j9x31bjeln] { background: #f9fafb; }
.mc-card-item.active[b-j9x31bjeln] { border-color: #2563eb; background: #eff6ff; }
.mc-card-item-name[b-j9x31bjeln] { font-weight: 600; color: #111827; }
.mc-list-empty[b-j9x31bjeln] { padding: 16px; text-align: center; color: #9ca3af; font-size: .85rem; }

/* Badges */
.mc-badge[b-j9x31bjeln] { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mc-badge-activo[b-j9x31bjeln] { background: #dcfce7; color: #166534; }
.mc-badge-inactivo[b-j9x31bjeln] { background: #fee2e2; color: #991b1b; }

/* Panel de módulos */
.mc-modulos-panel[b-j9x31bjeln] { min-height: 200px; padding: 16px; }
.mc-modulos-head[b-j9x31bjeln] { margin-bottom: 16px; }
.mc-modulos-hint[b-j9x31bjeln] { font-size: .82rem; color: #6b7280; margin-top: 4px; }

.mc-modulos-list[b-j9x31bjeln] { display: flex; flex-direction: column; gap: 10px; }

.mc-modulo-row[b-j9x31bjeln] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #eef0f3; border-radius: 10px; }
.mc-modulo-info[b-j9x31bjeln] { display: flex; flex-direction: column; min-width: 0; }
.mc-modulo-nombre[b-j9x31bjeln] { font-weight: 600; color: #111827; }
.mc-modulo-clave[b-j9x31bjeln] { font-size: .72rem; color: #9ca3af; }

/* Toggle switch */
.mc-toggle[b-j9x31bjeln] { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.mc-toggle input[b-j9x31bjeln] { position: absolute; opacity: 0; width: 0; height: 0; }
.mc-toggle-track[b-j9x31bjeln] { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d1d5db; transition: background .18s; flex-shrink: 0; }
.mc-toggle-thumb[b-j9x31bjeln] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .18s; }
.mc-toggle-on .mc-toggle-track[b-j9x31bjeln] { background: #2563eb; }
.mc-toggle-on .mc-toggle-thumb[b-j9x31bjeln] { left: 21px; }
.mc-toggle-disabled[b-j9x31bjeln] { opacity: .55; cursor: default; pointer-events: none; }
.mc-toggle-label[b-j9x31bjeln] { font-size: .82rem; color: #6b7280; min-width: 72px; }
.mc-toggle-on .mc-toggle-label[b-j9x31bjeln] { color: #2563eb; font-weight: 600; }
/* _content/ErpPowergest/Presentation/Configuration/Menu/Components/EspaciosPanel.razor.rz.scp.css */
.ep-empty[b-s9383ejyge] { padding: 28px; text-align: center; color: #6b7280; }
.ep-empty-sm[b-s9383ejyge] { padding: 10px 0; color: #9ca3af; font-size: .85rem; }

.ep-secciones[b-s9383ejyge] { display: flex; flex-direction: column; gap: 22px; }
.ep-sub[b-s9383ejyge] { font-weight: 700; color: #374151; }
.ep-hint[b-s9383ejyge] { font-size: .82rem; color: #6b7280; margin: 3px 0 10px; }
/* El icono del botón citado dentro de una pista («pulsa ▢ en su tarjeta»): a la altura del texto. */
.ep-ico-inline[b-s9383ejyge] { font-size: 16px; vertical-align: -3px; }

.ep-lista[b-s9383ejyge] { display: flex; flex-direction: column; gap: 8px; }
.ep-card[b-s9383ejyge] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px;
           border-left: 4px solid var(--c-acento, #64748b); background: #fff; }
.ep-card-ico[b-s9383ejyge] { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
               background: var(--c-fondo, #f1f5f9); color: var(--c-acento, #64748b); flex-shrink: 0; }
.ep-card-ico .material-symbols-rounded[b-s9383ejyge] { font-size: 22px; }
.ep-card-textos[b-s9383ejyge] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ep-card-nombre[b-s9383ejyge] { font-weight: 600; color: #111827; }
.ep-card-desc[b-s9383ejyge] { font-size: .82rem; color: #6b7280; }
.ep-card-meta[b-s9383ejyge] { font-size: .75rem; color: #9ca3af; margin-top: 2px; }
.ep-card-acciones[b-s9383ejyge] { display: flex; gap: 4px; }

.ep-icon-btn[b-s9383ejyge] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 4px; display: inline-flex; align-items: center; border-radius: 6px; }
.ep-icon-btn .material-symbols-rounded[b-s9383ejyge] { font-size: 20px; }
.ep-icon-btn:hover:not(:disabled)[b-s9383ejyge] { background: #eef2ff; color: #2563eb; }
.ep-icon-btn:disabled[b-s9383ejyge] { opacity: .35; cursor: default; }

.ep-link[b-s9383ejyge] { border: 0; background: transparent; color: #2563eb; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .88rem; padding: 4px 0; }
.ep-link .material-symbols-rounded[b-s9383ejyge] { font-size: 18px; }

/* duplicar */
.ep-dup[b-s9383ejyge] { margin-top: 16px; padding: 12px 14px; border: 1px dashed #c7d2fe; border-radius: 10px; background: #f8faff; }
.ep-lista-toolbar[b-s9383ejyge] { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ep-dup-title[b-s9383ejyge] { font-weight: 600; color: #374151; margin-bottom: 8px; }
.ep-dup-row[b-s9383ejyge] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* editar */
.ep-edit-head[b-s9383ejyge] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ep-badge[b-s9383ejyge] { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e5e7eb; color: #374151; }
.ep-badge.empresa[b-s9383ejyge] { background: #e0e7ff; color: #3730a3; }
.ep-badge.mio[b-s9383ejyge] { background: #d1fae5; color: #065f46; }

.ep-form[b-s9383ejyge] { display: grid; grid-template-columns: 140px 1fr; gap: 10px 14px; align-items: start; }
.ep-lbl[b-s9383ejyge] { font-size: .85rem; font-weight: 600; color: #374151; padding-top: 8px; }
.ep-input[b-s9383ejyge] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; width: 100%; max-width: 420px; }
.ep-check[b-s9383ejyge] { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #374151; padding-top: 8px; }

.ep-colores[b-s9383ejyge] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ep-color[b-s9383ejyge] { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c-fondo); cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ep-color span[b-s9383ejyge] { width: 16px; height: 16px; border-radius: 50%; background: var(--c-acento); display: block; }
.ep-color.sel[b-s9383ejyge] { border-color: var(--c-acento); box-shadow: 0 0 0 2px #fff inset; }
.ep-color:disabled[b-s9383ejyge] { opacity: .5; cursor: default; }

/* N14: la casilla del color personalizado — un input color nativo escondido bajo el icono de paleta */
.ep-color-custom[b-s9383ejyge] { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.ep-color-custom input[type="color"][b-s9383ejyge] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ep-color-custom .material-symbols-rounded[b-s9383ejyge] { font-size: 16px; color: var(--c-acento); pointer-events: none; }

.ep-toolbar[b-s9383ejyge] { display: flex; align-items: center; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.ep-btn[b-s9383ejyge] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
          background: #fff; color: #374151; font-weight: 600; font-size: .88rem; cursor: pointer; }
.ep-btn .material-symbols-rounded[b-s9383ejyge] { font-size: 18px; }
.ep-btn.primary[b-s9383ejyge] { background: #2563eb; border-color: #2563eb; color: #fff; }
.ep-btn.danger[b-s9383ejyge] { color: #b91c1c; border-color: #fecaca; }
.ep-btn.ghost[b-s9383ejyge] { border-color: transparent; }
.ep-btn.sm[b-s9383ejyge] { padding: 5px 10px; font-size: .82rem; }
.ep-btn:disabled[b-s9383ejyge] { opacity: .5; cursor: default; }
.ep-confirm[b-s9383ejyge] { font-size: .85rem; color: #b91c1c; display: inline-flex; align-items: center; gap: 8px; }

.ep-arbol[b-s9383ejyge] { border-top: 1px solid #eef0f3; padding-top: 14px; }
.ep-dup-row .ep-campo[b-s9383ejyge] { flex: 1 1 220px; min-width: 0; }
/* _content/ErpPowergest/Presentation/Configuration/Menu/Components/IconPicker.razor.rz.scp.css */
.ipk[b-1mve9ure1n] { display: flex; flex-direction: column; gap: 8px; }
.ipk.disabled[b-1mve9ure1n] { opacity: .55; pointer-events: none; }

.ipk-grid[b-1mve9ure1n] { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; max-width: 520px; }
@media (max-width: 640px) { .ipk-grid[b-1mve9ure1n] { grid-template-columns: repeat(7, 1fr); } }

.ipk-chip[b-1mve9ure1n] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
            border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; cursor: pointer; color: #4b5563; }
.ipk-chip .material-symbols-rounded[b-1mve9ure1n] { font-size: 19px; }
.ipk-chip:hover:not(:disabled)[b-1mve9ure1n] { background: #eef2ff; color: #2563eb; border-color: #c7d2fe; }
.ipk-chip.sel[b-1mve9ure1n] { background: #2563eb; border-color: #2563eb; color: #fff; }
.ipk-chip:disabled[b-1mve9ure1n] { cursor: default; }

.ipk-adv[b-1mve9ure1n] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ipk-adv-lbl[b-1mve9ure1n] { font-size: .78rem; color: #6b7280; }
.ipk-input[b-1mve9ure1n] { padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 7px; font-size: .82rem; min-width: 150px; }
.ipk-link[b-1mve9ure1n] { font-size: .76rem; color: #2563eb; text-decoration: none; }
.ipk-link:hover[b-1mve9ure1n] { text-decoration: underline; }
/* _content/ErpPowergest/Presentation/Configuration/Menu/Components/MenuEditorPanel.razor.rz.scp.css */
.me-empty[b-sfhwhvdivb] { padding: 28px; text-align: center; color: #6b7280; }

.me-ambito[b-sfhwhvdivb] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.me-ambito-lbl[b-sfhwhvdivb] { font-size: .82rem; color: #6b7280; font-weight: 600; }
.me-seg[b-sfhwhvdivb] { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.me-seg-btn[b-sfhwhvdivb] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; background: #fff;
              color: #6b7280; font-size: .82rem; font-weight: 600; cursor: pointer; }
.me-seg-btn .material-symbols-rounded[b-sfhwhvdivb] { font-size: 17px; }
.me-seg-btn + .me-seg-btn[b-sfhwhvdivb] { border-left: 1px solid #e5e7eb; }
.me-seg-btn.on[b-sfhwhvdivb] { background: #2563eb; color: #fff; }
.me-seg-btn:disabled[b-sfhwhvdivb] { opacity: .5; cursor: default; }

.me-toolbar[b-sfhwhvdivb] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.me-dirty[b-sfhwhvdivb] { color: #b45309; font-size: .8rem; font-weight: 600; }

.me-btn[b-sfhwhvdivb] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e5e7eb;
          background: #fff; color: #374151; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.me-btn .material-symbols-rounded[b-sfhwhvdivb] { font-size: 18px; }
.me-btn:hover:not(:disabled)[b-sfhwhvdivb] { background: #f9fafb; }
.me-btn.primary[b-sfhwhvdivb] { background: #2563eb; border-color: #2563eb; color: #fff; }
.me-btn.primary:hover:not(:disabled)[b-sfhwhvdivb] { background: #1d4ed8; }
.me-btn.sm[b-sfhwhvdivb] { padding: 5px 10px; font-size: .8rem; }
.me-btn.ghost[b-sfhwhvdivb] { background: transparent; border-color: transparent; color: #6b7280; }
.me-btn:disabled[b-sfhwhvdivb] { opacity: .45; cursor: default; }

.me-grupos[b-sfhwhvdivb] { display: flex; flex-direction: column; gap: 10px; }
.me-grupo[b-sfhwhvdivb] { border: 1px solid #eef0f3; border-radius: 10px; overflow: hidden; }
.me-grupo-head[b-sfhwhvdivb] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f9fafb; }
.me-grupo-ico[b-sfhwhvdivb] { font-size: 20px; color: #4b5563; }
.me-grupo-nombre[b-sfhwhvdivb] { font-weight: 600; color: #111827; flex: 1; }

.me-badge[b-sfhwhvdivb] { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
            padding: 2px 6px; border-radius: 6px; background: #eef2ff; color: #4338ca; }
.me-badge.dyn[b-sfhwhvdivb] { background: #ecfdf5; color: #047857; }

.me-reorder[b-sfhwhvdivb] { display: flex; flex-direction: column; }
.me-icon-btn[b-sfhwhvdivb] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 1px;
               display: inline-flex; align-items: center; border-radius: 6px; }
.me-icon-btn .material-symbols-rounded[b-sfhwhvdivb] { font-size: 18px; }
.me-icon-btn:hover:not(:disabled)[b-sfhwhvdivb] { background: #eef2ff; color: #2563eb; }
.me-icon-btn:disabled[b-sfhwhvdivb] { opacity: .35; cursor: default; }

.me-items[b-sfhwhvdivb] { display: flex; flex-direction: column; }
.me-item[b-sfhwhvdivb] { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 16px; border-top: 1px solid #f3f4f6; }
.me-item-ico[b-sfhwhvdivb] { font-size: 18px; color: #9ca3af; }
.me-item-nombre[b-sfhwhvdivb] { flex: 1; color: #374151; font-size: .9rem; }
.me-item-vacio[b-sfhwhvdivb] { padding: 8px 16px; color: #9ca3af; font-size: .82rem; font-style: italic; }

.me-move[b-sfhwhvdivb] { font-size: .78rem; border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 6px; color: #6b7280; background: #fff; }

.me-grupo-foot[b-sfhwhvdivb] { padding: 6px 12px 10px; border-top: 1px solid #f3f4f6; }
.me-link[b-sfhwhvdivb] { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #2563eb;
           font-size: .82rem; font-weight: 600; cursor: pointer; padding: 4px 0; }
.me-link .material-symbols-rounded[b-sfhwhvdivb] { font-size: 18px; }
.me-link:disabled[b-sfhwhvdivb] { opacity: .45; cursor: default; }

.me-add[b-sfhwhvdivb] { margin-top: 8px; padding: 10px; background: #f9fafb; border: 1px solid #eef0f3; border-radius: 8px; }
.me-add-row[b-sfhwhvdivb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.me-add-sep[b-sfhwhvdivb] { margin: 10px 0 8px; color: #9ca3af; font-size: .78rem; text-align: center; }
.me-add-grid[b-sfhwhvdivb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.me-lbl[b-sfhwhvdivb] { font-size: .82rem; color: #374151; font-weight: 600; }
.me-input[b-sfhwhvdivb] { padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 7px; font-size: .85rem; min-width: 150px; }
.me-input.wide[b-sfhwhvdivb] { min-width: 280px; flex: 1; }

.me-ico-field[b-sfhwhvdivb] { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.me-ico-field .me-lbl[b-sfhwhvdivb] { padding-top: 6px; }
.me-newgrp-form[b-sfhwhvdivb] { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #f9fafb;
                  border: 1px solid #eef0f3; border-radius: 8px; max-width: 560px; }

.me-add-help[b-sfhwhvdivb] { margin-top: 8px; font-size: .76rem; color: #6b7280; }
.me-add-help code[b-sfhwhvdivb] { background: #eef2ff; color: #4338ca; padding: 1px 5px; border-radius: 5px; font-size: .92em; }

.me-nuevo-grupo[b-sfhwhvdivb] { margin-top: 12px; }

/* N13: árbol del catálogo con búsqueda y casillas */
.me-buscar-ico[b-sfhwhvdivb] { font-size: 18px; color: #9ca3af; }
.me-arbol-cat[b-sfhwhvdivb] { margin: 8px 0; max-height: 320px; overflow-y: auto; border: 1px solid #eef0f3;
                border-radius: 8px; background: #fff; }
.me-arbol-grupo + .me-arbol-grupo[b-sfhwhvdivb] { border-top: 1px solid #f3f4f6; }
.me-arbol-cab[b-sfhwhvdivb] { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.me-arbol-cab input[type="checkbox"][b-sfhwhvdivb] { accent-color: #2563eb; }
.me-arbol-toggle[b-sfhwhvdivb] { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: transparent;
                   cursor: pointer; padding: 2px 0; color: #111827; }
.me-arbol-toggle .material-symbols-rounded[b-sfhwhvdivb] { font-size: 18px; color: #9ca3af; }
.me-arbol-origen[b-sfhwhvdivb] { font-weight: 600; font-size: .85rem; }
.me-arbol-n[b-sfhwhvdivb] { margin-left: auto; font-size: .72rem; color: #6b7280; background: #f3f4f6;
              border-radius: 999px; padding: 1px 8px; }
.me-arbol-hoja[b-sfhwhvdivb] { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 34px; cursor: pointer;
                 font-size: .85rem; color: #374151; }
.me-arbol-hoja:hover[b-sfhwhvdivb] { background: #f9fafb; }
.me-arbol-hoja input[type="checkbox"][b-sfhwhvdivb] { accent-color: #2563eb; }
.me-arbol-hoja .material-symbols-rounded[b-sfhwhvdivb] { font-size: 17px; color: #9ca3af; }

.me-avanzado[b-sfhwhvdivb] { margin-top: 10px; border-top: 1px dashed #e5e7eb; padding-top: 8px; }
.me-avanzado summary[b-sfhwhvdivb] { cursor: pointer; font-size: .8rem; font-weight: 600; color: #6b7280; }
.me-avanzado[open] summary[b-sfhwhvdivb] { margin-bottom: 8px; }
.me-add-grid > .me-campo-wide[b-sfhwhvdivb] { flex: 1 1 280px; }
.me-campo-wide .me-input[b-sfhwhvdivb] { width: 100%; box-sizing: border-box; }
/* _content/ErpPowergest/Presentation/Configuration/Menu/Pages/MenuConfiguracionPage.razor.rz.scp.css */
/* Sin tope de ancho (las cinco pestañas ocupan todo el ancho disponible) y sin margen propio, como Clientes:
   el borde lo pone .main-body (16px). */
.mn-page[b-x5h2ujgv28] { padding: 0; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
/* Y todo el alto: lo último (el panel de la pestaña) se queda con el que sobra. */
.mn-page > :last-child[b-x5h2ujgv28] { flex: 1 1 auto; }

.mn-header[b-x5h2ujgv28] { margin-bottom: 9px; }
.mn-title[b-x5h2ujgv28] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.mn-subtitle[b-x5h2ujgv28] { color: #6b7280; font-size: .85rem; margin-top: 2px; }

/* Tabs */
.mn-tabs[b-x5h2ujgv28] { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.mn-tab[b-x5h2ujgv28] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; background: transparent;
          color: #6b7280; font-size: .9rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.mn-tab .material-symbols-rounded[b-x5h2ujgv28] { font-size: 18px; }
.mn-tab:hover[b-x5h2ujgv28] { color: #374151; }
.mn-tab.active[b-x5h2ujgv28] { color: #2563eb; border-bottom-color: #2563eb; }

/* Las pestañas, con el segmento de Actividad (.act-segment / .act-segment-btn): fondo gris redondeado y la activa en
   blanco. Solo dentro de la barra: el «Reintentar» que reutiliza .mn-tab se queda como estaba. */
.mn-tabs[b-x5h2ujgv28] {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 3px; max-width: 100%;
    padding: 3px; margin-bottom: 14px; border: 1px solid #e3eaf3; border-radius: 12px; background: #f1f5f9;
    overflow-x: auto; scrollbar-width: none;
}
.mn-tabs[b-x5h2ujgv28]::-webkit-scrollbar { display: none; }
.mn-tabs .mn-tab[b-x5h2ujgv28] {
    flex: 0 0 auto; height: 32px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent;
    color: #64748b; font-size: 13px; font-weight: 750; line-height: 1; white-space: nowrap;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.mn-tabs .mn-tab:hover[b-x5h2ujgv28] { color: #334155; }
.mn-tabs .mn-tab.active[b-x5h2ujgv28] { background: #ffffff; color: #005ab7; font-weight: 850; box-shadow: 0 2px 6px rgba(15, 23, 42, .10); }
.mn-tabs .mn-tab:focus-visible[b-x5h2ujgv28] { outline: 2px solid #abc7ff; outline-offset: 2px; }

.mn-card[b-x5h2ujgv28] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 16px; }
.mn-card-plano[b-x5h2ujgv28] { padding: 14px; }
.mn-empty[b-x5h2ujgv28] { padding: 28px; text-align: center; color: #6b7280; }

.mn-section-head[b-x5h2ujgv28] { margin-bottom: 14px; }
.mn-section-title[b-x5h2ujgv28] { font-weight: 700; color: #374151; }
.mn-hint[b-x5h2ujgv28] { font-size: .82rem; color: #6b7280; margin-top: 4px; }

/* Mi menú: grupos e items */
.mn-grupos[b-x5h2ujgv28] { display: flex; flex-direction: column; gap: 10px; }
.mn-grupo[b-x5h2ujgv28] { border: 1px solid #eef0f3; border-radius: 10px; overflow: hidden; }
.mn-grupo.oculto[b-x5h2ujgv28] { opacity: .6; }

.mn-grupo-head[b-x5h2ujgv28] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f9fafb; }
.mn-reorder[b-x5h2ujgv28] { display: flex; flex-direction: column; }
.mn-grupo-ico[b-x5h2ujgv28] { font-size: 20px; color: #4b5563; }
.mn-grupo-nombre[b-x5h2ujgv28] { font-weight: 600; color: #111827; flex: 1; }

.mn-items[b-x5h2ujgv28] { display: flex; flex-direction: column; }
.mn-item[b-x5h2ujgv28] { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 40px; border-top: 1px solid #f3f4f6; }
.mn-item.oculto[b-x5h2ujgv28] { opacity: .55; }
.mn-item-ico[b-x5h2ujgv28] { font-size: 18px; color: #9ca3af; }
.mn-item-nombre[b-x5h2ujgv28] { flex: 1; color: #374151; font-size: .9rem; }

/* Botones icono (reorder, ojo, estrella) */
.mn-icon-btn[b-x5h2ujgv28], .mn-eye[b-x5h2ujgv28], .mn-star[b-x5h2ujgv28] { border: 0; background: transparent; cursor: pointer; color: #9ca3af; padding: 2px;
                                  display: inline-flex; align-items: center; border-radius: 6px; }
.mn-icon-btn .material-symbols-rounded[b-x5h2ujgv28] { font-size: 18px; }
.mn-icon-btn:hover:not(:disabled)[b-x5h2ujgv28], .mn-eye:hover[b-x5h2ujgv28], .mn-star:hover[b-x5h2ujgv28] { background: #eef2ff; color: #2563eb; }
.mn-icon-btn:disabled[b-x5h2ujgv28] { opacity: .35; cursor: default; }
.mn-eye .material-symbols-rounded[b-x5h2ujgv28], .mn-star .material-symbols-rounded[b-x5h2ujgv28] { font-size: 20px; }
.mn-eye.off[b-x5h2ujgv28] { color: #9ca3af; }
.mn-star.on[b-x5h2ujgv28] { color: #f59e0b; }
.mn-star.on:hover[b-x5h2ujgv28] { color: #d97706; }

/* Por perfil */
.mn-rol-bar[b-x5h2ujgv28] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mn-rol-label[b-x5h2ujgv28] { font-weight: 600; color: #374151; font-size: .88rem; }
.mn-rol-select[b-x5h2ujgv28] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; min-width: 180px; }

.mn-modulos[b-x5h2ujgv28] { display: flex; flex-direction: column; gap: 10px; }
.mn-modulo[b-x5h2ujgv28] { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #eef0f3; border-radius: 10px; }
.mn-modulo-ico[b-x5h2ujgv28] { font-size: 20px; color: #4b5563; }
.mn-modulo-nombre[b-x5h2ujgv28] { font-weight: 600; color: #111827; flex: 1; }
.mn-modulo-sub[b-x5h2ujgv28] { display: block; font-weight: 400; font-size: .78rem; color: #6b7280; }

/* Espacios por perfil (N10) */
.mn-espacios-head[b-x5h2ujgv28] { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef0f3; }
.mn-modulo-forzado[b-x5h2ujgv28] { background: #fafafa; }
.mn-modulo-forzado.inactivo[b-x5h2ujgv28] { opacity: .6; }

/* Toggle switch (perfil) */
.mn-toggle[b-x5h2ujgv28] { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.mn-toggle input[b-x5h2ujgv28] { position: absolute; opacity: 0; width: 0; height: 0; }
.mn-toggle-track[b-x5h2ujgv28] { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d1d5db; transition: background .18s; flex-shrink: 0; }
.mn-toggle-thumb[b-x5h2ujgv28] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .18s; }
.mn-toggle.on .mn-toggle-track[b-x5h2ujgv28] { background: #2563eb; }
.mn-toggle.on .mn-toggle-thumb[b-x5h2ujgv28] { left: 21px; }
.mn-toggle.disabled[b-x5h2ujgv28] { opacity: .55; cursor: default; pointer-events: none; }
.mn-toggle-label[b-x5h2ujgv28] { font-size: .82rem; color: #6b7280; min-width: 60px; }
.mn-toggle.on .mn-toggle-label[b-x5h2ujgv28] { color: #2563eb; font-weight: 600; }
/* _content/ErpPowergest/Presentation/Configuration/Nombres/NombresPage.razor.rz.scp.css */
/* Nombres de profesionales y recursos (RV0): el estilo de las pantallas nuevas (copias, marketing): cabecera con
   icono, tarjetas con radio 12 y la lista de clases de recurso con su propio desplazamiento, para que la página no
   crezca sin fin. */

.nom-page[b-reb80156vn] {
    --nom-acento: #2563eb;
    --nom-acento-suave: #eff6ff;
    --nom-acento-borde: #bfdbfe;
    --nom-ambar: #b45309;
    --nom-ambar-suave: #fffbeb;
    --nom-ambar-borde: #fde68a;
    --nom-rojo: #b91c1c;
    --nom-borde: var(--borde, #e5e7eb);
    --nom-gris: var(--texto-secundario, #6b7280);
    --nom-fondo: var(--fondo-tarjeta, #fff);

    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
}

/* ── Cabecera ───────────────────────────────────────────────────────────────────────────────────── */

.nom-cabecera[b-reb80156vn] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nom-cabecera-icono[b-reb80156vn] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: var(--nom-acento);
    font-size: 26px;
}

.nom-titulo[b-reb80156vn] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.nom-lema[b-reb80156vn] {
    margin: 2px 0 0;
    font-size: 0.88rem;
    color: var(--nom-gris);
}

.nom-aviso[b-reb80156vn] {
    color: var(--nom-gris);
}

.nom-error[b-reb80156vn] {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: var(--nom-rojo);
}

.nom-solo-lectura[b-reb80156vn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--nom-ambar-borde);
    border-radius: 12px;
    background: var(--nom-ambar-suave);
    color: var(--nom-ambar);
    font-size: 0.9rem;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────────────────────────────── */

.nom-tarjeta[b-reb80156vn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--nom-borde);
    border-radius: 12px;
    background: var(--nom-fondo);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.nom-tarjeta-cabecera[b-reb80156vn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* RV2: la plantilla de sector, un desplegable y su botón en una fila. */
.nom-sector-fila[b-reb80156vn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.nom-sector-campo[b-reb80156vn] {
    min-width: 260px;
}

.nom-sector-campo .nom-select[b-reb80156vn] {
    width: 100%;
}

.nom-tarjeta-titulo[b-reb80156vn] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.nom-tarjeta-nota[b-reb80156vn] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--nom-gris);
}

/* ── Tablas ─────────────────────────────────────────────────────────────────────────────────────── */

.nom-tabla-wrap[b-reb80156vn] {
    overflow-x: auto;
}

/* Las clases de recurso pueden ser muchas: se desplazan dentro de su tarjeta. */
.nom-tabla-wrap--larga[b-reb80156vn] {
    max-height: 420px;
    overflow-y: auto;
}

.nom-tabla[b-reb80156vn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.nom-tabla th[b-reb80156vn] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--nom-borde);
    background: var(--nom-fondo);
    color: var(--nom-gris);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.nom-tabla td[b-reb80156vn] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--nom-borde);
    vertical-align: middle;
}

.nom-tabla tbody tr:last-child td[b-reb80156vn] {
    border-bottom: none;
}

.nom-fila-propia td[b-reb80156vn] {
    background: var(--nom-acento-suave);
}

.nom-fila-inactiva td[b-reb80156vn] {
    opacity: 0.6;
}

.nom-col-que[b-reb80156vn] {
    min-width: 140px;
}

.nom-que[b-reb80156vn] {
    display: block;
    font-weight: 600;
}

.nom-fabrica[b-reb80156vn] {
    display: block;
    font-size: 0.78rem;
    color: var(--nom-gris);
}

.nom-col-casilla[b-reb80156vn] {
    width: 70px;
    text-align: center;
}

.nom-col-accion[b-reb80156vn] {
    width: 120px;
    text-align: right;
}

.nom-input[b-reb80156vn] {
    width: 100%;
    min-width: 120px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--nom-borde);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

/* El desplegable toma su aspecto de desplegables.css: aquí solo el alto, el ancho, el borde y el radio. */
.nom-select[b-reb80156vn] {
    width: 100%;
    min-width: 120px;
    height: 32px;
    border: 1px solid var(--nom-borde);
    border-radius: 8px;
}

.nom-input:focus[b-reb80156vn],
.nom-select:focus[b-reb80156vn] {
    outline: none;
    border-color: var(--nom-acento);
    box-shadow: 0 0 0 3px var(--nom-acento-suave);
}

.nom-input:disabled[b-reb80156vn] {
    background: #f9fafb;
    color: var(--nom-gris);
}

.nom-vacio[b-reb80156vn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--nom-borde);
    border-radius: 10px;
    color: var(--nom-gris);
    font-size: 0.9rem;
}

/* ── Botones ────────────────────────────────────────────────────────────────────────────────────── */

.nom-boton[b-reb80156vn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--nom-acento-borde);
    border-radius: 8px;
    background: var(--nom-acento-suave);
    color: var(--nom-acento);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.nom-boton .material-symbols-rounded[b-reb80156vn] {
    font-size: 18px;
}

.nom-boton:disabled[b-reb80156vn] {
    opacity: 0.5;
    cursor: default;
}

.nom-boton--primario[b-reb80156vn] {
    border-color: var(--nom-acento);
    background: var(--nom-acento);
    color: #fff;
}

.nom-boton--secundario[b-reb80156vn] {
    border-color: var(--nom-borde);
    background: #fff;
    color: inherit;
}

.nom-boton-enlace[b-reb80156vn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--nom-acento);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.nom-boton-enlace .material-symbols-rounded[b-reb80156vn] {
    font-size: 18px;
}

.nom-boton-enlace:hover[b-reb80156vn] {
    background: var(--nom-acento-suave);
}

.nom-acciones[b-reb80156vn] {
    display: inline-flex;
    gap: 2px;
}

.nom-boton-icono[b-reb80156vn] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--nom-gris);
    cursor: pointer;
}

.nom-boton-icono .material-symbols-rounded[b-reb80156vn] {
    font-size: 18px;
}

.nom-boton-icono:hover[b-reb80156vn] {
    background: var(--nom-acento-suave);
    color: var(--nom-acento);
}

.nom-boton-icono--peligro:hover[b-reb80156vn] {
    background: #fef2f2;
    color: var(--nom-rojo);
}

/* ── Pie ────────────────────────────────────────────────────────────────────────────────────────── */

.nom-pie[b-reb80156vn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.nom-pie-aviso[b-reb80156vn] {
    margin-right: auto;
    color: var(--nom-ambar);
    font-size: 0.88rem;
}
/* _content/ErpPowergest/Presentation/Configuration/NotificacionesSistema/Pages/DisenadorHtmlNotificacion.razor.rz.scp.css */
/* Diseñador HTML de una notificación: ocupa toda la ventana flotante; vista previa a la izquierda, código a la derecha. */

.dh[b-dftl7iyjp6] {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px 20px;
    color: #1f2933;
}

/* La «×» de la ventana flotante está arriba a la derecha: los botones le dejan sitio. */
.dh-cabecera[b-dftl7iyjp6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 52px;
}

.dh-cabecera-texto[b-dftl7iyjp6] { min-width: 0; }
.dh-titulo[b-dftl7iyjp6] { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.35rem; font-weight: 700; }
.dh-titulo .material-symbols-rounded[b-dftl7iyjp6] { color: #2f6fed; }
.dh-subtitulo[b-dftl7iyjp6] { color: #61707d; font-size: .9rem; margin-top: 2px; }

.dh-acciones[b-dftl7iyjp6] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.dh-btn[b-dftl7iyjp6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dde5ee;
    border-radius: 10px;
    background: #fff;
    color: #1f2933;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.dh-btn:hover:not(:disabled)[b-dftl7iyjp6] { background: #f3f6fa; }
.dh-btn:disabled[b-dftl7iyjp6] { opacity: .5; cursor: default; }
.dh-btn .material-symbols-rounded[b-dftl7iyjp6] { font-size: 18px; }
.dh-btn-principal[b-dftl7iyjp6] { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.dh-btn-principal:hover:not(:disabled)[b-dftl7iyjp6] { background: #245cd0; }

.dh-aviso[b-dftl7iyjp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff7e6;
    border: 1px solid #fde4b0;
    color: #8a5300;
    font-size: .86rem;
}

.dh-aviso .material-symbols-rounded[b-dftl7iyjp6] { font-size: 18px; }

.dh-lados[b-dftl7iyjp6] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.dh-panel[b-dftl7iyjp6] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.dh-panel-cabecera[b-dftl7iyjp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.dh-panel-titulo[b-dftl7iyjp6] { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #61707d; }
.dh-contador[b-dftl7iyjp6] { font-size: .78rem; color: #94a3b8; }

.dh-anchos[b-dftl7iyjp6] { display: inline-flex; border: 1px solid #dde5ee; border-radius: 8px; overflow: hidden; }
.dh-ancho[b-dftl7iyjp6] { border: 0; background: #fff; padding: 4px 10px; font-size: .78rem; font-weight: 600; color: #475569; cursor: pointer; }
.dh-ancho + .dh-ancho[b-dftl7iyjp6] { border-left: 1px solid #dde5ee; }
.dh-ancho.activo[b-dftl7iyjp6] { background: #2f6fed; color: #fff; }

/* El lienzo de la vista previa: fondo gris claro, el diseño encima. */
.dh-lienzo[b-dftl7iyjp6] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 14px;
    background: #f1f4f8;
    overflow: auto;
}

.dh-iframe[b-dftl7iyjp6] { width: 100%; height: 160px; align-self: flex-start; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
/* El ancho de un aviso en el panel de la campana. */
.dh-iframe-estrecho[b-dftl7iyjp6] { width: 340px; max-width: 100%; }

.dh-vacio[b-dftl7iyjp6] { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #94a3b8; font-size: .9rem; text-align: center; max-width: 280px; }
.dh-vacio .material-symbols-rounded[b-dftl7iyjp6] { font-size: 40px; }

/* El código: fondo oscuro de editor, letra monoespaciada. */
.dh-area[b-dftl7iyjp6] {
    flex: 1 1 auto;
    min-height: 320px;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    border: 0;
    outline: none;
    padding: 14px 16px;
    background: #0f172a;
    color: #e2e8f0;
    caret-color: #93c5fd;
    font-family: Consolas, 'Cascadia Code', 'Courier New', monospace;
    font-size: 13.5px;
    line-height: 1.55;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}

.dh-area[b-dftl7iyjp6]::placeholder { color: #64748b; }

@media (max-width: 900px) {
    .dh-cabecera[b-dftl7iyjp6] { flex-direction: column; padding-right: 48px; }
    .dh-lados[b-dftl7iyjp6] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(320px, 1fr); }
}
/* _content/ErpPowergest/Presentation/Configuration/NotificacionesSistema/Pages/NotificacionesSistemaPage.razor.rz.scp.css */
/* «Notificaciones del sistema»: mismo vocabulario visual que Tareas (op-*). Se repite aquí porque el CSS de
   Blazor tiene ámbito por componente. A todo el ancho y todo el alto. */

.op-page[b-w0us0awmhj] { padding: 0; color: #1f2933; min-height: 100%; display: flex; flex-direction: column; --ns-alto: 2.6rem; }

/* Sin flex-wrap: la barra de comandos se repliega sola al menú «···» cuando no cabe. */
.op-header[b-w0us0awmhj] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; margin-bottom: 9px; }
.op-header-text[b-w0us0awmhj] { min-width: 0; }
.op-title[b-w0us0awmhj] { font-size: 1.6rem; font-weight: 700; margin: 0; }
.op-subtitle[b-w0us0awmhj] { color: #61707d; font-size: .9rem; margin-top: .15rem; }
.op-header[b-w0us0awmhj]  .ns-cmdbar { flex: 0 1 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.op-card[b-w0us0awmhj] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); min-width: 0; }


/* La lista: una sola tabla que llena la pantalla. */
/* Llena todo el alto: flex-columna, que es lo que espera .tp-panel para repartirse el alto; el paginador queda abajo. */
.ns-tabla[b-w0us0awmhj] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ns-tabla[b-w0us0awmhj]  .tp-panel { min-height: auto; }
.ns-tabla[b-w0us0awmhj]  .ns-col-mensaje { color: #475569; white-space: normal; }
.ns-tabla[b-w0us0awmhj]  .ns-col-fecha { white-space: nowrap; }
/* Los nombres se parten por palabras, nunca por letras. */
.ns-tabla[b-w0us0awmhj]  .ns-col-nombre { word-break: normal; overflow-wrap: normal; }

/* Tipo: el mismo color que su aviso en la campana. Los pinta TablaPaginada (componente hijo): ::deep. */
.ns-tabla[b-w0us0awmhj]  .ns-chip { display: inline-block; white-space: nowrap; word-break: normal; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-tipo-info { background: #e8f0fe; color: #1d4ed8; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-tipo-correcta { background: #e6f6ec; color: #15803d; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-tipo-aviso { background: #fff4e0; color: #b45309; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-tipo-critica { background: #fdecec; color: #b91c1c; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-estado-activa { background: #e6f6ec; color: #15803d; }
.ns-tabla[b-w0us0awmhj]  .ns-chip.ns-estado-caducada { background: #eef1f5; color: #64748b; }

.ns-tabla[b-w0us0awmhj]  .ns-retirar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
.ns-tabla[b-w0us0awmhj]  .ns-retirar:hover { background: #fdecec; color: #b91c1c; }
.ns-tabla[b-w0us0awmhj]  .ns-retirar .material-symbols-rounded { font-size: 20px; }

/* «Nueva notificación», en el ModalMaestro: campos en columna con su piel (mm-*); aquí solo lo propio. */
.ns-form[b-w0us0awmhj] { display: flex; flex-direction: column; gap: 14px; }
/* El mensaje es un textarea: la piel mm-input le da el alto de una línea. */
.ns-form textarea.mm-input[b-w0us0awmhj] { height: auto; min-height: 76px; padding: 10px 14px; resize: vertical; font-family: inherit; line-height: 1.4; }
.ns-muestra[b-w0us0awmhj] { margin-top: 2px; }
.ns-imagen[b-w0us0awmhj] { display: flex; align-items: center; gap: 12px; }
.ns-imagen-ayuda[b-w0us0awmhj] { font-size: 13px; color: #64748b; }
.ns-html[b-w0us0awmhj] { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-btn-html[b-w0us0awmhj] { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid #dde5ee; border-radius: 12px; background: #fff; color: #1f2933; font-size: 14px; font-weight: 600; cursor: pointer; }
.ns-btn-html:hover[b-w0us0awmhj] { background: #f3f6fa; }
.ns-btn-html .material-symbols-rounded[b-w0us0awmhj] { font-size: 18px; color: #2f6fed; }
.ns-btn-quitar .material-symbols-rounded[b-w0us0awmhj] { color: #b91c1c; }
.ns-muestra-html[b-w0us0awmhj] { display: block; width: 100%; height: 120px; margin-top: .5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.ns-tabla[b-w0us0awmhj]  .ns-extras { display: inline-flex; align-items: center; gap: 6px; }
.ns-tabla[b-w0us0awmhj]  .ns-con-html { color: #2f6fed; font-size: 22px; vertical-align: middle; }
.ns-muestra-imagen[b-w0us0awmhj] { display: block; max-width: 100%; max-height: 90px; margin-top: .5rem; border-radius: 8px; border: 1px solid #e5e7eb; object-fit: cover; }
.ns-tabla[b-w0us0awmhj]  .ns-miniatura { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; vertical-align: middle; }
.ns-muestra-etiqueta[b-w0us0awmhj] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 600; margin-bottom: .45rem; }
.ns-muestra-aviso[b-w0us0awmhj] { display: flex; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid #e5e7eb; background: #fbfcfe; }
.ns-muestra-ico[b-w0us0awmhj] { font-size: 22px; flex: 0 0 auto; align-self: flex-start; border-radius: 10px; padding: 6px; }
.ns-muestra-aviso.ns-tipo-info .ns-muestra-ico[b-w0us0awmhj] { background: #e8f0fe; color: #1d4ed8; }
.ns-muestra-aviso.ns-tipo-correcta .ns-muestra-ico[b-w0us0awmhj] { background: #e6f6ec; color: #15803d; }
.ns-muestra-aviso.ns-tipo-aviso .ns-muestra-ico[b-w0us0awmhj] { background: #fff4e0; color: #b45309; }
.ns-muestra-aviso.ns-tipo-critica .ns-muestra-ico[b-w0us0awmhj] { background: #fdecec; color: #b91c1c; }
.ns-muestra-texto[b-w0us0awmhj] { min-width: 0; }
.ns-muestra-titulo[b-w0us0awmhj] { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.ns-muestra-mensaje[b-w0us0awmhj] { font-size: .88rem; color: #475569; margin-top: .2rem; white-space: pre-line; overflow-wrap: anywhere; }
.ns-muestra-ver[b-w0us0awmhj] { display: inline-block; margin-top: .5rem; font-size: .82rem; font-weight: 600; color: #2f6fed; }

@media (max-width: 900px) {
    .op-card[b-w0us0awmhj] { padding: 1rem; }
}
/* _content/ErpPowergest/Presentation/Configuration/SeriesDocumentos/Pages/SeriesDocumentosPage.razor.rz.scp.css */
.series-doc-page[b-oirli8agn9],
.series-doc-page *[b-oirli8agn9],
.series-doc-page *[b-oirli8agn9]::before,
.series-doc-page *[b-oirli8agn9]::after {
    box-sizing: border-box;
}

.series-doc-page[b-oirli8agn9] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

/* SERIE DE RECTIFICATIVAS (FIS-V4): texto a la izquierda, campo y botón a la derecha. */

.sd-rectificativas[b-oirli8agn9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sd-rect-texto[b-oirli8agn9] {
    flex: 1 1 320px;
    min-width: 0;
}

.sd-rect-campos[b-oirli8agn9] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.sd-rect-campos .sd-field[b-oirli8agn9] {
    width: 120px;
}

/* HEADER */

.series-doc-header[b-oirli8agn9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se repliegan
   primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase host-collapsed que
   añade el propio CommandBar sobre la cabecera). */
.series-doc-heading[b-oirli8agn9] {
    min-width: 0;
    flex: 0 0 auto;
}

.series-doc-header.command-bar-host-collapsed .series-doc-heading[b-oirli8agn9] {
    flex: 1 1 auto;
}

.series-doc-title[b-oirli8agn9] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    /* En una línea mientras la barra tenga sitio: así la barra ve que falta y se repliega primero. */
    white-space: nowrap;
}

/* Con la barra replegada del todo (command-bar-host-collapsed, la pone el script) el texto envuelve. */
.series-doc-header.command-bar-host-collapsed .series-doc-title[b-oirli8agn9],
.series-doc-header.command-bar-host-collapsed .series-doc-subtitle[b-oirli8agn9] {
    white-space: normal;
    overflow-wrap: break-word;
}

.series-doc-subtitle[b-oirli8agn9] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    /* Tope de ancho responsive: si el texto no cabe, salta de línea (envuelve) en vez de recortarse. */
    max-width: clamp(440px, 52vw, 1100px);
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.series-doc-header[b-oirli8agn9]  .series-doc-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD */

.card-panel[b-oirli8agn9] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.section-title[b-oirli8agn9] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-oirli8agn9] {
    margin: 0;
}

.series-doc-panel-header[b-oirli8agn9],
.series-doc-detail-top[b-oirli8agn9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.series-doc-panel-subtitle[b-oirli8agn9] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

/* MAIN */

.series-doc-main-grid[b-oirli8agn9] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

/* Tres filas: cabecera, buscador y lista. Con dos, la lista caía en una fila implícita sin alto propio y su
   primer grupo («ALBARÁN DE COMPRA») asomaba cortado bajo el buscador. BloqueTeclado no es una caja
   (display: contents): el buscador cuenta como hijo de la rejilla. */
.series-doc-list-panel[b-oirli8agn9] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.series-doc-detail-panel[b-oirli8agn9] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

/* Estado vacío / cargando: mismo tono que el resto de textos secundarios. */
.series-doc-empty[b-oirli8agn9] {
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* BUSCADOR */

.sd-search[b-oirli8agn9] {
    position: relative;
    display: flex;
    align-items: center;
}

.sd-search-icon[b-oirli8agn9] {
    position: absolute;
    left: 10px;
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;

    /* La ligadura de Material Symbols se pinta como la palabra literal («search», mucho más ancha que
       el glifo) hasta que la fuente carga. Sin recortarla, ese instante desborda el hueco de 34px del
       input y tapa el texto tecleado (FUN-424). Es intermitente —solo con la fuente aún sin cargar—,
       que es lo que lo hacía difícil de reproducir a mano. */
    width: 18px;
    overflow: hidden;
}

.sd-search-input[b-oirli8agn9] {
    width: 100%;
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    /* 10px (posición del icono) + 18px (glifo) + 6px de aire = 34px de hueco a la izquierda. */
    padding: 0 10px 0 34px;
    font-size: 12.5px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .sd-search-input:focus[b-oirli8agn9] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* LISTA SERIES */

/* Encabezado de grupo: la lista se agrupa por TIPO de documento, porque el contador es la pareja
   (tipo, serie) y sin el tipo delante dos filas «A» parecerían la misma serie repetida. */
.sd-grupo-tipo[b-oirli8agn9] {
    margin-top: 6px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

    .sd-grupo-tipo:first-child[b-oirli8agn9] {
        margin-top: 0;
    }

.sd-series-list[b-oirli8agn9] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .sd-series-list[b-oirli8agn9]::-webkit-scrollbar {
        width: 6px;
    }

    .sd-series-list[b-oirli8agn9]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.sd-serie-card[b-oirli8agn9] {
    width: 100%;
    min-height: 84px;
    /* La lista es flex en columna: sin esto la tarjeta se deja aplastar por debajo de su contenido y lo que
       no cabe se pinta ENCIMA de las vecinas. Se vio al añadirle el aviso de contador atrasado (FUN-J21):
       una tarjeta con dos líneas más y el texto saliéndose por arriba y por abajo. Que la lista tenga
       overflow no basta — el flex item encoge antes de que el contenedor se plantee hacer scroll. */
    flex-shrink: 0;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 11px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .sd-serie-card:hover[b-oirli8agn9] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .sd-serie-card.active[b-oirli8agn9] {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }

.sd-serie-top[b-oirli8agn9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .sd-serie-top strong[b-oirli8agn9] {
        font-size: 16px;
        font-weight: 900;
        color: #111827;
    }

.sd-serie-desc[b-oirli8agn9] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-serie-meta[b-oirli8agn9] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #6b7280;
}

    .sd-serie-meta b[b-oirli8agn9] {
        color: #1d4ed8;
    }

.sd-status-badge[b-oirli8agn9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    border: 1px solid transparent;
}

.sd-status-green[b-oirli8agn9] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.sd-status-red[b-oirli8agn9] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* TABS */

/* La barra (rail, scroll horizontal y flechas) la aporta <ScrollableTabs>; aquí solo los botones. */
.sd-tab-btn[b-oirli8agn9] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .sd-tab-btn:hover[b-oirli8agn9] {
        color: #334155;
    }

    .sd-tab-btn.active[b-oirli8agn9] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .sd-tab-btn:focus-visible[b-oirli8agn9] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

.sd-tab-content[b-oirli8agn9] {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.sd-tab-content-numeracion[b-oirli8agn9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .sd-tab-content-numeracion[b-oirli8agn9]::-webkit-scrollbar {
        width: 6px;
    }

    .sd-tab-content-numeracion[b-oirli8agn9]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.sd-tab-content-rules[b-oirli8agn9] {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .sd-tab-content-rules[b-oirli8agn9]::-webkit-scrollbar {
        width: 6px;
    }

    .sd-tab-content-rules[b-oirli8agn9]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* NUMERACION */

.sd-selected-serie-box[b-oirli8agn9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

    .sd-selected-serie-box > div[b-oirli8agn9] {
        min-width: 0;
        border: 1px solid #edf2f7;
        background: #f8fafc;
        border-radius: 12px;
        padding: 9px 11px;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sd-selected-serie-box span[b-oirli8agn9] {
        font-size: 11px;
        color: #6b7280;
        font-weight: 750;
        white-space: nowrap;
    }

    .sd-selected-serie-box strong[b-oirli8agn9] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* CONFIG */

.sd-options-grid[b-oirli8agn9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.sd-check-item[b-oirli8agn9] {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
}

    .sd-check-item input[b-oirli8agn9] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
        flex: 0 0 auto;
    }

.sd-field[b-oirli8agn9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-field-span-2[b-oirli8agn9] {
    grid-column: span 2;
}

.sd-field label[b-oirli8agn9] {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #4b5563;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-input[b-oirli8agn9] {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .sd-input:focus[b-oirli8agn9] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* Campo que solo se muestra (p. ej. el tipo de documento en edición, que no se puede cambiar). */
.sd-input-readonly[b-oirli8agn9] {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.sd-field-hint[b-oirli8agn9] {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Vista previa del número dentro del recuadro de estado. */
.sd-selected-serie-box code[b-oirli8agn9],
.sd-serie-desc code[b-oirli8agn9] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 6px;
    padding: 1px 5px;
}

/* REGLAS */

.sd-rules-grid[b-oirli8agn9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sd-rule-card[b-oirli8agn9] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .sd-rule-card strong[b-oirli8agn9] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
    }

    .sd-rule-card span[b-oirli8agn9] {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.35;
    }

/* SYNCFUSION */

.series-doc-page .e-btn[b-oirli8agn9] {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
}

    .series-doc-page .e-btn .e-btn-content[b-oirli8agn9] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .series-doc-page .e-btn .e-ripple-element[b-oirli8agn9] {
        display: none !important;
    }

/* RESPONSIVE */

@media (max-width: 1280px) {
    .series-doc-page[b-oirli8agn9] {
        height: calc(100dvh - 96px);
    }

    .series-doc-main-grid[b-oirli8agn9] {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .series-doc-page[b-oirli8agn9] {
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .series-doc-main-grid[b-oirli8agn9] {
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .series-doc-list-panel[b-oirli8agn9],
    .series-doc-detail-panel[b-oirli8agn9],
    .sd-series-list[b-oirli8agn9],
    .sd-tab-content[b-oirli8agn9],
    .sd-tab-content-numeracion[b-oirli8agn9],
    .sd-tab-content-rules[b-oirli8agn9] {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */
    .series-doc-detail-top[b-oirli8agn9] {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 12px;
        border-bottom: 1px solid #eef2f7;
    }

    .sd-selected-serie-box[b-oirli8agn9],
    .sd-options-grid[b-oirli8agn9],
    .sd-rules-grid[b-oirli8agn9] {
        grid-template-columns: 1fr;
    }
}

/* ── Contador por detrás de los documentos (FUN-J21) ─────────────────────────────────────────────
   La serie va a repetir números. Se avisa en la propia tarjeta y con su botón al lado: la causa
   —un histórico importado, unos datos sembrados— tiene que poder leerse aquí, no en un log. */
.sd-serie-atrasada[b-oirli8agn9] {
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    /* La columna de la lista es estrecha: el texto y el botón no caben en una fila, así que el botón baja
       en vez de comprimir la frase hasta partirla por cualquier sitio. */
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 11.5px;
    line-height: 1.4;
}

    .sd-serie-atrasada .material-symbols-rounded[b-oirli8agn9] {
        font-size: 17px;
        flex-shrink: 0;
    }

    /* El texto ocupa el hueco que quede, y si no cabe parte de línea en vez de desbordar. */
    .sd-serie-atrasada > div[b-oirli8agn9] {
        flex: 1 1 140px;
        min-width: 0;
    }

    .sd-serie-atrasada b[b-oirli8agn9] {
        display: block;
    }

    /* A juego con el aviso que lo acompaña, no con los botones de la cabecera: es una acción de reparación
       dentro de una tarjeta, no un comando de la pantalla. */
    .sd-serie-atrasada .sd-ajustar-contador[b-oirli8agn9] {
        margin-left: auto;
        flex-shrink: 0;
        height: 28px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid #d97706;
        background: #ffffff;
        color: #92400e;
        font-size: 11.5px;
        font-weight: 800;
        font-family: inherit;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .sd-serie-atrasada .sd-ajustar-contador:hover:not(:disabled)[b-oirli8agn9] {
            background: #d97706;
            color: #ffffff;
        }

        .sd-serie-atrasada .sd-ajustar-contador:disabled[b-oirli8agn9] {
            opacity: 0.55;
            cursor: default;
        }
/* _content/ErpPowergest/Presentation/Configuration/Terminales/Pages/TerminalesPage.razor.rz.scp.css */
/* TERMINALES — mismo vocabulario visual que Configuración TPV y las ventanas del TPV: tarjetas blancas con
   radio y sombra suave, títulos de sección con una frase de ayuda, chips de color para el estado y botones
   con el juego primario / secundario / peligro. Los <select> conservan el aspecto global de desplegables.css:
   aquí solo se les da alto, borde y radio (nada de appearance ni de reglas sobre option). */

.trm-page[b-cn9p2rfr8f],
.trm-page *[b-cn9p2rfr8f],
.trm-page *[b-cn9p2rfr8f]::before,
.trm-page *[b-cn9p2rfr8f]::after {
    box-sizing: border-box;
}

.trm-page[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 24px;
    color: #1f2937;
    font-size: 13px;
}

.trm-page .material-symbols-outlined[b-cn9p2rfr8f] {
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

/* CABECERA */
.trm-header[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trm-title[b-cn9p2rfr8f] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
}

.trm-subtitle[b-cn9p2rfr8f] {
    margin-top: 4px;
    max-width: 760px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}

.trm-version[b-cn9p2rfr8f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 12px;
    color: #4b5563;
}

    .trm-version .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #2563eb;
    }

/* AVISOS */
/* FUN-V569: los avisos se quedan a la vista aunque la página esté desplazada. */
.trm-alertas[b-cn9p2rfr8f] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .trm-alertas:empty[b-cn9p2rfr8f] {
        display: none;
    }

.trm-alerta[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}

.trm-alerta-cerrar[b-cn9p2rfr8f] {
    margin-left: auto;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

    .trm-alerta-cerrar:hover[b-cn9p2rfr8f] {
        opacity: 1;
    }

    .trm-alerta-cerrar .material-symbols-outlined[b-cn9p2rfr8f] {
        font-size: 18px;
    }

.trm-probar-motivo[b-cn9p2rfr8f] {
    flex-basis: 100%;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    color: #92400e;
}

    .trm-probar-motivo .material-symbols-outlined[b-cn9p2rfr8f] {
        font-size: 16px;
    }

/* FUN-V568: impresora de tickets, cajón y corte de cada ordenador, en una fila encima de su tabla. */
.trm-ticket[b-cn9p2rfr8f] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 6px 0 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

    .trm-ticket .trm-campo[b-cn9p2rfr8f] {
        min-width: 180px;
    }

/* FUN-V571: los módulos de las órdenes se marcan, en columnas. */
.trm-modulos[b-cn9p2rfr8f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 14px;
}

.trm-modulo-sobra[b-cn9p2rfr8f] {
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

.trm-sedes[b-cn9p2rfr8f] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

    .trm-sedes li[b-cn9p2rfr8f] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        background: #f8fafc;
    }

    .trm-sedes .material-symbols-outlined[b-cn9p2rfr8f] {
        font-size: 16px;
        color: #64748b;
    }

.trm-alerta-error[b-cn9p2rfr8f] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.trm-alerta-ok[b-cn9p2rfr8f] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.trm-alerta-info[b-cn9p2rfr8f] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
}

.trm-respuesta-ia[b-cn9p2rfr8f] {
    margin-top: 4px;
    white-space: pre-wrap;
    font-size: 13px;
}

/* TARJETAS DE SECCIÓN */
.trm-card[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.trm-card-aviso[b-cn9p2rfr8f] {
    border-color: #fcd34d;
    background: #fffbeb;
}

.trm-card-cab[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.trm-card-ico[b-cn9p2rfr8f] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 20px !important;
}

.trm-card-aviso .trm-card-ico[b-cn9p2rfr8f] {
    background: #fef3c7;
    color: #b45309;
}

.trm-card-titulo[b-cn9p2rfr8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.trm-card-ayuda[b-cn9p2rfr8f] {
    margin: 4px 0 0;
    max-width: 860px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7280;
}

.trm-muted[b-cn9p2rfr8f] {
    color: #6b7280;
    font-weight: normal;
}

/* INTRO: las tres palabras de la pantalla */
.trm-conceptos[b-cn9p2rfr8f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.trm-concepto[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

    .trm-concepto .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #2563eb;
        font-size: 22px;
    }

    .trm-concepto strong[b-cn9p2rfr8f] {
        font-size: 13px;
        color: #1f2937;
    }

    .trm-concepto p[b-cn9p2rfr8f] {
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.4;
        color: #4b5563;
    }

.trm-enlace[b-cn9p2rfr8f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12.5px;
    text-decoration: none;
}

    .trm-enlace:hover[b-cn9p2rfr8f] {
        background: #dbeafe;
    }

    .trm-enlace .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #2563eb;
    }

.trm-enlace-flecha[b-cn9p2rfr8f] {
    margin-left: auto;
}

.trm-nota[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4b5563;
}

    .trm-nota .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #2563eb;
    }

/* CAMPOS */
.trm-fila-campos[b-cn9p2rfr8f] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.trm-campo[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.trm-campo-ancho[b-cn9p2rfr8f] {
    flex: 1 1 240px;
    max-width: 420px;
}

.trm-campo-corto[b-cn9p2rfr8f] {
    max-width: 320px;
}

.trm-label[b-cn9p2rfr8f] {
    font-size: 12px;
    font-weight: 750;
    color: #4b5563;
}

.trm-input[b-cn9p2rfr8f] {
    width: 100%;
    min-height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 0 10px;
    padding-block: 0;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .trm-input:focus[b-cn9p2rfr8f] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.trm-tabla .trm-input[b-cn9p2rfr8f] {
    min-width: 140px;
}

.trm-tabla .trm-input-num[b-cn9p2rfr8f],
.trm-input-num[b-cn9p2rfr8f] {
    width: 80px;
    min-width: 0;
    text-align: right;
}

.trm-tabla .trm-input-impresora[b-cn9p2rfr8f] {
    min-width: 220px;
}

.trm-tabla .trm-input-bandeja[b-cn9p2rfr8f] {
    min-width: 120px;
}

.trm-check[b-cn9p2rfr8f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-right: 10px;
    font-size: 12.5px;
    font-weight: 650;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

    .trm-check input[b-cn9p2rfr8f],
    .trm-casilla[b-cn9p2rfr8f] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
    }

.trm-fieldset[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 12px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

    .trm-fieldset legend[b-cn9p2rfr8f] {
        padding: 0 4px;
        font-size: 12px;
        font-weight: 750;
        color: #4b5563;
    }

.trm-ordenes[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 680px;
}

/* BOTONES */
.trm-btn[b-cn9p2rfr8f] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

    .trm-btn:disabled[b-cn9p2rfr8f] {
        opacity: .55;
        cursor: default;
    }

.trm-btn-sm[b-cn9p2rfr8f] {
    height: 32px;
    padding: 0 11px;
    font-size: 12.5px;
}

.trm-btn-primario[b-cn9p2rfr8f] {
    background: #2563eb;
    color: #ffffff;
}

    .trm-btn-primario:hover:not(:disabled)[b-cn9p2rfr8f] {
        background: #1d4ed8;
    }

.trm-btn-ghost[b-cn9p2rfr8f] {
    background: #ffffff;
    color: #374151;
    border-color: #dbe2ea;
}

    .trm-btn-ghost:hover:not(:disabled)[b-cn9p2rfr8f] {
        background: #f3f6fa;
    }

.trm-btn-peligro[b-cn9p2rfr8f] {
    background: #ffffff;
    color: #c22f39;
    border-color: #f0c4c7;
}

    .trm-btn-peligro:hover:not(:disabled)[b-cn9p2rfr8f] {
        background: #fdf1f2;
    }

.trm-empuja[b-cn9p2rfr8f] {
    margin-left: auto;
}

/* CHIPS */
.trm-chip[b-cn9p2rfr8f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.trm-punto[b-cn9p2rfr8f] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.trm-chip-verde[b-cn9p2rfr8f] {
    background: #dcfce7;
    color: #166534;
}

.trm-chip-gris[b-cn9p2rfr8f] {
    background: #f1f5f9;
    color: #64748b;
}

.trm-chip-ambar[b-cn9p2rfr8f] {
    background: #fef3c7;
    color: #92400e;
}

.trm-chip-azul[b-cn9p2rfr8f] {
    background: #eff6ff;
    color: #1e40af;
}

.trm-chip-violeta[b-cn9p2rfr8f] {
    background: #f3e8ff;
    color: #6b21a8;
}

/* TABLAS */
.trm-tabla-caja[b-cn9p2rfr8f] {
    overflow-x: auto;
    border: 1px solid #eef0f3;
    border-radius: 12px;
}

.trm-tabla[b-cn9p2rfr8f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .trm-tabla th[b-cn9p2rfr8f],
    .trm-tabla td[b-cn9p2rfr8f] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef0f3;
        text-align: left;
        vertical-align: middle;
    }

    .trm-tabla thead th[b-cn9p2rfr8f] {
        background: #f8fafc;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #6b7280;
        white-space: nowrap;
    }

    .trm-tabla tbody tr:last-child td[b-cn9p2rfr8f] {
        border-bottom: 0;
    }

    .trm-tabla tbody tr:hover[b-cn9p2rfr8f] {
        background: #fafcff;
    }

.trm-roles-celda[b-cn9p2rfr8f],
.trm-acciones-celda[b-cn9p2rfr8f] {
    white-space: nowrap;
}

    .trm-acciones-celda .trm-btn + .trm-btn[b-cn9p2rfr8f] {
        margin-left: 6px;
    }

.trm-equipo[b-cn9p2rfr8f] {
    max-width: 260px;
}

/* TERMINALES: una tarjeta por ordenador */
.trm-terminales[b-cn9p2rfr8f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
}

.trm-terminal[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

.trm-terminal-cab[b-cn9p2rfr8f] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trm-terminal-ico[b-cn9p2rfr8f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #475569;
    font-size: 20px !important;
}

.trm-terminal-nombre[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

    .trm-terminal-nombre strong[b-cn9p2rfr8f] {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trm-terminal-nombre .trm-muted[b-cn9p2rfr8f] {
        font-size: 12px;
    }

.trm-codigo[b-cn9p2rfr8f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    font-size: 12px;
    color: #1e3a8a;
}

    .trm-codigo strong[b-cn9p2rfr8f] {
        font-family: Consolas, "Courier New", monospace;
        font-size: 16px;
        letter-spacing: .08em;
    }

    .trm-codigo .trm-muted[b-cn9p2rfr8f] {
        flex-basis: 100%;
        font-size: 11.5px;
    }

.trm-datos[b-cn9p2rfr8f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
}

    .trm-datos dt[b-cn9p2rfr8f] {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #6b7280;
    }

    .trm-datos dd[b-cn9p2rfr8f] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        margin: 2px 0 0;
        font-size: 12.5px;
        color: #1f2937;
        overflow-wrap: anywhere;
    }

.trm-probar[b-cn9p2rfr8f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.trm-probar-titulo[b-cn9p2rfr8f] {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
}

/* «Más opciones»: se despliega dentro de la tarjeta (nada flotante que una tabla pueda recortar). */
.trm-mas[b-cn9p2rfr8f] {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

    .trm-mas > summary[b-cn9p2rfr8f] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        background: #ffffff;
        font-size: 12.5px;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
        list-style: none;
    }

        .trm-mas > summary[b-cn9p2rfr8f]::-webkit-details-marker {
            display: none;
        }

        .trm-mas > summary:hover[b-cn9p2rfr8f] {
            background: #f3f6fa;
        }

    .trm-mas[open] > summary[b-cn9p2rfr8f] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1e3a8a;
    }

.trm-grupos[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.trm-grupo[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

    .trm-grupo p[b-cn9p2rfr8f] {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
        color: #6b7280;
    }

.trm-grupo-titulo[b-cn9p2rfr8f] {
    font-size: 12.5px;
    font-weight: 800;
    color: #1f2937;
}

.trm-grupo-botones[b-cn9p2rfr8f] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trm-grupo-peligro[b-cn9p2rfr8f] {
    border-color: #f0c4c7;
    background: #fffafa;
}

    .trm-grupo-peligro .trm-grupo-titulo[b-cn9p2rfr8f] {
        color: #b91c1c;
    }

.trm-vacio[b-cn9p2rfr8f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
}

    .trm-vacio p[b-cn9p2rfr8f] {
        margin: 0;
    }

    .trm-vacio .material-symbols-outlined[b-cn9p2rfr8f] {
        font-size: 28px;
    }

/* IMPRESORAS */
.trm-impresion[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trm-impresion-titulo[b-cn9p2rfr8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 13.5px;
    font-weight: 800;
}

    .trm-impresion-titulo .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #475569;
    }

/* ALTAS A MANO: sede y terminal, lado a lado */
.trm-altas[b-cn9p2rfr8f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px;
    align-items: start;
}

/* PLIEGUES: asistente y opciones avanzadas */
.trm-pliegue[b-cn9p2rfr8f] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

    .trm-pliegue > summary[b-cn9p2rfr8f] {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
    }

        .trm-pliegue > summary[b-cn9p2rfr8f]::-webkit-details-marker {
            display: none;
        }

        .trm-pliegue > summary[b-cn9p2rfr8f]::after {
            content: "expand_more";
            margin-left: auto;
            font-family: "Material Symbols Outlined";
            font-size: 22px;
            color: #6b7280;
            transition: transform .15s;
        }

    .trm-pliegue[open] > summary[b-cn9p2rfr8f]::after {
        transform: rotate(180deg);
    }

    .trm-pliegue > summary > .material-symbols-outlined[b-cn9p2rfr8f] {
        color: #2563eb;
        font-size: 20px;
    }

.trm-pliegue-titulo[b-cn9p2rfr8f] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.trm-pliegue > summary .trm-muted[b-cn9p2rfr8f] {
    font-size: 12.5px;
}

.trm-pliegue-cuerpo[b-cn9p2rfr8f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 12px;
}

    .trm-pliegue-cuerpo .trm-card[b-cn9p2rfr8f] {
        box-shadow: none;
    }

/* MÓVIL Y PANTALLAS ESTRECHAS */
@media (max-width: 980px) {
    .trm-conceptos[b-cn9p2rfr8f],
    .trm-altas[b-cn9p2rfr8f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .trm-terminales[b-cn9p2rfr8f] {
        grid-template-columns: 1fr;
    }

    .trm-datos[b-cn9p2rfr8f] {
        grid-template-columns: 1fr;
    }

    .trm-empuja[b-cn9p2rfr8f] {
        margin-left: 0;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Costes/Pages/DiarioCostesPage.razor.rz.scp.css */
.dc-page[b-p0y5kzwjhe],
.dc-page *[b-p0y5kzwjhe],
.dc-page *[b-p0y5kzwjhe]::before,
.dc-page *[b-p0y5kzwjhe]::after {
    box-sizing: border-box;
}

/* A todo el ancho y todo el alto, como Clientes: sin margen propio (el borde lo pone .main-body), 9px
   entre bloques, y el listado se queda con el alto que sobra. */
.dc-page[b-p0y5kzwjhe] {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* CABECERA */

.dc-header[b-p0y5kzwjhe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

    .dc-header > div[b-p0y5kzwjhe] {
        flex: 1 1 auto;
        min-width: 0;
    }

.dc-title[b-p0y5kzwjhe] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.dc-subtitle[b-p0y5kzwjhe] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.dc-card[b-p0y5kzwjhe] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.dc-section-title[b-p0y5kzwjhe] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

/* FILTROS */

.dc-filtros-grid[b-p0y5kzwjhe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.dc-field[b-p0y5kzwjhe] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .dc-field label[b-p0y5kzwjhe] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.dc-input[b-p0y5kzwjhe] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    width: 100%;
}

    .dc-input:focus[b-p0y5kzwjhe] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.dc-filtros-actions[b-p0y5kzwjhe] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* LISTA */

.dc-list-head[b-p0y5kzwjhe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dc-totales[b-p0y5kzwjhe] {
    display: flex;
    gap: 16px;
    font-size: 12.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

    .dc-totales strong[b-p0y5kzwjhe] {
        color: #1f2937;
    }

.dc-neto strong[b-p0y5kzwjhe] {
    color: #1e3a8a;
}

.dc-empty[b-p0y5kzwjhe] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* TABLA (TablaPaginada: marco, cabecera con orden, filas y paginador los pinta ella) */

/* El listado se estira hasta abajo; la tabla, dentro, toma el alto sobrante. */
.dc-list[b-p0y5kzwjhe] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dc-tabla[b-p0y5kzwjhe] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.dc-page[b-p0y5kzwjhe]  .tp-panel {
    min-height: auto;
}

.dc-page[b-p0y5kzwjhe]  .tp-table td {
    vertical-align: top;
}

.dc-page[b-p0y5kzwjhe]  .dc-row-drill {
    cursor: pointer;
}

.dc-page[b-p0y5kzwjhe]  .dc-grupo-head td {
    background: #eef2ff;
    font-weight: 850;
    color: #3730a3;
    border-bottom: 1px solid #e0e7ff;
}

.dc-page[b-p0y5kzwjhe]  .dc-grupo-label {
    display: block;
}

.dc-page[b-p0y5kzwjhe]  .dc-col-fecha,
.dc-page[b-p0y5kzwjhe]  .dc-col-asiento,
.dc-page[b-p0y5kzwjhe]  .dc-col-cuenta {
    white-space: nowrap;
}

.dc-page[b-p0y5kzwjhe]  .dc-asiento-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
}

.dc-page[b-p0y5kzwjhe]  .dc-cuenta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    display: block;
}

.dc-page[b-p0y5kzwjhe]  .dc-cuenta-nombre {
    font-size: 11px;
    color: #94a3b8;
    display: block;
    white-space: normal;
}

.dc-page[b-p0y5kzwjhe]  td.dc-col-concepto {
    min-width: 160px;
    overflow-wrap: anywhere;
}

.dc-page[b-p0y5kzwjhe]  td.dc-col-dim {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #475569;
}

.dc-page[b-p0y5kzwjhe]  .dc-col-importe {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* BADGES */

.dc-badge[b-p0y5kzwjhe] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dc-badge-reparto[b-p0y5kzwjhe] {
    background: #fefce8;
    color: #a16207;
    border-color: #fde68a;
}

/* BOTONES */

.dc-btn[b-p0y5kzwjhe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dc-btn-sm[b-p0y5kzwjhe] {
    height: 34px;
    font-size: 12.5px;
}

.dc-btn-ico[b-p0y5kzwjhe] {
    font-size: 18px;
    line-height: 1;
}

.dc-btn-primary[b-p0y5kzwjhe] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .dc-btn-primary:hover:not(:disabled)[b-p0y5kzwjhe] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.dc-btn-ghost[b-p0y5kzwjhe] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .dc-btn-ghost:hover:not(:disabled)[b-p0y5kzwjhe] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.dc-btn:disabled[b-p0y5kzwjhe] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RESPONSIVE: nunca scroll horizontal de página. Se ocultan columnas secundarias; Fecha, Cuenta,
   Concepto y Neto siguen siempre visibles. */

@media (max-width: 900px) {
    .dc-page[b-p0y5kzwjhe]  .dc-col-dim {
        display: none;
    }

    .dc-card[b-p0y5kzwjhe] {
        padding: 12px;
    }

    .dc-btn[b-p0y5kzwjhe],
    .dc-btn-sm[b-p0y5kzwjhe] {
        min-height: 36px;
    }
}

@media (max-width: 768px) {
    .dc-filtros-grid[b-p0y5kzwjhe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dc-page[b-p0y5kzwjhe]  .dc-col-asiento {
        display: none;
    }

    .dc-page[b-p0y5kzwjhe]  td.dc-col-concepto {
        min-width: 120px;
    }
}

@media (max-width: 600px) {
    .dc-title[b-p0y5kzwjhe] {
        font-size: 19px;
    }

    .dc-subtitle[b-p0y5kzwjhe] {
        font-size: 12px;
    }

    /* Filtros apilados al 100%. */
    .dc-filtros-grid[b-p0y5kzwjhe] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .dc-filtros-actions[b-p0y5kzwjhe] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .dc-filtros-actions .dc-btn[b-p0y5kzwjhe] {
            justify-content: center;
            height: 40px;
        }

    /* Totales: debajo del contador, en varias líneas si hace falta. */
    .dc-list-head[b-p0y5kzwjhe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dc-totales[b-p0y5kzwjhe] {
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    .dc-page[b-p0y5kzwjhe]  .dc-col-debe,
    .dc-page[b-p0y5kzwjhe]  .dc-col-haber {
        display: none;
    }

    /* Los anchos fijos de escritorio (estilo en línea de la cabecera) ceden: la tabla cabe sin scroll. */
    .dc-page[b-p0y5kzwjhe]  .tp-table th {
        width: auto !important;
    }

    .dc-page[b-p0y5kzwjhe]  .tp-pager {
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .dc-card[b-p0y5kzwjhe] {
        padding: 10px;
        border-radius: 12px;
    }

    .dc-page[b-p0y5kzwjhe]  .dc-col-cuenta .dc-cuenta-nombre {
        display: none;
    }

    .dc-page[b-p0y5kzwjhe]  .tp-table th,
    .dc-page[b-p0y5kzwjhe]  .tp-table td {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Costes/Pages/DimensionesPage.razor.rz.scp.css */
.dim-page[b-gf32cjj89q],
.dim-page *[b-gf32cjj89q],
.dim-page *[b-gf32cjj89q]::before,
.dim-page *[b-gf32cjj89q]::after {
    box-sizing: border-box;
}

/* A todo el ancho y todo el alto, como Clientes: sin margen propio (el borde lo pone .main-body), 9px
   entre bloques y el suelo en la pantalla. El listado se queda con el alto que sobra (.dim-list-panel);
   si no cabe, la página crece y el scroll lo lleva .main-body. */
.dim-page[b-gf32cjj89q] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .dim-page > *[b-gf32cjj89q] {
        flex-shrink: 0;
    }

/* CABECERA */

/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.dim-header[b-gf32cjj89q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.dim-header-text[b-gf32cjj89q] {
    flex: 1 1 auto;
    min-width: 0;
}

.dim-title[b-gf32cjj89q] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.dim-subtitle[b-gf32cjj89q] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* Con la barra ya replegada al «···», el título y el subtítulo envuelven en vez de empujarla. */
.dim-header.command-bar-host-collapsed .dim-title[b-gf32cjj89q],
.dim-header.command-bar-host-collapsed .dim-subtitle[b-gf32cjj89q] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera, como en Cuentas y Clientes: SIN ::deep a propósito. Con ::deep la regla sí
   llega a la barra y su `flex: 0 0 auto` le impide encoger, así que su script nunca ve que falta sitio y en
   móvil aplasta el título en vez de replegar los botones al «···». */
.dim-header-actions[b-gf32cjj89q] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TABS DE EJE */

.dim-tabs[b-gf32cjj89q] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.dim-tab[b-gf32cjj89q] {
    height: 38px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

    .dim-tab:hover[b-gf32cjj89q] {
        color: #334155;
    }

    .dim-tab.active[b-gf32cjj89q] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 850;
    }

/* TARJETAS */

.dim-card[b-gf32cjj89q] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.dim-section-title[b-gf32cjj89q] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.dim-list-subtitle[b-gf32cjj89q] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* ALTA (ventana flotante ModalMaestro: los campos usan sus clases mm-*). El envoltorio no ocupa sitio
   en la columna (si no, sumaría un hueco más al final de la página). */

.dim-modal-alta[b-gf32cjj89q] {
    display: contents;
}

.dim-error-box[b-gf32cjj89q] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* LISTADO */

.dim-list-head[b-gf32cjj89q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dim-search[b-gf32cjj89q] {
    position: relative;
    min-width: 260px;
    flex: 0 1 340px;
}

.dim-search-icon[b-gf32cjj89q] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.dim-search-input[b-gf32cjj89q] {
    width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px 0 34px;
    font-size: 13px;
    color: #111827;
}

    .dim-search-input:focus[b-gf32cjj89q] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* TABLA (TablaPaginada: marco, cabecera con orden, filas y paginador los pinta ella) */

/* El listado rellena la página hasta abajo: flex-columna hasta la tabla, que es lo que espera .tp-panel
   para repartirse el alto. */
.dim-list-panel[b-gf32cjj89q] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dim-tabla[b-gf32cjj89q] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.dim-page[b-gf32cjj89q]  .dim-tabla .tp-panel {
    min-height: auto;
}

.dim-tabla[b-gf32cjj89q]  td.dim-col-codigo {
    white-space: nowrap;
}

.dim-codigo[b-gf32cjj89q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    display: inline-block;
}

/* BADGES */

.dim-badge[b-gf32cjj89q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dim-badge-grupo[b-gf32cjj89q] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.dim-badge-hoja[b-gf32cjj89q] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.dim-badge-activo[b-gf32cjj89q] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.dim-badge-bloqueado[b-gf32cjj89q] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* ACTIVACIÓN (opt-in por empresa) */

.dim-activacion[b-gf32cjj89q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.dim-activacion-on[b-gf32cjj89q] {
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.dim-activacion-off[b-gf32cjj89q] {
    border-color: #e5e7eb;
    background: #f8fafc;
}

.dim-activacion-info[b-gf32cjj89q] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dim-activacion-ico[b-gf32cjj89q] {
    font-size: 26px;
    line-height: 1;
    color: #9ca3af;
}

.dim-activacion-on .dim-activacion-ico[b-gf32cjj89q] {
    color: #059669;
}

.dim-activacion-title[b-gf32cjj89q] {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.dim-activacion-sub[b-gf32cjj89q] {
    margin-top: 2px;
    font-size: 12.5px;
    color: #6b7280;
}

.dim-activacion-controls[b-gf32cjj89q] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dim-check[b-gf32cjj89q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.dim-check input[b-gf32cjj89q] {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
    cursor: pointer;
}

/* Interruptor de activación */

.dim-switch[b-gf32cjj89q] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex: 0 0 auto;
    cursor: pointer;
}

.dim-switch input[b-gf32cjj89q] {
    opacity: 0;
    width: 0;
    height: 0;
}

.dim-switch-slider[b-gf32cjj89q] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s ease;
}

    .dim-switch-slider[b-gf32cjj89q]::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        transition: transform 0.15s ease;
    }

.dim-switch input:checked + .dim-switch-slider[b-gf32cjj89q] {
    background: #059669;
}

    .dim-switch input:checked + .dim-switch-slider[b-gf32cjj89q]::before {
        transform: translateX(20px);
    }

.dim-switch input:disabled + .dim-switch-slider[b-gf32cjj89q] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RESPONSIVE */

/* Tablet: tarjeta algo más prieta y la búsqueda a todo el ancho bajo el título del listado. */
@media (max-width: 900px) {
    .dim-card[b-gf32cjj89q] {
        padding: 12px;
    }

    .dim-search[b-gf32cjj89q] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .dim-title[b-gf32cjj89q] {
        font-size: 19px;
    }

    /* El nivel (grupo / imputable) se deduce de la sangría del código; se ve en la ficha. */
    .dim-tabla[b-gf32cjj89q]  .dim-col-nivel {
        display: none;
    }

    .dim-activacion[b-gf32cjj89q] {
        padding: 12px 14px;
    }

    .dim-tab[b-gf32cjj89q] {
        flex: 1 1 0;
        min-height: 40px;
    }
}

/* Móvil: el estado cae también; código y nombre no caen nunca. Lo que aún no quepa se desplaza DENTRO de
   la tabla, nunca la página. Controles con área de toque cómoda. */
@media (max-width: 600px) {
    .dim-tabla[b-gf32cjj89q]  .dim-col-estado {
        display: none;
    }

    /* El ancho fijo del código (220px) lo pone la tabla en línea en la cabecera: en móvil manda el contenido. */
    .dim-tabla[b-gf32cjj89q]  th.dim-col-codigo {
        width: auto !important;
    }

    .dim-activacion-controls[b-gf32cjj89q] {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .dim-check[b-gf32cjj89q] {
        min-height: 36px;
    }

    .dim-switch[b-gf32cjj89q] {
        margin: 6px 0;
    }

    .dim-search-input[b-gf32cjj89q] {
        height: 40px;
        font-size: 16px; /* evita el zoom automático de iOS al enfocar */
    }
}

@media (max-width: 480px) {
    .dim-title[b-gf32cjj89q] {
        font-size: 17px;
    }

    .dim-subtitle[b-gf32cjj89q] {
        font-size: 12px;
    }

    .dim-card[b-gf32cjj89q] {
        padding: 10px;
        border-radius: 12px;
    }

    .dim-codigo[b-gf32cjj89q] {
        font-size: 12px;
    }
}

/* Título en dos fases, como en Diario: primero en UNA línea (así la barra ve que falta sitio y pasa a solo
   iconos y luego al «···»); solo con la barra ya replegada del todo, el título envuelve. Sin esto, en móvil
   el título se parte palabra a palabra y los botones conservan su texto. */
.dim-title[b-gf32cjj89q] {
    white-space: nowrap;
}

.dim-header.command-bar-host-collapsed .dim-title[b-gf32cjj89q] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* El bloque del título no cede hasta que la barra esté replegada del todo (igual que en Diario). */
.dim-header > .dim-header-text[b-gf32cjj89q] {
    flex: 0 0 auto;
    min-width: 0;
}

.dim-header.command-bar-host-collapsed > .dim-header-text[b-gf32cjj89q] {
    flex: 1 1 auto;
}
/* _content/ErpPowergest/Presentation/Contabilidad/Costes/Pages/ExplotacionPage.razor.rz.scp.css */
.exp-page[b-piwhro2duo],
.exp-page *[b-piwhro2duo],
.exp-page *[b-piwhro2duo]::before,
.exp-page *[b-piwhro2duo]::after {
    box-sizing: border-box;
}

.exp-page[b-piwhro2duo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.exp-header[b-piwhro2duo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.exp-title[b-piwhro2duo] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.exp-subtitle[b-piwhro2duo] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.exp-card[b-piwhro2duo] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* FILTROS */

.exp-filtros-grid[b-piwhro2duo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.exp-field[b-piwhro2duo] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 170px;
}

.exp-field-valor[b-piwhro2duo] {
    flex: 1 1 280px;
    min-width: 240px;
}

    .exp-field label[b-piwhro2duo] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.exp-input[b-piwhro2duo] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    width: 100%;
}

    .exp-input:focus[b-piwhro2duo] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.exp-filtros-actions[b-piwhro2duo] {
    display: flex;
    align-items: flex-end;
}

/* KPIs */

.exp-kpis[b-piwhro2duo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.exp-kpi[b-piwhro2duo] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.exp-kpi-label[b-piwhro2duo] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
}

.exp-kpi-value[b-piwhro2duo] {
    font-size: 22px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.exp-kpi-ingreso[b-piwhro2duo] {
    color: #047857;
}

.exp-kpi-gasto[b-piwhro2duo] {
    color: #b45309;
}

.exp-kpi-margen-card.positivo[b-piwhro2duo] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

    .exp-kpi-margen-card.positivo .exp-kpi-value[b-piwhro2duo] {
        color: #047857;
    }

.exp-kpi-margen-card.negativo[b-piwhro2duo] {
    background: #fef2f2;
    border-color: #fecaca;
}

    .exp-kpi-margen-card.negativo .exp-kpi-value[b-piwhro2duo] {
        color: #b91c1c;
    }

.exp-titulo-valor[b-piwhro2duo] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 8px;
}

/* TABLAS */

.exp-grid-wrapper[b-piwhro2duo] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.exp-table[b-piwhro2duo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .exp-table thead th[b-piwhro2duo] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .exp-table tbody td[b-piwhro2duo] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .exp-table tbody tr:last-child td[b-piwhro2duo] {
        border-bottom: 0;
    }

.exp-col-cuenta[b-piwhro2duo] {
    width: 150px;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 650;
    color: #1d4ed8;
}

.exp-col-importe[b-piwhro2duo] {
    text-align: right;
    white-space: nowrap;
    width: 140px;
    font-variant-numeric: tabular-nums;
}

.exp-table thead .exp-col-importe[b-piwhro2duo] {
    text-align: right;
}

.exp-muted-cell[b-piwhro2duo] {
    color: #94a3b8;
    font-style: italic;
}

.exp-row-cabecera td[b-piwhro2duo] {
    background: #f1f5f9;
    font-weight: 850;
    color: #334155;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.exp-row-subtotal td[b-piwhro2duo] {
    background: #fbfdff;
    font-weight: 800;
    color: #1e3a8a;
}

.exp-row-total td[b-piwhro2duo] {
    background: #f8fbff;
    font-weight: 850;
    color: #1e3a8a;
}

.exp-row-margen td[b-piwhro2duo] {
    background: #ecfdf5;
    font-weight: 850;
    color: #047857;
    border-top: 2px solid #a7f3d0;
}

/* CRUCE */

.exp-cruce[b-piwhro2duo] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-info-title[b-piwhro2duo] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.exp-block-subtitle[b-piwhro2duo] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.exp-muted-box[b-piwhro2duo] {
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    color: #6b7280;
}

/* BOTONES */

.exp-btn[b-piwhro2duo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.exp-btn-ico[b-piwhro2duo] {
    font-size: 18px;
    line-height: 1;
}

.exp-btn-primary[b-piwhro2duo] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .exp-btn-primary:hover:not(:disabled)[b-piwhro2duo] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.exp-btn:disabled[b-piwhro2duo] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* VACÍO */

.exp-empty[b-piwhro2duo] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .exp-kpis[b-piwhro2duo] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Costes/Pages/RepartoPage.razor.rz.scp.css */
.rep-page[b-u085fqh5tk] {
    width: 100%;
    min-width: 0;
    /* A todo el ancho y sin padding propio, como Clientes: el borde lo pone .main-body. */
    color: #1f2933;
}

.rep-header[b-u085fqh5tk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* 9px entre la cabecera y el contenido, como Clientes. */
    margin-bottom: 9px;
}

.rep-header-fields[b-u085fqh5tk] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.rep-title[b-u085fqh5tk] {
    font-size: 1.6rem;
    overflow-wrap: anywhere;
    font-weight: 700;
    margin: 0;
}

.rep-subtitle[b-u085fqh5tk] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.rep-card[b-u085fqh5tk] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.rep-card-head[b-u085fqh5tk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

.rep-card-title[b-u085fqh5tk] {
    font-size: 1.05rem;
    font-weight: 700;
}

.rep-card-desc[b-u085fqh5tk] {
    color: #61707d;
    font-size: .85rem;
    margin: .35rem 0 .9rem;
    line-height: 1.4;
}

.rep-field[b-u085fqh5tk] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rep-field label[b-u085fqh5tk] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.rep-select[b-u085fqh5tk], .rep-input[b-u085fqh5tk] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.rep-input-num[b-u085fqh5tk] { text-align: right; width: 8rem; }
.rep-select[b-u085fqh5tk] { min-width: 8rem; }

.rep-actions[b-u085fqh5tk] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.rep-actions-criterios[b-u085fqh5tk] { margin-top: .9rem; }

.rep-btn[b-u085fqh5tk] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background .12s, border-color .12s;
}

.rep-btn:disabled[b-u085fqh5tk] { opacity: .55; cursor: default; }
.rep-btn-ico[b-u085fqh5tk] { font-size: 1.05rem; }

.rep-btn-primary[b-u085fqh5tk] { background: #2f6fed; color: #fff; }
.rep-btn-primary:hover:not(:disabled)[b-u085fqh5tk] { background: #245cd0; }

.rep-btn-ghost[b-u085fqh5tk] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.rep-btn-ghost:hover:not(:disabled)[b-u085fqh5tk] { background: #e7edf4; }

.rep-btn-danger[b-u085fqh5tk] { background: #d93a44; color: #fff; }
.rep-btn-danger:hover:not(:disabled)[b-u085fqh5tk] { background: #c22f39; }

.rep-btn-danger-ghost[b-u085fqh5tk] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.rep-btn-danger-ghost:hover:not(:disabled)[b-u085fqh5tk] { background: #fdf1f2; }

.rep-link-btn[b-u085fqh5tk] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: .4rem;
}

.rep-icon-btn[b-u085fqh5tk] {
    background: none;
    border: none;
    cursor: pointer;
    color: #61707d;
    display: inline-flex;
    padding: .2rem;
    border-radius: 6px;
}
.rep-icon-btn:hover[b-u085fqh5tk] { background: #f2f5f9; }
.rep-icon-danger:hover[b-u085fqh5tk] { color: #c22f39; }

.rep-confirm[b-u085fqh5tk] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.rep-hint[b-u085fqh5tk] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.rep-badge[b-u085fqh5tk] {
    display: inline-block;
    padding: .12rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: #eaf0fe;
    color: #2f6fed;
}

.rep-ok[b-u085fqh5tk] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #e8f6ec;
    border: 1px solid #bfe3c8;
    color: #1c7a3a;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
}

.rep-error[b-u085fqh5tk] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #fdecee;
    border: 1px solid #f3c4c9;
    color: #b02a37;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
}

.rep-ok .material-symbols-rounded[b-u085fqh5tk], .rep-error .material-symbols-rounded[b-u085fqh5tk] { font-size: 1.1rem; }

.rep-resumen[b-u085fqh5tk] { margin-top: .9rem; }

.rep-detalles[b-u085fqh5tk] {
    margin: .6rem 0 0;
    padding-left: 1.2rem;
    color: #45525f;
    font-size: .85rem;
    line-height: 1.5;
}

.rep-regla[b-u085fqh5tk] {
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    padding: .75rem .9rem;
    margin-bottom: .8rem;
}

.rep-regla-head[b-u085fqh5tk] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.rep-grid-wrapper[b-u085fqh5tk] { overflow-x: auto; max-width: 100%; }

/* Ancho mínimo: por debajo, la tabla se desplaza dentro de su contenedor en vez de ensanchar la página. */
.rep-table[b-u085fqh5tk] {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-size: .86rem;
}

.rep-table th[b-u085fqh5tk] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
}

.rep-table td[b-u085fqh5tk] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.rep-table-input .rep-input[b-u085fqh5tk] { width: 100%; box-sizing: border-box; }
.rep-col-num[b-u085fqh5tk] { text-align: right; width: 9rem; }

/* ---- RESPONSIVE ---- */

/* Tablet: menos relleno en tarjetas y reglas, título más pequeño y área de toque de 36px también en
   los botones de icono y de enlace. */
@media (max-width: 768px) {
    .rep-card[b-u085fqh5tk] { padding: .9rem; }
    .rep-regla[b-u085fqh5tk] { padding: .65rem .7rem; }
    .rep-title[b-u085fqh5tk] { font-size: 1.35rem; }

    .rep-select[b-u085fqh5tk], .rep-input[b-u085fqh5tk] { min-height: 36px; box-sizing: border-box; }
    .rep-link-btn[b-u085fqh5tk] { min-height: 36px; }
    .rep-icon-btn[b-u085fqh5tk] { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
    .rep-col-num[b-u085fqh5tk] { width: 7rem; }
}

/* Móvil: ejercicio y periodo bajan bajo el título a todo el ancho; los campos de cada regla, las
   confirmaciones y los botones se apilan al 100 %. La tabla de destinos se desplaza dentro de su
   contenedor, nunca la página. */
@media (max-width: 540px) {
    .rep-header[b-u085fqh5tk] { align-items: stretch; }
    .rep-header > *[b-u085fqh5tk] { flex-basis: 100%; }
    .rep-header-fields[b-u085fqh5tk] { flex-direction: column; }
    .rep-header-fields .rep-field[b-u085fqh5tk] { width: 100%; }
    .rep-header .rep-select[b-u085fqh5tk] { width: 100%; min-width: 0; }

    .rep-actions[b-u085fqh5tk] { flex-direction: column; align-items: stretch; }
    .rep-actions > .rep-btn[b-u085fqh5tk] { justify-content: center; }
    .rep-confirm[b-u085fqh5tk] { align-self: stretch; }

    .rep-regla-head[b-u085fqh5tk] { align-items: stretch; }
    .rep-regla-head .rep-field[b-u085fqh5tk] { flex: 1 1 100%; }
    .rep-regla-head .rep-select[b-u085fqh5tk],
    .rep-regla-head .rep-input[b-u085fqh5tk] { width: 100%; min-width: 0; box-sizing: border-box; }
    .rep-regla-head > .rep-icon-btn[b-u085fqh5tk] { align-self: flex-end; }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Costes/Pages/ValorAnaliticoFicha.razor.rz.scp.css */
.val-page[b-tsff0ds3yx],
.val-page *[b-tsff0ds3yx],
.val-page *[b-tsff0ds3yx]::before,
.val-page *[b-tsff0ds3yx]::after {
    box-sizing: border-box;
}

.val-page[b-tsff0ds3yx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.val-header[b-tsff0ds3yx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.val-header-title[b-tsff0ds3yx] {
    flex: 1 1 auto;
    min-width: 0;
}

.val-title[b-tsff0ds3yx] {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    color: #111827;
}

.val-subtitle[b-tsff0ds3yx] {
    margin-top: 2px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETA + TABS */

.val-card[b-tsff0ds3yx] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.val-tabs-panel[b-tsff0ds3yx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.val-tabs[b-tsff0ds3yx] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.val-tab[b-tsff0ds3yx] {
    height: 40px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .val-tab:hover[b-tsff0ds3yx] {
        color: #334155;
    }

    .val-tab.active[b-tsff0ds3yx] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 850;
    }

.val-tab-content[b-tsff0ds3yx] {
    min-height: 200px;
}

/* DATOS */

.val-section-grid[b-tsff0ds3yx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.val-info-card[b-tsff0ds3yx] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
}

.val-info-title[b-tsff0ds3yx] {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

    .val-info-title.no-margin[b-tsff0ds3yx] {
        margin-bottom: 0;
    }

.val-fields[b-tsff0ds3yx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.val-field[b-tsff0ds3yx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .val-field label[b-tsff0ds3yx] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.val-input[b-tsff0ds3yx] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    width: 100%;
}

    .val-input:focus[b-tsff0ds3yx] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

    .val-input[readonly][b-tsff0ds3yx] {
        background: #f8fafc;
        color: #64748b;
    }

.val-textarea[b-tsff0ds3yx] {
    width: 100%;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #111827;
    resize: vertical;
    font-family: inherit;
}

    .val-textarea:focus[b-tsff0ds3yx] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.val-check[b-tsff0ds3yx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    font-weight: 650;
    cursor: pointer;
}

/* BLOQUES DE CONSULTA */

.val-block[b-tsff0ds3yx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.val-block-header[b-tsff0ds3yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.val-cruce-head[b-tsff0ds3yx] {
    margin-top: 6px;
}

.val-block-subtitle[b-tsff0ds3yx] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.val-muted-box[b-tsff0ds3yx] {
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* TABLAS */

.val-grid-wrapper[b-tsff0ds3yx] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.val-table[b-tsff0ds3yx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .val-table thead th[b-tsff0ds3yx] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .val-table tbody td[b-tsff0ds3yx] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .val-table tbody tr:last-child td[b-tsff0ds3yx] {
        border-bottom: 0;
    }

.val-col-importe[b-tsff0ds3yx] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 130px;
}

.val-table thead .val-col-importe[b-tsff0ds3yx] {
    text-align: right;
}

.val-col-cuenta[b-tsff0ds3yx] {
    width: 150px;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 650;
    color: #1d4ed8;
}

.val-muted-cell[b-tsff0ds3yx] {
    color: #94a3b8;
    font-style: italic;
}

.val-row-cabecera td[b-tsff0ds3yx] {
    background: #f1f5f9;
    font-weight: 850;
    color: #334155;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.val-row-subtotal td[b-tsff0ds3yx] {
    background: #fbfdff;
    font-weight: 800;
    color: #1e3a8a;
}

.val-row-total td[b-tsff0ds3yx] {
    background: #f8fbff;
    font-weight: 850;
    color: #1e3a8a;
}

.val-row-margen td[b-tsff0ds3yx] {
    background: #ecfdf5;
    font-weight: 850;
    color: #047857;
    border-top: 2px solid #a7f3d0;
}

/* BOTONES */

.val-btn[b-tsff0ds3yx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.val-btn-ico[b-tsff0ds3yx] {
    font-size: 18px;
    line-height: 1;
}

.val-btn-primary[b-tsff0ds3yx] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .val-btn-primary:hover:not(:disabled)[b-tsff0ds3yx] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.val-btn-ghost[b-tsff0ds3yx] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .val-btn-ghost:hover:not(:disabled)[b-tsff0ds3yx] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.val-btn:disabled[b-tsff0ds3yx] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ERRORES / VACÍO */

.val-error-box[b-tsff0ds3yx] {
    padding: 10px 14px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 13px;
    color: #991b1b;
    font-weight: 700;
}

.val-empty[b-tsff0ds3yx] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .val-section-grid[b-tsff0ds3yx] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Cuentas/Pages/CuentaFicha.razor.rz.scp.css */
.cuenta-ficha-page[b-wgegtd2d7l],
.cuenta-ficha-page *[b-wgegtd2d7l],
.cuenta-ficha-page *[b-wgegtd2d7l]::before,
.cuenta-ficha-page *[b-wgegtd2d7l]::after {
    box-sizing: border-box;
}

.cuenta-ficha-page[b-wgegtd2d7l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA (navegador + comandos) */

.cuenta-ficha-header[b-wgegtd2d7l] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.cuenta-ficha-header[b-wgegtd2d7l]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS Y PANEL DE PESTAÑAS */

.ct-card[b-wgegtd2d7l] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ct-tabs-panel[b-wgegtd2d7l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cuenta-ficha-tab[b-wgegtd2d7l] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .cuenta-ficha-tab:hover[b-wgegtd2d7l] {
        color: #334155;
    }

    .cuenta-ficha-tab.active[b-wgegtd2d7l] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

.ct-tab-content[b-wgegtd2d7l] {
    min-height: 200px;
}

/* SECCIÓN DATOS */

.ct-section-grid[b-wgegtd2d7l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.ct-info-card[b-wgegtd2d7l] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 13px;
    background: #ffffff;
}

.ct-info-card-full[b-wgegtd2d7l] {
    grid-column: 1 / -1;
}

.ct-info-title[b-wgegtd2d7l] {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

    .ct-info-title.no-margin[b-wgegtd2d7l] {
        margin-bottom: 0;
    }

.ct-fields[b-wgegtd2d7l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-field[b-wgegtd2d7l] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ct-field label[b-wgegtd2d7l] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.ct-field-hint[b-wgegtd2d7l] {
    font-size: 11px;
    color: #94a3b8;
}

.ct-input[b-wgegtd2d7l] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    width: 100%;
}

    .ct-input:focus[b-wgegtd2d7l] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

    .ct-input[readonly][b-wgegtd2d7l] {
        background: #f8fafc;
        color: #64748b;
    }

.ct-textarea[b-wgegtd2d7l] {
    width: 100%;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #111827;
    resize: vertical;
    font-family: inherit;
}

    .ct-textarea:focus[b-wgegtd2d7l] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.ct-check[b-wgegtd2d7l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    font-weight: 650;
    cursor: pointer;
}

.ct-muted-box[b-wgegtd2d7l] {
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* BLOQUES DE CONSULTA */

.ct-block[b-wgegtd2d7l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-block-header[b-wgegtd2d7l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.ct-block-subtitle[b-wgegtd2d7l] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.ct-rango[b-wgegtd2d7l] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

    .ct-rango .ct-field[b-wgegtd2d7l] {
        min-width: 150px;
    }

.ct-btn-consultar[b-wgegtd2d7l] {
    height: 36px;
}

/* TABLAS */

.ct-grid-wrapper[b-wgegtd2d7l] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.ct-table[b-wgegtd2d7l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ct-table thead th[b-wgegtd2d7l] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .ct-table tbody td[b-wgegtd2d7l] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .ct-table tbody tr:last-child td[b-wgegtd2d7l] {
        border-bottom: 0;
    }

.ct-col-importe[b-wgegtd2d7l] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 120px;
}

.ct-table thead .ct-col-importe[b-wgegtd2d7l] {
    text-align: right;
}

.ct-col-concepto[b-wgegtd2d7l] {
    min-width: 220px;
}

.ct-row-saldo td[b-wgegtd2d7l] {
    background: #f8fbff;
    font-weight: 800;
    color: #1e3a8a;
}

/* BOTONES */

.ct-btn[b-wgegtd2d7l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ct-btn-ghost[b-wgegtd2d7l] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .ct-btn-ghost:hover:not(:disabled)[b-wgegtd2d7l] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.ct-btn:disabled[b-wgegtd2d7l] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ERRORES / VACÍO */

.ct-error-box[b-wgegtd2d7l] {
    padding: 10px 14px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 13px;
    color: #991b1b;
    font-weight: 700;
}

.ct-empty[b-wgegtd2d7l] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .ct-section-grid[b-wgegtd2d7l] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Cuentas/Pages/CuentasPage.razor.rz.scp.css */
.cuentas-page[b-yo5ifh7awo],
.cuentas-page *[b-yo5ifh7awo],
.cuentas-page *[b-yo5ifh7awo]::before,
.cuentas-page *[b-yo5ifh7awo]::after {
    box-sizing: border-box;
}

/* La página ocupa el alto de la ventana (cabecera de 64px + 16px de margen arriba y abajo) para que
   el listado tenga SU scroll dentro y la cabecera de la tabla no se pierda al bajar. El panel de
   revisión no encoge: si no cabe, el que cede es el listado. Sin padding propio (el borde de 16px lo
   pone .main-body) y 9px entre bloques, como en Clientes. */
.cuentas-page[b-yo5ifh7awo] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    height: calc(100dvh - 96px);
    min-height: 480px;
}

    .cuentas-page > *[b-yo5ifh7awo] {
        flex-shrink: 0;
    }

/* CABECERA */

.cc-header[b-yo5ifh7awo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.cc-header-text[b-yo5ifh7awo] {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-title[b-yo5ifh7awo] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.cc-subtitle[b-yo5ifh7awo] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* Con la barra ya replegada al «···», el título y el subtítulo envuelven en vez de empujarla. */
.cc-header.command-bar-host-collapsed .cc-title[b-yo5ifh7awo],
.cc-header.command-bar-host-collapsed .cc-subtitle[b-yo5ifh7awo] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Clientes). */
.cc-header-actions[b-yo5ifh7awo] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS */

.cc-card[b-yo5ifh7awo] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* ALTA DE CUENTA (ventana flotante: los campos usan mm-field / mm-label / mm-input de ModalMaestro) */

/* El envoltorio no ocupa sitio en la columna de la página: cerrado no deja un hueco de 9px y abierto
   el fondo del modal es fijo, fuera del flujo. */
.cc-modal-alta[b-yo5ifh7awo] {
    display: contents;
}

.cc-modal-alta .cc-field-hint[b-yo5ifh7awo] {
    line-height: 1.45;
}

.cc-modal-alta .cc-error-box[b-yo5ifh7awo] {
    margin-top: 0;
}

/* Título de panel (lo usa el de revisión). */
.cc-alta-title[b-yo5ifh7awo] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 10px;
}

.cc-field-hint[b-yo5ifh7awo] {
    font-size: 11px;
    color: #94a3b8;
}

.cc-error-box[b-yo5ifh7awo] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* LISTADO */

.cuentas-page > .cc-list-panel[b-yo5ifh7awo] {
    flex: 1 1 auto;
    min-height: 260px;
    display: flex;
    flex-direction: column;
}

.cc-list-head[b-yo5ifh7awo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cc-search[b-yo5ifh7awo] {
    position: relative;
    min-width: 260px;
    flex: 0 1 340px;
}

/* RQ6: el campo «Cuenta» (empieza por), estrecho y sin icono. */
.cc-search-cuenta[b-yo5ifh7awo] {
    min-width: 110px;
    flex: 0 0 130px;
}

.cc-search-input-cuenta[b-yo5ifh7awo] {
    padding-left: 10px;
}

/* Con «Cuenta» se ven todos los niveles: el selector se apaga, no se esconde. */
.cc-nivel:disabled[b-yo5ifh7awo] {
    cursor: default;
    color: #94a3b8;
}

/* Selector de nivel: tres botones pegados, el activo relleno. */
.cc-niveles[b-yo5ifh7awo] {
    display: inline-flex;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.cc-nivel[b-yo5ifh7awo] {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid #dbe2ea;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}

    .cc-nivel:first-child[b-yo5ifh7awo] {
        border-left: 0;
    }

    .cc-nivel:hover:not(.cc-nivel-activo)[b-yo5ifh7awo] {
        background: #f8fafc;
    }

    .cc-nivel:focus-visible[b-yo5ifh7awo] {
        outline: 2px solid #bfdbfe;
        outline-offset: -2px;
    }

.cc-nivel-activo[b-yo5ifh7awo] {
    background: #2563eb;
    color: #ffffff;
}

.cc-results[b-yo5ifh7awo] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.cc-search-icon[b-yo5ifh7awo] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.cc-search-input[b-yo5ifh7awo] {
    width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px 0 34px;
    font-size: 13px;
    color: #111827;
}

    .cc-search-input:focus[b-yo5ifh7awo] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.cc-aviso-leyenda[b-yo5ifh7awo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b45309;
    font-weight: 700;
}

.cc-aviso-ico[b-yo5ifh7awo] {
    font-size: 15px;
    line-height: 1;
}

.cc-empty[b-yo5ifh7awo] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* TABLA */

/* La caja del listado: scroll propio y VISIBLE (el de la página es casi invisible a propósito). */
.cc-grid-wrapper[b-yo5ifh7awo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 #f1f5f9;
}

    .cc-grid-wrapper[b-yo5ifh7awo]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .cc-grid-wrapper[b-yo5ifh7awo]::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    .cc-grid-wrapper[b-yo5ifh7awo]::-webkit-scrollbar-thumb {
        background-color: #94a3b8;
        border-radius: 6px;
        border: 3px solid #f1f5f9;
    }

        .cc-grid-wrapper[b-yo5ifh7awo]::-webkit-scrollbar-thumb:hover {
            background-color: #64748b;
        }

/* Marca vacía al final de la lista: cuando asoma, se pide el siguiente trozo. */
.cc-centinela[b-yo5ifh7awo] {
    height: 1px;
}

.cc-cargando-mas[b-yo5ifh7awo] {
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

/* Mientras llega lo nuevo de una búsqueda se queda lo anterior, atenuado, en vez de parpadear. */
.cc-table-recargando[b-yo5ifh7awo] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.cc-table[b-yo5ifh7awo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .cc-table thead th[b-yo5ifh7awo] {
        position: sticky;
        top: 0;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
        z-index: 1;
    }

    .cc-table tbody td[b-yo5ifh7awo] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .cc-table tbody tr:last-child td[b-yo5ifh7awo] {
        border-bottom: 0;
    }

.cc-row[b-yo5ifh7awo] {
    cursor: pointer;
    transition: background 0.12s ease;
}

    .cc-row:hover[b-yo5ifh7awo] {
        background: #f8fbff;
    }

.cc-col-codigo[b-yo5ifh7awo] {
    width: 150px;
    white-space: nowrap;
}

.cc-codigo[b-yo5ifh7awo] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    display: inline-block;
}

.cc-col-nombre[b-yo5ifh7awo] {
    min-width: 220px;
}

.cc-col-centrada[b-yo5ifh7awo] {
    text-align: center;
    white-space: nowrap;
    width: 110px;
}

.cc-col-importe[b-yo5ifh7awo] {
    text-align: right;
    white-space: nowrap;
    width: 150px;
    font-variant-numeric: tabular-nums;
}

.cc-table thead .cc-col-importe[b-yo5ifh7awo] {
    text-align: right;
}

.cc-table thead .cc-col-centrada[b-yo5ifh7awo] {
    text-align: center;
}

/* BADGES */

.cc-badge[b-yo5ifh7awo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cc-badge-activa[b-yo5ifh7awo] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.cc-badge-bloqueada[b-yo5ifh7awo] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cc-badge-aviso[b-yo5ifh7awo] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
    margin-left: 8px;
}

/* BOTONES */

.cc-btn[b-yo5ifh7awo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cc-btn-ico[b-yo5ifh7awo] {
    font-size: 18px;
    line-height: 1;
}

.cc-btn-primary[b-yo5ifh7awo] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cc-btn-primary:hover:not(:disabled)[b-yo5ifh7awo] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cc-btn-ghost[b-yo5ifh7awo] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cc-btn-ghost:hover:not(:disabled)[b-yo5ifh7awo] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cc-btn:disabled[b-yo5ifh7awo] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* REVISIÓN DEL PLAN (PC7) */

.cc-revision-panel[b-yo5ifh7awo] {
    margin-bottom: 14px;
}

.cc-alta-title .cc-btn-cerrar[b-yo5ifh7awo] {
    float: right;
    padding: 2px 6px;
}

.cc-revision-contexto[b-yo5ifh7awo] {
    margin: 4px 0 10px;
    font-size: 12px;
    color: #475569;
}

.cc-revision-ok[b-yo5ifh7awo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 10px;
    font-size: 13px;
    color: #166534;
    font-weight: 600;
}

.cc-revision-tabla[b-yo5ifh7awo] {
    margin-top: 10px;
}

/* Caja de la tabla de revisión: el desplazamiento horizontal se queda aquí dentro. */
.cc-tabla-scroll[b-yo5ifh7awo] {
    max-width: 100%;
    overflow-x: auto;
}

.cc-revision-acciones[b-yo5ifh7awo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

/* RESPONSIVE */

/* Tablet: no hay paneles lado a lado que apilar (el listado ocupa todo el ancho); solo se estrecha la
   columna del nombre para que la tabla quepa sin desplazarse. */
@media (max-width: 900px) {
    .cc-col-nombre[b-yo5ifh7awo] {
        min-width: 180px;
    }

    .cc-col-codigo[b-yo5ifh7awo],
    .cc-col-importe[b-yo5ifh7awo] {
        width: auto;
    }
}

@media (max-width: 760px) {
    /* La página deja de tener el alto fijo de la ventana: con la revisión abierta no cabría todo, así
       que crece y el scroll lo lleva .main-body. El listado conserva su caja con scroll propio. */
    .cuentas-page[b-yo5ifh7awo] {
        height: auto;
        min-height: 0;
    }

        .cuentas-page > .cc-list-panel[b-yo5ifh7awo] {
            min-height: 0;
        }

    .cc-grid-wrapper[b-yo5ifh7awo] {
        flex: 0 0 auto;
        max-height: 70dvh;
    }

    .cc-title[b-yo5ifh7awo] {
        font-size: 19px;
    }

    .cc-search[b-yo5ifh7awo] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cc-niveles[b-yo5ifh7awo] {
        flex: 1 1 100%;
    }

    .cc-nivel[b-yo5ifh7awo] {
        flex: 1 1 0;
        height: 38px;
        padding: 0 8px;
    }

    .cc-results[b-yo5ifh7awo] {
        margin-left: 0;
        white-space: normal;
        flex-wrap: wrap;
    }

    .cc-revision-acciones[b-yo5ifh7awo] {
        flex-direction: column;
        align-items: stretch;
    }

        .cc-revision-acciones .cc-btn[b-yo5ifh7awo] {
            justify-content: center;
            white-space: normal;
            height: auto;
            min-height: 38px;
        }
}

/* Móvil: el estado (Activa / Bloqueada) es secundario frente a código, nombre y saldo; se ve en la ficha. */
@media (max-width: 480px) {
    .cc-col-estado[b-yo5ifh7awo] {
        display: none;
    }

    .cc-col-nombre[b-yo5ifh7awo] {
        min-width: 0;
    }

    .cc-table[b-yo5ifh7awo] {
        font-size: 12px;
    }

        .cc-table thead th[b-yo5ifh7awo],
        .cc-table tbody td[b-yo5ifh7awo] {
            padding-left: 8px;
            padding-right: 8px;
        }

    .cc-badge-aviso[b-yo5ifh7awo] {
        margin-left: 0;
        margin-top: 4px;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/CuentasAnuales/Pages/CuentasAnualesPage.razor.rz.scp.css */
.cuentas-anuales-page[b-ebvdytkmod],
.cuentas-anuales-page *[b-ebvdytkmod],
.cuentas-anuales-page *[b-ebvdytkmod]::before,
.cuentas-anuales-page *[b-ebvdytkmod]::after {
    box-sizing: border-box;
}

/* Márgenes como Clientes: sin padding propio (el borde lo pone .main-body) y 9px entre bloques. */
.cuentas-anuales-page[b-ebvdytkmod] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* CABECERA */

/* Sin `flex-wrap`, como en Clientes: si algún día lleva barra de comandos, su script necesita que no
   baje de línea para saber cuándo replegar. */
.ca-header[b-ebvdytkmod] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.ca-header-text[b-ebvdytkmod] {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-title[b-ebvdytkmod] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.ca-subtitle[b-ebvdytkmod] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.ca-card[b-ebvdytkmod] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ca-section-title[b-ebvdytkmod] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.ca-list-subtitle[b-ebvdytkmod] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* FILTROS */

.ca-filtros[b-ebvdytkmod] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.ca-field[b-ebvdytkmod] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ca-field label[b-ebvdytkmod] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.ca-select[b-ebvdytkmod] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    min-width: 130px;
}

.ca-select-informe[b-ebvdytkmod] {
    min-width: 280px;
}

.ca-select:focus[b-ebvdytkmod] {
    outline: 2px solid #bfdbfe;
    border-color: #93c5fd;
}

.ca-filtros-acciones[b-ebvdytkmod] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ca-confirm-texto[b-ebvdytkmod] {
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

/* RESULTADO */

/* C1: los botones de exportación del resultado, junto al distintivo de cuadre. */
.ca-resultado-acciones[b-ebvdytkmod] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ca-resultado-head[b-ebvdytkmod] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ca-grid-wrapper[b-ebvdytkmod] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.ca-table[b-ebvdytkmod] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ca-table thead th[b-ebvdytkmod] {
        position: sticky;
        top: 0;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .ca-table tbody td[b-ebvdytkmod] {
        padding: 7px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .ca-table tbody tr:last-child td[b-ebvdytkmod] {
        border-bottom: 0;
    }

.ca-fila-total td[b-ebvdytkmod] {
    background: #f8fafc;
    font-weight: 850;
}

/* Los títulos del modelo, en el azul de las cabeceras de los listados (el mismo que el PDF). */
.ca-fila-titulo td[b-ebvdytkmod] {
    color: #1A3D6E;
}

.ca-partida[b-ebvdytkmod] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ca-epigrafe[b-ebvdytkmod] {
    font-weight: 800;
    color: #1d4ed8;
    min-width: 34px;
    display: inline-block;
}

.ca-codigo[b-ebvdytkmod] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
}

.ca-col-importe[b-ebvdytkmod] {
    text-align: right;
    white-space: nowrap;
    width: 160px;
    font-variant-numeric: tabular-nums;
}

.ca-table thead .ca-col-importe[b-ebvdytkmod] {
    text-align: right;
}

.ca-detalle[b-ebvdytkmod] {
    min-width: 240px;
    color: #6b7280;
}

.ca-empty[b-ebvdytkmod] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* ECPN */

.ca-parte-title[b-ebvdytkmod] {
    margin: 12px 0 8px;
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

/* La matriz del ECPN lleva muchas columnas numéricas: cabeceras que envuelven y anchos
   compactos (el contenedor .ca-grid-wrapper ya aporta el scroll horizontal). */
.ca-tabla-matriz thead th[b-ebvdytkmod] {
    white-space: normal;
    vertical-align: bottom;
    min-width: 104px;
}

.ca-tabla-matriz thead th:first-child[b-ebvdytkmod] {
    min-width: 230px;
}

.ca-tabla-matriz .ca-col-importe[b-ebvdytkmod] {
    width: auto;
    min-width: 104px;
}

.ca-tabla-matriz tbody td:first-child[b-ebvdytkmod] {
    white-space: nowrap;
}

/* AVISOS */

.ca-ok-box[b-ebvdytkmod] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    font-size: 12.5px;
    color: #047857;
    font-weight: 700;
}

.ca-error-box[b-ebvdytkmod] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
}

    .ca-error-box ul[b-ebvdytkmod] {
        margin: 6px 0 0;
        padding-left: 18px;
    }

/* BADGES */

.ca-badge[b-ebvdytkmod] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ca-badge-ok[b-ebvdytkmod] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.ca-badge-error[b-ebvdytkmod] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.ca-link[b-ebvdytkmod] {
    margin-left: 8px;
    font-size: 13px;
    color: #2563eb;
    text-decoration: underline;
}

.ca-badge-aviso[b-ebvdytkmod] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.ca-aviso-ico[b-ebvdytkmod] {
    font-size: 15px;
    line-height: 1;
}

/* BOTONES */

.ca-btn[b-ebvdytkmod] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ca-btn-ico[b-ebvdytkmod] {
    font-size: 18px;
    line-height: 1;
}

.ca-btn-primary[b-ebvdytkmod] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .ca-btn-primary:hover:not(:disabled)[b-ebvdytkmod] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.ca-btn-ghost[b-ebvdytkmod] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .ca-btn-ghost:hover:not(:disabled)[b-ebvdytkmod] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.ca-btn-peligro[b-ebvdytkmod] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .ca-btn-peligro:hover:not(:disabled)[b-ebvdytkmod] {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.ca-btn:disabled[b-ebvdytkmod] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RESPONSIVE */

/* Las tablas nunca ensanchan la página: se desplazan dentro de .ca-grid-wrapper (overflow-x). */
.ca-card[b-ebvdytkmod] {
    min-width: 0;
}

/* Tablet: las acciones bajan a su propia línea bajo los selectores, alineadas a la izquierda. */
@media (max-width: 900px) {
    .ca-filtros-acciones[b-ebvdytkmod] {
        margin-left: 0;
    }

    .ca-select-informe[b-ebvdytkmod] {
        min-width: 220px;
    }

    .ca-col-importe[b-ebvdytkmod] {
        width: auto;
        min-width: 110px;
    }
}

/* Móvil: un campo por línea a todo el ancho, botones que se reparten la fila y tablas más compactas. */
@media (max-width: 600px) {
    .ca-title[b-ebvdytkmod] {
        font-size: 20px;
    }

    .ca-subtitle[b-ebvdytkmod] {
        font-size: 12px;
    }

    .ca-card[b-ebvdytkmod] {
        padding: 12px 10px;
    }

    .ca-field[b-ebvdytkmod] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .ca-select[b-ebvdytkmod],
    .ca-select-informe[b-ebvdytkmod] {
        width: 100%;
        min-width: 0;
    }

    .ca-filtros-acciones[b-ebvdytkmod] {
        width: 100%;
    }

        .ca-filtros-acciones .ca-btn[b-ebvdytkmod] {
            flex: 1 1 auto;
            justify-content: center;
        }

    .ca-confirm-texto[b-ebvdytkmod] {
        flex-basis: 100%;
    }

    .ca-table thead th[b-ebvdytkmod],
    .ca-table tbody td[b-ebvdytkmod] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .ca-col-importe[b-ebvdytkmod] {
        min-width: 92px;
    }

    .ca-detalle[b-ebvdytkmod] {
        min-width: 180px;
    }

    /* Matriz del ECPN: el rótulo de fila cede ancho y envuelve; las cifras siguen desplazándose. */
    .ca-tabla-matriz thead th:first-child[b-ebvdytkmod] {
        min-width: 160px;
    }

    .ca-tabla-matriz tbody td:first-child[b-ebvdytkmod] {
        white-space: normal;
    }

    .ca-link[b-ebvdytkmod] {
        margin-left: 0;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/CuentasAnuales/Pages/DefinicionCuentasAnualesPage.razor.rz.scp.css */
.def-page[b-tsncwmar9r],
.def-page *[b-tsncwmar9r],
.def-page *[b-tsncwmar9r]::before,
.def-page *[b-tsncwmar9r]::after {
    box-sizing: border-box;
}

/* Márgenes como Clientes: sin padding propio (el borde lo pone .main-body) y 9px entre bloques. */
.def-page[b-tsncwmar9r] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* CABECERA */

/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.def-header[b-tsncwmar9r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.def-header-text[b-tsncwmar9r] {
    flex: 1 1 auto;
    min-width: 0;
}

.def-title[b-tsncwmar9r] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.def-subtitle[b-tsncwmar9r] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    max-width: 760px;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Clientes). */
.def-header-actions[b-tsncwmar9r] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS */

.def-card[b-tsncwmar9r] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.def-section-title[b-tsncwmar9r] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.def-list-subtitle[b-tsncwmar9r] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* FILTROS */

.def-filtros[b-tsncwmar9r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.def-field[b-tsncwmar9r] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .def-field label[b-tsncwmar9r] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.def-field-buscar[b-tsncwmar9r] {
    min-width: 260px;
}

.def-select[b-tsncwmar9r] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    min-width: 130px;
}

    .def-select:focus[b-tsncwmar9r] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.def-filtros-acciones[b-tsncwmar9r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.def-confirm-texto[b-tsncwmar9r] {
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

/* TABLA */

.def-resultado-head[b-tsncwmar9r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.def-resultado-acciones[b-tsncwmar9r] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.def-grid-wrapper[b-tsncwmar9r] {
    overflow: auto;
    max-height: calc(100vh - 330px);
    min-height: 240px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.def-tabla[b-tsncwmar9r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    table-layout: fixed;
    min-width: 980px;
}

    .def-tabla thead th[b-tsncwmar9r] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 8px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .def-tabla tbody td[b-tsncwmar9r] {
        padding: 2px 4px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        vertical-align: middle;
    }

    .def-tabla tbody tr:last-child td[b-tsncwmar9r] {
        border-bottom: 0;
    }

/* La celda es un input sin marco: la tabla se lee como una hoja de cálculo y el marco aparece al
   enfocar. Cada columna fija su ancho para que la fila no baile al teclear. */
.def-cell[b-tsncwmar9r] {
    width: 100%;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12.5px;
    color: #111827;
    background: transparent;
}

    .def-cell:hover[b-tsncwmar9r] {
        border-color: #e2e8f0;
    }

    .def-cell:focus[b-tsncwmar9r] {
        outline: none;
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 2px #bfdbfe;
    }

    .def-cell[readonly][b-tsncwmar9r] {
        color: #64748b;
        cursor: not-allowed;
    }

.def-cellwrap[b-tsncwmar9r] {
    position: relative;
    display: block;
}

.def-candado[b-tsncwmar9r] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #94a3b8;
    pointer-events: none;
}

.def-mono[b-tsncwmar9r] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: #1d4ed8;
}

.def-cell-texto[b-tsncwmar9r] {
    font-weight: 500;
}

.def-col-linea[b-tsncwmar9r] {
    width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 8px;
}

.def-col-nivel[b-tsncwmar9r] { width: 64px; }
.def-col-epigrafe[b-tsncwmar9r] { width: 84px; }
.def-col-texto[b-tsncwmar9r] { width: auto; }
.def-col-clave[b-tsncwmar9r] { width: 150px; }
.def-col-formula[b-tsncwmar9r] { width: 32%; }
.def-col-signo[b-tsncwmar9r] { width: 64px; }
.def-col-acciones[b-tsncwmar9r] {
    width: 72px;
    white-space: nowrap;
    text-align: right;
}

.def-fila-total .def-cell-texto[b-tsncwmar9r] {
    font-weight: 850;
}

.def-fila-total td[b-tsncwmar9r] {
    background: #f8fafc;
}

.def-fila-error td[b-tsncwmar9r] {
    background: #fff1f2;
}

.def-error-ico[b-tsncwmar9r] {
    font-size: 15px;
    color: #dc2626;
    vertical-align: middle;
    margin-left: 4px;
}

.def-empty[b-tsncwmar9r] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* BARRA DE ESTADO (mapa de teclas o último aviso del modelo) */

.def-estado[b-tsncwmar9r] {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    min-height: 18px;
}

.def-estado-aviso[b-tsncwmar9r] {
    color: #b91c1c;
    font-weight: 700;
}

/* AVISOS */

.def-aviso-box[b-tsncwmar9r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12.5px;
    color: #b45309;
    font-weight: 600;
}

.def-error-box[b-tsncwmar9r] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
}

    .def-error-box ul[b-tsncwmar9r] {
        margin: 6px 0 0;
        padding-left: 18px;
    }

/* BADGES */

.def-badge[b-tsncwmar9r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.def-badge-aviso[b-tsncwmar9r] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

/* BOTONES */

.def-btn[b-tsncwmar9r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.def-btn-sm[b-tsncwmar9r] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.def-btn-ico[b-tsncwmar9r] {
    font-size: 18px;
    line-height: 1;
}

.def-btn-primary[b-tsncwmar9r] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .def-btn-primary:hover:not(:disabled)[b-tsncwmar9r] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.def-btn-ghost[b-tsncwmar9r] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .def-btn-ghost:hover:not(:disabled)[b-tsncwmar9r] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.def-btn-peligro[b-tsncwmar9r] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .def-btn-peligro:hover:not(:disabled)[b-tsncwmar9r] {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.def-btn:disabled[b-tsncwmar9r] {
    opacity: 0.55;
    cursor: not-allowed;
}

.def-icon-btn[b-tsncwmar9r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .def-icon-btn:hover:not(:disabled)[b-tsncwmar9r] {
        background: #f1f5f9;
        color: #1f2937;
    }

    .def-icon-btn:disabled[b-tsncwmar9r] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .def-icon-btn .material-symbols-rounded[b-tsncwmar9r] {
        font-size: 18px;
    }

.def-icon-danger:hover:not(:disabled)[b-tsncwmar9r] {
    color: #b91c1c;
    background: #fef2f2;
}

/* RESPONSIVE */

/* La tabla de partidas (min-width 980px) nunca ensancha la página: se desplaza en .def-grid-wrapper. */
.def-card[b-tsncwmar9r] {
    min-width: 0;
}

/* Con la barra replegada, el título envuelve en vez de empujarla. */
.def-header.command-bar-host-collapsed .def-title[b-tsncwmar9r],
.def-header.command-bar-host-collapsed .def-subtitle[b-tsncwmar9r] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Tablet: las acciones bajan a su propia línea bajo los selectores y la tabla deja de tener tope de
   alto (se desplaza con la página). */
@media (max-width: 900px) {
    .def-filtros-acciones[b-tsncwmar9r] {
        margin-left: 0;
    }

    .def-grid-wrapper[b-tsncwmar9r] {
        max-height: none;
    }
}

/* Táctil: los botones de fila y «Añadir partida» llegan a 36px de área de toque. */
@media (max-width: 768px) {
    .def-btn-sm[b-tsncwmar9r] {
        height: 36px;
    }

    .def-icon-btn[b-tsncwmar9r] {
        width: 36px;
        height: 36px;
    }

    .def-col-acciones[b-tsncwmar9r] {
        width: 84px;
    }

    .def-cell[b-tsncwmar9r] {
        height: 36px;
    }
}

/* Móvil: un campo por línea a todo el ancho y botones que se reparten la fila. */
@media (max-width: 600px) {
    .def-title[b-tsncwmar9r] {
        font-size: 20px;
    }

    .def-subtitle[b-tsncwmar9r] {
        font-size: 12px;
    }

    .def-card[b-tsncwmar9r] {
        padding: 12px 10px;
    }

    .def-field[b-tsncwmar9r],
    .def-field-buscar[b-tsncwmar9r] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .def-select[b-tsncwmar9r] {
        width: 100%;
        min-width: 0;
    }

    .def-filtros-acciones[b-tsncwmar9r] {
        width: 100%;
    }

        .def-filtros-acciones .def-btn[b-tsncwmar9r] {
            flex: 1 1 auto;
            justify-content: center;
        }

    .def-confirm-texto[b-tsncwmar9r] {
        flex-basis: 100%;
    }

    .def-grid-wrapper[b-tsncwmar9r] {
        min-height: 200px;
    }
}

/* Título en dos fases, como en Diario: primero en UNA línea (así la barra ve que falta sitio y pasa a solo
   iconos y luego al «···»); solo con la barra ya replegada del todo, el título envuelve. Sin esto, en móvil
   el título se parte palabra a palabra y los botones conservan su texto. */
.def-title[b-tsncwmar9r] {
    white-space: nowrap;
}

.def-header.command-bar-host-collapsed .def-title[b-tsncwmar9r] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* El bloque del título no cede hasta que la barra esté replegada del todo (igual que en Diario). */
.def-header > .def-header-text[b-tsncwmar9r] {
    flex: 0 0 auto;
    min-width: 0;
}

.def-header.command-bar-host-collapsed > .def-header-text[b-tsncwmar9r] {
    flex: 1 1 auto;
}
/* _content/ErpPowergest/Presentation/Contabilidad/Diario/Pages/DiarioPage.razor.rz.scp.css */
.diario-page[b-vori6gw4s1],
.diario-page *[b-vori6gw4s1],
.diario-page *[b-vori6gw4s1]::before,
.diario-page *[b-vori6gw4s1]::after {
    box-sizing: border-box;
}

/* La página ocupa el alto de su hueco y NO scrollea: el único que scrollea es la rejilla de asientos
   (.dg-list). Así el pie —totales + botonera— es el final real de la página y no una pegatina flotante.
   Antes el pie era `position: sticky` sobre una página de altura libre: se quedaba a la vista, sí, pero
   los asientos seguían existiendo DEBAJO y se veían deslizarse por detrás; al llegar al final del
   listado, la última fila asomaba por debajo del pie. Un panel que tapa datos en vez de terminarlos es
   justo lo que se veía «raro» y «con hueco». */
.diario-page[b-vori6gw4s1] {
    display: flex;
    flex-direction: column;
    gap: 9px;           /* sin padding propio (el borde lo pone .main-body); 9px entre bloques, como Clientes */
    height: 100%;
    min-height: 560px;  /* suelo: por debajo de esto la rejilla se quedaría sin filas visibles */
    overflow: hidden;
}

/* La tarjeta del listado es la que se estira y la que scrollea. El resto (cabecera, pestañas,
   búsqueda, pie) conserva su alto natural. */
.dg-list[b-vori6gw4s1] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .dg-list > .dg-grid-wrapper[b-vori6gw4s1] {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;   /* vertical además del horizontal que ya tenía */
    }

/* CABECERA (mismo patrón que el resto de pantallas). Sin `flex-wrap`: si la barra bajara de línea,
   su script nunca vería que falta sitio y no replegaría nada al «···». */

.dg-header[b-vori6gw4s1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Título en dos fases, como Clientes. Fase 1: en una línea y sin ceder, para que la falta de sitio
   desborde la cabecera y el CommandBar repliegue primero sus botones al «···». Fase 2 (clase
   command-bar-host-collapsed, la pone el propio CommandBar al quedar del todo replegado): el título
   cede y envuelve, en vez de empujar la barra fuera de la pantalla. */
.dg-header-text[b-vori6gw4s1] {
    flex: 0 0 auto;
    min-width: 0;
}

    .dg-header.command-bar-host-collapsed > .dg-header-text[b-vori6gw4s1] {
        flex: 1 1 auto;
    }

.dg-title[b-vori6gw4s1] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
    white-space: nowrap;
}

.dg-subtitle[b-vori6gw4s1] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.dg-header.command-bar-host-collapsed .dg-title[b-vori6gw4s1],
.dg-header.command-bar-host-collapsed .dg-subtitle[b-vori6gw4s1] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Clientes).
   Con ::deep porque el elemento lo pinta el componente CommandBar, no esta página. */
.dg-header[b-vori6gw4s1]  .dg-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS */

.dg-card[b-vori6gw4s1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.dg-section-title[b-vori6gw4s1] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

/* CAMPOS */

.dg-field[b-vori6gw4s1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .dg-field label[b-vori6gw4s1] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.dg-input[b-vori6gw4s1] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .dg-input:focus[b-vori6gw4s1] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.dg-input-sm[b-vori6gw4s1] {
    height: 32px;
}

.dg-check[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    align-self: end;
}

/* EDITOR */

.dg-editor[b-vori6gw4s1] {
    border-color: #bfdbfe;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08);
}

.dg-editor-head[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dg-editor-title[b-vori6gw4s1] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.dg-editor-head-right[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-descuadre[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dg-descuadre-ico[b-vori6gw4s1] {
    font-size: 16px;
    line-height: 1;
}

.dg-descuadre-ok[b-vori6gw4s1] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.dg-descuadre-bad[b-vori6gw4s1] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.dg-fieldset[b-vori6gw4s1] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

    .dg-fieldset:disabled[b-vori6gw4s1] {
        opacity: 0.7;
    }

.dg-editor-grid[b-vori6gw4s1] {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.dg-aviso[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12.5px;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 10px;
}

.dg-aviso-ico[b-vori6gw4s1] {
    font-size: 18px;
    line-height: 1;
}

/* ── PESTAÑAS: Diario ↔ Vista de mayor (K9) ──
   El estilo de los botones lo pone la página (ScrollableTabs solo aporta el carril y las flechas). */

.dg-tabs[b-vori6gw4s1] {
    margin-bottom: 12px;
}

.dg-tab[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

    .dg-tab:hover[b-vori6gw4s1] {
        background: #f1f5f9;
        color: #1f2937;
    }

.dg-tab-activa[b-vori6gw4s1] {
    background: #ffffff;
    border-color: #e5e7eb;
    border-bottom-color: #ffffff;
    color: #1d4ed8;
}

.dg-tab-ico[b-vori6gw4s1] {
    font-size: 17px;
    line-height: 1;
}

/* ── VISTA DE MAYOR ── */

/* La página no scrollea (ver `.diario-page`): una tarjeta sin alto acotado se corta por abajo y lo
   que no cabe no se ve. El mayor se queda con el alto que sobra y su tabla desplaza por dentro; el
   chequeo, que convive con el diario, se acota a una parte de la página y desplaza igual. Los rótulos
   de las dos tablas ya son `sticky` y se quedan a la vista al recorrerlas. */
.dg-mayor[b-vori6gw4s1] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dg-chequeo[b-vori6gw4s1] {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 45%;
    display: flex;
    flex-direction: column;
}

    .dg-mayor > .dg-grid-wrapper[b-vori6gw4s1],
    .dg-chequeo > .dg-grid-wrapper[b-vori6gw4s1] {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

.dg-mayor-cuenta[b-vori6gw4s1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    min-width: 170px;
}

.dg-mayor-cabecera[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 2px;
}

.dg-mayor-rango[b-vori6gw4s1] {
    margin-left: auto;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* El mayor NO comparte los anchos arrastrables del diario (son otras columnas): reparto automático. */
.dg-mayor-tabla[b-vori6gw4s1] {
    table-layout: auto;
    width: 100%;
    min-width: 0;
}

.dg-mayor-fila[b-vori6gw4s1] {
    cursor: pointer;
}

    .dg-mayor-fila:hover[b-vori6gw4s1] {
        background: #f8fbff;
    }

.dg-mayor-tabla tbody td[b-vori6gw4s1] {
    padding: 4px 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Saldo anterior y saldo final: son las dos cifras que enmarcan la lectura, y en el legacy están
   destacadas arriba y abajo. */
.dg-mayor-saldo td[b-vori6gw4s1] {
    background: #f8fafc;
    font-weight: 800;
    color: #1f2937;
}

.dg-mayor-saldo td:first-child[b-vori6gw4s1] {
    text-align: right;
    color: #475569;
}

.dg-mayor-acumulado[b-vori6gw4s1] {
    font-weight: 700;
    color: #1f2937;
}

/* TABLAS (apuntes editor / iva / diario) */

.dg-grid-wrapper[b-vori6gw4s1] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.dg-apuntes[b-vori6gw4s1],
.dg-iva-table[b-vori6gw4s1],
.dg-diario-table[b-vori6gw4s1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

/* `table-layout: fixed` es lo que hace que el <colgroup> MANDE: con el reparto automático el
   navegador reparte a su gusto y el ancho arrastrado se ignora en cuanto el contenido no cabe.
   `width: max-content` deja que la suma de columnas desborde el contenedor, que ya tiene scroll
   horizontal: sin eso, ensanchar una columna encogería a las demás en vez de aparecer la barra.
   Va por ID y no por clase: `.dg-diario-table` la comparten la tabla del chequeo y la del mayor,
   que NO tienen <colgroup> y con reparto fijo saldrían con todas las columnas iguales. */
#diario-editor-grid[b-vori6gw4s1] {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

    /* Cabecera pegada al borde superior de la rejilla. Ahora que el scroll vertical vive en
       .dg-grid-wrapper (y no en la página), este sticky se ancla al contenedor que toca y la fila de
       rótulos se queda a la vista mientras se recorre el listado. El z-index la pone por encima de las
       celdas, que si no la atraviesan al pasar.

       Los rótulos NO capturan el puntero, y eso es deliberado: la cabecera está por encima de las
       filas, y la única parte suya con la que se interactúa es el tirador. Sin esto, la franja de la
       cabecera se comía clics de la primera fila del listado —el puntero caía en el <th> en vez de en
       el asiento— y quien lo sufría no tenía nada que ver: el clic sencillamente no hacía nada. El
       tirador repone `pointer-events` para sí mismo, justo abajo. */
    .dg-apuntes thead th[b-vori6gw4s1],
    .dg-iva-table thead th[b-vori6gw4s1],
    .dg-diario-table thead th[b-vori6gw4s1] {
        position: sticky;
        top: 0;
        z-index: 2;
        pointer-events: none;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .dg-apuntes tbody td[b-vori6gw4s1],
    .dg-iva-table tbody td[b-vori6gw4s1] {
        padding: 4px 6px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

.dg-apuntes tfoot td[b-vori6gw4s1] {
    padding: 8px 10px;
    border-top: 2px solid #e5e7eb;
    font-weight: 800;
    color: #1f2937;
}

.dg-foot-label[b-vori6gw4s1] {
    text-align: right;
    color: #64748b;
}

.dg-foot-total[b-vori6gw4s1] {
    font-variant-numeric: tabular-nums;
}

/* ── CURSOR de la LISTA (NX1): la fila donde está el cursor de navegación ──────────────────────────
   La fila lleva `tabindex` para poder recibir el teclado, pero el foco del navegador NO debe pintar
   su recuadro punteado: quien manda visualmente es la barra azul del cursor, como en una hoja de
   cálculo. El color es el mismo azul de foco que ya usan las celdas del editor (.dg-cell:focus). */

.dg-diario-table tr[data-fila-lista][b-vori6gw4s1] {
    outline: none;   /* el foco lo dice el cursor, no el anillo del navegador */
}

/* La cabecera de la tabla es sticky: sin este margen, el scrollIntoView del cursor deja la fila JUSTO
   debajo y la cabecera la tapa. Se limita a la fila CON cursor, que es la única que se trae a la vista
   por teclado; el resto de filas no necesitan margen de scroll. */
.dg-diario-table tr[data-fila-lista].dg-cursor[b-vori6gw4s1] {
    scroll-margin-block: 40px;
}

.dg-diario-table tr[data-fila-lista].dg-cursor > td[b-vori6gw4s1] {
    background: #eaf2fe;
    box-shadow: inset 0 -1px 0 #c7dcfb, inset 0 1px 0 #c7dcfb;
}

    /* Extremos de la fila: cierra la barra por los lados para que se lea como una sola pieza. */
    .dg-diario-table tr[data-fila-lista].dg-cursor > td:first-child[b-vori6gw4s1] {
        box-shadow: inset 1px 0 0 #c7dcfb, inset 0 -1px 0 #c7dcfb, inset 0 1px 0 #c7dcfb;
    }

    .dg-diario-table tr[data-fila-lista].dg-cursor > td:last-child[b-vori6gw4s1] {
        box-shadow: inset -1px 0 0 #c7dcfb, inset 0 -1px 0 #c7dcfb, inset 0 1px 0 #c7dcfb;
    }

/* CELDA ACTIVA del cursor (NX9): dentro de la fila con cursor, la columna donde está el cursor lleva
   el mismo borde azul que una celda enfocada del editor (.dg-cell:focus), para que al pulsar Intro el
   asiento se abra «en la misma casilla» y el ojo no tenga que buscarla. Se pinta con box-shadow
   interior porque las celdas de tabla no admiten outline fiable y el borde real movería el reparto. */
.dg-diario-table tr[data-fila-lista].dg-cursor > td.dg-celda-activa[b-vori6gw4s1],
.dg-diario-table .dg-asiento-consulta tr[data-fila-lista].dg-cursor > td.dg-celda-activa[b-vori6gw4s1] {
    box-shadow: inset 0 0 0 2px #4c8bf5;
    background: #ffffff;
}

/* Con el EDITOR abierto solo hay una casilla resaltada: la suya. El cursor de la lista se apaga (no se
   quita: al cerrar el editor vuelve a estar donde estaba). */
.dg-diario-table.dg-con-editor tr[data-fila-lista].dg-cursor > td[b-vori6gw4s1],
.dg-diario-table.dg-con-editor tr[data-fila-lista].dg-cursor > td.dg-celda-activa[b-vori6gw4s1],
.dg-diario-table.dg-con-editor .dg-asiento-consulta tr[data-fila-lista].dg-cursor > td.dg-celda-activa[b-vori6gw4s1] {
    background: inherit;
    box-shadow: none;
}

/* Fila única de un asiento sin apuntes visibles: se ve que está y por qué no tiene líneas. */
.dg-sin-apuntes-aviso[b-vori6gw4s1] {
    color: #b45309;
    font-weight: 700;
    font-size: 11.5px;
}

/* El cursor NO debe competir con el resaltado ámbar de «Consultando» (un asiento localizado por una
   búsqueda). Si coinciden, manda el ámbar: es información del asiento, el cursor es solo posición. */
.dg-diario-table .dg-asiento-consulta tr[data-fila-lista].dg-cursor > td[b-vori6gw4s1] {
    background: inherit;
}

/* Celdas editables (un input por celda: base para la ergonomía futura tipo Excel) */

.dg-cell[b-vori6gw4s1] {
    width: 100%;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 8px;
    font: inherit;
    color: #111827;
    background: transparent;
}

    .dg-cell:hover[b-vori6gw4s1] {
        border-color: #e2e8f0;
        background: #fafcff;
    }

    .dg-cell:focus[b-vori6gw4s1] {
        outline: none;
        border-color: #4c8bf5;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(76, 139, 245, .18);
    }

select.dg-cell[b-vori6gw4s1] {
    height: 30px;
    cursor: pointer;
}

/* Teclado tipo Excel (K2), espejo del grid de facturación: en NAVEGACIÓN el caret va OCULTO (la celda
   se ve activa, no «en modo tecleo»); en EDICIÓN (.dg-editing, la pone CeldaCss) reaparece. Solo las
   celdas del roaming (data-campo): los inputs de IVA, desglose y filtros conservan su caret normal. */
.dg-cell[data-campo][b-vori6gw4s1] {
    caret-color: transparent;
}

    .dg-cell[data-campo].dg-editing[b-vori6gw4s1] {
        caret-color: auto;
    }

/* ── EDICIÓN IN-SITU: el bloque del asiento vivo dentro de la propia tabla del diario ── */

.dg-asiento-edicion[b-vori6gw4s1] {
    outline: 2px solid #4c8bf5;
    outline-offset: -2px;
    background: #fbfdff;
}

    .dg-asiento-edicion > tr > td[b-vori6gw4s1] {
        padding: 2px 4px;
        border-bottom: 1px solid #eef2f7;
    }

/* La cabecera de la tabla es sticky: al traer el bloque a la vista (verElemento) hay que dejarle sitio. */
.dg-asiento-edicion[b-vori6gw4s1] {
    scroll-margin-block: 40px;
}

/* Las LÍNEAS del asiento en edición miden lo mismo que las filas de la lista (32 px), para que abrir
   un asiento no lo haga crecer ni empuje lo de debajo fuera de la vista. Medían 43 px: la regla general
   `.dg-diario-table tbody td` (6 px de relleno), escrita más abajo y con la misma especificidad, pisaba
   el relleno compacto de arriba y se sumaba a los 30 px del input. Aquí el relleno vertical es CERO y la
   altura la pone el input; el relleno lateral deja el texto en la misma vertical que en la lista
   (1 px + 1 px de borde + 8 px del input = los 10 px de la celda de lectura). Va por ID para ganar. */
#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] > td[b-vori6gw4s1] {
    padding: 0 1px;
}

#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] .dg-cell[b-vori6gw4s1] {
    height: 31px;
    border-radius: 4px;
}

/* Las celdas de solo texto de la línea (punteo, número, fecha) conservan el relleno lateral de la lista. */
#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] > td.dg-col-punteo[b-vori6gw4s1],
#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] > td.dg-col-num[b-vori6gw4s1],
#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] > td.dg-col-fecha[b-vori6gw4s1] {
    padding: 0 10px;
}

#diario-editor-grid .dg-asiento-edicion > tr[data-apunte-index] > td.dg-col-punteo[b-vori6gw4s1] {
    padding-left: 6px;
    padding-right: 2px;
}

/* La barra del asiento (título, concepto, totales, botones) también se aprieta: era lo más alto del bloque. */
#diario-editor-grid .dg-asiento-edicion > tr.dg-edit-head > td[b-vori6gw4s1] {
    padding: 2px 4px;
}

.dg-edit-head td[b-vori6gw4s1] {
    background: #f0f6ff;
    border-bottom: 1px solid #dbe7fb;
}

.dg-edit-bar[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 6px;
}

.dg-edit-title[b-vori6gw4s1] {
    font-weight: 850;
    color: #1d4ed8;
    white-space: nowrap;
}

.dg-edit-concepto[b-vori6gw4s1] {
    flex: 1 1 220px;
    min-width: 160px;
}

.dg-edit-totales[b-vori6gw4s1] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.dg-edit-totales-sep[b-vori6gw4s1] {
    color: #94a3b8;
    margin: 0 2px;
}

.dg-edit-bar-acciones[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.dg-btn-activo[b-vori6gw4s1] {
    background: #eef2ff;
    color: #4338ca;
}

/* Celda de cuenta con lupa embebida (buscador): la lupa se posa a la derecha y solo aparece al pasar
   el ratón o enfocar, para no cargar visualmente la rejilla. F2 hace lo mismo desde el teclado. */
.dg-cellwrap[b-vori6gw4s1] {
    position: relative;
    display: block;
}

.dg-cell-lupa[b-vori6gw4s1] {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    color: #94a3b8;
    display: none;
    line-height: 0;
}

    .dg-cell-lupa .material-symbols-rounded[b-vori6gw4s1] {
        font-size: 16px;
    }

.dg-cellwrap:hover .dg-cell-lupa[b-vori6gw4s1],
.dg-cellwrap:focus-within .dg-cell-lupa[b-vori6gw4s1] {
    display: block;
}

    .dg-cell-lupa:hover[b-vori6gw4s1] {
        color: #2563eb;
    }

/* Cuenta que no existe todavía (se creará al guardar). */
.dg-cell-nueva[b-vori6gw4s1] {
    color: #b45309;
    text-decoration: underline dotted #d97706;
}

.dg-col-acciones-mini[b-vori6gw4s1] {
    white-space: nowrap;
    text-align: right;
}

.dg-iva-row > td[b-vori6gw4s1] {
    background: #fbfcfe;
    padding: 6px 10px;
}

/* Bordes de la VENTANA deslizante del diario (K3): fila estrecha con un botón tipo enlace centrado. */
.dg-ventana-borde td[b-vori6gw4s1] {
    padding: 2px 8px;
    text-align: center;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.dg-ventana-borde button[b-vori6gw4s1] {
    border: 0;
    background: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 10px;
}

    .dg-ventana-borde button:hover[b-vori6gw4s1] {
        text-decoration: underline;
    }

/* «Ir a asiento» (posiciona la ventana en un número): vive junto al botón Buscar. */
.dg-ir-asiento[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}

.dg-ir-input[b-vori6gw4s1] {
    width: 110px;
}

.dg-ir-aviso[b-vori6gw4s1] {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    white-space: nowrap;
}

/* Asiento en CONSULTA mientras hay un borrador descuadrado abierto: resaltado suave, sin edición. */
.dg-asiento-consulta[b-vori6gw4s1] {
    outline: 2px dashed #f59e0b;
    outline-offset: -2px;
    background: #fffdf5;
}

.dg-cell-num[b-vori6gw4s1] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dg-cell-cuenta[b-vori6gw4s1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
}

.dg-cuenta-nombre[b-vori6gw4s1] {
    font-size: 12px;
    color: #475569;
}

.dg-cuenta-nueva[b-vori6gw4s1] {
    font-size: 11.5px;
    color: #b45309;
    font-weight: 700;
}

.dg-col-cuenta[b-vori6gw4s1] {
    width: 130px;
}

.dg-col-nombre[b-vori6gw4s1] {
    width: 200px;
}

.dg-col-importe[b-vori6gw4s1] {
    width: 120px;
    text-align: right;
}

.dg-apuntes thead .dg-col-importe[b-vori6gw4s1],
.dg-iva-table thead .dg-col-importe[b-vori6gw4s1],
.dg-diario-table thead .dg-col-importe[b-vori6gw4s1] {
    text-align: right;
}

.dg-col-acciones[b-vori6gw4s1] {
    width: 120px;
    white-space: nowrap;
    text-align: right;
}

.dg-apuntes-actions[b-vori6gw4s1] {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

/* PANEL IVA */

.dg-iva-panel[b-vori6gw4s1] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.dg-iva-head[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.dg-iva-title[b-vori6gw4s1] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.dg-iva-empty[b-vori6gw4s1] {
    padding: 12px;
    font-size: 12.5px;
    color: #6b7280;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
}

/* PIE DEL EDITOR */

.dg-editor-footer[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.dg-editor-footer-left[b-vori6gw4s1],
.dg-editor-footer-right[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dg-confirm-text[b-vori6gw4s1] {
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
}

/* BÚSQUEDA */

.dg-busqueda-title[b-vori6gw4s1] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 10px;
}

.dg-busqueda-grid[b-vori6gw4s1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 12px;
    align-items: end;
}

.dg-busqueda-actions[b-vori6gw4s1],
.dg-masiva-actions[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.dg-masiva[b-vori6gw4s1] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.dg-masiva-head[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dg-masiva-title[b-vori6gw4s1] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.dg-masiva-body[b-vori6gw4s1] {
    margin-top: 10px;
}

.dg-masiva-grid[b-vori6gw4s1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 12px;
}

.dg-masiva-preview[b-vori6gw4s1] {
    font-size: 12.5px;
    color: #64748b;
    margin-right: auto;
}

/* Previsualización de la masiva (K7): lo que va a pasar, antes de aplicarlo. */
.dg-masiva-simulacion[b-vori6gw4s1] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 12.5px;
    color: #334155;
    max-height: 260px;
    overflow: auto;
}

.dg-masiva-simulacion-head[b-vori6gw4s1] {
    font-weight: 700;
    margin-bottom: 6px;
}

.dg-masiva-simulacion-vacia[b-vori6gw4s1] {
    color: #64748b;
    font-style: italic;
}

.dg-masiva-simulacion-tabla[b-vori6gw4s1] {
    width: 100%;
    border-collapse: collapse;
}

    .dg-masiva-simulacion-tabla th[b-vori6gw4s1] {
        text-align: left;
        font-weight: 700;
        color: #64748b;
        padding: 2px 8px 2px 0;
    }

    .dg-masiva-simulacion-tabla td[b-vori6gw4s1] {
        padding: 2px 8px 2px 0;
        border-top: 1px solid #eef2f7;
        vertical-align: top;
    }

.dg-masiva-flecha[b-vori6gw4s1] {
    color: #94a3b8;
    margin: 0 4px;
}

.dg-masiva-resumen[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    font-size: 12.5px;
    color: #047857;
    font-weight: 600;
}

.dg-link-btn[b-vori6gw4s1] {
    border: 0;
    background: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

    .dg-link-btn:hover[b-vori6gw4s1] {
        text-decoration: underline;
    }

/* LISTA DEL DIARIO */

.dg-list-head[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dg-list-subtitle[b-vori6gw4s1] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.dg-list-range[b-vori6gw4s1] {
    display: flex;
    align-items: end;
    gap: 8px;
}

.dg-btn-consultar[b-vori6gw4s1] {
    align-self: end;
}

.dg-empty[b-vori6gw4s1] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.dg-diario-table tbody td[b-vori6gw4s1] {
    padding: 6px 10px;
    color: #1f2937;
    border-bottom: 1px solid #f5f7fa;
    white-space: nowrap;
}

.dg-asiento[b-vori6gw4s1] {
    cursor: pointer;
    transition: background 0.12s ease;
    border-top: 2px solid #eef2f7;
}

    .dg-asiento:first-child[b-vori6gw4s1] {
        border-top: 0;
    }

    .dg-asiento:hover[b-vori6gw4s1] {
        background: #f8fbff;
    }

.dg-asiento-roto[b-vori6gw4s1] {
    background: #fff7f7;
}

    .dg-asiento-roto:hover[b-vori6gw4s1] {
        background: #fdeeee;
    }

/* Los ANCHOS de la tabla del diario los pone el <colgroup> (preferencia por usuario, K9), no estas
   reglas: aquí solo queda la apariencia. Poner de nuevo un width aquí ganaría al <col> en algunos
   navegadores y el arrastre dejaría de verse. */

.dg-col-num[b-vori6gw4s1] {
    font-weight: 800;
    color: #1d4ed8;
}

.dg-col-doc[b-vori6gw4s1] {
    text-align: center;
}

.dg-col-concepto[b-vori6gw4s1] {
    white-space: normal;
}

/* Tirador de redimensionado: ocupa el borde derecho de la cabecera.
   OJO con el anclaje: `position: sticky` NO establece bloque contenedor para un hijo absoluto (solo
   lo hacen relative/absolute/fixed y las transformaciones). La cabecera es sticky, así que un tirador
   absoluto se anclaba al ancestro posicionado más cercano —fuera de la celda— y no se veía. Por eso
   el tirador es INLINE-BLOCK y se coloca por flujo, al final del rótulo: no necesita anclaje y
   funciona igual con la cabecera pegada. */
/* La celda NO se convierte en flex: un <th> que deja de ser table-cell se lleva por delante el
   reparto de `table-layout: fixed`, que es justo lo que hace que el <colgroup> mande. Se queda como
   celda normal y el tirador se coloca por flujo, flotado a la derecha. */
#diario-editor-grid thead th[b-vori6gw4s1] {
    padding-right: 4px;
}

.dg-col-tirador[b-vori6gw4s1] {
    float: right;
    width: 9px;
    height: 17px;
    margin: 0 -4px 0 6px;   /* muerde el padding de la celda: la zona sensible llega al borde */
    /* La cabecera entera es transparente al puntero (ver `thead th` arriba); el tirador lo recupera
       para sí, que es lo único agarrable de esa fila. */
    pointer-events: auto;
    cursor: col-resize;
    /* La franja visible es más fina que la zona sensible: se agarra fácil y no ensucia la cabecera. */
    background: linear-gradient(to right, transparent 0, transparent 4px, #cbd5e1 4px, #cbd5e1 5px, transparent 5px);
    touch-action: none;
    user-select: none;
}

    .dg-col-tirador:hover[b-vori6gw4s1] {
        background: linear-gradient(to right, transparent 0, transparent 3px, #2563eb 3px, #2563eb 6px, transparent 6px);
    }

/* Mientras se arrastra, el cursor de columna manda en toda la página y nada selecciona texto: si no,
   el arrastre pinta de azul media rejilla. */
:global(body.grid-col-arrastrando)[b-vori6gw4s1] {
    cursor: col-resize !important;
    user-select: none !important;
}

.dg-diario-table .dg-col-cuenta[b-vori6gw4s1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #334155;
}

.dg-diario-table .dg-col-importe[b-vori6gw4s1] {
    font-variant-numeric: tabular-nums;
}

/* `.dg-col-cuenta`, `.dg-col-importe` y `.dg-col-punteo` los COMPARTE la rejilla del diario con las
   tablas del editor, del IVA y del mayor, que siguen teniendo anchos fijos de diseño. Solo dentro de
   la rejilla manda el <colgroup> (K9): aquí se anula la regla compartida, sin tocar las demás. */
#diario-editor-grid .dg-col-cuenta[b-vori6gw4s1],
#diario-editor-grid .dg-col-importe[b-vori6gw4s1],
#diario-editor-grid .dg-col-punteo[b-vori6gw4s1] {
    width: auto;
}

/* BADGES */

.dg-badge[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dg-badge-manual[b-vori6gw4s1] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.dg-badge-doc[b-vori6gw4s1] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.dg-badge-rect[b-vori6gw4s1] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

/* Rótulo del asiento en consulta: mismo ámbar que su borde, para que se lean como una sola señal. */
.dg-badge-consulta[b-vori6gw4s1] {
    margin-right: 6px;
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

/* BOTONES */

.dg-btn[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dg-btn-sm[b-vori6gw4s1] {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

.dg-btn-ico[b-vori6gw4s1] {
    font-size: 18px;
    line-height: 1;
}

.dg-btn-primary[b-vori6gw4s1] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .dg-btn-primary:hover:not(:disabled)[b-vori6gw4s1] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.dg-btn-ghost[b-vori6gw4s1] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .dg-btn-ghost:hover:not(:disabled)[b-vori6gw4s1] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.dg-btn-danger[b-vori6gw4s1] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .dg-btn-danger:hover:not(:disabled)[b-vori6gw4s1] {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.dg-btn-danger-ghost[b-vori6gw4s1] {
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
}

    .dg-btn-danger-ghost:hover:not(:disabled)[b-vori6gw4s1] {
        background: #fef2f2;
    }

.dg-btn:disabled[b-vori6gw4s1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dg-icon-btn[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .dg-icon-btn:hover[b-vori6gw4s1] {
        background: #f1f5f9;
        color: #1f2937;
    }

    .dg-icon-btn .material-symbols-rounded[b-vori6gw4s1] {
        font-size: 18px;
    }

.dg-icon-danger:hover[b-vori6gw4s1] {
    background: #fef2f2;
    color: #b91c1c;
}

/* ─────────── Punteo de apuntes (K8) ─────────── */

.dg-col-punteo[b-vori6gw4s1] {
    width: 26px;
    text-align: center;
    padding-left: 6px;
    padding-right: 2px;
}

.dg-punteo[b-vori6gw4s1] {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    line-height: 1;
    color: #cbd5e1;
}

    .dg-punteo.dg-punteado[b-vori6gw4s1] {
        color: #2563eb;
    }

    .dg-punteo:hover[b-vori6gw4s1] {
        color: #1d4ed8;
    }

.dg-punteo-editor[b-vori6gw4s1] {
    white-space: nowrap;
}

/* Fila de la lista con PAREJA (modo compacto): dos marcas, mitad debe · mitad haber, en la misma
   columna. Se achican al tamaño de las del editor para que quepan sin ensanchar la columna. */
.dg-punteo-pareja[b-vori6gw4s1] {
    white-space: nowrap;
}

    .dg-punteo-pareja .dg-punteo[b-vori6gw4s1] {
        font-size: 11px;
    }

.dg-punteo-mini[b-vori6gw4s1] {
    font-size: 11px;
    line-height: 1;
    color: #cbd5e1;
    user-select: none;
}

    .dg-punteo-mini.dg-punteado[b-vori6gw4s1] {
        color: #2563eb;
    }

/* Chip del total de marcados del plan activo (junto a los filtros de la lista). */
.dg-punteo-total[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 12.5px;
    color: #1d4ed8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dg-punteo-total-marca[b-vori6gw4s1] {
    font-size: 12px;
    line-height: 1;
}

/* Ventana baja: se suelta la altura fija y vuelve a scrollear la página entera. Comprimir la rejilla
   por debajo de unas pocas filas es peor que perder el pie de vista, y el pie sigue estando al final
   del documento —donde se llega bajando—. */
@media (max-height: 640px) {
    .diario-page[b-vori6gw4s1] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .dg-list[b-vori6gw4s1],
    .dg-list > .dg-grid-wrapper[b-vori6gw4s1] {
        overflow: visible;
    }

        .dg-list > .dg-grid-wrapper[b-vori6gw4s1] {
            overflow-x: auto;
        }
}

/* ─────────── Dimensión analítica (contabilidad de costes, C6) ─────────── */

.dg-col-dim[b-vori6gw4s1] {
    width: 130px;
}

.dg-cell-dim[b-vori6gw4s1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    text-transform: uppercase;
}

    .dg-cell-dim:disabled[b-vori6gw4s1] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

.dg-icon-btn.dg-icon-active[b-vori6gw4s1] {
    color: #6d28d9;
    background: #f5f3ff;
}

/* Fila expandible con el editor de desglose por combinación */

.dg-desglose-row > td[b-vori6gw4s1] {
    background: #faf9ff;
    border-bottom: 1px solid #ede9fe;
    padding: 0;
}

.dg-desglose[b-vori6gw4s1] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 3px solid #a78bfa;
}

.dg-desglose-head[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dg-desglose-title[b-vori6gw4s1] {
    font-size: 12.5px;
    font-weight: 800;
    color: #5b21b6;
}

.dg-desglose-table[b-vori6gw4s1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #ffffff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    overflow: hidden;
}

    .dg-desglose-table thead th[b-vori6gw4s1] {
        background: #f5f3ff;
        color: #6d28d9;
        font-weight: 800;
        text-align: left;
        padding: 7px 10px;
        white-space: nowrap;
    }

    .dg-desglose-table tbody td[b-vori6gw4s1] {
        padding: 5px 8px;
        border-top: 1px solid #f3f0ff;
    }

.dg-desglose-actions[b-vori6gw4s1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* BOTONERA DE TECLAS DE FUNCIÓN + BARRA DE ESTADO (K5)
   Pie fijo del diario, sobrio: a la izquierda el mapa de teclas del ERP legacy, a la derecha lo que
   Application sabe de la cuenta bajo el cursor. Los importes van tabulares, como el resto de cifras. */

/* ── PANEL DE TOTALES (K9): los tres subtotales del legacy en una sola rejilla ──
   Va pegado sobre la botonera y comparte su fondo, para que se lean como un mismo pie. Las cifras
   son tabulares y alineadas a la derecha: una columna de importes solo se compara si los dígitos
   caen unos sobre otros. */

/* Ya NO es sticky: el pie es el último bloque de la columna y la rejilla scrollea por encima de él,
   no por detrás. Sigue siempre a la vista porque la página no scrollea. */
.dg-totales[b-vori6gw4s1] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: -1px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px 12px 0 0;
}

.dg-totales-tabla[b-vori6gw4s1] {
    border-collapse: collapse;
    font-size: 12px;
}

    .dg-totales-tabla thead th[b-vori6gw4s1] {
        padding: 0 10px 3px;
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
        text-align: right;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .dg-totales-tabla tbody th[b-vori6gw4s1] {
        padding: 3px 14px 3px 0;
        font-weight: 700;
        color: #475569;
        text-align: left;
        white-space: nowrap;
    }

    .dg-totales-tabla tbody td[b-vori6gw4s1] {
        padding: 3px 10px;
        border-bottom: 1px solid #eef2f7;
    }

    .dg-totales-tabla tbody tr:last-child td[b-vori6gw4s1] {
        border-bottom: none;
    }

.dg-totales-num[b-vori6gw4s1] {
    min-width: 104px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dg-totales-saldo[b-vori6gw4s1] {
    font-weight: 800;
    color: #1f2937;
}

.dg-totales-vacio[b-vori6gw4s1] {
    color: #94a3b8;
    font-style: italic;
    text-align: left;
}

/* Cuadre y descuadre: el estado que decide si el asiento se puede grabar. Verde discreto cuando
   cuadra; rojo con fondo cuando no, porque es lo que hay que corregir antes de seguir. */
.dg-totales-cuadra[b-vori6gw4s1],
.dg-totales-descuadre[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-weight: 800;
}

.dg-totales-cuadra[b-vori6gw4s1] {
    color: #15803d;
}

.dg-totales-descuadre[b-vori6gw4s1] {
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 5px;
}

.dg-totales-ico[b-vori6gw4s1] {
    font-size: 15px;
    line-height: 1;
}

.dg-totales-lado[b-vori6gw4s1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
}

.dg-totales-cuenta[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    font-size: 12px;
    color: #475569;
}

.dg-totales-punteo[b-vori6gw4s1] {
    min-width: 150px;
}

.dg-barra[b-vori6gw4s1] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    /* Sin esquinas arriba: el panel de totales se apoya justo encima y los dos son un mismo pie. */
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.05);
}

.dg-barra-teclas[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.dg-tecla[b-vori6gw4s1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    /* El icono ya no acompaña a nada: con la tecla fuera del rótulo (vive en el tooltip), es la única
       pista visual que distingue un botón de otro en una barra de doce. Por eso deja de ir apagado
       —lo estaba para no competir con el <b>Fx</b> azul, que ya no existe— y toma su color. */
    .dg-tecla-ico[b-vori6gw4s1] {
        font-size: 16px;
        line-height: 1;
        color: #475569;
    }

    .dg-tecla:hover:not(:disabled) .dg-tecla-ico[b-vori6gw4s1] {
        color: #1d4ed8;
    }

    .dg-tecla:hover:not(:disabled)[b-vori6gw4s1] {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .dg-tecla:disabled[b-vori6gw4s1] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.dg-tecla-ctrl b[b-vori6gw4s1] {
    color: #7c3aed;
}

.dg-barra-sep[b-vori6gw4s1] {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: #e2e8f0;
}

.dg-barra-estado[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 12px;
    color: #475569;
}

.dg-barra-cuenta[b-vori6gw4s1] {
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    color: #111827;
}

.dg-barra-nombre[b-vori6gw4s1] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
}

.dg-barra-num[b-vori6gw4s1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dg-barra-saldo[b-vori6gw4s1] {
    font-weight: 800;
    color: #1f2937;
}

.dg-barra-chip[b-vori6gw4s1] {
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
}

.dg-barra-vacio[b-vori6gw4s1] {
    color: #94a3b8;
    font-style: italic;
}

.dg-barra-asiento[b-vori6gw4s1] {
    padding-left: 10px;
    border-left: 1px solid #e2e8f0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.dg-barra-aviso[b-vori6gw4s1] {
    font-weight: 700;
    color: #b45309;
    white-space: nowrap;
}

/* ── Ventana de búsqueda de apuntes (F11/F12, ventana del legacy) ── */

.dg-bapuntes-overlay[b-vori6gw4s1] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
}

.dg-bapuntes[b-vori6gw4s1] {
    width: min(860px, 100%);
    max-height: 84vh;
    overflow: auto;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}

.dg-bapuntes-expresion[b-vori6gw4s1] {
    grid-column: 1 / -1;
}

.dg-bapuntes-aviso[b-vori6gw4s1] {
    margin-top: 8px;
    font-weight: 700;
    color: #b45309;
}

/* ── Ventanas de BÚSQUEDA y MASIVA (M0/M1): lista de candidatos y rótulo del ámbito ── */
.dg-candidatos[b-vori6gw4s1] {
    margin-top: 12px;
    max-height: 38vh;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    background: #f8fafc;
}

.dg-candidato[b-vori6gw4s1] {
    cursor: pointer;
}

    .dg-candidato:hover td[b-vori6gw4s1],
    .dg-candidato:focus td[b-vori6gw4s1] {
        background: #eaf2fe;
    }

    .dg-candidato:focus[b-vori6gw4s1] {
        outline: none;
    }

.dg-masiva-ambito[b-vori6gw4s1] {
    margin: 4px 0 10px;
    font-size: 12.5px;
    color: #475569;
}

/* ── Diálogo «Asiento automático de IVA» (K5c/M2): la ventana del legacy ── */
.dg-iva-dialogo[b-vori6gw4s1] {
    width: min(760px, 100%);
}

.dg-iva-cabecera[b-vori6gw4s1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.dg-iva-cuenta[b-vori6gw4s1] {
    grid-column: span 2;
}

.dg-iva-cuenta-fila[b-vori6gw4s1] {
    display: flex;
    gap: 8px;
}

    .dg-iva-cuenta-fila input:first-child[b-vori6gw4s1] {
        width: 130px;
        flex: 0 0 auto;
    }

.dg-iva-nombre[b-vori6gw4s1] {
    flex: 1 1 auto;
    background: #f8fafc;
    color: #475569;
}

.dg-iva-bases[b-vori6gw4s1] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

    .dg-iva-bases th[b-vori6gw4s1] {
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        padding: 2px 6px;
    }

    .dg-iva-bases td[b-vori6gw4s1] {
        padding: 3px 6px;
        vertical-align: middle;
    }

    .dg-iva-bases tbody tr:nth-child(even) td[b-vori6gw4s1] {
        border-bottom: 1px solid #eef2f7;
        padding-bottom: 8px;
    }

    .dg-iva-bases td input[b-vori6gw4s1] {
        width: 110px;
    }

.dg-iva-rotulo[b-vori6gw4s1] {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.dg-iva-cuenta-sel[b-vori6gw4s1] {
    min-width: 220px;
}

.dg-iva-pie[b-vori6gw4s1] {
    justify-content: flex-start;
}

.dg-iva-espacio[b-vori6gw4s1] {
    flex: 1 1 auto;
}

/* Ventana de ASIENTOS PREDEFINIDOS (C4): reutiliza el overlay de las ventanas del diario. Más
   estrecha que la de búsqueda porque solo lleva una lista y unos pocos importes. */
.dg-plantillas[b-vori6gw4s1] {
    width: min(620px, 100%);
}

.dg-plantillas-lista[b-vori6gw4s1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 52vh;
    overflow: auto;
}

/* Cada plantilla es un botón entero y no una fila con un enlace: elegirla es el único gesto que
   admite la lista, y un blanco grande se acierta con el ratón sin apuntar. */
.dg-plantilla-item[b-vori6gw4s1] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

    .dg-plantilla-item:hover[b-vori6gw4s1] {
        background: #f8fafc;
        border-color: #c7d2fe;
    }

.dg-plantilla-ico[b-vori6gw4s1] {
    font-size: 20px;
    color: #4338ca;
}

.dg-plantilla-txt[b-vori6gw4s1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-plantilla-sub[b-vori6gw4s1] {
    font-size: 12px;
    color: #6b7280;
}

/* La cuenta y el lado, junto al rótulo del hueco: sin ellos «Sueldo bruto» no dice dónde cae. */
.dg-plantilla-cuenta[b-vori6gw4s1] {
    font-weight: 500;
    color: #94a3b8;
}

.dg-plantillas-vacio[b-vori6gw4s1] {
    padding: 10px 2px;
    font-size: 13px;
    color: #6b7280;
}

/* Panel de CARTERA (F6, K6): reutiliza el overlay de las ventanas del diario. La tabla es
   focusable (tabindex 0): el anillo de foco señala dónde caen las teclas. */
.dg-cartera[b-vori6gw4s1] {
    width: min(760px, 100%);
}

.dg-cartera-tabla[b-vori6gw4s1] {
    max-height: 44vh;
    overflow: auto;
    outline: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

    .dg-cartera-tabla:focus[b-vori6gw4s1] {
        border-color: #4338ca;
        box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15);
    }

    .dg-cartera-tabla tbody tr[b-vori6gw4s1] {
        cursor: pointer;
    }

.dg-cartera-marca[b-vori6gw4s1] {
    width: 30px;
    text-align: center;
    color: #15803d;
    font-weight: 800;
}

.dg-cartera-tabla tr.dg-cartera-sel td[b-vori6gw4s1] {
    background: #eef2ff;
}

.dg-cartera-tabla tr.dg-cartera-marcada td[b-vori6gw4s1] {
    background: #ecfdf5;
}

.dg-cartera-tabla tr.dg-cartera-sel.dg-cartera-marcada td[b-vori6gw4s1] {
    background: #d1fae5;
}

.dg-cartera-sentido[b-vori6gw4s1] {
    margin-left: 8px;
}

.dg-cartera-pie[b-vori6gw4s1] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

    .dg-cartera-pie .dg-field[b-vori6gw4s1] {
        min-width: 220px;
    }

.dg-cartera-ayuda[b-vori6gw4s1] {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

.dg-expresion-ayuda[b-vori6gw4s1] {
    margin-top: 8px;
    font-size: 12px;
    color: #475569;
}

    .dg-expresion-ayuda summary[b-vori6gw4s1] {
        cursor: pointer;
        font-weight: 700;
        color: #4338ca;
    }

    .dg-expresion-ayuda ul[b-vori6gw4s1] {
        margin: 6px 0;
        padding-left: 18px;
    }

    .dg-expresion-ayuda code[b-vori6gw4s1] {
        background: #f1f5f9;
        border-radius: 4px;
        padding: 0 4px;
    }

/* ── LADOS DEBE / HABER (interruptor «Colores») ──
   Los clientes no distinguían a simple vista en qué lado caía cada importe: las dos columnas de
   importe van juntas en el centro y 93,58 | 93,58 se leía como una sola cifra. Sin líneas verticales:
   la cabecera pasa a barra azul acero (tramo debe más oscuro, tramo haber más claro) y cada lado lleva
   un velo del mismo gris azulado con distinta intensidad. El velo va en `background-image` para
   sumarse al fondo de la fila sin pisarlo; la fila con cursor y la celda activa siguen mandando con su
   `background`. Todo cuelga de `.dg-lados`: sin la clase, la lista se ve como siempre. */
.dg-diario-table.dg-lados thead th[b-vori6gw4s1] {
    background: linear-gradient(#5b7896, #3f5b78);
    color: #f4f7fb;
    border-bottom-color: #2f4760;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

    .dg-diario-table.dg-lados thead th.dg-lado-debe[b-vori6gw4s1] {
        background: linear-gradient(#46627f, #2e4863);
    }

    .dg-diario-table.dg-lados thead th.dg-lado-haber[b-vori6gw4s1] {
        background: linear-gradient(#7390ad, #57728f);
    }

    .dg-diario-table.dg-lados thead .dg-col-tirador[b-vori6gw4s1] {
        background: linear-gradient(to right, transparent 0, transparent 4px, rgba(255, 255, 255, 0.35) 4px, rgba(255, 255, 255, 0.35) 5px, transparent 5px);
    }

.dg-diario-table.dg-lados tbody td.dg-lado-debe[b-vori6gw4s1] {
    background-image: linear-gradient(rgba(63, 91, 120, 0.07), rgba(63, 91, 120, 0.07));
}

.dg-diario-table.dg-lados tbody td.dg-lado-haber[b-vori6gw4s1] {
    background-image: linear-gradient(rgba(63, 91, 120, 0.03), rgba(63, 91, 120, 0.03));
}

/* Aire entre los dos importes: solo el debe se separa (el haber va alineado a la derecha, su relleno
   izquierdo no mueve la cifra). En el editor el relleno lo pone el input: se le suma lo mismo para
   que la cifra no salte al abrir el asiento. */
.dg-diario-table.dg-lados td.dg-lado-debe.dg-col-importe[b-vori6gw4s1],
.dg-diario-table.dg-lados th.dg-lado-debe.dg-col-importe[b-vori6gw4s1] {
    padding-right: 18px;
}

#diario-editor-grid.dg-lados .dg-asiento-edicion > tr[data-apunte-index] > td.dg-lado-debe.dg-col-importe[b-vori6gw4s1] {
    padding-right: 9px;
}

/* RESPONSIVE
   Tablet (≤ 900px): lo que va lado a lado se apila y las filas de filtros envuelven. Móvil (≤ 600px):
   la página deja de ser de alto fijo y crece con su contenido (con cabecera, filtros, totales y
   botonera apilados, a la rejilla no le quedaría ni una fila), los campos van a todo el ancho y los
   controles toman un alto tocable. Las tablas anchas siguen desplazándose en horizontal DENTRO de su
   contenedor (.dg-grid-wrapper, el panel de totales, las ventanas); la página nunca.
   Va al FINAL del fichero a propósito: a igual especificidad gana la última regla, y varias de las que
   ajusta (teclas, ventanas, diálogo de IVA, cartera) se declaran más abajo que la antigua sección. */

@media (max-width: 900px) {
    .dg-editor-grid[b-vori6gw4s1] {
        grid-template-columns: 1fr;
    }

    /* Teclas de función tocables ya en tablet (26px es medida de ratón). */
    .dg-tecla[b-vori6gw4s1] {
        height: 36px;
    }

    .dg-list-range[b-vori6gw4s1] {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* Los cuatro importes del panel de totales no caben en un móvil: se desplaza el panel, no la página. */
    .dg-totales[b-vori6gw4s1] {
        overflow-x: auto;
    }

    .dg-editor-footer[b-vori6gw4s1],
    .dg-busqueda-actions[b-vori6gw4s1],
    .dg-masiva-actions[b-vori6gw4s1] {
        flex-wrap: wrap;
    }

    .dg-iva-cuenta[b-vori6gw4s1] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .diario-page[b-vori6gw4s1] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .dg-list[b-vori6gw4s1],
    .dg-list > .dg-grid-wrapper[b-vori6gw4s1] {
        overflow: visible;
    }

        .dg-list > .dg-grid-wrapper[b-vori6gw4s1] {
            overflow-x: auto;
        }

    .dg-title[b-vori6gw4s1] {
        font-size: 19px;
    }

    .dg-card[b-vori6gw4s1] {
        padding: 12px;
    }

    /* Filtros de la lista y del mayor: cada campo a todo el ancho; las dos casillas comparten fila. */
    .dg-list-range > .dg-field[b-vori6gw4s1] {
        flex: 1 1 100%;
        min-width: 0;
    }

        .dg-list-range > .dg-field:has(> input[type="checkbox"])[b-vori6gw4s1] {
            flex: 1 1 0;
        }

    .dg-list-range .dg-input[b-vori6gw4s1],
    .dg-mayor-cuenta[b-vori6gw4s1] {
        width: 100%;
        min-width: 0;
    }

    .dg-list-range > .dg-btn-consultar[b-vori6gw4s1] {
        flex: 1 1 100%;
        justify-content: center;
    }

    .dg-busqueda-grid[b-vori6gw4s1],
    .dg-masiva-grid[b-vori6gw4s1],
    .dg-iva-cabecera[b-vori6gw4s1] {
        grid-template-columns: 1fr;
    }

    /* Alto tocable (≥ 36px) en controles y casillas. */
    .dg-input-sm[b-vori6gw4s1],
    .dg-btn-sm[b-vori6gw4s1],
    .dg-tecla[b-vori6gw4s1] {
        height: 36px;
    }

    .dg-field input[type="checkbox"][b-vori6gw4s1] {
        width: 20px;
        height: 20px;
        margin: 8px 0;
    }

    .dg-barra-estado[b-vori6gw4s1] {
        margin-left: 0;
    }

    /* Ventanas superpuestas: casi a pantalla completa. */
    .dg-bapuntes-overlay[b-vori6gw4s1] {
        padding: 12px 8px;
    }

    .dg-bapuntes[b-vori6gw4s1] {
        max-height: calc(100vh - 24px);
    }

    .dg-cartera-pie .dg-field[b-vori6gw4s1],
    .dg-iva-cuenta-sel[b-vori6gw4s1] {
        flex: 1 1 100%;
        min-width: 0;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Hub/Pages/ContabilidadHubPage.razor.rz.scp.css */
.conta-hub[b-nltsg7tgc4],
.conta-hub *[b-nltsg7tgc4],
.conta-hub *[b-nltsg7tgc4]::before,
.conta-hub *[b-nltsg7tgc4]::after {
    box-sizing: border-box;
}

.conta-hub[b-nltsg7tgc4] {
    min-width: 0;
    /* Sin padding propio (el borde lo pone .main-body); 9px entre cabecera y contenido, como Clientes. */
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* CABECERA (mismo patrón visual que el resto de pantallas: cc-header). Sin `flex-wrap`: si la barra
   bajara de línea, su script nunca vería que falta sitio y no replegaría nada al «···». */

.cc-header[b-nltsg7tgc4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.cc-header-text[b-nltsg7tgc4] {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-eyebrow[b-nltsg7tgc4] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.cc-title[b-nltsg7tgc4] {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.cc-subtitle[b-nltsg7tgc4] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* CommandBar de la cabecera, como en Cuentas y Clientes: SIN ::deep a propósito. Con ::deep la regla sí
   llega a la barra y su `flex: 0 0 auto` le impide encoger, así que en móvil aplasta el título en vez de
   replegarse. */
.cc-header-actions[b-nltsg7tgc4] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS DE SECCIÓN */

.cc-card[b-nltsg7tgc4] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cc-section-title[b-nltsg7tgc4] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.cc-list-subtitle[b-nltsg7tgc4] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.cc-empty[b-nltsg7tgc4] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.cc-error-box[b-nltsg7tgc4] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* TARJETAS-ENLACE */

.ch-tarjetas[b-nltsg7tgc4] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ch-tarjeta[b-nltsg7tgc4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .ch-tarjeta:hover[b-nltsg7tgc4] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

.ch-tarjeta-ico[b-nltsg7tgc4] {
    font-size: 22px;
    line-height: 1;
    color: #2563eb;
}

.ch-tarjeta-texto[b-nltsg7tgc4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ch-tarjeta-titulo[b-nltsg7tgc4] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.ch-tarjeta-desc[b-nltsg7tgc4] {
    font-size: 11.5px;
    color: #6b7280;
}

/* RESPONSIVE: tres columnas de tarjetas en escritorio, dos en tablet y una en móvil. La cabecera no
   envuelve: el título cede (min-width:0) y el CommandBar repliega solo al «···». */

@media (max-width: 1100px) {
    .ch-tarjetas[b-nltsg7tgc4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ch-tarjetas[b-nltsg7tgc4] {
        grid-template-columns: 1fr;
    }
}

/* Tablet y móvil: menos relleno en las tarjetas para no gastar el ancho en márgenes, y las
   tarjetas-enlace con área de toque holgada. */
@media (max-width: 768px) {
    .cc-card[b-nltsg7tgc4] {
        padding: 12px;
    }

    .ch-tarjeta[b-nltsg7tgc4] {
        min-height: 44px;
        padding: 10px;
    }
}

@media (max-width: 640px) {
    .cc-title[b-nltsg7tgc4] {
        font-size: 19px;
    }

    .cc-subtitle[b-nltsg7tgc4] {
        font-size: 12px;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Inmovilizado/Pages/InmovilizadoPage.razor.rz.scp.css */
/*
    Inmovilizado (C3). Mismo vocabulario visual que «Operaciones contables» y «Libros oficiales»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    LibrosOficialesPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y todo el alto, como Clientes: sin margen propio (el de la aplicación ya lo pone
   .main-body), 9px entre bloques y el suelo en la pantalla. El listado de elementos se queda con el
   alto que sobra (ver .op-card-elementos). */
.op-page[b-2btiu4nc3m] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.op-header[b-2btiu4nc3m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    flex: 0 0 auto;
}

/* Título en dos fases, como Clientes: primero NO cede (en una línea), para que el desbordamiento lo vea el
   script del CommandBar y repliegue la barra al «···»; ya replegada (clase command-bar-host-collapsed que
   pone el propio CommandBar en la cabecera), el título cede y envuelve en vez de empujar la barra. */
.op-header-text[b-2btiu4nc3m] { flex: 0 0 auto; min-width: 0; }
.op-header.command-bar-host-collapsed .op-header-text[b-2btiu4nc3m] { flex: 1 1 auto; }
.op-header-ejercicio[b-2btiu4nc3m] { flex: 0 0 auto; margin-left: auto; }

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Clientes). */
.op-header-actions[b-2btiu4nc3m] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.op-title[b-2btiu4nc3m] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.op-subtitle[b-2btiu4nc3m] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
    white-space: nowrap;
}

.op-header.command-bar-host-collapsed .op-title[b-2btiu4nc3m],
.op-header.command-bar-host-collapsed .op-subtitle[b-2btiu4nc3m] {
    white-space: normal;
    overflow-wrap: break-word;
}

.op-card[b-2btiu4nc3m] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* El listado rellena la página hasta abajo: flex-columna hasta la tabla, que es lo que espera .tp-panel
   para repartirse el alto. Con la ficha abierta debajo, la página crece y el scroll lo lleva .main-body. */
.op-card-elementos[b-2btiu4nc3m] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella). */
.op-tabla[b-2btiu4nc3m] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.op-page[b-2btiu4nc3m]  .op-tabla .tp-panel { min-height: auto; }

/* Elemento abierto en la ficha: la fila la pinta TablaPaginada, de ahí el ::deep. */
.op-tabla[b-2btiu4nc3m]  tr.op-fila-sel > td { background: #e8f0fe; }
.op-tabla[b-2btiu4nc3m]  tr.op-fila-sel > td:first-child { box-shadow: inset 3px 0 0 #2f6fed; }

/* Importes con cifras de ancho fijo, para que se lean en columna. */
.op-tabla[b-2btiu4nc3m]  td.op-num { font-variant-numeric: tabular-nums; }

/* El código es el punto de foco de la fila (Tab la recorre, Enter abre la ficha). */
.op-fila-foco[b-2btiu4nc3m] { outline: none; border-radius: 4px; }
.op-fila-foco:focus-visible[b-2btiu4nc3m] { outline: 2px solid #2f6fed; outline-offset: 2px; }

/* Ventana flotante del alta: más ancha que el ModalMaestro de serie, porque lleva los mismos campos que
   la ficha (filas de tres a cinco campos y las tres cuentas). Solo desde esta página. */
.op-modal-alta[b-2btiu4nc3m]  .mm-card { max-width: 980px; }
.op-modal-alta .op-form-row:last-child[b-2btiu4nc3m] { margin-bottom: 0; }

.op-card-head[b-2btiu4nc3m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-2btiu4nc3m] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-2btiu4nc3m] { margin-top: .9rem; }

/* Rótulo de las tablas secundarias dentro de una tarjeta (excluidos, cuadro de amortización). */
.op-subhead[b-2btiu4nc3m] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

/* La baja vive dentro de la ficha, y se distingue del resto para que no parezca otro formulario más. */
.op-subpanel[b-2btiu4nc3m] {
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    padding: .9rem 1rem;
    margin-top: 1rem;
}

.op-form-row[b-2btiu4nc3m] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-2btiu4nc3m] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-2btiu4nc3m] { flex: 1 1 16rem; }

.op-field label[b-2btiu4nc3m] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-2btiu4nc3m], .op-input[b-2btiu4nc3m] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-2btiu4nc3m] { min-width: 7rem; }
.op-input-num[b-2btiu4nc3m] { text-align: right; width: 9rem; }

/* Campos de cuenta con lupa (CampoConBuscador). El input lo pinta OTRO componente, así que la clase
   op-input de esta hoja no le alcanza sin ::deep: sin estas reglas saldría con el estilo del navegador. */
.op-field-cuenta[b-2btiu4nc3m] { flex: 1 1 13rem; }

.op-page[b-2btiu4nc3m]  .ccb-selector {
    position: relative;
    inline-size: 100%;
}

.op-page[b-2btiu4nc3m]  .ccb-input {
    box-sizing: border-box;
    inline-size: 100%;
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem 2.1rem .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-page[b-2btiu4nc3m]  .ccb-icon-btn {
    position: absolute;
    inset-inline-end: .35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #61707d;
    border-radius: 6px;
    padding: .15rem;
    cursor: pointer;
}

.op-page[b-2btiu4nc3m]  .ccb-icon-btn:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.op-actions[b-2btiu4nc3m] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-2btiu4nc3m] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    min-height: 36px; /* área de toque mínima, también en tablet y móvil */
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-2btiu4nc3m] { opacity: .55; cursor: default; }
.op-btn-ico[b-2btiu4nc3m] { font-size: 1.05rem; }

.op-btn-primary[b-2btiu4nc3m] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-2btiu4nc3m] { background: #245cd0; }

.op-btn-ghost[b-2btiu4nc3m] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-2btiu4nc3m] { background: #e7edf4; }

.op-btn-danger[b-2btiu4nc3m] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-2btiu4nc3m] { background: #c22f39; }

.op-btn-danger-ghost[b-2btiu4nc3m] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-2btiu4nc3m] { background: #fdf1f2; }

.op-link-btn[b-2btiu4nc3m] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.op-grid-wrapper[b-2btiu4nc3m] { overflow-x: auto; }

/* El cuadro de amortización de un bien a diez años son 120 filas: se le pone techo y scroll propio
   para que no empuje fuera de pantalla lo que va debajo. */
.op-tabla-alta[b-2btiu4nc3m] { max-height: 22rem; overflow-y: auto; }

.op-table[b-2btiu4nc3m] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-2btiu4nc3m] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
    position: sticky;
    top: 0;
}

.op-table td[b-2btiu4nc3m] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-table tfoot td[b-2btiu4nc3m] {
    border-top: 1px solid #cdd5df;
    border-bottom: none;
}

.op-num[b-2btiu4nc3m] { text-align: right; font-variant-numeric: tabular-nums; }

/* Verde tenue para lo ya contabilizado: distingue de un vistazo el pasado asentado de la previsión. */
.op-row-dotada[b-2btiu4nc3m] { background: #f2faf4; }

/* El motivo de exclusión es texto de Application, no una etiqueta: se deja respirar. */
.op-motivo[b-2btiu4nc3m] { color: #61707d; }

.op-ok[b-2btiu4nc3m] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #e8f6ec;
    border: 1px solid #bfe3c8;
    color: #1c7a3a;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
    margin-top: .75rem;
}

/*
    Ámbar y no rojo: lo que marca —nada que dotar, o una pérdida que aflora— son cosas que hay que
    mirar antes de seguir, no errores de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-2btiu4nc3m] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-ok .material-symbols-rounded[b-2btiu4nc3m], .op-aviso .material-symbols-rounded[b-2btiu4nc3m] { font-size: 1.1rem; }

.op-check[b-2btiu4nc3m] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

.op-confirm[b-2btiu4nc3m] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-2btiu4nc3m] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-2btiu4nc3m] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-2btiu4nc3m] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-2btiu4nc3m] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-2btiu4nc3m] { background: #e2f4e8; color: #1c7a3a; }

/* Aviso del modo de dotación automática, junto a la orden manual (IF6). */
.op-auto[b-2btiu4nc3m] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: center;
    font-size: .82rem;
    font-weight: 600;
    color: #1c5a9a;
    background: #e7f1fb;
    border: 1px solid #c6dcf3;
    border-radius: 8px;
    padding: .35rem .6rem;
}

.op-auto .material-symbols-rounded[b-2btiu4nc3m] { font-size: 1rem; }

/* Origen documental de la ficha: de qué factura nació y cuál la dio de baja (IF6). */
.op-origen[b-2btiu4nc3m] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .7rem;
}

.op-origen-fila[b-2btiu4nc3m] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: #46545f;
}

.op-origen-fila .material-symbols-rounded[b-2btiu4nc3m] { font-size: 1.05rem; color: #61707d; }

.op-origen-fila a[b-2btiu4nc3m] { color: #2f6fed; font-weight: 600; text-decoration: none; }

.op-origen-fila a:hover[b-2btiu4nc3m] { text-decoration: underline; }

/* ─────────────── Pantallas pequeñas ───────────────

   Columnas secundarias del listado: caen por orden de importancia (CssClass de la ColumnaTabla; las
   pinta TablaPaginada, de ahí el ::deep). Código, descripción y valor neto no caen nunca. Lo que aún no
   quepa se desplaza en horizontal DENTRO de la tabla, nunca la página entera. */
@media (max-width: 900px) {
    .op-tabla[b-2btiu4nc3m]  .op-col-amort { display: none; }
}

@media (max-width: 760px) {
    .op-tabla[b-2btiu4nc3m]  .op-col-alta { display: none; }
}

@media (max-width: 640px) {
    .op-tabla[b-2btiu4nc3m]  .op-col-adquisicion { display: none; }
}

@media (max-width: 480px) {
    .op-tabla[b-2btiu4nc3m]  .op-col-estado { display: none; }
}

/* Tablet: tarjetas algo más prietas; las tablas de detalle (previo de la dotación, excluidos, cuadro de
   amortización) no se aplastan: sus celdas no parten y su contenedor (.op-grid-wrapper) las desplaza. */
@media (max-width: 900px) {
    .op-card[b-2btiu4nc3m] { padding: .95rem 1rem; }
    .op-grid-wrapper .op-table th[b-2btiu4nc3m],
    .op-grid-wrapper .op-table td[b-2btiu4nc3m] { white-space: nowrap; }
}

/* Móvil: los formularios (ficha y ventana de alta) en una columna, cada campo al 100%; ningún ancho
   fijo que desborde. La ventana ya pasa a pantalla completa por sí sola (ModalMaestro). */
@media (max-width: 560px) {
    .op-title[b-2btiu4nc3m] { font-size: 1.3rem; }

    .op-card[b-2btiu4nc3m] { padding: .85rem .8rem; }

    .op-form-row[b-2btiu4nc3m] { flex-direction: column; align-items: stretch; gap: .7rem; }

    .op-field[b-2btiu4nc3m],
    .op-field-ancho[b-2btiu4nc3m],
    .op-field-cuenta[b-2btiu4nc3m] { flex: 1 1 auto; min-width: 0; }

    .op-form-row .op-input[b-2btiu4nc3m],
    .op-form-row .op-select[b-2btiu4nc3m],
    .op-input-num[b-2btiu4nc3m] { box-sizing: border-box; width: 100%; }

    /* Botones de las acciones y enlaces con área de toque cómoda. */
    .op-actions[b-2btiu4nc3m] { gap: .5rem; }
    .op-link-btn[b-2btiu4nc3m] { min-height: 36px; padding: 0 .25rem; }
    .op-check[b-2btiu4nc3m] { min-height: 36px; }

    /* Los avisos y confirmaciones envuelven a todo el ancho en vez de quedarse a media fila. */
    .op-confirm[b-2btiu4nc3m], .op-auto[b-2btiu4nc3m] { flex: 1 1 100%; }
}
/* _content/ErpPowergest/Presentation/Contabilidad/LibrosOficiales/Pages/LibrosOficialesPage.razor.rz.scp.css */
/*
    Libros oficiales (C2). Calca el vocabulario visual de «Operaciones contables», que es la pantalla
    hermana: mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    OperacionesPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y todo el alto, como Clientes: sin margen propio (el borde lo pone .main-body), 9px
   entre la cabecera y el contenido, y el suelo en la pantalla. El historial se queda con el alto que sobra. */
.op-page[b-2spz3uv3ob] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

.op-header[b-2spz3uv3ob] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.op-title[b-2spz3uv3ob] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.op-subtitle[b-2spz3uv3ob] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.op-card[b-2spz3uv3ob] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* Entre tarjetas, el mismo aire de antes (los 9px del gap de la página + este margen). */
.op-card + .op-card[b-2spz3uv3ob] { margin-top: .5rem; }

/* El historial se estira hasta abajo (flex-columna, lo que espera .tp-panel para repartirse el alto). */
.op-card-historial[b-2spz3uv3ob] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella). */
.op-tabla[b-2spz3uv3ob] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.op-page[b-2spz3uv3ob]  .tp-panel { min-height: auto; }

.op-card-head[b-2spz3uv3ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-2spz3uv3ob] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-2spz3uv3ob] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .9rem;
}

/* Los tres selectores de la emisión: libro, mes inicial y mes final. */
.op-form-row[b-2spz3uv3ob] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-2spz3uv3ob] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field label[b-2spz3uv3ob] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-2spz3uv3ob] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
    min-width: 7rem;
}

.op-btn[b-2spz3uv3ob] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-2spz3uv3ob] { opacity: .55; cursor: default; }
.op-btn-ico[b-2spz3uv3ob] { font-size: 1.05rem; }

.op-btn-primary[b-2spz3uv3ob] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-2spz3uv3ob] { background: #245cd0; }

.op-btn-ghost[b-2spz3uv3ob] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-2spz3uv3ob] { background: #e7edf4; }

/* La tablita del previo se desplaza dentro de su caja, nunca la página. */
.op-grid-wrapper[b-2spz3uv3ob] { overflow-x: auto; max-width: 100%; }

.op-table[b-2spz3uv3ob] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-2spz3uv3ob] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
}

.op-table td[b-2spz3uv3ob] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-2spz3uv3ob] { text-align: right; font-variant-numeric: tabular-nums; }

.op-ok[b-2spz3uv3ob] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #e8f6ec;
    border: 1px solid #bfe3c8;
    color: #1c7a3a;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
    margin-top: .75rem;
}

/*
    Ámbar y no rojo: los dos casos que marca —descuadre y meses abiertos— son motivos para NO emitir
    todavía, no errores de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-2spz3uv3ob] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso a[b-2spz3uv3ob] { color: #8a5a00; font-weight: 600; }
.op-ok .material-symbols-rounded[b-2spz3uv3ob], .op-aviso .material-symbols-rounded[b-2spz3uv3ob] { font-size: 1.1rem; }

/* El consentimiento para emitir con meses abiertos. Debajo de su aviso, no suelto en la botonera. */
.op-check[b-2spz3uv3ob] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    margin-top: .6rem;
    cursor: pointer;
}

.op-muted[b-2spz3uv3ob] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

/* Marca del libro emitido en caliente: meses después nadie recuerda que no era definitivo. */
.op-badge-aviso[b-2spz3uv3ob] {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #fdeccd;
    color: #8a5a00;
    font-size: .72rem;
    font-weight: 600;
}

/* ─────────────── Pantallas estrechas ───────────────
   Tablet (~768px) y móvil (~390px). Nada desborda la página: las tablas se desplazan dentro de su caja
   (el previo en .op-grid-wrapper, el historial en el .tp-scroll de TablaPaginada) y las columnas
   secundarias del historial se repliegan antes que Debe/Haber, que son las que dicen si el libro vale.
   Las celdas las pinta TablaPaginada: de ahí el ::deep. */

.op-page[b-2spz3uv3ob] { min-width: 0; }
.op-header > div:first-child[b-2spz3uv3ob] { min-width: 0; }

@media (max-width: 1024px) {
    .op-page[b-2spz3uv3ob]  .lo-col-por { display: none; }
}

@media (max-width: 820px) {
    .op-page[b-2spz3uv3ob]  .lo-col-recuento { display: none; }

    .op-card[b-2spz3uv3ob] { padding: .9rem 1rem; }
    .op-form-row .op-field[b-2spz3uv3ob] { flex: 1 1 10rem; min-width: 0; }
    .op-form-row .op-select[b-2spz3uv3ob] { width: 100%; min-width: 0; }

    /* Área de toque: ningún botón por debajo de 36px de alto. */
    .op-btn[b-2spz3uv3ob] { min-height: 36px; }
}

@media (max-width: 560px) {
    .op-page[b-2spz3uv3ob]  .lo-col-emitido { display: none; }

    .op-title[b-2spz3uv3ob] { font-size: 1.35rem; }

    /* Cabecera apilada: título arriba y el selector de ejercicio a todo el ancho debajo. */
    .op-header[b-2spz3uv3ob] { flex-direction: column; align-items: stretch; gap: .6rem; }
    .op-header .op-field[b-2spz3uv3ob], .op-header .op-select[b-2spz3uv3ob] { width: 100%; min-width: 0; }

    /* Selectores de la emisión, uno debajo de otro y al 100%. */
    .op-form-row[b-2spz3uv3ob] { flex-direction: column; align-items: stretch; gap: .7rem; }
    .op-form-row .op-field[b-2spz3uv3ob] { flex: 0 0 auto; }

    /* Botones de emitir, a todo el ancho y apilados. */
    .op-card-actions[b-2spz3uv3ob] { flex-direction: column; align-items: stretch; }
    .op-card-actions .op-btn[b-2spz3uv3ob] { justify-content: center; min-height: 40px; }

    .op-aviso[b-2spz3uv3ob], .op-ok[b-2spz3uv3ob] { font-size: .85rem; }

    /* El paginador de la tabla puede bajar de línea antes que obligar a desplazar. */
    .op-page[b-2spz3uv3ob]  .tp-pager { flex-wrap: wrap; gap: .4rem; }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Memoria/Pages/MemoriaPage.razor.rz.scp.css */
.memoria-page[b-p845jo6yox],
.memoria-page *[b-p845jo6yox],
.memoria-page *[b-p845jo6yox]::before,
.memoria-page *[b-p845jo6yox]::after {
    box-sizing: border-box;
}

.memoria-page[b-p845jo6yox] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.mem-header[b-p845jo6yox] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.mem-title[b-p845jo6yox] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.mem-subtitle[b-p845jo6yox] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.mem-card[b-p845jo6yox] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.mem-section-title[b-p845jo6yox] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* FILTROS */

.mem-filtros[b-p845jo6yox] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.mem-field[b-p845jo6yox] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .mem-field label[b-p845jo6yox] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.mem-select[b-p845jo6yox] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    min-width: 140px;
}

.mem-select:focus[b-p845jo6yox] {
    outline: 2px solid #bfdbfe;
    border-color: #93c5fd;
}

.mem-filtros-acciones[b-p845jo6yox] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.mem-confirm-texto[b-p845jo6yox] {
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

/* RESULTADO */

.mem-resultado-head[b-p845jo6yox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mem-texto[b-p845jo6yox] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #1f2937;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 16px 18px;
    max-height: 640px;
    overflow-y: auto;
}

.mem-empty[b-p845jo6yox] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* AVISOS */

.mem-error-box[b-p845jo6yox] {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
}

    .mem-error-box ul[b-p845jo6yox] {
        margin: 6px 0 0;
        padding-left: 18px;
    }

/* BADGES */

.mem-badge[b-p845jo6yox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mem-badge-modo[b-p845jo6yox] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.mem-badge-ok[b-p845jo6yox] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.mem-badge-error[b-p845jo6yox] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.mem-aviso-ico[b-p845jo6yox] {
    font-size: 15px;
    line-height: 1;
}

/* BOTONES */

.mem-btn[b-p845jo6yox] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mem-btn-ico[b-p845jo6yox] {
    font-size: 18px;
    line-height: 1;
}

.mem-btn-primary[b-p845jo6yox] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .mem-btn-primary:hover:not(:disabled)[b-p845jo6yox] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.mem-btn-ghost[b-p845jo6yox] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .mem-btn-ghost:hover:not(:disabled)[b-p845jo6yox] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.mem-btn-peligro[b-p845jo6yox] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mem-btn-peligro:hover:not(:disabled)[b-p845jo6yox] {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.mem-btn:disabled[b-p845jo6yox] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .mem-filtros-acciones[b-p845jo6yox] {
        margin-left: 0;
    }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Operaciones/Pages/OperacionesPage.razor.rz.scp.css */
.op-page[b-cpqnr42xtu] {
    min-width: 0;
    /* A todo el ancho y sin padding propio, como Clientes: el borde lo pone .main-body. */
    color: #1f2933;
}

.op-header[b-cpqnr42xtu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* 9px entre la cabecera y el contenido, como Clientes. */
    margin-bottom: 9px;
}

.op-title[b-cpqnr42xtu] {
    font-size: 1.6rem;
    overflow-wrap: anywhere;
    font-weight: 700;
    margin: 0;
}

.op-subtitle[b-cpqnr42xtu] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.op-card[b-cpqnr42xtu] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-cpqnr42xtu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-cpqnr42xtu] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-desc[b-cpqnr42xtu] {
    color: #61707d;
    font-size: .85rem;
    margin: .35rem 0 .9rem;
    line-height: 1.4;
}

.op-field[b-cpqnr42xtu] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field label[b-cpqnr42xtu] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-cpqnr42xtu], .op-input[b-cpqnr42xtu] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-input-num[b-cpqnr42xtu] { text-align: right; width: 8rem; }
.op-select[b-cpqnr42xtu] { min-width: 7rem; }

.op-actions[b-cpqnr42xtu] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-cpqnr42xtu] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-cpqnr42xtu] { opacity: .55; cursor: default; }
.op-btn-ico[b-cpqnr42xtu] { font-size: 1.05rem; }
.op-btn-xs[b-cpqnr42xtu] { padding: .3rem .5rem; font-size: .78rem; min-height: 0; }

.op-btn-primary[b-cpqnr42xtu] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-cpqnr42xtu] { background: #245cd0; }

.op-btn-ghost[b-cpqnr42xtu] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-cpqnr42xtu] { background: #e7edf4; }

.op-btn-danger[b-cpqnr42xtu] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-cpqnr42xtu] { background: #c22f39; }

.op-btn-danger-ghost[b-cpqnr42xtu] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-cpqnr42xtu] { background: #fdf1f2; }

.op-link-btn[b-cpqnr42xtu] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.op-icon-btn[b-cpqnr42xtu] {
    background: none;
    border: none;
    cursor: pointer;
    color: #61707d;
    display: inline-flex;
    padding: .2rem;
    border-radius: 6px;
}
.op-icon-btn:hover[b-cpqnr42xtu] { background: #f2f5f9; }
.op-icon-danger:hover[b-cpqnr42xtu] { color: #c22f39; }

.op-confirm[b-cpqnr42xtu] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-hint[b-cpqnr42xtu] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-existencias[b-cpqnr42xtu] { margin-bottom: 1rem; }
.op-existencias-head[b-cpqnr42xtu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #45525f;
    margin-bottom: .4rem;
}

.op-grid-wrapper[b-cpqnr42xtu] { overflow-x: auto; max-width: 100%; }

/* Ancho mínimo: por debajo, la tabla se desplaza dentro de su contenedor en vez de ensanchar la página. */
.op-table[b-cpqnr42xtu] {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-cpqnr42xtu] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
}

.op-table td[b-cpqnr42xtu] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-table-input .op-input[b-cpqnr42xtu] { width: 100%; box-sizing: border-box; }
.op-col-num[b-cpqnr42xtu] { text-align: right; width: 9rem; }

.op-badge[b-cpqnr42xtu] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}
.op-badge-warn[b-cpqnr42xtu] { background: #fdeccd; color: #8a5a00; }

.op-ok[b-cpqnr42xtu] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #e8f6ec;
    border: 1px solid #bfe3c8;
    color: #1c7a3a;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
}

.op-error[b-cpqnr42xtu] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #fdecee;
    border: 1px solid #f3c4c9;
    color: #b02a37;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
}

.op-ok .material-symbols-rounded[b-cpqnr42xtu], .op-error .material-symbols-rounded[b-cpqnr42xtu] { font-size: 1.1rem; }

.op-periodos[b-cpqnr42xtu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: .5rem;
}

.op-periodo[b-cpqnr42xtu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    padding: .4rem .6rem;
    font-size: .84rem;
}

.op-periodo-nombre[b-cpqnr42xtu] { font-weight: 600; color: #45525f; }
.op-periodo-cerrado[b-cpqnr42xtu] { background: #fdf1f2; border-color: #f0c4c7; }
.op-periodo-abierto[b-cpqnr42xtu] { background: #f7faf8; }

.op-detalles[b-cpqnr42xtu] {
    margin: .6rem 0 0;
    padding-left: 1.2rem;
    color: #45525f;
    font-size: .85rem;
    line-height: 1.5;
}

/* ---- RESPONSIVE ---- */

/* Tablet: menos relleno en las tarjetas y área de toque de 36px también en los botones pequeños. */
@media (max-width: 768px) {
    .op-card[b-cpqnr42xtu] { padding: .9rem; }
    .op-title[b-cpqnr42xtu] { font-size: 1.35rem; }

    .op-btn-xs[b-cpqnr42xtu] { min-height: 36px; }
    .op-link-btn[b-cpqnr42xtu] { min-height: 36px; }
    .op-icon-btn[b-cpqnr42xtu] { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
}

/* Móvil: el selector de ejercicio baja bajo el título a todo el ancho, y los campos, confirmaciones y
   botones de cada operación se apilan al 100 %. Los campos dentro de tablas no cambian: esas tablas se
   desplazan dentro de su contenedor. */
@media (max-width: 540px) {
    .op-header[b-cpqnr42xtu] { align-items: stretch; }
    .op-header > *[b-cpqnr42xtu] { flex-basis: 100%; }
    .op-header .op-select[b-cpqnr42xtu] { width: 100%; }

    .op-card-head > .op-btn[b-cpqnr42xtu] { width: 100%; justify-content: center; }

    .op-actions[b-cpqnr42xtu] { flex-direction: column; align-items: stretch; }
    .op-actions > .op-btn[b-cpqnr42xtu] { justify-content: center; }
    .op-actions .op-field[b-cpqnr42xtu] { width: 100%; }
    .op-actions .op-input-num[b-cpqnr42xtu] { width: 100%; box-sizing: border-box; }
    .op-confirm[b-cpqnr42xtu] { align-self: stretch; }

    .op-existencias-head[b-cpqnr42xtu] { flex-wrap: wrap; }
}
/* _content/ErpPowergest/Presentation/Contabilidad/Predefinidos/Pages/AsientosPredefinidosPage.razor.rz.scp.css */
/*
    Asientos predefinidos (C4). Mismo vocabulario visual que «Libros oficiales» e «Inmovilizado»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    InmovilizadoPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y todo el alto, como Clientes: sin margen propio (el borde lo pone .main-body), 9px
   entre bloques y el suelo en la pantalla. El listado se queda con el alto que sobra. */
.op-page[b-20lg58s6fj] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.op-header[b-20lg58s6fj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.op-header-text[b-20lg58s6fj] { flex: 1 1 auto; min-width: 0; }

/* El título y el subtítulo envuelven en vez de empujar la barra: así es la barra la que se repliega
   al menú «···» cuando falta sitio, y la página no se sale por la derecha. */
.op-title[b-20lg58s6fj], .op-subtitle[b-20lg58s6fj] { overflow-wrap: break-word; }

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.op-header-actions[b-20lg58s6fj] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.op-title[b-20lg58s6fj] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.op-subtitle[b-20lg58s6fj] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.op-card[b-20lg58s6fj] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-20lg58s6fj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-20lg58s6fj] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-20lg58s6fj] { margin-top: .9rem; }

.op-subhead[b-20lg58s6fj] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

.op-form-row[b-20lg58s6fj] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-20lg58s6fj] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-20lg58s6fj] { flex: 1 1 16rem; }

.op-field label[b-20lg58s6fj] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-20lg58s6fj], .op-input[b-20lg58s6fj] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-20lg58s6fj] { min-width: 7rem; }
.op-select-sm[b-20lg58s6fj] { min-width: 5.5rem; }
.op-input-num[b-20lg58s6fj] { text-align: right; width: 9rem; }
.op-input-pct[b-20lg58s6fj] { text-align: right; width: 5rem; }
.op-input-cuenta[b-20lg58s6fj] { width: 9rem; font-variant-numeric: tabular-nums; }

/* El par «21 % de la línea 2» se lee como una frase: si se parte en dos controles sueltos deja de
   verse que el porcentaje y su base son un mismo dato. */
.op-inline[b-20lg58s6fj] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.op-inline-sep[b-20lg58s6fj] { font-size: .82rem; color: #61707d; }

.op-actions[b-20lg58s6fj] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-20lg58s6fj] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-20lg58s6fj] { opacity: .55; cursor: default; }
.op-btn-ico[b-20lg58s6fj] { font-size: 1.05rem; }

.op-btn-primary[b-20lg58s6fj] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-20lg58s6fj] { background: #245cd0; }

.op-btn-ghost[b-20lg58s6fj] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-20lg58s6fj] { background: #e7edf4; }

.op-btn-danger[b-20lg58s6fj] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-20lg58s6fj] { background: #c22f39; }

.op-btn-danger-ghost[b-20lg58s6fj] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-20lg58s6fj] { background: #fdf1f2; }

.op-link-btn[b-20lg58s6fj] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Botones de fila (subir/bajar/quitar): sin marco, para que la rejilla no parezca una botonera. */
.op-icon-btn[b-20lg58s6fj] {
    background: none;
    border: none;
    color: #61707d;
    cursor: pointer;
    padding: .15rem;
    line-height: 1;
    border-radius: 6px;
}

.op-icon-btn:hover:not(:disabled)[b-20lg58s6fj] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-20lg58s6fj] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-20lg58s6fj] { font-size: 1.15rem; }
.op-icon-danger:hover:not(:disabled)[b-20lg58s6fj] { background: #fdf1f2; color: #c22f39; }

.op-grid-wrapper[b-20lg58s6fj] { overflow-x: auto; }

.op-table[b-20lg58s6fj] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-20lg58s6fj] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.op-table td[b-20lg58s6fj] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-20lg58s6fj] { text-align: right; font-variant-numeric: tabular-nums; }

/* La rejilla de líneas lleva controles: necesita más aire vertical que una tabla de solo lectura. */
.op-table-lineas td[b-20lg58s6fj] { padding: .35rem .5rem; }

/* Con controles en cada celda la rejilla no se puede comprimir sin volverse ilegible: por debajo de
   este ancho se desplaza en horizontal dentro de .op-grid-wrapper, nunca la página entera. */
.op-table-lineas[b-20lg58s6fj] { min-width: 760px; }
.op-col-orden[b-20lg58s6fj] { width: 2.5rem; }
.op-col-acciones[b-20lg58s6fj] { width: 6.5rem; white-space: nowrap; text-align: right; }

/* Listado: la tarjeta crece hasta el suelo y la TablaPaginada (marco, orden, filas y paginador: los pinta
   ella) la rellena. Flex-columna, que es lo que espera .tp-panel para repartirse el alto. */
.op-list-panel[b-20lg58s6fj] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.op-tabla[b-20lg58s6fj] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.op-tabla[b-20lg58s6fj]  .tp-panel { min-height: auto; }

/* Plantilla abierta en el editor: la fila la pinta TablaPaginada, de ahí el ::deep. */
.op-tabla[b-20lg58s6fj]  tr.op-fila-sel > td { background: #e8f0fe; }
.op-tabla[b-20lg58s6fj]  tr.op-fila-sel > td:first-child { box-shadow: inset 3px 0 0 #2f6fed; }

/*
    Ámbar y no rojo: lo que marca —una plantilla sin líneas suficientes— es algo que hay que completar
    antes de seguir, no un error de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-20lg58s6fj] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso .material-symbols-rounded[b-20lg58s6fj] { font-size: 1.1rem; }

.op-check[b-20lg58s6fj] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

/* La casilla «Activa» convive con campos que tienen rótulo encima: se baja a su línea base. */
.op-check-campo[b-20lg58s6fj] { align-self: center; padding-bottom: .45rem; }

.op-confirm[b-20lg58s6fj] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-20lg58s6fj] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-20lg58s6fj] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-20lg58s6fj] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-20lg58s6fj] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-20lg58s6fj] { background: #e2f4e8; color: #1c7a3a; }

/* ─────────────── Pantallas pequeñas ───────────────
   Nada de scroll horizontal de la página: solo las tablas se desplazan, dentro de su contenedor. */
.op-page > *[b-20lg58s6fj] { min-width: 0; }

/* Tablet: fuera la columna «Se preguntan», la que menos se mira al elegir plantilla. */
@media (max-width: 768px) {
    .op-tabla[b-20lg58s6fj]  .op-col-preguntan { display: none; }

    .op-card[b-20lg58s6fj] { padding: .9rem 1rem; }
    .op-title[b-20lg58s6fj] { font-size: 1.4rem; }

    /* Botones de fila con área de toque suficiente para el dedo. */
    .op-icon-btn[b-20lg58s6fj] {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .op-col-acciones[b-20lg58s6fj] { width: auto; }
}

/* Móvil: fuera también el concepto (se ve al abrir la plantilla) y el editor apila los campos al 100%. */
@media (max-width: 560px) {
    .op-tabla[b-20lg58s6fj]  .op-col-concepto { display: none; }

    .op-card[b-20lg58s6fj] { padding: .8rem .75rem; }
    .op-title[b-20lg58s6fj] { font-size: 1.25rem; }

    .op-card-head[b-20lg58s6fj] { gap: .5rem; }

    .op-form-row[b-20lg58s6fj] { flex-direction: column; align-items: stretch; gap: .75rem; }
    .op-field-ancho[b-20lg58s6fj] { flex: 0 0 auto; }
    .op-field .op-input[b-20lg58s6fj], .op-field .op-select[b-20lg58s6fj] { width: 100%; }
    .op-check-campo[b-20lg58s6fj] { align-self: flex-start; padding-bottom: 0; }

    /* Los botones del editor, a lo ancho: más fáciles de acertar y sin quedarse cortados. */
    .op-card-actions[b-20lg58s6fj] { flex-direction: column; align-items: stretch; }
    .op-card-actions .op-btn[b-20lg58s6fj] { justify-content: center; }
    .op-confirm[b-20lg58s6fj] { align-self: stretch; }
}

/* Editor dentro de la ventana flotante: la ventana ya es la tarjeta, así que el editor pierde su marco.
   La cabecera deja sitio a la «×» de la ventana (36px arriba a la derecha). */
.op-editor[b-20lg58s6fj] {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    min-height: 100%;   /* llena la ventana: sin franja gris debajo del editor */
    box-sizing: border-box;
}

    .op-editor > .op-card-head[b-20lg58s6fj] {
        padding-right: 44px;
    }

@media (max-width: 600px) {
    .op-editor[b-20lg58s6fj] { padding: .9rem .75rem; }
}

/* Título en dos fases, como en Diario: primero en UNA línea (así la barra ve que falta sitio y pasa a solo
   iconos y luego al «···»); solo con la barra ya replegada del todo, el título envuelve. Sin esto, en móvil
   el título se parte palabra a palabra y los botones conservan su texto. */
.op-title[b-20lg58s6fj] {
    white-space: nowrap;
}

.op-header.command-bar-host-collapsed .op-title[b-20lg58s6fj],
.op-header.command-bar-host-collapsed .op-subtitle[b-20lg58s6fj] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* El bloque del título no cede hasta que la barra esté replegada del todo (igual que en Diario). */
.op-header > .op-header-text[b-20lg58s6fj] {
    flex: 0 0 auto;
    min-width: 0;
}

.op-header.command-bar-host-collapsed > .op-header-text[b-20lg58s6fj] {
    flex: 1 1 auto;
}
/* _content/ErpPowergest/Presentation/Contabilidad/SumasSaldos/Pages/SumasSaldosPage.razor.rz.scp.css */
/* Balance de sumas y saldos (N0). Mismo lenguaje visual que Operaciones y Cuentas anuales: no se
   inventa un estilo propio para una pantalla que se lee junto a ellas. */

.ss-page[b-j7nsjkhzuo] {
    min-width: 0;
    /* A todo el ancho y sin padding propio, como Clientes: el borde lo pone .main-body. */
    color: #1f2933;
}

.ss-header[b-j7nsjkhzuo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* 9px entre la cabecera y el contenido, como Clientes. */
    margin-bottom: 9px;
}

.ss-title[b-j7nsjkhzuo] {
    font-size: 1.6rem;
    overflow-wrap: anywhere;
    font-weight: 700;
    margin: 0;
}

.ss-subtitle[b-j7nsjkhzuo] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.ss-card[b-j7nsjkhzuo] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ss-empty[b-j7nsjkhzuo] {
    color: #61707d;
    font-size: .9rem;
}

.ss-filtros[b-j7nsjkhzuo] {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
    flex-wrap: wrap;
}

.ss-field[b-j7nsjkhzuo] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ss-field label[b-j7nsjkhzuo] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.ss-select[b-j7nsjkhzuo] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
    min-width: 7rem;
    min-height: 36px;
}

.ss-filtros-acciones[b-j7nsjkhzuo] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.ss-btn[b-j7nsjkhzuo] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background .12s, border-color .12s;
}

.ss-btn:disabled[b-j7nsjkhzuo] { opacity: .55; cursor: default; }
.ss-btn-ico[b-j7nsjkhzuo] { font-size: 1.05rem; }

.ss-btn-primary[b-j7nsjkhzuo] { background: #2f6fed; color: #fff; }
.ss-btn-primary:hover:not(:disabled)[b-j7nsjkhzuo] { background: #245cd0; }

.ss-btn-ghost[b-j7nsjkhzuo] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.ss-btn-ghost:hover:not(:disabled)[b-j7nsjkhzuo] { background: #e7edf4; }

.ss-ok[b-j7nsjkhzuo] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #e8f6ec;
    border: 1px solid #bfe3c8;
    color: #1c7a3a;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
    margin-bottom: .9rem;
}

.ss-aviso[b-j7nsjkhzuo] {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #fdecee;
    border: 1px solid #f3c4c9;
    color: #b02a37;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
    margin-top: .9rem;
}

.ss-card .ss-ok + .ss-grid-wrapper[b-j7nsjkhzuo],
.ss-card .ss-aviso + .ss-grid-wrapper[b-j7nsjkhzuo] { margin-top: 0; }

/* La tabla puede ser ancha (5 columnas con importes): scroll propio, y nunca scroll horizontal
   de la página. Letra un punto mayor y más aire por celda que el resto de tablas densas: es una
   pantalla de lectura, y a todo el ancho las filas apretadas se pierden. */
.ss-grid-wrapper[b-j7nsjkhzuo] { overflow-x: auto; max-width: 100%; }

/* Ancho mínimo: por debajo, la tabla se desplaza dentro de su contenedor en vez de estrujar los
   importes (o de ensanchar la página). */
.ss-table[b-j7nsjkhzuo] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .92rem;
}

.ss-table th[b-j7nsjkhzuo] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .6rem .75rem;
    border-bottom: 1px solid #e3e8ee;
}

.ss-table td[b-j7nsjkhzuo] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

/* Los importes en tabular-nums: sin esto las cifras no alinean por columna y el balance se lee mal,
   que es justo lo que esta pantalla existe para hacer fácil. */
.ss-num[b-j7nsjkhzuo] {
    text-align: right;
    width: 9rem;
    font-variant-numeric: tabular-nums;
}

.ss-col-cuenta[b-j7nsjkhzuo] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.ss-negativo[b-j7nsjkhzuo] { color: #b02a37; }

.ss-totales td[b-j7nsjkhzuo] {
    border-top: 2px solid #e3e8ee;
    border-bottom: none;
    font-weight: 700;
    padding-top: .75rem;
}

.ss-pie[b-j7nsjkhzuo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .8rem;
    color: #8a97a3;
    font-size: .82rem;
}

/* ---- RESPONSIVE ---- */

/* Tablet: se retira el aire extra de la tabla (vuelve a la densidad habitual) para que quepan las
   cinco columnas sin desplazarse en la mayoría de los casos. */
@media (max-width: 768px) {
    .ss-card[b-j7nsjkhzuo] { padding: .9rem; }
    .ss-title[b-j7nsjkhzuo] { font-size: 1.35rem; }

    .ss-table[b-j7nsjkhzuo] { font-size: .86rem; }
    .ss-table th[b-j7nsjkhzuo] { padding: .45rem .5rem; font-size: .74rem; }
    .ss-table td[b-j7nsjkhzuo] { padding: .45rem .5rem; }
    .ss-num[b-j7nsjkhzuo] { width: auto; white-space: nowrap; }
}

/* Móvil: filtros apilados al 100 % y botones a todo el ancho; la tabla se desplaza dentro de su
   contenedor, nunca la página. */
@media (max-width: 540px) {
    .ss-filtros[b-j7nsjkhzuo] { flex-direction: column; align-items: stretch; }
    .ss-field[b-j7nsjkhzuo] { width: 100%; }
    .ss-select[b-j7nsjkhzuo] { width: 100%; min-width: 0; }
    .ss-filtros-acciones .ss-btn[b-j7nsjkhzuo] { width: 100%; justify-content: center; }

    .ss-pie[b-j7nsjkhzuo] { align-items: stretch; }
    .ss-pie > span[b-j7nsjkhzuo] { flex-basis: 100%; }
    .ss-pie .ss-btn[b-j7nsjkhzuo] { flex: 1 1 auto; justify-content: center; }
}
/* _content/ErpPowergest/Presentation/Correo/Pages/CorreoPage.razor.rz.scp.css */
/* ── LA BANDEJA ───────────────────────────────────────────────────────────────────────────────
   El alta de cuenta (`.cfg-correo-*`) y el redactor (`.correo-form`) ya estaban escritos en el
   lenguaje de la casa: tarjeta blanca con borde #e5e7eb y radio 10, cuadros con borde #d1d5db y
   radio 7 con aro de foco en el color de la casa, etiquetas de .8rem en negrita y texto secundario
   en #6b7280. La bandeja, en cambio, era HTML crudo: una tabla a pelo sobre el fondo de la página,
   pestañas subrayadas, cuadros de buscar con otro radio y otro alto que los del redactor.

   El resultado era que la misma pantalla parecía dos programas distintos según si estabas mirando
   la lista o un formulario. Esto lo iguala, sin tocar una sola línea del .razor: son los mismos
   nombres de clase de siempre.  ─────────────────────────────────────────────────────────────── */

.correo-page[b-p58vr14ti1] {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    color: #111827;
}

.correo-header[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.correo-header-info[b-p58vr14ti1] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.correo-title[b-p58vr14ti1] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* La dirección con la que estás trabajando, en pastilla: es un dato, no un subtítulo, y suelto en
   gris se confundía con la descripción de la pantalla. */
.correo-cuenta[b-p58vr14ti1] {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    background: #f1f5f9;
    border-radius: 999px;
    padding: .1rem .55rem;
}

.correo-btn-primario[b-p58vr14ti1],
.correo-btn-secundario[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

    /* El aro de foco es el mismo de los cuadros del alta. Va en :focus-visible y no en :focus para
       que solo lo vea quien navega con el teclado, que es quien lo necesita. */
    .correo-btn-primario:focus-visible[b-p58vr14ti1],
    .correo-btn-secundario:focus-visible[b-p58vr14ti1] {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 25%, transparent);
    }

.correo-btn-primario[b-p58vr14ti1] {
    background: var(--color-primario, #2563eb);
    color: #fff;
}

    .correo-btn-primario:hover:not(:disabled)[b-p58vr14ti1] {
        background: color-mix(in srgb, var(--color-primario, #2563eb) 88%, #000);
    }

.correo-btn-primario:disabled[b-p58vr14ti1] {
    opacity: 0.6;
    cursor: default;
}

.correo-btn-secundario[b-p58vr14ti1] {
    background: #fff;
    border-color: var(--borde, #d1d5db);
    color: inherit;
}

    .correo-btn-secundario:hover:not(:disabled)[b-p58vr14ti1] {
        border-color: #b6bec9;
        background: #f9fafb;
    }

/* Un botón secundario apagado tiene que NOTARSE. Sin esto se ve idéntico a uno vivo: el usuario lo
   pulsa, no pasa nada, y da por hecho que la función está rota en vez de que le falta un dato. Es la
   misma lección de FUN-543. */
.correo-btn-secundario:disabled[b-p58vr14ti1] {
    opacity: .45;
    cursor: not-allowed;
    background: #f9fafb;
}

.correo-toolbar[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Las pestañas, como segmento y no como subrayado suelto: la casa agrupa lo que es una sola
   elección dentro de una misma caja, y así la activa se lee de un golpe aunque se mire de lejos. */
.correo-tabs[b-p58vr14ti1] {
    display: inline-flex;
    gap: 0.15rem;
    padding: .2rem;
    background: #f1f5f9;
    border-radius: 9px;
}

.correo-tab[b-p58vr14ti1] {
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    color: #475569;
    transition: background .12s, color .12s;
}

    .correo-tab:hover[b-p58vr14ti1] {
        color: #111827;
    }

.correo-tab.activa[b-p58vr14ti1] {
    background: #fff;
    color: #111827;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* Ni la bandeja vacía ni la que está cargando son un hueco en blanco: son una tarjeta, como todo lo
   demás. Un texto suelto en mitad de la página se lee como que la pantalla se ha quedado a medias. */
.correo-loading[b-p58vr14ti1],
.correo-empty[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: #6b7280;
    font-size: .9rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

    .correo-loading .material-symbols-rounded[b-p58vr14ti1],
    .correo-empty .material-symbols-rounded[b-p58vr14ti1] {
        font-size: 2rem;
        color: #cbd5e1;
    }

    .correo-empty p[b-p58vr14ti1] {
        margin: 0;
    }

    /* El icono de «cargando» gira: quieto es indistinguible de un icono decorativo y la pantalla
       parece colgada en vez de ocupada. */
    .loading-icon[b-p58vr14ti1] {
        animation: correo-girando-b-p58vr14ti1 1.1s linear infinite;
    }

@keyframes correo-girando-b-p58vr14ti1 {
    to { transform: rotate(360deg); }
}

/* La lista, dentro de una tarjeta. La tabla iba a pelo sobre el fondo de la página y por eso
   cantaba al lado del redactor, que sí es una tarjeta. */
.correo-table-wrapper[b-p58vr14ti1] {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.correo-table[b-p58vr14ti1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.correo-table th[b-p58vr14ti1] {
    text-align: left;
    padding: 0.6rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #64748b;
}

    .correo-table th:first-child[b-p58vr14ti1] { border-top-left-radius: 10px; }
    .correo-table th:last-child[b-p58vr14ti1] { border-top-right-radius: 10px; }

.correo-table td[b-p58vr14ti1] {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}

.correo-table tr:last-child td[b-p58vr14ti1] {
    border-bottom: none;
}

/* Que la fila entera responda al ratón: se pulsa en cualquier punto de ella, así que tiene que
   parecer pulsable en cualquier punto de ella. */
.correo-fila[b-p58vr14ti1] {
    cursor: pointer;
    transition: background .1s;
}

    .correo-fila:hover[b-p58vr14ti1] {
        background: #f8fafc;
    }

/* Un correo sin leer se marca además con una barra en el canto. La negrita sola se pierde en una
   lista larga, y es lo primero que se busca al abrir el buzón. */
.correo-fila.no-leido[b-p58vr14ti1] {
    font-weight: 600;
}

    .correo-fila.no-leido td:first-child[b-p58vr14ti1] {
        box-shadow: inset 3px 0 0 var(--color-primario, #2563eb);
    }

.td-remitente[b-p58vr14ti1] {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-asunto[b-p58vr14ti1] {
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-fecha[b-p58vr14ti1] {
    white-space: nowrap;
    color: #6b7280;
    font-size: .82rem;
}

/* La columna de estado de Salida, que no tenía ni una regla: un error de envío puede ser una línea
   larga del servidor y descuadraba la tabla entera.

   Va en gris y no en rojo A PROPÓSITO: esa misma celda pinta «Pendiente» cuando el correo solo está
   esperando su turno, y no hay nada en el marcado que distinga un caso del otro. Pintarla de rojo
   daría por fallido lo que solo está en cola. Para separarlos hace falta tocar el .razor, y eso ya
   no es CSS. */
.td-estado[b-p58vr14ti1] {
    max-width: 20rem;
    font-size: .82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Alta de cuenta de correo (FUN-539) ───────────────────────────────────────────────────────
   Tarjeta blanca centrada, con el mismo lenguaje que el resto de pantallas de configuración de la
   casa (borde #e5e7eb, radio 8, ancho acotado): que se lea como una pantalla del programa y no como
   un formulario técnico suelto pegado a la izquierda. */

.cfg-correo-wrap[b-p58vr14ti1] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
}

.cfg-correo-card[b-p58vr14ti1] {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.cfg-correo-head[b-p58vr14ti1] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.cfg-correo-icono[b-p58vr14ti1] {
    font-size: 1.4rem;
    color: var(--color-primario, #2563eb);
    background: color-mix(in srgb, var(--color-primario, #2563eb) 10%, transparent);
    border-radius: 9px;
    padding: .45rem;
}

.cfg-correo-titulo[b-p58vr14ti1] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.cfg-correo-sub[b-p58vr14ti1] {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: #6b7280;
}

/* Los dos caminos, como tarjetas seleccionables. La elegida se marca con el color de la casa. */
.cfg-correo-tipos[b-p58vr14ti1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}

.cfg-correo-tipo[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .85rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: border-color .12s, background .12s;
}

    .cfg-correo-tipo:hover[b-p58vr14ti1] {
        border-color: #cbd5e1;
        background: #f9fafb;
    }

    .cfg-correo-tipo.activo[b-p58vr14ti1] {
        border-color: var(--color-primario, #2563eb);
        background: color-mix(in srgb, var(--color-primario, #2563eb) 6%, #fff);
    }

    .cfg-correo-tipo .material-symbols-rounded[b-p58vr14ti1] {
        font-size: 1.3rem;
        color: #94a3b8;
    }

    .cfg-correo-tipo.activo .material-symbols-rounded[b-p58vr14ti1] {
        color: var(--color-primario, #2563eb);
    }

.cfg-correo-tipo-txt[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .cfg-correo-tipo-txt strong[b-p58vr14ti1] {
        font-size: .9rem;
        font-weight: 600;
    }

    .cfg-correo-tipo-txt small[b-p58vr14ti1] {
        font-size: .75rem;
        color: #6b7280;
    }

/* Campos: rejilla de dos columnas; los largos ocupan las dos y los puertos, una. */
.cfg-correo-campos[b-p58vr14ti1] {
    display: grid;
    grid-template-columns: 1fr 7.5rem;
    gap: .85rem .8rem;
}

.cfg-correo-campo[b-p58vr14ti1] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cfg-correo-campo-corto[b-p58vr14ti1] {
    grid-column: auto;
}

.cfg-correo-campos > .cfg-correo-campo:has(+ .cfg-correo-campo-corto)[b-p58vr14ti1] {
    grid-column: 1;
}

.cfg-correo-campo label[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
}

.cfg-correo-tag[b-p58vr14ti1] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: .05rem .3rem;
}

.cfg-correo-input[b-p58vr14ti1] {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: .55rem .7rem;
    transition: border-color .12s, box-shadow .12s;
}

    .cfg-correo-input:hover[b-p58vr14ti1] {
        border-color: #b6bec9;
    }

    .cfg-correo-input:focus[b-p58vr14ti1] {
        outline: none;
        border-color: var(--color-primario, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
    }

/* LA PIEZA DE LA FICHA: que el ejemplo NO se lea como un valor ya escrito. Antes salía en el mismo
   tono que el texto real y el usuario daba los campos por rellenos: guardaba una cuenta sin servidor
   y la pantalla le decía que todo había ido bien. En cursiva y muy claro se distingue sin leerlo. */
.cfg-correo-input[b-p58vr14ti1]::placeholder {
    font-style: italic;
    color: #9ca3af;
    opacity: .8;
}

/* El interrogante de la contraseña: en la etiqueta, que nunca se deshabilita y siempre se puede pulsar. */
.cfg-correo-ayuda-btn[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-primario, #2563eb);
    cursor: pointer;
}

    .cfg-correo-ayuda-btn .material-symbols-rounded[b-p58vr14ti1] {
        font-size: 1.05rem;
    }

    .cfg-correo-ayuda-btn:hover[b-p58vr14ti1] {
        background: color-mix(in srgb, var(--color-primario, #2563eb) 12%, transparent);
    }

.cfg-correo-ayuda[b-p58vr14ti1] {
    border: 1px solid color-mix(in srgb, var(--color-primario, #2563eb) 25%, transparent);
    background: color-mix(in srgb, var(--color-primario, #2563eb) 4%, #fff);
    border-radius: 9px;
    padding: .8rem .9rem;
    font-size: .82rem;
    line-height: 1.55;
    color: #4b5563;
}

    .cfg-correo-ayuda p[b-p58vr14ti1] {
        margin: 0 0 .45rem;
    }

    .cfg-correo-ayuda ol[b-p58vr14ti1] {
        margin: 0;
        padding-left: 1.15rem;
    }

    .cfg-correo-ayuda li[b-p58vr14ti1] {
        margin-bottom: .18rem;
    }

    .cfg-correo-ayuda a[b-p58vr14ti1] {
        color: var(--color-primario, #2563eb);
        font-weight: 600;
        word-break: break-all;
    }

/* El atajo de cada paso: el camino por menús va en el texto normal y la dirección directa debajo, más
   pequeña, para que no tape las instrucciones. */
.cfg-correo-ayuda-atajo[b-p58vr14ti1] {
    display: inline-block;
    margin-top: .15rem;
    font-size: .76rem;
    color: #6b7280;
}

/* Las direcciones sueltas, para quien configura esto desde otro equipo o desde el móvil. */
.cfg-correo-ayuda-nota[b-p58vr14ti1] {
    margin: .6rem 0 0;
    padding-top: .55rem;
    border-top: 1px solid color-mix(in srgb, var(--color-primario, #2563eb) 18%, transparent);
    font-size: .78rem;
    color: #6b7280;
}

    .cfg-correo-ayuda-nota code[b-p58vr14ti1] {
        display: inline-block;
        font-size: .78rem;
        background: #f3f4f6;
        border-radius: 4px;
        padding: .05rem .25rem;
        word-break: break-all;
    }

/* La fila que pliega los servidores: una fila de verdad, del ancho de la tarjeta, no un enlace suelto. */
.cfg-correo-plegable[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .cfg-correo-plegable:hover[b-p58vr14ti1] {
        background: #f3f4f6;
        border-color: #d8dee6;
    }

    .cfg-correo-plegable.abierto[b-p58vr14ti1] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }

.cfg-correo-plegable-txt[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

    .cfg-correo-plegable-txt .material-symbols-rounded[b-p58vr14ti1] {
        font-size: 1.05rem;
        color: #6b7280;
    }

.cfg-correo-chevron[b-p58vr14ti1] {
    font-size: 1.15rem;
    color: #6b7280;
    transition: transform .15s;
}

.cfg-correo-plegable.abierto .cfg-correo-chevron[b-p58vr14ti1] {
    transform: rotate(180deg);
}

/* Los servidores: al MISMO nivel que el resto, encajados bajo la fila que los pliega. Nada de
   recuadro punteado: eso los sacaba del formulario y parecían un apéndice. */
.cfg-correo-servidores[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: -1.1rem;
    padding: .9rem 0 0;
    border-top: 1px solid #e5e7eb;
}

.cfg-correo-plegable + .cfg-correo-servidores[b-p58vr14ti1] {
    margin-top: -1.1rem;
    padding: .9rem .8rem 0;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    padding-bottom: .9rem;
}

.cfg-correo-nota[b-p58vr14ti1] {
    margin: 0;
    font-size: .78rem;
    color: #6b7280;
}

/* La nota que NO se puede pasar por alto: quien abre este desplegable es justo quien está a punto de
   cambiar unos datos que ya son correctos. Destaca por el * y por el contraste del texto, no por el
   color: un recuadro de aviso aquí desentonaba con la tarjeta, que es blanca y suave, y hacía pensar
   que algo iba mal cuando lo único que dice es «no toques esto». */
.cfg-correo-nota-clave[b-p58vr14ti1] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #4b5563;
}

    .cfg-correo-nota-clave strong[b-p58vr14ti1] {
        font-weight: 700;
        color: #111827;
    }

.cfg-correo-asterisco[b-p58vr14ti1] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
}

/* El desenlace de la comprobación. Lo que va mal se pinta en ámbar y con icono de información, no en
   rojo de avería: casi siempre es una letra mal escrita, y un bloque rojo hace pensar que el fallo es
   del programa y que no hay nada que hacer. */
.cfg-correo-aviso[b-p58vr14ti1] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    border-radius: 8px;
    padding: .7rem .8rem;
    font-size: .84rem;
    line-height: 1.5;
    border: 1px solid transparent;
}

    .cfg-correo-aviso .material-symbols-rounded[b-p58vr14ti1] {
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .cfg-correo-aviso.ok[b-p58vr14ti1] {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }

    .cfg-correo-aviso.revisar[b-p58vr14ti1] {
        background: #fffbeb;
        border-color: #fde68a;
        color: #78350f;
    }

.cfg-correo-aviso-txt[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

    .cfg-correo-aviso-txt > strong[b-p58vr14ti1] {
        font-weight: 600;
    }

.cfg-correo-aviso-item[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
}

.cfg-correo-aviso-que[b-p58vr14ti1] {
    font-weight: 600;
}

.cfg-correo-aviso-como[b-p58vr14ti1] {
    color: #92702a;
}

.cfg-correo-aviso.revisar .cfg-correo-aviso-como[b-p58vr14ti1] {
    color: #92400e;
    opacity: .85;
}

/* El texto literal del servidor sigue estando (soporte lo necesita), pero plegado: es lo único de
   esta pantalla que está en inglés. */
.cfg-correo-tecnico-btn[b-p58vr14ti1] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: .78rem;
    color: inherit;
    text-decoration: underline;
    opacity: .75;
    cursor: pointer;
}

    .cfg-correo-tecnico-btn:hover[b-p58vr14ti1] {
        opacity: 1;
    }

.cfg-correo-tecnico[b-p58vr14ti1] {
    margin: 0;
    padding: .5rem .6rem;
    border-radius: 6px;
    background: rgba(120, 53, 15, .07);
    font-size: .74rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.cfg-correo-acciones[b-p58vr14ti1] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding-top: .3rem;
    border-top: 1px solid #f1f5f9;
    margin-top: .1rem;
}

@media (max-width: 640px) {
    .cfg-correo-tipos[b-p58vr14ti1],
    .cfg-correo-campos[b-p58vr14ti1] {
        grid-template-columns: 1fr;
    }

    .cfg-correo-campo-corto[b-p58vr14ti1] {
        grid-column: 1 / -1;
    }
}

/* Los avisos, con borde además del fondo: un bloque de color plano sobre una tarjeta blanca se lee
   como un trozo de fondo mal pintado. El borde lo convierte en una caja a propósito. */
.correo-mensaje[b-p58vr14ti1] {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.88rem;
}

.correo-mensaje.ok[b-p58vr14ti1] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.correo-mensaje.error[b-p58vr14ti1] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.correo-composer-backdrop[b-p58vr14ti1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.correo-composer[b-p58vr14ti1] {
    background: var(--fondo, #fff);
    border-radius: 10px;
    padding: 1.5rem;
    width: min(40rem, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.correo-composer h2[b-p58vr14ti1] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

/* ── Los formularios del módulo (FUN-548) ─────────────────────────────────────────────────────
   `.correo-form` es la rejilla del redactor Y del panel de Cuenta, y hasta aquí no tenía NI UNA
   regla: sus cuadros salían con el tamaño por defecto del navegador. Eso dejaba el Asunto en una
   cajita de dos dedos donde no cabía el asunto que se iba a mandar, y el panel de Cuenta con seis
   campos sueltos de aspecto crudo, justo el formulario que en el alta ya está cuidado.

   Mismo lenguaje que la tarjeta del alta (`.cfg-correo-*`): etiqueta arriba en negrita pequeña,
   cuadro de borde suave con aro de foco en el color de la casa. Así las tres pantallas que piden
   datos de correo se parecen entre sí. */
.correo-form[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

    .correo-form > label[b-p58vr14ti1] {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        font-size: .8rem;
        font-weight: 600;
        color: #374151;
    }

    /* Los cuadros: todos menos el que vive DENTRO de la caja de chips, que no es un cuadro suyo
       sino el hueco donde se teclea el siguiente destinatario. */
    .correo-form input:not(.correo-chip-input)[b-p58vr14ti1],
    .correo-form select[b-p58vr14ti1],
    .correo-form textarea[b-p58vr14ti1] {
        width: 100%;
        font: inherit;
        font-size: .92rem;
        color: #111827;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        padding: .55rem .7rem;
        transition: border-color .12s, box-shadow .12s;
    }

        .correo-form input:not(.correo-chip-input):hover[b-p58vr14ti1],
        .correo-form select:hover[b-p58vr14ti1],
        .correo-form textarea:hover[b-p58vr14ti1] {
            border-color: #b6bec9;
        }

        .correo-form input:not(.correo-chip-input):focus[b-p58vr14ti1],
        .correo-form select:focus[b-p58vr14ti1],
        .correo-form textarea:focus[b-p58vr14ti1] {
            outline: none;
            border-color: var(--color-primario, #2563eb);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
        }

    .correo-form input[b-p58vr14ti1]::placeholder,
    .correo-form textarea[b-p58vr14ti1]::placeholder {
        font-style: italic;
        color: #9ca3af;
        opacity: .8;
    }


.correo-composer-acciones[b-p58vr14ti1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: .7rem;
    border-top: 1px solid #f1f5f9;
}

/* ── Composer rico (EM3): chips de destinatario, RTE y adjuntos ── */
.correo-composer-rico[b-p58vr14ti1] {
    width: min(60rem, 94vw);
    max-height: 92vh;
    overflow-y: auto;
}

.correo-chips-campo[b-p58vr14ti1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.correo-chips-label[b-p58vr14ti1] {
    min-width: 2.8rem;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
}

/* La caja de destinatarios no es un cuadro de texto, pero tiene que parecerlo: es la primera línea
   del formulario y si se comporta distinta al resto (sin aro de foco, con otro radio) el redactor
   se lee como dos formularios pegados. */
.correo-chips[b-p58vr14ti1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 12rem;
    min-height: 2.4rem;
    padding: .25rem .4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    transition: border-color .12s, box-shadow .12s;
}

    .correo-chips:hover[b-p58vr14ti1] {
        border-color: #b6bec9;
    }

    .correo-chips:focus-within[b-p58vr14ti1] {
        border-color: var(--color-primario, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
    }

.correo-chip[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.82rem;
}

.correo-chip .material-symbols-rounded[b-p58vr14ti1] {
    font-size: 14px;
}

.correo-chip-quitar[b-p58vr14ti1] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--texto-secundario, #6b7280);
}

.correo-chip-input[b-p58vr14ti1] {
    flex: 1;
    min-width: 8rem;
    border: none !important;
    outline: none;
    padding: 0.2rem 0.25rem !important;
}

/* Autocompletar de destinatarios (EM6): desplegable de sugerencias de contactos del CRM. */
.correo-sugerencias[b-p58vr14ti1] {
    list-style: none;
    margin: 0.1rem 0 0 0;
    padding: 0.2rem;
    width: 100%;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: var(--fondo, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

.correo-sugerencia[b-p58vr14ti1] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
}

.correo-sugerencia:hover[b-p58vr14ti1] {
    background: #f8fafc;
}

.correo-sugerencia-nombre[b-p58vr14ti1] {
    font-weight: 600;
}

.correo-sugerencia-email[b-p58vr14ti1] {
    color: #6b7280;
}

.correo-btn-enlace[b-p58vr14ti1] {
    border: none;
    background: transparent;
    color: var(--color-primario, #2563eb);
    cursor: pointer;
    font-size: 0.8rem;
}

.correo-composer-cuerpo[b-p58vr14ti1] {
    border-radius: 6px;
}

/* El tirador del editor es diagonal y mueve ancho Y alto, pero a lo ancho no interesa: el cuerpo se
   salía de la ventana y dejaba de ser usable. Clavando el ancho al 100 % el tirador solo sirve para
   lo que tiene sentido, dar más alto. El !important es a propósito: Syncfusion escribe el ancho en
   el atributo de estilo del elemento mientras se arrastra, y desde la hoja no se gana de otra forma. */
.correo-composer-cuerpo[b-p58vr14ti1]  .e-richtexteditor {
    width: 100% !important;
    max-width: 100% !important;
}

.correo-adjuntos-composer[b-p58vr14ti1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.correo-adjuntos-composer #nc-adjuntar[b-p58vr14ti1] {
    cursor: pointer;
}

.correo-adjunto-chip-composer[b-p58vr14ti1] {
    background: #f1f5f9;
}

.correo-header-acciones[b-p58vr14ti1] {
    display: flex;
    gap: 0.5rem;
}

.correo-buscador[b-p58vr14ti1] {
    display: flex;
    gap: 0.35rem;
}

    /* Mismo cuadro que los del alta y el redactor: borde, radio y aro de foco idénticos. Antes era
       medio centímetro más bajo y con otro radio, y al lado del botón de Buscar se notaba. */
    .correo-buscador input[b-p58vr14ti1] {
        font: inherit;
        font-size: .9rem;
        color: #111827;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        padding: .5rem .7rem;
        min-width: 16rem;
        transition: border-color .12s, box-shadow .12s;
    }

        .correo-buscador input:hover[b-p58vr14ti1] {
            border-color: #b6bec9;
        }

        .correo-buscador input:focus[b-p58vr14ti1] {
            outline: none;
            border-color: var(--color-primario, #2563eb);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
        }

/* El filtro por intención se quedaba flotando en mitad de la barra, sin una sola regla y con el
   aspecto por defecto del navegador: la barra tiene tres piezas y `space-between` repartía el hueco
   dejándolo suelto en el centro, sin pertenecer ni al buscador ni a Actualizar.

   Con `margin-left:auto` se va a la derecha y forma grupo con Actualizar, que es lo que es: las dos
   cosas que acotan lo que se está viendo. Y se viste como el resto de desplegables del módulo. */
#correo-filtro-intencion[b-p58vr14ti1] {
    margin-left: auto;
    font: inherit;
    font-size: .88rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: .45rem .6rem;
    transition: border-color .12s, box-shadow .12s;
}

    #correo-filtro-intencion:hover:not(:disabled)[b-p58vr14ti1] {
        border-color: #b6bec9;
    }

    #correo-filtro-intencion:focus[b-p58vr14ti1] {
        outline: none;
        border-color: var(--color-primario, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
    }

    #correo-filtro-intencion:disabled[b-p58vr14ti1] {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
    }

.correo-layout[b-p58vr14ti1] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

/* La columna de carpetas, en tarjeta como la lista: eran botones sueltos flotando sobre el fondo,
   y la bandeja parecía empezar en la tabla en vez de en la carpeta elegida. */
.correo-carpetas[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.correo-carpeta[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 0.88rem;
    color: #334155;
    transition: background .12s, color .12s;
}

    .correo-carpeta:hover[b-p58vr14ti1] {
        background: #f8fafc;
        color: #111827;
    }

.correo-carpeta.activa[b-p58vr14ti1] {
    background: color-mix(in srgb, var(--color-primario, #2563eb) 8%, #fff);
    color: var(--color-primario, #2563eb);
    font-weight: 600;
}

.correo-badge[b-p58vr14ti1] {
    background: var(--color-primario, #2563eb);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}

.correo-lista-panel[b-p58vr14ti1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* La barra de acciones sobre lo seleccionado: una banda propia, para que se vea que actúa sobre las
   filas marcadas y no sobre la carpeta entera. */
.correo-acciones-masa[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: .5rem .6rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

    .correo-acciones-masa select[b-p58vr14ti1] {
        font: inherit;
        font-size: .85rem;
        color: #111827;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        padding: .42rem .6rem;
        transition: border-color .12s, box-shadow .12s;
    }

        .correo-acciones-masa select:hover[b-p58vr14ti1] {
            border-color: #b6bec9;
        }

        .correo-acciones-masa select:focus[b-p58vr14ti1] {
            outline: none;
            border-color: var(--color-primario, #2563eb);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
        }

/* Seleccionada gana al hover: si se ve igual que la fila que tienes debajo del ratón, no sabes
   cuáles van a recibir la acción. */
.correo-fila.seleccionada[b-p58vr14ti1],
.correo-fila.seleccionada:hover[b-p58vr14ti1] {
    background: color-mix(in srgb, var(--color-primario, #2563eb) 7%, #fff);
}

.correo-paginacion[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #6b7280;
}

/* El correo abierto es la tarjeta principal de la pantalla: mismo borde y radio que el alta, y una
   sombra un punto más marcada para que se despegue de la lista que tiene encima. */
.correo-detalle[b-p58vr14ti1] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.correo-detalle-cabecera[b-p58vr14ti1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #f1f5f9;
}

.correo-detalle-cabecera h3[b-p58vr14ti1] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
}

.correo-detalle-cabecera-acciones[b-p58vr14ti1] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.correo-detalle-meta[b-p58vr14ti1] {
    color: #6b7280;
    font-size: 0.85rem;
}

/* Lo que ha escrito la IA se marca como tal, con el color de la casa y un canto de color: en gris
   liso se confunde con una cita del propio correo, y eso es justo lo que no puede pasar. */
.correo-detalle-resumen-ia[b-p58vr14ti1] {
    background: color-mix(in srgb, var(--color-primario, #2563eb) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primario, #2563eb) 18%, #fff);
    border-left: 3px solid var(--color-primario, #2563eb);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}

.correo-detalle-aviso[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

.correo-detalle-adjuntos[b-p58vr14ti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.correo-adjunto-chip[b-p58vr14ti1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--borde, #d1d5db);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: inherit;
}

.correo-adjunto-chip:hover[b-p58vr14ti1] {
    background: #f8fafc;
}

.correo-detalle-cuerpo[b-p58vr14ti1] {
    white-space: pre-wrap;
}

/* El cuerpo cuando el correo NO trae HTML y se cae al texto plano. Sin una sola regla salía con el
   interlineado por defecto del navegador y pegado al borde, justo al lado del visor con HTML, que sí
   está cuidado. Es el mismo criterio que FUN-549: lo que se lee tiene que leerse igual por los dos
   caminos. */
.correo-detalle-texto[b-p58vr14ti1] {
    margin: 0;
    padding: .25rem 0;
    font-size: .92rem;
    line-height: 1.55;
    color: #1f2937;
    overflow-wrap: anywhere;
}

/* El correo se pinta dentro de su propio marco: es contenido ajeno, de fuera del programa, y sin
   una línea que lo encuadre se confunde con la pantalla. Encaja con lo que hace FUN-549 por dentro,
   que es darle al documento del iframe la tipografía de la casa. */
.correo-detalle-iframe[b-p58vr14ti1] {
    width: 100%;
    min-height: 20rem;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #fff;
}

.correo-hilo[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid var(--borde-suave, #e5e7eb);
    padding-top: 0.75rem;
}

.correo-hilo h4[b-p58vr14ti1] {
    margin: 0 0 0.25rem 0;
    font-size: 0.85rem;
    color: var(--texto-secundario, #6b7280);
}

.correo-hilo-fila[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
}

.correo-hilo-fila:hover[b-p58vr14ti1] {
    background: #f8fafc;
}

.correo-hilo-fila.no-leido[b-p58vr14ti1] {
    font-weight: 600;
}

/* Quién escribió cada mensaje del hilo: acotado, para que un remitente largo no empuje el asunto
   fuera de la fila. Es lo que se lee primero, así que va en tono normal y el asunto en gris. */
.correo-hilo-remitente[b-p58vr14ti1] {
    min-width: 8rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
}

.correo-hilo-asunto[b-p58vr14ti1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
}

.correo-hilo-fecha[b-p58vr14ti1] {
    color: var(--texto-secundario, #6b7280);
    white-space: nowrap;
}

/* ── Plantillas (EM5) ──────────────────────────────────────────────────────── */

.correo-plantilla-selector[b-p58vr14ti1] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

    /* Que el desplegable ocupe la fila y el botón se quede a su lado, en vez de un select minúsculo
       con un hueco vacío detrás. */
    .correo-plantilla-selector > label[b-p58vr14ti1] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .3rem;
        font-size: .8rem;
        font-weight: 600;
        color: #374151;
    }

/* El «todavía no tienes» del selector (FUN-552): en tono de ayuda, debajo y a la vista. Un control
   apagado no enseña su title, así que el motivo tiene que estar escrito fuera de él. */
.correo-plantilla-vacio[b-p58vr14ti1] {
    margin: .35rem 0 0;
    font-size: .78rem;
    color: #6b7280;
}

/* Y que el desplegable apagado se NOTE apagado: si se ve igual que uno vivo, el usuario lo pulsa, no
   pasa nada y concluye que el programa está roto. */
.correo-plantilla-selector select:disabled[b-p58vr14ti1] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

.correo-plantillas-lista[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 12rem;
    overflow-y: auto;
    border-bottom: 1px solid var(--borde-suave, #e5e7eb);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.correo-plantilla-fila[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
}

.correo-plantilla-fila:hover[b-p58vr14ti1] {
    background: #f8fafc;
}

.correo-plantilla-nombre[b-p58vr14ti1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Panel IA del composer (EM8): redaccion asistida por el motor IA del ERP */
.correo-ia-panel[b-p58vr14ti1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Sólido, no punteado: el punteado saca la caja del formulario y la deja con pinta de parche
       pegado encima, que es justo lo que se dijo del alta. */
    border: 1px solid #e5e7eb;
    padding: .7rem .8rem;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.correo-ia-label[b-p58vr14ti1] {
    font-weight: 600;
    font-size: .8rem;
    color: #374151;
}

/* El cuadro de la petición a la IA vive DENTRO del redactor, así que se escribe igual que los demás
   cuadros del redactor: mismo borde, mismo radio, mismo aro de foco. Con otro radio y sin aro se
   leía como un control prestado de otra pantalla. */
.correo-ia-prompt[b-p58vr14ti1] {
    width: 100%;
    resize: vertical;
    font: inherit;
    font-size: .92rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: .55rem .7rem;
    transition: border-color .12s, box-shadow .12s;
}

    .correo-ia-prompt:hover[b-p58vr14ti1] {
        border-color: #b6bec9;
    }

    .correo-ia-prompt:focus[b-p58vr14ti1] {
        outline: none;
        border-color: var(--color-primario, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563eb) 15%, transparent);
    }

.correo-ia-acciones[b-p58vr14ti1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.correo-ia-estado[b-p58vr14ti1] {
    font-size: 0.85rem;
    color: var(--texto-secundario, #6b7280);
}

.correo-ia-estado.error[b-p58vr14ti1],
.correo-detalle-ia-no-disponible.error[b-p58vr14ti1] {
    color: var(--peligro, #b91c1c);
}

.correo-detalle-ia-no-disponible[b-p58vr14ti1] {
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

/* ── IC5: chips de clasificación IA (intención + tono) en la lista del buzón ── */
.correo-chip-ia[b-p58vr14ti1] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    background: #f1f5f9;
    color: var(--texto-secundario, #4b5563);
    border: 1px solid var(--borde, #d1d5db);
}

.correo-chip-ia.chip-queja[b-p58vr14ti1] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.correo-chip-ia.chip-presupuesto[b-p58vr14ti1] { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.correo-chip-ia.chip-soporte[b-p58vr14ti1] { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.correo-chip-ia.chip-comercial[b-p58vr14ti1] { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

.correo-chip-ia.chip-enfadado[b-p58vr14ti1] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.correo-chip-ia.chip-satisfecho[b-p58vr14ti1] { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }


/* ══════════════════ Bandeja: cabecera, buscador, carpetas y visor ══════════════════
   Al final de la hoja a propósito: estas reglas mandan sobre las de arriba sin reescribirlas. */

/* A todo el ancho, como Clientes: el borde lo pone .main-body; 9px entre bloques. */
.correo-page[b-p58vr14ti1] { padding: 0; gap: 9px; }

/* Cabecera como en Diario: sin flex-wrap (si la barra bajara de línea, su script nunca vería que falta
   sitio), el bloque del título no cede y va en una línea, así los botones pasan a solo iconos y al «···»
   antes de aplastarlo; con la barra replegada del todo, el título y la cuenta envuelven. */
.correo-header[b-p58vr14ti1] { flex-wrap: nowrap; align-items: center; gap: 16px; min-width: 0; }
.correo-header > .correo-header-info[b-p58vr14ti1] { flex: 0 0 auto; min-width: 0; }
.correo-header.command-bar-host-collapsed > .correo-header-info[b-p58vr14ti1] { flex: 1 1 auto; flex-wrap: wrap; }
.correo-title[b-p58vr14ti1] { white-space: nowrap; }
.correo-header.command-bar-host-collapsed .correo-title[b-p58vr14ti1] { white-space: normal; }
.correo-header[b-p58vr14ti1]  .correo-header-actions { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

/* El buscador ocupa todo el ancho que deja el filtro por intención. */
.correo-toolbar[b-p58vr14ti1] { flex-wrap: nowrap; }
.correo-buscador[b-p58vr14ti1] { flex: 1 1 auto; min-width: 0; }
.correo-buscador input[b-p58vr14ti1] { flex: 1 1 auto; min-width: 0; width: 100%; }
#correo-filtro-intencion[b-p58vr14ti1] { flex: 0 0 auto; }

/* Una sola columna a todo el ancho: arriba la barra de carpetas (Entrada, Salida, Enviados…) repartida a lo
   ancho, debajo la franja de acciones sobre lo seleccionado y debajo la tabla. Todo con el mismo ancho que
   el buscador. La barra se desplaza de lado si no cabe, y por eso puede encoger: el alto mínimo es su
   contenido, o la tabla la aplastaría. */
.correo-layout[b-p58vr14ti1] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
                 row-gap: .75rem; align-items: start;
                 /* Sin alto fijo (la página ya se desplaza): con el alto de la pantalla, la fila de carpetas se
                    aplastaba y la franja de acciones se le montaba encima. */
                 flex: none; min-height: auto; }
.correo-layout > .correo-carpetas[b-p58vr14ti1] { grid-column: 1; grid-row: 1; min-width: 0; min-height: max-content;
                                    flex-direction: row; gap: .25rem; overflow-x: auto; }
.correo-layout > .correo-acciones-masa[b-p58vr14ti1] { grid-column: 1; grid-row: 2; }
.correo-layout > .correo-lista-panel[b-p58vr14ti1] { grid-column: 1; grid-row: 3; }
/* Cada carpeta se lleva su parte del ancho; el nombre y el contador, centrados. */
.correo-layout > .correo-carpetas .correo-carpeta[b-p58vr14ti1] { flex: 1 1 0; min-width: max-content; justify-content: center; gap: .45rem; }

/* La tabla cabe entera en su recuadro: el asunto se lleva el ancho que sobre y se corta con «…» (el ancho
   máximo a 0 es lo que le deja encoger). Antes tenía un tope fijo de 32rem y empujaba la fecha fuera de la
   vista, detrás de una barra de desplazamiento horizontal. */
.correo-table .td-asunto[b-p58vr14ti1] { max-width: 0; width: 100%; }

/* El redactor, en la página (como el correo abierto): sin velo ni sombra de ventana, a todo el ancho. */
.correo-redaccion[b-p58vr14ti1] { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.correo-composer-pagina[b-p58vr14ti1] { width: 100%; max-width: none; max-height: none; overflow: visible; box-sizing: border-box;
                          box-shadow: none; border: 1px solid #e3e8ef; border-radius: 12px; }

/* Botones de la papelera que borran para siempre: en rojo al pasar por encima. */
.correo-btn-peligro .material-symbols-rounded[b-p58vr14ti1] { font-size: 18px; }
.correo-btn-peligro:hover:not(:disabled)[b-p58vr14ti1] { color: #b42318; border-color: #f3b4ae; background: #fef3f2; }

/* El correo abierto, en la página (como Gmail): en el sitio de la lista y a todo el ancho; una barra con
   «Volver» encima y el cuerpo con alto de sobra para leerlo sin ventanas. */
.correo-lectura[b-p58vr14ti1] { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.correo-lectura-barra[b-p58vr14ti1] { display: flex; align-items: center; }
.correo-volver[b-p58vr14ti1] { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dfe5ec; background: #fff;
                 color: #2b3a4a; border-radius: 8px; padding: .45rem .85rem; font-size: .88rem; font-weight: 600; cursor: pointer; }
.correo-volver:hover[b-p58vr14ti1] { border-color: #2f6fed; color: #2f6fed; }
.correo-volver .material-symbols-rounded[b-p58vr14ti1] { font-size: 20px; }
.correo-detalle-pagina[b-p58vr14ti1] { min-width: 0; box-sizing: border-box; }
.correo-detalle-pagina .correo-detalle-cabecera[b-p58vr14ti1] { flex-wrap: wrap; }
.correo-detalle-pagina .correo-detalle-cabecera > *[b-p58vr14ti1] { min-width: 0; }
.correo-detalle-pagina .correo-detalle-cabecera-acciones[b-p58vr14ti1] { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }

/* Botones del correo abierto: un grupo para responder/reenviar (el principal relleno) y, a la derecha, el de
   la IA en su cápsula de color suave. Misma altura para todo, iconos a 18px. */
.correo-detalle-pagina .correo-detalle-cabecera-acciones[b-p58vr14ti1] { justify-content: space-between; align-items: center; gap: .6rem;
                                                          padding-top: .25rem; }
.correo-acc-grupo[b-p58vr14ti1] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.correo-acc[b-p58vr14ti1] { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .9rem; border-radius: 9px;
              border: 1px solid #d8dfe8; background: #fff; color: #2b3a4a; font-size: .86rem; font-weight: 600;
              font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.correo-acc .material-symbols-rounded[b-p58vr14ti1] { font-size: 18px; }
.correo-acc:hover:not(:disabled)[b-p58vr14ti1] { background: #f3f6fa; border-color: #b9c4d2; }
.correo-acc:disabled[b-p58vr14ti1] { opacity: .5; cursor: default; }
.correo-acc-principal[b-p58vr14ti1] { background: #1f4fd1; border-color: #1f4fd1; color: #fff; }
.correo-acc-principal:hover:not(:disabled)[b-p58vr14ti1] { background: #1a43b3; border-color: #1a43b3; }
.correo-acc-ia[b-p58vr14ti1] { background: #f4f1ff; border: 1px solid #e3dcfb; border-radius: 12px; padding: .25rem .3rem .25rem .5rem; }
.correo-acc-ia-marca[b-p58vr14ti1] { display: inline-flex; color: #6d4fd8; }
.correo-acc-ia-marca .material-symbols-rounded[b-p58vr14ti1] { font-size: 18px; }
.correo-acc-tono[b-p58vr14ti1] { height: 32px; border: 1px solid #e0d8fa; border-radius: 8px; background: #fff; color: #3b2f6b;
                   font-size: .82rem; padding: 0 .5rem; font-family: inherit; cursor: pointer; max-width: 11rem; }
.correo-acc-ia-btn[b-p58vr14ti1] { height: 32px; border-color: transparent; background: transparent; color: #4b3aa6; padding: 0 .7rem; }
.correo-acc-ia-btn:hover:not(:disabled)[b-p58vr14ti1] { background: #e9e3ff; border-color: transparent; }
@media (max-width: 600px) {
    .correo-acc-grupo[b-p58vr14ti1], .correo-acc-ia[b-p58vr14ti1] { width: 100%; }
    .correo-acc[b-p58vr14ti1] { flex: 1 1 auto; justify-content: center; }
    .correo-acc-tono[b-p58vr14ti1] { flex: 1 1 100%; max-width: none; }
}
.correo-detalle-pagina .correo-detalle-cuerpo[b-p58vr14ti1] { display: flex; flex-direction: column; }
.correo-detalle-pagina .correo-detalle-iframe[b-p58vr14ti1] { min-height: 65vh; }

/* ── Pantallas pequeñas ── */
@media (max-width: 900px) {
    /* Sin alto fijo: la página crece hacia abajo. Las carpetas no se reparten el ancho: cada una a su
       tamaño y la barra se desplaza de lado. */
    .correo-layout[b-p58vr14ti1] { flex: none; min-height: auto; }
    .correo-layout > .correo-carpetas .correo-carpeta[b-p58vr14ti1] { flex: 0 0 auto; }
}

@media (max-width: 600px) {
    .correo-toolbar[b-p58vr14ti1] { flex-wrap: wrap; }
    .correo-buscador[b-p58vr14ti1], #correo-filtro-intencion[b-p58vr14ti1] { flex: 1 1 100%; }
    .correo-detalle-pagina .correo-detalle-iframe[b-p58vr14ti1] { min-height: 55vh; }
}
/* _content/ErpPowergest/Presentation/Crm/Components/Adjuntos/FranjaArchivos.razor.rz.scp.css */
/* Franja de archivos al pie de un recuadro de texto. */

.franja-arch[b-tejtvnoilp] {
    border-top: 1px solid #eef2f6;
    background: #f8fafc;
}

/* ── Los archivos a la vista ───────────────────────────────────────────────────────────────────
   Estado de PARTIDA, y por eso va sin partir líneas: medir si caben es entonces mirar si lo que
   ocupan por dentro es más ancho que su hueco (ver wwwroot/js/franjaArchivos.js). Si el interop
   fallara, este es el estado en el que se queda — los archivos visibles, que es el bueno. */

.franja-archivos[b-tejtvnoilp] {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

.franja-clip[b-tejtvnoilp] {
    flex: none;
    font-size: 16px;
    color: var(--erp-muted, #64748b);
}

/* Es un <button> y no un <a>: el archivo no se sirve por una URL, lo abre el servidor y baja como un
   flujo. Se le quita el aspecto de botón para que se lea como el nombre que es. */
.franja-arch-uno[b-tejtvnoilp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px 3px 6px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 7px;
    background: var(--erp-surface, #fff);
    color: var(--erp-text, #0f172a);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.3;
    cursor: pointer;
}

.franja-arch-uno:hover[b-tejtvnoilp] {
    border-color: var(--erp-primary, #2563eb);
    color: var(--erp-primary, #2563eb);
}

.franja-arch-uno .ico[b-tejtvnoilp] {
    flex: none;
    font-size: 16px;
    color: var(--erp-muted, #64748b);
}

.franja-arch-uno .ico.pdf[b-tejtvnoilp] { color: #dc2626; }
.franja-arch-uno .ico.doc[b-tejtvnoilp] { color: #2563eb; }
.franja-arch-uno .ico.xls[b-tejtvnoilp] { color: #16a34a; }

.franja-nombre[b-tejtvnoilp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── La franja plegada ─────────────────────────────────────────────────────────────────────────
   Solo aparece cuando no caben, y de eso se encarga `data-desborda`, que pone el JavaScript tras
   medir. Mientras no esté, esto no existe para el usuario. */

.franja-plegada[b-tejtvnoilp] {
    display: none;
    width: 100%;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--erp-muted, #64748b);
    text-align: left;
    cursor: pointer;
}

.franja-plegada:hover[b-tejtvnoilp] {
    background: #f1f5f9;
}

.franja-plegada strong[b-tejtvnoilp] {
    flex: none;
    color: var(--erp-text, #0f172a);
    font-size: 13px;
}

.franja-nombres[b-tejtvnoilp] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.franja-chevron[b-tejtvnoilp] {
    flex: none;
    font-size: 18px;
    transition: transform .15s ease;
}

/* ── El cambio, cuando no caben ────────────────────────────────────────────────────────────── */

.franja-arch[data-desborda] .franja-archivos[b-tejtvnoilp] {
    display: none;
}

.franja-arch[data-desborda] .franja-plegada[b-tejtvnoilp] {
    display: flex;
}

/* Abierta a mano: vuelven los archivos, ya repartidos en varias líneas. */
.franja-arch[data-desborda].abierta .franja-archivos[b-tejtvnoilp] {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    padding-top: 0;
}

.franja-arch[data-desborda].abierta .franja-chevron[b-tejtvnoilp] {
    transform: rotate(180deg);
}
/* _content/ErpPowergest/Presentation/Crm/Components/Adjuntos/SeccionAdjuntos.razor.rz.scp.css */
/* Sección de archivos adjuntos de un texto del CRM. */

.adj-seccion[b-hebvr7l023] {
    position: relative;        /* ancla de la capa de «suelta para adjuntar» */
    margin-top: 12px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 10px;
    background: #fcfcfd;
    overflow: hidden;
}

/* ── Cabecera ──────────────────────────────────────────────────────────────────────────────── */

.adj-cab[b-hebvr7l023] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--erp-border, #e2e8f0);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--erp-muted, #64748b);
}

.adj-cab-ico[b-hebvr7l023] {
    font-size: 17px;
}

/* El contador y el botón van juntos a la derecha. El `margin-left: auto` vive AQUÍ y no en el
   contador: sin archivos no hay contador, y el botón se quedaría pegado al título. */
.adj-cab-fin[b-hebvr7l023] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.adj-cuenta[b-hebvr7l023] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* De borde y no relleno: esta cabecera es gris de 12 px y un botón azul macizo pesaría más que el
   título de la sección. Es lo único pulsable que hay en la fila, así que se lee. */
.adj-anadir[b-hebvr7l023] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 10px 3px 7px;
    border: 1px solid #c7d7f5;
    border-radius: 7px;
    background: #fff;
    color: var(--crm-azul, #2563eb);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.adj-anadir:hover[b-hebvr7l023] {
    background: #eff6ff;
    border-color: var(--crm-azul, #2563eb);
}

.adj-anadir .material-symbols-rounded[b-hebvr7l023] {
    font-size: 15px;
}

/* Mientras el motor sube, su input queda deshabilitado y la etiqueta deja de abrir el explorador
   ella sola. Esto solo lo DICE, para que pulsar y que no pase nada no parezca una avería. */
.adj-seccion.subiendo .adj-anadir[b-hebvr7l023],
.adj-seccion.subiendo .adj-soltar[b-hebvr7l023] {
    opacity: .55;
    pointer-events: none;
}

/* ── Lista ─────────────────────────────────────────────────────────────────────────────────── */

.adj-caja[b-hebvr7l023] {
    display: flex;
    align-items: stretch;
    background: var(--erp-surface, #fff);
}

/* Tres filas y ni un píxel más. El alto de fila es FIJO (el nombre se corta con puntos
   suspensivos), así que el salto de las flechas cae siempre justo entre dos filas. */
.adj-rodillo[b-hebvr7l023] {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 138px; /* 3 × 46 */
    overflow: hidden;
}

.adj-filas[b-hebvr7l023] {
    transition: transform .15s ease-out;
}

.adj-fila[b-hebvr7l023] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 12px;
    border-bottom: 1px solid #eef2f6;
}

.adj-fila:last-child[b-hebvr7l023] {
    border-bottom: none;
}

.adj-fila:hover[b-hebvr7l023] {
    background: #f8fafc;
}

.adj-ico[b-hebvr7l023] {
    flex: none;
    font-size: 22px;
    color: var(--erp-muted, #64748b);
}

.adj-ico.pdf[b-hebvr7l023] { color: #dc2626; }
.adj-ico.doc[b-hebvr7l023] { color: #2563eb; }
.adj-ico.xls[b-hebvr7l023] { color: #16a34a; }

.adj-datos[b-hebvr7l023] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Es un <button> y no un <a>: el archivo no se sirve por una URL, se abre por el servidor y baja
   como un flujo. Se le quita el aspecto de botón para que se lea como el nombre que es. */
.adj-nombre[b-hebvr7l023] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--erp-text, #0f172a);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adj-nombre:hover[b-hebvr7l023] {
    color: var(--erp-primary, #2563eb);
}

.adj-meta[b-hebvr7l023] {
    display: block;
    font-size: 11.5px;
    color: var(--erp-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adj-acciones[b-hebvr7l023] {
    display: flex;
    gap: 4px;
    flex: none;
}

.adj-btn[b-hebvr7l023] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--erp-muted, #64748b);
    cursor: pointer;
}

.adj-btn:hover[b-hebvr7l023] {
    background: #f1f5f9;
    color: var(--erp-text, #0f172a);
}

.adj-btn.peligro:hover[b-hebvr7l023] {
    background: #fee2e2;
    color: var(--erp-danger, #dc2626);
}

.adj-btn .material-symbols-rounded[b-hebvr7l023] {
    font-size: 19px;
}

/* ── Flechas, en columna a la derecha ──────────────────────────────────────────────────────── */

.adj-flechas[b-hebvr7l023] {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 26px;
    border-left: 1px solid #eef2f6;
    background: #f8fafc;
}

.adj-flecha[b-hebvr7l023] {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--erp-muted, #64748b);
    cursor: pointer;
}

.adj-flecha:first-child[b-hebvr7l023] {
    border-bottom: 1px solid #eef2f6;
}

.adj-flecha:hover[b-hebvr7l023] {
    background: var(--erp-primary-soft, #eff6ff);
    color: var(--erp-primary, #2563eb);
}

.adj-flecha .material-symbols-rounded[b-hebvr7l023] {
    font-size: 19px;
}

.adj-flecha.inerte[b-hebvr7l023] {
    color: #d7dee7;
    cursor: default;
    background: transparent;
}

/* ── Pregunta y error ──────────────────────────────────────────────────────────────────────── */

/* Un aviso tranquilo, no una alarma. Antes iba en ámbar con el botón en rojo pleno y gritaba más
   que el contenido de la lista que tiene encima: lo que se está quitando es UN archivo, y la
   pregunta ya se encarga de que nadie lo haga sin querer. */
.adj-confirmar[b-hebvr7l023] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--erp-border, #e2e8f0);
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
}

.adj-confirmar .material-symbols-rounded[b-hebvr7l023] {
    font-size: 18px;
    color: var(--erp-muted, #64748b);
}

.adj-confirmar-texto[b-hebvr7l023] {
    flex: 1 1 auto;
    min-width: 0;
}

.adj-confirmar-si[b-hebvr7l023],
.adj-confirmar-no[b-hebvr7l023] {
    flex: none;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Rojo solo en el texto y el borde: se lee que es el que destruye, sin un bloque de color saturado
   dentro de una lista de documentos. Al pasar por encima sí se llena, que es cuando ya se va a pulsar. */
.adj-confirmar-si[b-hebvr7l023] {
    background: #fff;
    border-color: #fecaca;
    color: #b91c1c;
}

.adj-confirmar-si:hover[b-hebvr7l023] {
    background: var(--erp-danger, #dc2626);
    border-color: var(--erp-danger, #dc2626);
    color: #fff;
}

.adj-confirmar-no[b-hebvr7l023] {
    background: #fff;
    border-color: var(--erp-border, #e2e8f0);
    color: #475569;
}

.adj-confirmar-no:hover[b-hebvr7l023] {
    background: #f1f5f9;
}

.adj-error[b-hebvr7l023] {
    padding: 7px 12px;
    border-top: 1px solid var(--erp-border, #e2e8f0);
    background: var(--erp-surface, #fff);
    color: var(--erp-danger, #dc2626);
    font-size: 12px;
}

/* El hueco sin archivos. Ya NO es un cartel que manda a buscar el clip: es la zona de soltar, que es
   lo que la gente intenta hacer con este bloque. El clip se menciona debajo y en pequeño. */
.adj-vacio[b-hebvr7l023] {
    padding: 12px;
    background: var(--erp-surface, #fff);
    color: var(--erp-muted, #64748b);
    font-size: 12.5px;
    line-height: 1.6;
}

.adj-vacio-pista[b-hebvr7l023] {
    margin: 9px 2px 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #94a3b8;
}

.adj-vacio-clip[b-hebvr7l023] {
    font-size: 15px;
    vertical-align: -3px;
}

/* El recuadro de soltar. Discontinuo porque es lo que hace que se lea como «aquí se deja algo» sin
   tener que explicarlo. Es un <label>, así que también se puede pulsar. */
.adj-soltar[b-hebvr7l023] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 110px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #fcfcfd;
    cursor: pointer;
    text-align: center;
}

.adj-soltar:hover[b-hebvr7l023] {
    border-color: var(--crm-azul, #2563eb);
    background: #f8fafc;
}

.adj-soltar-ico[b-hebvr7l023] {
    font-size: 26px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.adj-soltar:hover .adj-soltar-ico[b-hebvr7l023] {
    color: var(--crm-azul, #2563eb);
}

.adj-soltar-titulo[b-hebvr7l023] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.adj-soltar-sub[b-hebvr7l023] {
    font-size: 12px;
    color: var(--erp-muted, #64748b);
}

/* ── Arrastrando por encima ────────────────────────────────────────────────────────────────── */

/* `data-soltando` y NO una clase: la clase de ese <div> la escribe Blazor (lleva la marca de
   desborde), así que una clase puesta desde JavaScript se la llevaría su siguiente repintado. El
   atributo no está en su árbol y sobrevive. Mismo criterio que el `data-desborda` de la franja. */
.adj-seccion[data-soltando][b-hebvr7l023] {
    border-color: var(--crm-azul, #2563eb);
    box-shadow: inset 0 0 0 1px var(--crm-azul, #2563eb);
}

/* La capa vive siempre en el DOM y solo se enseña al arrastrar: así no hay que pintar ni despintar
   nada desde el servidor mientras el ratón se mueve. */
.adj-soltando-capa[b-hebvr7l023] {
    display: none;
}

.adj-seccion[data-soltando] .adj-soltando-capa[b-hebvr7l023] {
    position: absolute;
    inset: 36px 0 0;           /* por debajo de la cabecera, que sigue legible */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(239, 246, 255, .92);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;      /* el `drop` tiene que llegar a la sección, no morir aquí */
}

.adj-soltando-capa .material-symbols-rounded[b-hebvr7l023] {
    font-size: 26px;
}
/* _content/ErpPowergest/Presentation/Crm/Components/Adjuntos/TiraAdjuntos.razor.rz.scp.css */
/* Tira de archivos de un texto corto (comentario, nota). */

.tira-adj[b-ip2nymxrw1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

/* Mientras se escribe se enmarca, para que se lea como parte de la caja de redacción y no como algo
   que flota debajo. Ya publicado va sin marco: ahí son solo los archivos del comentario. */
.tira-adj.editando[b-ip2nymxrw1] {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 9px;
    background: #fcfcfd;
}

.tira-adj-etiqueta[b-ip2nymxrw1] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--erp-muted, #64748b);
    margin-right: 2px;
}

/* ── Recuadro de un archivo ────────────────────────────────────────────────────────────────── */

.tira-adj-chip[b-ip2nymxrw1] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 8px;
    background: var(--erp-surface, #fff);
}

/* El recuadro en duda se marca con el color del borrado, no con un aviso: así se sabe de cuál se
   está hablando sin que la tira entera cambie de tono. */
.tira-adj-chip.en-duda[b-ip2nymxrw1] {
    border-color: #fecaca;
    background: #fef7f7;
}

/* Es un <button> y no un <a>: el archivo no se sirve por una URL, lo abre el servidor y baja como un
   flujo. Se le quita el aspecto de botón para que se lea como el nombre que es. */
.tira-adj-abrir[b-ip2nymxrw1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px 4px 7px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--erp-text, #0f172a);
    cursor: pointer;
}

.tira-adj-abrir:hover[b-ip2nymxrw1] {
    color: var(--erp-primary, #2563eb);
}

.tira-adj-ico[b-ip2nymxrw1] {
    flex: none;
    font-size: 18px;
    color: var(--erp-muted, #64748b);
}

.tira-adj-ico.pdf[b-ip2nymxrw1] { color: #dc2626; }
.tira-adj-ico.doc[b-ip2nymxrw1] { color: #2563eb; }
.tira-adj-ico.xls[b-ip2nymxrw1] { color: #16a34a; }

/* El nombre se corta con puntos suspensivos: un adjunto con nombre largo no debe estirar el hilo de
   comentarios. El nombre entero está en el title del botón. */
.tira-adj-nombre[b-ip2nymxrw1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20em;
}

.tira-adj-peso[b-ip2nymxrw1] {
    flex: none;
    font-size: 11px;
    color: var(--erp-muted, #64748b);
}

.tira-adj-quitar[b-ip2nymxrw1] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--erp-muted, #64748b);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.tira-adj-quitar:hover[b-ip2nymxrw1] {
    background: var(--erp-danger, #dc2626);
    color: #fff;
}

/* ── Añadir ────────────────────────────────────────────────────────────────────────────────── */

.tira-adj-anadir[b-ip2nymxrw1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 11px 4px 8px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

.tira-adj-anadir:hover[b-ip2nymxrw1] {
    background: #e2e8f0;
}

.tira-adj-anadir .material-symbols-rounded[b-ip2nymxrw1] {
    font-size: 16px;
    color: var(--erp-muted, #64748b);
}

.tira-adj-anadir.subiendo[b-ip2nymxrw1] {
    pointer-events: none;
    opacity: .6;
}

.tira-adj-anadir.subiendo .material-symbols-rounded[b-ip2nymxrw1] {
    animation: tira-adj-girando-b-ip2nymxrw1 1s linear infinite;
}

@keyframes tira-adj-girando-b-ip2nymxrw1 {
    to {
        transform: rotate(360deg);
    }
}

/* `::deep` por lo mismo que en SeccionAdjuntos: el InputFile es un componente hijo y el ámbito del
   padre no le llega, así que sin esto se veía el control nativo entero. */
.tira-adj-anadir[b-ip2nymxrw1]  input[type="file"] {
    display: none;
}

/* ── Modo motor ────────────────────────────────────────────────────────────────────────────── */

/* Sin archivos que subir no ocupa NADA: el `display: contents` lo deja sin caja propia, así que no
   mete ni un píxel de hueco en la sección que lo aloja. En cuanto tiene algo que decir, sus hijos
   se pintan como filas normales de esa sección. */
.tira-adj-motor[b-ip2nymxrw1],
.tira-adj-entrada[b-ip2nymxrw1] {
    display: contents;
}

/* El input tiene que EXISTIR en el DOM (es a donde apunta la etiqueta de fuera y donde el arrastre
   deja los ficheros), así que no vale `display: none` en él... y a la vez no puede verse. De ahí
   el escondite por posición en vez de por visibilidad.

   `::deep` porque el InputFile es un componente hijo y el ámbito del padre no le llega. Y sin esto
   se vería el control nativo entero, con su «Elegir archivos» y su «Ningún archivo seleccionado». */
.tira-adj-motor[b-ip2nymxrw1]  input[type="file"],
.tira-adj-entrada[b-ip2nymxrw1]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tira-adj-estado[b-ip2nymxrw1],
.tira-adj-aviso[b-ip2nymxrw1] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-top: 1px solid var(--erp-border, #e2e8f0);
    font-size: 12.5px;
}

.tira-adj-estado[b-ip2nymxrw1] {
    background: var(--erp-surface, #fff);
    color: #475569;
}

.tira-adj-estado .material-symbols-rounded[b-ip2nymxrw1] {
    font-size: 17px;
    color: var(--erp-muted, #64748b);
    animation: tira-adj-girando-b-ip2nymxrw1 1s linear infinite;
}

/* Mismo criterio que el resto del módulo: rojo en el texto, no un bloque rojo. Un archivo
   rechazado es una corrección, no una alarma. */
.tira-adj-aviso[b-ip2nymxrw1] {
    background: #fffbfb;
    color: #b91c1c;
}

.tira-adj-aviso .material-symbols-rounded[b-ip2nymxrw1] {
    font-size: 17px;
    flex: none;
}

/* ── Pregunta y error ──────────────────────────────────────────────────────────────────────── */

/* En línea y no en una barra aparte: la tira ya es estrecha y un bloque debajo empujaría el resto
   del hilo cada vez que alguien pulsa una «x». */
.tira-adj-duda[b-ip2nymxrw1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.tira-adj-si[b-ip2nymxrw1],
.tira-adj-no[b-ip2nymxrw1] {
    padding: 2px 9px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

/* Mismo criterio que en SeccionAdjuntos: rojo en el texto y el borde, y relleno solo al pasar por
   encima. Un bloque rojo dentro del hilo de comentarios se lleva la vista de todo lo demás. */
.tira-adj-si[b-ip2nymxrw1] {
    background: #fff;
    border-color: #fecaca;
    color: #b91c1c;
}

.tira-adj-si:hover[b-ip2nymxrw1] {
    background: var(--erp-danger, #dc2626);
    border-color: var(--erp-danger, #dc2626);
    color: #fff;
}

.tira-adj-no[b-ip2nymxrw1] {
    background: #fff;
    border-color: var(--erp-border, #e2e8f0);
    color: #475569;
}

.tira-adj-no:hover[b-ip2nymxrw1] {
    background: #f1f5f9;
}

.tira-adj-error[b-ip2nymxrw1] {
    flex-basis: 100%;
    color: var(--erp-danger, #dc2626);
    font-size: 12px;
}

/* Aviso de a dónde va a parar lo que se adjunta. Hace falta porque el archivo NO se queda bajo el
   comentario: sube a la lista de la tarjeta, y eso hay que decirlo donde se decide. */
.tira-adj-pista[b-ip2nymxrw1] {
    font-size: 11.5px;
    color: var(--erp-muted, #64748b);
    margin-left: 2px;
}

/* Lo que está en espera se ve IGUAL que lo guardado, sin gris ni marca. Es lo que hace cualquier
   formulario: enseña lo que vas a dejar, y «Guardar» o «Cancelar» deciden si pasa. Distinguirlos
   obligaba a explicar un estado intermedio que el usuario no tiene por qué conocer. */

/* ── Como pie de un recuadro ───────────────────────────────────────────────────────────────────
   Dentro del marco de la descripción: sin margen, pegada al borde y con el mismo gris que la franja
   de lectura, para que el recuadro no cambie de forma al pasar de leer a editar. */
.tira-adj.pie[b-ip2nymxrw1] {
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-top: 1px solid #eef2f6;
    border-radius: 0;
    background: #f8fafc;
}
/* _content/ErpPowergest/Presentation/Crm/Components/AtajosCalendario.razor.rz.scp.css */
/* Los atajos del calendario: la tarjeta y su escena.
   Los estilos de la escena van con ::deep porque ese trozo lo pinta atajosCalendario.js y el CSS con
   ámbito de Blazor no marca lo que no ha pintado él. */

.atj-fondo[b-qcvnnesgnu] {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(18, 24, 36, .45);
    backdrop-filter: blur(2px);
    animation: atj-entra-fondo-b-qcvnnesgnu .18s ease;
}

@keyframes atj-entra-fondo-b-qcvnnesgnu {
    from {
        opacity: 0;
    }
}

.atj-tarjeta[b-qcvnnesgnu] {
    width: min(640px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 28, 45, .28);
    overflow: hidden;
    animation: atj-entra-b-qcvnnesgnu .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes atj-entra-b-qcvnnesgnu {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.atj-cab[b-qcvnnesgnu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px 0 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8b9199;
}

.atj-cuenta[b-qcvnnesgnu] {
    margin-left: auto;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.atj-cerrar[b-qcvnnesgnu] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #8b9199;
    cursor: pointer;
}

    .atj-cerrar:hover[b-qcvnnesgnu] {
        background: #f1f4f9;
        color: #1d2430;
    }

    .atj-cerrar .material-symbols-rounded[b-qcvnnesgnu] {
        font-size: 17px;
    }

/* ── Lo que se lee ────────────────────────────────────────────────────────── */

.atj-texto[b-qcvnnesgnu] {
    padding: 10px 20px 15px;
}

.atj-titulo[b-qcvnnesgnu] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #1d2430;
    text-wrap: balance;
}

.atj-cuerpo[b-qcvnnesgnu] {
    margin-top: 6px;
    max-width: 62ch;
    color: #5c6572;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ── La escena ────────────────────────────────────────────────────────────── */

.atj-escena[b-qcvnnesgnu] {
    position: relative;
    height: 288px;
    margin: 0 20px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fbfcfe;
    overflow: hidden;
    user-select: none;
}

[b-qcvnnesgnu] .atj-cal {
    position: absolute;
    inset: 0;
    display: flex;
    transition: padding-right .42s cubic-bezier(.3, .8, .3, 1);
}

    [b-qcvnnesgnu] .atj-cal.atj-encogido {
        padding-right: 150px;
    }

[b-qcvnnesgnu] .atj-rejilla {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[b-qcvnnesgnu] .atj-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #e6eaf0;
}

    [b-qcvnnesgnu] .atj-dow span {
        padding: 5px 0;
        text-align: center;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .5px;
        color: #8b9199;
    }

[b-qcvnnesgnu] .atj-semanas {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

[b-qcvnnesgnu] .atj-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

[b-qcvnnesgnu] .atj-celda {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 4px;
    border-right: 1px solid #e6eaf0;
    border-bottom: 1px solid #e6eaf0;
    transition: background .16s;
}

    [b-qcvnnesgnu] .atj-celda:nth-child(7n) {
        border-right: none;
    }

    /* Lo que el cursor está a punto de pulsar. Sin esta marca, el clic parece caer en el vacío. */
    [b-qcvnnesgnu] .atj-celda.atj-encima {
        background: #f4f7fd;
    }

    [b-qcvnnesgnu] .atj-celda.atj-marcada {
        background: #e8f0ff;
    }

    [b-qcvnnesgnu] .atj-celda.atj-destino {
        background: #eaf7ef;
    }

[b-qcvnnesgnu] .atj-num {
    font-size: 9px;
    font-weight: 700;
    color: #8b9199;
}

[b-qcvnnesgnu] .atj-hoy .atj-num {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2f6fed;
    color: #fff;
}

[b-qcvnnesgnu] .atj-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    background: #eef3ff;
    color: #26457f;
    transition: transform .16s, box-shadow .16s, opacity .16s;
}

    [b-qcvnnesgnu] .atj-pill i {
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #2f6fed;
    }

    [b-qcvnnesgnu] .atj-pill.v {
        background: #eaf7ef;
        color: #1f6c45;
    }

        [b-qcvnnesgnu] .atj-pill.v i {
            background: #2fa564;
        }

    [b-qcvnnesgnu] .atj-pill.n {
        background: #fdf3e3;
        color: #8a5a10;
    }

        [b-qcvnnesgnu] .atj-pill.n i {
            background: #e08b1f;
        }

    [b-qcvnnesgnu] .atj-pill.m {
        background: #f3eefe;
        color: #4d3690;
    }

        [b-qcvnnesgnu] .atj-pill.m i {
            background: #7c5cd6;
        }

    [b-qcvnnesgnu] .atj-pill.atj-encima {
        box-shadow: 0 0 0 2px rgba(47, 111, 237, .28);
    }

    [b-qcvnnesgnu] .atj-pill.atj-cogida {
        transform: scale(1.06) rotate(-1.5deg);
        box-shadow: 0 6px 14px rgba(20, 28, 45, .22);
    }

    [b-qcvnnesgnu] .atj-pill.atj-guardada {
        animation: atj-destello-b-qcvnnesgnu .9s ease;
    }

@keyframes atj-destello-b-qcvnnesgnu {
    0%, 100% {
        box-shadow: none;
    }

    35% {
        box-shadow: 0 0 0 3px rgba(47, 165, 100, .38);
    }
}

[b-qcvnnesgnu] .atj-mas {
    margin-top: auto;
    font-size: 9px;
    font-weight: 800;
    color: #8b9199;
    border-radius: 3px;
    transition: color .16s, background .16s;
}

    [b-qcvnnesgnu] .atj-mas.atj-encima {
        background: #eef3ff;
        color: #2f6fed;
    }

    [b-qcvnnesgnu] .atj-mas.atj-on {
        color: #2f6fed;
    }

/* La copia que viaja mientras se arrastra: la original se queda apagada en su sitio, igual que al
   arrastrar de verdad. Sin ella parecería que la actividad se duplica. */
[b-qcvnnesgnu] .atj-volante {
    position: absolute;
    z-index: 6;
    opacity: 0;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    background: #fdf3e3;
    color: #8a5a10;
    box-shadow: 0 8px 18px rgba(20, 28, 45, .25);
    transform: rotate(-2deg);
    pointer-events: none;
}

/* ── Lo que aparece al pulsar ─────────────────────────────────────────────── */

[b-qcvnnesgnu] .atj-capa {
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

    [b-qcvnnesgnu] .atj-capa.atj-on {
        opacity: 1;
        transform: none;
    }

[b-qcvnnesgnu] .atj-form {
    left: 50%;
    top: 50%;
    width: 208px;
    margin: -62px 0 0 -104px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(20, 28, 45, .2);
}

[b-qcvnnesgnu] .atj-form-tit {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
}

[b-qcvnnesgnu] .atj-campo {
    height: 16px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: #f1f4f9;
}

    [b-qcvnnesgnu] .atj-campo.atj-corto {
        width: 60%;
    }

    [b-qcvnnesgnu] .atj-campo.atj-fecha {
        height: auto;
        padding: 2px 5px;
        background: #e8f0ff;
        color: #26457f;
        font-size: 9px;
        font-weight: 700;
    }

[b-qcvnnesgnu] .atj-boton {
    display: inline-block;
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #2f6fed;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

[b-qcvnnesgnu] .atj-ficha {
    width: 166px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(20, 28, 45, .2);
    font-size: 9px;
}

[b-qcvnnesgnu] .atj-ficha-tit {
    font-size: 10px;
    font-weight: 800;
}

[b-qcvnnesgnu] .atj-ficha-sub {
    margin-top: 2px;
    color: #8b9199;
}

[b-qcvnnesgnu] .atj-ficha-pies {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

    [b-qcvnnesgnu] .atj-ficha-pies span {
        padding: 2px 5px;
        border: 1px solid #e6eaf0;
        border-radius: 5px;
        font-weight: 700;
        color: #3d4855;
        transition: background .16s, border-color .16s, color .16s;
    }

        [b-qcvnnesgnu] .atj-ficha-pies span.atj-encima {
            background: #eef3ff;
            border-color: #cddcff;
            color: #26457f;
        }

[b-qcvnnesgnu] .atj-cajon,
[b-qcvnnesgnu] .atj-venc {
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    padding: 10px;
    background: #fff;
    border-left: 1px solid #e6eaf0;
    box-shadow: -14px 0 30px rgba(20, 28, 45, .09);
}

[b-qcvnnesgnu] .atj-cajon {
    width: 160px;
    transform: translateX(14px);
}

    [b-qcvnnesgnu] .atj-cajon.atj-on {
        transform: none;
    }

[b-qcvnnesgnu] .atj-venc {
    transform: translateX(150px);
    opacity: 1;
}

    [b-qcvnnesgnu] .atj-venc.atj-on {
        transform: none;
    }

[b-qcvnnesgnu] .atj-panel-tit {
    font-size: 11px;
    font-weight: 800;
}

[b-qcvnnesgnu] .atj-panel-sub {
    margin-bottom: 8px;
    font-size: 9px;
    color: #8b9199;
}

    [b-qcvnnesgnu] .atj-panel-sub.atj-rojo {
        color: #c0392b;
        font-weight: 700;
    }

[b-qcvnnesgnu] .atj-herr {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}

    [b-qcvnnesgnu] .atj-herr span {
        padding: 2px 5px;
        border: 1px solid #e6eaf0;
        border-radius: 5px;
        font-size: 8px;
        font-weight: 700;
        color: #5c6572;
        transition: background .16s, border-color .16s, color .16s;
    }

        [b-qcvnnesgnu] .atj-herr span.atj-on {
            background: #e8f0ff;
            border-color: #cddcff;
            color: #26457f;
        }

        [b-qcvnnesgnu] .atj-herr span.atj-encima {
            border-color: #cddcff;
            color: #26457f;
        }

[b-qcvnnesgnu] .atj-fila {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border-bottom: 1px dashed #eef1f6;
    font-size: 9px;
}

    [b-qcvnnesgnu] .atj-fila i {
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #2f6fed;
    }

        [b-qcvnnesgnu] .atj-fila i.v {
            background: #2fa564;
        }

        [b-qcvnnesgnu] .atj-fila i.n {
            background: #e08b1f;
        }

        [b-qcvnnesgnu] .atj-fila i.m {
            background: #7c5cd6;
        }

    [b-qcvnnesgnu] .atj-fila b {
        padding: 1px 4px;
        border-radius: 4px;
        background: #fdecea;
        color: #c0392b;
        font-size: 8px;
    }

[b-qcvnnesgnu] .atj-lista {
    width: 152px;
    padding: 7px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(20, 28, 45, .22);
}

[b-qcvnnesgnu] .atj-lista-tit {
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #8b9199;
}

[b-qcvnnesgnu] .atj-lista .atj-pill {
    margin-bottom: 3px;
}

[b-qcvnnesgnu] .atj-btn-venc {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 4;
    margin-top: -26px;
    padding: 8px 4px;
    writing-mode: vertical-rl;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 9px;
    font-weight: 800;
    color: #5c6572;
    transition: background .16s, color .16s, border-color .16s;
}

    [b-qcvnnesgnu] .atj-btn-venc.atj-encima {
        background: #f4f7fd;
        color: #2f6fed;
    }

    [b-qcvnnesgnu] .atj-btn-venc.atj-on {
        background: #e8f0ff;
        border-color: #cddcff;
        color: #2f6fed;
    }

/* ── El cursor ────────────────────────────────────────────────────────────── */

/* UNA transformación por elemento, y esta es la regla que hay que respetar aquí.

   El puntero VIAJA (`transform: translate`) y el cursor de dentro se HUNDE al pulsar
   (`transform: scale`). Estuvieron en el mismo elemento, con la escala puesta en la propiedad `scale`
   suelta, y eso producía un tirón visible en CADA clic: en CSS las propiedades individuales
   (`translate`, `rotate`, `scale`) se componen ANTES que la propiedad `transform`, así que la matriz
   queda «escala · traslación» y la escala multiplica también el desplazamiento. Con `scale: .84` el
   cursor se dibujaba al 84 % de su distancia al origen: un salto hacia la esquina de arriba a la
   izquierda, proporcional a lo lejos que estuviera, y vuelta al quitarse la clase.

   Separados no hay composición que valga: cada elemento tiene su transformación y su duración. */
[b-qcvnnesgnu] .atj-puntero {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    pointer-events: none;
    transition: transform .62s cubic-bezier(.4, .1, .2, 1), opacity .18s ease;
    will-change: transform;
}

    /* Escondido mientras vuelve al punto de partida: el salto no puede verse, se lee como un fallo. */
    [b-qcvnnesgnu] .atj-puntero.atj-oculto {
        opacity: 0;
    }

[b-qcvnnesgnu] .atj-cursor {
    display: block;
    width: 18px;
    height: 18px;
    transform-origin: 21% 8%; /* la punta de la flecha: al hundirse no se despega del sitio */
    transition: transform .12s ease;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .34));
}

    [b-qcvnnesgnu] .atj-cursor.atj-pulsa {
        transform: scale(.84);
    }

[b-qcvnnesgnu] .atj-onda {
    position: absolute;
    z-index: 19;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #2f6fed;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

    [b-qcvnnesgnu] .atj-onda.atj-onda-va {
        animation: atj-onda-b-qcvnnesgnu .5s ease-out;
    }

@keyframes atj-onda-b-qcvnnesgnu {
    from {
        opacity: .9;
        transform: scale(.4);
    }

    to {
        opacity: 0;
        transform: scale(2.6);
    }
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.atj-pie[b-qcvnnesgnu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 18px;
}

.atj-puntos[b-qcvnnesgnu] {
    display: flex;
    gap: 5px;
    margin-right: auto;
}

.atj-punto[b-qcvnnesgnu] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8dee8;
    transition: background .18s, transform .18s;
}

    .atj-punto.atj-visto[b-qcvnnesgnu] {
        background: #a9c3f7;
    }

    .atj-punto.atj-ahora[b-qcvnnesgnu] {
        background: #2f6fed;
        transform: scale(1.25);
    }

.atj-sec[b-qcvnnesgnu] {
    padding: 7px 14px;
    border: 1px solid #e6eaf0;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #5c6572;
    cursor: pointer;
}

    .atj-sec:disabled[b-qcvnnesgnu] {
        opacity: .4;
        cursor: default;
    }

    .atj-sec:not(:disabled):hover[b-qcvnnesgnu] {
        background: #f7f9fc;
    }

.atj-pri[b-qcvnnesgnu] {
    padding: 7px 18px;
    border: none;
    border-radius: 9px;
    background: #2f6fed;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .atj-pri:hover[b-qcvnnesgnu] {
        background: #2a63d4;
    }

.atj-cerrar:focus-visible[b-qcvnnesgnu],
.atj-sec:focus-visible[b-qcvnnesgnu],
.atj-pri:focus-visible[b-qcvnnesgnu] {
    outline: 2px solid #2f6fed;
    outline-offset: 2px;
}

/* Quien pide menos movimiento ve los estados finales, no el viaje. El JS también lo mira: acorta los
   tiempos en vez de animar. */
@media (prefers-reduced-motion: reduce) {
    .atj-fondo[b-qcvnnesgnu],
    .atj-tarjeta[b-qcvnnesgnu] {
        animation: none;
    }

    [b-qcvnnesgnu] .atj-puntero,
    [b-qcvnnesgnu] .atj-cursor,
    [b-qcvnnesgnu] .atj-cal,
    [b-qcvnnesgnu] .atj-capa,
    [b-qcvnnesgnu] .atj-volante {
        transition-duration: .001ms;
    }

    [b-qcvnnesgnu] .atj-onda.atj-onda-va,
    [b-qcvnnesgnu] .atj-pill.atj-guardada {
        animation-duration: .001ms;
    }
}
/* _content/ErpPowergest/Presentation/Crm/Components/AvisoDatosEjemplo.razor.rz.scp.css */
/* Franja de aviso. Discreta a propósito: informa, no alarma — no ha pasado nada malo. */

.ej-aviso[b-0mpbllt8ed] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin-bottom: 14px;
    border: 1px solid #cdeee8;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0fdfa, #eff6ff);
    color: #334155;
    font-size: 13px;
}

.ej-aviso-ico[b-0mpbllt8ed] {
    font-size: 19px;
    color: #0f766e;
}

.ej-aviso-texto[b-0mpbllt8ed] {
    flex: 1;
    min-width: 0;
}

.ej-aviso-quitar[b-0mpbllt8ed] {
    background: #fff;
    border: 1px solid #a7dbd2;
    color: #0f766e;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .ej-aviso-quitar:hover:not(:disabled)[b-0mpbllt8ed] {
        background: #e6f4f1;
    }

    .ej-aviso-quitar:disabled[b-0mpbllt8ed] {
        opacity: .6;
        cursor: default;
    }

.ej-aviso-cerrar[b-0mpbllt8ed] {
    background: none;
    border: none;
    color: #8493a8;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

    .ej-aviso-cerrar:hover[b-0mpbllt8ed] {
        color: #0f172a;
    }
/* _content/ErpPowergest/Presentation/Crm/Components/Detalle/AvisoEmergente.razor.rz.scp.css */
/* El aviso emergente de un recordatorio: abajo a la izquierda. A la derecha están el panel de detalle (que «Abrir»
   despliega), los avisos breves y el dock; ahí los taparía. */
.ae-aviso[b-0f9x2ipq2k] {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9980;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 14px 12px;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(23, 43, 77, .18), 0 2px 6px rgba(23, 43, 77, .08);
    animation: ae-entra-b-0f9x2ipq2k .22s ease-out;
}

@keyframes ae-entra-b-0f9x2ipq2k {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.ae-cabecera[b-0f9x2ipq2k] { display: flex; gap: 10px; align-items: flex-start; }

.ae-icono[b-0f9x2ipq2k] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff4e0;
    color: #c77700;
    font-size: 20px;
}

.ae-textos[b-0f9x2ipq2k] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ae-titulo[b-0f9x2ipq2k] { color: #1d2b3a; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.ae-mensaje[b-0f9x2ipq2k] { color: #5b6b7c; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }

.ae-cerrar[b-0f9x2ipq2k] {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7a8896;
    cursor: pointer;
}
.ae-cerrar:hover[b-0f9x2ipq2k] { background: #f1f4f8; color: #1d2b3a; }
.ae-cerrar .material-symbols-rounded[b-0f9x2ipq2k] { font-size: 18px; }

.ae-error[b-0f9x2ipq2k] {
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fdecec;
    color: #a12b2b;
    font-size: .8rem;
}

.ae-acciones[b-0f9x2ipq2k] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.ae-btn[b-0f9x2ipq2k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #d5dde6;
    border-radius: 9px;
    background: #fff;
    color: #2c3e50;
    font-size: .8rem;
    cursor: pointer;
}
.ae-btn:hover:not(:disabled)[b-0f9x2ipq2k] { background: #f4f7fa; }
.ae-btn:disabled[b-0f9x2ipq2k] { opacity: .6; cursor: default; }
.ae-btn .material-symbols-rounded[b-0f9x2ipq2k] { font-size: 17px; }

.ae-btn-principal[b-0f9x2ipq2k] { border-color: #2f6fd1; background: #2f6fd1; color: #fff; }
.ae-btn-principal:hover:not(:disabled)[b-0f9x2ipq2k] { background: #275fb5; }

.ae-espera[b-0f9x2ipq2k] { margin-top: 8px; color: #7a8896; font-size: .75rem; }
/* _content/ErpPowergest/Presentation/Crm/Components/Detalle/PanelDetalle.razor.rz.scp.css */
/* Panel de detalle: lateral derecho, a toda la altura y sin velo. En una pantalla ancha el contenido se estrecha para
   dejarle sitio (css/panel-detalle.css, global); en una más estrecha va encima con sombra; en el móvil, a pantalla
   completa. El ancho es el mismo número en los dos sitios: --ancho-panel-detalle. */
.pd[b-v1iuy7wrg9] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ancho-panel-detalle, 440px);
    max-width: 100vw;
    z-index: 900;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.10);
    animation: pd-entra-b-v1iuy7wrg9 0.18s ease-out;
}

@keyframes pd-entra-b-v1iuy7wrg9 {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@media (max-width: 700px) {
    .pd[b-v1iuy7wrg9] {
        width: 100vw;
        border-left: none;
    }
}

[b-v1iuy7wrg9] .pd-bloque {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ── Cabecera ── */
.pd-cabecera[b-v1iuy7wrg9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f1f5f9;
    border-top: 4px solid #94a3b8;
    flex-shrink: 0;
}

.pd-icono[b-v1iuy7wrg9] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
}

.pd-clase-llamada[b-v1iuy7wrg9] { border-top-color: #2563eb; }
.pd-clase-llamada .pd-icono[b-v1iuy7wrg9] { background: #eff6ff; color: #2563eb; }
.pd-clase-reunion[b-v1iuy7wrg9] { border-top-color: #7c3aed; }
.pd-clase-reunion .pd-icono[b-v1iuy7wrg9] { background: #f5f3ff; color: #7c3aed; }
.pd-clase-email[b-v1iuy7wrg9] { border-top-color: #0891b2; }
.pd-clase-email .pd-icono[b-v1iuy7wrg9] { background: #ecfeff; color: #0891b2; }
.pd-clase-recordatorio[b-v1iuy7wrg9] { border-top-color: #ea580c; }
.pd-clase-recordatorio .pd-icono[b-v1iuy7wrg9] { background: #fff7ed; color: #ea580c; }
.pd-clase-oportunidad[b-v1iuy7wrg9] { border-top-color: #4f46e5; }
.pd-clase-oportunidad .pd-icono[b-v1iuy7wrg9] { background: #eef2ff; color: #4f46e5; }
.pd-clase-gestion[b-v1iuy7wrg9] { border-top-color: #0f766e; }
.pd-clase-gestion .pd-icono[b-v1iuy7wrg9] { background: #f0fdfa; color: #0f766e; }

.pd-titulos[b-v1iuy7wrg9] {
    flex: 1;
    min-width: 0;
}

.pd-tipo[b-v1iuy7wrg9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

.pd-etiqueta[b-v1iuy7wrg9] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.pd-titulo[b-v1iuy7wrg9] {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}

.pd-cerrar[b-v1iuy7wrg9] {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
}

    .pd-cerrar:hover[b-v1iuy7wrg9] {
        background: #f1f5f9;
        color: #334155;
    }

/* ── Cuerpo: lo único que hace scroll ── */
.pd-cuerpo[b-v1iuy7wrg9] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-cargando[b-v1iuy7wrg9],
.pd-vacio[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 12px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

    .pd-vacio .material-symbols-rounded[b-v1iuy7wrg9] {
        font-size: 30px;
        opacity: 0.7;
    }

.pd-girando[b-v1iuy7wrg9] {
    font-size: 28px;
    animation: pd-gira-b-v1iuy7wrg9 1s linear infinite;
}

@keyframes pd-gira-b-v1iuy7wrg9 {
    to { transform: rotate(360deg); }
}

.pd-meta[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12.5px;
    color: #475569;
}

.pd-meta-item[b-v1iuy7wrg9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .pd-meta-item .material-symbols-rounded[b-v1iuy7wrg9] {
        font-size: 16px;
        color: #94a3b8;
    }

.pd-estado[b-v1iuy7wrg9] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

    .pd-estado.pendiente[b-v1iuy7wrg9] { background: #fef3c7; color: #b45309; }
    .pd-estado.vencida[b-v1iuy7wrg9] { background: #fee2e2; color: #b91c1c; }
    .pd-estado.hecha[b-v1iuy7wrg9] { background: #dcfce7; color: #15803d; }

.pd-avatar[b-v1iuy7wrg9] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    background-size: cover;
    background-position: center;
}

/* ── Contacto: llamarle o escribirle sin abrir su ficha ── */
.pd-contacto[b-v1iuy7wrg9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.pd-contacto-ico[b-v1iuy7wrg9] {
    color: #64748b;
    font-size: 20px;
}

.pd-contacto-datos[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pd-contacto-nombre[b-v1iuy7wrg9] {
    font-weight: 700;
    color: #0f172a;
    font-size: 13.5px;
}

.pd-contacto-vias[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.pd-via[b-v1iuy7wrg9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
}

    .pd-via:hover[b-v1iuy7wrg9] { text-decoration: underline; }

    .pd-via .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 15px; }

.pd-aviso[b-v1iuy7wrg9],
.pd-error[b-v1iuy7wrg9] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
}

.pd-aviso[b-v1iuy7wrg9] {
    background: #f1f5f9;
    color: #475569;
}

    .pd-aviso .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 16px; }

.pd-error[b-v1iuy7wrg9] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ── Acciones ── */
.pd-acciones[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-accion[b-v1iuy7wrg9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .pd-accion:hover:not(:disabled)[b-v1iuy7wrg9] { background: #f8fafc; border-color: #cbd5e1; }
    .pd-accion:disabled[b-v1iuy7wrg9] { opacity: 0.55; cursor: default; }
    .pd-accion .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 17px; }

    .pd-accion.principal[b-v1iuy7wrg9] {
        background: #16a34a;
        border-color: #16a34a;
        color: #ffffff;
    }

        .pd-accion.principal:hover:not(:disabled)[b-v1iuy7wrg9] { background: #15803d; border-color: #15803d; }

    .pd-accion.activa[b-v1iuy7wrg9] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .pd-accion.peligro[b-v1iuy7wrg9] { color: #b91c1c; }
    .pd-accion.peligro:hover:not(:disabled)[b-v1iuy7wrg9] { background: #fef2f2; border-color: #fecaca; }

.pd-posponer[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.pd-chip[b-v1iuy7wrg9] {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .pd-chip:hover:not(:disabled)[b-v1iuy7wrg9] { border-color: #2563eb; color: #1d4ed8; }
    .pd-chip:disabled[b-v1iuy7wrg9] { opacity: 0.5; cursor: default; }

[b-v1iuy7wrg9] .pd-otro-dia {
    flex: 1 1 140px;
}

.pd-confirmar[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.pd-confirmar-texto[b-v1iuy7wrg9] {
    flex: 1 1 100%;
    font-size: 12.5px;
    color: #92400e;
}

.pd-confirmar-btn[b-v1iuy7wrg9] {
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #334155;
}

    .pd-confirmar-btn.peligro[b-v1iuy7wrg9] { color: #ffffff; background: #dc2626; border-color: #dc2626; }

.pd-descripcion[b-v1iuy7wrg9] {
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 9px 11px;
    white-space: pre-wrap;
    word-break: break-word;
}

    .pd-descripcion.rica[b-v1iuy7wrg9] { white-space: normal; }

    [b-v1iuy7wrg9] .pd-descripcion.rica img { max-width: 100%; height: auto; }

.pd-salidas[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

    .pd-salidas:empty[b-v1iuy7wrg9] { display: none; }

.pd-salida[b-v1iuy7wrg9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

    .pd-salida:hover[b-v1iuy7wrg9] { text-decoration: underline; }
    .pd-salida .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 16px; }

/* ── Edición ── */
.pd-edicion[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.pd-fila[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .pd-fila[b-v1iuy7wrg9] >  .pd-campo { flex: 1 1 160px; }

[b-v1iuy7wrg9] .pd-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    min-width: 0;
}

[b-v1iuy7wrg9] .pd-campo-casilla {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

[b-v1iuy7wrg9] .pd-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #0f172a;
    background: #ffffff;
    font-family: inherit;
}

    [b-v1iuy7wrg9] .pd-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

[b-v1iuy7wrg9] textarea.pd-input {
    resize: vertical;
}

.pd-edicion-botones[b-v1iuy7wrg9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pd-enlace[b-v1iuy7wrg9] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
}

/* ── Secciones: lista de comprobación, adjuntos, apuntes ── */
.pd-seccion[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.pd-seccion-titulo[b-v1iuy7wrg9] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

.pd-cuenta[b-v1iuy7wrg9] {
    margin-left: 6px;
    font-weight: 600;
    color: #64748b;
}

.pd-comprobacion[b-v1iuy7wrg9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .pd-comprobacion li[b-v1iuy7wrg9] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #334155;
    }

        .pd-comprobacion li .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 18px; color: #94a3b8; }
        .pd-comprobacion li.hecho[b-v1iuy7wrg9] { color: #94a3b8; text-decoration: line-through; }
        .pd-comprobacion li.hecho .material-symbols-rounded[b-v1iuy7wrg9] { color: #16a34a; }

/* El hilo crece con el panel; cuando hay muchos apuntes, hace scroll el cuerpo entero. */
.pd-hilo[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 4px;
}

.pd-hilo-vacio[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 18px 10px;
}

    .pd-hilo-vacio .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 26px; opacity: 0.6; }

.pd-apunte[b-v1iuy7wrg9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[b-v1iuy7wrg9] .pd-apunte-edicion {
    flex: 1;
}

.pd-apunte-cuerpo[b-v1iuy7wrg9] {
    flex: 1;
    min-width: 0;
}

.pd-apunte-meta[b-v1iuy7wrg9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.pd-apunte-autor[b-v1iuy7wrg9] {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
}

.pd-apunte-hora[b-v1iuy7wrg9] {
    font-size: 11px;
    color: #94a3b8;
}

.pd-apunte-texto[b-v1iuy7wrg9] {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

    .pd-apunte-texto.rica[b-v1iuy7wrg9] { white-space: normal; }

/* El rastro de lo que se adjuntó con un apunte: una línea, los archivos están en la lista de arriba. */
.pd-apunte-archivos[b-v1iuy7wrg9] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

    .pd-apunte-archivos .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 15px; }

.pd-nuevo-archivos[b-v1iuy7wrg9] {
    margin-top: 6px;
}

    [b-v1iuy7wrg9] .pd-apunte-texto.rica p { margin: 0; }

.pd-apunte-btn[b-v1iuy7wrg9] {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

    .pd-apunte-btn .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 17px; }
    .pd-apunte:hover .pd-apunte-btn[b-v1iuy7wrg9],
    .pd-apunte-btn:focus-visible[b-v1iuy7wrg9] { opacity: 1; }
    .pd-apunte-btn:hover[b-v1iuy7wrg9] { color: #16a34a; }
    .pd-apunte-btn.peligro:hover[b-v1iuy7wrg9] { color: #ef4444; }

.pd-apunte-ennotas[b-v1iuy7wrg9] {
    display: inline-flex;
    color: #16a34a;
    flex-shrink: 0;
}

    .pd-apunte-ennotas .material-symbols-rounded[b-v1iuy7wrg9] { font-size: 17px; }

.pd-pasar[b-v1iuy7wrg9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 32px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.pd-nuevo[b-v1iuy7wrg9] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

[b-v1iuy7wrg9] .pd-nuevo-campo {
    flex: 1;
}
/* _content/ErpPowergest/Presentation/Crm/Components/DrillCrm.razor.rz.scp.css */
/* Cuadro de detalle. Trae también la tabla porque se abre sobre pantallas distintas y no puede
   depender del CSS de ninguna de ellas. */

.drill-overlay[b-7qsu4t2yp7]{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center;
    justify-content:center; z-index:1000; padding:20px; }
.drill-modal[b-7qsu4t2yp7]{ background:#fff; border-radius:14px; width:min(760px,100%); max-height:82vh; display:flex;
    flex-direction:column; padding:18px 20px;
    border:1px solid #edf0f4; box-shadow:0 24px 64px -12px rgba(16,24,40,.32); }
.drill-head[b-7qsu4t2yp7]{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.drill-titulo[b-7qsu4t2yp7]{ font-size:16px; font-weight:750; margin:0; color:#0f172a; }
.drill-close[b-7qsu4t2yp7]{ background:none; border:none; font-size:16px; color:#8493a8; cursor:pointer; line-height:1; padding:4px; }
.drill-close:hover[b-7qsu4t2yp7]{ color:#0f172a; }
.drill-scroll[b-7qsu4t2yp7]{ overflow:auto; }

.rc-tabla[b-7qsu4t2yp7]{ width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.rc-tabla th[b-7qsu4t2yp7], .rc-tabla td[b-7qsu4t2yp7]{ padding:9px 8px; text-align:right; border-bottom:1px solid #eef2f7; white-space:nowrap; }
.rc-tabla th.rc-izq[b-7qsu4t2yp7], .rc-tabla td.rc-izq[b-7qsu4t2yp7]{ text-align:left; }
.rc-tabla thead th[b-7qsu4t2yp7]{ color:#8493a8; font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.04em;
    background:#fafbfc; border-bottom:1px solid #edf0f4; padding-top:10px; padding-bottom:10px; }
.rc-tabla tbody tr[b-7qsu4t2yp7]{ transition:background .12s ease; }
.rc-tabla tbody tr:hover[b-7qsu4t2yp7]{ background:#f8fafc; }
.rc-tabla tbody tr:last-child td[b-7qsu4t2yp7]{ border-bottom:none; }
.rc-tabla tbody td[b-7qsu4t2yp7]{ border-bottom-color:#f2f4f7; }
.rc-tabla td.rc-izq[b-7qsu4t2yp7]{ font-weight:600; color:#0f172a; }

.drill-fila-link[b-7qsu4t2yp7]{ cursor:pointer; }
.drill-fila-link:hover td[b-7qsu4t2yp7]{ background:#f0fdfa; }

.rc-vacio[b-7qsu4t2yp7]{ color:#8493a8; font-size:13px; padding:8px 2px; }
.panel-card-nota[b-7qsu4t2yp7]{ color:#8493a8; font-size:11.5px; margin-top:12px; }
/* _content/ErpPowergest/Presentation/Crm/Components/Ficha/SeccionOferta.razor.rz.scp.css */
/* IC11 — panel «Propuesta comercial». Mismo lenguaje visual que el panel NBA de la ficha, pero con
   CSS PROPIO del componente: se usa también dentro de ModalTarjeta, donde los estilos ::deep de
   ContactoFicha no llegan. */

.oferta-panel[b-5ndoagec3u] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #8b5cf6;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

/* Cabecera fija (ya no es un botón de plegado): sin cursor de clic ni chevron. */
.oferta-head[b-5ndoagec3u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    text-align: left;
}

.oferta-icono[b-5ndoagec3u] {
    font-size: 18px;
    color: #8b5cf6;
    background: #f5f3ff;
    border-radius: 6px;
    padding: 3px;
}

.oferta-titulo[b-5ndoagec3u] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.oferta-cuerpo[b-5ndoagec3u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px 12px;
}

.oferta-ayuda[b-5ndoagec3u] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.oferta-aviso[b-5ndoagec3u] {
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 7px;
    padding: 6px 10px;
}

.entry-error[b-5ndoagec3u] {
    font-size: 12px;
    color: #dc2626;
}

.oferta-generar[b-5ndoagec3u] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.oferta-instruccion[b-5ndoagec3u] {
    flex: 1;
    font-size: 12px;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 6px 10px;
}

.oferta-instruccion:focus[b-5ndoagec3u] {
    outline: none;
    border-color: #8b5cf6;
}

.oferta-btn-generar[b-5ndoagec3u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #8b5cf6;
    border: none;
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.oferta-btn-generar:hover:not(:disabled)[b-5ndoagec3u] {
    background: #7c3aed;
}

.oferta-btn-generar:disabled[b-5ndoagec3u] {
    opacity: .5;
    cursor: default;
}

.oferta-propuesta[b-5ndoagec3u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fbfaff;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 10px 12px;
}

.oferta-prop-titulo[b-5ndoagec3u] {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.oferta-prop-texto[b-5ndoagec3u] {
    font-size: 12px;
    color: #475569;
    margin: 0;
    white-space: pre-line;
}

.oferta-tabla[b-5ndoagec3u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #334155;
}

.oferta-tabla th[b-5ndoagec3u],
.oferta-tabla td[b-5ndoagec3u] {
    border: 1px solid #ede9fe;
    padding: 4px 8px;
    text-align: left;
}

.oferta-tabla th[b-5ndoagec3u] {
    background: #f5f3ff;
    font-weight: 600;
}

.oferta-tabla .num[b-5ndoagec3u] {
    text-align: right;
    white-space: nowrap;
}

.oferta-salidas[b-5ndoagec3u] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.oferta-btn-salida[b-5ndoagec3u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
}

.oferta-btn-salida:hover:not(:disabled)[b-5ndoagec3u] {
    background: #ede9fe;
}

.oferta-btn-salida:disabled[b-5ndoagec3u] {
    opacity: .5;
    cursor: default;
}

/* FUN-543 — por qué está apagada una salida. Va DEBAJO de los botones y en tono de ayuda, no de
   error: no es que algo haya fallado, es que falta un paso previo. Se distingue del aviso de arriba
   (.oferta-aviso, recuadro punteado) a propósito: aquello interrumpe, esto acompaña. */
.oferta-requisitos[b-5ndoagec3u] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: -2px;
    padding-left: 2px;
}

.oferta-requisito[b-5ndoagec3u] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: #64748b;
}

    /* El icono en el violeta del panel, pero apagado: guía la vista sin competir con los botones. */
    .oferta-requisito .material-symbols-rounded[b-5ndoagec3u] {
        font-size: 14px;
        line-height: 1.35;
        color: #a78bfa;
        flex: 0 0 auto;
    }

    /* Lo accionable —«Correo», «cliente»— en el color del texto, algo más marcado: dice DÓNDE ir. */
    .oferta-requisito strong[b-5ndoagec3u] {
        font-weight: 600;
        color: #475569;
    }
/* _content/ErpPowergest/Presentation/Crm/Components/Ficha/SeccionPersonas.razor.rz.scp.css */
/* Botón "Añadir" en la cabecera del panel */
.persona-add-btn[b-u5a0a7oo99] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4338ca;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .persona-add-btn:hover[b-u5a0a7oo99] {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .persona-add-btn .material-symbols-rounded[b-u5a0a7oo99] {
        font-size: 18px;
    }

/* Lista de personas */
.personas-lista[b-u5a0a7oo99] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.persona-fila[b-u5a0a7oo99] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #eef2f7;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .persona-fila:hover[b-u5a0a7oo99] {
        background: #f8fafc;
        border-color: #e2e8f0;
    }

.persona-avatar[b-u5a0a7oo99] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.persona-info[b-u5a0a7oo99] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.persona-nombre[b-u5a0a7oo99] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.persona-sub[b-u5a0a7oo99] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.persona-ir[b-u5a0a7oo99] {
    font-size: 18px;
    color: #cbd5e1;
    flex-shrink: 0;
}

/* Formulario del modal de alta */
.persona-modal[b-u5a0a7oo99] {
    min-width: 460px;
    max-width: 520px;
}

.persona-form[b-u5a0a7oo99] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 4px;
}

.persona-campo[b-u5a0a7oo99] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.persona-form-row[b-u5a0a7oo99] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.persona-lbl[b-u5a0a7oo99] {
    display: block;
    margin: 8px 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}

/* Mismo lenguaje que los desplegables del calendario (CrmDropdown): alto 38, radio 8, marco
   #e2e8f0 y anillo azul al enfocar. Así el buscador de «Asociar persona» no desentona con el
   resto de controles del CRM. */
.persona-input[b-u5a0a7oo99] {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .persona-input:hover[b-u5a0a7oo99] {
        border-color: #cbd5e1;
    }

    .persona-input:focus[b-u5a0a7oo99] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

.persona-input-error[b-u5a0a7oo99] {
    border-color: #dc2626;
}

/* Botón primario del modal. Color y hover: .btn-azul-crm (app.css) — antes era índigo #4f46e5 con
   su propio oscurecido, el único de esta familia que no era azul. */
.btn-primario-solido[b-u5a0a7oo99] {
    color: #ffffff;
}
/* _content/ErpPowergest/Presentation/Crm/Components/Ficha/SeccionPresupuestos.razor.rz.scp.css */
.spt[b-m9s3x1qg2g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spt-cabecera[b-m9s3x1qg2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.spt-titulo[b-m9s3x1qg2g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.spt-titulo .material-symbols-rounded[b-m9s3x1qg2g] {
    font-size: 18px;
}

.spt-vacio[b-m9s3x1qg2g] {
    font-size: 13px;
    color: var(--erp-text-2, #6b7280);
}

.spt-lista[b-m9s3x1qg2g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spt-fila[b-m9s3x1qg2g] {
    border: 1px solid var(--erp-border, #e5e7eb);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spt-datos[b-m9s3x1qg2g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}

.spt-numero[b-m9s3x1qg2g] {
    font-weight: 600;
}

.spt-fecha[b-m9s3x1qg2g] {
    color: var(--erp-text-2, #6b7280);
}

.spt-total[b-m9s3x1qg2g] {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.spt-icono[b-m9s3x1qg2g] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--erp-text-2, #6b7280);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.spt-btn[b-m9s3x1qg2g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--erp-border, #d0d5dd);
    background: var(--erp-surface, #fff);
    color: inherit;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.spt-btn--primario[b-m9s3x1qg2g] {
    border-color: var(--erp-primary, #2563eb);
    color: var(--erp-primary, #2563eb);
}

.spt-btn:disabled[b-m9s3x1qg2g] {
    opacity: .6;
    cursor: default;
}

.spt-enlazar[b-m9s3x1qg2g] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.spt-campo[b-m9s3x1qg2g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    flex: 1;
    min-width: 220px;
}

.spt-campo select[b-m9s3x1qg2g] {
    height: 30px;
}
/* _content/ErpPowergest/Presentation/Crm/Components/FiltroAmbito.razor.rz.scp.css */
.filtro-ambito[b-dvuwjtnvg3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filtro-ambito-lbl[b-dvuwjtnvg3] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
}

.ambito-chip[b-dvuwjtnvg3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .ambito-chip:hover[b-dvuwjtnvg3] {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    /* Azul del CRM (el mismo de los chips y del contacto elegido en el panel de filtros), no el
       índigo de antes: dentro del panel convivía con azules y cantaba. */
    .ambito-chip.activo[b-dvuwjtnvg3] {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .ambito-chip .material-symbols-rounded[b-dvuwjtnvg3] {
        font-size: 16px;
    }
/* _content/ErpPowergest/Presentation/Crm/Components/FiltroAmbitoBoton.razor.rz.scp.css */
.filtro-boton-wrap[b-ut69c7ct3p] {
    position: relative;
    display: inline-block;
}

/* Botón compacto, mismo lenguaje que los chips del filtro (pill, indigo al activarse). */
.filtro-boton[b-ut69c7ct3p] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .filtro-boton:hover[b-ut69c7ct3p] {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    /* Azul del CRM, igual que los chips de ámbito y el resto de filtros (antes, índigo). */
    .filtro-boton.abierto[b-ut69c7ct3p] {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .filtro-boton .material-symbols-rounded[b-ut69c7ct3p] {
        font-size: 17px;
    }

/* Etiqueta del ámbito activo: separada por una barrita, atenuada salvo cuando hay filtro puesto. */
.filtro-boton-ambito[b-ut69c7ct3p] {
    padding-left: 8px;
    margin-left: 1px;
    border-left: 1px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
}

.filtro-boton.con-filtro .filtro-boton-ambito[b-ut69c7ct3p] {
    color: #1d4ed8;
}

.filtro-boton-chevron[b-ut69c7ct3p] {
    font-size: 16px !important;
    color: #94a3b8;
}

/* Cubre la pantalla para captar el clic fuera. Invisible y por debajo del popover. */
.filtro-backdrop[b-ut69c7ct3p] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

/* Popover con el FiltroAmbito dentro. Se ancla al botón; el filtro se pinta en columna. */
.filtro-popover[b-ut69c7ct3p] {
    position: absolute;
    top: calc(100% + 6px);
    /* Anclado a la derecha: el botón vive en la zona derecha de la cabecera y así el popover no se
       sale por el borde de la ventana. */
    right: 0;
    z-index: 40;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

    /* Dentro del popover los chips van en columna: la barra a lo ancho era justo lo que sobraba. */
    .filtro-popover[b-ut69c7ct3p]  .filtro-ambito {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 180px;
    }

    .filtro-popover[b-ut69c7ct3p]  .filtro-ambito-lbl {
        margin-bottom: 2px;
    }

    .filtro-popover[b-ut69c7ct3p]  .ambito-chip {
        justify-content: flex-start;
    }
/* _content/ErpPowergest/Presentation/Crm/Components/InicioCrm.razor.rz.scp.css */
/* Inicio del cliente de solo CRM. Solo la cabecera y los filtros: los widgets traen su propio CSS. */

.inicio-crm[b-wk1ywj2o98]{ padding:8px 4px 32px; max-width:1180px; margin:0 auto; }   /* mismo margen que el resto del CRM */

.inicio-crm-head[b-wk1ywj2o98]{ margin-bottom:4px; }
.inicio-crm-title[b-wk1ywj2o98]{ font-size:23px; font-weight:750; margin:0; color:#0f172a; letter-spacing:-.02em; }
.inicio-crm-sub[b-wk1ywj2o98]{ color:#6b7684; font-size:13px; margin-top:2px; }

.inicio-crm-filtros[b-wk1ywj2o98]{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    margin:16px 0 18px; }
.periodo[b-wk1ywj2o98]{ display:flex; gap:6px; flex-wrap:wrap; }
.periodo-chip[b-wk1ywj2o98]{ background:#fff; border:1px solid #e2e8f0; color:#475569; border-radius:999px; padding:6px 13px;
    font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.periodo-chip:hover:not(.activo)[b-wk1ywj2o98]{ border-color:#cbd5e1; color:#0f172a; background:#f8fafc; }
.periodo-chip.activo[b-wk1ywj2o98]{ background:#0f766e; border-color:#0f766e; color:#fff; }

.inicio-crm-loading[b-wk1ywj2o98]{ display:flex; align-items:center; gap:8px; color:#64748b; font-size:14px; padding:40px 0;
    justify-content:center; }
.loading-spin[b-wk1ywj2o98]{ animation:girar-b-wk1ywj2o98 1s linear infinite; }
@keyframes girar-b-wk1ywj2o98{ to{ transform:rotate(360deg); } }
/* _content/ErpPowergest/Presentation/Crm/Components/PanelCrm.razor.rz.scp.css */
/* Estilos del panel del CRM. Viven aquí, con su marcado, porque el panel se usa en más de una
   pantalla: si dependiera del CSS de /crm/informes, en el inicio saldría desmontado. El orden de las
   reglas importa —hay ajustes que reescriben a los de arriba— y es el mismo que tenía la pantalla. */

.loading-spin[b-7oeaiai0kh]{ animation:girar-b-7oeaiai0kh 1s linear infinite; }
@keyframes girar-b-7oeaiai0kh{ to{ transform:rotate(360deg); } }

/* KPIs */
.kpis[b-7oeaiai0kh]{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:1200px){ .kpis[b-7oeaiai0kh]{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .kpis[b-7oeaiai0kh]{ grid-template-columns:repeat(2,1fr); } }
.kpi[b-7oeaiai0kh]{ background:#fff; border:1px solid #e6eaef; border-radius:14px; padding:16px 18px;
    box-shadow:0 1px 2px rgba(15,23,42,.05); }
.kpi.alerta[b-7oeaiai0kh]{ border-color:#fecaca; background:#fff7f7; }
.kpi-label[b-7oeaiai0kh]{ color:#475569; font-size:12.5px; font-weight:600; }
.kpi-value[b-7oeaiai0kh]{ font-size:26px; font-weight:750; letter-spacing:-.02em; margin-top:6px; line-height:1;
    color:#0f172a; font-variant-numeric:tabular-nums; }
.kpi.alerta .kpi-value[b-7oeaiai0kh]{ color:#dc2626; }
.kpi-nota[b-7oeaiai0kh]{ color:#8493a8; font-size:11.5px; margin-top:8px; }

/* Tarjeta de widget */
.panel-card[b-7oeaiai0kh]{ background:#fff; border:1px solid #e6eaef; border-radius:14px; padding:18px 20px;
    box-shadow:0 1px 2px rgba(15,23,42,.05); }
/* Flex para que el ⓘ se centre con el texto por caja, no por línea base: ver nota en «.ayuda». */
.panel-card-titulo[b-7oeaiai0kh]{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:#8493a8;
    font-weight:700; margin:0 0 16px; display:flex; align-items:center; }
.panel-card-nota[b-7oeaiai0kh]{ color:#8493a8; font-size:11.5px; margin-top:12px; }

/* Embudo */
.embudo[b-7oeaiai0kh]{ display:flex; flex-direction:column; gap:9px; }
.embudo-fila[b-7oeaiai0kh]{ display:grid; grid-template-columns:120px 1fr 56px; align-items:center; gap:12px; }
.embudo-nombre[b-7oeaiai0kh]{ font-size:12.5px; color:#475569; }
.embudo-track[b-7oeaiai0kh]{ height:28px; background:#f4f6f8; border-radius:8px; overflow:hidden; }
.embudo-fill[b-7oeaiai0kh]{ height:100%; border-radius:8px; display:flex; align-items:center; justify-content:flex-end;
    padding-right:10px; color:#fff; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
    min-width:26px; transition:width .3s ease; }
.embudo-conv[b-7oeaiai0kh]{ font-size:12px; color:#8493a8; text-align:right; font-variant-numeric:tabular-nums; }

/* Colores por estado del embudo */
.estado-nuevo[b-7oeaiai0kh]{ background:#94a3b8; }
.estado-contactado[b-7oeaiai0kh]{ background:#eab308; }
.estado-cualificado[b-7oeaiai0kh]{ background:#3b82f6; }
.estado-cliente[b-7oeaiai0kh]{ background:#14b8a6; }

.rc-vacio[b-7oeaiai0kh]{ color:#8493a8; font-size:13px; padding:8px 2px; }

/* Distribuciones (motivos de pérdida) */
.dist-fila[b-7oeaiai0kh]{ display:grid; grid-template-columns:150px 1fr 78px; align-items:center; gap:10px; margin-bottom:8px; }
.dist-label[b-7oeaiai0kh]{ font-size:12.5px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dist-track[b-7oeaiai0kh]{ height:12px; background:#f4f6f8; border-radius:999px; overflow:hidden; }
.dist-fill[b-7oeaiai0kh]{ height:100%; border-radius:999px; min-width:3px; transition:width .3s ease; }
.dist-fill.roja[b-7oeaiai0kh]{ background:#ef4444; }
.dist-val[b-7oeaiai0kh]{ font-size:12px; font-weight:700; color:#334155; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Previsión (ganado CRM) vs. facturado real (ERP) */
.pvr-chart[b-7oeaiai0kh]{ display:flex; align-items:flex-end; gap:12px; height:190px; padding:8px 2px 0; }
.pvr-mes[b-7oeaiai0kh]{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; min-width:0; }
.pvr-barras[b-7oeaiai0kh]{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.pvr-bar[b-7oeaiai0kh]{ width:22px; max-width:46%; border-radius:6px 6px 0 0; min-height:2px; transition:height .3s ease; }
.pvr-bar.crm[b-7oeaiai0kh]{ background:#14b8a6; }
.pvr-bar.erp[b-7oeaiai0kh]{ background:#d97706; }
.pvr-lbl[b-7oeaiai0kh]{ font-size:11px; color:#8493a8; text-transform:capitalize; }
.pvr-legend[b-7oeaiai0kh]{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.pvr-legend span[b-7oeaiai0kh]{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#475569; }
.pvr-dot[b-7oeaiai0kh]{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.pvr-dot.crm[b-7oeaiai0kh]{ background:#14b8a6; }
.pvr-dot.erp[b-7oeaiai0kh]{ background:#d97706; }
.pvr-aviso[b-7oeaiai0kh]{ margin-top:10px; font-size:12px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:7px 10px; }

/* KPI: delta vs. periodo anterior + sparkline */
.kpi-delta[b-7oeaiai0kh]{ font-size:11.5px; font-weight:700; margin-top:8px; display:flex; align-items:baseline; gap:6px; }
.kpi-delta.up[b-7oeaiai0kh]{ color:#16a34a; }
.kpi-delta.down[b-7oeaiai0kh]{ color:#dc2626; }
.kpi-delta.flat[b-7oeaiai0kh]{ color:#8493a8; }
.kpi-delta-ref[b-7oeaiai0kh]{ font-size:10.5px; font-weight:500; color:#94a3b8; }
.kpi-spark[b-7oeaiai0kh]{ margin-top:10px; height:28px; }
.kpi-spark .spark-svg[b-7oeaiai0kh]{ width:100%; height:28px; display:block; }

/* Resumen ejecutivo con IA */
.resumen-ia[b-7oeaiai0kh]{ background:linear-gradient(135deg,#f0fdfa,#eff6ff); border:1px solid #cdeee8; border-radius:14px;
    padding:14px 16px; margin-bottom:16px; }
.resumen-ia-head[b-7oeaiai0kh]{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.resumen-ia-ico[b-7oeaiai0kh]{ color:#0f766e; font-size:20px; }
.resumen-ia-titulo[b-7oeaiai0kh]{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#0f766e;
    display:inline-flex; align-items:center; }
.resumen-ia-btn[b-7oeaiai0kh]{ margin-left:auto; background:#0f766e; color:#fff; border:none; border-radius:999px; padding:5px 13px;
    font-size:12px; font-weight:600; cursor:pointer; }
.resumen-ia-btn.ghost[b-7oeaiai0kh]{ background:#fff; color:#0f766e; border:1px solid #a7dbd2; }
.resumen-ia-texto[b-7oeaiai0kh]{ font-size:13.5px; line-height:1.55; color:#334155; white-space:pre-wrap; }
.resumen-ia-texto.sin-generar[b-7oeaiai0kh]{ color:#8493a8; }
.resumen-ia-texto.cargando[b-7oeaiai0kh]{ color:#0f766e; display:flex; align-items:center; gap:8px; }

/* ═══════════ Pulido visual profesional (misma estética de la app) ═══════════ */
/* Tarjetas: borde y sombra más suaves y en capas */
.kpi[b-7oeaiai0kh], .panel-card[b-7oeaiai0kh]{ border:1px solid #edf0f4;
    box-shadow:0 1px 2px rgba(16,24,40,.03), 0 6px 16px -6px rgba(16,24,40,.08); }
.panel-card[b-7oeaiai0kh]{ padding:20px 22px; margin-bottom:14px; }

/* KPI cards con jerarquía + hover */
.kpi[b-7oeaiai0kh]{ padding:17px 18px 16px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.kpi:hover[b-7oeaiai0kh]{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(16,24,40,.05), 0 14px 28px -10px rgba(16,24,40,.14); }
.kpi-label[b-7oeaiai0kh]{ font-size:12px; font-weight:600; color:#667085; display:flex; align-items:center; }
.kpi-value[b-7oeaiai0kh]{ font-size:27px; font-weight:760; letter-spacing:-.025em; margin-top:9px; }
.kpi-nota[b-7oeaiai0kh]{ font-size:11px; color:#98a2b3; margin-top:9px; }
.kpi.alerta[b-7oeaiai0kh]{ border-color:#fbcfce; background:linear-gradient(180deg,#ffffff,#fff7f7); }

/* KPI clicable (contactos en riesgo) */
.kpi-click[b-7oeaiai0kh]{ cursor:pointer; }
.kpi-ver[b-7oeaiai0kh]{ font-size:16px; color:#cbd5e1; margin-left:auto; transition:transform .18s ease, color .18s ease; }
.kpi-click:hover .kpi-ver[b-7oeaiai0kh]{ color:#0f766e; transform:translateX(2px); }

/* Encabezado de sección con acento teal */
.panel-card-titulo[b-7oeaiai0kh]{ position:relative; padding-bottom:12px; margin-bottom:16px;
    border-bottom:1px solid #f1f3f6; color:#475467; }
.panel-card-titulo[b-7oeaiai0kh]::after{ content:""; position:absolute; left:0; bottom:-1px; width:32px; height:2px;
    background:#0f766e; border-radius:2px; }

.resumen-ia[b-7oeaiai0kh]{ border-color:#cdeee8; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.embudo-track[b-7oeaiai0kh], .dist-track[b-7oeaiai0kh]{ background:#f2f4f7; }

/* ═══════════ Panel = dashboard ═══════════ */
/* Rejilla de widgets del panel (2 columnas → 1 en pantallas estrechas) */
.panel-grid[b-7oeaiai0kh]{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:1000px){ .panel-grid[b-7oeaiai0kh]{ grid-template-columns:1fr; } }
.panel-grid > .panel-card[b-7oeaiai0kh]{ margin-bottom:0; }   /* altura igual por fila (stretch por defecto) */

/* Cabecera de widget: título a la izquierda + enlace "Ver informe →" a la derecha */
.panel-card-head[b-7oeaiai0kh]{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid #f1f3f6; }
.panel-card-head .panel-card-titulo[b-7oeaiai0kh]{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.panel-card-head .panel-card-titulo[b-7oeaiai0kh]::after{ bottom:-13px; }
.panel-ver-informe[b-7oeaiai0kh]{ display:inline-flex; align-items:center; gap:3px; background:none; border:none;
    color:#0f766e; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
    padding:3px 7px; border-radius:7px; transition:background .15s ease, gap .15s ease; }
.panel-ver-informe:hover[b-7oeaiai0kh]{ background:#e6f4f1; gap:6px; }
.panel-ver-informe .material-symbols-rounded[b-7oeaiai0kh]{ font-size:15px; }

/* Leaderboard "Top comerciales" (compacto) */
.lb[b-7oeaiai0kh]{ display:flex; flex-direction:column; gap:12px; }
.lb-fila[b-7oeaiai0kh]{ display:grid; grid-template-columns:24px 1fr; align-items:center; gap:11px; }
.lb-rank[b-7oeaiai0kh]{ width:24px; height:24px; border-radius:7px; background:#f1f5f9; color:#64748b;
    font-size:11.5px; font-weight:750; display:flex; align-items:center; justify-content:center; }
.lb-fila:first-child .lb-rank[b-7oeaiai0kh]{ background:#0f766e; color:#fff; }
.lb-main[b-7oeaiai0kh]{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.lb-row[b-7oeaiai0kh]{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lb-nombre[b-7oeaiai0kh]{ font-size:12.5px; color:#0f172a; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-val[b-7oeaiai0kh]{ font-size:12.5px; font-weight:700; color:#0f766e; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lb-track[b-7oeaiai0kh]{ height:6px; background:#f2f4f7; border-radius:999px; overflow:hidden; }
.lb-fill[b-7oeaiai0kh]{ height:100%; background:linear-gradient(90deg,#14b8a6,#0f766e); border-radius:999px; min-width:3px; transition:width .3s ease; }

/* En el panel el gráfico ganado-vs-real vive a media columna: algo más bajo */
.panel-grid .pvr-chart[b-7oeaiai0kh]{ height:168px; }

/* ═══════════ Ayuda contextual: iconito ⓘ con explicación en lenguaje llano ═══════════ */
.kpi-label[b-7oeaiai0kh]{ flex-wrap:wrap; }   /* deja sitio al ⓘ y al chevron sin desbordar */
/* ALINEACIÓN DEL ⓘ — por qué así y no con vertical-align:
   `vertical-align:middle` alinea el centro de la caja con la línea base MÁS media altura de la «x»
   del texto, y esa altura depende de la fuente. Con la fuente de iconos (Material Symbols), cuyo
   glifo tampoco está centrado en su caja, el resultado bailaba: el icono salía alto en los títulos
   en mayúsculas y bajo en las etiquetas de los KPI. Además cada contenedor lo resolvía distinto,
   porque `.kpi-label` YA era flex y `.panel-card-titulo` era un bloque: dos mecanismos, dos
   resultados. Ahora TODOS los contenedores del ⓘ son flex con `align-items:center`, que centra por
   caja y no depende de métricas tipográficas. El `vertical-align` se queda solo como red por si el
   ⓘ acaba en un contenedor que no sea flex. */
.ayuda[b-7oeaiai0kh]{ position:relative; display:inline-flex; align-items:center; justify-content:center;
    height:1em; margin-left:5px; color:#c2cad6; cursor:help; vertical-align:middle; line-height:1; }
.ayuda:hover[b-7oeaiai0kh], .ayuda:focus-visible[b-7oeaiai0kh]{ color:#0f766e; outline:none; }
/* La caja del ⓘ mide 1em: EXACTAMENTE la del texto que acompaña, en cualquier contenedor. Así su
   centro coincide con el del texto tanto si el padre es flex como si no, y el glifo (algo mayor,
   1.15em) sobresale por igual arriba y abajo. Tamaño en `em` para que escale con el título. */
.ayuda-ico[b-7oeaiai0kh]{ font-size:1.15em; line-height:1; display:block; }
.ayuda-tip[b-7oeaiai0kh]{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
    width:max-content; max-width:230px; background:#0f172a; color:#fff;
    font-size:11.5px; font-weight:500; line-height:1.5; text-align:left; text-transform:none; letter-spacing:normal;
    padding:9px 11px; border-radius:9px; box-shadow:0 10px 30px -8px rgba(15,23,42,.5);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:60; }
.ayuda-tip[b-7oeaiai0kh]::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#0f172a; }
.ayuda:hover .ayuda-tip[b-7oeaiai0kh], .ayuda:focus-visible .ayuda-tip[b-7oeaiai0kh]{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* _content/ErpPowergest/Presentation/Crm/Components/PreguntaPerfilCrm.razor.rz.scp.css */
/* La pregunta del primer arranque. Ocupa la pantalla porque es una decisión de una vez y muy corta; si
   se pudiera ignorar quedaría un modal a medias del que nadie se acuerda.

   El velo va más oscuro que el del resto de modales (.62 frente a .45) por lo mismo: esta no se puede
   dejar para luego, y un fondo tenue invita a seguir mirando lo de detrás en vez de responder. */
.pp-capa[b-qicz5t4tsr] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
}

/* Dos columnas: la pregunta a la izquierda y lo que va a pasar a la derecha. Ese panel es lo que separa
   esto de un formulario — se pregunta, y se ve para qué. */
.pp-marco[b-qicz5t4tsr] {
    display: grid;
    grid-template-columns: 1fr 400px;
    width: min(1060px, 100%);
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 90px -24px rgba(2, 6, 23, .55);
}

/* ── Izquierda ── */
.pp-izq[b-qicz5t4tsr] {
    display: flex;
    flex-direction: column;
    padding: 32px 36px 26px;
    overflow: auto;
}

.pp-marca[b-qicz5t4tsr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.pp-marca-logo[b-qicz5t4tsr] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pp-marca-punto[b-qicz5t4tsr] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #0f766e;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.pp-marca-paso[b-qicz5t4tsr] {
    font-size: 12.5px;
    color: #94a3b8;
}

.pp-titulo[b-qicz5t4tsr] {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: #0f172a;
}

.pp-sub[b-qicz5t4tsr] {
    margin: 9px 0 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}

.pp-preparando[b-qicz5t4tsr] {
    margin-top: 16px;
    padding: 10px 14px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    font-size: 13px;
    color: #0f766e;
}

/* Una por línea y no en rejilla de dos: son tres, y en columna se leen las descripciones de un barrido
   sin que la vista salte de lado a lado. */
.pp-opciones[b-qicz5t4tsr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.pp-opcion[b-qicz5t4tsr] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    border: 1.5px solid #e6eaef;
    border-radius: 13px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

    .pp-opcion:hover:not(:disabled)[b-qicz5t4tsr] {
        border-color: #cbd5e1;
        background: #fbfdfe;
    }

    .pp-opcion.marcada[b-qicz5t4tsr] {
        border-color: #0f766e;
        background: #f0fdfa;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
    }

    .pp-opcion:disabled[b-qicz5t4tsr] {
        opacity: .6;
        cursor: default;
    }

.pp-op-ico[b-qicz5t4tsr] {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    transition: background .15s, color .15s;
}

.pp-opcion.marcada .pp-op-ico[b-qicz5t4tsr] {
    background: #0f766e;
    color: #fff;
}

.pp-op-txt[b-qicz5t4tsr] {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-opcion-titulo[b-qicz5t4tsr] {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}

.pp-opcion-desc[b-qicz5t4tsr] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: #64748b;
}

.pp-op-check[b-qicz5t4tsr] {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    transition: background .15s, border-color .15s;
}

.pp-opcion.marcada .pp-op-check[b-qicz5t4tsr] {
    background: #0f766e;
    border-color: #0f766e;
}

.pp-op-check .material-symbols-rounded[b-qicz5t4tsr] {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}

.pp-opcion.marcada .pp-op-check .material-symbols-rounded[b-qicz5t4tsr] {
    opacity: 1;
    transform: scale(1);
}

.pp-acciones[b-qicz5t4tsr] {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Pierde peso a propósito: es una respuesta legítima, pero no la que buscamos. Con los dos botones
   iguales, la mitad de la gente elige el de la izquierda sin leer. */
.pp-saltar[b-qicz5t4tsr] {
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    padding: 9px 2px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .pp-saltar:hover:not(:disabled)[b-qicz5t4tsr] {
        color: #0f172a;
    }

.pp-continuar[b-qicz5t4tsr] {
    background: #0f766e;
    border: none;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}

    .pp-continuar:hover:not(:disabled)[b-qicz5t4tsr] {
        background: #115e56;
    }

    .pp-continuar:disabled[b-qicz5t4tsr] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: default;
    }

/* ── Derecha: lo que va a pasar ── */
.pp-der[b-qicz5t4tsr] {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: linear-gradient(160deg, #f8fafc, #eef2f7);
    border-left: 1px solid #e6eaef;
    overflow: auto;
}

.pp-der-tit[b-qicz5t4tsr] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
}

.pp-der-sub[b-qicz5t4tsr] {
    margin: 8px 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #64748b;
}

.pp-tablero[b-qicz5t4tsr] {
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 30px -14px rgba(16, 24, 40, .22);
}

    .pp-tablero + .pp-tablero[b-qicz5t4tsr] {
        margin-top: 12px;
    }

.pp-tablero-nombre[b-qicz5t4tsr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

    .pp-tablero-nombre .material-symbols-rounded[b-qicz5t4tsr] {
        font-size: 18px;
        color: #0f766e;
    }

.pp-cols[b-qicz5t4tsr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-col[b-qicz5t4tsr] {
    padding: 5px 9px;
    border-radius: 7px;
    background: #f1f5f9;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

    /* La primera destacada: es por donde entra todo, y verlo distinto explica el tablero sin una línea
       de texto. */
    .pp-col:first-child[b-qicz5t4tsr] {
        background: #f0fdfa;
        color: #0f766e;
    }

.pp-vacio[b-qicz5t4tsr] {
    margin-top: 6px;
    padding: 26px 18px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

.pp-der-pie[b-qicz5t4tsr] {
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

/* En ventana estrecha se apila: el panel de la derecha pasa debajo en vez de estrujar la pregunta. */
@media (max-width: 980px) {
    .pp-marco[b-qicz5t4tsr] {
        grid-template-columns: 1fr;
    }

    .pp-der[b-qicz5t4tsr] {
        border-left: none;
        border-top: 1px solid #e6eaef;
    }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/AjustesCampanaMk.razor.rz.scp.css */
.mka-seccion[b-wg8n49596r] {
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--mk-linea);
    margin-bottom: 16px;
}

.mka-seccion:last-child[b-wg8n49596r] {
    border-bottom: none;
    margin-bottom: 0;
}

.mka-titulo[b-wg8n49596r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.mka-titulo .material-symbols-rounded[b-wg8n49596r] {
    font-size: 20px;
    color: var(--mk-acento);
}

.mka-casillas[b-wg8n49596r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.mka-horario-cabeza[b-wg8n49596r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mka-rapidos[b-wg8n49596r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mka-horario input[type=time][b-wg8n49596r] {
    width: 120px;
}

.mka-partida[b-wg8n49596r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--mk-acento-borde);
    border-radius: var(--mk-radio-chico);
    background: var(--mk-acento-suave);
}

.mka-partida > .material-symbols-rounded[b-wg8n49596r] {
    color: var(--mk-acento);
}

.mka-partida-texto[b-wg8n49596r] {
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/AnuncioPreviewMk.razor.rz.scp.css */
.mka-prev[b-k840pzhnzv] { margin-top: 14px; }

.mka-barra[b-k840pzhnzv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mka-dispositivos[b-k840pzhnzv] {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background: #f3f4f6;
}

.mka-dispositivos button[b-k840pzhnzv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--mk-gris, #6b7280);
    cursor: pointer;
    font-family: inherit;
}

.mka-dispositivos button .material-symbols-rounded[b-k840pzhnzv] { font-size: 17px; }
.mka-dispositivos button.activo[b-k840pzhnzv] { background: #fff; color: var(--mk-texto, #1f2937); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.mka-nav[b-k840pzhnzv] { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--mk-gris, #6b7280); }

.mka-lienzo[b-k840pzhnzv] {
    padding: 18px;
    border-radius: 10px;
    background: var(--mk-fondo-suave, #f8fafc);
    border: 1px solid var(--mk-linea, #e5e7eb);
}

.mka-lienzo.movil[b-k840pzhnzv] { display: flex; justify-content: center; }

.mka-anuncio[b-k840pzhnzv] {
    max-width: 620px;
    font-family: Arial, sans-serif;
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.mka-lienzo.movil .mka-anuncio[b-k840pzhnzv] { max-width: 340px; border-radius: 14px; padding: 14px 16px; }

.mka-cab[b-k840pzhnzv] { display: flex; align-items: center; gap: 10px; }

.mka-favicon[b-k840pzhnzv] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e7eb;
    flex: 0 0 auto;
}

.mka-patrocinado[b-k840pzhnzv] { font-size: 12px; font-weight: 700; color: #202124; }
.mka-url[b-k840pzhnzv] { font-size: 12px; color: #4d5156; word-break: break-all; }
.mka-titulo[b-k840pzhnzv] { margin: 6px 0 4px; font-size: 20px; line-height: 1.3; color: #1a0dab; }
.mka-lienzo.movil .mka-titulo[b-k840pzhnzv] { font-size: 17px; }
.mka-texto[b-k840pzhnzv] { font-size: 14px; line-height: 1.5; color: #4d5156; }

.mka-destacados[b-k840pzhnzv] {
    margin-top: 4px;
    font-size: 13px;
    color: #4d5156;
}

.mka-enlaces[b-k840pzhnzv] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 8px;
}

.mka-enlaces span[b-k840pzhnzv] {
    color: #1a0dab;
    font-size: 14px;
}

.mka-llamar[b-k840pzhnzv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 14px;
    border: 1px solid #dadce0;
    border-radius: 18px;
    color: #1a0dab;
    font-size: 13px;
}

.mka-llamar .material-symbols-rounded[b-k840pzhnzv] {
    font-size: 18px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/AvisoMk.razor.rz.scp.css */
.mka[b-ccc0u7t780] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid var(--mk-acento-borde, #bfdbfe);
    background: var(--mk-acento-suave, #eff6ff);
    color: var(--mk-texto, #1f2937);
    font-size: 13px;
    line-height: 1.5;
}

.mka-icono[b-ccc0u7t780] { font-size: 20px; color: var(--mk-acento-fuerte, #1d4ed8); flex: 0 0 auto; }
.mka-texto[b-ccc0u7t780] { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.mka-acciones[b-ccc0u7t780] { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.mka.ok[b-ccc0u7t780] { border-color: var(--mk-ok-borde); background: var(--mk-ok-fondo); }
.mka.ok .mka-icono[b-ccc0u7t780] { color: var(--mk-ok); }
.mka.aviso[b-ccc0u7t780] { border-color: var(--mk-aviso-borde); background: var(--mk-aviso-fondo); }
.mka.aviso .mka-icono[b-ccc0u7t780] { color: var(--mk-aviso); }
.mka.error[b-ccc0u7t780] { border-color: var(--mk-error-borde); background: var(--mk-error-fondo); }
.mka.error .mka-icono[b-ccc0u7t780] { color: var(--mk-error); }
.mka.ia[b-ccc0u7t780] { border-color: var(--mk-ia-borde); background: var(--mk-ia-fondo); }
.mka.ia .mka-icono[b-ccc0u7t780] { color: var(--mk-ia); }

@media (max-width: 700px) {
    .mka[b-ccc0u7t780] { flex-wrap: wrap; }
    .mka-acciones[b-ccc0u7t780] { flex-basis: 100%; padding-left: 30px; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/BarraCambiosMk.razor.rz.scp.css */
.mkb[b-ropi6g8mx4] {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #1f2937;
    color: #f9fafb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
    animation: mkb-entra-b-ropi6g8mx4 .18s ease-out;
}

@keyframes mkb-entra-b-ropi6g8mx4 { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .mkb[b-ropi6g8mx4] { animation: none; } }

.mkb-icono[b-ropi6g8mx4] { font-size: 22px; color: #fbbf24; }
.mkb-texto[b-ropi6g8mx4] { flex: 1 1 auto; min-width: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mkb-detalle[b-ropi6g8mx4] { font-size: 12.5px; color: #d1d5db; }

.mkb-btn[b-ropi6g8mx4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: transparent;
    color: #f9fafb;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    font-family: inherit;
}

.mkb-btn .material-symbols-rounded[b-ropi6g8mx4] { font-size: 18px; }
.mkb-btn:hover[b-ropi6g8mx4] { background: #374151; }
.mkb-btn.primario[b-ropi6g8mx4] { background: var(--mk-acento, #2563eb); border-color: var(--mk-acento, #2563eb); }
.mkb-btn.primario:hover[b-ropi6g8mx4] { background: var(--mk-acento-fuerte, #1d4ed8); }
.mkb-btn:focus-visible[b-ropi6g8mx4] { outline: 2px solid #93c5fd; outline-offset: 2px; }

@media (max-width: 700px) {
    .mkb[b-ropi6g8mx4] { flex-wrap: wrap; }
    .mkb-texto[b-ropi6g8mx4] { flex-basis: calc(100% - 40px); }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/CampanaRapidaMk.razor.rz.scp.css */
.mkq-h[b-v9ezeme761] {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.mkq-pie[b-v9ezeme761] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.mkq-hueco[b-v9ezeme761] {
    flex: 1 1 auto;
}

.mkq-cabeza[b-v9ezeme761] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.mkq-nombre[b-v9ezeme761] {
    font-size: 17px;
    font-weight: 800;
}

.mkq-grupos[b-v9ezeme761] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.mkq-grupo[b-v9ezeme761] {
    padding: 12px;
    border: 1px solid var(--mk-linea);
    border-radius: var(--mk-radio-chico);
    background: var(--mk-superficie);
}

.mkq-grupo.fuera[b-v9ezeme761] {
    opacity: .55;
}

.mkq-grupo-nombre[b-v9ezeme761] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mkq-grupo-titulo[b-v9ezeme761] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--mk-radio-chico);
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.mkq-grupo-titulo:hover[b-v9ezeme761],
.mkq-grupo-titulo:focus[b-v9ezeme761] {
    border-color: var(--mk-linea);
    background: var(--mk-superficie);
    outline: none;
}

.mkq-falta[b-v9ezeme761] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--mk-aviso);
}

.mkq-falta .material-symbols-rounded[b-v9ezeme761] {
    font-size: 16px;
}

.mkq-rechazadas[b-v9ezeme761] {
    margin: 6px 0 0;
    padding: 6px 10px 6px 24px;
    border-radius: var(--mk-radio-chico);
    background: var(--mk-error-fondo);
    color: var(--mk-error);
    font-size: 12px;
}

.mkq-rechazadas-titulo[b-v9ezeme761] {
    margin-left: -14px;
    list-style: none;
    font-weight: 700;
}

.mkq-grupo details .mk-campo[b-v9ezeme761] {
    margin-top: 8px;
}

.mkq-grupo details textarea[b-v9ezeme761] {
    width: 100%;
    font-size: 13px;
}

.mkq-anadir[b-v9ezeme761] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.mkq-anadir .mk-campo[b-v9ezeme761] {
    flex: 0 1 360px;
}

.mkq-chips[b-v9ezeme761] {
    margin: 8px 0;
}

.mkq-textos[b-v9ezeme761] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

.mkq-textos.secundarios[b-v9ezeme761] {
    color: var(--mk-gris);
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/ConfiguradorMk.razor.rz.scp.css */
.mkw-h[b-qxzby16v1h] {
    margin: 4px 0 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--mk-texto, #1f2937);
    letter-spacing: -0.01em;
}

.mkw-explicacion[b-qxzby16v1h] {
    margin: 14px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mk-texto-2, #374151);
    max-width: 90ch;
}

.mkw-pie[b-qxzby16v1h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--mk-linea-suave, #f1f5f9);
}

.mkw-hueco[b-qxzby16v1h] { flex: 1 1 auto; }
/* _content/ErpPowergest/Presentation/Crm/Marketing/CorreoParaPegar.razor.rz.scp.css */
.mkc-correo[b-cxp4rmr77p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 14px;
    border: 1px dashed var(--mk-acento-borde, #bfdbfe);
    border-radius: 10px;
    background: var(--mk-acento-suave, #eff6ff);
}

.mkc-correo > .material-symbols-rounded[b-cxp4rmr77p] { font-size: 26px; color: var(--mk-acento-fuerte, #1d4ed8); }
.mkc-correo-textos[b-cxp4rmr77p] { flex: 1 1 auto; min-width: 0; }
.mkc-correo-rotulo[b-cxp4rmr77p] { font-size: 12px; font-weight: 700; color: var(--mk-texto-2, #374151); }

.mkc-correo code[b-cxp4rmr77p] {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--mk-texto, #1f2937);
    word-break: break-all;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/IaEditorMk.razor.rz.scp.css */
.mkie[b-9ej6xtu908] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--mk-ia-borde, #ddd6fe);
    border-radius: 10px;
    background: var(--mk-ia-fondo, #f5f3ff);
}

.mkie-cab[b-9ej6xtu908] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkie-icono[b-9ej6xtu908] { font-size: 20px; color: var(--mk-ia, #7c3aed); }
.mkie-textos[b-9ej6xtu908] { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.mkie-textos strong[b-9ej6xtu908] { font-size: 13.5px; color: var(--mk-texto, #1f2937); }
.mkie-textos span[b-9ej6xtu908] { font-size: 12.5px; color: var(--mk-gris, #6b7280); }
.mkie-quevendes[b-9ej6xtu908] { flex: 1 1 280px; }

.mkie-lista[b-9ej6xtu908] { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.mkie-lista li[b-9ej6xtu908] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
}

.mkie-lista li.hecho[b-9ej6xtu908], .mkie-grupo.hecho[b-9ej6xtu908] { opacity: .6; }
.mkie-texto[b-9ej6xtu908] { flex: 1 1 auto; min-width: 0; }

.mkie-grupos[b-9ej6xtu908] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 12px; }

.mkie-grupo[b-9ej6xtu908] {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--mk-texto-2, #374151);
}

.mkie-grupo-cab[b-9ej6xtu908] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.mkie-hueco[b-9ej6xtu908] { flex: 1 1 auto; }
.mkie-grupo-det[b-9ej6xtu908] { margin-top: 3px; line-height: 1.45; }
.mkie-grupo-det span[b-9ej6xtu908] { font-weight: 700; color: var(--mk-gris, #6b7280); }
.mkie-pie[b-9ej6xtu908] { margin: 8px 0 0; }
/* _content/ErpPowergest/Presentation/Crm/Marketing/ListaTextosAds.razor.rz.scp.css */
.mkl[b-efjl9fd9ok] { margin-bottom: 16px; }
.mkl:last-child[b-efjl9fd9ok] { margin-bottom: 0; }

.mkl-rotulo[b-efjl9fd9ok] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 4px;
}

.mkl-cuantos[b-efjl9fd9ok] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mk-acento-fuerte, #1d4ed8);
    background: var(--mk-acento-suave, #eff6ff);
    border-radius: 999px;
    padding: 0 7px;
}

.mkl-fijar[b-efjl9fd9ok] {
    width: 130px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarcoMarketingAds.razor.rz.scp.css */
/* Panel de campañas de Google Ads: el marco y el estilo de todas sus pantallas.

   Los colores son variables (--mk-*) declaradas en el marco: las heredan las piezas propias (TarjetaMk, VacioMk,
   AvisoMk) aunque tengan su hoja, porque una variable CSS pasa por el DOM sin mirar el ámbito. Cambiar el acento
   del panel es cambiar una línea. Los estados (bien, vigilar, mal) salen del semáforo común (semaforo.css).

   Lo de dentro de cada página se alcanza con ::deep porque lo escribe la página (ver el comentario del marco). */

.mk-marco[b-4vmzmhw5nx] {
    --mk-acento: #2563eb;
    --mk-acento-fuerte: #1d4ed8;
    --mk-acento-suave: #eff6ff;
    --mk-acento-borde: #bfdbfe;
    --mk-texto: #1f2937;
    --mk-texto-2: #374151;
    --mk-gris: #6b7280;
    --mk-gris-claro: #9ca3af;
    --mk-linea: #e5e7eb;
    --mk-linea-suave: #f1f5f9;
    --mk-superficie: #ffffff;
    --mk-fondo-suave: #f8fafc;
    --mk-radio: 12px;
    --mk-radio-chico: 8px;
    --mk-sombra: 0 .5rem 1.4rem rgba(15, 23, 42, .045);
    --mk-ok: var(--sem-completo-fg);
    --mk-ok-fondo: var(--sem-completo-bg);
    --mk-ok-borde: var(--sem-completo-bd);
    --mk-aviso: var(--sem-pendiente-fg);
    --mk-aviso-fondo: var(--sem-pendiente-bg);
    --mk-aviso-borde: var(--sem-pendiente-bd);
    --mk-error: var(--sem-vencido-fg);
    --mk-error-fondo: var(--sem-vencido-bg);
    --mk-error-borde: var(--sem-vencido-bd);
    --mk-ia: #7c3aed;
    --mk-ia-fondo: #f5f3ff;
    --mk-ia-borde: #ddd6fe;

    /* A todo el ancho y todo el alto, como las demás pantallas: el borde lo pone .main-body. */
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: var(--mk-texto);
}

/* El contenido de la pantalla llena el alto que deja la cabecera; su último bloque se estira hasta abajo. */
.mk-contenido[b-4vmzmhw5nx] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mk-contenido[b-4vmzmhw5nx]  > :last-child { flex: 1 1 auto; }

/* ── Cabecera ──────────────────────────────────────────────────────────────────────────────────── */

.mk-cabecera[b-4vmzmhw5nx] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
    margin-bottom: 1rem;
}

.mk-cabecera-icono[b-4vmzmhw5nx] {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: var(--mk-acento-fuerte);
    background: var(--mk-acento-suave);
    border-radius: 10px;
    padding: 8px;
}

/* El título cede, pero no por debajo de 12rem: así los comandos pasan a icono o al «···» antes que partir el título
   en una palabra por línea (mismo criterio que la cabecera del mailing). */
.mk-textos[b-4vmzmhw5nx] {
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
}

.mk-titulo[b-4vmzmhw5nx] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: var(--mk-texto);
    letter-spacing: -0.02em;
}

.mk-subtitulo[b-4vmzmhw5nx] {
    margin-top: 4px;
    max-width: 80ch;
    font-size: 13px;
    color: var(--mk-gris);
    line-height: 1.45;
}

/* La barra la pinta CommandBar (componente hijo): su raíz no lleva el atributo de esta hoja. */
.mk-cabecera[b-4vmzmhw5nx]  .mk-comandos {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}

/* ── Pestañas ──────────────────────────────────────────────────────────────────────────────────── */

/* Pastillas como las de los pasos de «Conexión con Google» (PasosMk), sin número: el círculo lleva el icono. */
/* Filas que se llenan: cada pastilla con su texto entero, y las de una fila crecen a partes iguales hasta ocuparla. */
.mk-navegacion[b-4vmzmhw5nx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.1rem;
}

.mk-pestana[b-4vmzmhw5nx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--mk-linea);
    border-radius: 999px;
    background: var(--mk-superficie);
    color: var(--mk-gris);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.mk-pestana-ico[b-4vmzmhw5nx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--mk-gris);
}

.mk-pestana-ico .material-symbols-rounded[b-4vmzmhw5nx] { font-size: 15px; }
.mk-pestana-txt[b-4vmzmhw5nx] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-pestana:hover[b-4vmzmhw5nx] { border-color: var(--mk-acento-borde); color: var(--mk-acento-fuerte); }
.mk-pestana:focus-visible[b-4vmzmhw5nx] { outline: 2px solid var(--mk-acento); outline-offset: 2px; }
.mk-pestana.activa[b-4vmzmhw5nx] { border-color: var(--mk-acento); background: var(--mk-acento-suave); color: var(--mk-acento-fuerte); }
.mk-pestana.activa .mk-pestana-ico[b-4vmzmhw5nx] { background: var(--mk-acento); color: #fff; }

@media (max-width: 600px) {
    .mk-pestana[b-4vmzmhw5nx] { flex-basis: calc(50% - 4px); justify-content: flex-start; }
}

/* ── Botones ───────────────────────────────────────────────────────────────────────────────────── */

.mk-marco[b-4vmzmhw5nx]  .mk-btn,
.mk-marco[b-4vmzmhw5nx]  .mk-btn-primario,
.mk-marco[b-4vmzmhw5nx]  .mk-btn-peligro,
.mk-marco[b-4vmzmhw5nx]  .mk-btn-ia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--mk-radio-chico);
    border: 1px solid #d8dee8;
    background: var(--mk-superficie);
    color: var(--mk-texto-2);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.mk-marco[b-4vmzmhw5nx]  .mk-btn-primario { background: var(--mk-acento); border-color: var(--mk-acento); color: #fff; }
.mk-marco[b-4vmzmhw5nx]  .mk-btn-peligro { color: var(--mk-error); }
.mk-marco[b-4vmzmhw5nx]  .mk-btn-ia { color: var(--mk-ia); border-color: var(--mk-ia-borde); background: var(--mk-ia-fondo); }
.mk-marco[b-4vmzmhw5nx]  .mk-btn:hover:not(:disabled) { background: #f3f4f6; }
.mk-marco[b-4vmzmhw5nx]  .mk-btn-primario:hover:not(:disabled) { background: var(--mk-acento-fuerte); }
.mk-marco[b-4vmzmhw5nx]  .mk-btn-ia:hover:not(:disabled) { background: #ede9fe; }
.mk-marco[b-4vmzmhw5nx]  :is(.mk-btn, .mk-btn-primario, .mk-btn-peligro, .mk-btn-ia):disabled { opacity: .5; cursor: default; }
.mk-marco[b-4vmzmhw5nx]  :is(.mk-btn, .mk-btn-primario, .mk-btn-peligro, .mk-btn-ia):focus-visible { outline: 2px solid var(--mk-acento); outline-offset: 2px; }
.mk-marco[b-4vmzmhw5nx]  :is(.mk-btn, .mk-btn-primario, .mk-btn-peligro, .mk-btn-ia) .material-symbols-rounded { font-size: 18px; }
.mk-marco[b-4vmzmhw5nx]  .mk-btn-chico { height: 28px; padding: 0 9px; font-size: 12px; }

.mk-marco[b-4vmzmhw5nx]  .mk-icono {
    border: none;
    background: none;
    color: var(--mk-gris-claro);
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    display: inline-flex;
}

.mk-marco[b-4vmzmhw5nx]  .mk-icono:hover { color: var(--mk-error); background: var(--mk-error-fondo); }
.mk-marco[b-4vmzmhw5nx]  .mk-icono .material-symbols-rounded { font-size: 18px; }

/* ── Campos ────────────────────────────────────────────────────────────────────────────────────── */

.mk-marco[b-4vmzmhw5nx]  .mk-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-marco[b-4vmzmhw5nx]  .mk-campo.ancho-2 { grid-column: span 2; }
.mk-marco[b-4vmzmhw5nx]  .mk-campo.ancho-3 { grid-column: span 3; }
.mk-marco[b-4vmzmhw5nx]  .mk-campo.crece { flex: 1 1 260px; }

.mk-marco[b-4vmzmhw5nx]  .mk-campo > label,
.mk-marco[b-4vmzmhw5nx]  .mk-rotulo {
    font-size: 12px;
    font-weight: 650;
    color: #4b5563;
}

.mk-marco[b-4vmzmhw5nx]  .mk-campo .mk-pista { font-size: 12px; color: var(--mk-gris-claro); }

.mk-marco[b-4vmzmhw5nx]  .mk-campo input:not([type=checkbox]):not([type=radio]),
.mk-marco[b-4vmzmhw5nx]  .mk-campo select,
.mk-marco[b-4vmzmhw5nx]  .mk-campo textarea,
.mk-marco[b-4vmzmhw5nx]  .mk-tabla input:not([type=checkbox]):not([type=radio]),
.mk-marco[b-4vmzmhw5nx]  .mk-tabla select {
    height: 34px;
    padding: 0 9px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 14px;
    background: var(--mk-superficie);
    color: var(--mk-texto);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.mk-marco[b-4vmzmhw5nx]  .mk-campo :is(input, select, textarea):focus,
.mk-marco[b-4vmzmhw5nx]  .mk-tabla :is(input, select):focus {
    outline: none;
    border-color: var(--mk-acento);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.mk-marco[b-4vmzmhw5nx]  .mk-campo textarea {
    height: auto;
    min-height: 70px;
    padding: 7px 9px;
    resize: vertical;
    font-family: inherit;
}

.mk-marco[b-4vmzmhw5nx]  .mk-campo input[type=file] { height: auto; padding: 6px; }

.mk-marco[b-4vmzmhw5nx]  .mk-casilla {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
    min-height: 34px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-casilla input { width: auto; height: auto; }

/* ── Tablas ────────────────────────────────────────────────────────────────────────────────────── */

.mk-marco[b-4vmzmhw5nx]  .mk-tabla-caja { overflow-x: auto; }

.mk-marco[b-4vmzmhw5nx]  .mk-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-tabla th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mk-gris);
    padding: 7px 8px;
    border-bottom: 1px solid var(--mk-linea);
    white-space: nowrap;
}

.mk-marco[b-4vmzmhw5nx]  .mk-tabla td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--mk-linea-suave);
    vertical-align: middle;
}

.mk-marco[b-4vmzmhw5nx]  .mk-tabla tbody tr:hover td { background: #fafbfc; }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla :is(td, th).mk-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla :is(td, th).mk-estrecha { width: 1%; white-space: nowrap; }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla tr.mk-activo td { background: var(--mk-acento-suave); }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla tr.mk-fuera td { color: var(--mk-gris-claro); }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla tr.mk-pulsable { cursor: pointer; }
.mk-marco[b-4vmzmhw5nx]  .mk-tabla .mk-celda-nota { font-size: 12px; color: #4b5563; }

/* ── Estados y etiquetas ───────────────────────────────────────────────────────────────────────── */

/* La insignia de estado es la del semáforo común (.sem-badge + .sem-…): aquí solo se ajusta su ancho mínimo,
   que en el panel va dentro de frases y de tablas estrechas. */
.mk-marco[b-4vmzmhw5nx]  .sem-badge { min-inline-size: 0; }
.mk-marco[b-4vmzmhw5nx]  button.sem-badge { cursor: pointer; font-family: inherit; }
.mk-marco[b-4vmzmhw5nx]  button.sem-badge:hover { filter: brightness(.97); }

.mk-marco[b-4vmzmhw5nx]  .mk-resumen { cursor: pointer; }

.mk-marco[b-4vmzmhw5nx]  .mk-contador { font-size: 12px; color: var(--mk-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-marco[b-4vmzmhw5nx]  .mk-contador.excede { color: var(--mk-error); font-weight: 700; }

/* Chip de una lista editable (negativas, términos, formas de una marca): texto y su aspa. */
.mk-marco[b-4vmzmhw5nx]  .mk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.mk-marco[b-4vmzmhw5nx]  .mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: #f3f4f6;
    color: var(--mk-texto-2);
    border: 1px solid var(--mk-linea);
}

.mk-marco[b-4vmzmhw5nx]  .mk-chip small { color: var(--mk-gris); font-weight: 500; }
.mk-marco[b-4vmzmhw5nx]  .mk-chip .mk-icono { padding: 1px; }
.mk-marco[b-4vmzmhw5nx]  .mk-chip .mk-icono .material-symbols-rounded { font-size: 14px; }

.mk-marco[b-4vmzmhw5nx]  .mk-secundario { font-size: 12px; color: var(--mk-gris-claro); }
.mk-marco[b-4vmzmhw5nx]  .mk-ayuda { font-size: 13px; color: var(--mk-gris); margin: 0 0 12px; line-height: 1.5; }
.mk-marco[b-4vmzmhw5nx]  .mk-ayuda:last-child { margin-bottom: 0; }

.mk-marco[b-4vmzmhw5nx]  .mk-incidencias { list-style: none; margin: 0; padding: 0; }

.mk-marco[b-4vmzmhw5nx]  .mk-incidencias li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--mk-linea-suave);
}

.mk-marco[b-4vmzmhw5nx]  .mk-incidencias li:last-child { border-bottom: none; }
.mk-marco[b-4vmzmhw5nx]  .mk-incidencias li .material-symbols-rounded { font-size: 18px; color: var(--mk-gris-claro); }
.mk-marco[b-4vmzmhw5nx]  .mk-incidencias li.error .material-symbols-rounded { color: var(--mk-error); }
.mk-marco[b-4vmzmhw5nx]  .mk-incidencias li.aviso .material-symbols-rounded { color: var(--mk-aviso); }
.mk-marco[b-4vmzmhw5nx]  .mk-incidencias .mk-donde { font-weight: 650; color: var(--mk-texto-2); }
.mk-marco[b-4vmzmhw5nx]  .mk-incidencias .mk-crece { flex: 1; }

/* ── Disposición ───────────────────────────────────────────────────────────────────────────────── */

.mk-marco[b-4vmzmhw5nx]  .mk-dos-columnas {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;   /* las dos columnas hasta abajo */
}

.mk-marco[b-4vmzmhw5nx]  .mk-fila-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    align-items: flex-end;
}

.mk-marco[b-4vmzmhw5nx]  .mk-fila-entre {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.mk-marco[b-4vmzmhw5nx]  .mk-separado { margin-top: 14px; }

/* Una fila de indicadores suelta entre tarjetas (no dentro de una): el mismo aire que una tarjeta. */
.mk-marco[b-4vmzmhw5nx]  .mk-kpis-sueltos { margin-bottom: 16px; }

.mk-marco[b-4vmzmhw5nx]  .mk-lista { list-style: none; margin: 0; padding: 0; }

.mk-marco[b-4vmzmhw5nx]  .mk-lista li button {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 9px 10px;
    border-radius: var(--mk-radio-chico);
    cursor: pointer;
    font-size: 14px;
    color: var(--mk-texto-2);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-lista li button:hover { background: #f3f4f6; }
.mk-marco[b-4vmzmhw5nx]  .mk-lista li button.activa { background: var(--mk-acento-suave); color: var(--mk-acento-fuerte); font-weight: 650; }

/* Pestañas dentro de una tarjeta (la campaña, el grupo): botones, no rutas. */
.mk-marco[b-4vmzmhw5nx]  .mk-subpestanas {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mk-linea);
    margin: 0 0 14px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-subpestana {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mk-gris);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    font-family: inherit;
}

.mk-marco[b-4vmzmhw5nx]  .mk-subpestana .material-symbols-rounded { font-size: 17px; }
.mk-marco[b-4vmzmhw5nx]  .mk-subpestana:hover { color: var(--mk-texto); }
.mk-marco[b-4vmzmhw5nx]  .mk-subpestana.activa { color: var(--mk-acento-fuerte); border-bottom-color: var(--mk-acento-fuerte); }
.mk-marco[b-4vmzmhw5nx]  .mk-subpestana:focus-visible { outline: 2px solid var(--mk-acento); outline-offset: -2px; }

.mk-marco[b-4vmzmhw5nx]  .mk-cuenta {
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--mk-gris);
}

.mk-marco[b-4vmzmhw5nx]  .mk-cuenta.error { background: var(--mk-error-fondo); color: var(--mk-error); }

/* Filtros en forma de chip, con su recuento. */
.mk-marco[b-4vmzmhw5nx]  .mk-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.mk-marco[b-4vmzmhw5nx]  .mk-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mk-linea);
    background: var(--mk-superficie);
    color: var(--mk-texto-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.mk-marco[b-4vmzmhw5nx]  .mk-filtro.activo { border-color: var(--mk-acento); background: var(--mk-acento-suave); color: var(--mk-acento-fuerte); }

/* Cabecera de un elemento abierto (la campaña): nombre grande y sus marcas. */
.mk-marco[b-4vmzmhw5nx]  .mk-abierto {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-abierto-nombre { font-size: 18px; font-weight: 800; color: var(--mk-texto); letter-spacing: -0.01em; }

/* Cada paso de una cuenta: qué es, cuánto sale y por qué, en una frase. */
.mk-marco[b-4vmzmhw5nx]  .mk-paso { padding: 9px 0; border-bottom: 1px solid var(--mk-linea-suave); }
.mk-marco[b-4vmzmhw5nx]  .mk-paso:last-child { border-bottom: none; }
.mk-marco[b-4vmzmhw5nx]  .mk-paso-cabeza { display: flex; justify-content: space-between; gap: 12px; font-weight: 650; font-size: 14px; }
.mk-marco[b-4vmzmhw5nx]  .mk-paso-cabeza span:last-child { font-variant-numeric: tabular-nums; }
.mk-marco[b-4vmzmhw5nx]  .mk-paso-texto { font-size: 13px; color: var(--mk-gris); margin-top: 2px; line-height: 1.45; }

.mk-marco[b-4vmzmhw5nx]  .mk-pasos-guia { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--mk-texto-2); line-height: 1.6; }
.mk-marco[b-4vmzmhw5nx]  .mk-pasos-guia li + li { margin-top: 6px; }
.mk-marco[b-4vmzmhw5nx]  .mk-pasos-guia li::marker { color: var(--mk-acento); font-weight: 800; }

/* Una guía con su ilustración al lado (texto a la izquierda, la maqueta a la derecha). */
.mk-marco[b-4vmzmhw5nx]  .mk-guia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
}

.mk-marco[b-4vmzmhw5nx]  .mk-figura {
    margin: 0;
    border: 1px solid var(--mk-linea);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mk-fondo-suave);
}

.mk-marco[b-4vmzmhw5nx]  .mk-figura img { display: block; width: 100%; height: auto; }
.mk-marco[b-4vmzmhw5nx]  .mk-figura figcaption { padding: 8px 12px; font-size: 12px; color: var(--mk-gris); border-top: 1px solid var(--mk-linea); background: var(--mk-superficie); }

@media (max-width: 1000px) {
    .mk-marco[b-4vmzmhw5nx]  .mk-guia { grid-template-columns: minmax(0, 1fr); }
}

/* Así se vería el anuncio en Google. */
.mk-marco[b-4vmzmhw5nx]  .mk-anuncio {
    border: 1px solid var(--mk-linea);
    border-radius: var(--mk-radio-chico);
    padding: 12px 14px;
    font-size: 13px;
    background: var(--mk-superficie);
    font-family: Arial, sans-serif;
    max-width: 640px;
}

.mk-marco[b-4vmzmhw5nx]  .mk-anuncio .mk-anuncio-url { color: #202124; font-size: 12px; }
.mk-marco[b-4vmzmhw5nx]  .mk-anuncio .mk-anuncio-url strong { font-weight: 700; margin-right: 6px; }
.mk-marco[b-4vmzmhw5nx]  .mk-anuncio .mk-anuncio-titulo { color: #1a0dab; font-size: 18px; line-height: 1.3; margin: 3px 0; }
.mk-marco[b-4vmzmhw5nx]  .mk-anuncio .mk-anuncio-texto { color: #4d5156; line-height: 1.45; }

@media (max-width: 900px) {
    .mk-marco[b-4vmzmhw5nx]  .mk-dos-columnas { grid-template-columns: 1fr; }
    .mk-marco[b-4vmzmhw5nx]  .mk-campo:is(.ancho-2, .ancho-3) { grid-column: auto; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingExportarPage.razor.rz.scp.css */
.mke-comprobar[b-964exk95bo] {
    margin-bottom: 12px;
}

.mke-lista[b-964exk95bo] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mke-lista li[b-964exk95bo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingGooglePage.razor.rz.scp.css */
/* Asistente de conexión con Google: instrucciones a la izquierda, la ilustración del paso a la derecha. */

.mkg-paso[b-kbhaw0q86q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
}

.mkg-paso.sin-ilustracion[b-kbhaw0q86q] { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

.mkg-lista[b-kbhaw0q86q] {
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mk-texto-2, #374151);
}

.mkg-lista li + li[b-kbhaw0q86q] { margin-top: 6px; }
.mkg-lista li[b-kbhaw0q86q]::marker { color: var(--mk-acento, #2563eb); font-weight: 800; }

.mkg-figura[b-kbhaw0q86q] {
    margin: 0;
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mk-fondo-suave, #f8fafc);
}

.mkg-figura img[b-kbhaw0q86q] { display: block; width: 100%; height: auto; }

.mkg-figura figcaption[b-kbhaw0q86q] {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--mk-gris, #6b7280);
    border-top: 1px solid var(--mk-linea, #e5e7eb);
    background: var(--mk-superficie, #fff);
}

.mkg-correo[b-kbhaw0q86q] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mkg-correo code[b-kbhaw0q86q] { font-size: 13px; word-break: break-all; }

.mkg-clave[b-kbhaw0q86q] { font-family: Consolas, "Courier New", monospace; font-size: 12px; }

.mkg-prueba[b-kbhaw0q86q] { list-style: none; margin: 14px 0 0; padding: 0; }

.mkg-prueba li[b-kbhaw0q86q] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--mk-ok-borde, #bbf7d0);
    background: var(--mk-ok-fondo, #f0fdf4);
}

.mkg-prueba li.mal[b-kbhaw0q86q] { border-color: var(--mk-error-borde, #fecaca); background: var(--mk-error-fondo, #fef2f2); }
.mkg-prueba li > .material-symbols-rounded[b-kbhaw0q86q] { font-size: 22px; color: var(--mk-ok, #15803d); }
.mkg-prueba li.mal > .material-symbols-rounded[b-kbhaw0q86q] { color: var(--mk-error, #b91c1c); }
.mkg-pieza[b-kbhaw0q86q] { font-weight: 700; font-size: 14px; }
.mkg-motivo[b-kbhaw0q86q] { font-size: 13px; color: var(--mk-texto-2, #374151); margin-top: 2px; }
.mkg-remedio[b-kbhaw0q86q] { font-size: 13px; margin-top: 4px; }
.mk-crece[b-kbhaw0q86q] { flex: 1 1 auto; min-width: 0; }

.mkg-pie[b-kbhaw0q86q] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--mk-linea-suave, #f1f5f9);
}

.mkg-hueco[b-kbhaw0q86q] { flex: 1 1 auto; }

@media (max-width: 1000px) {
    .mkg-paso[b-kbhaw0q86q] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingImportarPage.razor.rz.scp.css */
/* Importar del Planificador: la campaña al lado de una zona grande para soltar el fichero. */

.mki-carga[b-rxqb9toxl0] {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
    gap: 16px;
    align-items: stretch;
}

.mki-ficheros[b-rxqb9toxl0] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.85rem;
}

.mki-ficheros li[b-rxqb9toxl0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--mk-fondo-suave, #f6f8fb);
}

.mki-soltar[b-rxqb9toxl0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
    padding: 18px;
    border: 2px dashed var(--mk-acento-borde, #bfdbfe);
    border-radius: var(--mk-radio, 12px);
    background: var(--mk-acento-suave, #eff6ff);
    color: var(--mk-texto-2, #374151);
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.mki-soltar:hover[b-rxqb9toxl0], .mki-soltar:focus-within[b-rxqb9toxl0] { border-color: var(--mk-acento, #2563eb); background: #dbeafe; }
.mki-soltar.cargado[b-rxqb9toxl0] { border-style: solid; border-color: var(--mk-ok-borde, #bbf7d0); background: var(--mk-ok-fondo, #f0fdf4); }
.mki-soltar .material-symbols-rounded[b-rxqb9toxl0] { font-size: 32px; color: var(--mk-acento, #2563eb); }
.mki-soltar.cargado .material-symbols-rounded[b-rxqb9toxl0] { color: var(--mk-ok, #15803d); }
.mki-soltar strong[b-rxqb9toxl0] { font-size: 14px; word-break: break-all; }
.mki-soltar span:last-of-type[b-rxqb9toxl0] { font-size: 12.5px; color: var(--mk-gris, #6b7280); }

/* El <input type=file> lo pinta InputFile (otro componente): cubre toda la zona, invisible, para que se pueda
   soltar el fichero encima o pulsar en cualquier parte. */
.mki-soltar[b-rxqb9toxl0]  input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 800px) {
    .mki-carga[b-rxqb9toxl0] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingInicioPage.razor.rz.scp.css */
/* Inicio del panel: la puesta en marcha como un camino (hecho · ahora · luego) con su barra de avance. */

.mki-marcha[b-6c43tcf8dp] {
    background: var(--mk-superficie, #fff);
    border: 1px solid var(--mk-acento-borde, #bfdbfe);
    border-radius: var(--mk-radio, 12px);
    box-shadow: 0 0 0 3px var(--mk-acento-suave, #eff6ff);
    padding: 18px 20px 8px;
    margin-bottom: 18px;
}

.mki-marcha.completa[b-6c43tcf8dp] { border-color: var(--mk-ok-borde, #bbf7d0); box-shadow: 0 0 0 3px var(--mk-ok-fondo, #f0fdf4); }

.mki-marcha-cabeza[b-6c43tcf8dp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.mki-marcha-titulo[b-6c43tcf8dp] { margin: 0; font-size: 17px; font-weight: 800; color: var(--mk-texto, #1f2937); }
.mki-marcha-sub[b-6c43tcf8dp] { margin-top: 3px; font-size: 13px; color: var(--mk-gris, #6b7280); }

.mki-barra[b-6c43tcf8dp] {
    display: block;
    width: 100%;
    height: 8px;
    margin: 14px 0 6px;
    border: none;
    border-radius: 999px;
    background: var(--mk-linea-suave, #f1f5f9);
    overflow: hidden;
    appearance: none;
}

.mki-barra[b-6c43tcf8dp]::-webkit-progress-bar { background: var(--mk-linea-suave, #f1f5f9); border-radius: 999px; }
.mki-barra[b-6c43tcf8dp]::-webkit-progress-value { background: var(--mk-acento, #2563eb); border-radius: 999px; transition: width .3s ease; }
.mki-barra[b-6c43tcf8dp]::-moz-progress-bar { background: var(--mk-acento, #2563eb); border-radius: 999px; }
.mki-marcha.completa .mki-barra[b-6c43tcf8dp]::-webkit-progress-value { background: var(--mk-ok, #15803d); }
.mki-marcha.completa .mki-barra[b-6c43tcf8dp]::-moz-progress-bar { background: var(--mk-ok, #15803d); }

.mki-camino[b-6c43tcf8dp] { list-style: none; margin: 6px 0 0; padding: 0; }

.mki-paso[b-6c43tcf8dp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.mki-paso + .mki-paso[b-6c43tcf8dp] { border-top: 1px solid var(--mk-linea-suave, #f1f5f9); }

.mki-punto[b-6c43tcf8dp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--mk-gris, #6b7280);
}

.mki-punto .material-symbols-rounded[b-6c43tcf8dp] { font-size: 19px; }
.mki-paso.hecho .mki-punto[b-6c43tcf8dp] { background: var(--mk-ok-fondo, #f0fdf4); color: var(--mk-ok, #15803d); }
.mki-paso.ahora .mki-punto[b-6c43tcf8dp] { background: var(--mk-acento, #2563eb); color: #fff; box-shadow: 0 0 0 4px var(--mk-acento-suave, #eff6ff); }

.mki-paso-textos[b-6c43tcf8dp] { flex: 1 1 auto; min-width: 0; }

.mki-paso-titulo[b-6c43tcf8dp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--mk-texto, #1f2937);
}

.mki-paso.hecho .mki-paso-titulo[b-6c43tcf8dp] { color: var(--mk-texto-2, #374151); }
.mki-paso.luego .mki-paso-titulo[b-6c43tcf8dp] { color: var(--mk-gris, #6b7280); }
.mki-paso-texto[b-6c43tcf8dp] { margin-top: 2px; font-size: 13px; color: var(--mk-gris, #6b7280); line-height: 1.45; }

@media (max-width: 700px) {
    .mki-paso[b-6c43tcf8dp] { flex-wrap: wrap; }
    .mki-paso > a[b-6c43tcf8dp] { margin-left: 48px; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingOportunidadesPage.razor.rz.scp.css */
/* Oportunidades: tres fuentes en columnas, tablas densas con el porqué debajo de cada cifra. Lo común (campos,
   tablas, botones) viene del marco del panel. */

.mko-fuentes-cuentas[b-3ihypgk395] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.mko-fuentes[b-3ihypgk395] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mko-fuente[b-3ihypgk395] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--mk-borde, #e5e7eb);
    border-radius: var(--mk-radio, 12px);
    background: var(--mk-fondo-suave, #f9fafb);
}

.mko-fuente h3[b-3ihypgk395], .mko-dos h3[b-3ihypgk395] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.mko-fuente h3 .material-symbols-rounded[b-3ihypgk395] { font-size: 20px; color: var(--mk-acento, #2563eb); }

.mko-nota[b-3ihypgk395] { margin: 0; font-size: 12.5px; color: var(--mk-gris, #6b7280); }

.mko-fuente textarea[b-3ihypgk395] { width: 100%; resize: vertical; font: inherit; }

.mko-soltar[b-3ihypgk395] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 84px;
    padding: 12px;
    border: 2px dashed var(--mk-acento-borde, #bfdbfe);
    border-radius: var(--mk-radio, 12px);
    background: var(--mk-acento-suave, #eff6ff);
    text-align: center;
    cursor: pointer;
}

.mko-soltar:hover[b-3ihypgk395], .mko-soltar:focus-within[b-3ihypgk395] { border-color: var(--mk-acento, #2563eb); }
.mko-soltar .material-symbols-rounded[b-3ihypgk395] { font-size: 28px; color: var(--mk-acento, #2563eb); }
.mko-soltar strong[b-3ihypgk395] { font-size: 13px; }

/* El <input type=file> lo pinta InputFile (otro componente): cubre toda la zona, invisible. */
.mko-soltar[b-3ihypgk395]  input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mko-dos[b-3ihypgk395] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.mko-dos > div[b-3ihypgk395] { display: flex; flex-direction: column; gap: 8px; }

.mko-quitar[b-3ihypgk395] {
    margin-left: 4px;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--mk-gris, #6b7280);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mko-quitar:hover[b-3ihypgk395] { color: var(--mk-error, #b91c1c); }

.mko-termino[b-3ihypgk395] { width: 110px; min-width: 0; font-size: 12.5px; }

.mko-sub[b-3ihypgk395] {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--mk-gris, #6b7280);
    white-space: normal;
}

.mko-alta[b-3ihypgk395] { align-items: flex-end; flex-wrap: wrap; }

.mko-filtros[b-3ihypgk395] { margin-bottom: 10px; }

.mko-tabla td[b-3ihypgk395] { vertical-align: top; }
.mko-tabla td.mk-num .mko-sub[b-3ihypgk395] { max-width: 220px; text-align: left; }

.mko-cara[b-3ihypgk395] { color: var(--mk-error, #b91c1c); }

.mko-elegida[b-3ihypgk395] { background: var(--mk-ok-fondo, #f0fdf4); }

.mko-decision[b-3ihypgk395] { white-space: nowrap; }
.mko-botones[b-3ihypgk395] { display: inline-flex; gap: 2px; margin-left: 6px; }
.mko-botones .material-symbols-rounded[b-3ihypgk395] { font-size: 16px; }

.mko-total td[b-3ihypgk395] { font-weight: 600; border-top: 2px solid var(--mk-borde, #e5e7eb); }

.mko-pie[b-3ihypgk395] { justify-content: flex-end; }

/* La línea de las directrices de marketing, con su enlace a la pestaña del posicionamiento web. */
.mko-directrices[b-3ihypgk395] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.mko-directrices .material-symbols-rounded[b-3ihypgk395] { font-size: 18px; color: var(--mk-acento, #2563eb); }
.mko-directrices a[b-3ihypgk395] { font-weight: 600; color: var(--mk-acento, #2563eb); }
/* Las directrices abiertas aquí mismo (la pestaña del posicionamiento web, con su estilo propio). */
.mko-directrices-panel[b-3ihypgk395] { margin: 0 0 16px; }

@media (max-width: 1000px) {
    .mko-fuentes[b-3ihypgk395], .mko-dos[b-3ihypgk395] { grid-template-columns: minmax(0, 1fr); }
}

/* «Completar con datos reales» (SEO16): el botón y el pie del panel de la consulta. */
.mko-datos[b-3ihypgk395] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 10px 0;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingParametrosPage.razor.rz.scp.css */
/* Cuentas y supuestos: un índice fijo a la izquierda para saltar entre apartados; los apartados a la derecha. */

.mkp-diseno[b-c8c9i8vgm4] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;   /* el índice, a toda la altura de los apartados */
}

.mkp-indice[b-c8c9i8vgm4] {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: var(--mk-radio, 12px);
    background: var(--mk-superficie, #fff);
}

.mkp-indice button[b-c8c9i8vgm4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--mk-texto-2, #374151);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.mkp-indice button .material-symbols-rounded[b-c8c9i8vgm4] { font-size: 18px; color: var(--mk-gris, #6b7280); }
.mkp-indice button:hover[b-c8c9i8vgm4] { background: var(--mk-acento-suave, #eff6ff); color: var(--mk-acento-fuerte, #1d4ed8); }
.mkp-indice button:hover .material-symbols-rounded[b-c8c9i8vgm4] { color: var(--mk-acento-fuerte, #1d4ed8); }
.mkp-indice button:focus-visible[b-c8c9i8vgm4] { outline: 2px solid var(--mk-acento, #2563eb); outline-offset: 1px; }

.mkp-secciones[b-c8c9i8vgm4] { min-width: 0; }

@media (max-width: 1000px) {
    .mkp-diseno[b-c8c9i8vgm4] { grid-template-columns: minmax(0, 1fr); }
    .mkp-indice[b-c8c9i8vgm4] { position: static; flex-direction: row; flex-wrap: wrap; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/MarketingSimuladorPage.razor.rz.scp.css */
.mks-dos[b-srkxkzstsh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: start;
}

.mks-embudo[b-srkxkzstsh] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.mks-embudo-cab[b-srkxkzstsh] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--mk-texto-2, #374151);
    margin-bottom: 4px;
}

.mks-embudo-cab strong[b-srkxkzstsh] { font-variant-numeric: tabular-nums; }

.mks-embudo progress[b-srkxkzstsh] {
    display: block;
    width: 100%;
    height: 14px;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    appearance: none;
    background: var(--mk-linea-suave, #f1f5f9);
}

.mks-embudo progress[b-srkxkzstsh]::-webkit-progress-bar { background: var(--mk-linea-suave, #f1f5f9); border-radius: 999px; }
.mks-embudo progress[b-srkxkzstsh]::-webkit-progress-value { background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 999px; }
.mks-embudo progress[b-srkxkzstsh]::-moz-progress-bar { background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 999px; }

@media (max-width: 1000px) {
    .mks-dos[b-srkxkzstsh] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/PasosMk.razor.rz.scp.css */
.mkp[b-9t1it1sa60] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    counter-reset: none;
}

.mkp li[b-9t1it1sa60] { display: flex; align-items: center; gap: 8px; }

.mkp li + li[b-9t1it1sa60]::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--mk-linea, #e5e7eb);
}

.mkp-paso[b-9t1it1sa60] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: 999px;
    background: var(--mk-superficie, #fff);
    color: var(--mk-gris, #6b7280);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.mkp-paso:hover[b-9t1it1sa60] { border-color: var(--mk-acento-borde, #bfdbfe); color: var(--mk-acento-fuerte, #1d4ed8); }
.mkp-paso:focus-visible[b-9t1it1sa60] { outline: 2px solid var(--mk-acento, #2563eb); outline-offset: 2px; }

.mkp-paso.actual[b-9t1it1sa60] {
    border-color: var(--mk-acento, #2563eb);
    background: var(--mk-acento-suave, #eff6ff);
    color: var(--mk-acento-fuerte, #1d4ed8);
}

.mkp-num[b-9t1it1sa60] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--mk-gris, #6b7280);
    font-size: 12px;
    font-weight: 800;
}

.mkp-num .material-symbols-rounded[b-9t1it1sa60] { font-size: 15px; }
.mkp-paso.actual .mkp-num[b-9t1it1sa60] { background: var(--mk-acento, #2563eb); color: #fff; }
.mkp-paso.hecho .mkp-num[b-9t1it1sa60] { background: var(--mk-ok-fondo, #f0fdf4); color: var(--mk-ok, #15803d); }

@media (max-width: 700px) {
    .mkp li + li[b-9t1it1sa60]::before { display: none; }
    .mkp-titulo[b-9t1it1sa60] { display: none; }
    .mkp-paso.actual .mkp-titulo[b-9t1it1sa60] { display: inline; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/RecursosCampanaMk.razor.rz.scp.css */
.mkr-resumen[b-yz37v4z45e] {
    margin: -4px 0 12px;
}

.mkr-seccion[b-yz37v4z45e] {
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--mk-linea);
    margin-bottom: 16px;
}

.mkr-seccion:last-child[b-yz37v4z45e] {
    border-bottom: none;
    margin-bottom: 0;
}

.mkr-titulo[b-yz37v4z45e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.mkr-titulo .material-symbols-rounded[b-yz37v4z45e] {
    font-size: 20px;
    color: var(--mk-acento);
}

.mkr-fragmento[b-yz37v4z45e] {
    align-items: flex-end;
    padding: 8px 0;
    border-bottom: 1px dashed var(--mk-linea-suave);
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/SugerenciasIaMk.razor.rz.scp.css */
.mksg-lista[b-lg58asn8gr] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.mksg[b-lg58asn8gr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mk-ia-borde, #ddd6fe);
    border-radius: 10px;
    background: #fff;
}

.mksg.aplicada[b-lg58asn8gr] { opacity: .65; }

.mksg-icono[b-lg58asn8gr] {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--mk-ia, #7c3aed);
    background: var(--mk-ia-fondo, #f5f3ff);
    border-radius: 8px;
    padding: 6px;
}

.mksg-textos[b-lg58asn8gr] { flex: 1 1 auto; min-width: 0; }
.mksg-titulo[b-lg58asn8gr] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: var(--mk-texto, #1f2937); }
.mksg-porque[b-lg58asn8gr] { margin-top: 3px; font-size: 13px; color: var(--mk-texto-2, #374151); line-height: 1.5; }
.mksg-propuesta[b-lg58asn8gr] { margin-top: 4px; font-size: 12.5px; color: var(--mk-gris, #6b7280); }
.mksg-propuesta strong[b-lg58asn8gr] { color: var(--mk-ia, #7c3aed); }
.mksg-acciones[b-lg58asn8gr] { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.mksg-pie[b-lg58asn8gr] { margin: 10px 0 0; }

@media (max-width: 700px) {
    .mksg[b-lg58asn8gr] { flex-wrap: wrap; }
    .mksg-acciones[b-lg58asn8gr] { flex-basis: 100%; justify-content: flex-end; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/TarjetaMk.razor.rz.scp.css */
.mkt[b-hz4a4g8bec] {
    background: var(--mk-superficie, #fff);
    border: 1px solid var(--mk-linea, #e5e7eb);
    border-radius: var(--mk-radio, 12px);
    box-shadow: var(--mk-sombra, none);
    padding: 16px 18px;
    margin-bottom: 16px;
    min-width: 0;
}

.mkt.plana[b-hz4a4g8bec] { box-shadow: none; }
.mkt.destacada[b-hz4a4g8bec] { border-color: var(--mk-acento-borde, #bfdbfe); box-shadow: 0 0 0 3px var(--mk-acento-suave, #eff6ff); }
.mkt.ia[b-hz4a4g8bec] { border-color: var(--mk-ia-borde, #ddd6fe); background: linear-gradient(180deg, var(--mk-ia-fondo, #f5f3ff) 0, #fff 120px); }
.mkt.sin-margen[b-hz4a4g8bec] { margin-bottom: 0; }

.mkt-cabecera[b-hz4a4g8bec] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.mkt-icono[b-hz4a4g8bec] {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--mk-acento-fuerte, #1d4ed8);
    background: var(--mk-acento-suave, #eff6ff);
    border-radius: 8px;
    padding: 6px;
}

.mkt.ia .mkt-icono[b-hz4a4g8bec] { color: var(--mk-ia, #7c3aed); background: #ede9fe; }

.mkt-textos[b-hz4a4g8bec] { flex: 1 1 auto; min-width: 0; }

.mkt-titulo[b-hz4a4g8bec] {
    margin: 2px 0 0;
    font-size: 15.5px;
    font-weight: 750;
    color: var(--mk-texto, #1f2937);
    letter-spacing: -0.01em;
}

.mkt-ayuda[b-hz4a4g8bec] {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--mk-gris, #6b7280);
    line-height: 1.5;
    max-width: 90ch;
}

.mkt-acciones[b-hz4a4g8bec] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .mkt-cabecera[b-hz4a4g8bec] { flex-wrap: wrap; }
    .mkt-acciones[b-hz4a4g8bec] { flex-basis: 100%; justify-content: flex-start; }
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/TopeIaMk.razor.rz.scp.css */
.mktp[b-v12kmnf9pi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #f5d48a;
    background: #fff8e6;
    color: #6b4e00;
    font-size: 0.85rem;
}

.mktp-icono[b-v12kmnf9pi] {
    font-size: 20px;
}

.mktp-texto[b-v12kmnf9pi] {
    flex: 1 1 260px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/UbicacionesMk.razor.rz.scp.css */
.mku-excluida[b-3kaknfqprr] {
    text-decoration: line-through;
    opacity: .75;
}

.mku-ico[b-3kaknfqprr] {
    font-size: 16px;
}

.mku-buscador[b-3kaknfqprr] {
    position: relative;
    margin-top: 10px;
}

.mku-sugerencias[b-3kaknfqprr] {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    border: 1px solid var(--mk-linea);
    border-radius: var(--mk-radio-chico);
    background: var(--mk-superficie);
    max-height: 320px;
    overflow-y: auto;
}

.mku-sugerencias li[b-3kaknfqprr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
}

.mku-sugerencias li:hover[b-3kaknfqprr] {
    background: var(--mk-fondo-suave);
}

.mku-sug-nombre[b-3kaknfqprr] {
    flex: 1 1 auto;
}

.mku-sug-nombre small[b-3kaknfqprr] {
    color: var(--mk-gris);
    margin-left: 6px;
}
/* _content/ErpPowergest/Presentation/Crm/Marketing/VacioMk.razor.rz.scp.css */
.mkv[b-4d90u6e6i1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* centrado también en alto, cuando el marco lo estira hasta abajo */
    text-align: center;
    gap: 6px;
    padding: 40px 20px;
    margin-bottom: 16px;
    border: 1px dashed #d1d5db;
    border-radius: var(--mk-radio, 12px);
    background: var(--mk-fondo-suave, #f8fafc);
}

.mkv.compacto[b-4d90u6e6i1] { padding: 22px 14px; margin-bottom: 0; }

.mkv-icono[b-4d90u6e6i1] {
    font-size: 30px;
    color: var(--mk-acento, #2563eb);
    background: var(--mk-acento-suave, #eff6ff);
    border-radius: 999px;
    padding: 10px;
    margin-bottom: 4px;
}

.mkv.compacto .mkv-icono[b-4d90u6e6i1] { font-size: 22px; padding: 7px; }

.mkv-icono.girando[b-4d90u6e6i1] { animation: mkv-giro-b-4d90u6e6i1 1s linear infinite; }

@keyframes mkv-giro-b-4d90u6e6i1 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mkv-icono.girando[b-4d90u6e6i1] { animation: none; }
}

.mkv-titulo[b-4d90u6e6i1] { font-size: 15px; font-weight: 750; color: var(--mk-texto, #1f2937); }
.mkv-texto[b-4d90u6e6i1] { font-size: 13px; color: var(--mk-gris, #6b7280); max-width: 62ch; line-height: 1.5; }
.mkv-acciones[b-4d90u6e6i1] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
/* _content/ErpPowergest/Presentation/Crm/Pages/BoardDetail.razor.rz.scp.css */
/* ===== BOARD LAYOUT ===== */
.board-view[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    padding: 4px 4px 0;
    background: transparent;
    box-sizing: border-box;
}

/* ===== FONDO DE PANTALLA =====
   El fondo (color, degradado o foto) llega en el style del propio .board-view y ocupa TODA el área de
   contenido: .main-body (MainLayout) tiene 16px de padding, y el margen negativo lo anula para que el
   fondo llegue a los bordes. El alto es el de .main-body entero: la pantalla menos la barra superior
   (64px, como .page-with-toolbar). La cabecera se viste sola (BoardHeader, «tematizada»); aquí solo lo
   que va directamente sobre el fondo. */
.board-view.con-fondo[b-1d5poosvci] {
    margin: -16px;
    height: calc(100vh - 64px);
    padding: 0;
    transition: background 0.25s ease;
}

    .board-view.con-fondo .columns-container[b-1d5poosvci] {
        padding: 0 12px 12px;
    }

    .board-view.con-fondo .forecast-bar[b-1d5poosvci],
    .board-view.con-fondo .forecast-comentario[b-1d5poosvci] {
        margin-left: 14px;
        margin-right: 14px;
    }

    /* Las guías entre columnas, en el tono contrario al fondo. */
    .board-view.tono-oscuro .ico-chevron[b-1d5poosvci] {
        color: rgba(255, 255, 255, 0.8);
    }

    .board-view.tono-oscuro .col-insert-btn:hover[b-1d5poosvci] {
        background: rgba(255, 255, 255, 0.14);
    }

    .board-view.tono-claro .ico-chevron[b-1d5poosvci] {
        color: rgba(9, 30, 66, 0.45);
    }

    .board-view.tono-claro .col-insert-btn:hover[b-1d5poosvci] {
        background: rgba(9, 30, 66, 0.06);
    }

/* ===== HEADER ===== */
.board-header[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.board-info h2[b-1d5poosvci] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
}

.owner-tag[b-1d5poosvci] {
    font-size: 12px;
    color: #64748b;
}

.board-actions[b-1d5poosvci] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===== AVATARS ===== */
.member-avatars[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar[b-1d5poosvci] {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid white;
    transition: transform 0.2s;
    flex-shrink: 0;
}

    .avatar:hover[b-1d5poosvci] {
        transform: scale(1.1);
        z-index: 1;
    }

/* ===== COLUMNAS CONTAINER ===== */
.columns-container[b-1d5poosvci] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

    /* La barra ocupa 15 px SIEMPRE, aunque se vea de 7: el borde transparente con background-clip deja
       pintado solo el centro. Así la zona que se puede clicar y arrastrar es el doble de alta que el
       trazo, sin engordar la barra ni mover el contenido.

       No se hace agrandando la barra en :hover del contenedor: cambiar su altura cambia el alto útil
       del carril, y las columnas darían un salto cada vez que el ratón entra en el tablero. */
    .columns-container[b-1d5poosvci]::-webkit-scrollbar {
        height: 15px;
    }

    .columns-container[b-1d5poosvci]::-webkit-scrollbar-track {
        background: transparent;
    }

    .columns-container[b-1d5poosvci]::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 999px;
        border: 4px solid transparent;
        background-clip: padding-box;
    }

        /* El hover solo oscurece. Engordar el trazo al acercarse se probó y quedaba peor: el agarre ya
           es de 15 px sin acercarse, así que el cambio de grosor no aportaba nada y se veía tosco. */
        .columns-container[b-1d5poosvci]::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }

/* ===== BOTONES GENERALES ===== */
.btn-back[b-1d5poosvci] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

    .btn-back:hover[b-1d5poosvci] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    }

.back-icon[b-1d5poosvci] {
    font-size: 14px;
    font-weight: 600;
}

.btn-primary[b-1d5poosvci], .btn-secondary[b-1d5poosvci] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Color y hover: .btn-azul-crm (app.css). Antes era un degradado con levantamiento propio. */
.btn-primary[b-1d5poosvci] {
    color: white;
}

.btn-secondary[b-1d5poosvci] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

    .btn-secondary:hover[b-1d5poosvci] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-2px);
    }

.btn-icon[b-1d5poosvci] {
    font-size: 14px;
}

/* ===== ETIQUETAS HEADER ===== */
.etiquetas-wrapper[b-1d5poosvci] {
    position: relative;
    display: inline-block;
}

.etiquetas-dropdown[b-1d5poosvci] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.etiquetas-dropdown-title[b-1d5poosvci] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.etiquetas-empty[b-1d5poosvci] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
    padding: 8px 0;
}

.etiquetas-lista[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.etiqueta-fila[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

    .etiqueta-fila:hover[b-1d5poosvci] {
        background: #f8fafc;
    }

.etiqueta-color-dot[b-1d5poosvci] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.etiqueta-nombre[b-1d5poosvci] {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.btn-crear-etiqueta[b-1d5poosvci] {
    width: 100%;
    padding: 8px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-weight: 500;
}

    .btn-crear-etiqueta:hover[b-1d5poosvci] {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #94a3b8;
    }

.etiqueta-form-header[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-volver[b-1d5poosvci] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

    .btn-volver:hover[b-1d5poosvci] {
        background: #f1f5f9;
        color: #1e293b;
    }

.etiqueta-color-label[b-1d5poosvci] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.color-picker-grid[b-1d5poosvci] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.color-swatch[b-1d5poosvci] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

    .color-swatch:hover[b-1d5poosvci] {
        transform: scale(1.15);
        border-color: #1e293b;
    }

    .color-swatch.selected[b-1d5poosvci] {
        border-color: #1e293b;
        transform: scale(1.15);
        box-shadow: 0 0 0 2px white, 0 0 0 4px #1e293b;
    }

.etiqueta-preview[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.btn-editar-etiqueta[b-1d5poosvci] {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}

.etiqueta-fila:hover .btn-editar-etiqueta[b-1d5poosvci] {
    opacity: 1;
    pointer-events: auto;
}

.btn-editar-etiqueta:hover[b-1d5poosvci] {
    background: #e2e8f0;
}

/* ===== NUEVA COLUMNA FORM ===== */
.new-column[b-1d5poosvci] {
    background: #ffffff;
    width: 288px;
    min-width: 288px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.column-input[b-1d5poosvci] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .column-input:focus[b-1d5poosvci] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

/* ===== ZONAS DE INSERCIÓN DE COLUMNA (entre columnas / al final) ===== */
.col-insert[b-1d5poosvci] {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    min-width: 30px;
    transition: width 0.18s ease, min-width 0.18s ease, margin 0.18s ease;
}

    /* El margen lateral es lo que evita que el formulario quede pegado a las columnas vecinas. Sin él
       solo queda el gap de 4 px del carril, y se ve mucho más apretado que el resto del tablero: entre
       dos columnas normales SIEMPRE media el hueco del «+», o sea 4 + 30 + 4 = 38 px de separación,
       que el formulario se come enteros al ocupar ese hueco. */
    .col-insert.active[b-1d5poosvci] {
        width: 274px;
        min-width: 274px;
        margin: 0 12px;
    }

.col-insert-btn[b-1d5poosvci] {
    position: relative;
    width: 100%;
    min-height: 150px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16px;
    transition: background 0.2s ease;
}

    /* Guía de inserción: línea vertical punteada que se "dibuja" de arriba abajo al pasar el ratón,
       marcando el hueco donde entrará la nueva columna. */
    .col-insert-btn[b-1d5poosvci]::before {
        content: '';
        position: absolute;
        top: 14px;
        bottom: 14px;
        width: 2px;
        border-radius: 2px;
        background: repeating-linear-gradient(#93c5fd 0 5px, transparent 5px 10px);
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
        transition: opacity 0.2s ease, transform 0.3s ease;
    }

    .col-insert-btn:hover[b-1d5poosvci] {
        background: rgba(37, 99, 235, 0.04);
    }

        .col-insert-btn:hover[b-1d5poosvci]::before {
            opacity: 1;
            transform: scaleY(1);
        }

/* Al arrastrar una COLUMNA, los huecos entre columnas son zonas de drop (alto completo para acertar
   fácil); NO cambian de ancho (así el tablero no se desplaza), el botón "+" se oculta y solo el hueco
   activo ocupa el tamaño EXACTO de la columna (style inline). */
.col-insert.drop-col[b-1d5poosvci] {
    align-self: stretch;
}

    .col-insert.drop-col .col-insert-btn[b-1d5poosvci] {
        display: none;
    }

.col-insert.drop-col-activa[b-1d5poosvci] {
    width: 72px;   /* lo pisa el style inline con el ancho real de la columna */
    min-width: 72px;
    background: rgba(37, 99, 235, 0.08);
    border: 2px dashed #2563eb;
    border-radius: 12px;
    animation: colDropPulse-b-1d5poosvci 1.3s ease-in-out infinite alternate;
}

@keyframes colDropPulse-b-1d5poosvci {
    from {
        border-color: rgba(37, 99, 235, 0.40);
    }

    to {
        border-color: rgba(37, 99, 235, 0.95);
    }
}

/* Conector tipo "flujo" en reposo (solo entre columnas) */
.ico-chevron[b-1d5poosvci] {
    color: #cbd5e1;
    font-size: 24px;
    transition: opacity 0.18s ease;
}

.col-insert-btn:not(.with-connector) .ico-chevron[b-1d5poosvci] {
    display: none;
}

/* Botón "+" centrado: siempre en el DOM, aparece con un "pop" elástico al pasar el ratón.
   Sin halo/pulso: el contenedor de columnas recorta (overflow) y en los slots de los extremos
   se vería cortado; el "pop" y la guía caben dentro del hueco y quedan limpios también al borde. */
.ico-add[b-1d5poosvci] {
    position: absolute;
    top: 12px;
    left: 50%;
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.30);
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .ico-add .material-symbols-rounded[b-1d5poosvci] {
        font-size: 18px;
    }

.col-insert-btn:hover .ico-chevron[b-1d5poosvci] {
    opacity: 0;
}

.col-insert-btn:hover .ico-add[b-1d5poosvci] {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Formulario de nueva columna dentro del hueco */
.col-insert-form[b-1d5poosvci] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

.form-actions[b-1d5poosvci] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-confirm[b-1d5poosvci] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

    .btn-confirm:hover[b-1d5poosvci] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

.btn-cancel[b-1d5poosvci] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-1d5poosvci] {
        background: #f1f5f9;
        color: #0f172a;
    }

.mas-opciones-wrapper[b-1d5poosvci] {
    position: relative;
    display: inline-block;
}

.mas-opciones-dropdown[b-1d5poosvci] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 200;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mas-opciones-item[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .mas-opciones-item:last-child[b-1d5poosvci] {
        border-bottom: none;
    }

    .mas-opciones-item:hover[b-1d5poosvci] {
        background: #f1f5f9;
        color: #1e293b;
    }

.sub-panel[b-1d5poosvci] {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== MODAL AUTOMATIZACIONES ===== */
.modal-automatizaciones-overlay[b-1d5poosvci] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-automatizaciones-container[b-1d5poosvci] {
    background: #ffffff;
    border-radius: 14px;
    width: 560px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

.modal-automatizaciones-header[b-1d5poosvci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-automatizaciones-title[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .modal-automatizaciones-title .material-symbols-rounded[b-1d5poosvci] {
        font-size: 22px;
        color: #f59e0b;
    }

    .modal-automatizaciones-title h2[b-1d5poosvci] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e293b;
    }

    .modal-automatizaciones-title .subtitle[b-1d5poosvci] {
        font-size: 12px;
        color: #64748b;
        display: block;
        margin-top: 2px;
    }

.modal-automatizaciones-body[b-1d5poosvci] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.automatizacion-paso[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.automatizacion-paso-label[b-1d5poosvci] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-automatizacion-selector[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

    .btn-automatizacion-selector:hover[b-1d5poosvci] {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #1e293b;
    }

    .btn-automatizacion-selector .material-symbols-rounded[b-1d5poosvci] {
        font-size: 18px;
        color: #3b82f6;
    }

.btn-automatizacion-seleccionado[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #3b82f6;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

    .btn-automatizacion-seleccionado:hover[b-1d5poosvci] {
        background: #dbeafe;
    }

    .btn-automatizacion-seleccionado .material-symbols-rounded[b-1d5poosvci] {
        font-size: 18px;
    }

.automatizacion-opciones[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
}

.automatizacion-opcion[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .automatizacion-opcion:hover[b-1d5poosvci] {
        background: #ffffff;
    }

    .automatizacion-opcion.selected[b-1d5poosvci] {
        background: #eff6ff;
    }

    .automatizacion-opcion .material-symbols-rounded[b-1d5poosvci] {
        font-size: 20px;
        color: #3b82f6;
        flex-shrink: 0;
    }

    .automatizacion-opcion .check[b-1d5poosvci] {
        margin-left: auto;
        color: #16a34a;
        font-size: 18px;
    }

.opcion-nombre[b-1d5poosvci] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.opcion-desc[b-1d5poosvci] {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 1px;
}

.automatizacion-conector[b-1d5poosvci] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

    .automatizacion-conector .material-symbols-rounded[b-1d5poosvci] {
        font-size: 20px;
    }

.automatizacion-footer[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.automatizacion-error[b-1d5poosvci] {
    font-size: 12px;
    color: #ef4444;
}

/* ===== LISTA DE AUTOMATIZACIONES EXISTENTES ===== */
.automatizaciones-lista[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 24px 8px;
}

.automatizacion-item[b-1d5poosvci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: opacity 0.2s ease;
}

    .automatizacion-item.inactiva[b-1d5poosvci] {
        opacity: 0.45;
    }

.automatizacion-item-info[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    flex-wrap: wrap;
}

.automatizacion-item-trigger[b-1d5poosvci],
.automatizacion-item-accion[b-1d5poosvci],
.automatizacion-item-columna[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .automatizacion-item-trigger .material-symbols-rounded[b-1d5poosvci],
    .automatizacion-item-accion .material-symbols-rounded[b-1d5poosvci],
    .automatizacion-item-columna .material-symbols-rounded[b-1d5poosvci] {
        font-size: 16px;
        color: #3b82f6;
    }

.automatizacion-item-flecha[b-1d5poosvci] {
    color: #94a3b8;
    font-size: 13px;
}

.automatizacion-item-acciones[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.btn-toggle-automatizacion[b-1d5poosvci],
.btn-eliminar-automatizacion[b-1d5poosvci] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: #94a3b8;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-toggle-automatizacion:hover[b-1d5poosvci],
    .btn-eliminar-automatizacion:hover[b-1d5poosvci] {
        background: #e2e8f0;
        color: #334155;
    }

    .btn-toggle-automatizacion.activa[b-1d5poosvci] {
        color: #22c55e;
    }

        .btn-toggle-automatizacion.activa:hover[b-1d5poosvci] {
            color: #16a34a;
        }

    .btn-toggle-automatizacion .material-symbols-rounded[b-1d5poosvci],
    .btn-eliminar-automatizacion .material-symbols-rounded[b-1d5poosvci] {
        font-size: 20px;
    }

.automatizaciones-separador[b-1d5poosvci] {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 24px 0;
}

.automatizaciones-tabs[b-1d5poosvci] {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
    gap: 4px;
}

.automatizacion-tab[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.automatizacion-tab:hover[b-1d5poosvci] {
    color: #1e293b;
}

.automatizacion-tab.active[b-1d5poosvci] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    font-weight: 600;
}

.tab-badge[b-1d5poosvci] {
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}

.automatizacion-tab.active .tab-badge[b-1d5poosvci] {
    background: #dbeafe;
    color: #2563eb;
}

.automatizaciones-empty[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #94a3b8;
    text-align: center;
}

.automatizaciones-empty .material-symbols-rounded[b-1d5poosvci] {
    font-size: 40px;
    color: #cbd5e1;
}

.automatizaciones-empty p[b-1d5poosvci] {
    margin: 0;
    font-size: 14px;
}

/* ===== POPUP ELEGIR RESPONSABLE AL MOVER ===== */

.pick-overlay[b-1d5poosvci] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    padding: 20px;
}

.pick-responsable[b-1d5poosvci] {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.pick-responsable-header[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4f46e5;
}

    .pick-responsable-header h3[b-1d5poosvci] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #111827;
    }

.pick-responsable-sub[b-1d5poosvci] {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #64748b;
}

.pick-responsable-lista[b-1d5poosvci] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pick-responsable-opcion[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .pick-responsable-opcion:hover[b-1d5poosvci] {
        border-color: #4f46e5;
        background: #eef2ff;
    }

.pick-avatar[b-1d5poosvci] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: #4f46e5;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pick-responsable-omitir[b-1d5poosvci] {
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
}

    .pick-responsable-omitir:hover[b-1d5poosvci] {
        background: #f1f5f9;
        color: #64748b;
    }

/* ===== MODAL INFORMACION DE AUTOMATIZACIONES ===== */

.modal-overlay-informacion[b-1d5poosvci] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

.modal-automatizacion-aviso[b-1d5poosvci] {
    background: #ffffff;
    border-radius: 14px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInUp 0.25s ease;
}

.modal-automatizacion-aviso-header[b-1d5poosvci] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-automatizacion-aviso-body[b-1d5poosvci] {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}


.icon-highlight[b-1d5poosvci] {
    color: #6366f1;
    font-size: 22px;
}

.modal-title[b-1d5poosvci] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-subtitle[b-1d5poosvci] {
    font-size: 0.8rem;
    color: #64748b;
}

.modal-icon-circle[b-1d5poosvci] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-icon-circle span[b-1d5poosvci] {
        font-size: 32px;
        color: #6366f1;
    }

.modal-main-text[b-1d5poosvci] {
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
}

    .btn-close:hover[b-1d5poosvci] {
        color: #1e293b;
    }

/* ===== INVITAR DROPDOWN ===== */
.invitar-wrapper[b-1d5poosvci] {
    position: relative;
    display: inline-block;
}

.invitar-dropdown[b-1d5poosvci] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
}

.invitar-item[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .invitar-item:hover[b-1d5poosvci] {
        background: #f1f5f9;
        color: #1e293b;
    }

    .invitar-item .material-symbols-rounded[b-1d5poosvci] {
        font-size: 16px;
        color: #3b82f6;
    }

.invitar-copiado[b-1d5poosvci] {
    color: #16a34a;
    cursor: default;
    font-weight: 500;
}

    .invitar-copiado .material-symbols-rounded[b-1d5poosvci] {
        color: #16a34a;
    }

.invitar-dropdown[b-1d5poosvci] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(9,30,66,0.15);
    min-width: 220px;
    padding: 8px;
    z-index: 100;
}

.invitar-rol-toggle[b-1d5poosvci] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid #ebecf0;
    margin-bottom: 4px;
}

.invitar-rol-label[b-1d5poosvci] {
    font-size: 0.85rem;
    color: #a5adba;
    font-weight: 500;
    transition: color 0.2s;
}

    .invitar-rol-label.activo[b-1d5poosvci] {
        color: #172b4d;
        font-weight: 600;
    }

.toggle-switch[b-1d5poosvci] {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    padding: 0;
    background: #dfe1e6;
}

    .toggle-switch.on[b-1d5poosvci] {
        background: #0052cc;
    }

.toggle-knob[b-1d5poosvci] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
    display: block;
}

.toggle-switch.on .toggle-knob[b-1d5poosvci] {
    transform: translateX(16px);
}

.invitar-item[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #172b4d;
    text-align: left;
    transition: background 0.15s;
}

    .invitar-item:hover[b-1d5poosvci] {
        background: #f4f5f7;
    }

.invitar-copiado[b-1d5poosvci] {
    color: #00875a;
    font-weight: 500;
}

.invitar-correo-form[b-1d5poosvci] {
    padding: 8px 4px 4px 4px;
    border-top: 1px solid #ebecf0;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invitar-correo-header[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-volver-correo[b-1d5poosvci] {
    background: transparent;
    border: none;
    color: #6b778c;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

    .btn-volver-correo:hover[b-1d5poosvci] {
        background: #ebecf0;
    }

.invitar-correo-title[b-1d5poosvci] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #172b4d;
}

.invitar-correo-input[b-1d5poosvci] {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #dfe1e6;
    border-radius: 4px;
    font-size: 0.88rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

    .invitar-correo-input:focus[b-1d5poosvci] {
        border-color: #4c9aff;
        outline: none;
    }

.invitar-correo-btn[b-1d5poosvci] {
    width: 100%;
    justify-content: center;
}

.invitar-resetear[b-1d5poosvci] {
    border-top: 1px solid #ebecf0;
    margin-top: 4px;
    padding-top: 8px;
    font-size: 0.85rem;
}

    .invitar-resetear:hover[b-1d5poosvci] {
        color: #172b4d;
        background: #ffebe6;
    }

/* ===== Forecast del tablero (IC9) ===== */

/* La barra es una TARJETA que respira entre la cabecera y las columnas, no una franja pegada al
   tablero. Antes solo tenía `border-bottom`, así que quedaba cosida al borde superior de las
   columnas. Ahora lleva marco propio y separación abajo. */
.forecast-bar[b-1d5poosvci] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 2px 16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ebecf0;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #44546f;
}

/* La cabecera deja 30px cuando no hay forecast; con él, se reparte el hueco a ambos lados para que
   la barra quede centrada entre cabecera y columnas (16px arriba / 16px abajo). Si el navegador no
   soporta `:has()`, simplemente se queda el hueco de siempre: la barra sigue sin ir pegada. */
.board-header:has(+ .forecast-bar)[b-1d5poosvci] {
    margin-bottom: 16px;
}

.forecast-icono[b-1d5poosvci] {
    font-size: 18px;
    color: #6366f1;
}

.forecast-dato strong[b-1d5poosvci] {
    color: #172b4d;
    font-weight: 700;
}

.forecast-nota[b-1d5poosvci] {
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff7e6;
    color: #b25e09;
    font-size: 0.75rem;
    font-weight: 600;
}

.forecast-comentar[b-1d5poosvci] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: #fff;
    color: #44546f;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

    .forecast-comentar:hover:not(:disabled)[b-1d5poosvci] {
        background: #f1f2f4;
    }

    .forecast-comentar:disabled[b-1d5poosvci] {
        opacity: 0.6;
        cursor: default;
    }

    .forecast-comentar .material-symbols-rounded[b-1d5poosvci] {
        font-size: 16px;
        color: #6366f1;
    }

/* El comentario de IA va debajo de la barra: se emparejan como dos piezas del mismo bloque (la
   separación con las columnas la pone el de abajo, no cada uno por su cuenta). */
.forecast-bar:has(+ .forecast-comentario)[b-1d5poosvci] {
    margin-bottom: 8px;
}

.forecast-comentario[b-1d5poosvci] {
    margin: 0 2px 16px;
    padding: 10px 16px;
    background: #f8f9fb;
    border: 1px solid #ebecf0;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #172b4d;
    white-space: pre-line;
}

.forecast-no-disponible[b-1d5poosvci] {
    color: #8993a4;
    font-style: italic;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/CalendarioPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
                              CALENDARIO — Estilos
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Página ── */

.calendario-page[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 88px);
    padding: 8px 4px 32px;   /* mismo margen que /crm: pegado al menú lateral y a la barra superior */
    background: linear-gradient(135deg, #f4f6f9, #eef1f6);
    box-sizing: border-box;
    gap: 16px;
}


/* ── Cabecera ── */

/* Patrón común de cabecera (como Diario o Impuestos): título a la izquierda, CommandBar a la derecha y
   SIN flex-wrap. El bloque del título no cede y va en una línea, así la barra ve que falta sitio y pasa
   a solo iconos y luego al «···». Con la barra replegada del todo (command-bar-host-collapsed, la pone
   el script) el bloque se estira y título y filtros envuelven. */
.calendario-header[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex-shrink: 0;
}

.calendario-header > .calendario-header-text[b-9ipinyb67w] {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendario-header.command-bar-host-collapsed > .calendario-header-text[b-9ipinyb67w] {
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.calendario-titulo[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

    .calendario-titulo .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 20px;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 9px;
        padding: 5px;
    }

.calendario-header.command-bar-host-collapsed .calendario-titulo[b-9ipinyb67w] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.calendario-header[b-9ipinyb67w]  .calendario-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}


/* ── Filtros ── */

.calendario-filtros[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ancho fijo para cada dropdown de filtro (el CrmDropdown ocupa el 100% del contenedor). */
/* Ancho de los desplegables DENTRO del panel de filtros: ocupan la caja, que ya está acotada. */
.filtro-dd[b-9ipinyb67w] {
    width: 190px;
}

.filtro-wrapper[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .filtro-wrapper:hover[b-9ipinyb67w] {
        border-color: #cbd5e1;
    }

    .filtro-wrapper:focus-within[b-9ipinyb67w] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

    .filtro-wrapper .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 16px;
        color: #94a3b8;
    }

    .filtro-wrapper select[b-9ipinyb67w] {
        border: none;
        outline: none;
        background: transparent;
        font-size: 13px;
        color: #374151;
        cursor: pointer;
        max-width: 180px;
    }


/* ── Cuerpo / contenedor del calendario ── */

/* Zona principal: calendario a la izquierda + panel de vencimientos a la derecha.
   Al abrir el panel, el calendario se encoge (lo empuja) en lugar de taparlo. */
.calendario-main[b-9ipinyb67w] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
    /* Carril para la pestaña de vencimientos. Ella va fija sobre la ventana, así que el contenido se
       aparta para que NO haya nada debajo: sin esto se le monta encima al calendario y a lo que haya
       en la columna derecha, que es lo que se veía feo. */
    padding-right: 40px;
}

/* Con el panel abierto la pestaña no está, así que el carril sobra y sería un hueco muerto. */
.calendario-main.con-vencimientos[b-9ipinyb67w] {
    padding-right: 0;
}

.calendario-body[b-9ipinyb67w] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.calendario-loading[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #94a3b8;
}

.loading-spin[b-9ipinyb67w] {
    font-size: 28px;
    color: #cbd5e1;
    animation: spin-b-9ipinyb67w 1.2s linear infinite;
}

@keyframes spin-b-9ipinyb67w {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ── Eventos ── */

/* Neutraliza el estilo por defecto de las citas de Syncfusion: así se ve solo nuestra píldora,
   sin el borde/fondo azul del componente alrededor. */
[b-9ipinyb67w] .e-schedule .e-appointment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px;
}

    /* width 100%: sin él, el contenido del template solo ocupa la primera celda de una cita
       multi-día y el resto de la barra queda invisible (el fondo nativo está en transparent). */
    [b-9ipinyb67w] .e-schedule .e-appointment .e-appointment-details {
        padding: 0 !important;
        height: 100%;
        width: 100%;
    }

.cal-evento[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid currentColor;
}

.cal-icono[b-9ipinyb67w] {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.cal-texto[b-9ipinyb67w] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-completada[b-9ipinyb67w] {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Chip de duración en píldoras multi-día ("3 días") */
.cal-evento-dur[b-9ipinyb67w] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.75;
}


/* ── Vista Mes: fila compacta (punto + hora + título) ── */

.cal-fila[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    box-sizing: border-box;
    padding: 2px 6px;
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 5px;
    color: #475569;
    background: #f1f5f9;
}

.cal-fila-dot[b-9ipinyb67w] {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    flex-shrink: 0;
    background: currentColor;
}

.cal-fila-hora[b-9ipinyb67w] {
    font-size: 10.5px;
    color: currentColor;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cal-fila .cal-texto[b-9ipinyb67w] {
    color: inherit;
}

.cal-fila.cal-completada[b-9ipinyb67w] {
    opacity: 0.5;
}

.cal-fila.cal-completada .cal-texto[b-9ipinyb67w] {
    text-decoration: line-through;
}

/* Fondo + color según el tipo (mismos tonos que las píldoras de Semana/Día) */
.cal-fila-llamada[b-9ipinyb67w] { background: #dbeafe; color: #1d4ed8; }
.cal-fila-reunion[b-9ipinyb67w] { background: #dcfce7; color: #15803d; }
.cal-fila-email[b-9ipinyb67w]   { background: #fef9c3; color: #a16207; }
.cal-fila-tarea[b-9ipinyb67w]   { background: #ede9fe; color: #6d28d9; }
.cal-fila-otro[b-9ipinyb67w]    { background: #f1f5f9; color: #475569; }

/* Marcador "⏰ Vence" del día límite de una actividad multi-día */
.cal-vence[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.cal-vence-icono[b-9ipinyb67w] {
    font-size: 13px;
    flex-shrink: 0;
}

.cal-vence.cal-completada[b-9ipinyb67w] {
    opacity: 0.45;
    text-decoration: line-through;
}

/* ── Vencimiento de una TAREA del tablero (tarjeta): píldora violeta con icono kanban, para
   distinguirla a simple vista de las actividades y del marcador ámbar "Vence". ── */
.cal-tarea[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.cal-tarea-icono[b-9ipinyb67w] {
    font-size: 13px;
    flex-shrink: 0;
}

.cal-tarea .cal-texto[b-9ipinyb67w] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-tarea.cal-completada[b-9ipinyb67w] {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Tarea del gestor común (capa externa, plan T): verde azulado, para no confundirla con la tarjeta. */
.cal-tarea.cal-tarea-externa[b-9ipinyb67w] {
    background: #f0fdfa;
    color: #0f766e;
    border-color: #99f6e4;
}

.cal-evento-externa[b-9ipinyb67w] {
    background: #ccfbf1;
    color: #0f766e;
}

/* Toggle "Tareas" en la cabecera: muestra u oculta los vencimientos de tarjeta en la rejilla. */
.cal-toggle-tareas[b-9ipinyb67w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cal-toggle-tareas .material-symbols-rounded[b-9ipinyb67w] {
    font-size: 17px;
}

.cal-toggle-tareas input[b-9ipinyb67w] {
    accent-color: #7c3aed;
    cursor: pointer;
}

.cal-toggle-tareas.on[b-9ipinyb67w] {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}

/* ── Vista Mes estilo Google Calendar ──
   Hasta 3 píldoras arrastrables por día + "+N más" (popup nativo). Las citas nativas se ven,
   solo neutralizamos su fondo para que se vea nuestra fila compacta. */
[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment {
    height: 22px !important;
}

/* La píldora ocupa algo menos que su hueco → ~1,5 px de aire arriba y abajo. */
[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment .cal-fila {
    height: calc(100% - 3px);
    margin-top: 1.5px;
}

/* En Mes NO se muestra el tirador de redimensionar (no aporta aquí); en Semana/Día sí. */
[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment .e-resize-handler,
[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment .e-left-handler,
[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment .e-right-handler {
    display: none !important;
}

/* Al seleccionar varios días arrastrando, las celdas se tiñen de azul (feedback de selección). */
[b-9ipinyb67w] .e-schedule .e-month-view .e-selected-cell {
    background: #dbeafe !important;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

[b-9ipinyb67w] .e-schedule .e-month-view .e-appointment:hover .cal-fila {
    filter: brightness(0.96);
}

/* Indicador "+N más" */
[b-9ipinyb67w] .e-schedule .e-month-view .e-more-indicator {
    color: #2563eb !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 4px;
    border-radius: 4px;
}

    [b-9ipinyb67w] .e-schedule .e-month-view .e-more-indicator:hover {
        background: #eff6ff;
    }

/* ── Popup "+N más": alto/ancho fijos + scroll vertical ── */
[b-9ipinyb67w] .e-schedule .e-more-popup-wrapper {
    width: 300px !important;
    max-width: 300px !important;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    border: 1px solid #e2e8f0;
}

/* Al empezar a arrastrar, Syncfusion marca la raíz con .e-event-action: ocultamos el popup
   para que no estorbe y se pueda soltar la actividad en cualquier día, incluido el de origen. */
[b-9ipinyb67w] .e-schedule.e-event-action .e-more-popup-wrapper {
    display: none !important;
}

    /* Lista de eventos del popup: UNA sola barra de scroll (la exterior, pegada al borde). */
    [b-9ipinyb67w] .e-schedule .e-more-popup-wrapper .e-more-appointment-wrapper {
        max-height: 260px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

        [b-9ipinyb67w] .e-schedule .e-more-popup-wrapper .e-more-appointment-wrapper::-webkit-scrollbar {
            width: 6px;
        }

        [b-9ipinyb67w] .e-schedule .e-more-popup-wrapper .e-more-appointment-wrapper::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

    /* Se anula el scroll interior nativo (con flechas) para no tener dos barras. */
    [b-9ipinyb67w] .e-schedule .e-more-popup-wrapper .e-more-event-content {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    [b-9ipinyb67w] .e-schedule .e-more-popup-wrapper .e-appointment {
        height: 26px !important;
        margin: 2px 0;
    }

/* ── Clon de arrastre: se muestra la etiqueta en gris mientras se mueve ── */
[b-9ipinyb67w] .e-schedule .e-clone-appointment,
[b-9ipinyb67w] .e-schedule .e-drag-clone,
[b-9ipinyb67w] .e-schedule .e-appointment.e-cloned-item {
    opacity: 0.85 !important;
    background: #e2e8f0 !important;
    border: 1px dashed #94a3b8 !important;
    border-radius: 6px !important;
}

    [b-9ipinyb67w] .e-schedule .e-clone-appointment .cal-fila,
    [b-9ipinyb67w] .e-schedule .e-drag-clone .cal-fila {
        color: #475569 !important;
        background: transparent !important;
    }

    [b-9ipinyb67w] .e-schedule .e-clone-appointment .cal-fila-dot,
    [b-9ipinyb67w] .e-schedule .e-drag-clone .cal-fila-dot {
        background: #94a3b8 !important;
    }

/* Colores por tipo */
.cal-evento-llamada[b-9ipinyb67w] {
    background: #dbeafe;
    color: #1d4ed8;
}

.cal-evento-reunion[b-9ipinyb67w] {
    background: #dcfce7;
    color: #15803d;
}

.cal-evento-email[b-9ipinyb67w] {
    background: #fef9c3;
    color: #a16207;
}

.cal-evento-tarea[b-9ipinyb67w] {
    background: #ede9fe;
    color: #6d28d9;
}

.cal-evento-otro[b-9ipinyb67w] {
    background: #f1f5f9;
    color: #475569;
}

/* Tarea del tablero (tarjeta): violeta algo más saturado que el de la categoría "Tarea" de actividad. */
.cal-evento-tarjeta[b-9ipinyb67w] {
    background: #ddd6fe;
    color: #5b21b6;
}


/* ── Popup (quick info) ── */

/* ── Popup del aviso de la campana ──────────────────────────────────────────────────────────────
   Mismo contenido que el popup del chip (comparten fragmentos), pero es NUESTRO contenedor: se
   coloca en coordenadas de ventana junto al chip, con la capa que lo cierra al pulsar fuera. */
.cal-avisopop-capa[b-9ipinyb67w] {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.cal-avisopop[b-9ipinyb67w] {
    position: fixed;
    z-index: 1201;
    width: 320px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,.18);
    overflow: hidden;
}

.cal-avisopop-cerrar[b-9ipinyb67w] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.cal-avisopop-cerrar:hover[b-9ipinyb67w] {
    background: rgba(15,23,42,.06);
}

.cal-avisopop .cal-popup-header[b-9ipinyb67w] {
    padding-right: 38px; /* deja sitio al aspa */
}

.cal-popup-header[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 15px;
}

.cal-popup-icono[b-9ipinyb67w] {
    font-size: 18px;
    color: #3b82f6;
    flex-shrink: 0;
}

.cal-popup-body[b-9ipinyb67w] {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.cal-popup-row[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary, #555);
}

.cal-popup-icon[b-9ipinyb67w] {
    font-size: 16px;
    opacity: 0.6;
}

.cal-popup-badge.completada[b-9ipinyb67w] {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #d1fae5;
    color: #065f46;
    font-weight: 500;
}

.cal-popup-footer[b-9ipinyb67w] {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.cal-popup-btn-contacto[b-9ipinyb67w],
.cal-popup-btn-editar[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
}

    .cal-popup-btn-contacto:hover[b-9ipinyb67w],
    .cal-popup-btn-editar:hover[b-9ipinyb67w] {
        background: rgba(0,0,0,0.05);
    }

    .cal-popup-btn-contacto .material-symbols-rounded[b-9ipinyb67w],
    .cal-popup-btn-editar .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 16px;
    }


/* ── Modal (overlay + contenedor) ── */

.cal-modal-overlay[b-9ipinyb67w] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-9ipinyb67w 0.15s ease;
}

@keyframes fadeIn-b-9ipinyb67w {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cal-modal[b-9ipinyb67w] {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-9ipinyb67w 0.18s ease;
}

@keyframes slideUp-b-9ipinyb67w {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ── Panel detalle del día (cajón lateral) ── */

.cal-overlay-drawer[b-9ipinyb67w] {
    justify-content: flex-end;
    align-items: stretch;
}

.cal-drawer[b-9ipinyb67w] {
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    height: 100%;
    box-shadow: -8px 0 32px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    animation: slideLeft-b-9ipinyb67w 0.2s ease;
}

@keyframes slideLeft-b-9ipinyb67w {
    from {
        transform: translateX(24px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.cal-drawer-header[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.cal-drawer-icono[b-9ipinyb67w] {
    font-size: 20px;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 9px;
    padding: 6px;
    flex-shrink: 0;
}

.cal-drawer-titulos[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cal-drawer-titulo[b-9ipinyb67w] {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
}

.cal-drawer-sub[b-9ipinyb67w] {
    font-size: 12px;
    color: #94a3b8;
}

.cal-drawer-header .cal-modal-close[b-9ipinyb67w] {
    margin-left: auto;
}

.cal-drawer-body[b-9ipinyb67w] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Item de actividad del día */
.cal-dia-item[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fdfdfe;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .cal-dia-item:hover[b-9ipinyb67w] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .cal-dia-item.hecha .cal-dia-titulo[b-9ipinyb67w] {
        text-decoration: line-through;
        opacity: 0.55;
    }

.cal-dia-check[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 99px;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.1s;
}

    .cal-dia-check:hover[b-9ipinyb67w] {
        color: #10b981;
        transform: scale(1.1);
    }

    .cal-dia-check .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 20px;
    }

.cal-dia-item.hecha .cal-dia-check[b-9ipinyb67w] {
    color: #10b981;
}

.cal-dia-tipo[b-9ipinyb67w] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-left: none;
}

    .cal-dia-tipo .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 15px;
    }

.cal-dia-info[b-9ipinyb67w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-dia-titulo[b-9ipinyb67w] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-dia-meta[b-9ipinyb67w] {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.cal-dia-acciones[b-9ipinyb67w] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.cal-dia-item:hover .cal-dia-acciones[b-9ipinyb67w] {
    opacity: 1;
}

.cal-dia-acciones button[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

    .cal-dia-acciones button:hover[b-9ipinyb67w] {
        background: #f1f5f9;
        color: #2563eb;
    }

    .cal-dia-acciones button .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 16px;
    }

/* Botón nueva actividad del día */
.cal-dia-nueva[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 9px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .cal-dia-nueva:hover[b-9ipinyb67w] {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .cal-dia-nueva .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 17px;
    }


/* ── Panel del día: herramientas (buscar / agrupar / ocultar) ── */

.cal-dia-tools[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: #fbfcfe;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* Composición del día: un chip por categoría con su color + recuento */
.cal-dia-comp[b-9ipinyb67w] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cal-dia-chip[b-9ipinyb67w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
    border-left: none;
}

    .cal-dia-chip .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 14px;
    }

.cal-dia-buscar[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .cal-dia-buscar:focus-within[b-9ipinyb67w] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

    .cal-dia-buscar .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 17px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .cal-dia-buscar input[b-9ipinyb67w] {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 12.5px;
        color: #1e293b;
        min-width: 0;
    }

    .cal-dia-buscar input[b-9ipinyb67w]::placeholder {
        color: #94a3b8;
    }

.cal-dia-tools-row[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #64748b;
}

.cal-dia-tools-lbl[b-9ipinyb67w] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    color: #94a3b8;
}

.cal-dia-grupbtns[b-9ipinyb67w] {
    display: flex;
    background: #f1f5f9;
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
}

    .cal-dia-grupbtns button[b-9ipinyb67w] {
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        padding: 3px 9px;
        border-radius: 5px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
    }

        .cal-dia-grupbtns button:hover[b-9ipinyb67w] {
            color: #334155;
        }

        .cal-dia-grupbtns button.on[b-9ipinyb67w] {
            background: #ffffff;
            color: #2563eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

.cal-dia-switch[b-9ipinyb67w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .cal-dia-switch input[b-9ipinyb67w] {
        accent-color: #3b82f6;
        width: 14px;
        height: 14px;
        cursor: pointer;
    }


/* ── Panel del día: grupos colapsables ── */

.cal-dia-grupo[b-9ipinyb67w] {
    margin-bottom: 6px;
}

.cal-dia-grupo-head[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.12s;
}

    .cal-dia-grupo-head:hover[b-9ipinyb67w] {
        background: #f1f5f9;
    }

.cal-dia-grupo-chev[b-9ipinyb67w] {
    font-size: 18px;
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.cal-dia-grupo.cerrado .cal-dia-grupo-chev[b-9ipinyb67w] {
    transform: rotate(-90deg);
}

.cal-dia-grupo-nom[b-9ipinyb67w] {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-dia-grupo-count[b-9ipinyb67w] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    padding: 0 7px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cal-dia-grupo-items[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 2px 2px;
}

.cal-dia-vacio[b-9ipinyb67w] {
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 22px 10px;
}


/* ── Modal — cabecera ── */

.cal-modal-header[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

    .cal-modal-header .material-symbols-rounded:first-child[b-9ipinyb67w] {
        font-size: 20px;
        color: #3b82f6;
    }

.cal-modal-close[b-9ipinyb67w] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #94a3b8;
    transition: background 0.12s, color 0.12s;
}

    .cal-modal-close:hover[b-9ipinyb67w] {
        background: #f1f5f9;
        color: #475569;
    }

    .cal-modal-close .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 18px;
    }


/* ── Modal — cuerpo y campos ── */

.cal-modal-body[b-9ipinyb67w] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cal-form-field[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-field-label[b-9ipinyb67w] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Lo que pasa si se deja vacío el contacto: un recordatorio, no una actividad de nadie. */
.cal-field-pista[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

    .cal-field-pista .material-symbols-rounded[b-9ipinyb67w] { font-size: 15px; }

/* Los interruptores de capa, uno al lado del otro. */
.cal-capas[b-9ipinyb67w] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cal-field-wrapper[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

    .cal-field-wrapper:hover[b-9ipinyb67w] {
        border-color: #cbd5e1;
    }

    .cal-field-wrapper:focus-within[b-9ipinyb67w] {
        border-color: #3b82f6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

    .cal-field-wrapper .cal-field-icon[b-9ipinyb67w] {
        font-size: 15px;
        color: #94a3b8;
        flex-shrink: 0;
        transition: color 0.15s;
    }

    .cal-field-wrapper:focus-within .cal-field-icon[b-9ipinyb67w] {
        color: #3b82f6;
    }

    .cal-field-wrapper input[b-9ipinyb67w],
    .cal-field-wrapper select[b-9ipinyb67w] {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        font-size: 13px;
        color: #1e293b;
        height: 100%;
        min-width: 0;
    }

    .cal-field-wrapper select[b-9ipinyb67w] {
        cursor: pointer;
    }

    .cal-field-wrapper input[b-9ipinyb67w]::placeholder {
        color: #94a3b8;
    }

    /* Textarea */
    .cal-field-wrapper.cal-field-wrapper--textarea[b-9ipinyb67w] {
        height: auto;
        align-items: flex-start;
        padding: 8px 10px;
    }

        .cal-field-wrapper.cal-field-wrapper--textarea .cal-field-icon[b-9ipinyb67w] {
            margin-top: 2px;
        }

    .cal-field-wrapper textarea[b-9ipinyb67w] {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        font-size: 13px;
        color: #1e293b;
        min-width: 0;
        resize: vertical;
        min-height: 64px;
        line-height: 1.5;
        font-family: inherit;
        padding: 0;
    }

        .cal-field-wrapper textarea[b-9ipinyb67w]::placeholder {
            color: #94a3b8;
        }

/* Fila tipo + todo el día */
.cal-modal-body .actividad-form-row[b-9ipinyb67w] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

    .cal-modal-body .actividad-form-row .cal-form-field[b-9ipinyb67w] {
        flex: 1;
    }

.cal-todoDia-label[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    padding-bottom: 1px;
}

    .cal-todoDia-label input[type="checkbox"][b-9ipinyb67w] {
        width: 14px;
        height: 14px;
        accent-color: #3b82f6;
        cursor: pointer;
    }

/* Fila de fechas */
.cal-modal-body .actividad-form-field[b-9ipinyb67w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Error */
.cal-form-error[b-9ipinyb67w] {
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
    padding: 6px 10px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}


/* ── Panel tipos de actividad ── */

.cal-tipos-section[b-9ipinyb67w] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    /* visible (no hidden): así el panel del desplegable de categorías del formulario
       "Nuevo tipo" no queda recortado por esta caja y se ven todas las opciones. */
    overflow: visible;
    background: #f8fafc;
}

.cal-tipos-toggle[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    /* Redondeo propio del botón: al quitar el overflow:hidden de la sección, el fondo
       del hover debe respetar las esquinas superiores redondeadas. */
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
    transition: background 0.15s ease;
}

    .cal-tipos-toggle:hover[b-9ipinyb67w] {
        background: #f1f5f9;
        color: #334155;
    }

.cal-tipos-chevron[b-9ipinyb67w] {
    font-size: 16px;
    margin-left: auto;
    transition: transform 0.2s ease;
}

    .cal-tipos-chevron.abierto[b-9ipinyb67w] {
        transform: rotate(180deg);
    }

.cal-tipos-body[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 10px 10px;
    border-top: 1px solid #e2e8f0;
}

.cal-tipo-item[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 13px;
}

.cal-tipo-icono[b-9ipinyb67w] {
    font-size: 15px;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #475569;
    border-radius: 6px;
}

.cal-tipo-nombre[b-9ipinyb67w] {
    flex: 1;
    font-weight: 500;
    color: #334155;
}

.cal-tipo-cat[b-9ipinyb67w] {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 20px;
}

.cal-tipo-delete[b-9ipinyb67w] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all 0.15s ease;
}

    .cal-tipo-delete .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 15px;
    }

.cal-tipo-item:hover .cal-tipo-delete[b-9ipinyb67w] {
    opacity: 1;
    color: #ef4444;
}

.cal-tipos-aviso[b-9ipinyb67w] {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 6px 0;
    display: block;
}

.cal-tipo-form[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding: 8px;
    background: #f1f5f9;
    border-radius: 6px;
}

.cal-tipo-input[b-9ipinyb67w],
.cal-tipo-select[b-9ipinyb67w] {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

    .cal-tipo-input:focus[b-9ipinyb67w],
    .cal-tipo-select:focus[b-9ipinyb67w] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

/* Solo donde el navegador no sabe pintar la lista de un <select> (Firefox, Safari): en Chrome/Edge el control y su
   lista los pone css/desplegables.css, y este `appearance: none` se lo impediría. */
@supports not (appearance: base-select) {

/* Selects con chevron propio: quitamos la flecha nativa para un aspecto consistente. */
.filtro-wrapper select[b-9ipinyb67w],
.cal-field-wrapper select[b-9ipinyb67w],
.cal-tipo-select[b-9ipinyb67w] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 500;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 24px;
}

    /* El chevron se marca (azul) cuando el control está enfocado. */
    .filtro-wrapper:focus-within select[b-9ipinyb67w],
    .cal-field-wrapper:focus-within select[b-9ipinyb67w] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }

/* Estilo de las opciones desplegadas. Soportado en Firefox y (parcialmente) en Chromium; en
   Chrome/Edge sobre Windows la lista la pinta el menú del sistema y lo ignora. */
.filtro-wrapper select option[b-9ipinyb67w],
.cal-field-wrapper select option[b-9ipinyb67w],
.cal-tipo-select option[b-9ipinyb67w] {
    background-color: #ffffff;
    color: #1e293b;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
}

.filtro-wrapper select option:hover[b-9ipinyb67w],
.cal-field-wrapper select option:hover[b-9ipinyb67w],
.cal-tipo-select option:hover[b-9ipinyb67w] {
    background-color: #f1f5f9;
}

.filtro-wrapper select option:checked[b-9ipinyb67w],
.cal-field-wrapper select option:checked[b-9ipinyb67w],
.cal-tipo-select option:checked[b-9ipinyb67w] {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

}

.cal-tipo-form-actions[b-9ipinyb67w] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cal-tipo-add-btn[b-9ipinyb67w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .cal-tipo-add-btn:hover[b-9ipinyb67w] {
        background: #eff6ff;
    }

    .cal-tipo-add-btn .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 15px;
    }


/* ── Modal — pie ── */

.cal-modal-footer[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid #e2e8f0;
}


/* ═══════════════════════════════════════════════════════════════════════════
                     PANEL LATERAL DE VENCIMIENTOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botón lateral (pestaña en el borde derecho) */
/* Pestaña lateral de vencimientos. Va CENTRADA en la ventana y no a una altura fija: con un `top`
   en píxeles acababa pisando la cabecera —basta que suba un poco, o que aparezca el aviso de datos
   de ejemplo, para que se solapen— y el número correcto cambiaba con cada retoque del margen. */
.venc-btn[b-9ipinyb67w] {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 10px 0 0 10px;
    padding: 13px 8px;
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(37,99,235,0.3);
    transition: background 0.15s;
}

    .venc-btn:hover[b-9ipinyb67w] {
        background: #2563eb;
    }

    .venc-btn .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 20px;
    }

.venc-btn-lbl[b-9ipinyb67w] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Panel: en el flujo (a la derecha del calendario), como una tarjeta más; empuja el calendario. */
.venc-panel[b-9ipinyb67w] {
    width: 340px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn-b-9ipinyb67w 0.15s ease;
}

.venc-head[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.venc-head-ico[b-9ipinyb67w] {
    font-size: 20px;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 9px;
    padding: 6px;
    flex-shrink: 0;
}

.venc-head-tit[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .venc-head-tit .t[b-9ipinyb67w] {
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
    }

    .venc-head-tit .s[b-9ipinyb67w] {
        font-size: 11.5px;
        color: #94a3b8;
    }

.venc-head .cal-modal-close[b-9ipinyb67w] {
    margin-left: auto;
}

/* Herramientas / filtros */
.venc-tools[b-9ipinyb67w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: #fbfcfe;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.venc-filtros[b-9ipinyb67w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    /* El responsable ocupa la fila completa; tipo y horizonte comparten la siguiente. */
    .venc-filtros > :first-child[b-9ipinyb67w] {
        grid-column: 1 / -1;
    }

/* Cuerpo con scroll */
.venc-body[b-9ipinyb67w] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px 16px;
}

.venc-vacio[b-9ipinyb67w] {
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 26px 10px;
}

/* Grupos (Atrasadas / Hoy / Próximas) */
.venc-grupo[b-9ipinyb67w] {
    margin-top: 12px;
}

.venc-grupo-head[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b; /* por defecto gris (Esta semana / Próxima semana / Más adelante) */
}

.venc-grupo-cnt[b-9ipinyb67w] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 0 7px;
    font-variant-numeric: tabular-nums;
    background: #f1f5f9;
    color: #64748b;
}

/* Atrasadas en rojo, Hoy en azul; el resto de grupos usan el gris por defecto. */
.venc-atrasadas .venc-grupo-head[b-9ipinyb67w] { color: #dc2626; }
.venc-atrasadas .venc-grupo-cnt[b-9ipinyb67w]  { background: #fef2f2; color: #dc2626; }
.venc-hoy .venc-grupo-head[b-9ipinyb67w]       { color: #2563eb; }
.venc-hoy .venc-grupo-cnt[b-9ipinyb67w]        { background: #eff6ff; color: #2563eb; }

/* Ítem */
.venc-item[b-9ipinyb67w] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fdfdfe;
    margin-bottom: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .venc-item:hover[b-9ipinyb67w] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

.venc-item .cal-dia-check[b-9ipinyb67w] {
    margin-top: 1px;
}

.venc-item-info[b-9ipinyb67w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.venc-item-tit[b-9ipinyb67w] {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venc-item-meta[b-9ipinyb67w] {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.venc-fecha[b-9ipinyb67w] {
    font-weight: 700;
    color: #475569;
}

.venc-atrasadas .venc-fecha[b-9ipinyb67w] {
    color: #dc2626;
}

.venc-tag[b-9ipinyb67w] {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 99px;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.venc-item .cal-dia-acciones[b-9ipinyb67w] {
    opacity: 0;
}

.venc-item:hover .cal-dia-acciones[b-9ipinyb67w] {
    opacity: 1;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/ContactoFicha.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
                            CONTACTO FICHA — Estilos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Página ── */

.ficha-page[b-5oeq3rz1ar] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 88px);
    padding: 8px 4px 32px;   /* mismo margen que el resto del CRM */
    background: linear-gradient(135deg, #f4f6f9, #eef1f6);
    box-sizing: border-box;
    gap: 16px;
}

.ficha-loading[b-5oeq3rz1ar] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 88px);
    gap: 10px;
    color: #94a3b8;
    font-size: 14px;
}

.loading-spin[b-5oeq3rz1ar] {
    font-size: 28px;
    color: #cbd5e1;
    animation: spin-b-5oeq3rz1ar 1.2s linear infinite;
}

@keyframes spin-b-5oeq3rz1ar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Header ── */

[b-5oeq3rz1ar] .ficha-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(16,24,40,0.05);
    position: relative;
}

    /* Franja de acento superior del hero (sin overflow:hidden para no recortar el dropdown de estado). */
    [b-5oeq3rz1ar] .ficha-header::before {
        content: '';
        position: absolute;
        top: 0;
        /* Metida hacia dentro para no asomar por las esquinas redondeadas de la tarjeta
           (no se usa overflow:hidden para no recortar el dropdown de estado). */
        left: 16px;
        right: 16px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    }

[b-5oeq3rz1ar] .btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    [b-5oeq3rz1ar] .btn-volver:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .btn-volver .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .ficha-header-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

[b-5oeq3rz1ar] .ficha-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16,24,40,0.18);
}

/* Paleta estable por contacto (misma que el listado). Van después para ganar al degradado base. */
[b-5oeq3rz1ar] .avatar-c1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
[b-5oeq3rz1ar] .avatar-c2 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
[b-5oeq3rz1ar] .avatar-c3 { background: linear-gradient(135deg, #ec4899, #db2777); }
[b-5oeq3rz1ar] .avatar-c4 { background: linear-gradient(135deg, #f59e0b, #d97706); }
[b-5oeq3rz1ar] .avatar-c5 { background: linear-gradient(135deg, #10b981, #059669); }
[b-5oeq3rz1ar] .avatar-c6 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
[b-5oeq3rz1ar] .avatar-c7 { background: linear-gradient(135deg, #f43f5e, #e11d48); }
[b-5oeq3rz1ar] .avatar-c8 { background: linear-gradient(135deg, #64748b, #475569); }

/* Botón secundario (Convertir a cliente / Cliente vinculado): estilado como botón real, no texto suelto. */
[b-5oeq3rz1ar] .btn-secundario {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}

    [b-5oeq3rz1ar] .btn-secundario:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .btn-secundario:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* Botón destructivo (Eliminar contacto): discreto en reposo, rojo al pasar por encima. */
[b-5oeq3rz1ar] .btn-peligro {
    padding: 6px 10px;
    color: #b91c1c;
}

    [b-5oeq3rz1ar] .btn-peligro:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #fecaca;
    }

[b-5oeq3rz1ar] .btn-peligro-solido {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #ffffff;
}

    [b-5oeq3rz1ar] .btn-peligro-solido:hover:not(:disabled) {
        background: #b91c1c;
        border-color: #b91c1c;
    }

    [b-5oeq3rz1ar] .btn-peligro-solido:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* ── Modal de confirmación ── */

[b-5oeq3rz1ar] .ficha-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

[b-5oeq3rz1ar] .ficha-modal {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

[b-5oeq3rz1ar] .ficha-modal-titulo {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

[b-5oeq3rz1ar] .ficha-modal-texto {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

[b-5oeq3rz1ar] .ficha-modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

[b-5oeq3rz1ar] .ficha-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 12px 0 4px;
}

[b-5oeq3rz1ar] .ficha-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    resize: vertical;
}

[b-5oeq3rz1ar] .descarte-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    [b-5oeq3rz1ar] .descarte-chip .material-symbols-rounded {
        font-size: 15px;
    }

/* ── Pestañas ── */

.ficha-tabs[b-5oeq3rz1ar] {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.ficha-tab[b-5oeq3rz1ar] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .ficha-tab:hover[b-5oeq3rz1ar] {
        color: #334155;
    }

    .ficha-tab.activa[b-5oeq3rz1ar] {
        color: #2563eb;
        border-bottom-color: #2563eb;
    }

    [b-5oeq3rz1ar] .ficha-tab .material-symbols-rounded {
        font-size: 18px;
    }

/* ── Etiquetas ── */

[b-5oeq3rz1ar] .etiquetas-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

[b-5oeq3rz1ar] .etiqueta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
}

[b-5oeq3rz1ar] .etiqueta-quitar {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
}

    [b-5oeq3rz1ar] .etiqueta-quitar:hover {
        opacity: 1;
    }

[b-5oeq3rz1ar] .etiqueta-anadir {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    [b-5oeq3rz1ar] .etiqueta-anadir:hover {
        border-color: #94a3b8;
        color: #334155;
    }

    [b-5oeq3rz1ar] .etiqueta-anadir .material-symbols-rounded {
        font-size: 14px;
    }

[b-5oeq3rz1ar] .etiqueta-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-5oeq3rz1ar] .etiqueta-colores {
    display: inline-flex;
    gap: 4px;
}

[b-5oeq3rz1ar] .etiqueta-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

    [b-5oeq3rz1ar] .etiqueta-color.activo {
        border-color: #0f172a;
    }

/* ── Prioridad (cabecera): mismo tamaño con o sin prioridad, para que no salte al cambiar ── */
[b-5oeq3rz1ar] .prioridad-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px 3px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
}

    [b-5oeq3rz1ar] .prioridad-chip:hover {
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .prioridad-chip .material-symbols-rounded {
        font-size: 16px;
    }

/* ── Direcciones ── */

[b-5oeq3rz1ar] .direccion-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

[b-5oeq3rz1ar] .direccion-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-5oeq3rz1ar] .direccion-tipo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

[b-5oeq3rz1ar] .direccion-linea {
    font-size: 13px;
    color: #1e293b;
    word-break: break-word;
}

[b-5oeq3rz1ar] .direccion-acciones {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .btn-icono {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    color: #64748b;
    display: inline-flex;
}

    [b-5oeq3rz1ar] .btn-icono:hover {
        background: #f1f5f9;
        color: #334155;
    }

    [b-5oeq3rz1ar] .btn-icono .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .btn-icono-peligro:hover {
    background: #fef2f2;
    color: #b91c1c;
}

[b-5oeq3rz1ar] .direccion-form {
    padding: 8px 0;
}

[b-5oeq3rz1ar] .direccion-form-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

[b-5oeq3rz1ar] .direccion-form-acciones {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

[b-5oeq3rz1ar] .ficha-nombre {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

[b-5oeq3rz1ar] .ficha-subtitulo {
    font-size: 13px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

[b-5oeq3rz1ar] .ficha-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Selector de estado ── */

[b-5oeq3rz1ar] .estado-selector-wrapper {
    position: relative;
}

[b-5oeq3rz1ar] .estado-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    [b-5oeq3rz1ar] .estado-btn .material-symbols-rounded {
        font-size: 16px;
    }

/* Colores por estado — botón */
[b-5oeq3rz1ar] .estado-nuevo {
    background: #f1f5f9;
    color: #64748b;
}

[b-5oeq3rz1ar] .estado-contactado {
    background: #fef9c3;
    color: #ca8a04;
}

[b-5oeq3rz1ar] .estado-cualificado {
    background: #dbeafe;
    color: #2563eb;
}

[b-5oeq3rz1ar] .estado-cliente {
    background: #dcfce7;
    color: #16a34a;
}

[b-5oeq3rz1ar] .estado-descartado {
    background: #fee2e2;
    color: #dc2626;
}

[b-5oeq3rz1ar] .estado-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 300;
    overflow: hidden;
}

[b-5oeq3rz1ar] .estado-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    [b-5oeq3rz1ar] .estado-opcion:hover {
        background: #f8fafc;
    }

    [b-5oeq3rz1ar] .estado-opcion.activo {
        background: #eff6ff;
        font-weight: 600;
        color: #1e40af;
    }

[b-5oeq3rz1ar] .estado-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    /* Colores por estado — punto */
    [b-5oeq3rz1ar] .estado-dot.estado-nuevo {
        background: #94a3b8;
    }

    [b-5oeq3rz1ar] .estado-dot.estado-contactado {
        background: #eab308;
    }

    [b-5oeq3rz1ar] .estado-dot.estado-cualificado {
        background: #3b82f6;
    }

    [b-5oeq3rz1ar] .estado-dot.estado-cliente {
        background: #22c55e;
    }

    [b-5oeq3rz1ar] .estado-dot.estado-descartado {
        background: #ef4444;
    }

/* ── Body y columnas ── */

.ficha-body[b-5oeq3rz1ar] {
    display: flex;
    gap: 16px;
    flex: 1;
    align-items: flex-start;
    /* Aire al final para que el último pull-up no quede pegado al borde de la página. */
    padding-bottom: 16px;
}

.ficha-col-izq[b-5oeq3rz1ar] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

    .ficha-col-izq[b-5oeq3rz1ar]::-webkit-scrollbar {
        display: none;
    }

.ficha-col-der[b-5oeq3rz1ar] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 8px;
}

/* Columna única a ancho completo (pestaña Documentos): la lista se lee mejor sin partir en dos. */
.ficha-col-full[b-5oeq3rz1ar] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Paneles ─────────────────────────────────────────────────────────────────
   Sustituyen a los antiguos pull-ups. Dentro de una pestaña no hay nada que plegar:
   la pestaña YA es el filtro, así que el contenido está siempre a la vista y la
   cabecera del panel se usa para el título y sus acciones.
   ────────────────────────────────────────────────────────────────────────── */

[b-5oeq3rz1ar] .panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-5oeq3rz1ar] .panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
}

[b-5oeq3rz1ar] .panel-icon {
    font-size: 18px;
    color: #3b82f6;
    background: #eff6ff;
    border-radius: 9px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    /* Color propio por sección para distinguirlas de un vistazo. */
    [b-5oeq3rz1ar] .panel-icon.ico-resumen     { background: #eff6ff; color: #2563eb; }
    [b-5oeq3rz1ar] .panel-icon.ico-detalles    { background: #f5f3ff; color: #7c3aed; }
    [b-5oeq3rz1ar] .panel-icon.ico-direcciones { background: #ecfdf5; color: #059669; }
    [b-5oeq3rz1ar] .panel-icon.ico-notas       { background: #fffbeb; color: #d97706; }
    [b-5oeq3rz1ar] .panel-icon.ico-actividades { background: #fff7ed; color: #ea580c; }
    [b-5oeq3rz1ar] .panel-icon.ico-historial   { background: #eef2ff; color: #4f46e5; }
    [b-5oeq3rz1ar] .panel-icon.ico-observaciones { background: #ecfeff; color: #0891b2; }

/* ── Observaciones ── */
[b-5oeq3rz1ar] .observaciones-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    line-height: 1.5;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    [b-5oeq3rz1ar] .observaciones-textarea:focus {
        outline: none;
        border-color: #0891b2;
        box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
    }

    [b-5oeq3rz1ar] .observaciones-textarea::placeholder {
        color: #94a3b8;
    }

[b-5oeq3rz1ar] .observaciones-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

[b-5oeq3rz1ar] .observaciones-guardado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}

    [b-5oeq3rz1ar] .observaciones-guardado .material-symbols-rounded {
        font-size: 16px;
    }

/* ── Tarjetas del contacto (tableros) ── */
[b-5oeq3rz1ar] .panel-icon.ico-tarjetas { background: #eef2ff; color: #4f46e5; }

[b-5oeq3rz1ar] .tarjetas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-5oeq3rz1ar] .tarjeta-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    [b-5oeq3rz1ar] .tarjeta-fila:hover {
        border-color: #c7d2fe;
        background: #f8faff;
        box-shadow: 0 3px 10px rgba(16, 24, 40, 0.06);
    }

    [b-5oeq3rz1ar] .tarjeta-fila.completada .tarjeta-fila-titulo {
        text-decoration: line-through;
        color: #94a3b8;
    }

[b-5oeq3rz1ar] .tarjeta-fila-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

[b-5oeq3rz1ar] .tarjeta-fila-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La "ruta": Tablero › Columna. Es lo que de verdad interesa (en qué punto del embudo está). */
[b-5oeq3rz1ar] .tarjeta-fila-ruta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    color: #94a3b8;
}

    [b-5oeq3rz1ar] .tarjeta-fila-ruta .material-symbols-rounded {
        font-size: 14px;
    }

[b-5oeq3rz1ar] .tarjeta-columna {
    font-weight: 700;
    color: #4f46e5;
}

[b-5oeq3rz1ar] .tarjeta-fila-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 11.5px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .tarjeta-vence,
[b-5oeq3rz1ar] .tarjeta-hecha {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

    [b-5oeq3rz1ar] .tarjeta-vence .material-symbols-rounded,
    [b-5oeq3rz1ar] .tarjeta-hecha .material-symbols-rounded {
        font-size: 15px;
    }

    [b-5oeq3rz1ar] .tarjeta-vence.vencida {
        color: #dc2626;
        font-weight: 600;
    }

[b-5oeq3rz1ar] .tarjeta-hecha {
    color: #16a34a;
    font-weight: 600;
}

[b-5oeq3rz1ar] .tarjeta-ir {
    font-size: 15px;
    color: #c7d2fe;
    transition: color 0.15s ease, transform 0.15s ease;
}

[b-5oeq3rz1ar] .tarjeta-fila:hover .tarjeta-ir {
    color: #4f46e5;
    transform: translateX(2px);
}

/* ── Tareas del gestor común que apuntan al contacto (plan T) ──
   Reutiliza las filas de las tarjetas (misma forma: título + ruta + meta); lo propio es el alta en
   línea y los botones de la cabecera. */
[b-5oeq3rz1ar] .panel-icon.ico-tareas { background: #f0fdfa; color: #0f766e; }

[b-5oeq3rz1ar] .tareas-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    [b-5oeq3rz1ar] .tareas-btn:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
    [b-5oeq3rz1ar] .tareas-btn:disabled { opacity: 0.5; cursor: default; }
    [b-5oeq3rz1ar] .tareas-btn .material-symbols-rounded { font-size: 16px; }

[b-5oeq3rz1ar] .tareas-btn-primario {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

    [b-5oeq3rz1ar] .tareas-btn-primario:hover:not(:disabled) { background: #115e59; border-color: #115e59; }

[b-5oeq3rz1ar] .tareas-nueva {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5oeq3rz1ar] .tareas-nueva-input,
[b-5oeq3rz1ar] .tareas-nueva-fecha {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
}

[b-5oeq3rz1ar] .tareas-nueva-input { flex: 1; min-width: 0; }

[b-5oeq3rz1ar] .tareas-check {
    border: none;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    transition: color 0.15s ease;
}

    [b-5oeq3rz1ar] .tareas-check:hover:not(:disabled) { color: #10b981; }
    [b-5oeq3rz1ar] .tareas-check .material-symbols-rounded { font-size: 18px; }

/* ── Documentos ── */
[b-5oeq3rz1ar] .panel-icon.ico-documentos { background: #f0fdfa; color: #0d9488; }

/* Zona de subida: el <InputFile> va invisible cubriendo todo, así vale arrastrar o pulsar. */
[b-5oeq3rz1ar] .doc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 22px 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    [b-5oeq3rz1ar] .doc-dropzone:hover {
        border-color: #0d9488;
        background: #f0fdfa;
    }

    [b-5oeq3rz1ar] .doc-dropzone.subiendo {
        border-color: #0d9488;
        background: #f0fdfa;
        cursor: progress;
    }

[b-5oeq3rz1ar] .doc-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

[b-5oeq3rz1ar] .doc-dropzone-icon {
    font-size: 30px;
    color: #0d9488;
}

[b-5oeq3rz1ar] .doc-dropzone.subiendo .doc-dropzone-icon {
    animation: doc-girar-b-5oeq3rz1ar 1s linear infinite;
}

@keyframes doc-girar-b-5oeq3rz1ar {
    to { transform: rotate(360deg); }
}

[b-5oeq3rz1ar] .doc-dropzone-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[b-5oeq3rz1ar] .doc-dropzone-hint {
    font-size: 11px;
    color: #94a3b8;
}

/* Barra de buscador + orden */
[b-5oeq3rz1ar] .doc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 10px;
}

[b-5oeq3rz1ar] .doc-buscador {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    [b-5oeq3rz1ar] .doc-buscador:focus-within {
        border-color: #0d9488;
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10);
    }

    [b-5oeq3rz1ar] .doc-buscador .material-symbols-rounded {
        font-size: 17px;
        color: #94a3b8;
    }

    [b-5oeq3rz1ar] .doc-buscador input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-size: 12.5px;
        color: #334155;
    }

[b-5oeq3rz1ar] .doc-orden {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

[b-5oeq3rz1ar] .doc-orden-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    [b-5oeq3rz1ar] .doc-orden-btn:hover {
        background: #f1f5f9;
        color: #334155;
    }

    [b-5oeq3rz1ar] .doc-orden-btn.activo {
        background: #f0fdfa;
        border-color: #99f6e4;
        color: #0f766e;
    }

    [b-5oeq3rz1ar] .doc-orden-btn .material-symbols-rounded {
        font-size: 14px;
    }

/* Filas: tarjetas separadas, no una tabla densa */
[b-5oeq3rz1ar] .doc-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-5oeq3rz1ar] .doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    [b-5oeq3rz1ar] .doc-row:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(16, 24, 40, 0.07);
    }

/* Recuadro de color con la extensión */
[b-5oeq3rz1ar] .doc-tile {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

[b-5oeq3rz1ar] .doc-tile.fmt-pdf   { background: #fee2e2; color: #dc2626; }
[b-5oeq3rz1ar] .doc-tile.fmt-word  { background: #dbeafe; color: #2563eb; }
[b-5oeq3rz1ar] .doc-tile.fmt-excel { background: #dcfce7; color: #15803d; }
[b-5oeq3rz1ar] .doc-tile.fmt-ppt   { background: #ffedd5; color: #ea580c; }
[b-5oeq3rz1ar] .doc-tile.fmt-img   { background: #ede9fe; color: #7c3aed; }
[b-5oeq3rz1ar] .doc-tile.fmt-zip   { background: #fef3c7; color: #b45309; }
[b-5oeq3rz1ar] .doc-tile.fmt-txt   { background: #e2e8f0; color: #475569; }
[b-5oeq3rz1ar] .doc-tile.fmt-otro  { background: #f1f5f9; color: #64748b; }

[b-5oeq3rz1ar] .doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-5oeq3rz1ar] .doc-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5oeq3rz1ar] .doc-meta {
    font-size: 11.5px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .doc-sep {
    margin: 0 3px;
    color: #cbd5e1;
}

/* Acciones: aparecen al pasar por encima */
[b-5oeq3rz1ar] .doc-acciones {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-5oeq3rz1ar] .doc-row:hover .doc-acciones {
    opacity: 1;
}

[b-5oeq3rz1ar] .doc-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    [b-5oeq3rz1ar] .doc-accion:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .doc-accion.peligro:hover {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

    [b-5oeq3rz1ar] .doc-accion .material-symbols-rounded {
        font-size: 17px;
    }

/* Confirmación de borrado, en la propia fila */
[b-5oeq3rz1ar] .doc-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

[b-5oeq3rz1ar] .doc-confirm-btn {
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    [b-5oeq3rz1ar] .doc-confirm-btn.si {
        background: #dc2626;
        border-color: #dc2626;
        color: #ffffff;
    }

        [b-5oeq3rz1ar] .doc-confirm-btn.si:hover {
            background: #b91c1c;
        }

    [b-5oeq3rz1ar] .doc-confirm-btn.no:hover {
        background: #f1f5f9;
    }

[b-5oeq3rz1ar] .panel-titulo {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

[b-5oeq3rz1ar] .panel-meta {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

/* Empuja las acciones al extremo derecho de la cabecera. */
[b-5oeq3rz1ar] .panel-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5oeq3rz1ar] .panel-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    min-height: 0;
}

/* ── Paneles agrandables por arrastre ──
   Solo lo llevan las listas con tope de altura y scroll interno (actividades, notas, historial y el
   registro del detalle): son las únicas donde "se ve poco". El resto ya crecen con su contenido y un
   asa ahí no haría nada. El arrastre lo mueve crmFicha.initResize, que toca max-height y guarda el
   valor; ver ese JS para por qué no vale el `resize: vertical` del navegador. */
[b-5oeq3rz1ar] .panel-redim {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Asa tipo textarea: dos rayas diagonales en la esquina inferior derecha. Discreta hasta que se pasa
   el ratón por el panel, para no competir con el contenido. */
[b-5oeq3rz1ar] .panel-grip {
    align-self: flex-end;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    cursor: ns-resize;
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    background-image: linear-gradient(135deg, transparent 0 45%, #94a3b8 45% 55%, transparent 55% 100%), linear-gradient(135deg, transparent 0 70%, #94a3b8 70% 80%, transparent 80% 100%);
}

[b-5oeq3rz1ar] .panel:hover .panel-grip,
[b-5oeq3rz1ar] .panel-redim:hover .panel-grip {
    opacity: 0.7;
}

[b-5oeq3rz1ar] .panel-grip:hover,
[b-5oeq3rz1ar] .panel-grip.arrastrando {
    opacity: 1;
}

/* ── Campos ── */

[b-5oeq3rz1ar] .campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-5oeq3rz1ar] .campo-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[b-5oeq3rz1ar] .campo-valor {
    font-size: 13px;
    color: #334155;
}

    [b-5oeq3rz1ar] .campo-valor.editable {
        cursor: pointer;
        border-radius: 6px;
        padding: 3px 6px;
        margin-left: -6px;
        transition: background 0.15s ease;
    }

        [b-5oeq3rz1ar] .campo-valor.editable:hover {
            background: #f1f5f9;
            color: #1e293b;
        }

[b-5oeq3rz1ar] .subseccion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Historial ── */

[b-5oeq3rz1ar] .historico-body {
    flex: 1;
    min-height: 0;
    /* Los chips quedan fijos arriba; solo hace scroll la lista (.hist-scroll). Con tope de altura. */
    max-height: 440px;
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Secciones (chips) ── */
[b-5oeq3rz1ar] .hist-secciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .hist-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .hist-chip .material-symbols-rounded {
        font-size: 15px;
    }

    [b-5oeq3rz1ar] .hist-chip:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .hist-chip.activo {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #2563eb;
    }

/* ── Lista con scroll interno ── */
[b-5oeq3rz1ar] .hist-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    [b-5oeq3rz1ar] .hist-scroll::-webkit-scrollbar {
        width: 5px;
    }

    [b-5oeq3rz1ar] .hist-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* ── Botón "Ver más" ── */
[b-5oeq3rz1ar] .hist-vermas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .hist-vermas:hover {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

    [b-5oeq3rz1ar] .hist-vermas .material-symbols-rounded {
        font-size: 16px;
    }

/* ── Línea de tiempo del historial ── */

[b-5oeq3rz1ar] .timeline {
    display: flex;
    flex-direction: column;
}

[b-5oeq3rz1ar] .timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding-bottom: 14px;
}

    /* Línea conectora vertical, centrada bajo el marcador (32px → centro 16, línea 2px → left 15). */
    [b-5oeq3rz1ar] .timeline-item::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e5e9f0;
    }

    /* El primer punto no dibuja línea por encima; el último solo hasta su centro. */
    [b-5oeq3rz1ar] .timeline-item:first-child::before {
        top: 16px;
    }

    [b-5oeq3rz1ar] .timeline-item:last-child::before {
        bottom: auto;
        height: 16px;
    }

/* Eventos que llevan a algo: clic → cambia de pestaña, hace scroll y da un destello. El resaltado
   va SOLO en el contenido (no en el item) para no descuadrar el marcador ni la línea de tiempo. */
[b-5oeq3rz1ar] .timeline-item.navegable {
    cursor: pointer;
}

    [b-5oeq3rz1ar] .timeline-item.navegable .timeline-content {
        border-radius: 9px;
        padding: 4px 8px 5px;
        /* Solo margen izquierdo (hacia el hueco del marcador): a la derecha desbordaría y salía una
           barra horizontal innecesaria. Así el resaltado respira sin provocar scroll. */
        margin-left: -8px;
        transition: background 0.15s ease;
    }

    [b-5oeq3rz1ar] .timeline-item.navegable:hover .timeline-content {
        background: #f5f3ff;
    }

[b-5oeq3rz1ar] .timeline-titulo {
    /* Anchura natural (no crece), para que la hora quede pegada al título y no al otro extremo. */
    flex: 0 1 auto;
    min-width: 0;
}

/* Flecha de "ir": visible en tenue para que se note que la fila es clicable; se refuerza al pasar.
   margin-left:auto la empuja al extremo derecho, sin separar el título de la hora. */
[b-5oeq3rz1ar] .timeline-ir {
    margin-left: auto;
    font-size: 14px;
    color: #c7d2fe;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

    [b-5oeq3rz1ar] .timeline-item.navegable:hover .timeline-ir {
        color: #6366f1;
        transform: translateX(2px);
    }

[b-5oeq3rz1ar] .timeline-marker {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    background: #eef2ff;
    color: #4f46e5;
    transition: transform 0.15s ease;
}

    [b-5oeq3rz1ar] .timeline-item.navegable:hover .timeline-marker {
        transform: scale(1.08);
    }

    [b-5oeq3rz1ar] .timeline-marker .material-symbols-rounded {
        font-size: 17px;
    }

    /* Colores por naturaleza del evento. */
    [b-5oeq3rz1ar] .timeline-marker.ev-crear    { background: #dcfce7; color: #16a34a; }
    [b-5oeq3rz1ar] .timeline-marker.ev-cliente  { background: #fef3c7; color: #d97706; }
    [b-5oeq3rz1ar] .timeline-marker.ev-estado   { background: #ede9fe; color: #7c3aed; }
    [b-5oeq3rz1ar] .timeline-marker.ev-editar   { background: #dbeafe; color: #2563eb; }
    [b-5oeq3rz1ar] .timeline-marker.ev-anadir   { background: #cffafe; color: #0891b2; }
    [b-5oeq3rz1ar] .timeline-marker.ev-eliminar { background: #fee2e2; color: #dc2626; }

[b-5oeq3rz1ar] .timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 5px;
}

[b-5oeq3rz1ar] .timeline-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* Sin space-between: el título y la hora quedan juntos; la flecha se va al extremo derecho. */
}

[b-5oeq3rz1ar] .timeline-titulo {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.35;
}

[b-5oeq3rz1ar] .timeline-fecha {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .timeline-cambio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

[b-5oeq3rz1ar] .cambio-antes,
[b-5oeq3rz1ar] .cambio-despues {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 6px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5oeq3rz1ar] .cambio-antes {
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}

[b-5oeq3rz1ar] .cambio-despues {
    background: #dcfce7;
    color: #15803d;
}

[b-5oeq3rz1ar] .cambio-flecha {
    font-size: 15px;
    color: #cbd5e1;
    flex-shrink: 0;
}

/* ── Entradas (emails, teléfonos) ── */

[b-5oeq3rz1ar] .contacto-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
}

[b-5oeq3rz1ar] .entry-valor {
    flex: 1;
    color: #334155;
    font-weight: 500;
}

[b-5oeq3rz1ar] .entry-tipo {
    font-size: 11px;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 2px 7px;
    border-radius: 20px;
}

[b-5oeq3rz1ar] .entry-delete {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
    opacity: 0;
}

    [b-5oeq3rz1ar] .entry-delete .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .contacto-entry:hover .entry-delete {
    opacity: 1;
    color: #ef4444;
}

[b-5oeq3rz1ar] .entry-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: #f1f5f9;
    border-radius: 8px;
}

[b-5oeq3rz1ar] .entry-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

[b-5oeq3rz1ar] .entry-error {
    font-size: 12px;
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    [b-5oeq3rz1ar] .entry-error::before {
        content: "error";
        font-family: "Material Symbols Rounded";
        font-size: 14px;
        flex-shrink: 0;
    }

/* Aviso: informa (email o teléfono repetido), pero deja seguir. */
[b-5oeq3rz1ar] .entry-aviso {
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    [b-5oeq3rz1ar] .entry-aviso::before {
        content: "info";
        font-family: "Material Symbols Rounded";
        font-size: 14px;
        flex-shrink: 0;
    }

/* ── Inputs inline ── */

[b-5oeq3rz1ar] .inline-input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #3b82f6;
    font-size: 13px;
    outline: none;
}

[b-5oeq3rz1ar] .inline-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-5oeq3rz1ar] .inline-save {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    [b-5oeq3rz1ar] .inline-save:hover {
        background: #2563eb;
    }

[b-5oeq3rz1ar] .inline-cancel {
    background: transparent;
    color: #94a3b8;
    border: none;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .inline-cancel:hover {
        background: #f1f5f9;
        color: #334155;
    }

[b-5oeq3rz1ar] .btn-anadir-inline {
    background: transparent;
    border: none;
    font-size: 12px;
    color: #3b82f6;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    [b-5oeq3rz1ar] .btn-anadir-inline:hover {
        background: #eff6ff;
    }

/* ── Notas del contacto ── */

[b-5oeq3rz1ar] .btn-anadir-nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .btn-anadir-nota:hover {
        background: #dbeafe;
        border-color: #93c5fd;
    }

    [b-5oeq3rz1ar] .btn-anadir-nota .material-symbols-rounded {
        font-size: 16px;
    }

/* Selector de tipo, tanto en la nota nueva como al editarla. */
[b-5oeq3rz1ar] .nota-tipo-selector {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
    max-width: 220px;
}

/* Cuántas notas hay de ese tipo, dentro del chip de filtro. */
[b-5oeq3rz1ar] .nota-filtro-contador {
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 10px;
    font-weight: 700;
}

[b-5oeq3rz1ar] .nota-form {
    position: relative;        /* ancla del aviso de soltar */
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Soltar un archivo sobre el formulario de la nota. `data-soltando` lo pone adjuntosSoltar.js, y es
   un `data-` y no una clase porque la clase de ese div la escribe Blazor (lleva el destello) y se la
   llevaría su siguiente repintado. */
[b-5oeq3rz1ar] .nota-form[data-soltando] {
    box-shadow: inset 0 0 0 2px var(--crm-azul, #2563eb);
    border-radius: 8px;
}

[b-5oeq3rz1ar] .nota-form[data-soltando]::after {
    content: "Suelta para adjuntar a la nota";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(239, 246, 255, .92);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;      /* el `drop` tiene que llegar al formulario, no morir aquí */
}

[b-5oeq3rz1ar] .nota-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

[b-5oeq3rz1ar] .notas-lista {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
    gap: 8px;
    /* Se ven ~3 notas; a partir de la 4ª aparece scroll interno (evita que la sección crezca sin
       límite). El menú de 3 puntos se abre hacia ARRIBA salvo en la primera nota, que es como se evita
       que este borde lo recorte. */
    max-height: 300px;
    overflow-y: auto;
}

[b-5oeq3rz1ar] .notas-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: #94a3b8;
    font-size: 13px;
    justify-content: center;
}

    [b-5oeq3rz1ar] .notas-empty .material-symbols-rounded {
        font-size: 20px;
        color: #cbd5e1;
    }

[b-5oeq3rz1ar] .nota-item {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    /* El color de la franja izquierda lo pone cada nota en línea, según el color de su tipo. */
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: box-shadow 0.15s ease;
}

    [b-5oeq3rz1ar] .nota-item:hover {
        box-shadow: 0 4px 12px rgba(16,24,40,0.08);
    }

/* Tipo de nota como título con subrayado del color elegido (el color lo pone cada nota en línea). */
[b-5oeq3rz1ar] .nota-tipo-titulo {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    padding-bottom: 2px;
    border-bottom: 2px solid #cbd5e1;
    letter-spacing: 0.2px;
}

[b-5oeq3rz1ar] .nota-contenido {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    /* Hueco para que el texto no choque con el botón de 3 puntos. */
    padding-right: 20px;
}

/* Menú de 3 puntos de la nota (mismo estilo que el de actividades). */
[b-5oeq3rz1ar] .nota-menu-wrapper {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}

[b-5oeq3rz1ar] .nota-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .nota-menu-btn .material-symbols-rounded {
        font-size: 18px;
    }

[b-5oeq3rz1ar] .nota-item:hover .nota-menu-btn {
    opacity: 1;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .nota-menu-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

[b-5oeq3rz1ar] .nota-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[b-5oeq3rz1ar] .nota-fecha {
    font-size: 11px;
    color: #94a3b8;
}

    [b-5oeq3rz1ar] .nota-delete .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .nota-item:hover .nota-delete {
    opacity: 1;
    color: #ef4444;
}

    [b-5oeq3rz1ar] .nota-editar .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .nota-item:hover .nota-editar {
    opacity: 1;
    color: #2563eb;
}

/* Fondo al pasar el ratón sobre cada botón. */

/* ── Actividades ── */

[b-5oeq3rz1ar] .actividades-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Se ven ~3 actividades; a partir de la 4ª aparece scroll interno (mismo criterio que las notas). */
    max-height: 250px;
    overflow-y: auto;
    /* Aire a la derecha para que la barra de scroll no pise el menú de 3 puntos de cada fila. */
    padding-right: 4px;
}

/* Confirmación suave al completar una actividad (no un modal agresivo, una barra inline). */
[b-5oeq3rz1ar] .actividad-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px 34px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    color: #475569;
}

    [b-5oeq3rz1ar] .actividad-confirm-texto {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        [b-5oeq3rz1ar] .actividad-confirm-texto .material-symbols-rounded {
            font-size: 17px;
            color: #16a34a;
        }

    [b-5oeq3rz1ar] .actividad-confirm-acciones {
        display: inline-flex;
        gap: 6px;
    }

    [b-5oeq3rz1ar] .actividad-confirm-btn {
        padding: 4px 10px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

        [b-5oeq3rz1ar] .actividad-confirm-btn.eliminar {
            background: #dc2626;
            border-color: #dc2626;
            color: #ffffff;
        }

            [b-5oeq3rz1ar] .actividad-confirm-btn.eliminar:hover {
                background: #b91c1c;
                border-color: #b91c1c;
            }

        [b-5oeq3rz1ar] .actividad-confirm-btn.mantener:hover,
        [b-5oeq3rz1ar] .actividad-confirm-btn.cancelar:hover {
            border-color: #cbd5e1;
            background: #f1f5f9;
        }

/* Destello suave al abrir el formulario (crear/editar): guía la vista sin ser abrumador. */
@keyframes act-form-destello-b-5oeq3rz1ar {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);    border-color: #e2e8f0; }
    25%  { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.28); border-color: #a5b4fc; }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);    border-color: #e2e8f0; }
}

[b-5oeq3rz1ar] .actividad-form-destello,
[b-5oeq3rz1ar] .nota-form-destello {
    animation: act-form-destello-b-5oeq3rz1ar 2s ease-out;
}

[b-5oeq3rz1ar] .nota-form-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 2px;
}

/* Título del formulario de actividad (cambia entre "Nueva actividad" y "Editar actividad"). */
[b-5oeq3rz1ar] .actividad-form-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 2px;
}

/* Desvanecimiento suave (~3 s) al eliminar una actividad, para que no salga de golpe. */
[b-5oeq3rz1ar] .actividad-item.desvaneciendo {
    animation: act-item-fade-b-5oeq3rz1ar 3s ease forwards;
    pointer-events: none;
}

@keyframes act-item-fade-b-5oeq3rz1ar {
    0%   { opacity: 1; }
    70%  { opacity: 0.25; }
    100% { opacity: 0; transform: translateX(8px); }
}

/* ── Fila de actividad: zona clicable y contador de apuntes ── */
[b-5oeq3rz1ar] .actividad-info-click {
    cursor: pointer;
    border-radius: 6px;
}

    [b-5oeq3rz1ar] .actividad-info-click:hover .actividad-titulo {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

[b-5oeq3rz1ar] .actividad-apuntes-ind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

    [b-5oeq3rz1ar] .actividad-apuntes-ind .material-symbols-rounded {
        font-size: 14px;
    }

/* ── Detalle de un evento del historial: un panel más de la columna, encima del historial (no es modal). El de una
   actividad es el panel de detalle global (plan UC), con sus propios estilos. ── */
[b-5oeq3rz1ar] .act-det {
    border-left: 3px solid #ea580c;
    animation: act-det-in-b-5oeq3rz1ar 0.18s ease-out;
}

@keyframes act-det-in-b-5oeq3rz1ar {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* El cuerpo no hace scroll propio: el panel crece con lo que cuenta. */
[b-5oeq3rz1ar] .act-det .panel-body {
    overflow: hidden;
}

[b-5oeq3rz1ar] .act-det-cabecera {
    min-width: 0;
}

[b-5oeq3rz1ar] .act-det-tipo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .act-det-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px;
    border-radius: 6px;
    flex-shrink: 0;
}

    [b-5oeq3rz1ar] .act-det-close:hover {
        background: #f1f5f9;
        color: #334155;
    }

[b-5oeq3rz1ar] .actividad-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b82f6;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: box-shadow 0.15s ease, opacity .2s;
}

    [b-5oeq3rz1ar] .actividad-item:hover {
        box-shadow: 0 4px 12px rgba(16,24,40,0.08);
    }

    [b-5oeq3rz1ar] .actividad-item.completada {
        opacity: 0.55;
        border-left-color: #22c55e;
    }

    /* La actividad cuyo detalle está abierto en la columna derecha. */
    [b-5oeq3rz1ar] .actividad-item.seleccionada {
        border-color: #fdba74;
        border-left-color: #ea580c;
        background: #fff7ed;
    }

[b-5oeq3rz1ar] .actividad-check {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

    [b-5oeq3rz1ar] .actividad-check .material-symbols-rounded {
        font-size: 20px;
        transition: color 0.15s ease;
    }

    [b-5oeq3rz1ar] .actividad-check:hover .material-symbols-rounded {
        color: #2563eb;
    }

[b-5oeq3rz1ar] .actividad-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

[b-5oeq3rz1ar] .actividad-titulo-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-5oeq3rz1ar] .actividad-tipo-icon {
    font-size: 15px;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #475569;
    border-radius: 6px;
    line-height: 1;
}

[b-5oeq3rz1ar] .actividad-titulo {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-5oeq3rz1ar] .actividad-item.completada .actividad-titulo {
    text-decoration: line-through;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .actividad-descripcion {
    font-size: 12px;
    color: #64748b;
}

[b-5oeq3rz1ar] .actividad-fecha {
    font-size: 11px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .actividad-notas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
}

    [b-5oeq3rz1ar] .actividad-notas-toggle:hover,
    [b-5oeq3rz1ar] .actividad-notas-toggle.abierto {
        color: #2563eb;
    }

    [b-5oeq3rz1ar] .actividad-notas-toggle .material-symbols-rounded {
        font-size: 15px;
    }

/* ── Formulario de actividad ── */

[b-5oeq3rz1ar] .actividad-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

[b-5oeq3rz1ar] .actividad-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Envoltorio para que el CrmDropdown (width:100%) se comporte como flex:1 dentro de una fila. */
[b-5oeq3rz1ar] .dd-flex {
    flex: 1;
    min-width: 0;
}

[b-5oeq3rz1ar] .actividad-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

[b-5oeq3rz1ar] .actividad-todoDia-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

    [b-5oeq3rz1ar] .actividad-todoDia-label input[type="checkbox"] {
        accent-color: #3b82f6;
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

[b-5oeq3rz1ar] .actividad-form .inline-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
    flex: none;
    height: 38px;
}

    [b-5oeq3rz1ar] .actividad-form .inline-input:focus {
        border-color: #3b82f6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

    [b-5oeq3rz1ar] .actividad-form .inline-input::placeholder {
        color: #94a3b8;
    }

[b-5oeq3rz1ar] .actividad-form .inline-select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
    flex: none;
    height: 38px;
    cursor: pointer;
}

    [b-5oeq3rz1ar] .actividad-form .inline-select:focus {
        border-color: #3b82f6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

[b-5oeq3rz1ar] .actividad-form .actividad-form-row .inline-select {
    flex: 1;
    width: auto;
}

[b-5oeq3rz1ar] .actividad-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
}

    [b-5oeq3rz1ar] .actividad-textarea:focus {
        border-color: #3b82f6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

    [b-5oeq3rz1ar] .actividad-textarea::placeholder {
        color: #94a3b8;
    }

/* ── Menú contextual de actividad ── */

[b-5oeq3rz1ar] .actividad-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .actividad-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .actividad-menu-btn .material-symbols-rounded {
        font-size: 18px;
    }

[b-5oeq3rz1ar] .actividad-item:hover .actividad-menu-btn {
    opacity: 1;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .actividad-menu-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

[b-5oeq3rz1ar] .actividad-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 200;
    min-width: 130px;
    padding: 4px;
}

[b-5oeq3rz1ar] .actividad-menu-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s ease;
}

    [b-5oeq3rz1ar] .actividad-menu-opcion.editar {
        color: #334155;
    }

        [b-5oeq3rz1ar] .actividad-menu-opcion.editar:hover {
            background: #f1f5f9;
        }

    [b-5oeq3rz1ar] .actividad-menu-opcion.eliminar {
        color: #dc2626;
    }

        [b-5oeq3rz1ar] .actividad-menu-opcion.eliminar:hover {
            background: #fee2e2;
        }

        [b-5oeq3rz1ar] .actividad-menu-opcion.eliminar .material-symbols-rounded {
            font-size: 16px;
        }

/* ── Notas de actividades ── */

/* Panel de notas anidado bajo una actividad: se lee como un hilo pegado a la actividad. */
[b-5oeq3rz1ar] .actividad-notas-panel {
    margin: 2px 0 10px 42px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-5oeq3rz1ar] .actividad-nota-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Icono de "nota" a la izquierda de cada entrada, para que se lea como anotación. */
[b-5oeq3rz1ar] .actividad-nota-lectura {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: text;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

    [b-5oeq3rz1ar] .actividad-nota-lectura:hover {
        border-color: #cbd5e1;
        box-shadow: 0 1px 3px rgba(16,24,40,0.05);
    }

[b-5oeq3rz1ar] .actividad-nota-contenido {
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

[b-5oeq3rz1ar] .actividad-nota-meta {
    font-size: 11px;
    color: #94a3b8;
}

/* Botón borrar: oculto hasta pasar el ratón por la nota. */
[b-5oeq3rz1ar] .actividad-nota-item .entry-delete {
    margin-top: 6px;
}

[b-5oeq3rz1ar] .actividad-nota-item:hover .entry-delete {
    opacity: 1;
    color: #ef4444;
}

[b-5oeq3rz1ar] .actividad-nota-edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-5oeq3rz1ar] .actividad-nota-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Tipo personalizado en el item de actividad ── */

[b-5oeq3rz1ar] .actividad-tipo-nombre {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 1px 7px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .actividad-item.completada .actividad-tipo-nombre {
    color: #94a3b8;
    background: #f1f5f9;
}

/* ── Aviso sin tipos disponibles ── */

[b-5oeq3rz1ar] .tipo-aviso {
    font-size: 12px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 7px;
    padding: 8px 12px;
    text-align: center;
    display: block;
}
/* ══ Empresa de la persona: desplegable con buscador ══
   Réplica del CrmDropdown (Presentation/Shared/Dropdown) para que el selector de empresa se vea
   igual que los del calendario. No se reutiliza el componente porque aquí la lista NO es cerrada:
   se busca contra el servidor al teclear. Si algún día CrmDropdown admite búsqueda, este bloque
   se sustituye por el componente y estas clases desaparecen. */

[b-5oeq3rz1ar] .empresa-dd {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
}

[b-5oeq3rz1ar] .empresa-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    max-width: 260px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #1e293b;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    [b-5oeq3rz1ar] .empresa-dd-trigger:hover {
        border-color: #cbd5e1;
    }

    /* Sin empresa aún: marco discontinuo, como el resto de «vacíos» de la ficha. */
    [b-5oeq3rz1ar] .empresa-dd-trigger.is-vacio {
        border-style: dashed;
        border-color: #cbd5e1;
    }

[b-5oeq3rz1ar] .empresa-dd.open .empresa-dd-trigger {
    border-color: #3b82f6;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

[b-5oeq3rz1ar] .empresa-dd-lead {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .empresa-dd.open .empresa-dd-lead {
    color: #3b82f6;
}

[b-5oeq3rz1ar] .empresa-dd-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    [b-5oeq3rz1ar] .empresa-dd-value.is-placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

[b-5oeq3rz1ar] .empresa-dd-chevron {
    font-size: 18px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.15s;
}

[b-5oeq3rz1ar] .empresa-dd.open .empresa-dd-chevron {
    transform: rotate(180deg);
    color: #3b82f6;
}

/* Lápiz de «cambiar o quitar» cuando ya hay empresa vinculada. */
[b-5oeq3rz1ar] .empresa-dd-editar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

    [b-5oeq3rz1ar] .empresa-dd-editar:hover {
        border-color: #cbd5e1;
        color: #334155;
    }

    [b-5oeq3rz1ar] .empresa-dd-editar .material-symbols-rounded {
        font-size: 16px;
    }


[b-5oeq3rz1ar] .empresa-dd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1201;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16,24,40,0.14);
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

[b-5oeq3rz1ar] .empresa-dd-buscador {
    width: 100%;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    [b-5oeq3rz1ar] .empresa-dd-buscador:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

[b-5oeq3rz1ar] .empresa-dd-nota {
    padding: 8px 10px;
    font-size: 12.5px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .empresa-dd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    text-align: left;
    transition: background 0.12s ease;
}

    [b-5oeq3rz1ar] .empresa-dd-option:hover {
        background: #f1f5f9;
    }

    [b-5oeq3rz1ar] .empresa-dd-option.active {
        background: #eff6ff;
        color: #2563eb;
        font-weight: 600;
    }

    /* Desvincular: misma forma que una opción, color de acción destructiva. */
    [b-5oeq3rz1ar] .empresa-dd-option.is-quitar {
        color: #dc2626;
    }

        [b-5oeq3rz1ar] .empresa-dd-option.is-quitar:hover {
            background: #fef2f2;
        }

[b-5oeq3rz1ar] .empresa-dd-opt-icon {
    font-size: 17px;
    color: #64748b;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .empresa-dd-option.active .empresa-dd-opt-icon {
    color: #2563eb;
}

[b-5oeq3rz1ar] .empresa-dd-option.is-quitar .empresa-dd-opt-icon {
    color: #dc2626;
}

[b-5oeq3rz1ar] .empresa-dd-opt-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5oeq3rz1ar] .empresa-dd-check {
    font-size: 17px;
    color: #2563eb;
    flex-shrink: 0;
}

/* ══ IC6 — Banda de sugerencias IA ══ */

[b-5oeq3rz1ar] .sugerencias-banda {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #7c3aed;
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-5oeq3rz1ar] .sugerencias-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5oeq3rz1ar] .sugerencias-icono {
    font-size: 18px;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 6px;
    padding: 3px;
}

[b-5oeq3rz1ar] .sugerencias-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[b-5oeq3rz1ar] .sugerencias-contador {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 20px;
    padding: 1px 8px;
}

[b-5oeq3rz1ar] .sugerencias-acciones {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

[b-5oeq3rz1ar] .sugerencias-aviso {
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 7px;
    padding: 6px 10px;
}

[b-5oeq3rz1ar] .sugerencias-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-5oeq3rz1ar] .sugerencia-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #faf9ff;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 5px 9px;
}

[b-5oeq3rz1ar] .sugerencia-texto {
    font-size: 13px;
    color: #334155;
    flex: 1;
    min-width: 0;
}

[b-5oeq3rz1ar] .sugerencia-botones {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .sugerencia-btn {
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    padding: 4px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s ease;
}

[b-5oeq3rz1ar] .sugerencia-btn:disabled {
    opacity: .5;
    cursor: default;
}

[b-5oeq3rz1ar] .sugerencia-btn.aplicar {
    background: #7c3aed;
    color: #fff;
}

[b-5oeq3rz1ar] .sugerencia-btn.aplicar:hover:not(:disabled) {
    background: #6d28d9;
}

[b-5oeq3rz1ar] .sugerencia-btn.descartar {
    background: #fff;
    color: #64748b;
    border-color: #e2e8f0;
}

[b-5oeq3rz1ar] .sugerencia-btn.descartar:hover:not(:disabled) {
    background: #f1f5f9;
}

/* Modal de extracción manual */

[b-5oeq3rz1ar] .sugerencias-modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-5oeq3rz1ar] .sugerencias-modal {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    width: min(560px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}

[b-5oeq3rz1ar] .sugerencias-modal-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

[b-5oeq3rz1ar] .sugerencias-modal-ayuda {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

[b-5oeq3rz1ar] .sugerencias-modal-textarea {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    outline: none;
}

[b-5oeq3rz1ar] .sugerencias-modal-textarea:focus {
    border-color: #a78bfa;
}

[b-5oeq3rz1ar] .sugerencias-modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ══ IC10 — Panel «Siguiente mejor acción» ══ */

[b-5oeq3rz1ar] .nba-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0ea5e9;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

/* Cabecera fija (ya no es un botón de plegado): sin cursor de clic ni chevron. */
[b-5oeq3rz1ar] .nba-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    text-align: left;
    width: 100%;
}

[b-5oeq3rz1ar] .nba-icono {
    font-size: 18px;
    color: #0ea5e9;
    background: #f0f9ff;
    border-radius: 6px;
    padding: 3px;
}

[b-5oeq3rz1ar] .nba-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[b-5oeq3rz1ar] .nba-contador {
    font-size: 11px;
    font-weight: 700;
    color: #0ea5e9;
    background: #f0f9ff;
    border-radius: 20px;
    padding: 1px 8px;
}

[b-5oeq3rz1ar] .nba-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px 12px;
}

[b-5oeq3rz1ar] .nba-ayuda {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

[b-5oeq3rz1ar] .nba-aviso {
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 7px;
    padding: 6px 10px;
}

[b-5oeq3rz1ar] .nba-btn-recomendar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #0ea5e9;
    border: none;
    border-radius: 7px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background .12s ease;
}

[b-5oeq3rz1ar] .nba-btn-recomendar:hover:not(:disabled) {
    background: #0284c7;
}

[b-5oeq3rz1ar] .nba-btn-recomendar:disabled {
    opacity: .5;
    cursor: default;
}

[b-5oeq3rz1ar] .nba-btn-otra {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 4px 12px;
    cursor: pointer;
}

[b-5oeq3rz1ar] .nba-btn-otra:hover:not(:disabled) {
    background: #f1f5f9;
}

[b-5oeq3rz1ar] .nba-btn-otra:disabled {
    opacity: .5;
    cursor: default;
}

[b-5oeq3rz1ar] .nba-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-5oeq3rz1ar] .nba-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fdff;
    border: 1px solid #e0f2fe;
    border-radius: 8px;
    padding: 7px 10px;
}

[b-5oeq3rz1ar] .nba-item-icono {
    font-size: 18px;
    color: #0ea5e9;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .nba-item-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

[b-5oeq3rz1ar] .nba-item-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[b-5oeq3rz1ar] .nba-item-justificacion {
    font-size: 12px;
    color: #64748b;
}

[b-5oeq3rz1ar] .nba-item-fecha {
    font-size: 11px;
    color: #94a3b8;
}

/* ── Facturación (cifras reales del ERP) ── */
[b-5oeq3rz1ar] .fact-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 10px;
}

[b-5oeq3rz1ar] .fact-total-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f766e;
    line-height: 1.1;
}

[b-5oeq3rz1ar] .fact-total-label {
    font-size: 12px;
    color: #64748b;
}

[b-5oeq3rz1ar] .fact-meses {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-5oeq3rz1ar] .fact-mes {
    display: grid;
    grid-template-columns: 66px 1fr auto;
    align-items: center;
    gap: 8px;
}

[b-5oeq3rz1ar] .fact-mes-label {
    font-size: 12px;
    color: #64748b;
    text-transform: capitalize;
}

[b-5oeq3rz1ar] .fact-mes-barra {
    height: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

    [b-5oeq3rz1ar] .fact-mes-barra > span {
        display: block;
        height: 100%;
        background: #14b8a6;
        border-radius: 999px;
        min-width: 2px;
    }

[b-5oeq3rz1ar] .fact-mes-importe {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

/* ── Historial: filtros y línea ─────────────────────────────────────────────────────────────────── */

/* Los dos filtros del historial, con el desplegable del CRM (CrmDropdown): su lista es un panel
   propio, no el del sistema operativo, que es lo que se veía cuadrado y azul.

   Aquí solo se les da el ancho: el componente nace a ancho completo porque sirve para formularios, y
   en una barra de filtros tiene que medir lo que mide su contenido. */
[b-5oeq3rz1ar] .hist-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

    [b-5oeq3rz1ar] .hist-filtros .crm-dd {
        width: auto;
    }

    [b-5oeq3rz1ar] .hist-filtros .crm-dd-trigger {
        width: auto;
        height: 30px;
        padding: 0 6px 0 10px;
        border-radius: 999px;
        font-size: 12px;
        color: #475569;
    }

/* El «Quién» vive en la barra de pestañas, empujado a la derecha: manda en la pestaña entera, y
   dentro de una tarjeta parecería de esa tarjeta. */
.ficha-tabs-filtro[b-5oeq3rz1ar] {
    margin-left: auto;
    align-self: center;
    padding-bottom: 6px;
}

    .ficha-tabs-filtro[b-5oeq3rz1ar]  .crm-dd {
        width: auto;
    }

    .ficha-tabs-filtro[b-5oeq3rz1ar]  .crm-dd-trigger {
        width: auto;
        height: 30px;
        padding: 0 6px 0 10px;
        border-radius: 999px;
        font-size: 12px;
        color: #475569;
    }

    /* El panel de opciones nace a la anchura del botón (left/right a 0), y aquí el botón mide lo que
       mide su texto: «Todo» dejaba la lista tan estrecha que «Últimos 3 meses» salía cortado. Se le
       deja crecer con su contenido, sin bajar del ancho del botón. */
    [b-5oeq3rz1ar] .hist-filtros .crm-dd-panel,
    .ficha-tabs-filtro[b-5oeq3rz1ar]  .crm-dd-panel {
        right: auto;
        width: max-content;
        min-width: 100%;
        max-width: 260px;
    }

    [b-5oeq3rz1ar] .hist-filtros .crm-dd-opt-label,
    .ficha-tabs-filtro[b-5oeq3rz1ar]  .crm-dd-opt-label {
        white-space: nowrap;
    }

    /* Y el propio botón: el componente recorta su texto con «…» porque en un formulario tiene un ancho
       fijo. Aquí mide lo que mide lo elegido, así que no hay nada que recortar. */
    [b-5oeq3rz1ar] .hist-filtros .crm-dd-value,
    .ficha-tabs-filtro[b-5oeq3rz1ar]  .crm-dd-value {
        overflow: visible;
        text-overflow: clip;
    }

/* La línea del evento: el QUÉ no se recorta nunca y el DE QUÉ cede el sitio con «…», de modo que la
   hora de la derecha siempre se lee. */
[b-5oeq3rz1ar] .timeline-titulo {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

[b-5oeq3rz1ar] .timeline-que {
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .timeline-sep {
    color: #cbd5e1;
    flex-shrink: 0;
}

[b-5oeq3rz1ar] .timeline-detalle {
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Panel de un evento del historial ───────────────────────────────────────────────────────────── */

[b-5oeq3rz1ar] .evento-cambio {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Lo que ya no existe se dice, no se esconde ni se deja un botón que no lleva a ninguna parte. */
[b-5oeq3rz1ar] .evento-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
}

    [b-5oeq3rz1ar] .evento-aviso .material-symbols-rounded {
        font-size: 18px;
    }


/* El tipo de la nota, junto a la hora y el autor. */
[b-5oeq3rz1ar] .evento-chip {
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
}

/* El antes y el después, uno debajo de otro y con su rótulo: en una línea, dos textos largos se
   pegaban y no se veía dónde acababa uno. */
[b-5oeq3rz1ar] .evento-cambio {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
}

[b-5oeq3rz1ar] .evento-cambio-rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .evento-cambio-fila {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

[b-5oeq3rz1ar] .evento-cambio-etq {
    flex-shrink: 0;
    width: 52px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

/* ── Panel de un evento: cabecera y pie ─────────────────────────────────────────────────────────── */

/* La cerrar va al extremo derecho. El panel de actividad tiene más cosas en su cabecera y se apaña
   solo; este solo lleva el tipo de evento, así que hay que empujar la X. */
[b-5oeq3rz1ar] .evento-det .act-det-cabecera {
    flex: 1;
    min-width: 0;
}

/* El pie del panel: separado por una línea y alineado a la derecha, como un diálogo. */
[b-5oeq3rz1ar] .evento-pie {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

[b-5oeq3rz1ar] .evento-accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    [b-5oeq3rz1ar] .evento-accion:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    [b-5oeq3rz1ar] .evento-accion .material-symbols-rounded {
        font-size: 16px;
    }

/* ── Panel de un evento: quién, cuándo y el dato ────────────────────────────────────────────────── */

/* Quién a la izquierda y cuándo a la derecha, en vez de los tres datos seguidos con puntos en medio.
   Vale para cualquier evento, que es lo que llega a este panel. */
[b-5oeq3rz1ar] .evento-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

[b-5oeq3rz1ar] .evento-autor {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Mismo avatar que los apuntes de la actividad: foto de fondo, o iniciales si no la hay. */
[b-5oeq3rz1ar] .evento-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
}

[b-5oeq3rz1ar] .evento-autor-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5oeq3rz1ar] .evento-hora {
    flex-shrink: 0;
    font-size: 12px;
    color: #94a3b8;
}

/* El dato del evento, sea el que sea: el texto de una nota, un teléfono, el nombre de un fichero. Con
   su nombre encima, porque sin él los tres se veían exactamente igual. */
[b-5oeq3rz1ar] .evento-dato {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    color: #334155;
    word-break: break-word;
}

[b-5oeq3rz1ar] .evento-dato-etq {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* El marcador de la cabecera es el mismo de la lista, pero ahí vive dentro de una línea de tiempo con
   su raya; aquí va suelto en la cabecera. */
[b-5oeq3rz1ar] .evento-det .panel-head .timeline-marker {
    position: static;
    flex-shrink: 0;
}

/* Una nota se pulsa para ver su ficha arriba, como una actividad: hay que decirlo con el cursor y con
   el realce, o nadie descubre que se puede. */
[b-5oeq3rz1ar] .nota-item.clicable {
    cursor: pointer;
}

    [b-5oeq3rz1ar] .nota-item.clicable:hover {
        border-color: #cbd5e1;
    }

    /* La nota cuya ficha está abierta arriba, con el mismo naranja que una actividad abierta: en una
       lista larga, sin esto no se sabe de cuál es lo que se está mirando. El borde de color del tipo
       cede el sitio al del realce, que es la información que importa en ese momento. */
    [b-5oeq3rz1ar] .nota-item.seleccionada {
        border-color: #fdba74;
        background: #fff7ed;
    }

/* Hacia arriba: el menú de una nota que no es la primera. La lista de notas tiene scroll propio, así
   que un menú desplegado hacia abajo se recorta contra su borde —estaba asumido como defecto— y encima
   de cualquier nota que no sea la primera hay sitio de sobra. */
[b-5oeq3rz1ar] .actividad-menu-dropdown.hacia-arriba {
    top: auto;
    bottom: calc(100% + 4px);
}

/* Teclado de serie: cada campo suelto de un mini-formulario va en un contenedor anclado (cfi-). El control sigue llenando su celda. */
[b-5oeq3rz1ar] .cfi-campo { min-width: 0; }
[b-5oeq3rz1ar] .cfi-campo > input,
[b-5oeq3rz1ar] .cfi-campo > select,
[b-5oeq3rz1ar] .cfi-campo > textarea { width: 100%; box-sizing: border-box; }

/* ── Plan UC: captura rápida, agenda única y «Lo próximo» ── */

/* La franja de captura rápida, bajo la cabecera y a la vista en todas las pestañas. */
[b-5oeq3rz1ar] .captura {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

[b-5oeq3rz1ar] .captura-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

[b-5oeq3rz1ar] .captura-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}

    [b-5oeq3rz1ar] .captura-btn:hover { border-color: #93c5fd; background: #f8fafc; }
    [b-5oeq3rz1ar] .captura-btn.activo { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
    [b-5oeq3rz1ar] .captura-btn .material-symbols-rounded { font-size: 18px; }

    [b-5oeq3rz1ar] .captura-btn kbd {
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 600;
        color: #94a3b8;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 0 4px;
    }

[b-5oeq3rz1ar] .captura-hecho {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #15803d;
}

    [b-5oeq3rz1ar] .captura-hecho .material-symbols-rounded { font-size: 17px; }

[b-5oeq3rz1ar] .captura-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #f8fbff;
}

[b-5oeq3rz1ar] .captura-texto textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 54px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px;
}

[b-5oeq3rz1ar] .captura-cuando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

[b-5oeq3rz1ar] .captura-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    [b-5oeq3rz1ar] .captura-chip:hover:not(:disabled) { border-color: #2563eb; color: #1d4ed8; }
    [b-5oeq3rz1ar] .captura-chip:disabled { opacity: 0.5; cursor: default; }
    [b-5oeq3rz1ar] .captura-chip.principal { background: #2563eb; border-color: #2563eb; color: #ffffff; }

[b-5oeq3rz1ar] .captura-fecha input {
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
}

[b-5oeq3rz1ar] .captura-cancelar {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12.5px;
    cursor: pointer;
}

[b-5oeq3rz1ar] .captura-error {
    font-size: 12.5px;
    color: #b91c1c;
}

/* Una línea de la agenda: la pintan la agenda y «Lo próximo». */
[b-5oeq3rz1ar] .agenda-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-5oeq3rz1ar] .agenda-fila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    [b-5oeq3rz1ar] .lo-proximo .agenda-fila {
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
    }

    [b-5oeq3rz1ar] .agenda-fila.completada .agenda-fila-titulo { text-decoration: line-through; color: #64748b; }
    [b-5oeq3rz1ar] .agenda-fila.vencida { border-left-color: #dc2626; }
    [b-5oeq3rz1ar] .lo-proximo .agenda-fila.seleccionada { border-color: #fdba74; background: #fff7ed; }

[b-5oeq3rz1ar] .agenda-fila-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

[b-5oeq3rz1ar] .agenda-fila-ico {
    font-size: 18px;
    color: #64748b;
    margin-top: 1px;
}

    [b-5oeq3rz1ar] .agenda-fila-ico.clase-llamada { color: #2563eb; }
    [b-5oeq3rz1ar] .agenda-fila-ico.clase-reunion { color: #7c3aed; }
    [b-5oeq3rz1ar] .agenda-fila-ico.clase-email { color: #0891b2; }
    [b-5oeq3rz1ar] .agenda-fila-ico.clase-recordatorio { color: #ea580c; }
    [b-5oeq3rz1ar] .agenda-fila-ico.clase-oportunidad { color: #4f46e5; }
    [b-5oeq3rz1ar] .agenda-fila-ico.clase-gestion { color: #0f766e; }

[b-5oeq3rz1ar] .agenda-fila-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-5oeq3rz1ar] .agenda-fila-titulo {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

[b-5oeq3rz1ar] .agenda-fila-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
    color: #64748b;
}

[b-5oeq3rz1ar] .agenda-fila-cuando,
[b-5oeq3rz1ar] .agenda-fila-apuntes {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    [b-5oeq3rz1ar] .agenda-fila-cuando .material-symbols-rounded,
    [b-5oeq3rz1ar] .agenda-fila-apuntes .material-symbols-rounded { font-size: 14px; }

    [b-5oeq3rz1ar] .agenda-fila-cuando.vencida { color: #b91c1c; font-weight: 600; }

[b-5oeq3rz1ar] .agenda-fila-vencida {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
}

[b-5oeq3rz1ar] .agenda-hechas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    background: none;
    border: none;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

[b-5oeq3rz1ar] .lo-proximo-vacio {
    font-size: 13px;
    color: #94a3b8;
    padding: 6px 0;
}

[b-5oeq3rz1ar] .lo-proximo-subtitulo {
    margin: 14px 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/ContactosPage.razor.rz.scp.css */
/* ════════════════════════════════════════
            Contactos.razor.css
   ════════════════════════════════════════ */

/* ── Página ──
   Misma pauta de alto que la página de Clientes: el suelo es la pantalla y, a partir de ahí, la página
   crece con su contenido. Sin fondo propio (antes era un degradado gris): se apoya en el de la
   aplicación, como Clientes. Columna flex y no rejilla: delante van el chip de volver y los avisos del
   CRM, que casi nunca pintan nada, y una rejilla les dejaría el hueco de su separación aunque no estén.
   La tabla, la última, se queda con el alto que sobra y lo reclama si no cabe. */
.contactos-page[b-8jktjfp3fx] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ── Header ── (como Clientes: título a la izquierda, CommandBar a la derecha) */
.contactos-header[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.contactos-header-info[b-8jktjfp3fx] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
}

.contactos-title[b-8jktjfp3fx] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.contactos-count[b-8jktjfp3fx] {
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha, igual que en Clientes
   (variantes `cmdbar-inline cmdbar-plain`). */
.contactos-header-actions[b-8jktjfp3fx] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ── Buscador ── */
.contactos-search-bar[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    padding: 6px 12px;
}

.search-icon[b-8jktjfp3fx] {
    font-size: 18px;
    color: #9ca3af;
    flex-shrink: 0;
}

.search-input[b-8jktjfp3fx] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #1f2937;
    background: transparent;
    min-width: 0;
}

    .search-input[b-8jktjfp3fx]::placeholder {
        color: #9ca3af;
    }

/* ── Tabla ──
   El marco, la cabecera, las filas, el estado vacío/cargando y el paginador los pinta <TablaPaginada>
   con su propio CSS; aquí solo va el reparto del alto. */
.contactos-tabla[b-8jktjfp3fx] {
    /* Se queda con el alto sobrante. Contenedor flex-columna: es lo que espera .tp-panel para
       repartirse el alto (flex: 1 1 auto). */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* La tabla marca el suelo del alto: con `min-height: 0` no podría empujar a la página y se
   desplazaría por dentro en vez de crecer la página. */
.contactos-page[b-8jktjfp3fx]  .tp-panel {
    min-height: auto;
}

@media (max-width: 640px) {
    .contactos-header-info[b-8jktjfp3fx] {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .contactos-title[b-8jktjfp3fx] {
        font-size: 20px;
    }
}

/* ── Modal crear ── */
.modal-overlay[b-8jktjfp3fx] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-crear-contacto[b-8jktjfp3fx] {
    background: #ffffff;
    border-radius: 14px;
    /* 560 y no 520: las líneas de email y teléfono llevan valor + tipo + quitar en una fila. */
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

.modal-crear-header[b-8jktjfp3fx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-crear-title-section[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-crear-icon[b-8jktjfp3fx] {
    font-size: 22px;
    color: #3b82f6;
}

.modal-crear-title[b-8jktjfp3fx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.modal-crear-subtitle[b-8jktjfp3fx] {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.btn-close[b-8jktjfp3fx] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 1;
}

    .btn-close:hover[b-8jktjfp3fx] {
        background: #f1f5f9;
        color: #0f172a;
    }

.modal-crear-body[b-8jktjfp3fx] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-crear-footer[b-8jktjfp3fx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
}

/* ── Aviso de duplicado (informa, no bloquea) ── */
.aviso-duplicado[b-8jktjfp3fx] {
    display: flex;
    gap: 10px;
    margin: 0 24px 4px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}

.aviso-duplicado-icono[b-8jktjfp3fx] {
    flex: 0 0 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.aviso-duplicado-cuerpo[b-8jktjfp3fx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aviso-duplicado-titulo[b-8jktjfp3fx] {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

.aviso-duplicado-lista[b-8jktjfp3fx] {
    margin: 0;
    padding-left: 16px;
    font-size: 12.5px;
    color: #78350f;
}

.aviso-duplicado-nota[b-8jktjfp3fx] {
    font-size: 12px;
    color: #a16207;
}

/* ── Formulario ── */
.form-row[b-8jktjfp3fx] {
    display: flex;
    gap: 12px;
    /* Arriba y no estirados: las ayudas de debajo tienen alturas distintas —y algunas aparecen solo a
       veces, como el aviso de NIF duplicado—, así que sin esto las dos cajas de una fila crecerían a la
       altura de la más alta y quedarían desalineadas entre sí. */
    align-items: flex-start;
}

    .form-row .form-field[b-8jktjfp3fx] {
        /* basis 0 para que las dos columnas midan lo mismo aunque su contenido no: con el ancho
           automático, la del texto de ayuda más largo se quedaba con más sitio. */
        flex: 1 1 0;
        min-width: 0;
    }

.form-field[b-8jktjfp3fx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-8jktjfp3fx] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.required[b-8jktjfp3fx] {
    color: #ef4444;
}

.form-input[b-8jktjfp3fx] {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    outline: none;
    color: #1e293b;
    background: #ffffff;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .form-input:focus[b-8jktjfp3fx] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }

    .form-input.input-error[b-8jktjfp3fx] {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
    }

.form-error[b-8jktjfp3fx] {
    font-size: 11px;
    color: #ef4444;
    font-weight: 500;
}

.form-textarea[b-8jktjfp3fx] {
    resize: vertical;
    min-height: 56px;
    line-height: 1.45;
}

/* ── Listas de varios valores (emails, teléfonos) ── */

/* La etiqueta y el "añadir otro" comparten línea: encima de cada lista, sin gastar alto. */
.lista-header[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn-anadir-inline[b-8jktjfp3fx] {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .btn-anadir-inline:hover[b-8jktjfp3fx] {
        background: #eff6ff;
    }

/* Una línea de la lista: el valor manda y el tipo se conforma con lo justo. La separación entre
   líneas la pone el gap del .form-field que las envuelve. */
.entrada-multi[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .entrada-multi .form-input[b-8jktjfp3fx] {
        flex: 1;
        min-width: 0;
    }

.entrada-tipo[b-8jktjfp3fx] {
    width: 124px;
    flex-shrink: 0;
}

.entrada-quitar[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .entrada-quitar:hover:not(:disabled)[b-8jktjfp3fx] {
        background: #fee2e2;
        color: #dc2626;
    }

    /* Con una sola línea no hay nada que quitar: se deja el hueco para que la fila no baile. */
    .entrada-quitar:disabled[b-8jktjfp3fx] {
        opacity: 0;
        cursor: default;
    }

    .entrada-quitar .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 16px;
    }

.entry-error[b-8jktjfp3fx] {
    font-size: 12px;
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .entry-error[b-8jktjfp3fx]::before {
        content: "error";
        font-family: "Material Symbols Rounded";
        font-size: 14px;
        flex-shrink: 0;
    }

/* ── Selector de prioridad del modal de creación ── */
.prioridad-selector[b-8jktjfp3fx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prioridad-opt[b-8jktjfp3fx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .prioridad-opt:hover[b-8jktjfp3fx] {
        border-color: #cbd5e1;
    }

    .prioridad-opt.activo[b-8jktjfp3fx] {
        border-color: #94a3b8;
    }

.form-hint[b-8jktjfp3fx] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

/* Aviso que NO impide guardar: ámbar, no rojo. El rojo se reserva para lo que bloquea, y usarlo aquí
   haría creer que el alta ha fallado cuando solo se está informando. */
.hint-aviso[b-8jktjfp3fx] {
    color: #b45309;
}

.empresa-hint-ok[b-8jktjfp3fx] {
    color: #059669;
    font-weight: 600;
}

/* ── Selector Persona/Empresa del modal de creación ── */
.tipo-selector[b-8jktjfp3fx] {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.tipo-opt[b-8jktjfp3fx] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .tipo-opt:hover[b-8jktjfp3fx] {
        border-color: #cbd5e1;
    }

    .tipo-opt .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 20px;
    }

    .tipo-opt.activo[b-8jktjfp3fx] {
        border-color: #6366f1;
        background: #eef2ff;
        color: #4338ca;
    }

/* ── Buscador de empresa (autocompletar) ── */
.empresa-buscador[b-8jktjfp3fx] {
    position: relative;
}

.empresa-sugerencias[b-8jktjfp3fx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 4px;
}

.empresa-sug-item[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #334155;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

    .empresa-sug-item:hover[b-8jktjfp3fx] {
        background: #f1f5f9;
    }

    .empresa-sug-item .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 18px;
        color: #6366f1;
    }

/* MB6 · la casilla de cada fila para el mailing. La pinta TablaPaginada (plantilla de la columna), de
   ahí el `::deep`. */
.contactos-page[b-8jktjfp3fx]  .contacto-marca {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
    cursor: pointer;
}


/* Papelera de cada fila (columna «Acciones»), con el mismo aspecto que la de Clientes. */
.contacto-acciones-fila[b-8jktjfp3fx] { display: inline-flex; align-items: center; justify-content: center; }
.contacto-accion-btn[b-8jktjfp3fx] { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
                       display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #444653; }
.contacto-accion-btn .material-symbols-outlined[b-8jktjfp3fx] { font-size: 18px; pointer-events: none; }
.contacto-accion-borrar:hover:not(:disabled)[b-8jktjfp3fx] { color: #ba1a1a; background: rgba(186, 26, 26, 0.1); }
.contacto-accion-btn:disabled[b-8jktjfp3fx] { opacity: .35; cursor: default; }

/* ── Imprimir etiquetas de los elegidos ────────────────────────────────────────────────────── */

/* Barra propia y no un botón dentro de la del mailing: las etiquetas no dependen de tener mailing
   contratado. Solo se pinta con alguien marcado, así que no gasta alto cuando no hace falta. */
.contactos-etiquetas[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px solid #c7d7f5;
    border-radius: 9px;
    background: #f8fbff;
}

.contactos-etiquetas .material-symbols-rounded[b-8jktjfp3fx] {
    font-size: 18px;
    color: var(--crm-azul, #2563eb);
}

.contactos-etiquetas-texto[b-8jktjfp3fx] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: #475569;
}

.contactos-etiquetas-btn[b-8jktjfp3fx] {
    flex: none;
    padding: 5px 12px;
    border: 1px solid var(--crm-azul, #2563eb);
    border-radius: 7px;
    background: #fff;
    color: var(--crm-azul, #2563eb);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.contactos-etiquetas-btn:hover[b-8jktjfp3fx] {
    background: var(--crm-azul, #2563eb);
    color: #fff;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/CrmDashboard.razor.rz.scp.css */
/* ===== PANEL CRM: CABECERA, KPIs, AGENDA Y ACCIONES =====

   Las clases cc-* y vp-* son las mismas del panel comercial de ventas (VentasPanelPage): esta
   pantalla es un panel de módulo y se pinta con el patrón que ya usan los demás. Se copian aquí
   porque el CSS de Blazor es scoped y no viaja de un componente a otro. */

/* Sin `flex-wrap`, como en el resto de pantallas: si la barra bajara de línea, su script nunca vería que
   falta sitio y no replegaría los botones al menú «···». */
.cc-header[b-wyydlprtlw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    margin-bottom: 18px;
}

.cc-header > div:first-child[b-wyydlprtlw] { min-width: 0; }

.cc-header[b-wyydlprtlw]  .cc-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.cc-eyebrow[b-wyydlprtlw] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.cc-title[b-wyydlprtlw] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.cc-subtitle[b-wyydlprtlw] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.cc-header-actions[b-wyydlprtlw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-card[b-wyydlprtlw] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    margin-bottom: 24px;
}

.cc-section-title[b-wyydlprtlw] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.cc-list-subtitle[b-wyydlprtlw] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.cc-list-head[b-wyydlprtlw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cc-empty[b-wyydlprtlw] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.cc-error-box[b-wyydlprtlw] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* KPIs */
.vp-kpis[b-wyydlprtlw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.vp-kpi[b-wyydlprtlw] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #cbd5e1;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.vp-kpi-label[b-wyydlprtlw] {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}

.vp-kpi-valor[b-wyydlprtlw] {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vp-kpi-hint[b-wyydlprtlw] {
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
}

.vp-kpi-blue[b-wyydlprtlw] {
    border-left-color: #2563eb;
}

.vp-kpi-purple[b-wyydlprtlw] {
    border-left-color: #7c3aed;
}

.vp-kpi-orange[b-wyydlprtlw] {
    border-left-color: #d97706;
}

/* Tabla de «Lo que toca hacer» */
.cc-grid-wrapper[b-wyydlprtlw] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.cc-table[b-wyydlprtlw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .cc-table thead th[b-wyydlprtlw] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .cc-table tbody td[b-wyydlprtlw] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .cc-table tbody tr:last-child td[b-wyydlprtlw] {
        border-bottom: 0;
    }

.cc-row:hover[b-wyydlprtlw] {
    background: #f8fbff;
}

.pc-col-tablero[b-wyydlprtlw] {
    width: 220px;
}

.pc-col-fecha[b-wyydlprtlw] {
    width: 170px;
    white-space: nowrap;
}

.pc-col-accion[b-wyydlprtlw] {
    width: 90px;
    text-align: right;
    white-space: nowrap;
}

.cc-badge[b-wyydlprtlw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pc-badge-tablero[b-wyydlprtlw] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.pc-badge-atrasada[b-wyydlprtlw] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    margin-left: 8px;
}

/* Acciones frecuentes */
.pc-acciones-card[b-wyydlprtlw] {
    margin-top: 32px;
}

.vp-acciones[b-wyydlprtlw] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vp-accion[b-wyydlprtlw] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .vp-accion:hover[b-wyydlprtlw] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

.vp-accion-ico[b-wyydlprtlw] {
    font-size: 22px;
    line-height: 1;
    color: #2563eb;
}

.vp-accion-texto[b-wyydlprtlw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vp-accion-titulo[b-wyydlprtlw] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.vp-accion-desc[b-wyydlprtlw] {
    font-size: 11.5px;
    color: #6b7280;
}

/* Botones del patrón cc-* */
.cc-btn[b-wyydlprtlw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cc-btn-mini[b-wyydlprtlw] {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

.cc-btn-ico[b-wyydlprtlw] {
    font-size: 18px;
    line-height: 1;
}

.cc-btn-primary[b-wyydlprtlw] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cc-btn-primary:hover:not(:disabled)[b-wyydlprtlw] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cc-btn-ghost[b-wyydlprtlw] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cc-btn-ghost:hover:not(:disabled)[b-wyydlprtlw] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

/* Rótulo de sección: los tableros ya no son el título de la pantalla, son una sección de ella. */
.pc-seccion-titulo[b-wyydlprtlw] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
    letter-spacing: -0.01em;
}

.pc-seccion-head[b-wyydlprtlw] {
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .vp-kpis[b-wyydlprtlw],
    .vp-acciones[b-wyydlprtlw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vp-kpis[b-wyydlprtlw],
    .vp-acciones[b-wyydlprtlw] {
        grid-template-columns: 1fr;
    }
}

/* ===== PÁGINA ===== */
.home-page[b-wyydlprtlw] {
    padding: 0 0 32px;   /* el borde lo pone .main-body, como en el resto */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    min-height: 100%;
}

/* A todo el ancho de la pantalla, como las demás: sin tope ni centrado. */
.home-container[b-wyydlprtlw] {
    width: 100%;
}

/* ===== CABECERA ===== */
.header-section[b-wyydlprtlw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

/* Barra de herramientas: buscador + botón crear */
.header-tools[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.title-group h1[b-wyydlprtlw] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.02em;
}

.subtitle[b-wyydlprtlw] {
    color: #6b7280;
    margin: 4px 0 0 0;
    font-size: 0.9rem;
}

/* Color y hover: .btn-azul-crm (app.css). Aquí, solo la forma. */
.btn-create-main[b-wyydlprtlw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-create-main:active[b-wyydlprtlw] {
        transform: translateY(0);
    }

    .btn-create-main .material-symbols-rounded[b-wyydlprtlw] {
        font-size: 20px;
    }

/* Cabecera responsive: en pantallas estrechas las herramientas ocupan el ancho
   completo y el buscador crece para no quedar "partido". */
@media (max-width: 680px) {
    .header-tools[b-wyydlprtlw] {
        width: 100%;
    }

    .contactos-search-bar[b-wyydlprtlw] {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

/* ===== BUSCADOR ===== */
.contactos-search-bar[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    width: 280px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .contactos-search-bar:focus-within[b-wyydlprtlw] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.search-icon[b-wyydlprtlw] {
    color: #9ca3af;
    font-size: 20px;
}

.search-input[b-wyydlprtlw] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: #111827;
}

    .search-input[b-wyydlprtlw]::placeholder {
        color: #9ca3af;
    }

/* ===== REJILLA DE TABLEROS ===== */
.board-grid[b-wyydlprtlw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.loading-text[b-wyydlprtlw] {
    color: #6b7280;
    font-size: 0.9rem;
    padding: 20px 0;
}

/* Estado vacío: sin caja ni borde. Un recuadro punteado alrededor de un hueco lo hace parecer un
   contenedor roto; sin marco, lo que se lee es el mensaje. */
.empty-state[b-wyydlprtlw] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 24px 30px;
    color: #6b7280;
}

    .empty-state-ico[b-wyydlprtlw] {
        font-size: 30px;
        color: #c7d2e0;
        margin-bottom: 8px;
    }

    .empty-state h3[b-wyydlprtlw] {
        color: #111827;
        margin: 0 0 4px;
        font-size: 0.98rem;
        font-weight: 650;
    }

    .empty-state p[b-wyydlprtlw] {
        margin: 0 0 14px;
        font-size: 0.85rem;
        max-width: 380px;
        line-height: 1.5;
    }

/* Sección presente pero sin contenido: una línea, sin caja ni icono. Lo que importa de ella es que
   se sepa que está, no llamar la atención. */
.seccion-vacia[b-wyydlprtlw] {
    margin: 0;
    padding: 4px 0 8px;
    color: #98a2b3;
    font-size: 0.85rem;
}

/* ===== FORMULARIO NUEVO TABLERO (overlay) ===== */
.create-form-wrapper[b-wyydlprtlw] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeInBackground-b-wyydlprtlw 0.2s ease-out;
}

.form-card[b-wyydlprtlw] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.20);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    animation: zoomInCard-b-wyydlprtlw 0.2s ease-out;
}

.form-header[b-wyydlprtlw] {
    background: #ffffff;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111827;
    font-size: 1rem;
    font-weight: 650;
    border-bottom: 1px solid #f0f1f3;
}

.close-btn[b-wyydlprtlw] {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .close-btn:hover[b-wyydlprtlw] {
        background: #f3f4f6;
        color: #374151;
    }

.form-body[b-wyydlprtlw] {
    padding: 22px;
}

    .form-body > label[b-wyydlprtlw] {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

.alert[b-wyydlprtlw] {
    font-size: 0.85rem;
}

.form-input[b-wyydlprtlw] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    margin-bottom: 4px;
    font-size: 0.92rem;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-input:focus[b-wyydlprtlw] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

    .form-input[b-wyydlprtlw]::placeholder {
        color: #9ca3af;
    }

/* ===== SELECTOR DE TIPO ===== */
.tipo-tablero-selector[b-wyydlprtlw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 22px 0;
}

.tipo-option[b-wyydlprtlw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

    .tipo-option:hover[b-wyydlprtlw] {
        border-color: #c7d2fe;
        background: #f8faff;
    }

    .tipo-option.selected[b-wyydlprtlw] {
        border-color: #2563eb;
        background: #eff4ff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

    .tipo-option .tipo-nombre[b-wyydlprtlw] {
        font-weight: 650;
        color: #111827;
        font-size: 0.92rem;
    }

    .tipo-option .tipo-desc[b-wyydlprtlw] {
        color: #6b7280;
        font-size: 0.78rem;
    }

/* ===== ACCIONES FORM ===== */
.form-actions[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Color, hover y estado deshabilitado: .btn-azul-crm (app.css). Aquí, solo la forma. */
.btn-confirm[b-wyydlprtlw] {
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
}

    .btn-confirm:disabled[b-wyydlprtlw] {
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-wyydlprtlw] {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 10px 16px;
    border-radius: 9px;
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-cancel:hover[b-wyydlprtlw] {
        background: #f3f4f6;
        color: #111827;
    }

/* Opción "Personalizado": el nombre lleva icono en línea. */
.tipo-option-custom .tipo-nombre[b-wyydlprtlw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tipo-option-custom .tipo-nombre .material-symbols-rounded[b-wyydlprtlw] {
        font-size: 18px;
        color: #2563eb;
    }

/* ===== CONSTRUCTOR DE COLUMNAS (tablero a medida) ===== */
.form-card-wide[b-wyydlprtlw] {
    max-width: 560px;
}

.cols-intro[b-wyydlprtlw] {
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.col-add-bar[b-wyydlprtlw] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

    .col-add-bar .form-input[b-wyydlprtlw] {
        margin-bottom: 0;
    }

    .col-add-bar .btn-confirm[b-wyydlprtlw] {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .col-add-bar .btn-confirm .material-symbols-rounded[b-wyydlprtlw] {
            font-size: 18px;
        }

.cols-list[b-wyydlprtlw] {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
    padding: 2px;
}

.col-row[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease;
}

    .col-row.col-row-warn[b-wyydlprtlw] {
        border-color: #fca5a5;
        background: #fef2f2;
    }

.col-index[b-wyydlprtlw] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 650;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 6px;
}

.col-name-input[b-wyydlprtlw] {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.col-row-actions[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.col-mini-btn[b-wyydlprtlw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .col-mini-btn:hover:not(:disabled)[b-wyydlprtlw] {
        background: #f3f4f6;
        color: #111827;
    }

    .col-mini-btn:disabled[b-wyydlprtlw] {
        color: #d1d5db;
        cursor: not-allowed;
    }

    .col-mini-btn .material-symbols-rounded[b-wyydlprtlw] {
        font-size: 18px;
    }

    .col-mini-btn.col-del:hover:not(:disabled)[b-wyydlprtlw] {
        background: #fef2f2;
        color: #dc2626;
    }

/* Separador "insertar aquí": discreto, se revela al pasar el ratón por la lista. */
.col-insert-divider[b-wyydlprtlw] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: #c7d2fe;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.cols-list:hover .col-insert-divider[b-wyydlprtlw] {
    opacity: 0.6;
}

.col-insert-divider:hover[b-wyydlprtlw] {
    opacity: 1;
    color: #2563eb;
}

.col-insert-divider .material-symbols-rounded[b-wyydlprtlw] {
    font-size: 15px;
    background: #eff4ff;
    border-radius: 50%;
    padding: 1px;
}

.cols-empty[b-wyydlprtlw] {
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    padding: 24px 12px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
}

.cols-hint[b-wyydlprtlw] {
    margin-top: 12px;
    font-size: 0.78rem;
    color: #6b7280;
}

.cols-warn[b-wyydlprtlw] {
    color: #dc2626;
    font-weight: 600;
}

.form-actions .btn-confirm .material-symbols-rounded[b-wyydlprtlw] {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
}

/* ===== MODAL BIENVENIDA ===== */
.modal-overlay[b-wyydlprtlw] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeInBackground-b-wyydlprtlw 0.15s ease-out;
}

.modal-card[b-wyydlprtlw] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.20);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: zoomInCard-b-wyydlprtlw 0.18s ease-out;
}

.modal-card-header[b-wyydlprtlw] {
    padding: 24px 24px 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .modal-card-header .modal-icon[b-wyydlprtlw] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #eff4ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .modal-card-header .modal-icon .material-symbols-rounded[b-wyydlprtlw] {
            font-size: 22px;
        }

    .modal-card-header h3[b-wyydlprtlw] {
        font-size: 1.1rem;
        font-weight: 650;
        color: #111827;
        margin: 0;
    }

.modal-card-body[b-wyydlprtlw] {
    padding: 12px 24px 22px 24px;
}

    .modal-card-body p[b-wyydlprtlw] {
        color: #6b7280;
        font-size: 0.92rem;
        margin: 0;
        line-height: 1.6;
    }

.modal-card-footer[b-wyydlprtlw] {
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #f0f1f3;
    display: flex;
    justify-content: flex-end;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeInBackground-b-wyydlprtlw {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomInCard-b-wyydlprtlw {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/ErpPowergest/Presentation/Crm/Pages/CrmInformes.razor.rz.scp.css */
/* Pantalla de informes: cabecera, pestañas, filtros y la biblioteca de informes con su tabla.
   Los estilos del panel viven en PanelCrm.razor.css, con su marcado, porque ese trozo se usa también
   fuera de esta pantalla. */

/* A todo el ancho de la pantalla, como las demás: sin tope ni centrado (el borde lo pone .main-body). */
.informes-page[b-adj08c38oi]{ padding:0 0 32px; width:100%; }

/* Cabecera como la del panel de Marketing (.mk-cabecera): icono en su cuadro, título y subtítulo. */
.informes-header[b-adj08c38oi]{ display:flex; align-items:flex-start; gap:.75rem; min-width:0; }
.informes-header-icono[b-adj08c38oi]{ flex:0 0 auto; font-size:28px; line-height:1; color:#0f766e; background:#e6f4f1;
    border-radius:10px; padding:8px; }
.informes-textos[b-adj08c38oi]{ flex:1 1 auto; min-width:0; }
.informes-title[b-adj08c38oi]{ font-size:22px; font-weight:850; line-height:1.15; margin:0; color:#1f2937; letter-spacing:-.02em; }
.informes-sub[b-adj08c38oi]{ color:#6b7280; font-size:13px; margin-top:4px; line-height:1.45; }

/* Pestañas Panel / Informes / Listados: las pastillas de Marketing (.mk-pestana), con el icono en un círculo y
   repartidas a todo el ancho. */
.informes-tabs[b-adj08c38oi]{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.informes-tab[b-adj08c38oi]{ display:flex; align-items:center; justify-content:center; gap:8px; flex:1 1 auto; min-width:0;
    padding:7px 14px 7px 8px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#6b7280;
    font-size:13px; font-weight:700; cursor:pointer;
    transition:border-color .12s ease, color .12s ease, background-color .12s ease; }
.informes-tab-ico[b-adj08c38oi]{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
    border-radius:50%; background:#f3f4f6; color:#6b7280; }
.informes-tab-ico .material-symbols-rounded[b-adj08c38oi]{ font-size:15px; }
.informes-tab-txt[b-adj08c38oi]{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.informes-tab:hover[b-adj08c38oi]{ border-color:#a7dbd2; color:#0f766e; }
.informes-tab:focus-visible[b-adj08c38oi]{ outline:2px solid #0f766e; outline-offset:2px; }
.informes-tab.activa[b-adj08c38oi]{ border-color:#0f766e; background:#e6f4f1; color:#0f766e; }
.informes-tab.activa .informes-tab-ico[b-adj08c38oi]{ background:#0f766e; color:#fff; }
.informes-tab.proximo[b-adj08c38oi]{ cursor:not-allowed; }
.informes-tab.proximo span[b-adj08c38oi]{ font-size:10.5px; font-weight:600; background:#f1f5f9; color:#94a3b8;
    padding:1px 7px; border-radius:999px; margin-left:6px; }

/* Filtros */
.informes-filtros[b-adj08c38oi]{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    margin:16px 0 18px; }
.periodo[b-adj08c38oi]{ display:flex; gap:6px; flex-wrap:wrap; }
.periodo-chip[b-adj08c38oi]{ background:#fff; border:1px solid #e2e8f0; color:#475569; border-radius:999px; padding:6px 13px;
    font-size:12.5px; font-weight:600; cursor:pointer; }
.periodo-chip.activo[b-adj08c38oi]{ background:#0f766e; border-color:#0f766e; color:#fff; }

.informes-loading[b-adj08c38oi]{ display:flex; align-items:center; gap:8px; color:#64748b; font-size:14px; padding:40px 0; justify-content:center; }
.loading-spin[b-adj08c38oi]{ animation:girar-b-adj08c38oi 1s linear infinite; }
@keyframes girar-b-adj08c38oi{ to{ transform:rotate(360deg); } }

/* Tarjeta (la comparten la biblioteca y el detalle del informe) */
.panel-card[b-adj08c38oi]{ background:#fff; border:1px solid #e6eaef; border-radius:14px; padding:18px 20px;
    box-shadow:0 1px 2px rgba(15,23,42,.05); }
.panel-card-titulo[b-adj08c38oi]{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:#8493a8;
    font-weight:700; margin:0 0 16px; display:flex; align-items:center; }
.panel-card-nota[b-adj08c38oi]{ color:#8493a8; font-size:11.5px; margin-top:12px; }

/* Tabla del informe abierto */
.rc-scroll[b-adj08c38oi]{ overflow-x:auto; }
.rc-tabla[b-adj08c38oi]{ width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.rc-tabla th[b-adj08c38oi], .rc-tabla td[b-adj08c38oi]{ padding:9px 8px; text-align:right; border-bottom:1px solid #eef2f7; white-space:nowrap; }
.rc-tabla th.rc-izq[b-adj08c38oi], .rc-tabla td.rc-izq[b-adj08c38oi]{ text-align:left; }
.rc-tabla thead th[b-adj08c38oi]{ color:#8493a8; font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; }
.rc-tabla tbody tr:hover[b-adj08c38oi]{ background:#f8fafc; }
.rc-tabla tbody tr:last-child td[b-adj08c38oi]{ border-bottom:none; }
.rc-tabla td.rc-izq[b-adj08c38oi]{ font-weight:600; color:#0f172a; }

.rc-vacio[b-adj08c38oi]{ color:#8493a8; font-size:13px; padding:8px 2px; }

/* Pestaña Informes (biblioteca + detalle) */
.inf-tab[b-adj08c38oi]{ display:grid; grid-template-columns:250px 1fr; gap:14px; align-items:start; }
@media (max-width:820px){ .inf-tab[b-adj08c38oi]{ grid-template-columns:1fr; } }
.inf-biblio[b-adj08c38oi]{ display:flex; flex-direction:column; gap:4px; padding:12px; }
.inf-item[b-adj08c38oi]{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; border:1px solid transparent;
    background:none; text-align:left; font-size:13px; color:#475569; cursor:pointer; }
.inf-item:hover[b-adj08c38oi]{ background:#f8fafc; }
.inf-item.activo[b-adj08c38oi]{ background:#e6f4f1; color:#0f766e; border-color:#a7dbd2; font-weight:700; }
.inf-item .material-symbols-rounded[b-adj08c38oi]{ font-size:19px; }

.inf-detalle-head[b-adj08c38oi]{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.inf-detalle-head .panel-card-titulo[b-adj08c38oi]{ margin:0; }
.inf-export[b-adj08c38oi]{ display:inline-flex; align-items:center; gap:6px; background:#0f766e; color:#fff; border:none;
    border-radius:9px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer; }
.inf-export:disabled[b-adj08c38oi]{ opacity:.55; cursor:not-allowed; }
.inf-export .material-symbols-rounded[b-adj08c38oi]{ font-size:17px; }

/* Filas que abren el detalle (el cuadro lo pinta DrillCrm, con su propio CSS) */
.inf-fila-click[b-adj08c38oi]{ cursor:pointer; }
.inf-fila-click:hover[b-adj08c38oi]{ background:#f0fdfa !important; }
.inf-fila-flecha[b-adj08c38oi]{ color:#cbd5e1; width:24px; }
.inf-fila-click:hover .inf-fila-flecha[b-adj08c38oi]{ color:#0f766e; }

/* ═══════════ Pulido visual profesional (misma estética de la app) ═══════════ */
.informes-page[b-adj08c38oi]{ padding:0 0 32px; }   /* a todo el ancho, como Marketing: el borde lo pone .main-body */

/* Tarjetas: borde y sombra más suaves y en capas */
.panel-card[b-adj08c38oi]{ border:1px solid #edf0f4;
    box-shadow:0 1px 2px rgba(16,24,40,.03), 0 6px 16px -6px rgba(16,24,40,.08);
    padding:20px 22px; margin-bottom:14px; }

/* Encabezado de sección con acento teal */
.panel-card-titulo[b-adj08c38oi]{ position:relative; padding-bottom:12px; margin-bottom:16px;
    border-bottom:1px solid #f1f3f6; color:#475467; }
.panel-card-titulo[b-adj08c38oi]::after{ content:""; position:absolute; left:0; bottom:-1px; width:32px; height:2px;
    background:#0f766e; border-radius:2px; }

/* Tablas: encabezado sutil + hover suave */
.rc-tabla thead th[b-adj08c38oi]{ background:#fafbfc; border-bottom:1px solid #edf0f4; padding-top:10px; padding-bottom:10px; }
.rc-tabla tbody tr[b-adj08c38oi]{ transition:background .12s ease; }
.rc-tabla tbody td[b-adj08c38oi]{ border-bottom-color:#f2f4f7; }

/* Filas interactivas: afordancia clara */
.inf-fila-click[b-adj08c38oi]{ cursor:pointer; }
.inf-fila-click:hover td[b-adj08c38oi]{ background:#f0fdfa; }
.inf-fila-flecha[b-adj08c38oi]{ color:#d7dde5; }
.inf-fila-click:hover .inf-fila-flecha[b-adj08c38oi]{ color:#0f766e; }

/* Chips de periodo y pestañas */
.periodo-chip[b-adj08c38oi]{ transition:all .15s ease; }
.periodo-chip:hover:not(.activo)[b-adj08c38oi]{ border-color:#cbd5e1; color:#0f172a; background:#f8fafc; }


/* ── Listados ──────────────────────────────────────────────────────────────────────────────────

   El verde es EL DE ESTA PANTALLA: #0f766e, el mismo de la pestaña activa, del chip de periodo
   elegido y del informe abierto en la biblioteca, con #e6f4f1 y #a7dbd2 de apoyo. Se probó antes con
   un verde hierba (#16a34a) y el usuario lo cortó a la primera —«el verde que se usa en las páginas
   anteriores, no ese fluorescente»—: un segundo verde en la misma pantalla se lee como otra marca,
   no como la misma casa.                                                                            */

.lst-tab[b-adj08c38oi] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 4px;
}

.lst-rejilla[b-adj08c38oi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    /* Las tres a la MISMA altura: son hermanas, y una más alta que otra se lee como más importante. */
    align-items: stretch;
}

.lst-card[b-adj08c38oi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .lst-card:hover[b-adj08c38oi] {
        border-color: #a7dbd2;
        box-shadow: 0 10px 28px -18px rgba(15, 118, 110, .55);
        transform: translateY(-1px);
    }

/* Cabecera: el icono en su pastilla, y el título al lado. */
.lst-card-cab[b-adj08c38oi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lst-card-icono[b-adj08c38oi] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e6f4f1;
    color: #115e59;
    font-size: 19px;
}

.lst-card-tit[b-adj08c38oi] {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: #0f172a;
}

.lst-card-txt[b-adj08c38oi] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #475569;
}

    .lst-card-txt b[b-adj08c38oi] {
        font-weight: 600;
        color: #334155;
    }

/* El pie empuja la acción al fondo: así los tres botones quedan a la misma altura aunque el texto
   de arriba ocupe distinto. */
.lst-card-pie[b-adj08c38oi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.lst-fecha-campo[b-adj08c38oi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.lst-fecha[b-adj08c38oi] {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #dde4ec;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #0f172a;
}

    .lst-fecha:focus[b-adj08c38oi] {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
    }

.lst-btn[b-adj08c38oi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 10px;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

    .lst-btn:hover:not(:disabled)[b-adj08c38oi] {
        background: #115e59;
        box-shadow: 0 8px 20px -10px rgba(15, 118, 110, .8);
    }

    .lst-btn:focus-visible[b-adj08c38oi] {
        outline: 2px solid #115e59;
        outline-offset: 2px;
    }

    .lst-btn:disabled[b-adj08c38oi] {
        background: #cbd5e1;
        cursor: default;
    }

    .lst-btn .material-symbols-rounded[b-adj08c38oi] {
        font-size: 17px;
    }

/* La nota, debajo y discreta: es una aclaración, no un titular. */
.lst-nota[b-adj08c38oi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #94a3b8;
}

    .lst-nota > .material-symbols-rounded[b-adj08c38oi] {
        flex: none;
        margin-top: 1px;
        font-size: 15px;
    }

    .lst-nota b[b-adj08c38oi] {
        font-weight: 600;
        color: #64748b;
    }
/* _content/ErpPowergest/Presentation/Crm/Pages/EnviosWebPage.razor.rz.scp.css */
/* Envíos de la web. CSS propio y aislado (scoped). Los desplegables toman su aspecto de desplegables.css. */

.fwe-page[b-u11z2yw87n] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fwe-header[b-u11z2yw87n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.fwe-title[b-u11z2yw87n] {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.fwe-subtitle[b-u11z2yw87n] {
    margin-top: 4px;
    max-width: 820px;
    font-size: 14px;
    color: #6b7280;
}

.fwe-header[b-u11z2yw87n]  .fwe-header-actions {
    flex-shrink: 0;
}

/* ── Cifras (filtran al pulsarlas) ─────────────────────────────────────────────────────── */

.fwe-cifras[b-u11z2yw87n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.fwe-cifra[b-u11z2yw87n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fwe-cifra:hover[b-u11z2yw87n] {
    border-color: #c7d2fe;
    background: #f8faff;
}

.fwe-cifra.activa[b-u11z2yw87n] {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px #4f46e5;
}

.fwe-cifra.fwe-ambar .fwe-cifra-num[b-u11z2yw87n] {
    color: #b45309;
}

.fwe-cifra-num[b-u11z2yw87n] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
}

.fwe-cifra-rotulo[b-u11z2yw87n] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

/* ── Tarjetas y filtros ────────────────────────────────────────────────────────────────── */

.fwe-card[b-u11z2yw87n] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
}

.fwe-card-titulo[b-u11z2yw87n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.fwe-card-titulo .material-symbols-rounded[b-u11z2yw87n] {
    font-size: 20px;
    vertical-align: -4px;
    color: #4f46e5;
}

.fwe-filtros[b-u11z2yw87n] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.fwe-buscador[b-u11z2yw87n] {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
}

.fwe-buscador input[b-u11z2yw87n] {
    flex: 1;
    height: 36px;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
}

.fwe-campo select[b-u11z2yw87n] {
    height: 38px;
    min-width: 220px;
}

.fwe-vacio[b-u11z2yw87n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 4px;
    font-size: 14px;
    color: #6b7280;
}

/* ── Tabla ─────────────────────────────────────────────────────────────────────────────── */

.fwe-tabla[b-u11z2yw87n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fwe-tabla th[b-u11z2yw87n] {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-align: left;
}

.fwe-tabla td[b-u11z2yw87n] {
    padding: 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.fwe-tabla tbody tr[b-u11z2yw87n] {
    cursor: pointer;
}

.fwe-tabla tbody tr:hover[b-u11z2yw87n] {
    background: #f9fafb;
}

.fwe-tabla tbody tr.activa[b-u11z2yw87n] {
    background: #eef2ff;
}

.fwe-fecha[b-u11z2yw87n] {
    white-space: nowrap;
    color: #6b7280;
}

.fwe-detalle[b-u11z2yw87n] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.fwe-estado[b-u11z2yw87n] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.fwe-verde[b-u11z2yw87n] {
    background: #dcfce7;
    color: #166534;
}

.fwe-ambar[b-u11z2yw87n] {
    background: #fef3c7;
    color: #92400e;
}

.fwe-rojo[b-u11z2yw87n] {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Detalle ───────────────────────────────────────────────────────────────────────────── */

.fwe-aviso[b-u11z2yw87n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 13px;
    color: #92400e;
}

.fwe-aviso-error[b-u11z2yw87n] {
    background: #fef2f2;
    color: #991b1b;
}

.fwe-datos[b-u11z2yw87n] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0 0 12px;
    font-size: 14px;
}

.fwe-datos dt[b-u11z2yw87n] {
    font-weight: 600;
    color: #6b7280;
}

.fwe-datos dd[b-u11z2yw87n] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #111827;
}

.fwe-acciones[b-u11z2yw87n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fwe-btn[b-u11z2yw87n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fwe-btn:hover:not(:disabled)[b-u11z2yw87n] {
    background: #f3f4f6;
}

.fwe-btn:disabled[b-u11z2yw87n] {
    opacity: .5;
    cursor: default;
}

.fwe-btn .material-symbols-rounded[b-u11z2yw87n] {
    font-size: 18px;
}

.fwe-btn-primario[b-u11z2yw87n] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.fwe-btn-primario:hover:not(:disabled)[b-u11z2yw87n] {
    background: #4338ca;
}

.fwe-btn-peligro[b-u11z2yw87n] {
    color: #b91c1c;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/FichaCliente.razor.rz.scp.css */
.ficha-page[b-qnjt1svo9s] {
    padding: 20px;
}

/* Header */
.ficha-header[b-qnjt1svo9s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ficha-header-nav-group[b-qnjt1svo9s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ficha-header-nav[b-qnjt1svo9s] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.btn-nav[b-qnjt1svo9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-nav:hover:not(:disabled)[b-qnjt1svo9s] {
    background: #f1f5f9;
}

.btn-nav:disabled[b-qnjt1svo9s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-volver[b-qnjt1svo9s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

    .btn-volver:hover[b-qnjt1svo9s] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    }

/* Acciones */
.ficha-header-acciones[b-qnjt1svo9s] {
    display: flex;
    gap: 10px;
}

/* Estado */
.btn-estado-toggle[b-qnjt1svo9s] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Track */
.toggle-track[b-qnjt1svo9s] {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background-color: #e5e7eb;
    position: relative;
    transition: background-color 0.25s ease;
}

/* Thumb */
.toggle-thumb[b-qnjt1svo9s] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ACTIVO */
.btn-estado-toggle.activo .toggle-track[b-qnjt1svo9s] {
    background-color: #22c55e;
}

.btn-estado-toggle.activo .toggle-thumb[b-qnjt1svo9s] {
    transform: translateX(20px);
}

/* Texto */
.toggle-label[b-qnjt1svo9s] {
    font-size: 14px;
    font-weight: 500;
}
/* Secciones */
.ficha-seccion[b-qnjt1svo9s] {
    margin-bottom: 24px;
}

.ficha-seccion-titulo[b-qnjt1svo9s] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Grid */
.ficha-grid[b-qnjt1svo9s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* Campos */
.ficha-campo[b-qnjt1svo9s] {
    display: flex;
    flex-direction: column;
}

.ficha-campo--full[b-qnjt1svo9s] {
    grid-column: 1 / -1;
}

/* Valores */
.ficha-valor[b-qnjt1svo9s] {
    font-size: 14px;
    color: #111;
}

.ficha-valor--readonly[b-qnjt1svo9s] {
    color: #6b7280;
}

.ficha-valor--pre[b-qnjt1svo9s] {
    white-space: pre-wrap;
}

/* Inputs */
.ficha-campo input[b-qnjt1svo9s],
.ficha-campo textarea[b-qnjt1svo9s],
.ficha-campo select[b-qnjt1svo9s] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 8px;
}

/* El select NO: su apariencia la pone css/desplegables.css, que sin ella no podría pintar su lista. */
.ficha-campo input[b-qnjt1svo9s],
.ficha-campo textarea[b-qnjt1svo9s] {
    appearance: none;
}

/* Loading */
.ficha-loading[b-qnjt1svo9s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Not found */
.ficha-not-found[b-qnjt1svo9s] {
    text-align: center;
    padding: 40px;
}

.ficha-not-found-actions[b-qnjt1svo9s] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

/* Error */
.ficha-error[b-qnjt1svo9s] {
    margin-bottom: 16px;
}

/* INPUT NORMAL (modo edición) */
.input-ficha[b-qnjt1svo9s] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    transition: all 0.2s ease;
    font-size: 14px;
}

    /* HOVER / FOCUS */
    .input-ficha:focus[b-qnjt1svo9s] {
        outline: none;
        border-color: #6366f1; /* indigo */
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
    }

/* MODO SOLO LECTURA */
.input-ficha--readonly[b-qnjt1svo9s] {
    background-color: #f3f4f6; /* gris claro */
    color: #374151;
    cursor: default;
    border-color: #e5e7eb;
}

    /* Evita efecto focus en readonly */
    .input-ficha--readonly:focus[b-qnjt1svo9s] {
        box-shadow: none;
        border-color: #e5e7eb;
    }

    /* Opcional: quitar cursor de texto */
    .input-ficha--readonly[readonly][b-qnjt1svo9s] {
        pointer-events: none;
    }
/* _content/ErpPowergest/Presentation/Crm/Pages/FormulariosWebPage.razor.rz.scp.css */
/* Formularios de la web. CSS propio y aislado (scoped), como el resto de pantallas del ERP: sin él la pantalla se
   sirve sin estilo. Los desplegables toman su aspecto de desplegables.css: aquí solo alto y ancho. */

.fw-page[b-5tqtufvqwn] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Cabecera ──────────────────────────────────────────────────────────────────────────── */

.fw-header[b-5tqtufvqwn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.fw-title[b-5tqtufvqwn] {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.fw-subtitle[b-5tqtufvqwn] {
    margin-top: 4px;
    max-width: 820px;
    font-size: 14px;
    color: #6b7280;
}

.fw-header[b-5tqtufvqwn]  .fw-header-actions {
    flex-shrink: 0;
}

/* ── Columnas: la lista a la izquierda, el formulario abierto a la derecha ───────────────── */

.fw-columnas[b-5tqtufvqwn] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .fw-columnas[b-5tqtufvqwn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fw-editor[b-5tqtufvqwn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fw-card[b-5tqtufvqwn] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
}

.fw-card-titulo[b-5tqtufvqwn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.fw-card-titulo .material-symbols-rounded[b-5tqtufvqwn] {
    font-size: 20px;
    color: #4f46e5;
}

.fw-vacio[b-5tqtufvqwn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 4px;
    font-size: 14px;
    color: #6b7280;
}

.fw-nota[b-5tqtufvqwn] {
    margin-bottom: 10px;
    font-size: 13px;
    color: #6b7280;
}

.fw-nota a[b-5tqtufvqwn] {
    color: #4f46e5;
}

/* ── Lista de formularios ──────────────────────────────────────────────────────────────── */

.fw-lista ul[b-5tqtufvqwn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fw-lista button[b-5tqtufvqwn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fw-lista button:hover:not(:disabled)[b-5tqtufvqwn] {
    background: #f3f4f6;
}

.fw-lista button.activa[b-5tqtufvqwn] {
    border-color: #4f46e5;
    background: #eef2ff;
}

.fw-nombre[b-5tqtufvqwn] {
    font-weight: 700;
    color: #111827;
}

.fw-secundario[b-5tqtufvqwn] {
    font-size: 12px;
    color: #6b7280;
}

.fw-chip[b-5tqtufvqwn] {
    display: inline-block;
    margin-right: 6px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fw-chip-off[b-5tqtufvqwn] {
    background: #fef3c7;
    color: #92400e;
}

/* ── Campos ────────────────────────────────────────────────────────────────────────────── */

.fw-campos[b-5tqtufvqwn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 14px;
    align-items: end;
}

.fw-campo[b-5tqtufvqwn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fw-ancho[b-5tqtufvqwn] {
    margin-top: 10px;
}

.fw-campo label[b-5tqtufvqwn],
.fw-check[b-5tqtufvqwn] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.fw-hint[b-5tqtufvqwn] {
    font-weight: 400;
    color: #9ca3af;
}

.fw-campo input[b-5tqtufvqwn],
.fw-campo select[b-5tqtufvqwn],
.fw-campo textarea[b-5tqtufvqwn],
.fw-tabla input[b-5tqtufvqwn],
.fw-tabla textarea[b-5tqtufvqwn] {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

.fw-campo textarea[b-5tqtufvqwn],
.fw-tabla textarea[b-5tqtufvqwn] {
    resize: vertical;
}

.fw-check[b-5tqtufvqwn] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

/* ── Tabla de campos ───────────────────────────────────────────────────────────────────── */

.fw-tabla[b-5tqtufvqwn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fw-tabla th[b-5tqtufvqwn] {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-align: left;
}

.fw-tabla td[b-5tqtufvqwn] {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.fw-tipo[b-5tqtufvqwn] {
    white-space: nowrap;
    font-weight: 600;
    color: #374151;
}

.fw-centro[b-5tqtufvqwn] {
    text-align: center;
}

.fw-acciones-fila[b-5tqtufvqwn] {
    white-space: nowrap;
}

.fw-icono[b-5tqtufvqwn] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.fw-icono:disabled[b-5tqtufvqwn] {
    opacity: .4;
    cursor: default;
}

.fw-icono .material-symbols-rounded[b-5tqtufvqwn] {
    font-size: 18px;
}

.fw-peligro[b-5tqtufvqwn] {
    color: #b91c1c;
}

.fw-anadir[b-5tqtufvqwn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    color: #6b7280;
}

.fw-btn[b-5tqtufvqwn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fw-btn:hover[b-5tqtufvqwn] {
    background: #f3f4f6;
}

.fw-btn .material-symbols-rounded[b-5tqtufvqwn] {
    font-size: 16px;
}

.fw-aviso[b-5tqtufvqwn] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
}

.fw-separado[b-5tqtufvqwn] {
    margin-top: 10px;
}

/* ── Código corto ──────────────────────────────────────────────────────────────────────── */

.fw-codigo[b-5tqtufvqwn] {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f4f6;
    font-size: 14px;
    user-select: all;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/LeadsDemoPage.razor.rz.scp.css */
/* LD3 — Interesados en la demo.
   CSS propio y aislado (scoped), como el resto de pantallas del ERP. Sin él la pantalla se sirve sin
   estilo, que es el fallo que más veces se ha repetido al copiar una página. */

/* A todo el ancho y todo el alto, como Clientes: sin tope de ancho ni margen propio (el de la aplicación
   ya lo pone .main-body). Columna flex con el suelo en la pantalla: cabecera y cifras con su alto natural,
   y la tarjeta de la tabla, la última, se queda con el alto que sobra (o crece si no cabe). */
.ld-page[b-wdxxid6qct] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;   /* el ritmo de Clientes entre cabecera, cifras y tabla */
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.ld-header[b-wdxxid6qct] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ld-title[b-wdxxid6qct] {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.ld-subtitle[b-wdxxid6qct] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
}

.ld-btn[b-wdxxid6qct],
.ld-btn-suave[b-wdxxid6qct] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ld-btn:hover:not(:disabled)[b-wdxxid6qct],
.ld-btn-suave:hover:not(:disabled)[b-wdxxid6qct] {
    background: #f3f4f6;
}

.ld-btn:disabled[b-wdxxid6qct],
.ld-btn-suave:disabled[b-wdxxid6qct] {
    opacity: .5;
    cursor: default;
}

.ld-btn .material-symbols-rounded[b-wdxxid6qct],
.ld-btn-suave .material-symbols-rounded[b-wdxxid6qct] {
    font-size: 18px;
}

/* ── Las cifras de arriba ─────────────────────────────────────────────────────
   Las que filtran son botones; las informativas, no. La diferencia se ve: las
   primeras responden al ratón. */

.ld-cifras[b-wdxxid6qct] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.ld-cifra[b-wdxxid6qct] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
}

button.ld-cifra[b-wdxxid6qct] {
    cursor: pointer;
}

button.ld-cifra:hover[b-wdxxid6qct] {
    border-color: #c7d2fe;
    background: #f8faff;
}

.ld-cifra.activa[b-wdxxid6qct] {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px #4f46e5;
}

.ld-cifra-num[b-wdxxid6qct] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
}

.ld-cifra-rotulo[b-wdxxid6qct] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

/* Ámbar, no rojo: un interesado que no confirmó es trabajo pendiente de marketing,
   no una avería del programa. */
.ld-cifra-ambar .ld-cifra-num[b-wdxxid6qct] {
    color: #b45309;
}

.ld-cifra-suave[b-wdxxid6qct] {
    background: #f9fafb;
}

.ld-cifra-suave .ld-cifra-num[b-wdxxid6qct] {
    font-size: 22px;
    color: #374151;
}

/* ── Tarjeta y estados vacíos ─────────────────────────────────────────────── */

/* La tarjeta ocupa el alto que sobra hasta abajo: filtros arriba, la tabla y, al pie, la paginación. */
.ld-card[b-wdxxid6qct] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

/* El estado vacío (y el «Cargando…») se centra en todo el alto disponible, no pegado arriba. */
.ld-empty[b-wdxxid6qct] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
}

.ld-empty .material-symbols-rounded[b-wdxxid6qct] {
    font-size: 22px;
    color: #9ca3af;
}

/* ── Filtros ──────────────────────────────────────────────────────────────── */

.ld-filtros[b-wdxxid6qct] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.ld-buscador[b-wdxxid6qct] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
}

.ld-buscador:focus-within[b-wdxxid6qct] {
    border-color: #4f46e5;
}

.ld-buscador .material-symbols-rounded[b-wdxxid6qct] {
    font-size: 18px;
    color: #9ca3af;
}

.ld-buscador input[b-wdxxid6qct] {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 14px;
    background: transparent;
    color: #111827;
}

.ld-check[b-wdxxid6qct] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.ld-campo[b-wdxxid6qct] {
    display: flex;
}

.ld-select[b-wdxxid6qct] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #374151;
}

/* ── La tabla ─────────────────────────────────────────────────────────────── */

.ld-tabla[b-wdxxid6qct] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ld-tabla th[b-wdxxid6qct] {
    text-align: left;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.ld-tabla td[b-wdxxid6qct] {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
    vertical-align: top;
}

.ld-tabla tbody tr:hover[b-wdxxid6qct] {
    background: #fafbff;
}

.ld-fecha[b-wdxxid6qct] {
    color: #6b7280;
    white-space: nowrap;
}

.ld-sub[b-wdxxid6qct] {
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
}

.ld-nada[b-wdxxid6qct] {
    color: #d1d5db;
}

/* El teléfono es la acción de esta pantalla: se ve como lo que es, algo que se pulsa. */
.ld-tel[b-wdxxid6qct] {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ld-tel:hover[b-wdxxid6qct] {
    text-decoration: underline;
}

.ld-mail[b-wdxxid6qct] {
    color: #374151;
    text-decoration: none;
}

.ld-mail:hover[b-wdxxid6qct] {
    text-decoration: underline;
}

.ld-origen[b-wdxxid6qct] {
    color: #6b7280;
    white-space: nowrap;
}

/* ── Etiquetas de estado ──────────────────────────────────────────────────── */

.ld-estado[b-wdxxid6qct] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ld-estado-ambar[b-wdxxid6qct] {
    background: #fef3c7;
    color: #92400e;
}

.ld-estado-azul[b-wdxxid6qct] {
    background: #dbeafe;
    color: #1e40af;
}

.ld-estado-verde[b-wdxxid6qct] {
    background: #d1fae5;
    color: #065f46;
}

.ld-estado-solido[b-wdxxid6qct] {
    background: #4f46e5;
    color: #fff;
}

/* ── Paginación ───────────────────────────────────────────────────────────── */

/* `margin-top: auto`: con pocas filas la paginación baja al pie de la tarjeta en vez de quedarse
   flotando justo debajo de la última. */
.ld-paginacion[b-wdxxid6qct] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid #f3f4f6;
}

.ld-pag-texto[b-wdxxid6qct] {
    font-size: 13px;
    color: #6b7280;
}

/* ── Pantallas estrechas ──────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .ld-tabla[b-wdxxid6qct] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* _content/ErpPowergest/Presentation/Crm/Pages/PresupuestosCrmPage.razor.rz.scp.css */
/* Todo el ancho y todo el alto, como las demás pantallas: el borde lo pone .main-body, y la tabla (lo último) se
   queda con el alto que sobra. */
.pcrm-page[b-oj9ci5kjeh] {
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pcrm-header[b-oj9ci5kjeh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.pcrm-title[b-oj9ci5kjeh] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.pcrm-subtitle[b-oj9ci5kjeh] {
    color: var(--erp-text-2, #6b7280);
    font-size: 13px;
    margin-top: 4px;
}

.pcrm-filtros[b-oj9ci5kjeh] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pcrm-buscador[b-oj9ci5kjeh] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--erp-border, #d0d5dd);
    border-radius: 8px;
    padding: 0 8px;
    min-width: 260px;
    flex: 1;
    background: var(--erp-surface, #fff);
}

.pcrm-buscador input[b-oj9ci5kjeh] {
    border: none;
    outline: none;
    height: 32px;
    flex: 1;
    background: transparent;
}

.pcrm-campo select[b-oj9ci5kjeh] {
    height: 34px;
}

/* La tabla paginada ocupa el alto que queda. */
.pcrm-tabla[b-oj9ci5kjeh] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pcrm-page[b-oj9ci5kjeh]  .tp-panel { min-height: auto; }

.pcrm-page[b-oj9ci5kjeh]  .pcrm-detalle {
    font-size: 12px;
    color: var(--erp-text-2, #6b7280);
    margin-top: 2px;
}

.pcrm-page[b-oj9ci5kjeh]  .pcrm-btn {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.pcrm-vacio[b-oj9ci5kjeh] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--erp-text-2, #6b7280);
    padding: 24px 8px;
}
/* _content/ErpPowergest/Presentation/DevTools/Pages/PruebaBloqueTeclado.razor.rz.scp.css */
.dtk[b-tu07f1rpwb] {
    padding: 24px;
    max-width: 960px;
}

.dtk__titulo[b-tu07f1rpwb] {
    font-size: 1.4rem;
    margin: 0 0 16px;
}

[b-tu07f1rpwb] .dtk__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
}

[b-tu07f1rpwb] .dtk__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

[b-tu07f1rpwb] .dtk__input {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #c8ced6;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

[b-tu07f1rpwb] .dtk__acciones {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.dtk__nota[b-tu07f1rpwb] {
    margin-top: 16px;
    font-size: 13px;
}
/* _content/ErpPowergest/Presentation/Documentacion/Pages/DocumentacionPage.razor.rz.scp.css */
/* La pantalla de la documentación: índice a la izquierda, documento a la derecha.

   El índice es lo que más se usa y lo que peor estaba: una lista de 540 nombres de fichero. Ahora son
   pestañas por audiencia, un buscador con el idioma al lado y los módulos plegados, con su icono y su
   recuento —el mismo lenguaje que el menú del manual de la web—. Va fijo (sticky) y con su propio scroll:
   leyendo un documento largo, el índice no se va.

   El documento se pinta desde un MarkupString, así que su contenido NO lleva la marca del CSS con ámbito
   de Blazor: por eso todo lo de dentro se estila con ::deep desde .doc-md. Es la misma lección de las
   notas del CRM. */

.doc-page[b-e2a0abnn3s] {
    padding: 1rem 1.25rem 2rem;
}

.doc-header[b-e2a0abnn3s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.doc-header > div:first-child[b-e2a0abnn3s] {
    padding-bottom: .75rem;
}

.doc-title[b-e2a0abnn3s] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.doc-sub[b-e2a0abnn3s] {
    color: #6b7280;
    font-size: .85rem;
}

/* ---- Las dos vistas: documentos y lo que espera revisión ---- */

.doc-pestanas[b-e2a0abnn3s] {
    display: flex;
    gap: .25rem;
}

.doc-pestana[b-e2a0abnn3s] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: .88rem;
    color: #4b5563;
    padding: .55rem .85rem;
    margin-bottom: -1px;
    cursor: pointer;
}

.doc-pestana:hover[b-e2a0abnn3s] {
    color: #111827;
}

.doc-pestana .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.1rem;
}

.doc-pestana-activa[b-e2a0abnn3s] {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.doc-contador[b-e2a0abnn3s] {
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .45rem;
}

/* ---- Las dos columnas ---- */

.doc-cuerpo[b-e2a0abnn3s] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.doc-cuerpo-sin-indice[b-e2a0abnn3s] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .doc-cuerpo[b-e2a0abnn3s] {
        grid-template-columns: 1fr;
    }
}

/* ---- El índice ---- */

.doc-indice[b-e2a0abnn3s] {
    position: sticky;
    top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-height: calc(100vh - 7rem);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: .75rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

@media (max-width: 900px) {
    .doc-indice[b-e2a0abnn3s] {
        position: static;
        max-height: 60vh;
    }
}

/* Las audiencias, como un control segmentado: se ve de un vistazo cuál está abierta. */
.doc-audiencias[b-e2a0abnn3s] {
    display: flex;
    gap: .2rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: .2rem;
}

.doc-audiencia[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: .76rem;
    color: #4b5563;
    padding: .35rem .3rem;
    cursor: pointer;
    white-space: nowrap;
}

.doc-audiencia .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1rem;
}

.doc-audiencia-nombre[b-e2a0abnn3s] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-audiencia:hover[b-e2a0abnn3s] {
    color: #111827;
}

.doc-audiencia-activa[b-e2a0abnn3s] {
    background: #fff;
    color: #1d4ed8;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .12);
}

.doc-filtros[b-e2a0abnn3s] {
    display: flex;
    gap: .4rem;
}

.doc-buscar[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: .35rem .6rem;
    background: #f9fafb;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.doc-buscar:focus-within[b-e2a0abnn3s] {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.doc-buscar .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.1rem;
    color: #9ca3af;
}

.doc-input[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: .85rem;
}

.doc-idioma[b-e2a0abnn3s] {
    width: 6.5rem;
    font-size: .82rem;
    border-radius: 8px;
}

.doc-recuento[b-e2a0abnn3s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .74rem;
    color: #6b7280;
    padding: 0 .2rem;
}

.doc-enlace[b-e2a0abnn3s] {
    border: 0;
    background: none;
    font: inherit;
    color: #2563eb;
    cursor: pointer;
    padding: 0;
}

.doc-enlace:hover[b-e2a0abnn3s] {
    text-decoration: underline;
}

.doc-arbol[b-e2a0abnn3s] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -.35rem;
    padding: 0 .35rem;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.doc-grupo[b-e2a0abnn3s] {
    margin-bottom: .1rem;
}

.doc-grupo-tit[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: #1f2937;
    text-align: left;
    padding: .42rem .5rem;
    cursor: pointer;
}

.doc-grupo-tit:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
}

.doc-grupo-icono[b-e2a0abnn3s] {
    font-size: 1.15rem;
    color: #2563eb;
}

.doc-grupo-nombre[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-grupo-cuenta[b-e2a0abnn3s] {
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: .05rem .45rem;
}

.doc-grupo-flecha[b-e2a0abnn3s] {
    font-size: 1.1rem;
    color: #9ca3af;
    transition: transform .15s ease;
}

.doc-grupo-abierto .doc-grupo-flecha[b-e2a0abnn3s] {
    transform: rotate(180deg);
}

/* Los documentos cuelgan de una línea vertical, como en el menú del manual de la web. */
.doc-grupo-lista[b-e2a0abnn3s] {
    list-style: none;
    margin: .1rem 0 .5rem 1.05rem;
    padding: 0 0 0 .45rem;
    border-left: 1px solid #e5e7eb;
}

.doc-hoja[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    font-size: .8rem;
    line-height: 1.4;
    color: #374151;
    padding: .32rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.doc-hoja:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
    color: #111827;
}

.doc-hoja-titulo[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
}

/* La página de entrada del módulo, la primera y en negrita. */
.doc-hoja-indice[b-e2a0abnn3s] {
    font-weight: 600;
}

.doc-hoja-activa[b-e2a0abnn3s],
.doc-hoja-activa:hover[b-e2a0abnn3s] {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.doc-hoja-pendiente[b-e2a0abnn3s] {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #f59e0b;
}

.doc-vacio-arbol[b-e2a0abnn3s] {
    color: #6b7280;
    font-size: .82rem;
    padding: .75rem .5rem;
    line-height: 1.5;
}

/* ---- El documento ---- */

.doc-lectura[b-e2a0abnn3s] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 0 2rem 2rem;
    min-height: 60vh;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

/* La cabecera del documento se queda arriba al bajar: los botones de corregir y guardar siempre a mano. */
.doc-barra[b-e2a0abnn3s] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 -2rem 1.25rem;
    padding: .7rem 2rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #f3f4f6;
    border-radius: 10px 10px 0 0;
}

.doc-barra-texto[b-e2a0abnn3s] {
    flex: 1;
    min-width: 12rem;
}

.doc-barra-titulo[b-e2a0abnn3s] {
    font-weight: 600;
    font-size: .95rem;
}

.doc-miga[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
}

.doc-miga .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1rem;
    color: #9ca3af;
}

.doc-ruta[b-e2a0abnn3s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: #9ca3af;
    overflow-wrap: anywhere;
}

.doc-acciones[b-e2a0abnn3s] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.doc-icono[b-e2a0abnn3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}

.doc-icono:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
    color: #111827;
}

.doc-icono .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.2rem;
}

/* El idioma del documento: el actual marcado, los demás a un clic. */
.doc-versiones[b-e2a0abnn3s] {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    overflow: hidden;
}

.doc-version[b-e2a0abnn3s] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .35rem .55rem;
    color: #4b5563;
    text-decoration: none;
}

.doc-version + .doc-version[b-e2a0abnn3s] {
    border-left: 1px solid #e5e7eb;
}

a.doc-version:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
    color: #111827;
}

.doc-version-activa[b-e2a0abnn3s] {
    background: #eff6ff;
    color: #1d4ed8;
}

.doc-btn[b-e2a0abnn3s] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    border-radius: 7px;
    padding: .42rem .85rem;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
}

.doc-btn:hover[b-e2a0abnn3s] {
    background: #1d4ed8;
}

.doc-btn:disabled[b-e2a0abnn3s] {
    opacity: .5;
    cursor: default;
}

.doc-btn-sec[b-e2a0abnn3s] {
    background: #fff;
    color: #111827;
    border-color: #d1d5db;
}

.doc-btn-sec:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
}

.doc-btn .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.05rem;
}

.doc-btn-peligro[b-e2a0abnn3s] {
    background: #fff;
    color: #b91c1c;
    border-color: #fca5a5;
}

.doc-btn-peligro:hover[b-e2a0abnn3s] {
    background: #fef2f2;
}

/* Sin documento abierto: una invitación, no un hueco. */
.doc-portada[b-e2a0abnn3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 5rem 1rem;
    color: #6b7280;
}

.doc-portada .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 3rem;
    color: #bfdbfe;
}

.doc-portada-titulo[b-e2a0abnn3s] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
}

.doc-portada-texto[b-e2a0abnn3s] {
    max-width: 28rem;
    font-size: .88rem;
    line-height: 1.6;
}

.doc-editor[b-e2a0abnn3s] {
    border-radius: 8px;
}

/* ---- Por revisar ---- */

.doc-propuestas[b-e2a0abnn3s] {
    overflow-y: auto;
}

.doc-propuesta[b-e2a0abnn3s] {
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

.doc-propuesta-nombre[b-e2a0abnn3s] {
    font-weight: 600;
}

.doc-propuesta-quien[b-e2a0abnn3s],
.doc-quien[b-e2a0abnn3s] {
    font-size: .75rem;
    color: #6b7280;
}

.doc-leyenda[b-e2a0abnn3s] {
    display: flex;
    gap: .75rem;
    font-size: .75rem;
    margin-bottom: .5rem;
}

.doc-leyenda span[b-e2a0abnn3s] {
    padding: .1rem .45rem;
    border-radius: 4px;
}

/* El cambio, línea a línea. Monoespaciado y con los saltos tal cual: es Markdown y se revisa como tal. */
.doc-diff[b-e2a0abnn3s] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    line-height: 1.5;
    max-height: 60vh;
    overflow: auto;
    margin-bottom: 1rem;
}

.doc-diff-linea[b-e2a0abnn3s] {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0 .6rem;
}

.doc-diff-quitada[b-e2a0abnn3s] {
    background: #fee2e2;
    color: #7f1d1d;
    text-decoration: line-through;
    text-decoration-color: #fca5a5;
}

.doc-diff-anadida[b-e2a0abnn3s] {
    background: #dcfce7;
    color: #14532d;
}

.doc-diff-igual[b-e2a0abnn3s] {
    color: #6b7280;
}

.doc-diff-salto[b-e2a0abnn3s] {
    text-align: center;
    color: #9ca3af;
    background: #f9fafb;
    padding: .1rem 0;
}

.doc-motivo[b-e2a0abnn3s] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    color: #4b5563;
}

.doc-motivo textarea[b-e2a0abnn3s] {
    font: inherit;
    font-size: .85rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: .4rem .6rem;
    resize: vertical;
}

/* FD6 — el estado del ciclo nocturno. */
.doc-ciclo[b-e2a0abnn3s] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .82rem;
}

.doc-ciclo-titulo[b-e2a0abnn3s] {
    font-weight: 600;
    margin-bottom: .4rem;
}

.doc-ciclo-aviso[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fee2e2;
    color: #7f1d1d;
    border-radius: 6px;
    padding: .45rem .7rem;
    margin-bottom: .5rem;
}

.doc-ciclo-paso[b-e2a0abnn3s] {
    display: grid;
    grid-template-columns: 1.4rem 9rem 8rem minmax(0, 1fr);
    align-items: baseline;
    gap: .5rem;
    padding: .2rem 0;
}

.doc-ciclo-paso .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.05rem;
    align-self: center;
}

.doc-ciclo-bien .material-symbols-rounded[b-e2a0abnn3s] { color: #16a34a; }
.doc-ciclo-mal .material-symbols-rounded[b-e2a0abnn3s] { color: #dc2626; }

.doc-ciclo-nombre[b-e2a0abnn3s] {
    font-weight: 600;
}

.doc-ciclo-fecha[b-e2a0abnn3s] {
    color: #6b7280;
}

.doc-ciclo-mensaje[b-e2a0abnn3s] {
    color: #374151;
}

@media (max-width: 700px) {
    .doc-ciclo-paso[b-e2a0abnn3s] {
        grid-template-columns: 1.4rem minmax(0, 1fr);
    }
    .doc-ciclo-fecha[b-e2a0abnn3s],
    .doc-ciclo-mensaje[b-e2a0abnn3s] {
        grid-column: 2;
    }
}

/* ---- Avisos ---- */

.doc-pendiente[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: .5rem .8rem;
    font-size: .82rem;
    margin-bottom: 1rem;
}

.doc-pendiente .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.1rem;
}

.doc-historial[b-e2a0abnn3s] {
    margin-top: 2rem;
    border-top: 1px solid #f3f4f6;
    padding-top: .75rem;
    font-size: .8rem;
    color: #4b5563;
}

.doc-historial summary[b-e2a0abnn3s] {
    cursor: pointer;
    font-weight: 600;
}

.doc-historial ul[b-e2a0abnn3s] {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

.doc-historial li[b-e2a0abnn3s] {
    padding: .25rem 0;
}

.doc-historial-motivo[b-e2a0abnn3s] {
    color: #6b7280;
}

.doc-estado[b-e2a0abnn3s] {
    display: inline-block;
    border-radius: 4px;
    padding: .05rem .4rem;
    font-size: .72rem;
    font-weight: 600;
    margin-right: .35rem;
    background: #f3f4f6;
    color: #374151;
}

.doc-estado-0[b-e2a0abnn3s] { background: #fef3c7; color: #78350f; }   /* por revisar */
.doc-estado-1[b-e2a0abnn3s] { background: #dbeafe; color: #1e3a8a; }   /* aceptada */
.doc-estado-2[b-e2a0abnn3s] { background: #fee2e2; color: #7f1d1d; }   /* rechazada */
.doc-estado-3[b-e2a0abnn3s] { background: #dcfce7; color: #14532d; }   /* publicada */
.doc-estado-4[b-e2a0abnn3s] { background: #ffedd5; color: #7c2d12; }   /* con conflicto */

.doc-primera[b-e2a0abnn3s] {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: .55rem .8rem;
    font-size: .82rem;
    line-height: 1.55;
    margin-bottom: .75rem;
}

/* IM3: «¿Qué se ve en esta imagen?», con la imagen recién pegada al lado. FLOTANTE y no encima del editor: se pega
   donde está el cursor, a menudo al final de un documento largo, y un aviso arriba del todo no lo ve nadie. Por encima
   del botón redondo de la esquina, que no lo tape. */
.doc-describir[b-e2a0abnn3s] {
    position: fixed;
    right: 1.5rem;
    bottom: 6rem;
    z-index: 1000;
    width: min(38rem, calc(100vw - 2rem));
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: .85rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

.doc-describir-img[b-e2a0abnn3s] {
    width: 9rem;
    max-height: 6rem;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    flex: none;
}

.doc-describir-cuerpo[b-e2a0abnn3s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.doc-describir-campo[b-e2a0abnn3s] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: #78350f;
}

.doc-describir-campo input[b-e2a0abnn3s] {
    font: inherit;
    font-size: .9rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: .4rem .6rem;
    color: #111827;
}

.doc-describir-acciones[b-e2a0abnn3s] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .doc-describir[b-e2a0abnn3s] { flex-direction: column; right: 1rem; bottom: 5rem; }
    .doc-describir-img[b-e2a0abnn3s] { width: 100%; max-height: 10rem; }
}

/* IM3: la imagen que se pone o se quita, enseñada en el cambio que se revisa. */
.doc-diff-imagen[b-e2a0abnn3s] {
    padding: .4rem .6rem .6rem;
}

.doc-diff-imagen img[b-e2a0abnn3s] {
    max-width: 22rem;
    max-height: 14rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.doc-ok[b-e2a0abnn3s] {
    background: #dcfce7;
    color: #166534;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .83rem;
    margin-bottom: .75rem;
}

/* Los diagramas, en su panel de solo lectura. Lo que no sea un diagrama se atenúa: aquí se viene a
   mirar los dibujos, no a leer el texto. */
.doc-diagramas[b-e2a0abnn3s] {
    padding: 1.25rem;
    min-height: 620px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.doc-diagramas[b-e2a0abnn3s]  pre.mermaid {
    background: none;
    border: 0;
    text-align: center;
    margin: 1.5rem 0;
}

.doc-diagramas[b-e2a0abnn3s]  pre.mermaid svg {
    max-width: 100%;
    height: auto;
}

.doc-diagramas[b-e2a0abnn3s]  > :not(pre.mermaid) {
    opacity: .45;
}

.doc-vacio[b-e2a0abnn3s] {
    color: #6b7280;
    font-size: .85rem;
    padding: 1rem;
    line-height: 1.6;
}

.doc-error[b-e2a0abnn3s] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 6px;
    padding: .6rem .85rem;
    font-size: .85rem;
    margin: 1rem 0;
}

/* ---- El documento renderizado. Llega como MarkupString: sin ::deep no le llega ni una regla. ---- */

.doc-md[b-e2a0abnn3s] {
    max-width: 52rem;
    line-height: 1.7;
    color: #1f2937;
    font-size: .95rem;
}

.doc-md[b-e2a0abnn3s]  h1 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    margin: .25rem 0 1.1rem;
    color: #111827;
}

/* El trazo bajo el título: el mismo guiño que el manual de la web. */
.doc-md[b-e2a0abnn3s]  h1::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: 2px;
    background: #2563eb;
    margin-top: .7rem;
}

.doc-md[b-e2a0abnn3s]  h2 {
    font-size: 1.22rem;
    font-weight: 650;
    margin: 2.1rem 0 .75rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
}

.doc-md[b-e2a0abnn3s]  h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
}

.doc-md[b-e2a0abnn3s]  p {
    margin: 0 0 .9rem;
}

.doc-md[b-e2a0abnn3s]  ul,
.doc-md[b-e2a0abnn3s]  ol {
    margin: 0 0 .9rem;
    padding-left: 1.4rem;
}

.doc-md[b-e2a0abnn3s]  li {
    margin-bottom: .3rem;
}

.doc-md[b-e2a0abnn3s]  blockquote {
    margin: 0 0 1.1rem;
    padding: .7rem 1rem;
    border-left: 3px solid #93c5fd;
    background: #f8fafc;
    border-radius: 0 6px 6px 0;
    color: #374151;
}

.doc-md[b-e2a0abnn3s]  blockquote p:last-child {
    margin-bottom: 0;
}

.doc-md[b-e2a0abnn3s]  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85em;
    background: #f3f4f6;
    padding: .12em .35em;
    border-radius: 4px;
}

.doc-md[b-e2a0abnn3s]  pre {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .85rem 1rem;
    overflow-x: auto;
    margin: 0 0 .9rem;
}

.doc-md[b-e2a0abnn3s]  pre code {
    background: none;
    padding: 0;
}

/* Las tablas están en la mayoría de los documentos: si se desbordan, la pantalla deja de servir. */
.doc-md[b-e2a0abnn3s]  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 1rem;
    font-size: .86rem;
    display: block;
    overflow-x: auto;
}

.doc-md[b-e2a0abnn3s]  th,
.doc-md[b-e2a0abnn3s]  td {
    border: 1px solid #e5e7eb;
    padding: .45rem .65rem;
    text-align: left;
    vertical-align: top;
}

.doc-md[b-e2a0abnn3s]  th {
    background: #f9fafb;
    font-weight: 600;
}

.doc-md[b-e2a0abnn3s]  a {
    color: #2563eb;
    text-decoration: none;
}

.doc-md[b-e2a0abnn3s]  a:hover {
    text-decoration: underline;
}

.doc-md[b-e2a0abnn3s]  img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: .25rem 0 .5rem;
}

/* La cabecera de cada módulo es una foto de 1600×893: entera se come media pantalla antes del texto. */
.doc-md[b-e2a0abnn3s]  img[src$="cabecera.jpg"] {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
    border: 0;
    border-radius: 10px;
    margin: .2rem 0 1.5rem;
}
/* _content/ErpPowergest/Presentation/Empresas/Contratar/ContratarPage.razor.rz.scp.css */
/* Elegir plan desde dentro (AL9).

   La pantalla OCUPA el hueco entero que le da el layout: la columna crece, y la rejilla de planes es
   la que se estira (`flex: 1`). Si se le pone un ancho máximo o se deja que la altura la marque el
   contenido, la tarifa queda arrinconada arriba a la izquierda —que es justo de lo que venía—. */

.ct-page[b-atpk56p8zv],
.ct-page *[b-atpk56p8zv],
.ct-page *[b-atpk56p8zv]::before,
.ct-page *[b-atpk56p8zv]::after {
    box-sizing: border-box;
}

.ct-page[b-atpk56p8zv] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 2px 2px 8px;
    color: #1f2937;
}

/* Los iconos son ligaduras tipográficas: sin esto, arrastrar el cursor o hacer doble clic selecciona
   el NOMBRE del icono («check_circle») como si fuera texto de la pantalla. Son decorativos. */
.ct-page .material-symbols-rounded[b-atpk56p8zv] {
    user-select: none;
    -webkit-user-select: none;
}

/* -----------------------------------------------------------------------------
   CABECERA
----------------------------------------------------------------------------- */

.ct-hero[b-atpk56p8zv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 22px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(120% 140% at 88% -20%, rgba(139, 92, 246, .55) 0%, rgba(139, 92, 246, 0) 55%),
        radial-gradient(90% 120% at 0% 120%, rgba(14, 165, 233, .40) 0%, rgba(14, 165, 233, 0) 60%),
        linear-gradient(135deg, #312e81 0%, #4338ca 55%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(49, 46, 129, .22);
}

/* Trama fina: da profundidad sin ruido ni imágenes. */
.ct-hero[b-atpk56p8zv]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .35;
    pointer-events: none;
}

.ct-hero-texto[b-atpk56p8zv] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.ct-title[b-atpk56p8zv] {
    margin: 0;
    font-size: clamp(24px, 1.6vw + 16px, 34px);
    font-weight: 850;
    letter-spacing: -.4px;
    line-height: 1.15;
}

.ct-subtitle[b-atpk56p8zv] {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
    max-width: 620px;
}

/* Rótulo de estado: dice en qué punto estás —probando, al corriente, con un impago— y es lo único de
   la pantalla que cambia con el estado comercial. La tarifa se pinta siempre. */

.ct-chip[b-atpk56p8zv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 12px;
    padding: 7px 15px 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(2px);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.ct-chip .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 18px;
}

.ct-chip-prueba .material-symbols-rounded[b-atpk56p8zv] {
    color: #fde68a;
}

.ct-chip-activo .material-symbols-rounded[b-atpk56p8zv] {
    color: #86efac;
}

.ct-chip-alerta[b-atpk56p8zv] {
    border-color: rgba(252, 165, 165, .55);
    background: rgba(220, 38, 38, .30);
}

.ct-chip-alerta .material-symbols-rounded[b-atpk56p8zv] {
    color: #fecaca;
}

.ct-chip-neutro[b-atpk56p8zv] {
    color: rgba(255, 255, 255, .82);
}

.ct-chip-neutro .material-symbols-rounded[b-atpk56p8zv] {
    color: rgba(255, 255, 255, .7);
}

.ct-hero-sello[b-atpk56p8zv] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .12);
}

.ct-hero-sello .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 40px;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   BARRA DE PERIODO
----------------------------------------------------------------------------- */

.ct-barra[b-atpk56p8zv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.ct-barra-texto[b-atpk56p8zv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-barra-texto strong[b-atpk56p8zv] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.ct-barra-texto span[b-atpk56p8zv] {
    font-size: 12.5px;
    color: #6b7280;
}

.ct-periodo[b-atpk56p8zv] {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.ct-periodo-btn[b-atpk56p8zv] {
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ct-periodo-btn:hover[b-atpk56p8zv] {
    color: #4338ca;
}

.ct-periodo-btn.active[b-atpk56p8zv] {
    background: #ffffff;
    color: #4338ca;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10);
}

/* -----------------------------------------------------------------------------
   PLANES
----------------------------------------------------------------------------- */

.ct-planes[b-atpk56p8zv] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
    align-content: stretch;
}

.ct-plan[b-atpk56p8zv] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 380px;
    padding: 26px 22px 22px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ct-plan:hover[b-atpk56p8zv] {
    transform: translateY(-4px);
    border-color: var(--acento, #6366f1);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .10);
}

/* El plan contratado: se distingue de un vistazo, y ese sí es un dato del cliente y no apariencia. */

.ct-plan-actual[b-atpk56p8zv] {
    border-color: var(--acento, #6366f1);
    box-shadow: 0 0 0 3px var(--acento-suave, rgba(99, 102, 241, .12)), 0 10px 26px rgba(15, 23, 42, .06);
}

.ct-plan-marca[b-atpk56p8zv] {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--acento, #6366f1);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* La franja de color es lo único que distingue una posición de la tarifa de otra: apariencia, no
   jerarquía comercial. */
.ct-plan-cinta[b-atpk56p8zv] {
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--acento, #6366f1);
}

.ct-plan-cab[b-atpk56p8zv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-plan-ico[b-atpk56p8zv] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 13px;
    background: var(--acento-suave, rgba(99, 102, 241, .12));
    color: var(--acento, #6366f1);
    font-size: 24px;
}

.ct-plan-nombre[b-atpk56p8zv] {
    margin: 0;
    font-size: 19px;
    font-weight: 850;
    color: #111827;
    letter-spacing: -.2px;
}

.ct-plan-desc[b-atpk56p8zv] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
    min-height: 38px;
}

.ct-plan-precio[b-atpk56p8zv] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 6px;
}

.ct-precio-cifra[b-atpk56p8zv] {
    font-size: 40px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #111827;
}

.ct-precio-moneda[b-atpk56p8zv] {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.ct-precio-periodo[b-atpk56p8zv] {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 650;
    color: #6b7280;
}

.ct-precio-consultanos[b-atpk56p8zv] {
    font-size: 26px;
    font-weight: 850;
    color: var(--acento, #4338ca);
    letter-spacing: -.5px;
}

/* El mensaje de «tus datos siguen ahí». Verde y no gris: es una buena noticia, y va justo debajo del
   rótulo que acaba de dar la mala. */
.ct-tranquiliza[b-atpk56p8zv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 14px;
    max-width: 44rem;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13.5px;
    line-height: 1.5;
}

.ct-tranquiliza .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 18px;
    flex-shrink: 0;
}

/* El precio de tarifa cuando hay promoción: al lado del rebajado, tachado y en gris. Pequeño a
   propósito — lo que se cobra es la cifra grande, y hacerlos parecidos deja al cliente sin saber
   cuál va a pagar. */
.ct-precio-antes[b-atpk56p8zv] {
    margin-left: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #9ca3af;
}

.ct-plan-promo[b-atpk56p8zv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 12px;
    font-weight: 700;
}

.ct-plan-promo .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 16px;
}

.ct-plan-nota[b-atpk56p8zv] {
    font-size: 12px;
    color: #94a3b8;
}

.ct-plan-lista[b-atpk56p8zv] {
    list-style: none;
    margin: 14px 0 18px;
    padding: 16px 0 0;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ct-item[b-atpk56p8zv] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.35;
    color: #374151;
}

.ct-item .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 18px;
    color: var(--acento, #6366f1);
    flex: none;
    margin-top: 1px;
}

.ct-item-no[b-atpk56p8zv] {
    color: #9ca3af;
}

.ct-item-no .material-symbols-rounded[b-atpk56p8zv] {
    color: #cbd5e1;
}

/* -----------------------------------------------------------------------------
   BOTONES
----------------------------------------------------------------------------- */

.ct-btn[b-atpk56p8zv] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 780;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.ct-btn:disabled[b-atpk56p8zv] {
    opacity: .55;
    cursor: default;
}

.ct-btn-primary[b-atpk56p8zv] {
    background: var(--acento, #6366f1);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.ct-btn-primary:hover:not(:disabled)[b-atpk56p8zv] {
    filter: brightness(.94);
}

.ct-btn-primary:active:not(:disabled)[b-atpk56p8zv] {
    transform: translateY(1px);
}

/* El plan que ya tienes: mismo hueco y misma altura que un botón, pero no es pulsable — no lleva a
   ninguna parte y un botón desactivado se lee como «no puedes», que aquí sería mentira. */
.ct-btn-actual[b-atpk56p8zv] {
    gap: 8px;
    background: var(--acento-suave, rgba(99, 102, 241, .12));
    color: var(--acento, #4338ca);
    cursor: default;
}

.ct-btn-actual .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 19px;
}

.ct-btn-secundario[b-atpk56p8zv] {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

.ct-btn-secundario:hover[b-atpk56p8zv] {
    border-color: var(--acento, #6366f1);
    color: var(--acento, #4338ca);
}

/* -----------------------------------------------------------------------------
   GARANTÍAS (pie)
----------------------------------------------------------------------------- */

.ct-garantias[b-atpk56p8zv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.ct-garantia[b-atpk56p8zv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-garantia > .material-symbols-rounded[b-atpk56p8zv] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: rgba(99, 102, 241, .10);
    color: #4f46e5;
    font-size: 20px;
}

.ct-garantia div[b-atpk56p8zv] {
    display: flex;
    flex-direction: column;
}

.ct-garantia strong[b-atpk56p8zv] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.ct-garantia span[b-atpk56p8zv] {
    font-size: 12.5px;
    color: #6b7280;
}

/* -----------------------------------------------------------------------------
   ESTADOS: ya al corriente, error, carga
----------------------------------------------------------------------------- */

.ct-estado[b-atpk56p8zv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 56px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.ct-estado-ico[b-atpk56p8zv] {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    font-size: 34px;
}

.ct-estado h2[b-atpk56p8zv] {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 850;
    color: #111827;
}

.ct-estado p[b-atpk56p8zv] {
    margin: 0;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

.ct-estado .ct-btn[b-atpk56p8zv] {
    margin-top: 14px;
    --acento: #4f46e5;
}

.ct-error[b-atpk56p8zv] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 11px 14px;
}

.ct-error .material-symbols-rounded[b-atpk56p8zv] {
    font-size: 19px;
}

/* Esqueleto de carga: la misma silueta que la tarjeta real, para que no salte al llegar los datos. */

.ct-plan-esqueleto[b-atpk56p8zv] {
    gap: 14px;
    box-shadow: none;
}

.ct-plan-esqueleto:hover[b-atpk56p8zv] {
    transform: none;
    border-color: #e5e7eb;
    box-shadow: none;
}

.ct-esq[b-atpk56p8zv] {
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: ct-brillo-b-atpk56p8zv 1.4s ease infinite;
}

.ct-esq-ico[b-atpk56p8zv] {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.ct-esq-linea[b-atpk56p8zv] {
    height: 12px;
}

.ct-esq-corta[b-atpk56p8zv] {
    width: 45%;
    height: 18px;
}

.ct-esq-precio[b-atpk56p8zv] {
    width: 60%;
    height: 38px;
    border-radius: 10px;
}

.ct-esq-btn[b-atpk56p8zv] {
    margin-top: auto;
    height: 44px;
    border-radius: 12px;
}

@keyframes ct-brillo-b-atpk56p8zv {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-esq[b-atpk56p8zv] { animation: none; }
    .ct-plan[b-atpk56p8zv] { transition: none; }
    .ct-plan:hover[b-atpk56p8zv] { transform: none; }
}

/* -----------------------------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ct-hero[b-atpk56p8zv] {
        padding: 22px;
        border-radius: 18px;
    }

    .ct-hero-sello[b-atpk56p8zv] {
        display: none;
    }

    .ct-plan[b-atpk56p8zv] {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .ct-page[b-atpk56p8zv] {
        gap: 14px;
    }

    .ct-barra[b-atpk56p8zv] {
        align-items: stretch;
    }

    .ct-periodo[b-atpk56p8zv] {
        width: 100%;
    }

    .ct-periodo-btn[b-atpk56p8zv] {
        flex: 1;
    }

    .ct-plan-desc[b-atpk56p8zv] {
        min-height: 0;
    }
}
/* _content/ErpPowergest/Presentation/Empresas/Pages/CreateEmpresa.razor.rz.scp.css */
.company-form-container[b-3mh9eke3r7] {
    display: flex;
    min-height: 100%;
    height:100%;
}

/* ===== LEFT PANEL ===== */

.left[b-3mh9eke3r7] {
    flex: 1;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.left-image[b-3mh9eke3r7] {
    position: absolute;
    inset: 0;
    background-image: url('/images/newcompany2.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.4;
}

/* ===== RIGHT PANEL ===== */

.right[b-3mh9eke3r7] {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 80px;
    background-color: white;
    position: relative;
}

/* --------------
    HEADER
----------------*/
/* Logo de empresa */
.brand-bar[b-3mh9eke3r7] {
    position: absolute;
    top: 20px;
    left: 25px;
}

.brand-link[b-3mh9eke3r7] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.brand-logo[b-3mh9eke3r7] {
    height: 32px;
    width: auto;
    user-select: none;
}

.brand-text[b-3mh9eke3r7] {
    font-size: 1rem;
    font-weight: 900;
    color: #111827;
}

/* Usuario*/
.user-container[b-3mh9eke3r7] {
    position: absolute;
    top: 20px;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
}

/* Contenedor vertical para los nombres */
.user-names[b-3mh9eke3r7] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1;
    min-width: 0;
}

.display-name[b-3mh9eke3r7],
.username[b-3mh9eke3r7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.display-name[b-3mh9eke3r7] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.username[b-3mh9eke3r7] {
    font-size: 12px;
    font-weight: 200;
    color: #888;
}

/*Form*/
/* Centrado, como el pie de la salida y como el resto del contenido de esta columna: la pantalla es
   una sola columna estrecha (.form ocupa el 60%) y un título alineado a la izquierda se descolgaba
   del formulario que encabeza. */
.form-header[b-3mh9eke3r7] {
    margin-bottom: 0.5rem;
    text-align: center;
}

.form-title[b-3mh9eke3r7] {
    font-size: 2.2rem;
    font-weight: 700; 
    line-height: 1.2;
    color: #111;
    margin-bottom: 0.5rem;
}

.form-subtitle[b-3mh9eke3r7] {
    font-size: 0.95rem; 
    color: #666;
    line-height: 1.4;
}


/* ===== FORM ===== */

.form-wrapper[b-3mh9eke3r7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
}

.form[b-3mh9eke3r7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width:100%;
    max-width: 60%;
}

/* ===== INPUTS ===== */

.input[b-3mh9eke3r7],
select[b-3mh9eke3r7],
input[b-3mh9eke3r7] {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

    .input:focus[b-3mh9eke3r7],
    select:focus[b-3mh9eke3r7],
    input:focus[b-3mh9eke3r7] {
        outline: none;
        border-color: #2563eb;
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

/* ===== LABEL ===== */

.form-group[b-3mh9eke3r7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-3mh9eke3r7] {
        font-size: 14px;
        font-weight: 500;
        color: #334155;
    }

/* ===== VALIDATION ===== */

.validation-message[b-3mh9eke3r7] {
    font-size: 13px;
    color: #dc2626;
}

/* ===== DROPDOWN ===== */
.dropdown-menu[b-3mh9eke3r7] {
    position: absolute;
    top: 100%;
    right: 0px;
    background: #fff;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.20);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

    .dropdown-menu a[b-3mh9eke3r7] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 8px 50px 8px 12px;
        color: #666;
        text-decoration: none;
        transition: background .2s ease;
        white-space: nowrap;
    }


        .dropdown-menu a:hover[b-3mh9eke3r7] {
            background: #f0f0f0;
        }

.dropdown-item[b-3mh9eke3r7] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding: 0px 0px 0px 10px;
}

.icon[b-3mh9eke3r7] {
    font-size: 24px;
    line-height: 1;
    color: gray;
    padding-right: 5px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.logout-item .icon[b-3mh9eke3r7],
.logout-item .dropdown-text[b-3mh9eke3r7] {
    color: #e53935 !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
    .company-form-container[b-3mh9eke3r7] {
        flex-direction: column;
    }

    .left[b-3mh9eke3r7] {
        max-height: 75px;
    }

    .right[b-3mh9eke3r7] {
        padding: 40px 24px;
    }
}

@media (max-width: 640px) {
    .form[b-3mh9eke3r7] {
        max-width: 100%;
    }
}

/* ===== INVITACION A LA PUESTA EN MARCHA (CF4) ===== */
/* Se ensena tras crear la empresa: es una oferta, no un tramite obligatorio. */

.pem-invite[b-3mh9eke3r7] {
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
}

.pem-invite-ico[b-3mh9eke3r7] {
    font-size: 28px;
    color: #2563eb;
    flex: 0 0 auto;
}

.pem-invite-text[b-3mh9eke3r7] {
    min-width: 0;
}

.pem-invite-text strong[b-3mh9eke3r7] {
    display: block;
    font-size: 15px;
    color: #1e3a8a;
    margin-bottom: 6px;
}

.pem-invite-text p[b-3mh9eke3r7] {
    margin: 0 0 14px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.45;
}

.pem-invite-actions[b-3mh9eke3r7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pem-invite-btn[b-3mh9eke3r7] {
    width: auto;
    padding: 0 18px;
}

.pem-invite-skip[b-3mh9eke3r7] {
    border: none;
    background: transparent;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.pem-invite-skip:hover[b-3mh9eke3r7] {
    text-decoration: underline;
}

/* ===== LA SALIDA: SEGUIR CON LAS EMPRESAS QUE YA HAY =====
   Solo se pinta cuando el usuario YA tiene empresas: entonces esto no es el onboarding, es «añadir
   otra», y sin salida era una expulsión de la aplicación (FUN-204).

   Enlace, no botón, y centrado bajo el primario: es el patrón de las otras pantallas de
   `PublicLayout` (`.entrar-pie` en EntrarPage). Los valores —13.5px, #4b5563 para el texto de apoyo,
   #4338ca y peso 750 para el enlace— son los de ese pie, para que las públicas se lean iguales. */
.alta-salida[b-3mh9eke3r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    text-align: center;
}

.alta-salida-link[b-3mh9eke3r7] {
    color: #4338ca;
    font-size: 13.5px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.alta-salida-link:hover[b-3mh9eke3r7] {
    text-decoration: underline;
}

/* La nota va debajo y no dentro del enlace: es contexto, no parte de la acción. Contesta lo único
   que frena a alguien ante una salida a medio formulario —si se le va a crear algo— y por eso se
   lee sin pulsar nada. */
.alta-salida-nota[b-3mh9eke3r7] {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.45;
}
/* _content/ErpPowergest/Presentation/Empresas/Pages/EmpresaConfiguracionPage.razor.rz.scp.css */
.empresa-cfg-page[b-uzq9f0k1cq],
.empresa-cfg-page *[b-uzq9f0k1cq],
.empresa-cfg-page *[b-uzq9f0k1cq]::before,
.empresa-cfg-page *[b-uzq9f0k1cq]::after,
.ec-modal-overlay[b-uzq9f0k1cq],
.ec-modal-overlay *[b-uzq9f0k1cq],
.ec-modal-overlay *[b-uzq9f0k1cq]::before,
.ec-modal-overlay *[b-uzq9f0k1cq]::after {
    box-sizing: border-box;
}

/* Los tokens se declaran TAMBIÉN en el velo de los diálogos: van fuera de `.empresa-cfg-page` (ver el
   comentario del alta en el .razor) y, sin esto, `var(--ec-surface)` quedaba sin valor y el diálogo
   «Nueva empresa» salía sin fondo, con la ficha borrosa asomando detrás de los campos. */
.empresa-cfg-page[b-uzq9f0k1cq],
.ec-modal-overlay[b-uzq9f0k1cq] {
    --ec-surface: #ffffff;
    --ec-surface-soft: #f8fafc;
    --ec-border: #e2e8f0;
    --ec-border-soft: #eef2f7;
    --ec-text: #0f172a;
    --ec-muted: #64748b;
    --ec-muted-soft: #94a3b8;
    --ec-primary: #2563eb;
    --ec-primary-dark: #1d4ed8;
    --ec-primary-soft: #eff6ff;
    --ec-success: #059669;
    --ec-success-soft: #ecfdf5;
    --ec-danger: #dc2626;
    --ec-danger-soft: #fef2f2;
    --ec-warning: #d97706;
    --ec-warning-soft: #fffbeb;
}

.empresa-cfg-page[b-uzq9f0k1cq] {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    color: var(--ec-text);
}

/* Los iconos son GLIFOS, no texto: arrastrar sobre una tarjeta o una fila los seleccionaba y dejaba
   media pantalla en azul con la ligadura («business», «search_off») a la vista. */
.empresa-cfg-page .material-symbols-rounded[b-uzq9f0k1cq],
.empresa-cfg-page .material-symbols-outlined[b-uzq9f0k1cq] {
    user-select: none;
    -webkit-user-select: none;
}

/* CARD BASE */

.ec-card[b-uzq9f0k1cq] {
    min-height: 0;
    background: white;
    border: 1px solid #dbe3ee;
    border-radius: 20px;
    padding: 14px;
}

.ec-section-title[b-uzq9f0k1cq] {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--ec-text);
    letter-spacing: -.015em;
}

.ec-section-subtitle[b-uzq9f0k1cq] {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--ec-muted);
    line-height: 1.25;
}

/* ESTADOS VACÍOS */

.ec-empty[b-uzq9f0k1cq],
.ec-empty-state[b-uzq9f0k1cq] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ec-muted);
    text-align: center;
    padding: 28px;
}

    .ec-empty-state > .material-symbols-rounded[b-uzq9f0k1cq] {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: var(--ec-primary-soft);
        color: var(--ec-primary);
        font-size: 28px;
    }

    .ec-empty-state strong[b-uzq9f0k1cq] {
        color: var(--ec-text);
        font-size: 16px;
        font-weight: 900;
    }

    .ec-empty-state p[b-uzq9f0k1cq] {
        max-width: 420px;
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }

/* MAIN */

.ec-main[b-uzq9f0k1cq] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-uzq9f0k1cq] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.ec-list-head[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-list-title-row[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

/* Las DOS barras de comandos de la pantalla: «Nueva empresa» en la esquina del panel que lista, y
   «Guardar cambios / Revertir» en la esquina de la cabecera del detalle. Un solo bloque de reglas
   porque son la misma pieza y deben verse iguales; separarlas es como acaban divergiendo.

   Con ::deep porque la barra la pinta OTRO componente: el CSS aislado no marca la raíz
   .command-bar de un hijo, así que sin ::deep estas reglas no la alcanzarían.

   El aspecto es el de la ficha de artículo (`.cb-ficha`, en `wwwroot/css/articulos.css`): contorno
   gris sobre fondo transparente, esquina de 8 px y texto en 600. Estaba en 800 y con relleno
   blanco, y un rótulo casi negro sobre una cabecera clara pesa más que el nombre de la empresa que
   tiene al lado —el botón gritaba más que aquello sobre lo que actúa—. */
.ec-list-title-row[b-uzq9f0k1cq]  .command-bar,
.ec-detail-top[b-uzq9f0k1cq]  .command-bar,
.ec-usuarios-head[b-uzq9f0k1cq]  .command-bar {
    flex: 0 0 auto;
    align-self: flex-start;
}

.ec-list-title-row[b-uzq9f0k1cq]  .command-bar__btn,
.ec-detail-top[b-uzq9f0k1cq]  .command-bar__btn,
.ec-usuarios-head[b-uzq9f0k1cq]  .command-bar__btn {
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, .9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border-radius: 8px;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    white-space: nowrap;
}

/* Solo la forma: el color de los botones —e iconos— lo da css/botones.css, el mismo en todo el ERP.
   El icono acompaña al texto sin adelantarlo. */
.ec-list-title-row[b-uzq9f0k1cq]  .command-bar__icon,
.ec-detail-top[b-uzq9f0k1cq]  .command-bar__icon,
.ec-usuarios-head[b-uzq9f0k1cq]  .command-bar__icon {
    font-size: clamp(15px, 1.8vw, 16px);
    user-select: none;
}

/* El «···» del repliegue comparte la altura de los botones: si no, al estrecharse la ventana la
   cabecera del detalle daba un salto (48 px de fábrica frente a los 34 de aquí). */
.ec-list-title-row[b-uzq9f0k1cq]  .command-bar__more,
.ec-detail-top[b-uzq9f0k1cq]  .command-bar__more,
.ec-usuarios-head[b-uzq9f0k1cq]  .command-bar__more {
    height: clamp(30px, 4.4vw, 34px);
    border-radius: 8px;
    border-color: #c1c6d7;
}

.ec-search[b-uzq9f0k1cq] {
    position: relative;
    display: flex;
    align-items: center;
}

.ec-search-icon[b-uzq9f0k1cq] {
    position: absolute;
    left: 11px;
    font-size: 19px;
    color: var(--ec-muted-soft);
    pointer-events: none;
}

.ec-search-input[b-uzq9f0k1cq] {
    width: 100%;
    height: 40px;
    border: 1px solid #dbe3ee;
    border-radius: 13px;
    padding: 0 12px 0 38px;
    font-size: 13px;
    color: var(--ec-text);
    background: var(--ec-surface-soft);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    .ec-search-input[b-uzq9f0k1cq]::placeholder {
        color: #94a3b8;
    }

    .ec-search-input:focus[b-uzq9f0k1cq] {
        background: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, .11);
    }

.ec-list[b-uzq9f0k1cq] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-list[b-uzq9f0k1cq]::-webkit-scrollbar,
    .ec-detail-scroll-largo[b-uzq9f0k1cq]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-list[b-uzq9f0k1cq]::-webkit-scrollbar-track,
    .ec-detail-scroll-largo[b-uzq9f0k1cq]::-webkit-scrollbar-track {
        background: transparent;
    }

    .ec-list[b-uzq9f0k1cq]::-webkit-scrollbar-thumb,
    .ec-detail-scroll-largo[b-uzq9f0k1cq]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-list-empty[b-uzq9f0k1cq] {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ec-muted);
    font-size: 12.5px;
    text-align: center;
    padding: 18px 6px;
}

    .ec-list-empty .material-symbols-rounded[b-uzq9f0k1cq] {
        color: #94a3b8;
        font-size: 30px;
    }

    .ec-list-empty strong[b-uzq9f0k1cq] {
        color: var(--ec-text);
        font-weight: 900;
    }

    .ec-list-empty p[b-uzq9f0k1cq] {
        margin: 0;
    }

/* TARJETAS EMPRESA */

.ec-card-item[b-uzq9f0k1cq] {
    width: 100%;
    min-height: 66px;
    text-align: left;
    border: 1px solid var(--ec-border);
    background: #ffffff;
    border-radius: 16px;
    padding: 10px;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

    .ec-card-item:hover[b-uzq9f0k1cq] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .ec-card-item.active[b-uzq9f0k1cq] {
        border-color: #60a5fa;
    }

.ec-card-item-main[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ec-card-item-texts[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-card-item-name[b-uzq9f0k1cq] {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--ec-text);
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-card-item-desc[b-uzq9f0k1cq] {
    font-size: 11.2px;
    color: var(--ec-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-card-item-side[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* BADGES */

.ec-badge[b-uzq9f0k1cq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    width: max-content;
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-activa[b-uzq9f0k1cq] {
    background: var(--ec-success-soft);
    color: var(--ec-success);
    border: 1px solid #a7f3d0;
}

.ec-badge-inactiva[b-uzq9f0k1cq] {
    background: var(--ec-danger-soft);
    color: var(--ec-danger);
    border: 1px solid #fecaca;
}

/* BOTÓN ENTRAR */

.ec-entrar[b-uzq9f0k1cq] {
    border: 1px solid #c1c6d7;
    background: #ffffff;
    color: #414754;
    font-size: 11.2px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

    /* El hover oscurece DOS pasos —fondo y borde— y no uno: el botón vive dentro de una tarjeta que
       también se tiñe al pasar por encima, así que un solo tono gris se confundiría con el de ella. */
    .ec-entrar:hover[b-uzq9f0k1cq] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .ec-entrar:active[b-uzq9f0k1cq] {
        background: #e2e8f0;
        border-color: #94a3b8;
    }

    .ec-entrar:focus-visible[b-uzq9f0k1cq] {
        outline: none;
        border-color: #94a3b8;
        box-shadow: 0 0 0 3px rgba(100, 116, 139, .22);
    }

/* DETALLE */

.ec-detail-panel[b-uzq9f0k1cq] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.ec-detail-top[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 2px 0;
}

.ec-detail-identity[b-uzq9f0k1cq] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* La barra de acciones se pega a la derecha y NO se encoge: lo que cede al estrecharse es el
   nombre de la empresa (que ya recorta con elipsis), no los botones. Va con ::deep porque la clase
   aterriza en la raíz del componente hijo, fuera del alcance del CSS aislado de esta página. */
.ec-detail-top[b-uzq9f0k1cq]  .ec-detail-cmdbar {
    margin-left: auto;
    align-self: center;
}

.ec-detail-title-block[b-uzq9f0k1cq] {
    min-width: 0;
}

.ec-detail-title-block h2[b-uzq9f0k1cq] {
    margin: 0;
    color: var(--ec-text);
    font-size: 17px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-detail-title-block p[b-uzq9f0k1cq] {
    margin: 3px 0 0;
    color: var(--ec-muted);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TABS

   Las MISMAS pestañas que la ficha de cliente (`.cform-tab`), declaración a declaración: mismo alto,
   mismo relleno, mismos grises y mismo azul del subrayado activo. El rail y las flechas ya los pone
   <ScrollableTabs>, que es el mismo componente en las dos pantallas; lo único que cambiaba eran
   estos botones, y con dos juegos de tonos casi iguales la diferencia se veía sin poder nombrarla.

   Los colores van en crudo y no con los tokens `--ec-*` a propósito: los de esta pantalla NO son los
   de la ficha (#64748b/#0f172a frente a #6b7280/#374151), así que usarlos volvería a separarlas. */

.ec-tabs[b-uzq9f0k1cq] {
    min-width: 0;
}

.ec-tab[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    /* SIN margen negativo, y por eso 37 px en vez de 38: la pista de <ScrollableTabs> es
       `overflow-y: hidden`, así que todo lo que el botón asome por debajo de su caja de contenido
       —que es justo lo que provoca el margen de -1 px— se recorta. Con él, del subrayado de 2 px
       del tab activo solo sobrevivía 1 px y parecía que no estaba. Sin él, el borde entra entero en
       la caja y el rail gris del componente queda debajo, que es como se quería ver. */
    height: 37px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .ec-tab:hover[b-uzq9f0k1cq] {
        color: #374151;
    }

    .ec-tab.active[b-uzq9f0k1cq] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
    }

    .ec-tab:focus-visible[b-uzq9f0k1cq] {
        outline: 2px solid #bfdbfe;
        outline-offset: -2px;
    }

/* CONTENIDO */

.ec-detail-scroll[b-uzq9f0k1cq] {
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-detail-scroll-fit[b-uzq9f0k1cq] {
    overflow-y: hidden;
}

.ec-detail-scroll-largo[b-uzq9f0k1cq] {
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* GENERAL / CONTACTO

   Los huecos entre secciones son mayores que cuando cada una tenía su marco: sin borde, lo único que
   dice dónde acaba una sección y empieza la siguiente es el espacio en blanco. Apretarlas a 10 px
   las pegaría en una sola mancha de campos. */

.ec-general-layout[b-uzq9f0k1cq] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(300px, .55fr);
    gap: 22px;
    align-items: stretch;
}

.ec-general-side[b-uzq9f0k1cq] {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
}

/* CONTACTO: los tres bloques APILADOS, en el orden en que se rellenan (dirección → contacto →
   fiscales). En dos columnas, «Datos fiscales» caía debajo de una de ellas y la lectura saltaba de
   arriba abajo y otra vez arriba; en columna hay un solo recorrido. Lo que cede es el alto, y por eso
   esta pestaña desplaza (`ec-detail-scroll-largo`). */
.ec-contact-layout[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* FORM

   NINGUNA sección del panel derecho lleva marco: todas viven ya DENTRO de la tarjeta del panel, y un
   recuadro dentro de otro recuadro dibuja una línea que no separa nada —solo estrecha el contenido y
   apila esquinas redondeadas—. Lo que delimita una sección es su CABECERA con la línea inferior, que
   es el recurso de las tarjetas de la ficha de tienda web: el título dice dónde empieza el bloque y
   la línea dónde acaba su rótulo. El único borde del panel es el de la tarjeta que los contiene. */

.ec-form-section[b-uzq9f0k1cq] {
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
}

.ec-form-section-head[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ec-border-soft);
}

    .ec-form-section-head h3[b-uzq9f0k1cq] {
        margin: 0;
        color: var(--ec-text);
        font-size: 14px;
        font-weight: 950;
        letter-spacing: -.015em;
    }

    .ec-form-section-head p[b-uzq9f0k1cq] {
        margin: 3px 0 0;
        color: var(--ec-muted);
        font-size: 11.5px;
        line-height: 1.25;
    }

.ec-fields[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
}

.ec-general-fields[b-uzq9f0k1cq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ec-field-grid[b-uzq9f0k1cq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ec-field-grid-3[b-uzq9f0k1cq] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ec-field[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ec-field-span-2[b-uzq9f0k1cq] {
    grid-column: span 2;
}

/* El rótulo de un campo es una ETIQUETA, no un titular: en gris y con menos peso que el valor que
   nombra. En casi negro y a 800 competía con lo que el usuario ha escrito, que es lo que se lee. */
.ec-field label[b-uzq9f0k1cq] {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
}

.ec-input[b-uzq9f0k1cq] {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border: 1px solid #d1d9e6;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ec-text);
    background: #ffffff;
    font-family: inherit;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    .ec-input:focus[b-uzq9f0k1cq] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, .11);
    }

    .ec-input[b-uzq9f0k1cq]::placeholder {
        color: #94a3b8;
    }

.ec-textarea[b-uzq9f0k1cq] {
    resize: none;
    min-height: 68px;
    max-height: 68px;
    line-height: 1.35;
}

.ec-field-hint[b-uzq9f0k1cq] {
    font-size: 11px;
    color: var(--ec-muted-soft);
    line-height: 1.3;
}

/* ESTADO */

.ec-status-section[b-uzq9f0k1cq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
}

/* La casilla de «empresa activa» conserva su fondo tenue —es lo que la distingue de un campo más—
   pero pierde el contorno: dentro de una sección sin marco, un recuadro azul suelto volvía a ser
   una caja dentro de otra. */
.ec-status-card[b-uzq9f0k1cq] {
    min-width: 0;
    border-radius: 12px;
    background: var(--ec-primary-soft);
    padding: 10px 12px;
}

.ec-check[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    color: var(--ec-text);
}

    .ec-check input[type="checkbox"][b-uzq9f0k1cq] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: var(--ec-primary);
        cursor: pointer;
        flex: 0 0 auto;
    }

    .ec-check span[b-uzq9f0k1cq] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.15;
    }

    .ec-check small[b-uzq9f0k1cq] {
        color: var(--ec-muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
    }

/* METADATOS

   Una sola tarjeta de filas etiqueta→valor, calcada del panel «Estado» de la ficha de tienda web
   (`.tw-side-card` + `.tw-estado-row`). Es la ÚNICA caja con contorno dentro del panel derecho, y lo
   lleva porque agrupa: sustituye a tres recuadros sueltos, no añade un cuarto nivel. Sin puntos de
   color, que allí señalan lo que hay que vigilar y aquí no hay nada que vigilar. */

.ec-estado-card[b-uzq9f0k1cq] {
    min-width: 0;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px;
}

.ec-estado-title[b-uzq9f0k1cq] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
}

.ec-estado-lista[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
}

.ec-estado-row[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
}

    .ec-estado-row:first-child[b-uzq9f0k1cq] {
        padding-top: 0;
    }

    .ec-estado-row:last-child[b-uzq9f0k1cq] {
        padding-bottom: 0;
        border-bottom: 0;
    }

.ec-estado-label[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.ec-estado-valor[b-uzq9f0k1cq] {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #24292f;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* IMÁGENES */

.ec-img-grid[b-uzq9f0k1cq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ec-img-slot[b-uzq9f0k1cq] {
    min-width: 0;
    border-radius: 14px;
    background: var(--ec-surface-soft);
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-img-slot-head[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ec-text);
    font-size: 13px;
    font-weight: 900;
}

    .ec-img-slot-head .material-symbols-rounded[b-uzq9f0k1cq] {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--ec-primary-soft);
        color: var(--ec-primary);
        font-size: 18px;
    }

/* El hueco de la imagen se distingue por CONTRASTE con el bloque que lo rodea —blanco sobre el gris
   tenue de la ranura—, no por un contorno de trazos. Sin el fondo blanco no se vería: la ranura ya
   usa ese mismo gris, y sin borde ni color propio el hueco desaparecería dentro de ella. */
.ec-img-box[b-uzq9f0k1cq] {
    height: 180px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .ec-img-box img[b-uzq9f0k1cq] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.ec-img-empty[b-uzq9f0k1cq] {
    font-size: 12px;
    color: var(--ec-muted-soft);
    font-weight: 750;
}

.ec-img-actions[b-uzq9f0k1cq] {
    display: flex;
    gap: 8px;
}

.ec-upload-error[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #fecaca;
    background: var(--ec-danger-soft);
    color: var(--ec-danger);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 800;
}

    .ec-upload-error .material-symbols-rounded[b-uzq9f0k1cq] {
        font-size: 18px;
    }

/* BOTONES

   Los sueltos («Subir», «Quitar», «Borrar empresa») siguen a los de la barra de comandos, que a su
   vez siguen a los de la ficha de artículo: contorno gris, esquina de 8 px y texto en 600. En una
   pantalla no puede haber dos pesos de botón según de qué componente salgan. */

.ec-btn[b-uzq9f0k1cq] {
    min-height: 34px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #c1c6d7;
    background: transparent;
    color: #414754;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, box-shadow .16s ease;
}

    .ec-btn:hover:not(:disabled)[b-uzq9f0k1cq] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .ec-btn:active:not(:disabled)[b-uzq9f0k1cq] {
        background: #e5e7eb;
        border-color: #9aa3af;
    }

    .ec-btn:focus-visible[b-uzq9f0k1cq] {
        outline: none;
        border-color: #94a3b8;
        box-shadow: 0 0 0 3px rgba(100, 116, 139, .22);
    }

    .ec-btn:disabled[b-uzq9f0k1cq] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

/* La ÚNICA de relleno: la acción principal de la pantalla («Guardar cambios»). Plana, sin degradado
   ni sombra proyectada. */
.ec-btn-primary[b-uzq9f0k1cq] {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-uzq9f0k1cq] {
        background: var(--ec-primary-dark);
        border-color: var(--ec-primary-dark);
    }

    .ec-btn-primary:active:not(:disabled)[b-uzq9f0k1cq] {
        background: #1e40af;
        border-color: #1e40af;
    }

/* Neutra: es exactamente la base. Se declara para que el marcado pueda nombrarla y para que el
   día que la base cambie no haya que revisar dónde estaba implícita. */
.ec-btn-ghost[b-uzq9f0k1cq] {
    background: transparent;
    color: #414754;
    border-color: #c1c6d7;
}

/* Destructiva: reposa como las demás y solo se tiñe de rojo al pasar por encima —ese hover es la
   única señal de que la acción no es reversible—. Es el criterio de la ficha de artículo: en reposo
   todos los botones son el mismo botón, y el rojo permanente convertía «Quitar» una imagen en la
   cosa más llamativa de la pestaña. */
.ec-btn-danger[b-uzq9f0k1cq] {
    background: transparent;
    color: #414754;
    border-color: #c1c6d7;
}

    .ec-btn-danger:hover:not(:disabled)[b-uzq9f0k1cq] {
        background: var(--ec-danger-soft);
        border-color: #fca5a5;
        color: var(--ec-danger);
    }

    .ec-btn-danger:active:not(:disabled)[b-uzq9f0k1cq] {
        background: #fee2e2;
        border-color: #f87171;
        color: var(--ec-danger);
    }

/* BORRAR EMPRESA: la única acción irreversible de la pantalla, y la única que se pinta distinta.

   Misma familia que el resto —contorno gris, esquina de 8— pero con el rojo en el texto y el icono,
   y algo más grande: es lo que la separa de «Subir» o «Quitar» sin sacarla de la familia. Sin el
   contorno se quedaba en texto rojo suelto y dejaba de leerse como un botón.

   Al pasar por encima se INVIERTE (fondo rojo, texto y icono en blanco): el color llena el botón
   justo en el instante en que el puntero está encima, que es cuando conviene mirarlo dos veces.

   Los colores van en crudo y no con `--ec-danger`: este botón se usa también en el pie del diálogo
   de borrado, que se pinta FUERA de `.empresa-cfg-page` —donde viven las variables— y allí un
   `var()` sin valor deja el botón sin color. */
.ec-btn-borrar[b-uzq9f0k1cq] {
    min-height: 40px;
    padding: 0 20px;
    font-size: 13.5px;
    border-color: #c1c6d7;
    background: transparent;
    color: #dc2626;
}

    .ec-btn-borrar:hover:not(:disabled)[b-uzq9f0k1cq],
    .ec-btn-borrar:active:not(:disabled)[b-uzq9f0k1cq] {
        background: #dc2626;
        border-color: #dc2626;
        color: #ffffff;
    }

    .ec-btn-borrar:focus-visible[b-uzq9f0k1cq] {
        outline: none;
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .22);
    }

.ec-btn-ico[b-uzq9f0k1cq] {
    font-size: 16px;
    line-height: 1;
}

/* BORRADO

   Ni caja ámbar ni rótulo: el botón, y debajo el motivo si está apagado. Lo que se pierde al borrar
   se cuenta en el primer diálogo —cuando se ha pulsado—, no en un recuadro de aviso permanente que
   se lee cero veces por estar siempre ahí. */
.ec-borrado[b-uzq9f0k1cq] {
    min-width: 0;
    width: 100%;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* A todo el ancho de su columna, que es el mismo de la tarjeta «Resumen» que tiene encima: las
       dos piezas del lateral se alinean por los dos lados y no queda un botón a media caja. */
    .ec-borrado .ec-btn-borrar[b-uzq9f0k1cq],
    .ec-borrado .ec-btn-salir[b-uzq9f0k1cq] {
        width: 100%;
    }

/* RESPONSIVE */

@media (max-width: 1280px) {
    .ec-general-layout[b-uzq9f0k1cq] {
        grid-template-columns: minmax(0, 1fr) minmax(290px, .6fr);
    }

    .ec-img-grid[b-uzq9f0k1cq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .ec-main[b-uzq9f0k1cq] {
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    }

    .ec-general-layout[b-uzq9f0k1cq] {
        grid-template-columns: 1fr;
    }

    .ec-detail-scroll-fit[b-uzq9f0k1cq] {
        overflow-y: auto;
        padding-right: 4px;
    }

    .ec-status-section[b-uzq9f0k1cq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .empresa-cfg-page[b-uzq9f0k1cq] {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        gap: 12px;
        padding-bottom: 16px;
    }

    .ec-main[b-uzq9f0k1cq] {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: visible;
    }

    .ec-list-panel[b-uzq9f0k1cq] {
        height: auto;
        max-height: none;
        gap: 8px;
    }

    .ec-list[b-uzq9f0k1cq] {
        max-height: 168px;
        gap: 7px;
    }

    .ec-detail-panel[b-uzq9f0k1cq] {
        height: auto;
        min-height: 0;
        grid-template-rows: auto auto auto;
        gap: 8px;
        overflow: visible;
    }

    .ec-detail-scroll[b-uzq9f0k1cq] {
        height: auto;
    }

    .ec-detail-scroll-fit[b-uzq9f0k1cq] {
        overflow: visible;
        padding-right: 0;
    }

    .ec-detail-scroll-largo[b-uzq9f0k1cq] {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .empresa-cfg-page[b-uzq9f0k1cq] {
        gap: 10px;
    }

    .ec-btn[b-uzq9f0k1cq] {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12.5px;
        border-radius: 11px;
    }

    .ec-card[b-uzq9f0k1cq] {
        border-radius: 16px;
        padding: 10px;
    }

    .ec-list-panel[b-uzq9f0k1cq] {
        padding: 10px;
    }

    .ec-list-head[b-uzq9f0k1cq] {
        gap: 8px;
    }

    .ec-section-title[b-uzq9f0k1cq] {
        font-size: 14px;
    }

    .ec-section-subtitle[b-uzq9f0k1cq] {
        font-size: 11px;
    }

    .ec-search-input[b-uzq9f0k1cq] {
        height: 36px;
        border-radius: 11px;
        font-size: 12.5px;
    }

    .ec-search-icon[b-uzq9f0k1cq] {
        font-size: 18px;
    }

    .ec-list[b-uzq9f0k1cq] {
        max-height: 142px;
        gap: 6px;
        padding-right: 2px;
    }

    .ec-card-item[b-uzq9f0k1cq] {
        min-height: 56px;
        padding: 8px 9px;
        border-radius: 14px;
        gap: 8px;
    }

    .ec-card-item-main[b-uzq9f0k1cq] {
        gap: 9px;
    }

    .ec-card-item-name[b-uzq9f0k1cq] {
        font-size: 13px;
    }

    .ec-card-item-desc[b-uzq9f0k1cq] {
        font-size: 10.8px;
        line-height: 1.15;
    }

    .ec-card-item-side[b-uzq9f0k1cq] {
        gap: 4px;
    }

    .ec-badge[b-uzq9f0k1cq] {
        min-height: 19px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .ec-entrar[b-uzq9f0k1cq] {
        padding: 5px 11px;
        font-size: 10.8px;
    }

    .ec-detail-top[b-uzq9f0k1cq] {
        padding: 2px 0;
        gap: 9px;
    }

    .ec-detail-identity[b-uzq9f0k1cq] {
        gap: 9px;
    }

    .ec-detail-title-block h2[b-uzq9f0k1cq] {
        font-size: 15px;
    }

    .ec-detail-title-block p[b-uzq9f0k1cq] {
        display: none;
    }

    .ec-general-layout[b-uzq9f0k1cq] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ec-contact-layout[b-uzq9f0k1cq] {
        gap: 18px;
    }

    .ec-general-side[b-uzq9f0k1cq] {
        gap: 16px;
    }

    .ec-form-section-head[b-uzq9f0k1cq] {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

        .ec-form-section-head h3[b-uzq9f0k1cq] {
            font-size: 13px;
        }

        .ec-form-section-head p[b-uzq9f0k1cq] {
            display: none;
        }

    .ec-general-fields[b-uzq9f0k1cq],
    .ec-field-grid[b-uzq9f0k1cq],
    .ec-field-grid-3[b-uzq9f0k1cq],
    .ec-img-grid[b-uzq9f0k1cq] {
        grid-template-columns: 1fr;
    }

    .ec-field-span-2[b-uzq9f0k1cq] {
        grid-column: auto;
    }

    .ec-fields[b-uzq9f0k1cq],
    .ec-general-fields[b-uzq9f0k1cq] {
        gap: 8px;
    }

    .ec-field[b-uzq9f0k1cq] {
        gap: 3px;
    }

        .ec-field label[b-uzq9f0k1cq] {
            font-size: 11px;
        }

    .ec-input[b-uzq9f0k1cq] {
        min-height: 32px;
        padding: 7px 9px;
        font-size: 12.5px;
        border-radius: 9px;
    }

    .ec-textarea[b-uzq9f0k1cq] {
        min-height: 48px;
        max-height: 48px;
    }

    .ec-status-card[b-uzq9f0k1cq] {
        padding: 8px 9px;
        border-radius: 12px;
    }

    .ec-check span[b-uzq9f0k1cq] {
        font-size: 12.5px;
    }

    .ec-check small[b-uzq9f0k1cq] {
        font-size: 10.8px;
    }

    .ec-estado-card[b-uzq9f0k1cq] {
        padding: 11px 12px;
    }

    .ec-estado-row[b-uzq9f0k1cq] {
        padding: 7px 0;
    }

    .ec-estado-label[b-uzq9f0k1cq] {
        font-size: 11.5px;
    }

    .ec-estado-valor[b-uzq9f0k1cq] {
        font-size: 12.5px;
    }

}

@media (max-width: 520px) {
    .ec-list[b-uzq9f0k1cq] {
        max-height: 122px;
    }

    .ec-card-item[b-uzq9f0k1cq] {
        min-height: 52px;
    }

    .ec-img-box[b-uzq9f0k1cq] {
        height: 150px;
    }

    .ec-img-actions[b-uzq9f0k1cq] {
        flex-direction: column;
    }

    .ec-img-actions .ec-btn[b-uzq9f0k1cq] {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .ec-btn[b-uzq9f0k1cq] {
        min-height: 32px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .ec-btn-borrar[b-uzq9f0k1cq],
    .ec-btn-salir[b-uzq9f0k1cq] {
        min-height: 36px;
        padding-inline: 14px;
    }
}

@media (max-height: 760px) and (min-width: 1181px) {
    .empresa-cfg-page[b-uzq9f0k1cq] {
        gap: 10px;
    }

    .ec-card[b-uzq9f0k1cq] {
        padding: 12px;
    }

    .ec-detail-panel[b-uzq9f0k1cq] {
        gap: 8px;
    }

    .ec-detail-top[b-uzq9f0k1cq] {
        padding: 2px 0;
    }

    .ec-form-section-head[b-uzq9f0k1cq] {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .ec-fields[b-uzq9f0k1cq],
    .ec-general-fields[b-uzq9f0k1cq] {
        gap: 8px;
    }

    .ec-input[b-uzq9f0k1cq] {
        min-height: 32px;
        padding-block: 7px;
    }

    .ec-textarea[b-uzq9f0k1cq] {
        min-height: 56px;
        max-height: 56px;
    }

    .ec-borrado[b-uzq9f0k1cq] {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .empresa-cfg-page[b-uzq9f0k1cq],
    .empresa-cfg-page *[b-uzq9f0k1cq],
    .empresa-cfg-page *[b-uzq9f0k1cq]::before,
    .empresa-cfg-page *[b-uzq9f0k1cq]::after {
        transition: none !important;
        animation: none !important;
    }
}

/* DIÁLOGOS DEL BORRADO

   Se pintan FUERA de `.empresa-cfg-page` (el panel del detalle recorta), así que aquí no llegan ni
   las variables `--ec-*` ni el `box-sizing` de la página: todo va en crudo y cada caja declara el
   suyo. Que estas reglas alcancen el interior del <Modal> sin `::deep` no es casualidad: los
   elementos los escribe ESTA página —viajan como ChildContent—, y el atributo de ámbito se les pone
   al compilar, no al renderizar. */

.ec-del[b-uzq9f0k1cq],
.ec-del *[b-uzq9f0k1cq] {
    box-sizing: border-box;
}

.ec-del[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Identidad: de qué empresa estamos hablando, centrada y grande. Es lo que evita el borrado de la
   empresa equivocada cuando se llega aquí con varias abiertas en la cabeza. */
.ec-del-identity[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.ec-del-icon[b-uzq9f0k1cq] {
    font-size: 30px;
    color: #6b7280;
}

.ec-del-name[b-uzq9f0k1cq] {
    font-size: 17px;
    font-weight: 800;
    color: #24292f;
    word-break: break-word;
}

.ec-del-meta[b-uzq9f0k1cq] {
    font-size: 12px;
    color: #6b7280;
}

/* El aviso ámbar del primer paso: el mismo recurso que usa GitHub antes de borrar un repositorio.
   No sustituye a la lista de abajo —dice que hay algo que leer, no qué—. */
.ec-del-warning[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

    .ec-del-warning .material-symbols-rounded[b-uzq9f0k1cq] {
        flex: 0 0 auto;
        font-size: 20px;
        color: #b45309;
    }

.ec-del-list[b-uzq9f0k1cq] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #414754;
    font-size: 13px;
    line-height: 1.45;
}

    .ec-del-list strong[b-uzq9f0k1cq] {
        color: #24292f;
        font-weight: 700;
    }

/* El paso de confirmación: rótulo, hueco y nada más. Cuanto menos haya alrededor, menos se teclea
   sin mirar. */
.ec-del-confirm[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    color: #414754;
}

    .ec-del-confirm strong[b-uzq9f0k1cq] {
        color: #24292f;
        font-weight: 700;
        word-break: break-word;
    }

/* El contorno rojo del hueco es la última señal de qué se está haciendo, y por eso no espera al
   foco: se ve desde que el diálogo abre. */
.ec-del-input[b-uzq9f0k1cq] {
    width: 100%;
    min-height: 38px;
    border: 1px solid #f87171;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #24292f;
    background: #ffffff;
    outline: none;
}

    .ec-del-input:focus[b-uzq9f0k1cq] {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
    }

/* SALIR DE LA EMPRESA: misma caja que «Borrar empresa» —van una encima de la otra y dos alturas
   distintas se leerían como dos cosas de distinto rango— pero sin rojo, ni en reposo ni al pasar por
   encima. Irse no destruye nada de nadie: el rojo se guarda para lo que sí. */
.ec-btn-salir[b-uzq9f0k1cq] {
    min-height: 40px;
    padding: 0 20px;
    font-size: 13.5px;
    border-color: #c1c6d7;
    background: transparent;
    color: #414754;
}

    .ec-btn-salir:hover:not(:disabled)[b-uzq9f0k1cq],
    .ec-btn-salir:active:not(:disabled)[b-uzq9f0k1cq] {
        background: #f3f4f6;
        border-color: #afb8c1;
    }

    .ec-btn-salir:focus-visible[b-uzq9f0k1cq] {
        outline: none;
        border-color: #93a3b8;
        box-shadow: 0 0 0 3px rgba(59, 78, 110, .18);
    }

/* El párrafo del diálogo de salida: texto corrido, sin viñetas. Lo que hay que leer son tres líneas,
   y una lista de un solo punto no es una lista. */
.ec-salida-texto[b-uzq9f0k1cq] {
    margin: 0;
    color: #414754;
    font-size: 13px;
    line-height: 1.45;
}

    .ec-salida-texto strong[b-uzq9f0k1cq] {
        color: #24292f;
        font-weight: 700;
    }

/* Los dos botones de pie ocupan el ancho: en un diálogo no compiten con nada, y el blanco a los
   lados solo daría dónde pulsar sin querer. */
.ec-btn-bloque[b-uzq9f0k1cq] {
    box-sizing: border-box;    /* fuera de la página no llega el reset, y con el 100% desbordaría */
    width: 100%;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PESTAÑA «USUARIOS»

   Es una LISTA de consulta, no un formulario, así que no reusa `.ec-fields` ni la rejilla de dos
   columnas: filas a todo el ancho, una persona por fila. Lo que sí reusa es la sección sin marco
   (`.ec-form-section`), el buscador y las insignias, que son las piezas de la pantalla.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.ec-usuarios-section[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA DE LA PESTAÑA: recuento a la izquierda, acción a la derecha, en la misma línea.

   No lleva `.ec-form-section-head` —ni su línea inferior— porque no hay título que separar de lo que
   viene debajo: lo de la izquierda ya es contenido, no un rótulo. Se alinea al centro y no arriba,
   que es lo que hace que las fichas y el botón se lean como una sola barra.

   `min-height` fija la altura del botón aunque el recuento no esté (mientras carga, al fallar o sin
   nadie): sin eso la lista daba un salto hacia arriba en cuanto llegaban las fichas. */
.ec-usuarios-head[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 34px;
}

    /* La barra de comandos llega con `align-self: flex-start`, que es lo que necesita en la cabecera
       del detalle —allí convive con un bloque de dos líneas—. Aquí sería lo contrario: si las fichas
       del recuento envuelven, el botón se quedaría pegado arriba en vez de en la línea que comparte
       con ellas. */
    .ec-usuarios-head[b-uzq9f0k1cq]  .command-bar {
        align-self: center;
    }

/* Recuento por papel: fichas de una línea, no una tabla. Responden a «cuántos somos y cuántos
   mandan» de un vistazo, que es lo único que se le pide a una cabecera de lista. */
.ec-usuarios-resumen[b-uzq9f0k1cq] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ec-chip[b-uzq9f0k1cq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ec-border);
    background: var(--ec-surface-soft);
    color: #414754;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

    .ec-chip .material-symbols-rounded[b-uzq9f0k1cq] {
        font-size: 15px;
        color: var(--ec-muted);
    }

/* Los tres papeles llevan EL MISMO color aquí que en la insignia de su fila. Si el recuento de
   administradores fuera gris y la insignia ámbar, habría que releer para atar una cosa con la otra. */
.ec-chip-admin[b-uzq9f0k1cq] {
    background: var(--ec-warning-soft);
    border-color: #fde68a;
    color: #92400e;
}

.ec-chip-emp[b-uzq9f0k1cq] {
    background: var(--ec-primary-soft);
    border-color: #bfdbfe;
    color: var(--ec-primary-dark);
}

.ec-chip-inv[b-uzq9f0k1cq] {
    background: var(--ec-surface-soft);
    border-color: var(--ec-border);
    color: var(--ec-muted);
}

.ec-usuarios-search[b-uzq9f0k1cq] {
    flex: 0 0 auto;
}

.ec-usuarios-lista[b-uzq9f0k1cq] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* La fila NO es pulsable y por eso no tiene cursor de mano ni se tiñe al pasar por encima: aquí no
   se selecciona a nadie. El realce suave del hover se queda porque ayuda a seguir la fila hasta su
   insignia cuando la lista es larga, pero sin prometer que va a pasar algo al pulsar. */
.ec-usuario-fila[b-uzq9f0k1cq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid var(--ec-border-soft);
    border-radius: 14px;
    background: #ffffff;
    transition: background .16s ease, border-color .16s ease;
}

    .ec-usuario-fila:hover[b-uzq9f0k1cq] {
        background: #f8fbff;
        border-color: #dbe7fb;
    }

.ec-usuario-texts[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-usuario-nombre[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.15;
}

    /* Lo que cede cuando no cabe es el NOMBRE, no las marcas: «tú» y «Propietario» son dos palabras
       fijas, y recortarlas a ellas dejaría «Propie…» sin decir nada. */
    .ec-usuario-nombre-txt[b-uzq9f0k1cq] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ec-usuario-alias[b-uzq9f0k1cq] {
    font-size: 11.2px;
    color: var(--ec-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «tú» y «Propietario» son MARCAS sobre el nombre, no papeles: van pegadas a él, en minúscula de
   cuerpo y sin el peso de la insignia de la derecha, que es la que dice qué puede hacer cada uno.
   Con los tres al mismo tamaño la fila se leía como tres etiquetas sin jerarquía. */
.ec-tag[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ec-tag-tu[b-uzq9f0k1cq] {
    background: var(--ec-primary-soft);
    border: 1px solid #bfdbfe;
    color: var(--ec-primary-dark);
}

.ec-tag-owner[b-uzq9f0k1cq] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #6d28d9;
}

/* INSIGNIAS DE PAPEL — reusan `.ec-badge` (la caja) y solo ponen el color.

   El administrador va en ámbar y no en verde: el verde de esta pantalla significa «empresa activa»,
   un estado, y usarlo también para un nivel de acceso mezclaría dos cosas que no se parecen. */
.ec-badge-admin[b-uzq9f0k1cq] {
    background: var(--ec-warning-soft);
    color: #92400e;
    border: 1px solid #fde68a;
}

.ec-badge-emp[b-uzq9f0k1cq] {
    background: var(--ec-primary-soft);
    color: var(--ec-primary-dark);
    border: 1px solid #bfdbfe;
}

.ec-badge-inv[b-uzq9f0k1cq] {
    background: var(--ec-surface-soft);
    color: var(--ec-muted);
    border: 1px solid var(--ec-border);
}

/* Fallo al traer el equipo: se queda EN la pestaña con su botón de reintentar. Mismo tono que el
   error de subida de imagen, que es el otro fallo que esta pantalla pinta en su sitio. */
.ec-usuarios-error[b-uzq9f0k1cq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: var(--ec-danger-soft);
    color: #7f1d1d;
}

    .ec-usuarios-error > .material-symbols-rounded[b-uzq9f0k1cq] {
        flex: 0 0 auto;
        font-size: 22px;
        color: var(--ec-danger);
    }

.ec-usuarios-error-texts[b-uzq9f0k1cq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

    .ec-usuarios-error-texts strong[b-uzq9f0k1cq] {
        font-size: 13px;
        font-weight: 900;
    }

    .ec-usuarios-error-texts span[b-uzq9f0k1cq] {
        font-size: 11.5px;
        color: #9f1239;
        line-height: 1.3;
    }

/* En pantalla estrecha la insignia del papel baja bajo el nombre en vez de estrujarlo: un nombre
   partido en dos líneas para que quepa «Administrador» al lado no se lee mejor. */
@media (max-width: 720px) {
    .ec-usuario-fila[b-uzq9f0k1cq] {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .ec-usuario-fila > .ec-badge[b-uzq9f0k1cq] {
            grid-column: 2;
            justify-self: start;
        }
}

/* ============================================================================
   ALTA DE EMPRESA — diálogo dentro de la pantalla

   «Nueva empresa» navegaba a /empresa/nueva, que es el gate de onboarding: layout público, sin menú
   ni barra lateral y sin vuelta atrás. Con empresas ya creadas eso expulsaba de la aplicación. El
   alta vive aquí, sobre la pantalla, con Cancelar.

   ESTAS CLASES YA SE PERDIERON UNA VEZ: un rediseño de la pantalla se llevó por delante el diálogo
   y su CSS a la vez. Si vuelve a desaparecer el markup, esto sobra; mientras el markup esté, esto
   es lo que lo hace visible.

   Sin ::deep a propósito: el diálogo se pinta en este mismo componente —aunque cuelgue al nivel de
   la página y no de .empresa-cfg-page—, así que el CSS aislado ya lo alcanza.
   ============================================================================ */
.ec-modal-overlay[b-uzq9f0k1cq] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
}

.ec-modal[b-uzq9f0k1cq] {
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--ec-surface);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
    overflow: hidden;
}

.ec-modal-head[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
}

    .ec-modal-head h2[b-uzq9f0k1cq] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--ec-text);
    }

    .ec-modal-head p[b-uzq9f0k1cq] {
        margin: 4px 0 0;
        font-size: 12.5px;
        color: var(--ec-muted);
    }

.ec-modal-cerrar[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ec-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ec-modal-cerrar:hover:not(:disabled)[b-uzq9f0k1cq] {
        background: var(--ec-surface-soft);
        color: var(--ec-text);
    }

    .ec-modal-cerrar:disabled[b-uzq9f0k1cq] {
        opacity: .5;
        cursor: not-allowed;
    }

    .ec-modal-cerrar .material-symbols-rounded[b-uzq9f0k1cq] {
        font-size: 19px;
    }

.ec-modal-body[b-uzq9f0k1cq] {
    padding: 16px 20px;
    overflow-y: auto;
}

.ec-field-opcional[b-uzq9f0k1cq] {
    font-weight: 400;
    color: var(--ec-muted-soft);
}

.ec-modal-error[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ec-danger);
    border-radius: 10px;
    background: var(--ec-danger-soft);
    color: var(--ec-danger);
    font-size: 12.5px;
    line-height: 1.45;
}

    .ec-modal-error .material-symbols-rounded[b-uzq9f0k1cq] {
        font-size: 18px;
        flex: 0 0 auto;
    }

.ec-modal-actions[b-uzq9f0k1cq] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-surface-soft);
}

/* Invitación a la puesta en marcha (CF4), tras crear la empresa. */
.ec-modal-invite[b-uzq9f0k1cq] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px 18px;
}

    .ec-modal-invite strong[b-uzq9f0k1cq] {
        display: block;
        font-size: 15px;
        color: var(--ec-text);
    }

    .ec-modal-invite p[b-uzq9f0k1cq] {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--ec-muted);
    }

.ec-invite-ico[b-uzq9f0k1cq] {
    flex: 0 0 auto;
    font-size: 26px;
    color: var(--ec-primary);
}

@media (max-width: 640px) {
    .ec-modal-overlay[b-uzq9f0k1cq] {
        padding: 12px;
        align-items: flex-end;
    }

    .ec-modal[b-uzq9f0k1cq] {
        max-width: none;
    }

    .ec-modal-actions[b-uzq9f0k1cq] {
        flex-direction: column-reverse;
    }

        .ec-modal-actions .ec-btn[b-uzq9f0k1cq] {
            width: 100%;
            justify-content: center;
        }
}

/* Solo consulta (empleados sin permiso de modificación). El fieldset solo está para desactivar de golpe
   todos los campos de la ficha: con display:contents no ocupa caja propia y la rejilla de la ficha se
   reparte igual que sin él. «Salir de la empresa» queda fuera a propósito: salir es de todos. */
.ec-solo-lectura[b-uzq9f0k1cq] {
    display: contents;
}

.ec-solo-lectura:disabled .ec-input[b-uzq9f0k1cq],
.ec-solo-lectura:disabled select[b-uzq9f0k1cq],
.ec-solo-lectura:disabled textarea[b-uzq9f0k1cq] {
    background: #f8fafc;
    color: #374151;
    cursor: default;
}

.ec-solo-consulta[b-uzq9f0k1cq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .ec-solo-consulta .material-symbols-rounded[b-uzq9f0k1cq] {
        font-size: 18px;
    }
/* _content/ErpPowergest/Presentation/Empresas/Pages/InvitacionEmpresaPage.razor.rz.scp.css */
.inv-page[b-d3dceh9vjt],
.inv-page *[b-d3dceh9vjt],
.inv-page *[b-d3dceh9vjt]::before,
.inv-page *[b-d3dceh9vjt]::after { box-sizing: border-box; }

/* Pantalla de aterrizaje: la marca arriba a la izquierda y una sola tarjeta centrada. Se abre desde
   fuera de la aplicación (correo, mensajería), muchas veces en un móvil, así que no hay menú, ni
   cabecera, ni nada que tocar salvo el botón. */
.inv-page[b-d3dceh9vjt] { min-height: 100vh; display: flex; flex-direction: column; padding: 20px 24px 40px; background: #f3f4f6; }

/* Marca: el logotipo va suelto, sin el cuadro azul que lleva en el menú lateral. Allí el cuadro lo
   pide el fondo oscuro de la barra; aquí, sobre la página en claro, solo sería un adorno. */
.inv-brand[b-d3dceh9vjt] { align-self: flex-start; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.inv-brand-logo[b-d3dceh9vjt] { width: 44px; height: 44px; min-width: 44px; object-fit: contain; display: block; }
.inv-brand-text[b-d3dceh9vjt] { color: #172033; font-size: 24px; line-height: 1.1; font-weight: 850; white-space: nowrap; }

.inv-main[b-d3dceh9vjt] { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px 0; }

.inv-card[b-d3dceh9vjt] { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 28px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }

.inv-title[b-d3dceh9vjt] { margin: 4px 0 0; font-size: 1.35rem; font-weight: 800; color: #111827; overflow-wrap: anywhere; }
.inv-sub[b-d3dceh9vjt] { font-size: .88rem; color: #6b7280; line-height: 1.45; }
.inv-ico-error[b-d3dceh9vjt] { font-size: 44px; color: #9ca3af; }
.inv-error[b-d3dceh9vjt] { margin-top: 4px; font-size: .82rem; color: #b91c1c; }

.inv-btn[b-d3dceh9vjt] { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; padding: 11px 16px; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
.inv-btn:disabled[b-d3dceh9vjt] { opacity: .6; cursor: default; }

.inv-btn-primary[b-d3dceh9vjt] { background: #16a34a; color: #fff; }
.inv-btn-primary:hover:not(:disabled)[b-d3dceh9vjt] { background: #15803d; }

.inv-btn-ghost[b-d3dceh9vjt] { background: #fff; border-color: #d1d5db; color: #374151; }
.inv-btn-ghost:hover[b-d3dceh9vjt] { background: #f3f4f6; }
/* _content/ErpPowergest/Presentation/Empresas/PuestaEnMarcha/Components/Opciones.razor.rz.scp.css */
/* OPCIONES EN TARJETAS (PM4)
   Mismo lenguaje visual que las tarjetas de datos de ejemplo (`pem-juego`): icono a la izquierda,
   título y frase, borde y fondo en la elegida. Se repite el estilo en vez de compartir la clase
   porque son dos componentes distintos y unir sus selectores ataría el aspecto de uno al del otro. */
.pem-opciones[b-z7pk8di2rp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.pem-opcion[b-z7pk8di2rp] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}

.pem-opcion:hover:not(:disabled)[b-z7pk8di2rp] {
    border-color: #c7d2fe;
    background: #fafbff;
}

.pem-opcion:disabled[b-z7pk8di2rp] {
    opacity: .6;
    cursor: default;
}

.pem-opcion.active[b-z7pk8di2rp] {
    border-color: #6366f1;
    background: #f5f6ff;
    box-shadow: 0 0 0 1px #6366f1 inset;
}

.pem-opcion-ico[b-z7pk8di2rp] {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
}

.pem-opcion.active .pem-opcion-ico[b-z7pk8di2rp] {
    color: #4338ca;
}

.pem-opcion-txt[b-z7pk8di2rp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pem-opcion-nombre[b-z7pk8di2rp] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

.pem-opcion-desc[b-z7pk8di2rp] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.35;
}

/* El control de formulario equivalente: invisible pero PRESENTE. No es `display:none` ni
   `visibility:hidden` —eso lo sacaría del árbol de accesibilidad y del foco—, que es justo lo que no
   se quiere: es el control que usa quien navega con teclado o lector de pantalla. */
.pem-oculto-visual[b-z7pk8di2rp] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* _content/ErpPowergest/Presentation/Empresas/PuestaEnMarcha/Components/VistaPrevia.razor.rz.scp.css */
/* La vista previa del asistente (PM5). Es un dibujo: tipografía pequeña, colores apagados y un
   rótulo que dice lo que es. Nada aquí debe parecer un dato del usuario. */

.pem-previa[b-ehu4bz6ip1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 0;
}

/* En estrecho se oculta, no se apila: debajo del formulario sería ruido que hay que pasar de largo
   para llegar al botón. El corte es el mismo de la rejilla de la página. */
@media (max-width: 1100px) {
    .pem-previa[b-ehu4bz6ip1] {
        display: none;
    }
}

.pem-previa-marco[b-ehu4bz6ip1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.pem-previa-cab[b-ehu4bz6ip1] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 9px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
    font-weight: 800;
    color: #4338ca;
}

.pem-previa-cab .material-symbols-rounded[b-ehu4bz6ip1] {
    font-size: 18px;
}

.pem-previa-filas[b-ehu4bz6ip1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pem-previa-fila[b-ehu4bz6ip1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: #374151;
}

.pem-previa-txt[b-ehu4bz6ip1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pem-previa-num[b-ehu4bz6ip1] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

/* Lo que acaba de aparecer por la respuesta que se está dando: es la relación causa-efecto que
   justifica toda la columna. */
.pem-previa-nuevo .pem-previa-txt[b-ehu4bz6ip1],
.pem-previa-nuevo .pem-previa-num[b-ehu4bz6ip1] {
    color: #4338ca;
    font-weight: 700;
}

.pem-previa-suave .pem-previa-txt[b-ehu4bz6ip1],
.pem-previa-suave .pem-previa-num[b-ehu4bz6ip1] {
    color: #9ca3af;
}

.pem-previa-total[b-ehu4bz6ip1] {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid #f1f5f9;
    font-weight: 800;
    color: #1f2937;
}

.pem-previa-total .pem-previa-num[b-ehu4bz6ip1] {
    color: #1f2937;
}

.pem-previa-pie[b-ehu4bz6ip1] {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.pem-previa-chip[b-ehu4bz6ip1] {
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
}

/* El rótulo que impide confundir el dibujo con datos reales. */
.pem-previa-nota[b-ehu4bz6ip1] {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
}
/* _content/ErpPowergest/Presentation/Empresas/PuestaEnMarcha/Pages/PuestaEnMarchaPage.razor.rz.scp.css */
/* Puesta en marcha de la empresa (CF4). CSS propio del componente, sin ::deep: no hay Templates de
   Syncfusion en esta pantalla y el aislamiento por atributo basta. */

.pem-page[b-avtv2v1ya0],
.pem-page *[b-avtv2v1ya0],
.pem-page *[b-avtv2v1ya0]::before,
.pem-page *[b-avtv2v1ya0]::after {
    box-sizing: border-box;
}

.pem-page[b-avtv2v1ya0] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 9px;           /* sin padding ni max-width propios (el borde lo pone .main-body); 9px, como Clientes */
    overflow: hidden;
}

/* CABECERA */

.pem-header[b-avtv2v1ya0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Título en dos fases, como Clientes: primero en una línea y sin ceder; con la botonera del todo
   replegada (command-bar-host-collapsed, la pone el propio CommandBar) el bloque cede y envuelve. */
.pem-heading[b-avtv2v1ya0] {
    flex: 0 0 auto;
    min-width: 0;
}

.pem-header.command-bar-host-collapsed > .pem-heading[b-avtv2v1ya0] {
    flex: 1 1 auto;
}

.pem-header.command-bar-host-collapsed .pem-title[b-avtv2v1ya0],
.pem-header.command-bar-host-collapsed .pem-subtitle[b-avtv2v1ya0] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. Con ::deep porque el
   elemento lo pinta el componente CommandBar, no esta página. */
.pem-header[b-avtv2v1ya0]  .pem-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.pem-kicker[b-avtv2v1ya0] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.pem-title[b-avtv2v1ya0] {
    margin: 2px 0 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    white-space: nowrap;
}

.pem-subtitle[b-avtv2v1ya0] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    max-width: clamp(440px, 52vw, 900px);
    overflow-wrap: break-word;
}

/* TARJETAS */

.pem-card[b-avtv2v1ya0] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.pem-msg[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    padding: 34px 18px;
}

.pem-msg-ico[b-avtv2v1ya0] {
    font-size: 34px;
    color: #9ca3af;
}

.pem-msg strong[b-avtv2v1ya0] {
    color: #1f2937;
    font-size: 15px;
}

.pem-msg p[b-avtv2v1ya0] {
    margin: 0;
    max-width: 460px;
}

/* PASOS */

/* Los siete pasos + «Resumen» se reparten TODO el ancho: una columna igual por botón (la rejilla
   crece sola con el número de pasos, no lleva un 8 escrito). En tablet caen a 4 columnas y en móvil
   a 2; el texto que no quepa se recorta con «…» y el rótulo entero queda en el title. */
.pem-steps[b-avtv2v1ya0] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.pem-step[b-avtv2v1ya0] {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.pem-step:hover:not(:disabled)[b-avtv2v1ya0] {
    border-color: #93b4f5;
    background: #f8fbff;
    color: #1d4ed8;
}

.pem-step:disabled[b-avtv2v1ya0] {
    cursor: default;
    opacity: .6;
}

.pem-step.active[b-avtv2v1ya0] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.pem-step-text[b-avtv2v1ya0] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .pem-steps[b-avtv2v1ya0] {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pem-steps[b-avtv2v1ya0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pem-step.done .pem-step-num[b-avtv2v1ya0] {
    background: #dcfce7;
    color: #166534;
}

.pem-step-num[b-avtv2v1ya0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    flex: 0 0 auto;
}

.pem-step-num .material-symbols-rounded[b-avtv2v1ya0] {
    font-size: 15px;
}

.pem-step.active .pem-step-num[b-avtv2v1ya0] {
    background: #2563eb;
    color: #ffffff;
}

/* CUERPO DEL PASO */

.pem-body[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: auto;
}

.pem-step-head h2[b-avtv2v1ya0] {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
    color: #1f2937;
}

.pem-step-head p[b-avtv2v1ya0] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.pem-diag-head[b-avtv2v1ya0] {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* DOS COLUMNAS DURANTE EL CUESTIONARIO (PM5)
   Preguntas a la izquierda, vista previa a la derecha. En estrecho la previa SE OCULTA, no se apila:
   en un móvil sería ruido que hay que pasar de largo para llegar al botón. */

.pem-con-previa[b-avtv2v1ya0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.pem-preguntas[b-avtv2v1ya0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1100px) {
    .pem-con-previa[b-avtv2v1ya0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* CAMPOS */

.pem-fields[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

.pem-field[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pem-field label[b-avtv2v1ya0] {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

/* PM3: la pregunta que solo aparece cuando otra respuesta la abre («¿cuántos almacenes?»). Va sangrada
   y con el campo estrecho para que se lea como lo que es —el detalle de la casilla de arriba— y no como
   una pregunta más de la lista. */
.pem-field-sub[b-avtv2v1ya0] {
    margin: -4px 0 4px 34px;
    max-width: 320px;
}

.pem-input[b-avtv2v1ya0] {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

.pem-input:focus[b-avtv2v1ya0] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.pem-hint[b-avtv2v1ya0] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.pem-check[b-avtv2v1ya0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    background: #ffffff;
}

.pem-check:hover[b-avtv2v1ya0] {
    border-color: #c7d2fe;
}

.pem-check-off[b-avtv2v1ya0] {
    opacity: .55;
}

.pem-check input[b-avtv2v1ya0] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: #6366f1;
}

.pem-check span[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pem-check strong[b-avtv2v1ya0] {
    font-size: 14px;
    font-weight: 750;
    color: #1f2937;
}

.pem-check em[b-avtv2v1ya0] {
    font-style: normal;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* NOTA INFORMATIVA (paso 3) */

.pem-note[b-avtv2v1ya0] {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    max-width: 720px;
}

.pem-note-ico[b-avtv2v1ya0] {
    font-size: 26px;
    color: #2563eb;
    flex: 0 0 auto;
}

.pem-note strong[b-avtv2v1ya0] {
    display: block;
    font-size: 14px;
    color: #1e3a8a;
    margin-bottom: 6px;
}

.pem-note p[b-avtv2v1ya0] {
    margin: 0 0 8px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.45;
}

.pem-note code[b-avtv2v1ya0] {
    background: rgba(255, 255, 255, .7);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

.pem-link[b-avtv2v1ya0] {
    font-size: 13px;
    font-weight: 750;
    color: #1d4ed8;
    text-decoration: none;
}

.pem-link:hover[b-avtv2v1ya0] {
    text-decoration: underline;
}

/* INFORME DE ACCIONES */

.pem-applied[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #dcfce7;
    color: #166534;
    font-size: 13px;
    font-weight: 750;
}

/* EL CIERRE (PM8) */

.pem-listo[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.pem-listo-cab[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    font-size: 14px;
    font-weight: 800;
}

.pem-listo-accesos[b-avtv2v1ya0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Los accesos del cierre son enlaces, pero se ven como el resto de botones de la página (.pem-btn). */
.pem-listo-acceso[b-avtv2v1ya0] {
    text-decoration: none;
}

.pem-listo-acceso .material-symbols-rounded[b-avtv2v1ya0] {
    font-size: 18px;
    line-height: 1;
    color: #2563eb;
}

.pem-acciones[b-avtv2v1ya0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pem-accion[b-avtv2v1ya0] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 10px;
    background: #ffffff;
}

.pem-accion-ico[b-avtv2v1ya0] {
    font-size: 20px;
    flex: 0 0 auto;
    color: #6b7280;
}

.pem-accion-txt[b-avtv2v1ya0] {
    min-width: 0;
    flex: 1 1 auto;
}

.pem-accion-top[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pem-accion-top strong[b-avtv2v1ya0] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

/* Sin `text-transform: uppercase`: en mayúsculas, «DE FÁBRICA · LO DEJÓ EL ALTA DE LA EMPRESA» se lee
   como un aviso de sistema, y estas etiquetas son la explicación tranquila de lo que va a pasar. */
.pem-accion-badge[b-avtv2v1ya0] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #6b7280;
    white-space: nowrap;
}

.pem-accion-detalle[b-avtv2v1ya0] {
    margin-top: 4px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}

/* FUN-186: campo editable de una propuesta que va a crearse */

.pem-accion-editar[b-avtv2v1ya0] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pem-accion-editar label[b-avtv2v1ya0] {
    font-size: 12px;
    font-weight: 750;
    color: #374151;
}

.pem-prop-input[b-avtv2v1ya0] {
    width: auto;
    max-width: 280px;
    height: 30px;
    font-size: 13px;
}

/* PM3: la lista de nombres de una línea que crea varias piezas (almacenes, cajas). Los campos van en
   columna y no en fila porque se leen como una lista ordenada —«Almacén 2», «Almacén 3»—: en fila, con
   tres o cuatro, el orden deja de verse. La etiqueta ocupa su propia línea por lo mismo. */
.pem-accion-editar-lista[b-avtv2v1ya0] {
    flex-direction: column;
    align-items: stretch;
}

.pem-accion-editar-lista .pem-prop-input[b-avtv2v1ya0] {
    max-width: 320px;
}

.pem-accion-creado[b-avtv2v1ya0] { border-left-color: #22c55e; }
.pem-accion-creado .pem-accion-ico[b-avtv2v1ya0],
.pem-accion-creado .pem-accion-badge[b-avtv2v1ya0] { color: #15803d; }

.pem-accion-enlazado[b-avtv2v1ya0] { border-left-color: #3b82f6; }
.pem-accion-enlazado .pem-accion-ico[b-avtv2v1ya0],
.pem-accion-enlazado .pem-accion-badge[b-avtv2v1ya0] { color: #1d4ed8; }

.pem-accion-existia[b-avtv2v1ya0] { border-left-color: #d1d5db; }

/* FUN-187: lo que dejó el alta de la empresa. Se separa de «ya existía» (que ahora significa «esto
   es suyo, de antes») porque en una empresa recién creada leer «ya existía» sugería datos ajenos. */
.pem-accion-fabrica[b-avtv2v1ya0] { border-left-color: #a5b4fc; background: #f8faff; }
.pem-accion-fabrica .pem-accion-ico[b-avtv2v1ya0],
.pem-accion-fabrica .pem-accion-badge[b-avtv2v1ya0] { color: #4f46e5; }

.pem-accion-manual[b-avtv2v1ya0] { border-left-color: #f59e0b; background: #fffbeb; }
.pem-accion-manual .pem-accion-ico[b-avtv2v1ya0],
.pem-accion-manual .pem-accion-badge[b-avtv2v1ya0] { color: #b45309; }

.pem-accion-omitido[b-avtv2v1ya0] { border-left-color: #cbd5e1; }

/* DIAGNÓSTICO */

.pem-diag[b-avtv2v1ya0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pem-diag-item[b-avtv2v1ya0] {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 10px;
    background: #ffffff;
}

.pem-diag-top[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pem-diag-top strong[b-avtv2v1ya0] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

.pem-diag-ico[b-avtv2v1ya0] {
    font-size: 14px;
    line-height: 1;
}

.pem-diag-falta[b-avtv2v1ya0] {
    margin-top: 6px;
    padding-left: 22px;
    font-size: 12.5px;
    color: #374151;
    line-height: 1.4;
}

.pem-diag-remedio[b-avtv2v1ya0] {
    color: #6b7280;
    font-size: 12px;
}

.pem-diag-ok[b-avtv2v1ya0]   { border-left-color: #22c55e; }
.pem-diag-warn[b-avtv2v1ya0] { border-left-color: #f59e0b; background: #fffbeb; }
.pem-diag-bad[b-avtv2v1ya0]  { border-left-color: #ef4444; background: #fef2f2; }

/* RESUMEN A DOS ZONAS (FUN-187)

   El informe ocupaba el ancho entero de la pantalla —líneas de 1.800 px— y la oferta de datos de
   ejemplo quedaba al final del scroll, invisible. Rejilla de dos columnas: el informe acotado a la
   izquierda con su propio scroll, la oferta fija a la derecha (340 px, como la lista de tarjetas de
   «Gestión de ejercicios»), visible sin bajar. En estrecho cae a una columna y la oferta se apila
   debajo, y el scroll pasa a ser el de la rejilla entera. */

.pem-resumen[b-avtv2v1ya0] {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

.pem-resumen-main[b-avtv2v1ya0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pem-resumen-side[b-avtv2v1ya0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fafafa;
    position: sticky;
    top: 0;
}

/* ESPACIO DE TRABAJO PROPUESTO (PM7)
   Va encima de los datos de ejemplo en el lateral: primero dónde vas a trabajar, luego con qué. */

.pem-espacio[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
}

.pem-espacio-tarjeta[b-avtv2v1ya0] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #f5f6ff;
}

.pem-espacio-ico[b-avtv2v1ya0] {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: #4338ca;
}

.pem-espacio-txt[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pem-espacio-nombre[b-avtv2v1ya0] {
    font-size: 13.5px;
    font-weight: 750;
    color: #1f2937;
}

.pem-espacio-desc[b-avtv2v1ya0] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.35;
}

.pem-espacio-btns[b-avtv2v1ya0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pem-espacio-hecho[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #dcfce7;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

/* DATOS DE EJEMPLO (CF8) */

.pem-ejemplo-head[b-avtv2v1ya0] {
    /* Dentro de su propio contenedor ya no necesita la línea que lo separaba del informe. */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pem-resumen-side .pem-ejemplo-head h2[b-avtv2v1ya0] {
    font-size: 15px;
}

.pem-resumen-side .pem-ejemplo-head p[b-avtv2v1ya0] {
    font-size: 12.5px;
}

/* Las tarjetas de juego: el patrón visual de «Gestión de ejercicios» (icono, título, subtítulo y
   badges; la elegida con borde y fondo). Cuatro de golpe, sin desplegable que esconda los otros. */

.pem-juegos[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pem-juego[b-avtv2v1ya0] {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pem-juego:hover:not(:disabled)[b-avtv2v1ya0] {
    background: #f8fbff;
    border-color: #c7d2fe;
}

.pem-juego:disabled[b-avtv2v1ya0] {
    opacity: .6;
    cursor: default;
}

.pem-juego.active[b-avtv2v1ya0] {
    border-color: #a5b4fc;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .10);
}

.pem-juego-ico[b-avtv2v1ya0] {
    font-size: 24px;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 11px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pem-juego-txt[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pem-juego-nombre[b-avtv2v1ya0] {
    font-size: 13.5px;
    font-weight: 800;
    color: #1f2937;
}

.pem-juego-desc[b-avtv2v1ya0] {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
}

.pem-juego-side[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.pem-badge[b-avtv2v1ya0] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pem-badge-tuyo[b-avtv2v1ya0] {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.pem-badge-fichas[b-avtv2v1ya0] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.pem-juegos-btn[b-avtv2v1ya0] {
    align-self: stretch;
}

.pem-ejemplo[b-avtv2v1ya0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.pem-ejemplo-hecho[b-avtv2v1ya0] {
    align-items: flex-start;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.pem-ejemplo-hecho .material-symbols-rounded[b-avtv2v1ya0] {
    font-size: 26px;
    color: #16a34a;
    flex: 0 0 auto;
}

.pem-ejemplo-hecho strong[b-avtv2v1ya0] {
    display: block;
    font-size: 14px;
    color: #14532d;
    margin-bottom: 6px;
}

.pem-ejemplo-hecho p[b-avtv2v1ya0] {
    margin: 0;
    font-size: 12.5px;
    color: #166534;
    line-height: 1.45;
}

.pem-ejemplo-hecho code[b-avtv2v1ya0] {
    background: rgba(255, 255, 255, .7);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

/* CM2 — aviso de que la empresa ya tiene datos propios. Ámbar y no rojo: informa de algo que hay que
   saber, no impide nada. Sembrar encima está permitido. */

.pem-ejemplo-aviso[b-avtv2v1ya0] {
    align-items: flex-start;
    border-color: #fde68a;
    background: #fffbeb;
}

.pem-ejemplo-aviso .material-symbols-rounded[b-avtv2v1ya0] {
    font-size: 26px;
    color: #d97706;
    flex: 0 0 auto;
}

.pem-ejemplo-aviso strong[b-avtv2v1ya0] {
    display: block;
    font-size: 14px;
    color: #78350f;
    margin-bottom: 6px;
}

.pem-ejemplo-aviso p[b-avtv2v1ya0] {
    margin: 0;
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.45;
}

/* CM2 — el criterio de códigos */

.pem-criterio[b-avtv2v1ya0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.pem-criterio-titulo[b-avtv2v1ya0] {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
}

.pem-criterio-op[b-avtv2v1ya0] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.pem-criterio-op input[b-avtv2v1ya0] {
    margin-top: 3px;
    flex: 0 0 auto;
}

.pem-criterio-op b[b-avtv2v1ya0] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.pem-criterio-op small[b-avtv2v1ya0] {
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 2px;
}

.pem-criterio-op code[b-avtv2v1ya0] {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11.5px;
}

/* PIE */

.pem-footer[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.pem-footer-right[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* BOTONES DEL CONTENIDO — un solo vocabulario en toda la página (como .op-btn de Claves de caja):
   36 px de alto, radio 8, icono + texto; principal azul relleno, el resto blanco con borde. */
.pem-btn[b-avtv2v1ya0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.pem-btn:hover:not(:disabled)[b-avtv2v1ya0] {
    background: #f8fafc;
    border-color: #c3cdd9;
}

.pem-btn:disabled[b-avtv2v1ya0] {
    opacity: .55;
    cursor: default;
}

.pem-btn-ico[b-avtv2v1ya0] {
    font-size: 18px;
    line-height: 1;
}

/* Secundario «suave»: mismo botón blanco con borde, con el texto un punto más apagado. */
.pem-btn-ghost[b-avtv2v1ya0] {
    color: #475569;
}

.pem-btn-primary[b-avtv2v1ya0] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.pem-btn-primary:hover:not(:disabled)[b-avtv2v1ya0] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* RESPONSIVE

   Mismo corte que «Gestión de ejercicios» (980 px): la rejilla del Resumen cae a una columna y la
   oferta de datos de ejemplo se apila debajo del informe, a ancho completo y sin quedarse pegada
   arriba (ya no hay dos columnas que sincronizar). */

@media (max-width: 980px) {
    .pem-resumen[b-avtv2v1ya0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pem-resumen-side[b-avtv2v1ya0] {
        position: static;
    }
}

/* _content/ErpPowergest/Presentation/Errores/Pages/Error.razor.rz.scp.css */
.error-wrapper[b-71doomwgie] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-71doomwgie] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-71doomwgie] {
    height: 32px;
    width: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.app-title[b-71doomwgie] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.error-box[b-71doomwgie] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .error-box[b-71doomwgie] {
        max-width: 90%;
        padding: 25px;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .error-box[b-71doomwgie] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .error-box[b-71doomwgie] {
        max-width: 50%;
    }
}

.error-icon[b-71doomwgie] {
    font-size: 3.5rem;
    color: #e53935;
    line-height: 1;
}

.error-title[b-71doomwgie] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.message[b-71doomwgie] {
    color: #555;
    font-size: 1rem;
    margin: 0.4rem 0 0.8rem;
}

.request-id[b-71doomwgie] {
    font-size: 0.85rem;
    color: #777;
    word-break: break-all;
}

    .request-id code[b-71doomwgie] {
        background: #f0f1f5;
        padding: 2px 6px;
        border-radius: 6px;
        color: #444;
    }

/* Textos */
.text[b-71doomwgie] {
    margin-top: 1.2rem;
}

.small[b-71doomwgie] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-71doomwgie] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-71doomwgie] {
    margin-top: 0.5rem !important;
}
/* _content/ErpPowergest/Presentation/Errores/Pages/TenantNotFound.razor.rz.scp.css */
.error-wrapper[b-bippu667cc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-bippu667cc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-bippu667cc] {
    height: 32px;
    width: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.app-title[b-bippu667cc] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.error-box[b-bippu667cc] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .error-box[b-bippu667cc] {
        max-width: 90%;
        padding: 25px;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .error-box[b-bippu667cc] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .error-box[b-bippu667cc] {
        max-width: 50%;
    }
}

.error-icon[b-bippu667cc] {
    font-size: 3.5rem;
    color: #e53935;
    line-height: 1;
}

.error-title[b-bippu667cc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.message[b-bippu667cc] {
    color: #555;
    font-size: 1rem;
    margin: 0.4rem 0 0.8rem;
}

/* Textos */
.text[b-bippu667cc] {
    margin-top: 1.2rem;
}

.small[b-bippu667cc] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-bippu667cc] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-bippu667cc] {
    margin-top: 0.5rem !important;
}
/* _content/ErpPowergest/Presentation/Errores/Pages/TenantOtroServidor.razor.rz.scp.css */
.error-wrapper[b-nisvm3xycn] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

/* Brand */
.app-brand[b-nisvm3xycn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-nisvm3xycn] {
    height: 32px;
    width: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.app-title[b-nisvm3xycn] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.error-box[b-nisvm3xycn] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

/* Moviles verticales */
@media (max-width: 480px) {
    .error-box[b-nisvm3xycn] {
        max-width: 90%;
        padding: 25px;
    }
}

/* Moviles grandes / Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .error-box[b-nisvm3xycn] {
        max-width: 70%;
    }
}

/* Tablets horizontales */
@media (min-width: 769px) and (max-width: 1024px) {
    .error-box[b-nisvm3xycn] {
        max-width: 50%;
    }
}

.error-icon[b-nisvm3xycn] {
    font-size: 3.5rem;
    color: #e53935;
    line-height: 1;
}

.error-title[b-nisvm3xycn] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.message[b-nisvm3xycn] {
    color: #555;
    font-size: 1rem;
    margin: 0.4rem 0 0.8rem;
}

/* Textos */
.text[b-nisvm3xycn] {
    margin-top: 1.2rem;
}

.small[b-nisvm3xycn] {
    margin-top: 0rem !important;
    font-size: 0.9rem;
}

.text a[b-nisvm3xycn] {
    color: #3b82f6;
    text-decoration: none;
}

.back-link[b-nisvm3xycn] {
    margin-top: 0.5rem !important;
}
/* _content/ErpPowergest/Presentation/Errores/Pages/TenantSuspendido.razor.rz.scp.css */
/* Mismas reglas que TenantNotFound.razor.css. El CSS por componente NO se hereda entre páginas:
   esta usaba sus clases sin tener su propio fichero y se veía sin estilo (logo gigante, texto
   pegado al borde). */
.error-wrapper[b-jv58sczum9] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    background: #f5f6fa;
}

.app-brand[b-jv58sczum9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.brand-logo[b-jv58sczum9] {
    height: 32px;
    width: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.app-title[b-jv58sczum9] {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #333;
}

.error-box[b-jv58sczum9] {
    width: 100%;
    max-width: 30%;
    padding: 35px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

@media (max-width: 480px) {
    .error-box[b-jv58sczum9] {
        max-width: 90%;
        padding: 25px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .error-box[b-jv58sczum9] {
        max-width: 70%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .error-box[b-jv58sczum9] {
        max-width: 50%;
    }
}

/* Ámbar y no rojo: la dirección es buena y la cuenta existe; es un aviso administrativo, no un error. */
.error-icon[b-jv58sczum9] {
    font-size: 3.5rem;
    color: #d97706;
    line-height: 1;
}

.error-title[b-jv58sczum9] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.message[b-jv58sczum9] {
    color: #555;
    font-size: 1rem;
    margin: 0.4rem 0 0.8rem;
}

.back-link[b-jv58sczum9] {
    margin: 0;
    font-size: 0.9rem;
}

.back-link a[b-jv58sczum9] {
    color: #3b82f6;
    text-decoration: none;
}
/* _content/ErpPowergest/Presentation/Fichas/Agentes/Pages/AgenteFicha.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE AGENTE — pantalla unificada (ver + editar + alta)
   ───────────────────────────────────────────────────────────────────────────
   Esta ficha absorbió el antiguo AgenteFormulario: usa su sistema visual `cform-*`
   (tarjetas, rejillas de 12 columnas, inputs, controles) para la captura y conserva
   el cromo propio de la ficha (navegador entre agentes, KPIs y el modal de borrado).
   Es gemelo del de las fichas de cliente y proveedor, que son la implementación de
   referencia: si algo cambia allí, cambia aquí. Reúne DOS bloques:

     1. SISTEMA cform-*  — el mismo de la ficha de cliente (que a su vez lo heredó del
        antiguo formulario).
     2. CROMO DE FICHA   — cabecera con el navegador, separación de los KPIs, y el
        modal de confirmación de borrado (clases cf-*).

   El agente es UN bloque de captura, sin pestañas ni contenido de solo lectura, así que
   de aquel sistema solo queda lo que esta ficha pinta: rejilla, tarjeta, campos y sus
   controles. Lo que allí visten las vistas de tab (rail de pestañas, direcciones, logo,
   etiquetas, casillas, segmentado…) no se copia: sería CSS que no puede casar con nada.
   Si el agente gana alguno de esos elementos, se trae su bloque de la ficha de cliente.

   La raíz conserva la clase `agente-ficha-page` (reset y reduced-motion globales de
   wwwroot/css/ficha-terceros.css), además de `cform-page`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El reset alcanza también el DOM de las vistas de Views/ (`::deep`): sin él, Blazor
   ataría el `*` al scope de ESTA página y los hijos se quedarían sin box-sizing. */
.cform-page[b-ytzyeugn3k],
.cform-page[b-ytzyeugn3k]  *,
.cform-page[b-ytzyeugn3k]  *::before,
.cform-page[b-ytzyeugn3k]  *::after {
    box-sizing: border-box;
}

.cform-page[b-ytzyeugn3k] {
    /* Fondo de .main-body: lo replican la barra pegada y su sangrado superior. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* min-height:100% = suelo de comodidad: la página llena como mínimo el alto que le cede .main-body
       (y crece por encima si su contenido no cabe; el scroll lo lleva la ventana). Es lo que permite
       que la fila de contenido reparta el alto sobrante hacia el tab activo. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--cf-text);
    animation: agenteFichaPageIn-b-ytzyeugn3k 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA PEGADA  ─────────────────────────────
   Navegador/título, acciones y KPIs viajan juntos en un único elemento
   sticky: así no hay que saber cuánto mide la cabecera para posicionar el resto. */

.cform-chrome[b-ytzyeugn3k] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cf-bg);
}

    /* .main-body tiene padding: sin este sangrado, el contenido asomaría por
       encima de la barra pegada al desplazar. */
    .cform-chrome[b-ytzyeugn3k]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 20px;
        background: var(--cf-bg);
    }

.cform-topbar[b-ytzyeugn3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    min-width: 0;
}

/* El bloque de título cede espacio para que el CommandBar conserve su ancho natural. */
.cform-topbar-text[b-ytzyeugn3k] {
    min-width: 0;
}

.cform-title[b-ytzyeugn3k] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cform-subtitle[b-ytzyeugn3k] {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

/* El propio CommandBar repliega comandos al menú «···» cuando falta ancho. */
.cform-page[b-ytzyeugn3k]  .cform-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* ===== CABECERA CON NAVEGADOR (modo ficha/edición) =====
   Fila del navegador entre agentes (izquierda) + CommandBar (derecha). Reemplaza
   al `cform-topbar` cuando hay un agente cargado. */
.agente-ficha-header[b-ytzyeugn3k] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
}

/* Fase 2: el CommandBar ya está totalmente replegado a «···» y aún no cabe -> el navegador cede. */
.agente-ficha-header.command-bar-host-collapsed[b-ytzyeugn3k]  .cf-nav {
    flex: 1 1 auto;
}

/* Último recurso: si ni con el CommandBar replegado a «···» cabe todo, la info del agente cede. */
.agente-ficha-header.command-bar-host-collapsed[b-ytzyeugn3k]  .cf-identity-wrap {
    min-width: 0;
}

.agente-ficha-header[b-ytzyeugn3k]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ===== KPIs (modo ficha/edición) =====
   Tablero de indicadores dentro del cromo pegado, bajo la cabecera. */
.aff-kpis[b-ytzyeugn3k] {
    margin-bottom: 12px;
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.cform-alert[b-ytzyeugn3k] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cf-gap);
    padding: 10px 14px;
    border: 1px solid var(--cf-danger-line);
    border-left: 3px solid #dc2626;
    border-radius: var(--cf-r-md);
    background: var(--cf-danger-soft);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .cform-alert .material-symbols-outlined[b-ytzyeugn3k] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ─────────────────────  REJILLA DE PÁGINA (TARJETAS)  ───────────────────── */

.cform-page[b-ytzyeugn3k]  .cform-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cf-gap);
    align-items: start;
    min-width: 0;
}

.cform-page[b-ytzyeugn3k]  .cform-col-4 {
    grid-column: span 4;
}

.cform-page[b-ytzyeugn3k]  .cform-col-6 {
    grid-column: span 6;
}

.cform-page[b-ytzyeugn3k]  .cform-col-8 {
    grid-column: span 8;
}

.cform-page[b-ytzyeugn3k]  .cform-col-12 {
    grid-column: 1 / -1;
}

/* Una sola columna de tarjetas cuando el ancho ya no da para dos. */
@media (max-width: 1100px) {
    .cform-page[b-ytzyeugn3k]  .cform-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cform-page[b-ytzyeugn3k]  .cform-col-4,
    .cform-page[b-ytzyeugn3k]  .cform-col-6,
    .cform-page[b-ytzyeugn3k]  .cform-col-8,
    .cform-page[b-ytzyeugn3k]  .cform-col-12 {
        grid-column: 1 / -1;
    }
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-ytzyeugn3k]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

.cform-page[b-ytzyeugn3k]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-ytzyeugn3k]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho
   de ESTA tarjeta, no del viewport. */
.cform-page[b-ytzyeugn3k]  .cform-card-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-ytzyeugn3k]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-ytzyeugn3k]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-ytzyeugn3k]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-ytzyeugn3k]  .cform-field-2 {
    grid-column: span 2;
}

.cform-page[b-ytzyeugn3k]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-ytzyeugn3k]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-ytzyeugn3k]  .cform-field-5 {
    grid-column: span 5;
}

.cform-page[b-ytzyeugn3k]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-ytzyeugn3k]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-ytzyeugn3k]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-ytzyeugn3k]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-ytzyeugn3k]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-ytzyeugn3k]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-ytzyeugn3k]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ─────────────────────────────
   `::deep` además del selector directo: el input puede venir de un componente hijo
   (CampoConBuscador hereda la clase del host vía ClaseInput) y el CSS scoped de esta
   página no lo marcaría. Anclado en .cform-page para no sangrar a otros componentes. */

.cform-page[b-ytzyeugn3k]  .cform-input,
.cform-page[b-ytzyeugn3k]  .cform-select,
.cform-page[b-ytzyeugn3k]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-ytzyeugn3k]  .cform-input,
.cform-page[b-ytzyeugn3k]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-ytzyeugn3k]  .cform-select {
    cursor: pointer;
}

.cform-page[b-ytzyeugn3k]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-ytzyeugn3k]  .cform-input::placeholder,
.cform-page[b-ytzyeugn3k]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-ytzyeugn3k]  .cform-input:hover,
.cform-page[b-ytzyeugn3k]  .cform-select:hover,
.cform-page[b-ytzyeugn3k]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-ytzyeugn3k]  .cform-input:focus,
.cform-page[b-ytzyeugn3k]  .cform-select:focus,
.cform-page[b-ytzyeugn3k]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

.cform-page[b-ytzyeugn3k]  .cform-input-readonly,
.cform-page[b-ytzyeugn3k]  .cform-input-readonly:hover {
    background: var(--cf-surface-2);
    border-color: var(--cf-line);
    color: var(--cf-muted);
    cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   CROMO DE FICHA — modal de confirmación de borrado (contenido del <Modal>)
   ══════════════════════════════════════════════════════════════════════════ */

.cf-primary-btn[b-ytzyeugn3k],
.cf-action-btn[b-ytzyeugn3k] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.cf-primary-btn[b-ytzyeugn3k] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cf-primary-btn:hover[b-ytzyeugn3k] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cf-action-btn[b-ytzyeugn3k] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cf-action-btn:hover[b-ytzyeugn3k] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cf-danger-btn[b-ytzyeugn3k] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .cf-danger-btn:hover:not(:disabled)[b-ytzyeugn3k] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .cf-danger-btn:disabled[b-ytzyeugn3k] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.cf-confirm-modal[b-ytzyeugn3k] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cf-confirm-icon[b-ytzyeugn3k] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.cf-confirm-body[b-ytzyeugn3k] {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-confirm-subtitle[b-ytzyeugn3k] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .cf-confirm-subtitle strong[b-ytzyeugn3k] {
        font-weight: 850;
        color: #1f2937;
    }

.cf-confirm-error[b-ytzyeugn3k] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 750;
}

.cf-confirm-actions[b-ytzyeugn3k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ───────────────────────────────  ANIMACIÓN  ─────────────────────────────
   Solo opacidad: NO usar filter/transform aquí. Un ancestro con filter (aunque sea
   blur(0)) crea un «containing block» para los descendientes position:fixed, lo que
   atraparía el modal de borrado dentro del área de la ficha en vez de cubrir el
   viewport. */
@keyframes agenteFichaPageIn-b-ytzyeugn3k {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-ytzyeugn3k] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-ytzyeugn3k] {
        font-size: 18px;
    }

    .cform-subtitle[b-ytzyeugn3k] {
        display: none;   /* en móvil el subtítulo solo roba altura a la barra pegada */
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-ytzyeugn3k]  *,
    .cform-page[b-ytzyeugn3k]  *::before,
    .cform-page[b-ytzyeugn3k]  *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* RQ4: aviso bajo la cuenta cuando no es la de su código (solo avisa). */
.cform-page[b-ytzyeugn3k]  .cform-aviso {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    color: #9a5b00;
}

/* RQ6: lupa del campo Código (la pulsa también F2): busca otra ficha con lo tecleado. */
.cform-page[b-ytzyeugn3k]  .cform-codigo-buscar {
    position: relative;
}

.cform-page[b-ytzyeugn3k]  .cform-codigo-buscar .cform-input {
    padding-right: 36px;
}

.cform-page[b-ytzyeugn3k]  .cform-codigo-lupa {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cf-muted);
    cursor: pointer;
}

.cform-page[b-ytzyeugn3k]  .cform-codigo-lupa:hover {
    background: var(--cf-surface-2);
}

.cform-page[b-ytzyeugn3k]  .cform-codigo-lupa .material-symbols-outlined {
    font-size: 18px;
}
/* _content/ErpPowergest/Presentation/Fichas/Agentes/Pages/AgentesPage.razor.rz.scp.css */
.clientes-page[b-aqv20m4a0w],
.clientes-page *[b-aqv20m4a0w],
.clientes-page *[b-aqv20m4a0w]::before,
.clientes-page *[b-aqv20m4a0w]::after {
    box-sizing: border-box;
}

.clientes-page[b-aqv20m4a0w] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       La última fila es `1fr` (mínimo automático = su contenido): reparte el espacio sobrante cuando
       sobra, y empuja el alto de la página cuando falta.
       Filas: cabecera, aviso de error y listado. Mientras los KPIs sigan comentados en el markup no
       tienen fila propia: al restaurarlos hay que devolverle su `auto` a esta lista. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    animation: clientesPageIn-b-aqv20m4a0w 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.clientes-header[b-aqv20m4a0w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    .clientes-header > div:first-child[b-aqv20m4a0w] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .clientes-header.command-bar-host-collapsed > div:first-child[b-aqv20m4a0w] {
        flex: 1 1 auto;
    }

.clientes-title[b-aqv20m4a0w] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.clientes-subtitle[b-aqv20m4a0w] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.clientes-header.command-bar-host-collapsed .clientes-title[b-aqv20m4a0w],
.clientes-header.command-bar-host-collapsed .clientes-subtitle[b-aqv20m4a0w] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al lado del texto, sin caja hasta el
   hover). Al no colgar de `.cform-page`, los tokens --cf-* de esas reglas resuelven por sus
   fallbacks, que son los mismos valores. */
.clientes-header-actions[b-aqv20m4a0w] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.clientes-list-panel[b-aqv20m4a0w] {
    /* Se ancla siempre a la última fila (la de 1fr) del grid de .clientes-page, independientemente de
       si el banner de error está presente o no. Así ocupa todo el alto disponible que sobra tras la
       cabecera, y crece con la tabla cuando no cabe. */
    grid-row: -2 / -1;
    display: grid;
    /* Filtros y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    grid-template-rows: auto 1fr;
    gap: 9px;
}

.clientes-filters[b-aqv20m4a0w] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 130px 180px 180px;
    gap: 10px;
    align-items: center;
}

.cl-filter-item[b-aqv20m4a0w],
.cl-filter-item-search[b-aqv20m4a0w] {
    min-width: 0;
}

.cl-filter-searchbox[b-aqv20m4a0w] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.cl-filter-search-icon[b-aqv20m4a0w] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cl-filter-input[b-aqv20m4a0w],
.cl-filter-select[b-aqv20m4a0w] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-filter-input[b-aqv20m4a0w] {
    padding: 0 13px;
}

.cl-filter-input-search[b-aqv20m4a0w] {
    padding-left: 38px;
}

.cl-filter-select[b-aqv20m4a0w] {
    padding: 0 12px;
    cursor: pointer;
}

.cl-filter-input[b-aqv20m4a0w]::placeholder {
    color: #9ca3af;
}

.cl-filter-input:focus[b-aqv20m4a0w],
.cl-filter-select:focus[b-aqv20m4a0w] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (insignia de estado y botones de acción).

   Todas esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que
   el CSS scoped de esta página no lo alcanza por sí solo. */

.cl-tabla[b-aqv20m4a0w] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto, pensado
   para el panel de pestañas de la ficha, que sí comprime) el contenido no podría empujar la fila
   `1fr` del grid y la tabla se desplazaría por dentro en vez de crecer la página. */
.clientes-page[b-aqv20m4a0w]  .tp-panel {
    min-height: auto;
}

/* COLUMNAS REPLEGABLES: los anchos los declara cada columna (Ancho, inline en el <th>); aquí solo
   se decide qué columna desaparece y a qué ancho de ventana (ver bloque RESPONSIVE). */

/* ACCIONES POR FILA (plantilla de la columna «Acciones») */

/* Botones-icono compactos (editar / borrar), mismo lenguaje que la tabla de almacenes. */
.clientes-page[b-aqv20m4a0w]  .cl-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clientes-page[b-aqv20m4a0w]  .cl-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que el usuario pueda seleccionar/resaltar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
}

    .clientes-page[b-aqv20m4a0w]  .cl-action-btn .material-symbols-outlined {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.clientes-page[b-aqv20m4a0w]  .cl-action-btn-edit {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .clientes-page[b-aqv20m4a0w]  .cl-action-btn-edit:hover {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.clientes-page[b-aqv20m4a0w]  .cl-action-btn-delete {
    color: #444653;
}

    .clientes-page[b-aqv20m4a0w]  .cl-action-btn-delete:hover {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* INSIGNIA DE ESTADO (plantilla de la columna «Estado»)
   Un agente solo está Activo o Inactivo, así que aquí no hay variante intermedia (naranja) como en
   los listados de clientes y proveedores. */

.clientes-page[b-aqv20m4a0w]  .cl-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.clientes-page[b-aqv20m4a0w]  .cl-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.clientes-page[b-aqv20m4a0w]  .cl-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

@keyframes clientesPageIn-b-aqv20m4a0w {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE (Desktop first) */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Código»,
   «Agente» y «Acciones» permanecen siempre visibles. La clase la lleva la cabecera Y sus celdas
   (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1400px) {
    .clientes-page[b-aqv20m4a0w]  .cl-col-poblacion {
        display: none;
    }
}

@media (max-width: 1200px) {
    .clientes-page[b-aqv20m4a0w]  .cl-col-nif {
        display: none;
    }
}

@media (max-width: 992px) {
    .clientes-page[b-aqv20m4a0w]  .cl-col-telefono,
    .clientes-page[b-aqv20m4a0w]  .cl-col-provincia {
        display: none;
    }
}

/* Mismo ancho al que caen los importes del listado de proveedores (compras y pendiente): son el
   equivalente de esta columna. */
@media (max-width: 768px) {
    .clientes-page[b-aqv20m4a0w]  .cl-col-comision {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho para nada más que identificar la fila y actuar sobre ella. */
@media (max-width: 640px) {
    .clientes-page[b-aqv20m4a0w]  .cl-col-estado {
        display: none;
    }
}

@media (max-width: 1280px) {
    .clientes-filters[b-aqv20m4a0w] {
        grid-template-columns: minmax(220px, 1fr) 110px 160px 160px;
    }
}

@media (max-width: 980px) {
    /* El modelo de alto («suelo = la pantalla, y crece si hace falta») ya es el mismo en todos los
       anchos, así que aquí no hay nada que corregir: solo el reparto de los filtros. */
    .clientes-filters[b-aqv20m4a0w] {
        grid-template-columns: 1fr 1fr;
    }

    .cl-filter-item-search[b-aqv20m4a0w] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .clientes-filters[b-aqv20m4a0w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .clientes-title[b-aqv20m4a0w] {
        font-size: 20px;
    }

    .clientes-subtitle[b-aqv20m4a0w] {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clientes-page[b-aqv20m4a0w],
    .clientes-page *[b-aqv20m4a0w],
    .clientes-page *[b-aqv20m4a0w]::before,
    .clientes-page *[b-aqv20m4a0w]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Components/ClienteTarifaModal.razor.rz.scp.css */
/* Estilo del modal calcado de los modales de Artículos (art-modal-*). El backdrop es position:fixed
   y cubre el viewport; en pantallas pequeñas ocupa toda la pantalla con scroll vertical del cuerpo. */

.art-modal-backdrop[b-6khbw7owoz] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.art-modal-card[b-6khbw7owoz] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.art-modal-card .material-symbols-outlined[b-6khbw7owoz] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.art-modal-header[b-6khbw7owoz] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.art-modal-title[b-6khbw7owoz] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-6khbw7owoz] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-body[b-6khbw7owoz] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.art-modal-info-box[b-6khbw7owoz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.art-modal-info-icon[b-6khbw7owoz] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-6khbw7owoz] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-6khbw7owoz] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-modal-field[b-6khbw7owoz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Fila de dos campos lado a lado (p. ej. cantidad desde/hasta, vigencia desde/hasta) en pantallas
   anchas. En pantallas estrechas colapsa a una sola columna (ver media query del final). */
.art-modal-row[b-6khbw7owoz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.art-modal-label[b-6khbw7owoz] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.art-modal-input[b-6khbw7owoz] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .art-modal-input[b-6khbw7owoz]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .art-modal-input:focus[b-6khbw7owoz] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* Selector con ventana de búsqueda (mismo estilo que los modales de Artículos). */
.art-modal-selector[b-6khbw7owoz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.art-modal-selector-trigger[b-6khbw7owoz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.art-modal-selector-trigger:hover[b-6khbw7owoz] {
    border-color: #bfdbfe;
}

.art-modal-selector-placeholder[b-6khbw7owoz] {
    color: #9aa6b2;
}

.art-modal-selector-icon[b-6khbw7owoz] {
    flex-shrink: 0;
    font-size: 20px;
    color: #64748b;
}

.art-modal-selector-clear[b-6khbw7owoz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.art-modal-selector-clear:hover[b-6khbw7owoz] {
    background: #f1f5f9;
    color: #ef4444;
}

.art-modal-selector-clear .material-symbols-outlined[b-6khbw7owoz] {
    font-size: 20px;
}

.art-modal-actions[b-6khbw7owoz] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que los modales de Artículos (sin animaciones de traslación en hover). */
.btn[b-6khbw7owoz] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-6khbw7owoz] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-6khbw7owoz] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-6khbw7owoz] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-6khbw7owoz] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-6khbw7owoz] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-6khbw7owoz] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-6khbw7owoz] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .art-modal-backdrop[b-6khbw7owoz] {
        padding: 0;
    }

    .art-modal-card[b-6khbw7owoz] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */

    /* Los pares de campos vuelven a apilarse en una sola columna. */
    .art-modal-row[b-6khbw7owoz] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Components/PuntosClienteModal.razor.rz.scp.css */
/* Ventana de puntos del cliente (incidencias 13, T9). CSS propio: el aislado de la ficha no llega aquí. */

.pcm-overlay[b-8r1mf9wlx8] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
}

.pcm-card[b-8r1mf9wlx8] {
    display: flex;
    flex-direction: column;
    inline-size: min(820px, 100%);
    max-block-size: calc(100vh - 32px);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    outline: none;
    overflow: hidden;
}

.pcm-header[b-8r1mf9wlx8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-block-end: 1px solid #e2e8f0;
}

.pcm-title[b-8r1mf9wlx8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

    .pcm-title .material-symbols-outlined[b-8r1mf9wlx8] {
        color: #00288e;
    }

.pcm-saldo[b-8r1mf9wlx8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

    .pcm-saldo strong[b-8r1mf9wlx8] {
        color: #00288e;
        font-size: 1.5rem;
    }

.pcm-saldo-rotulo[b-8r1mf9wlx8] {
    color: #64748b;
    font-size: .72rem;
}

.pcm-body[b-8r1mf9wlx8] {
    padding: 1rem 1.25rem;
    overflow: auto;
}

.pcm-aviso[b-8r1mf9wlx8] {
    margin-block-end: .8rem;
    padding: .6rem .8rem;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
    color: #92400e;
    font-size: .86rem;
}

.pcm-error[b-8r1mf9wlx8] {
    margin-block: .6rem;
    padding: .6rem .8rem;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .86rem;
}

.pcm-cifras[b-8r1mf9wlx8] {
    display: flex;
    gap: 1.5rem;
    margin-block-end: .8rem;
}

    .pcm-cifras div[b-8r1mf9wlx8] {
        display: flex;
        flex-direction: column;
    }

    .pcm-cifras span[b-8r1mf9wlx8] {
        color: #64748b;
        font-size: .75rem;
    }

    .pcm-cifras strong[b-8r1mf9wlx8] {
        font-size: 1.1rem;
    }

.pcm-bloque[b-8r1mf9wlx8] {
    margin-block-start: 1rem;
}

    .pcm-bloque h3[b-8r1mf9wlx8] {
        margin: 0 0 .5rem;
        color: #334155;
        font-size: .85rem;
        font-weight: 700;
    }

.pcm-fila[b-8r1mf9wlx8] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.pcm-campo[b-8r1mf9wlx8] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pcm-campo-ancho[b-8r1mf9wlx8] {
    flex: 1 1 220px;
}

.pcm-campo label[b-8r1mf9wlx8] {
    color: #555766;
    font-size: .76rem;
    font-weight: 600;
}

.pcm-input[b-8r1mf9wlx8] {
    min-block-size: 2.4rem;
    padding: .4rem .6rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    font-family: inherit;
    font-size: .92rem;
}

    .pcm-input:focus[b-8r1mf9wlx8] {
        outline: none;
        border-color: #00288e;
        box-shadow: 0 0 0 3px rgba(0, 40, 142, .18);
    }

.pcm-input-num[b-8r1mf9wlx8] {
    inline-size: 7rem;
    text-align: end;
}

.pcm-nota[b-8r1mf9wlx8] {
    flex: 1 1 200px;
    margin: 0;
    color: #64748b;
    font-size: .8rem;
}

.pcm-btn[b-8r1mf9wlx8] {
    min-block-size: 2.4rem;
    padding: 0 1rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .pcm-btn:disabled[b-8r1mf9wlx8] {
        opacity: .5;
        cursor: not-allowed;
    }

.pcm-btn-primario[b-8r1mf9wlx8] {
    border-color: #00288e;
    background: #00288e;
    color: #ffffff;
}

.pcm-tabla[b-8r1mf9wlx8] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

    .pcm-tabla th[b-8r1mf9wlx8],
    .pcm-tabla td[b-8r1mf9wlx8] {
        padding: .45rem .4rem;
        border-block-end: 1px solid #e2e8f0;
        text-align: start;
    }

    .pcm-tabla th[b-8r1mf9wlx8] {
        color: #475569;
        font-size: .72rem;
        text-transform: uppercase;
    }

.pcm-num[b-8r1mf9wlx8] {
    text-align: end !important;
    white-space: nowrap;
}

.pcm-pos[b-8r1mf9wlx8] {
    color: #15803d;
    font-weight: 600;
}

.pcm-neg[b-8r1mf9wlx8] {
    color: #b91c1c;
    font-weight: 600;
}

.pcm-acciones[b-8r1mf9wlx8] {
    display: flex;
    justify-content: flex-end;
    padding: .8rem 1.25rem;
    border-block-start: 1px solid #e2e8f0;
    background: #f8fafc;
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Pages/ClienteFicha.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE CLIENTE — pantalla unificada (ver + editar + alta)
   ───────────────────────────────────────────────────────────────────────────
   Esta ficha absorbió el antiguo formulario: usa su sistema visual `cform-*`
   (tarjetas, rejillas de 12 columnas, inputs, controles) para los tabs editables
   y conserva el cromo propio de la ficha (navegador entre clientes, KPIs y el
   modal de borrado). Por eso este fichero reúne DOS bloques:

     1. SISTEMA cform-*  — copiado del antiguo ClienteFormulario.razor.css. Al
        pasar el markup editable a ser inline en esta página, el CSS scoped y sus
        `::deep` alcanzan igual los inputs de componentes hijos (CampoConBuscador,
        InputFile).
     2. CROMO DE FICHA   — cabecera con el navegador, separación de los KPIs, y el
        modal de confirmación de borrado (clases cf-*).

   El estilo del CONTENIDO de los tabs de solo lectura (clases cf-info-*, cf-block,
   cf-address-*, cf-grid…) es GLOBAL y vive en wwwroot/css/ficha-terceros.css: el
   CSS scoped del padre no alcanza el DOM de los componentes hijos de Views/.
   Por eso la raíz conserva también la clase `cliente-ficha-page` (reset y
   reduced-motion globales), además de `cform-page`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El reset alcanza también el DOM de las vistas de Views/ (`::deep`): sin él, Blazor
   ataría el `*` al scope de ESTA página y los hijos se quedarían sin box-sizing. */
.cform-page[b-a6tfquhdio],
.cform-page[b-a6tfquhdio]  *,
.cform-page[b-a6tfquhdio]  *::before,
.cform-page[b-a6tfquhdio]  *::after {
    box-sizing: border-box;
}

.cform-page[b-a6tfquhdio] {
    /* Fondo de .main-body: lo replican la barra pegada y su sangrado superior. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* min-height:100% = suelo de comodidad: la página llena como mínimo el alto que le cede .main-body
       (y crece por encima si su contenido no cabe; el scroll lo lleva la ventana). Es lo que permite
       que la fila de contenido reparta el alto sobrante hacia el tab activo. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--cf-text);
    animation: clienteFichaPageIn-b-a6tfquhdio 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA PEGADA  ─────────────────────────────
   Navegador/título, acciones, KPIs y pestañas viajan juntos en un único elemento
   sticky: así no hay que saber cuánto mide la cabecera para posicionar el resto. */

.cform-chrome[b-a6tfquhdio] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cf-bg);
}

    /* .main-body tiene padding: sin este sangrado, el contenido asomaría por
       encima de la barra pegada al desplazar. */
    .cform-chrome[b-a6tfquhdio]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 20px;
        background: var(--cf-bg);
    }

.cform-topbar[b-a6tfquhdio] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    min-width: 0;
}

/* El bloque de título cede espacio para que el CommandBar conserve su ancho natural. */
.cform-topbar-text[b-a6tfquhdio] {
    min-width: 0;
}

.cform-title[b-a6tfquhdio] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cform-subtitle[b-a6tfquhdio] {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

/* El propio CommandBar repliega comandos al menú «···» cuando falta ancho. */
.cform-page[b-a6tfquhdio]  .cform-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* ===== CABECERA CON NAVEGADOR (modo ficha/edición) =====
   Fila del navegador entre clientes (izquierda) + CommandBar (derecha). Reemplaza
   al `cform-topbar` cuando hay un cliente cargado. */
.cliente-ficha-header[b-a6tfquhdio] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
}

/* Fase 2: el CommandBar ya está totalmente replegado a «···» y aún no cabe -> el navegador cede. */
.cliente-ficha-header.command-bar-host-collapsed[b-a6tfquhdio]  .cf-nav {
    flex: 1 1 auto;
}

/* Último recurso: si ni con el CommandBar replegado a «···» cabe todo, la info del cliente cede. */
.cliente-ficha-header.command-bar-host-collapsed[b-a6tfquhdio]  .cf-identity-wrap {
    min-width: 0;
}

.cliente-ficha-header[b-a6tfquhdio]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ===== KPIs (modo ficha/edición) =====
   Tablero de indicadores dentro del cromo pegado, separado de las pestañas. */
.cff-kpis[b-a6tfquhdio] {
    margin-bottom: 12px;
}

/* Pestañas: el rail inferior lo dibuja <ScrollableTabs>; aquí solo los botones. */
.cform-tabs[b-a6tfquhdio] {
    min-width: 0;
}

.cform-tab[b-a6tfquhdio] {
    flex: 0 0 auto;
    height: 38px;
    margin-bottom: -1px;    /* el subrayado activo solapa el rail de 1px */
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .cform-tab:hover[b-a6tfquhdio] {
        color: var(--cf-text-2);
    }

    .cform-tab.active[b-a6tfquhdio] {
        color: var(--cf-brand-strong);
        border-bottom-color: var(--cf-brand);
    }

    .cform-tab:focus-visible[b-a6tfquhdio] {
        outline: 2px solid var(--cf-brand-line);
        outline-offset: -2px;
    }

.cform-tabpanel[b-a6tfquhdio] {
    /* Rellena el alto sobrante bajo la cabecera pegada y se lo cede a su contenido: un tab de tabla
       (tp-panel) lo ocupa entero; un tab de tarjetas (cform-grid) se queda con su alto natural arriba.
       flex-basis:auto + min-height:0 → puede crecer por encima si el contenido no cabe. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--cf-gap);
    padding-bottom: 4px;
}

/* La pestaña de Cobros incrusta la pantalla de cobros entera (RemesaListaView), que se dimensiona con
   `height: 100%` contra su contenedor. Aquí ese contenedor es un item flex cuyo alto lo decide el
   reparto, así que se le da el sobrante como a cualquier otro item en vez de dejar que persiga un
   100 % de una altura que aún no está resuelta. `min-height: 0` para que la restricción baje hasta la
   tabla, que es la pieza que cede desplazándose por dentro. */
.cform-page[b-a6tfquhdio]  .cobros-page {
    flex: 1 1 auto;
    min-height: 0;
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.cform-alert[b-a6tfquhdio] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cf-gap);
    padding: 10px 14px;
    border: 1px solid var(--cf-danger-line);
    border-left: 3px solid #dc2626;
    border-radius: var(--cf-r-md);
    background: var(--cf-danger-soft);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .cform-alert .material-symbols-outlined[b-a6tfquhdio] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ─────────────────────  REJILLA DE PÁGINA (TARJETAS)  ───────────────────── */

.cform-page[b-a6tfquhdio]  .cform-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cf-gap);
    align-items: start;
    min-width: 0;
}

.cform-page[b-a6tfquhdio]  .cform-col-4 {
    grid-column: span 4;
}

.cform-page[b-a6tfquhdio]  .cform-col-6 {
    grid-column: span 6;
}

.cform-page[b-a6tfquhdio]  .cform-col-8 {
    grid-column: span 8;
}

.cform-page[b-a6tfquhdio]  .cform-col-12 {
    grid-column: 1 / -1;
}

/* Una sola columna de tarjetas cuando el ancho ya no da para dos. */
@media (max-width: 1100px) {
    .cform-page[b-a6tfquhdio]  .cform-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cform-page[b-a6tfquhdio]  .cform-col-4,
    .cform-page[b-a6tfquhdio]  .cform-col-6,
    .cform-page[b-a6tfquhdio]  .cform-col-8,
    .cform-page[b-a6tfquhdio]  .cform-col-12 {
        grid-column: 1 / -1;
    }
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

/* El selector de divisa despliega su lista DENTRO de la tarjeta, y la tarjeta recorta: la lista se
   cortaba por el borde inferior y lo poco que asomaba quedaba por debajo de la tarjeta siguiente, así
   que el campo era inelegible. Mientras hay una lista ABIERTA —y solo entonces— la tarjeta deja de
   recortar y se pone por delante de sus hermanas.

   El recorte existe para que la cabecera de la tarjeta, que es un rectángulo con fondo, no asome por
   las esquinas redondeadas: en ese rato se las damos a ella, que es lo que hace que quitarlo no se
   note. Y el z-index es 1 a propósito: basta para pasar por encima de las tarjetas (que no están
   posicionadas) y se queda por debajo del cromo pegado, que vale 20 y tiene que seguir tapando. */
.cform-page[b-a6tfquhdio]  .cform-card:has(.sdv-lista) {
    position: relative;
    z-index: 1;
    overflow: visible;
}

    .cform-page[b-a6tfquhdio]  .cform-card:has(.sdv-lista) .cform-card-head {
        border-radius: var(--cf-r-lg) var(--cf-r-lg) 0 0;
    }

.cform-page[b-a6tfquhdio]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-a6tfquhdio]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho
   de ESTA tarjeta, no del viewport. */
.cform-page[b-a6tfquhdio]  .cform-card-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* Nota explicativa: texto con filete, no una tarjeta dentro de la tarjeta. */
.cform-page[b-a6tfquhdio]  .cform-note {
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--cf-brand-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-a6tfquhdio]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-a6tfquhdio]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-a6tfquhdio]  .cform-field-2 {
    grid-column: span 2;
}

.cform-page[b-a6tfquhdio]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-a6tfquhdio]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-a6tfquhdio]  .cform-field-5 {
    grid-column: span 5;
}

.cform-page[b-a6tfquhdio]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-a6tfquhdio]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-a6tfquhdio]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-a6tfquhdio]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-a6tfquhdio]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-a6tfquhdio]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-a6tfquhdio]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ─────────────────────────────
   `::deep` además del selector directo: el input puede venir de un componente hijo
   (CampoConBuscador hereda la clase del host vía ClaseInput) y el CSS scoped de esta
   página no lo marcaría. Anclado en .cform-page para no sangrar a otros componentes. */

.cform-page[b-a6tfquhdio]  .cform-input,
.cform-page[b-a6tfquhdio]  .cform-select,
.cform-page[b-a6tfquhdio]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-a6tfquhdio]  .cform-input,
.cform-page[b-a6tfquhdio]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-a6tfquhdio]  .cform-select {
    cursor: pointer;
}

.cform-page[b-a6tfquhdio]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-a6tfquhdio]  .cform-input::placeholder,
.cform-page[b-a6tfquhdio]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-a6tfquhdio]  .cform-input:hover,
.cform-page[b-a6tfquhdio]  .cform-select:hover,
.cform-page[b-a6tfquhdio]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-a6tfquhdio]  .cform-input:focus,
.cform-page[b-a6tfquhdio]  .cform-select:focus,
.cform-page[b-a6tfquhdio]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

.cform-page[b-a6tfquhdio]  .cform-input-readonly,
.cform-page[b-a6tfquhdio]  .cform-input-readonly:hover {
    background: var(--cf-surface-2);
    border-color: var(--cf-line);
    color: var(--cf-muted);
    cursor: default;
}

/* T9 — «Puntos disponibles» con el botón de la ventana de puntos al lado. */
.cform-page[b-a6tfquhdio]  .cform-puntos {
    display: flex;
    gap: .35rem;
}

.cform-page[b-a6tfquhdio]  .cform-puntos .cform-input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.cform-page[b-a6tfquhdio]  .cform-puntos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 2.4rem;
    border: 1px solid var(--cf-line);
    border-radius: .5rem;
    background: var(--cf-surface, #fff);
    color: #00288e;
    cursor: pointer;
}

.cform-page[b-a6tfquhdio]  .cform-puntos-btn:hover {
    background: #eef2ff;
}

/* El input con buscador (Agente) necesita hueco a la derecha para la lupa. */
.cform-page[b-a6tfquhdio]  .ccb-input-con-boton {
    padding-inline-end: 1.9rem;
}

/* Observaciones ocupa el alto de la tarjeta vecina (Clasificación comercial). */
.cform-page[b-a6tfquhdio]  .cform-field-full > .cform-textarea {
    min-height: 125px;
}

/* ─────────────────────────────  CASILLAS  ───────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-a6tfquhdio]  .cform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-check:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    /* La casilla marcada se lee de un vistazo, sin mirar el cuadrito. */
    .cform-page[b-a6tfquhdio]  .cform-check:has(input:checked) {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-a6tfquhdio]  .cform-check:focus-within {
        box-shadow: var(--cf-ring);
    }

    .cform-page[b-a6tfquhdio]  .cform-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cf-brand);
    }

    /* Indicador, no mando: refleja un dato que se cambia en otro sitio (p. ej. «Facturación», que es el
       Estado del cliente). Se ve apagado para que nadie lo intente marcar (FUN-168). */
    .cform-page[b-a6tfquhdio]  .cform-check-readonly {
        cursor: default;
        opacity: 0.72;
        border-style: dashed;
    }

        .cform-page[b-a6tfquhdio]  .cform-check-readonly:hover {
            border-color: var(--cf-line);
            background: var(--cf-surface);
        }

/* ─────────────────────────────  BOTONES  ───────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-btn:hover {
        background: var(--cf-surface-2);
    }

    .cform-page[b-a6tfquhdio]  .cform-btn .material-symbols-outlined {
        font-size: 18px;
    }

.cform-page[b-a6tfquhdio]  .cform-btn-primary {
    border-color: transparent;
    background: var(--cf-brand);
    color: #ffffff;
}

    .cform-page[b-a6tfquhdio]  .cform-btn-primary:hover {
        background: var(--cf-brand-strong);
    }

.cform-page[b-a6tfquhdio]  .cform-btn-danger {
    border-color: var(--cf-danger-line);
    color: var(--cf-danger);
}

    .cform-page[b-a6tfquhdio]  .cform-btn-danger:hover {
        background: var(--cf-danger-soft);
    }

.cform-page[b-a6tfquhdio]  .cform-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-icon-btn:hover {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-a6tfquhdio]  .cform-icon-btn .material-symbols-outlined {
        font-size: 18px;
    }

/* ────────────────────────  CONTROL SEGMENTADO  ──────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-seg {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cf-line);
    border-radius: 12px;
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

    .cform-page[b-a6tfquhdio]  .cform-seg::-webkit-scrollbar {
        display: none;
    }

.cform-page[b-a6tfquhdio]  .cform-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cf-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-seg-btn:hover {
        color: var(--cf-text-2);
    }

    .cform-page[b-a6tfquhdio]  .cform-seg-btn.active {
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

.cform-page[b-a6tfquhdio]  .cform-seg-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--cf-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.cform-page[b-a6tfquhdio]  .cform-seg-btn.active .cform-seg-count {
    background: var(--cf-brand);
    color: #ffffff;
}

/* ────────────────────────────  DIRECCIONES  ──────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-dir {
    display: flex;
    flex-direction: column;
    gap: var(--cf-gap);
}

.cform-page[b-a6tfquhdio]  .cform-dir-split {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--cf-gap);
    align-items: start;
}

@media (max-width: 1100px) {
    .cform-page[b-a6tfquhdio]  .cform-dir-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La lista se acota para que el panel de edición no quede a media pantalla de
   distancia. Es el único scroll interno de la ficha, y es deliberado. */
.cform-page[b-a6tfquhdio]  .cform-dir-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    max-height: min(56vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cform-page[b-a6tfquhdio]  .cform-dir-list::-webkit-scrollbar {
        width: 6px;
    }

    .cform-page[b-a6tfquhdio]  .cform-dir-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.cform-page[b-a6tfquhdio]  .cform-dir-empty {
    margin: 0;
    padding: 14px 12px;
    border: 1px dashed var(--cf-line-strong);
    border-radius: var(--cf-r-md);
    background: var(--cf-surface-2);
    color: var(--cf-muted);
    font-size: 12.5px;
    text-align: center;
}

.cform-page[b-a6tfquhdio]  .cform-dir-item {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-md);
    background: var(--cf-surface);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-dir-item:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    .cform-page[b-a6tfquhdio]  .cform-dir-item.active {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        box-shadow: inset 3px 0 0 var(--cf-brand);
    }

.cform-page[b-a6tfquhdio]  .cform-dir-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 4px 9px 12px;
    border: 0;
    border-radius: var(--cf-r-md);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cform-page[b-a6tfquhdio]  .cform-dir-item-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-a6tfquhdio]  .cform-dir-item-meta {
    font-size: 11.5px;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El borrado aparece cuando se apunta la fila (o al tabular hasta él). */
.cform-page[b-a6tfquhdio]  .cform-dir-item-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    border: 0;
    border-radius: 0 var(--cf-r-md) var(--cf-r-md) 0;
    background: transparent;
    color: var(--cf-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-dir-item:hover .cform-dir-item-del,
    .cform-page[b-a6tfquhdio]  .cform-dir-item-del:focus-visible {
        opacity: 1;
    }

    .cform-page[b-a6tfquhdio]  .cform-dir-item-del:hover {
        background: var(--cf-danger-soft);
        color: var(--cf-danger);
    }

    .cform-page[b-a6tfquhdio]  .cform-dir-item-del .material-symbols-outlined {
        font-size: 18px;
    }

/* En táctil no hay hover: el borrado se muestra siempre. */
@media (hover: none) {
    .cform-page[b-a6tfquhdio]  .cform-dir-item-del {
        opacity: 1;
    }
}

/* Panel vacío cuando el cliente aún no tiene direcciones de envío. */
.cform-page[b-a6tfquhdio]  .cform-placeholder {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    padding: 32px;
    border-style: dashed;
    box-shadow: none;
    text-align: center;
}

    .cform-page[b-a6tfquhdio]  .cform-placeholder .material-symbols-outlined {
        font-size: 34px;
        color: var(--cf-faint);
    }

.cform-page[b-a6tfquhdio]  .cform-placeholder-title {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--cf-text);
}

.cform-page[b-a6tfquhdio]  .cform-placeholder-hint {
    margin: 0 0 14px;
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* ───────────────────────  RESUMEN DE COBRO  ─────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-summary-head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin-bottom: 6px;
}

.cform-page[b-a6tfquhdio]  .cform-summary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, var(--cf-brand-strong));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.cform-page[b-a6tfquhdio]  .cform-summary-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cform-page[b-a6tfquhdio]  .cform-summary-name {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-a6tfquhdio]  .cform-summary-meta {
    font-size: 11.5px;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-a6tfquhdio]  .cform-summary-rows {
    margin: 0;
}

    .cform-page[b-a6tfquhdio]  .cform-summary-rows > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid var(--cf-line);
    }

        .cform-page[b-a6tfquhdio]  .cform-summary-rows > div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .cform-page[b-a6tfquhdio]  .cform-summary-rows dt {
        font-size: 12px;
        color: var(--cf-muted);
    }

    .cform-page[b-a6tfquhdio]  .cform-summary-rows dd {
        margin: 0;
        min-width: 0;
        font-size: 12.5px;
        font-weight: 650;
        color: var(--cf-text);
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ──────────────────────────────  LOGO  ────────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cform-page[b-a6tfquhdio]  .cform-logo-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    border: 1.5px dashed var(--cf-line-strong);
    border-radius: var(--cf-r-lg);
    background: var(--cf-surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-logo-dropzone:hover {
        border-color: #60a5fa;
        background: var(--cf-brand-soft);
    }

    .cform-page[b-a6tfquhdio]  .cform-logo-dropzone.has-logo {
        border-style: solid;
        border-color: var(--cf-line);
        background: var(--cf-surface);
    }

    /* Input real de InputFile (componente hijo → ::deep): invisible pero cubre toda
       la zona, así un clic en cualquier punto del recuadro abre el diálogo. */
    .cform-page[b-a6tfquhdio]  .cform-logo-dropzone input[type="file"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .cform-page[b-a6tfquhdio]  .cform-logo-dropzone img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cform-page[b-a6tfquhdio]  .cform-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 12px;
    text-align: center;
    color: var(--cf-faint);
    pointer-events: none;
}

    .cform-page[b-a6tfquhdio]  .cform-logo-empty .material-symbols-outlined {
        font-size: 30px;
    }

.cform-page[b-a6tfquhdio]  .cform-logo-empty-title {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--cf-muted);
}

.cform-page[b-a6tfquhdio]  .cform-logo-empty-hint {
    font-size: 11px;
}

.cform-page[b-a6tfquhdio]  .cform-logo-dropzone:hover .cform-logo-empty,
.cform-page[b-a6tfquhdio]  .cform-logo-dropzone:hover .cform-logo-empty-title {
    color: var(--cf-brand);
}

.cform-page[b-a6tfquhdio]  .cform-logo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-logo-overlay .material-symbols-outlined {
        font-size: 22px;
    }

.cform-page[b-a6tfquhdio]  .cform-logo-dropzone.has-logo:hover .cform-logo-overlay {
    opacity: 1;
}

/* ─────────────────────────────  ETIQUETAS  ───────────────────────────── */

.cform-page[b-a6tfquhdio]  .cform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-a6tfquhdio]  .cform-tag {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-a6tfquhdio]  .cform-tag:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    .cform-page[b-a6tfquhdio]  .cform-tag.active {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

/* ══════════════════════════════════════════════════════════════════════════
   CROMO DE FICHA — modal de confirmación de borrado (contenido del <Modal>)
   ══════════════════════════════════════════════════════════════════════════ */

.cf-primary-btn[b-a6tfquhdio],
.cf-action-btn[b-a6tfquhdio] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.cf-primary-btn[b-a6tfquhdio] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cf-primary-btn:hover[b-a6tfquhdio] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cf-action-btn[b-a6tfquhdio] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cf-action-btn:hover[b-a6tfquhdio] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cf-danger-btn[b-a6tfquhdio] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .cf-danger-btn:hover:not(:disabled)[b-a6tfquhdio] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .cf-danger-btn:disabled[b-a6tfquhdio] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.cf-confirm-modal[b-a6tfquhdio] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cf-confirm-icon[b-a6tfquhdio] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.cf-confirm-body[b-a6tfquhdio] {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-confirm-subtitle[b-a6tfquhdio] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .cf-confirm-subtitle strong[b-a6tfquhdio] {
        font-weight: 850;
        color: #1f2937;
    }

.cf-confirm-error[b-a6tfquhdio] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 750;
}

.cf-confirm-actions[b-a6tfquhdio] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ───────────────────────────────  ANIMACIÓN  ─────────────────────────────
   Solo opacidad: NO usar filter/transform aquí. Un ancestro con filter (aunque sea
   blur(0)) crea un «containing block» para los descendientes position:fixed, lo que
   atraparía los modales de las pestañas (p. ej. el de Tarifas) dentro del área de la
   ficha en vez de cubrir el viewport. */
@keyframes clienteFichaPageIn-b-a6tfquhdio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-a6tfquhdio] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-a6tfquhdio] {
        font-size: 18px;
    }

    .cform-subtitle[b-a6tfquhdio] {
        display: none;   /* en móvil el subtítulo solo roba altura a la barra pegada */
    }

    .cform-page[b-a6tfquhdio]  .cform-logo-dropzone {
        max-width: 148px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-a6tfquhdio]  *,
    .cform-page[b-a6tfquhdio]  *::before,
    .cform-page[b-a6tfquhdio]  *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* RQ4: aviso bajo la cuenta cuando no es la de su código (solo avisa). */
.cform-page[b-a6tfquhdio]  .cform-aviso {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    color: #9a5b00;
}

/* RQ6: lupa del campo Código (la pulsa también F2): busca otra ficha con lo tecleado. */
.cform-page[b-a6tfquhdio]  .cform-codigo-buscar {
    position: relative;
}

.cform-page[b-a6tfquhdio]  .cform-codigo-buscar .cform-input {
    padding-right: 36px;
}

.cform-page[b-a6tfquhdio]  .cform-codigo-lupa {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cf-muted);
    cursor: pointer;
}

.cform-page[b-a6tfquhdio]  .cform-codigo-lupa:hover {
    background: var(--cf-surface-2);
}

.cform-page[b-a6tfquhdio]  .cform-codigo-lupa .material-symbols-outlined {
    font-size: 18px;
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Pages/ClientesPage.razor.rz.scp.css */
.clientes-page[b-vsn4d5cbvv],
.clientes-page *[b-vsn4d5cbvv],
.clientes-page *[b-vsn4d5cbvv]::before,
.clientes-page *[b-vsn4d5cbvv]::after {
    box-sizing: border-box;
}

.clientes-page[b-vsn4d5cbvv] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       La última fila es `1fr` (mínimo automático = su contenido): reparte el espacio sobrante cuando
       sobra, y empuja el alto de la página cuando falta. */
    /* Filas: cabecera, aviso de error y listado. Mientras los KPIs sigan comentados en el markup no
       tienen fila propia: al restaurarlos hay que devolverle su `auto` a esta lista. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    animation: clientesPageIn-b-vsn4d5cbvv 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.clientes-header[b-vsn4d5cbvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .clientes-header > div:first-child[b-vsn4d5cbvv] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .clientes-header.command-bar-host-collapsed > div:first-child[b-vsn4d5cbvv] {
        flex: 1 1 auto;
    }

.clientes-title[b-vsn4d5cbvv] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.clientes-subtitle[b-vsn4d5cbvv] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.clientes-header.command-bar-host-collapsed .clientes-title[b-vsn4d5cbvv],
.clientes-header.command-bar-host-collapsed .clientes-subtitle[b-vsn4d5cbvv] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha, igual que en
   Tienda web. Usa las variantes `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al
   lado del texto, sin caja hasta el hover). Al no colgar de `.cform-page`, los tokens --cf-*
   de esas reglas resuelven por sus fallbacks, que son los mismos valores. */
.clientes-header-actions[b-vsn4d5cbvv] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.clientes-list-panel[b-vsn4d5cbvv] {
    /* Se ancla siempre a la última fila (la de 1fr) del grid de .clientes-page, independientemente de
       si el banner de error está presente o no. Así ocupa todo el alto disponible que sobra tras la
       cabecera y los KPIs, y crece con la tabla cuando no cabe. */
    grid-row: -2 / -1;
    display: grid;
    /* Filtros y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    grid-template-rows: auto 1fr;
    gap: 9px;
}

.clientes-filters[b-vsn4d5cbvv] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 130px 180px 180px;
    gap: 10px;
    align-items: center;
}

.cl-filter-item[b-vsn4d5cbvv],
.cl-filter-item-search[b-vsn4d5cbvv] {
    min-width: 0;
}

.cl-filter-searchbox[b-vsn4d5cbvv] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.cl-filter-search-icon[b-vsn4d5cbvv] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cl-filter-input[b-vsn4d5cbvv],
.cl-filter-select[b-vsn4d5cbvv] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-filter-input[b-vsn4d5cbvv] {
    padding: 0 13px;
}

.cl-filter-input-search[b-vsn4d5cbvv] {
    padding-left: 38px;
}

.cl-filter-select[b-vsn4d5cbvv] {
    padding: 0 12px;
    cursor: pointer;
}

.cl-filter-input[b-vsn4d5cbvv]::placeholder {
    color: #9ca3af;
}

.cl-filter-input:focus[b-vsn4d5cbvv],
.cl-filter-select:focus[b-vsn4d5cbvv] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.cl-filter-actions[b-vsn4d5cbvv] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (insignia de estado y botones de acción).

   Todas esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que
   el CSS scoped de esta página no lo alcanza por sí solo. */

.cl-tabla[b-vsn4d5cbvv] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto, pensado
   para el panel de pestañas de la ficha, que sí comprime) el contenido no podría empujar la fila
   `1fr` del grid y la tabla se desplazaría por dentro en vez de crecer la página. */
.clientes-page[b-vsn4d5cbvv]  .tp-panel {
    min-height: auto;
}

/* COLUMNAS REPLEGABLES: los anchos los declara cada columna (Ancho, inline en el <th>); aquí solo
   se decide qué columna desaparece y a qué ancho de ventana (ver bloque RESPONSIVE). */

/* ACCIONES POR FILA (plantilla de la columna «Acciones») */

/* Botones-icono compactos (editar / borrar), mismo lenguaje que la tabla de almacenes. */
.clientes-page[b-vsn4d5cbvv]  .cl-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clientes-page[b-vsn4d5cbvv]  .cl-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que el usuario pueda seleccionar/resaltar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
}

    .clientes-page[b-vsn4d5cbvv]  .cl-action-btn .material-symbols-outlined {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.clientes-page[b-vsn4d5cbvv]  .cl-action-btn-edit {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .clientes-page[b-vsn4d5cbvv]  .cl-action-btn-edit:hover {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.clientes-page[b-vsn4d5cbvv]  .cl-action-btn-delete {
    color: #444653;
}

    .clientes-page[b-vsn4d5cbvv]  .cl-action-btn-delete:hover {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* INSIGNIA DE ESTADO (plantilla de la columna «Estado») */

.clientes-page[b-vsn4d5cbvv]  .cl-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.clientes-page[b-vsn4d5cbvv]  .cl-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.clientes-page[b-vsn4d5cbvv]  .cl-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.clientes-page[b-vsn4d5cbvv]  .cl-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes clientesPageIn-b-vsn4d5cbvv {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Código»,
   «Cliente» y «Acciones» permanecen siempre visibles. La clase la lleva la cabecera Y sus celdas
   (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1440px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-pendiente {
        display: none;
    }
}

@media (max-width: 1280px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-facturacion {
        display: none;
    }
}

@media (max-width: 1120px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-poblacion {
        display: none;
    }
}

@media (max-width: 980px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-provincia {
        display: none;
    }
}

@media (max-width: 760px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-nif {
        display: none;
    }
}

@media (max-width: 660px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-telefono {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho para nada más que identificar la fila y actuar sobre ella. */
@media (max-width: 640px) {
    .clientes-page[b-vsn4d5cbvv]  .cl-col-estado {
        display: none;
    }
}

@media (max-width: 1280px) {
    .clientes-filters[b-vsn4d5cbvv] {
        grid-template-columns: minmax(220px, 1fr) 110px 160px 160px;
    }
}

@media (max-width: 980px) {
    /* El modelo de alto («suelo = la pantalla, y crece si hace falta») ya es el mismo en todos los
       anchos, así que aquí no hay nada que corregir: solo el reparto de los filtros. */
    .clientes-filters[b-vsn4d5cbvv] {
        grid-template-columns: 1fr 1fr;
    }

    .cl-filter-item-search[b-vsn4d5cbvv] {
        grid-column: 1 / -1;
    }

    .cl-filter-actions[b-vsn4d5cbvv] {
        justify-content: stretch;
    }

        .cl-filter-actions .cl-primary-btn[b-vsn4d5cbvv] {
            width: 100%;
        }
}

@media (max-width: 768px) {
    .clientes-filters[b-vsn4d5cbvv] {
        grid-template-columns: 1fr;
    }

    .cl-filter-actions[b-vsn4d5cbvv] {
        width: 100%;
    }

        .cl-filter-actions .cl-primary-btn[b-vsn4d5cbvv] {
            width: 100%;
        }
}

@media (max-width: 640px) {
    .clientes-title[b-vsn4d5cbvv] {
        font-size: 20px;
    }

    .clientes-subtitle[b-vsn4d5cbvv] {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clientes-page[b-vsn4d5cbvv],
    .clientes-page *[b-vsn4d5cbvv],
    .clientes-page *[b-vsn4d5cbvv]::before,
    .clientes-page *[b-vsn4d5cbvv]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Pages/ClientesTopFacturacion.razor.rz.scp.css */
/* Misma pauta que la página de Clientes: cabecera, indicadores, filtros y la tabla, que se queda con el
   alto que sobra (última fila `1fr`) y lo reclama si no cabe. */
.top-clientes-page[b-uu1kdwv9k0] {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    min-width: 0;
}

.top-clientes-header[b-uu1kdwv9k0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.top-clientes-title[b-uu1kdwv9k0] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.top-clientes-subtitle[b-uu1kdwv9k0] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

/* PANEL LISTADO: sin tarjeta envolvente; el único marco es el de la tabla (.tp-shell, de TablaPaginada). */
.top-clientes-list-panel[b-uu1kdwv9k0] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 9px;
    min-width: 0;
}

/* Filtros en UNA fila de ancho natural, alineados a la izquierda: el buscador tiene techo (no se estira
   a toda la pantalla) y nada se sale por la derecha; si no cabe, envuelve. */
.top-clientes-filters[b-uu1kdwv9k0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.top-filter-item[b-uu1kdwv9k0] {
    flex: 0 0 190px;
    min-width: 0;
}

.top-filter-item-search[b-uu1kdwv9k0] {
    flex: 0 1 340px;
}

.top-filter-searchbox[b-uu1kdwv9k0] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.top-filter-search-icon[b-uu1kdwv9k0] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.top-filter-input[b-uu1kdwv9k0],
.top-filter-select[b-uu1kdwv9k0] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.top-filter-input[b-uu1kdwv9k0] {
    padding: 0 13px;
}

.top-filter-input-search[b-uu1kdwv9k0] {
    padding-left: 38px;
}

.top-filter-select[b-uu1kdwv9k0] {
    padding: 0 12px;
    cursor: pointer;
}

.top-filter-input[b-uu1kdwv9k0]::placeholder {
    color: #9ca3af;
}

.top-filter-input:focus[b-uu1kdwv9k0],
.top-filter-select:focus[b-uu1kdwv9k0] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* «Limpiar»: solo aparece con algún filtro puesto, pegado a los filtros que quita. */
.top-filter-limpiar[b-uu1kdwv9k0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .top-filter-limpiar .material-symbols-outlined[b-uu1kdwv9k0] {
        font-size: 18px;
    }

    .top-filter-limpiar:hover[b-uu1kdwv9k0] {
        background: #f3f4f6;
        border-color: #cbd5e1;
    }

/* TABLA: el marco, la cabecera, las filas y el paginador los pinta <TablaPaginada>. */
.top-clientes-tabla[b-uu1kdwv9k0] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto: con `min-height: 0` no podría empujar la fila `1fr`. */
.top-clientes-page[b-uu1kdwv9k0]  .tp-panel {
    min-height: auto;
}

@media (max-width: 640px) {
    .top-clientes-title[b-uu1kdwv9k0] {
        font-size: 20px;
    }

    .top-clientes-subtitle[b-uu1kdwv9k0] {
        font-size: 12px;
    }

    .top-filter-item[b-uu1kdwv9k0],
    .top-filter-item-search[b-uu1kdwv9k0] {
        flex: 1 1 100%;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Views/ClienteDocumentosView.razor.rz.scp.css */
/* ============================================================================
   DOCUMENTOS DEL CLIENTE — estilos de la pestaña (scoped)
   ----------------------------------------------------------------------------
   El cromo del listado (cabecera, filas, pager) lo aporta el componente global
   TablaPaginada (.tp-panel). Aquí solo viven el panel y la cabecera con el
   buscador, alineados con el estilo de la pestaña de tarifas (.ct-*).
   ============================================================================ */

.cdoc-panel[b-pkla1qs63c] {
    /* Igual que .ct-panel / .tp-panel: llena el alto del tab con flex-grow (no height:100%, que como hijo
       flex estirado no siempre resuelve) y deja la tabla ocupar el espacio restante. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.cdoc-header[b-pkla1qs63c] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cdoc-searchbox[b-pkla1qs63c] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
}

.cdoc-search-icon[b-pkla1qs63c] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cdoc-search-input[b-pkla1qs63c] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px 0 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cdoc-search-input[b-pkla1qs63c]::placeholder {
        color: #9ca3af;
    }

    .cdoc-search-input:focus[b-pkla1qs63c] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* ===== RESPONSIVE — columnas replegables =====
   Al estrechar la ventana caen primero las menos importantes: Tipo → Estado → Fecha. «Documento» e
   «Importe» permanecen siempre (identifican la fila y su valor clave). El markup de la tabla vive en el
   componente hijo TablaPaginada, así que las reglas necesitan `::deep` desde el panel; la clase la lleva
   la cabecera Y sus celdas, por lo que basta con ocultarla una vez. */

@media (max-width: 1000px) {
    .cdoc-panel[b-pkla1qs63c]  .cdoc-col-tipo {
        display: none;
    }
}

@media (max-width: 820px) {
    .cdoc-panel[b-pkla1qs63c]  .cdoc-col-estado {
        display: none;
    }
}

@media (max-width: 680px) {
    .cdoc-panel[b-pkla1qs63c]  .cdoc-col-fecha {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Views/ClienteExtractoView.razor.rz.scp.css */
/*
    Extracto de la ficha de cliente: solo el panel, los dos estados de carga y el pie de saldos. La
    tabla la estila TablaPaginada, que es el componente compartido — aquí no se le toca nada.
*/

.cext-panel[b-x2m5q79ssn] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cext-estado[b-x2m5q79ssn] {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: .875rem;
}

.cext-error[b-x2m5q79ssn] {
    color: #b91c1c;
}

/* Aviso sobre una tabla que SÍ se pinta: la cuenta de la ficha no sirve para leer el mayor. No es un
   error —la pestaña funciona— pero sin destacarlo, la tabla vacía de debajo se leería como «este
   cliente no debe nada», que es lo contrario de lo que pasa. */
.cext-aviso[b-x2m5q79ssn] {
    padding: .75rem 1rem;
    text-align: left;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}

/* Saldo anterior y final: el arrastre que da sentido a la columna Saldo. Van al pie y no a la
   cabecera porque el orden por defecto es descendente y el saldo final es el de la primera fila. */
.cext-pie[b-x2m5q79ssn] {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: .5rem .75rem;
    border-top: 1px solid #e2e8f0;
    font-size: .8125rem;
    color: #475569;
}

    .cext-pie strong[b-x2m5q79ssn] {
        color: #1f2937;
        font-variant-numeric: tabular-nums;
    }
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Views/ClienteServicioTecnicoView.razor.rz.scp.css */
/* ============================================================================
   SERVICIO TÉCNICO DEL CLIENTE — estilos de la pestaña (scoped, ST4)
   ----------------------------------------------------------------------------
   Resumen en cuatro cifras, botonera y una tabla corta con los últimos partes.
   Mismo tono que las pestañas de documentos (.cdoc-*) y tarifas (.ct-*).
   ============================================================================ */

.cst-panel[b-lfbvs7dap9] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.cst-header[b-lfbvs7dap9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.cst-kpis[b-lfbvs7dap9] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cst-kpi[b-lfbvs7dap9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 6.5rem;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #f8fafc;
}

.cst-kpi-valor[b-lfbvs7dap9] {
    font-size: 1.15rem;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.cst-kpi-label[b-lfbvs7dap9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.cst-vacio[b-lfbvs7dap9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 12px;
    color: #6b7280;
    font-size: 13px;
    border: 1px dashed #e5e7eb;
    border-radius: 11px;
}

.cst-tabla-wrap[b-lfbvs7dap9] {
    min-height: 0;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #ffffff;
}

.cst-tabla[b-lfbvs7dap9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #1f2937;
}

    .cst-tabla th[b-lfbvs7dap9] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        text-align: left;
        font-size: 11px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #64748b;
        padding: 9px 12px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .cst-tabla td[b-lfbvs7dap9] {
        padding: 9px 12px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

.cst-fila[b-lfbvs7dap9] {
    cursor: pointer;
    transition: background 0.12s ease;
}

    .cst-fila:hover[b-lfbvs7dap9] {
        background: #eff6ff;
    }

.cst-numero[b-lfbvs7dap9] {
    font-weight: 800;
}

.cst-averia[b-lfbvs7dap9] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
}

.cst-col-importe[b-lfbvs7dap9],
.cst-importe[b-lfbvs7dap9] {
    text-align: right;
    white-space: nowrap;
}

.cst-chip[b-lfbvs7dap9] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 1.5rem;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.cst-icono-chip[b-lfbvs7dap9] {
    font-size: 0.9rem;
}

.cst-chip-naranja[b-lfbvs7dap9] { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.cst-chip-azul[b-lfbvs7dap9] { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.cst-chip-verde[b-lfbvs7dap9] { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.cst-chip-rojo[b-lfbvs7dap9] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* Al estrechar caen primero las columnas que menos dicen: entrega → técnico → fecha. */
@media (max-width: 1100px) {
    .cst-col-entrega[b-lfbvs7dap9] { display: none; }
}

@media (max-width: 900px) {
    .cst-col-tecnico[b-lfbvs7dap9] { display: none; }
}

@media (max-width: 720px) {
    .cst-col-fecha[b-lfbvs7dap9] { display: none; }
}
/* _content/ErpPowergest/Presentation/Fichas/Clientes/Views/ClienteTarifasView.razor.rz.scp.css */
/* ============================================================================
   TARIFAS DEL CLIENTE — estilos de la pestaña (scoped)
   ----------------------------------------------------------------------------
   El cromo del grid (cabecera, filas, pager) lo aporta la clase global .cf-grid
   (wwwroot/css/ficha-terceros.css), compartida con las demás tablas de la ficha.
   Aquí viven la cabecera (buscador + CommandBar de alta), el estado vacío y los
   botones de acción de cada fila. El modal de alta/edición es un componente aparte
   (ClienteTarifaModal) con su propio estilo (patrón de los modales de Artículos).
   ============================================================================ */

.ct-panel[b-fy8n29qle9] {
    /* Rellena todo el alto del contenedor del tab (flex) como mínimo, y puede crecer si su contenido no
       cabe. Se usa flex-grow (no height:100%) porque, como hijo flex estirado, el porcentaje de altura no
       siempre resuelve; el flex-grow sí llena de forma fiable —igual que la tabla de listados (.tp-panel)—. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    animation: ctPanelIn-b-fy8n29qle9 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ===== CABECERA (buscador + boton de alta) ===== */

.ct-header[b-fy8n29qle9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    border-bottom: 1px solid #eef2f7;
}

.ct-searchbox[b-fy8n29qle9] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
}

.ct-search-icon[b-fy8n29qle9] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ct-search-input[b-fy8n29qle9] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px 0 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ct-search-input[b-fy8n29qle9]::placeholder {
        color: #9ca3af;
    }

    .ct-search-input:focus[b-fy8n29qle9] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* Botón de alta (CommandBar): conserva su ancho natural a la derecha; el propio componente
   colapsa el texto (modo compacto) cuando no cabe. ::deep alcanza el DOM del componente hijo. */
.ct-header[b-fy8n29qle9]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}

    /* El botón «Añadir tarifa» (y el «···») igualan la altura y el redondeo de la barra de
       búsqueda (.ct-search-input, 38px) para que formen una pareja del mismo tamaño. */
    .ct-header[b-fy8n29qle9]  .command-bar__btn,
    .ct-header[b-fy8n29qle9]  .command-bar__more {
        height: 38px;
        border-radius: 11px;
    }

/* ===== TABLA ===== */

/* Marco de la tabla: la zona de la tabla ocupa el alto sobrante y el paginador queda anclado abajo. */
.ct-table-shell[b-fy8n29qle9] {
    min-height: 240px;
    height: 100%;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.ct-table-scroll[b-fy8n29qle9] {
    min-height: 0;
}

.ct-table[b-fy8n29qle9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

.ct-table thead th[b-fy8n29qle9] {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

/* Cabecera sin orden: mismo alto y ritmo tipográfico que las ordenables. */
.ct-table thead th.ct-th-plain[b-fy8n29qle9] {
    padding: 0 14px;
    height: 42px;
}

/* Columnas numéricas: rótulo alineado a la derecha, como sus importes. */
.ct-table thead th.ct-col-descuento[b-fy8n29qle9],
.ct-table thead th.ct-col-precio[b-fy8n29qle9],
.ct-table thead th.ct-col-cantidad[b-fy8n29qle9] {
    text-align: right;
}

.ct-table thead th.ct-th-center[b-fy8n29qle9] {
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.ct-sort[b-fy8n29qle9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .ct-sort:hover[b-fy8n29qle9] {
        background: #f1f5f9;
        color: #334155;
    }

    .ct-sort:focus-visible[b-fy8n29qle9] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.ct-sort-icon[b-fy8n29qle9] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto de la cabecera
   no se desplace) y solo aparece al pasar el puntero o al enfocar con teclado. */
.ct-sort-icon-inactivo[b-fy8n29qle9] {
    opacity: 0;
}

.ct-sort:hover .ct-sort-icon-inactivo[b-fy8n29qle9],
.ct-sort:focus-visible .ct-sort-icon-inactivo[b-fy8n29qle9] {
    opacity: 1;
}

.ct-table tbody td[b-fy8n29qle9] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    /* Permite el salto de línea (incluso partiendo palabras largas sin espacios) en celdas estrechas. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ct-table tbody tr[b-fy8n29qle9] {
    transition: background 0.14s ease;
}

    .ct-table tbody tr:hover td[b-fy8n29qle9] {
        background: #f8fbff;
    }

    /* La última fila no dibuja separador: el borde inferior lo pone el paginador. */
    .ct-table tbody tr:last-child td[b-fy8n29qle9] {
        border-bottom: none;
    }

/* Anchos de columna: «Descripción» absorbe el espacio sobrante; el resto es contenido. */
.ct-col-familia[b-fy8n29qle9] {
    width: 150px;
}

.ct-col-articulo[b-fy8n29qle9] {
    width: 140px;
}

.ct-col-regalo[b-fy8n29qle9] {
    width: 140px;
}

.ct-col-descuento[b-fy8n29qle9] {
    width: 120px;
    text-align: right;
}

.ct-col-precio[b-fy8n29qle9] {
    width: 120px;
    text-align: right;
}

.ct-col-cantidad[b-fy8n29qle9] {
    width: 140px;
    text-align: right;
}

.ct-col-desde[b-fy8n29qle9] {
    width: 130px;
    text-align: center;
}

.ct-col-hasta[b-fy8n29qle9] {
    width: 135px;
    text-align: center;
}

.ct-col-acciones[b-fy8n29qle9] {
    width: 110px;
    text-align: center;
}

/* ===== PAGINADOR ===== */

.ct-pager[b-fy8n29qle9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.ct-pager-info[b-fy8n29qle9] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.ct-pager-nav[b-fy8n29qle9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ct-pager-btn[b-fy8n29qle9],
.ct-pager-page[b-fy8n29qle9] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .ct-pager-btn:hover:not(:disabled)[b-fy8n29qle9],
    .ct-pager-page:hover[b-fy8n29qle9] {
        background: #eef2f7;
        color: #1f2937;
    }

    .ct-pager-btn:disabled[b-fy8n29qle9] {
        opacity: 0.4;
        cursor: default;
    }

    .ct-pager-btn .material-symbols-outlined[b-fy8n29qle9] {
        font-size: 18px;
        pointer-events: none;
    }

/* Página activa: relleno primary sólido, como el botón principal de la cabecera. */
.ct-pager-page-active[b-fy8n29qle9],
.ct-pager-page-active:hover[b-fy8n29qle9] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila (editar / borrar): botones-icono compactos, mismo lenguaje que la tabla de almacenes. */
.ct-row-actions[b-fy8n29qle9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ct-action-btn[b-fy8n29qle9] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    user-select: none;
    -webkit-user-select: none;
}

    .ct-action-btn .material-symbols-outlined[b-fy8n29qle9] {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

.ct-action-btn-edit[b-fy8n29qle9] {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.2);
}

    .ct-action-btn-edit:hover[b-fy8n29qle9] {
        background: rgba(37, 99, 235, 0.1);
    }

.ct-action-btn-delete[b-fy8n29qle9] {
    color: #64748b;
}

    .ct-action-btn-delete:hover[b-fy8n29qle9] {
        color: #b91c1c;
        background: rgba(185, 28, 28, 0.09);
    }

/* ===== ESTADO VACIO ===== */

/* Va dentro del marco de la tabla, bajo la cabecera: sin caja propia ni borde punteado. */
.ct-empty[b-fy8n29qle9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 48px 20px;
}

.ct-empty-icon[b-fy8n29qle9] {
    font-size: 40px;
    color: #cbd5e1;
    line-height: 1;
    margin-bottom: 4px;
}

.ct-empty-title[b-fy8n29qle9] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.ct-empty-text[b-fy8n29qle9] {
    max-width: 380px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

.ct-empty-btn[b-fy8n29qle9] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 15px 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

    .ct-empty-btn:hover[b-fy8n29qle9] {
        background: #dbeafe;
        border-color: #93c5fd;
    }

    .ct-empty-btn .material-symbols-outlined[b-fy8n29qle9] {
        font-size: 18px;
    }

/* ===== ANIMACIONES ===== */

@keyframes ctPanelIn-b-fy8n29qle9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== RESPONSIVE ===== */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Descripción» y
   «Acciones» permanecen siempre visibles. */
@media (max-width: 1400px) {
    .ct-col-hasta[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 1240px) {
    .ct-col-desde[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 1160px) {
    .ct-col-regalo[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 1080px) {
    .ct-col-articulo[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 1000px) {
    .ct-col-cantidad[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 920px) {
    .ct-col-familia[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 800px) {
    .ct-col-precio[b-fy8n29qle9] {
        display: none;
    }
}

@media (max-width: 680px) {
    .ct-col-descuento[b-fy8n29qle9] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-panel[b-fy8n29qle9],
    .ct-action-btn[b-fy8n29qle9] {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Components/ProveedorTarifaModal.razor.rz.scp.css */
/* Estilo del modal calcado de los modales de Artículos (art-modal-*). El backdrop es position:fixed
   y cubre el viewport; en pantallas pequeñas ocupa toda la pantalla con scroll vertical del cuerpo. */

.art-modal-backdrop[b-iwglo0cdtw] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.art-modal-card[b-iwglo0cdtw] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.art-modal-card .material-symbols-outlined[b-iwglo0cdtw] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.art-modal-header[b-iwglo0cdtw] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.art-modal-title[b-iwglo0cdtw] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.art-modal-subtitle[b-iwglo0cdtw] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.art-modal-body[b-iwglo0cdtw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.art-modal-info-box[b-iwglo0cdtw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.art-modal-info-icon[b-iwglo0cdtw] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.art-modal-info-title[b-iwglo0cdtw] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.art-modal-info-text[b-iwglo0cdtw] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.art-modal-field[b-iwglo0cdtw] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Fila de dos campos lado a lado (p. ej. cantidad desde/hasta, vigencia desde/hasta) en pantallas
   anchas. En pantallas estrechas colapsa a una sola columna (ver media query del final). */
.art-modal-row[b-iwglo0cdtw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.art-modal-label[b-iwglo0cdtw] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.art-modal-input[b-iwglo0cdtw] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .art-modal-input[b-iwglo0cdtw]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .art-modal-input:focus[b-iwglo0cdtw] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

/* Selector con ventana de búsqueda (mismo estilo que los modales de Artículos). */
.art-modal-selector[b-iwglo0cdtw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.art-modal-selector-trigger[b-iwglo0cdtw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.art-modal-selector-trigger:hover[b-iwglo0cdtw] {
    border-color: #bfdbfe;
}

.art-modal-selector-placeholder[b-iwglo0cdtw] {
    color: #9aa6b2;
}

.art-modal-selector-icon[b-iwglo0cdtw] {
    flex-shrink: 0;
    font-size: 20px;
    color: #64748b;
}

.art-modal-selector-clear[b-iwglo0cdtw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.art-modal-selector-clear:hover[b-iwglo0cdtw] {
    background: #f1f5f9;
    color: #ef4444;
}

.art-modal-selector-clear .material-symbols-outlined[b-iwglo0cdtw] {
    font-size: 20px;
}

.art-modal-actions[b-iwglo0cdtw] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que los modales de Artículos (sin animaciones de traslación en hover). */
.btn[b-iwglo0cdtw] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-iwglo0cdtw] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-iwglo0cdtw] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-iwglo0cdtw] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-iwglo0cdtw] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-iwglo0cdtw] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-iwglo0cdtw] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-iwglo0cdtw] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .art-modal-backdrop[b-iwglo0cdtw] {
        padding: 0;
    }

    .art-modal-card[b-iwglo0cdtw] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */

    /* Los pares de campos vuelven a apilarse en una sola columna. */
    .art-modal-row[b-iwglo0cdtw] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Pages/ProveedoresPage.razor.rz.scp.css */
.clientes-page[b-ygmwv89vvv],
.clientes-page *[b-ygmwv89vvv],
.clientes-page *[b-ygmwv89vvv]::before,
.clientes-page *[b-ygmwv89vvv]::after {
    box-sizing: border-box;
}

.clientes-page[b-ygmwv89vvv] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       La última fila es `1fr` (mínimo automático = su contenido): reparte el espacio sobrante cuando
       sobra, y empuja el alto de la página cuando falta.
       Filas: cabecera, aviso de error y listado. Mientras los KPIs sigan comentados en el markup no
       tienen fila propia: al restaurarlos hay que devolverle su `auto` a esta lista. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    animation: clientesPageIn-b-ygmwv89vvv 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.clientes-header[b-ygmwv89vvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título: se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado
       (clase command-bar-host-collapsed que añade el propio CommandBar). */
    .clientes-header > div:first-child[b-ygmwv89vvv] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .clientes-header.command-bar-host-collapsed > div:first-child[b-ygmwv89vvv] {
        flex: 1 1 auto;
    }

.clientes-title[b-ygmwv89vvv] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.clientes-subtitle[b-ygmwv89vvv] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.clientes-header.command-bar-host-collapsed .clientes-title[b-ygmwv89vvv],
.clientes-header.command-bar-host-collapsed .clientes-subtitle[b-ygmwv89vvv] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` de la ficha de cliente (icono al lado del texto, sin caja hasta el
   hover). Al no colgar de `.cform-page`, los tokens --cf-* de esas reglas resuelven por sus
   fallbacks, que son los mismos valores. */
.clientes-header-actions[b-ygmwv89vvv] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.clientes-list-panel[b-ygmwv89vvv] {
    /* Se ancla siempre a la última fila (la de 1fr) del grid de .clientes-page, independientemente de
       si el banner de error está presente o no. Así ocupa todo el alto disponible que sobra tras la
       cabecera, y crece con la tabla cuando no cabe. */
    grid-row: -2 / -1;
    display: grid;
    /* Filtros y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    grid-template-rows: auto 1fr;
    gap: 9px;
}

.clientes-filters[b-ygmwv89vvv] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 130px 180px 180px;
    gap: 10px;
    align-items: center;
}

.cl-filter-item[b-ygmwv89vvv],
.cl-filter-item-search[b-ygmwv89vvv] {
    min-width: 0;
}

.cl-filter-searchbox[b-ygmwv89vvv] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.cl-filter-search-icon[b-ygmwv89vvv] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cl-filter-input[b-ygmwv89vvv],
.cl-filter-select[b-ygmwv89vvv] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-filter-input[b-ygmwv89vvv] {
    padding: 0 13px;
}

.cl-filter-input-search[b-ygmwv89vvv] {
    padding-left: 38px;
}

.cl-filter-select[b-ygmwv89vvv] {
    padding: 0 12px;
    cursor: pointer;
}

.cl-filter-input[b-ygmwv89vvv]::placeholder {
    color: #9ca3af;
}

.cl-filter-input:focus[b-ygmwv89vvv],
.cl-filter-select:focus[b-ygmwv89vvv] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (insignia de estado y botones de acción).

   Todas esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que
   el CSS scoped de esta página no lo alcanza por sí solo. */

.cl-tabla[b-ygmwv89vvv] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto, pensado
   para el panel de pestañas de la ficha, que sí comprime) el contenido no podría empujar la fila
   `1fr` del grid y la tabla se desplazaría por dentro en vez de crecer la página. */
.clientes-page[b-ygmwv89vvv]  .tp-panel {
    min-height: auto;
}

/* COLUMNAS REPLEGABLES: los anchos los declara cada columna (Ancho, inline en el <th>); aquí solo
   se decide qué columna desaparece y a qué ancho de ventana (ver bloque RESPONSIVE). */

/* ACCIONES POR FILA (plantilla de la columna «Acciones») */

/* Botones-icono compactos (editar / borrar), mismo lenguaje que la tabla de almacenes. */
.clientes-page[b-ygmwv89vvv]  .cl-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clientes-page[b-ygmwv89vvv]  .cl-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que el usuario pueda seleccionar/resaltar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
}

    .clientes-page[b-ygmwv89vvv]  .cl-action-btn .material-symbols-outlined {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.clientes-page[b-ygmwv89vvv]  .cl-action-btn-edit {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .clientes-page[b-ygmwv89vvv]  .cl-action-btn-edit:hover {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.clientes-page[b-ygmwv89vvv]  .cl-action-btn-delete {
    color: #444653;
}

    .clientes-page[b-ygmwv89vvv]  .cl-action-btn-delete:hover {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* INSIGNIA DE ESTADO (plantilla de la columna «Estado») */

.clientes-page[b-ygmwv89vvv]  .cl-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.clientes-page[b-ygmwv89vvv]  .cl-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.clientes-page[b-ygmwv89vvv]  .cl-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.clientes-page[b-ygmwv89vvv]  .cl-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes clientesPageIn-b-ygmwv89vvv {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE (Desktop first) */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Código»,
   «Proveedor» y «Acciones» permanecen siempre visibles. La clase la lleva la cabecera Y sus celdas
   (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1400px) {
    .clientes-page[b-ygmwv89vvv]  .cl-col-poblacion {
        display: none;
    }
}

@media (max-width: 1200px) {
    .clientes-page[b-ygmwv89vvv]  .cl-col-nif {
        display: none;
    }
}

@media (max-width: 992px) {
    .clientes-page[b-ygmwv89vvv]  .cl-col-telefono,
    .clientes-page[b-ygmwv89vvv]  .cl-col-provincia {
        display: none;
    }
}

@media (max-width: 768px) {
    .clientes-page[b-ygmwv89vvv]  .cl-col-compras,
    .clientes-page[b-ygmwv89vvv]  .cl-col-pendiente {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho para nada más que identificar la fila y actuar sobre ella. */
@media (max-width: 640px) {
    .clientes-page[b-ygmwv89vvv]  .cl-col-estado {
        display: none;
    }
}

@media (max-width: 1280px) {
    .clientes-filters[b-ygmwv89vvv] {
        grid-template-columns: minmax(220px, 1fr) 110px 160px 160px;
    }
}

@media (max-width: 980px) {
    /* El modelo de alto («suelo = la pantalla, y crece si hace falta») ya es el mismo en todos los
       anchos, así que aquí no hay nada que corregir: solo el reparto de los filtros. */
    .clientes-filters[b-ygmwv89vvv] {
        grid-template-columns: 1fr 1fr;
    }

    .cl-filter-item-search[b-ygmwv89vvv] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .clientes-filters[b-ygmwv89vvv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .clientes-title[b-ygmwv89vvv] {
        font-size: 20px;
    }

    .clientes-subtitle[b-ygmwv89vvv] {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clientes-page[b-ygmwv89vvv],
    .clientes-page *[b-ygmwv89vvv],
    .clientes-page *[b-ygmwv89vvv]::before,
    .clientes-page *[b-ygmwv89vvv]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* MB6 · la casilla de cada fila para el mailing (la pinta la tabla, de ahí el ::deep). */
.cl-tabla[b-ygmwv89vvv]  .cl-marca-fila {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Pages/ProveedorFicha.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE PROVEEDOR — pantalla unificada (ver + editar + alta)
   ───────────────────────────────────────────────────────────────────────────
   Esta ficha absorbió el antiguo ProveedorFormulario: usa su sistema visual `cform-*`
   (tarjetas, rejillas de 12 columnas, inputs, controles) para los tabs editables
   y conserva el cromo propio de la ficha (navegador entre proveedores, KPIs y el
   modal de borrado). Es gemelo del de la ficha de cliente, que es la implementación
   de referencia: si algo cambia allí, cambia aquí. Reúne DOS bloques:

     1. SISTEMA cform-*  — el mismo de la ficha de cliente (que a su vez lo heredó del
        antiguo formulario). Los `::deep` alcanzan el markup editable de Views/ y los
        inputs de los componentes hijos (CampoConBuscador, InputFile).
     2. CROMO DE FICHA   — cabecera con el navegador, separación de los KPIs, y el
        modal de confirmación de borrado (clases cf-*).

   El estilo del CONTENIDO de los tabs de solo lectura (clases cf-info-*, cf-block,
   cf-address-*, cf-grid…) es GLOBAL y vive en wwwroot/css/ficha-terceros.css: el
   CSS scoped del padre no alcanza el DOM de los componentes hijos de Views/.
   Por eso la raíz conserva también la clase `proveedor-ficha-page` (reset y
   reduced-motion globales), además de `cform-page`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El reset alcanza también el DOM de las vistas de Views/ (`::deep`): sin él, Blazor
   ataría el `*` al scope de ESTA página y los hijos se quedarían sin box-sizing. */
.cform-page[b-i1qjcxg1e4],
.cform-page[b-i1qjcxg1e4]  *,
.cform-page[b-i1qjcxg1e4]  *::before,
.cform-page[b-i1qjcxg1e4]  *::after {
    box-sizing: border-box;
}

.cform-page[b-i1qjcxg1e4] {
    /* Fondo de .main-body: lo replican la barra pegada y su sangrado superior. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* min-height:100% = suelo de comodidad: la página llena como mínimo el alto que le cede .main-body
       (y crece por encima si su contenido no cabe; el scroll lo lleva la ventana). Es lo que permite
       que la fila de contenido reparta el alto sobrante hacia el tab activo. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--cf-text);
    animation: proveedorFichaPageIn-b-i1qjcxg1e4 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA PEGADA  ─────────────────────────────
   Navegador/título, acciones, KPIs y pestañas viajan juntos en un único elemento
   sticky: así no hay que saber cuánto mide la cabecera para posicionar el resto. */

.cform-chrome[b-i1qjcxg1e4] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cf-bg);
}

    /* .main-body tiene padding: sin este sangrado, el contenido asomaría por
       encima de la barra pegada al desplazar. */
    .cform-chrome[b-i1qjcxg1e4]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 20px;
        background: var(--cf-bg);
    }

.cform-topbar[b-i1qjcxg1e4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    min-width: 0;
}

/* El bloque de título cede espacio para que el CommandBar conserve su ancho natural. */
.cform-topbar-text[b-i1qjcxg1e4] {
    min-width: 0;
}

.cform-title[b-i1qjcxg1e4] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cform-subtitle[b-i1qjcxg1e4] {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

/* El propio CommandBar repliega comandos al menú «···» cuando falta ancho. */
.cform-page[b-i1qjcxg1e4]  .cform-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* ===== CABECERA CON NAVEGADOR (modo ficha/edición) =====
   Fila del navegador entre proveedores (izquierda) + CommandBar (derecha). Reemplaza
   al `cform-topbar` cuando hay un proveedor cargado. */
.proveedor-ficha-header[b-i1qjcxg1e4] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
}

/* Fase 2: el CommandBar ya está totalmente replegado a «···» y aún no cabe -> el navegador cede. */
.proveedor-ficha-header.command-bar-host-collapsed[b-i1qjcxg1e4]  .cf-nav {
    flex: 1 1 auto;
}

/* Último recurso: si ni con el CommandBar replegado a «···» cabe todo, la info del proveedor cede. */
.proveedor-ficha-header.command-bar-host-collapsed[b-i1qjcxg1e4]  .cf-identity-wrap {
    min-width: 0;
}

.proveedor-ficha-header[b-i1qjcxg1e4]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ===== KPIs (modo ficha/edición) =====
   Tablero de indicadores dentro del cromo pegado, separado de las pestañas. */
.pff-kpis[b-i1qjcxg1e4] {
    margin-bottom: 12px;
}

/* Pestañas: el rail inferior lo dibuja <ScrollableTabs>; aquí solo los botones. */
.cform-tabs[b-i1qjcxg1e4] {
    min-width: 0;
}

.cform-tab[b-i1qjcxg1e4] {
    flex: 0 0 auto;
    height: 38px;
    margin-bottom: -1px;    /* el subrayado activo solapa el rail de 1px */
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .cform-tab:hover[b-i1qjcxg1e4] {
        color: var(--cf-text-2);
    }

    .cform-tab.active[b-i1qjcxg1e4] {
        color: var(--cf-brand-strong);
        border-bottom-color: var(--cf-brand);
    }

    .cform-tab:focus-visible[b-i1qjcxg1e4] {
        outline: 2px solid var(--cf-brand-line);
        outline-offset: -2px;
    }

.cform-tabpanel[b-i1qjcxg1e4] {
    /* Rellena el alto sobrante bajo la cabecera pegada y se lo cede a su contenido: un tab de tabla
       (tp-panel) lo ocupa entero; un tab de tarjetas (cform-grid) se queda con su alto natural arriba.
       flex-basis:auto + min-height:0 → puede crecer por encima si el contenido no cabe. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--cf-gap);
    padding-bottom: 4px;
}

/* La pestaña de Pagos incrusta la pantalla de pagos entera (RemesaListaView), que se dimensiona con
   `height: 100%` contra su contenedor. Aquí ese contenedor es un item flex cuyo alto lo decide el
   reparto, así que se le da el sobrante como a cualquier otro item en vez de dejar que persiga un
   100 % de una altura que aún no está resuelta. `min-height: 0` para que la restricción baje hasta la
   tabla, que es la pieza que cede desplazándose por dentro.

   La clase se llama `.cobros-page` en las dos fichas porque el componente es el MISMO: es el nombre
   de la pantalla compartida, no el del sentido que se esté mirando. */
.cform-page[b-i1qjcxg1e4]  .cobros-page {
    flex: 1 1 auto;
    min-height: 0;
}

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.cform-alert[b-i1qjcxg1e4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cf-gap);
    padding: 10px 14px;
    border: 1px solid var(--cf-danger-line);
    border-left: 3px solid #dc2626;
    border-radius: var(--cf-r-md);
    background: var(--cf-danger-soft);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .cform-alert .material-symbols-outlined[b-i1qjcxg1e4] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ─────────────────────  REJILLA DE PÁGINA (TARJETAS)  ───────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cf-gap);
    align-items: start;
    min-width: 0;
}

.cform-page[b-i1qjcxg1e4]  .cform-col-4 {
    grid-column: span 4;
}

.cform-page[b-i1qjcxg1e4]  .cform-col-6 {
    grid-column: span 6;
}

.cform-page[b-i1qjcxg1e4]  .cform-col-8 {
    grid-column: span 8;
}

.cform-page[b-i1qjcxg1e4]  .cform-col-12 {
    grid-column: 1 / -1;
}

/* Una sola columna de tarjetas cuando el ancho ya no da para dos. */
@media (max-width: 1100px) {
    .cform-page[b-i1qjcxg1e4]  .cform-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-col-4,
    .cform-page[b-i1qjcxg1e4]  .cform-col-6,
    .cform-page[b-i1qjcxg1e4]  .cform-col-8,
    .cform-page[b-i1qjcxg1e4]  .cform-col-12 {
        grid-column: 1 / -1;
    }
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

.cform-page[b-i1qjcxg1e4]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-i1qjcxg1e4]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho
   de ESTA tarjeta, no del viewport. */
.cform-page[b-i1qjcxg1e4]  .cform-card-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* Nota explicativa: texto con filete, no una tarjeta dentro de la tarjeta. */
.cform-page[b-i1qjcxg1e4]  .cform-note {
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--cf-brand-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-i1qjcxg1e4]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-i1qjcxg1e4]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-i1qjcxg1e4]  .cform-field-2 {
    grid-column: span 2;
}

.cform-page[b-i1qjcxg1e4]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-i1qjcxg1e4]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-i1qjcxg1e4]  .cform-field-5 {
    grid-column: span 5;
}

.cform-page[b-i1qjcxg1e4]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-i1qjcxg1e4]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-i1qjcxg1e4]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-i1qjcxg1e4]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-i1qjcxg1e4]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-i1qjcxg1e4]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-i1qjcxg1e4]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ─────────────────────────────
   `::deep` además del selector directo: el input puede venir de un componente hijo
   (CampoConBuscador hereda la clase del host vía ClaseInput) y el CSS scoped de esta
   página no lo marcaría. Anclado en .cform-page para no sangrar a otros componentes. */

.cform-page[b-i1qjcxg1e4]  .cform-input,
.cform-page[b-i1qjcxg1e4]  .cform-select,
.cform-page[b-i1qjcxg1e4]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-i1qjcxg1e4]  .cform-input,
.cform-page[b-i1qjcxg1e4]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-i1qjcxg1e4]  .cform-select {
    cursor: pointer;
}

.cform-page[b-i1qjcxg1e4]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-i1qjcxg1e4]  .cform-input::placeholder,
.cform-page[b-i1qjcxg1e4]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-i1qjcxg1e4]  .cform-input:hover,
.cform-page[b-i1qjcxg1e4]  .cform-select:hover,
.cform-page[b-i1qjcxg1e4]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-i1qjcxg1e4]  .cform-input:focus,
.cform-page[b-i1qjcxg1e4]  .cform-select:focus,
.cform-page[b-i1qjcxg1e4]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

.cform-page[b-i1qjcxg1e4]  .cform-input-readonly,
.cform-page[b-i1qjcxg1e4]  .cform-input-readonly:hover {
    background: var(--cf-surface-2);
    border-color: var(--cf-line);
    color: var(--cf-muted);
    cursor: default;
}

/* El input con buscador (Agente) necesita hueco a la derecha para la lupa. */
.cform-page[b-i1qjcxg1e4]  .ccb-input-con-boton {
    padding-inline-end: 1.9rem;
}

/* Observaciones ocupa el alto de la tarjeta vecina (Clasificación comercial). */
.cform-page[b-i1qjcxg1e4]  .cform-field-full > .cform-textarea {
    min-height: 125px;
}

/* ─────────────────────────────  CASILLAS  ───────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-i1qjcxg1e4]  .cform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-check:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    /* La casilla marcada se lee de un vistazo, sin mirar el cuadrito. */
    .cform-page[b-i1qjcxg1e4]  .cform-check:has(input:checked) {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-check:focus-within {
        box-shadow: var(--cf-ring);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cf-brand);
    }

    /* Indicador, no mando: refleja un dato que se cambia en otro sitio (p. ej. «Compras», que es el
       Estado del proveedor). Se ve apagado para que nadie lo intente marcar (FUN-168). */
    .cform-page[b-i1qjcxg1e4]  .cform-check-readonly {
        cursor: default;
        opacity: 0.72;
        border-style: dashed;
    }

        .cform-page[b-i1qjcxg1e4]  .cform-check-readonly:hover {
            border-color: var(--cf-line);
            background: var(--cf-surface);
        }

/* ─────────────────────────────  BOTONES  ───────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-btn:hover {
        background: var(--cf-surface-2);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-btn .material-symbols-outlined {
        font-size: 18px;
    }

.cform-page[b-i1qjcxg1e4]  .cform-btn-primary {
    border-color: transparent;
    background: var(--cf-brand);
    color: #ffffff;
}

    .cform-page[b-i1qjcxg1e4]  .cform-btn-primary:hover {
        background: var(--cf-brand-strong);
    }

.cform-page[b-i1qjcxg1e4]  .cform-btn-danger {
    border-color: var(--cf-danger-line);
    color: var(--cf-danger);
}

    .cform-page[b-i1qjcxg1e4]  .cform-btn-danger:hover {
        background: var(--cf-danger-soft);
    }

.cform-page[b-i1qjcxg1e4]  .cform-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-icon-btn:hover {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-icon-btn .material-symbols-outlined {
        font-size: 18px;
    }

/* ────────────────────────  CONTROL SEGMENTADO  ──────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-seg {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cf-line);
    border-radius: 12px;
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

    .cform-page[b-i1qjcxg1e4]  .cform-seg::-webkit-scrollbar {
        display: none;
    }

.cform-page[b-i1qjcxg1e4]  .cform-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cf-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-seg-btn:hover {
        color: var(--cf-text-2);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-seg-btn.active {
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

.cform-page[b-i1qjcxg1e4]  .cform-seg-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--cf-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.cform-page[b-i1qjcxg1e4]  .cform-seg-btn.active .cform-seg-count {
    background: var(--cf-brand);
    color: #ffffff;
}

/* ────────────────────────────  DIRECCIONES  ──────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-dir {
    display: flex;
    flex-direction: column;
    gap: var(--cf-gap);
}

.cform-page[b-i1qjcxg1e4]  .cform-dir-split {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--cf-gap);
    align-items: start;
}

@media (max-width: 1100px) {
    .cform-page[b-i1qjcxg1e4]  .cform-dir-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La lista se acota para que el panel de edición no quede a media pantalla de
   distancia. Es el único scroll interno de la ficha, y es deliberado. */
.cform-page[b-i1qjcxg1e4]  .cform-dir-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    max-height: min(56vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cform-page[b-i1qjcxg1e4]  .cform-dir-list::-webkit-scrollbar {
        width: 6px;
    }

    .cform-page[b-i1qjcxg1e4]  .cform-dir-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.cform-page[b-i1qjcxg1e4]  .cform-dir-empty {
    margin: 0;
    padding: 14px 12px;
    border: 1px dashed var(--cf-line-strong);
    border-radius: var(--cf-r-md);
    background: var(--cf-surface-2);
    color: var(--cf-muted);
    font-size: 12.5px;
    text-align: center;
}

.cform-page[b-i1qjcxg1e4]  .cform-dir-item {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-md);
    background: var(--cf-surface);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-dir-item:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-dir-item.active {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        box-shadow: inset 3px 0 0 var(--cf-brand);
    }

.cform-page[b-i1qjcxg1e4]  .cform-dir-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 4px 9px 12px;
    border: 0;
    border-radius: var(--cf-r-md);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cform-page[b-i1qjcxg1e4]  .cform-dir-item-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-i1qjcxg1e4]  .cform-dir-item-meta {
    font-size: 11.5px;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El borrado aparece cuando se apunta la fila (o al tabular hasta él). */
.cform-page[b-i1qjcxg1e4]  .cform-dir-item-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    border: 0;
    border-radius: 0 var(--cf-r-md) var(--cf-r-md) 0;
    background: transparent;
    color: var(--cf-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-dir-item:hover .cform-dir-item-del,
    .cform-page[b-i1qjcxg1e4]  .cform-dir-item-del:focus-visible {
        opacity: 1;
    }

    .cform-page[b-i1qjcxg1e4]  .cform-dir-item-del:hover {
        background: var(--cf-danger-soft);
        color: var(--cf-danger);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-dir-item-del .material-symbols-outlined {
        font-size: 18px;
    }

/* En táctil no hay hover: el borrado se muestra siempre. */
@media (hover: none) {
    .cform-page[b-i1qjcxg1e4]  .cform-dir-item-del {
        opacity: 1;
    }
}

/* Panel vacío cuando el proveedor aún no tiene direcciones de envío. */
.cform-page[b-i1qjcxg1e4]  .cform-placeholder {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    padding: 32px;
    border-style: dashed;
    box-shadow: none;
    text-align: center;
}

    .cform-page[b-i1qjcxg1e4]  .cform-placeholder .material-symbols-outlined {
        font-size: 34px;
        color: var(--cf-faint);
    }

.cform-page[b-i1qjcxg1e4]  .cform-placeholder-title {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--cf-text);
}

.cform-page[b-i1qjcxg1e4]  .cform-placeholder-hint {
    margin: 0 0 14px;
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* ───────────────────────  RESUMEN DE COBRO  ─────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-summary-head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin-bottom: 6px;
}

.cform-page[b-i1qjcxg1e4]  .cform-summary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, var(--cf-brand-strong));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.cform-page[b-i1qjcxg1e4]  .cform-summary-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cform-page[b-i1qjcxg1e4]  .cform-summary-name {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-i1qjcxg1e4]  .cform-summary-meta {
    font-size: 11.5px;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cform-page[b-i1qjcxg1e4]  .cform-summary-rows {
    margin: 0;
}

    .cform-page[b-i1qjcxg1e4]  .cform-summary-rows > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid var(--cf-line);
    }

        .cform-page[b-i1qjcxg1e4]  .cform-summary-rows > div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .cform-page[b-i1qjcxg1e4]  .cform-summary-rows dt {
        font-size: 12px;
        color: var(--cf-muted);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-summary-rows dd {
        margin: 0;
        min-width: 0;
        font-size: 12.5px;
        font-weight: 650;
        color: var(--cf-text);
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ──────────────────────────────  LOGO  ────────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    border: 1.5px dashed var(--cf-line-strong);
    border-radius: var(--cf-r-lg);
    background: var(--cf-surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone:hover {
        border-color: #60a5fa;
        background: var(--cf-brand-soft);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone.has-logo {
        border-style: solid;
        border-color: var(--cf-line);
        background: var(--cf-surface);
    }

    /* Input real de InputFile (componente hijo → ::deep): invisible pero cubre toda
       la zona, así un clic en cualquier punto del recuadro abre el diálogo. */
    .cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone input[type="file"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cform-page[b-i1qjcxg1e4]  .cform-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 12px;
    text-align: center;
    color: var(--cf-faint);
    pointer-events: none;
}

    .cform-page[b-i1qjcxg1e4]  .cform-logo-empty .material-symbols-outlined {
        font-size: 30px;
    }

.cform-page[b-i1qjcxg1e4]  .cform-logo-empty-title {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--cf-muted);
}

.cform-page[b-i1qjcxg1e4]  .cform-logo-empty-hint {
    font-size: 11px;
}

.cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone:hover .cform-logo-empty,
.cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone:hover .cform-logo-empty-title {
    color: var(--cf-brand);
}

.cform-page[b-i1qjcxg1e4]  .cform-logo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-logo-overlay .material-symbols-outlined {
        font-size: 22px;
    }

.cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone.has-logo:hover .cform-logo-overlay {
    opacity: 1;
}

/* ─────────────────────────────  ETIQUETAS  ───────────────────────────── */

.cform-page[b-i1qjcxg1e4]  .cform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-i1qjcxg1e4]  .cform-tag {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-i1qjcxg1e4]  .cform-tag:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    .cform-page[b-i1qjcxg1e4]  .cform-tag.active {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

/* ══════════════════════════════════════════════════════════════════════════
   CROMO DE FICHA — modal de confirmación de borrado (contenido del <Modal>)
   ══════════════════════════════════════════════════════════════════════════ */

.cf-primary-btn[b-i1qjcxg1e4],
.cf-action-btn[b-i1qjcxg1e4] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.cf-primary-btn[b-i1qjcxg1e4] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cf-primary-btn:hover[b-i1qjcxg1e4] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cf-action-btn[b-i1qjcxg1e4] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cf-action-btn:hover[b-i1qjcxg1e4] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cf-danger-btn[b-i1qjcxg1e4] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .cf-danger-btn:hover:not(:disabled)[b-i1qjcxg1e4] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .cf-danger-btn:disabled[b-i1qjcxg1e4] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.cf-confirm-modal[b-i1qjcxg1e4] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cf-confirm-icon[b-i1qjcxg1e4] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.cf-confirm-body[b-i1qjcxg1e4] {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-confirm-subtitle[b-i1qjcxg1e4] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .cf-confirm-subtitle strong[b-i1qjcxg1e4] {
        font-weight: 850;
        color: #1f2937;
    }

.cf-confirm-error[b-i1qjcxg1e4] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 750;
}

.cf-confirm-actions[b-i1qjcxg1e4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ───────────────────────────────  ANIMACIÓN  ─────────────────────────────
   Solo opacidad: NO usar filter/transform aquí. Un ancestro con filter (aunque sea
   blur(0)) crea un «containing block» para los descendientes position:fixed, lo que
   atraparía los modales de las pestañas (p. ej. el de Tarifas) dentro del área de la
   ficha en vez de cubrir el viewport. */
@keyframes proveedorFichaPageIn-b-i1qjcxg1e4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-i1qjcxg1e4] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-i1qjcxg1e4] {
        font-size: 18px;
    }

    .cform-subtitle[b-i1qjcxg1e4] {
        display: none;   /* en móvil el subtítulo solo roba altura a la barra pegada */
    }

    .cform-page[b-i1qjcxg1e4]  .cform-logo-dropzone {
        max-width: 148px;
    }
}

/* ─────────────────────  CONDICIONES ESPECÍFICAS  ─────────────────────
   Propio de la ficha de proveedor: la de cliente resuelve las tarifas contra BD y no
   tiene esta lista. Cada condición es una fila, no una tarjeta: se separan con un
   filete, para que la lista no sea una pila de cajas dentro de la tarjeta que las
   contiene. */

.cform-page[b-i1qjcxg1e4]  .cform-cond {
    display: grid;
    grid-template-columns: 150px minmax(160px, 1fr) 130px 130px auto;
    gap: 12px;
    align-items: end;
    padding: 14px 0;
    border-bottom: 1px solid var(--cf-line);
}

    .cform-page[b-i1qjcxg1e4]  .cform-cond:first-child {
        padding-top: 0;
    }

    .cform-page[b-i1qjcxg1e4]  .cform-cond:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

/* El botón de borrar se alinea con la línea base de los campos. */
.cform-page[b-i1qjcxg1e4]  .cform-cond-del {
    height: 36px;
    width: 36px;
}

    .cform-page[b-i1qjcxg1e4]  .cform-cond-del:hover {
        border-color: var(--cf-danger-line);
        background: var(--cf-danger-soft);
        color: var(--cf-danger);
    }

/* Estado vacío dentro de una tarjeta (lista de condiciones sin filas). */
.cform-page[b-i1qjcxg1e4]  .cform-empty {
    margin: 0;
    padding: 22px 14px;
    border: 1px dashed var(--cf-line-strong);
    border-radius: var(--cf-r-md);
    background: var(--cf-surface-2);
    color: var(--cf-muted);
    font-size: 12.5px;
    text-align: center;
}

@container (max-width: 720px) {
    .cform-page[b-i1qjcxg1e4]  .cform-cond {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cform-page[b-i1qjcxg1e4]  .cform-cond-del {
        justify-self: start;
    }
}

@container (max-width: 360px) {
    .cform-page[b-i1qjcxg1e4]  .cform-cond {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-i1qjcxg1e4]  *,
    .cform-page[b-i1qjcxg1e4]  *::before,
    .cform-page[b-i1qjcxg1e4]  *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* RQ4: aviso bajo la cuenta cuando no es la de su código (solo avisa). */
.cform-page[b-i1qjcxg1e4]  .cform-aviso {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    color: #9a5b00;
}

/* RQ6: lupa del campo Código (la pulsa también F2): busca otra ficha con lo tecleado. */
.cform-page[b-i1qjcxg1e4]  .cform-codigo-buscar {
    position: relative;
}

.cform-page[b-i1qjcxg1e4]  .cform-codigo-buscar .cform-input {
    padding-right: 36px;
}

.cform-page[b-i1qjcxg1e4]  .cform-codigo-lupa {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cf-muted);
    cursor: pointer;
}

.cform-page[b-i1qjcxg1e4]  .cform-codigo-lupa:hover {
    background: var(--cf-surface-2);
}

.cform-page[b-i1qjcxg1e4]  .cform-codigo-lupa .material-symbols-outlined {
    font-size: 18px;
}
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Views/ProveedorDocumentosView.razor.rz.scp.css */
/* ============================================================================
   DOCUMENTOS DEL PROVEEDOR — estilos de la pestaña (scoped)
   ----------------------------------------------------------------------------
   Espejo de ClienteDocumentosView.razor.css. El cromo del listado (cabecera,
   filas, pager) lo aporta el componente global TablaPaginada (.tp-panel); aquí
   solo viven el panel y la cabecera con el buscador.
   ============================================================================ */

.pdoc-panel[b-bqlw4c5d1x] {
    /* Igual que .tp-panel: llena el alto del tab con flex-grow (no height:100%, que como hijo flex
       estirado no siempre resuelve) y deja la tabla ocupar el espacio restante. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.pdoc-header[b-bqlw4c5d1x] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pdoc-searchbox[b-bqlw4c5d1x] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
}

.pdoc-search-icon[b-bqlw4c5d1x] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.pdoc-search-input[b-bqlw4c5d1x] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px 0 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .pdoc-search-input[b-bqlw4c5d1x]::placeholder {
        color: #9ca3af;
    }

    .pdoc-search-input:focus[b-bqlw4c5d1x] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* ===== RESPONSIVE — columnas replegables =====
   Al estrechar la ventana caen primero las menos importantes: Tipo → Estado → Fecha. «Documento» e
   «Importe» permanecen siempre (identifican la fila y su valor clave). El markup de la tabla vive en el
   componente hijo TablaPaginada, así que las reglas necesitan `::deep` desde el panel; la clase la lleva
   la cabecera Y sus celdas, por lo que basta con ocultarla una vez. */

@media (max-width: 1000px) {
    .pdoc-panel[b-bqlw4c5d1x]  .pdoc-col-tipo {
        display: none;
    }
}

@media (max-width: 820px) {
    .pdoc-panel[b-bqlw4c5d1x]  .pdoc-col-estado {
        display: none;
    }
}

@media (max-width: 680px) {
    .pdoc-panel[b-bqlw4c5d1x]  .pdoc-col-fecha {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Views/ProveedorExtractoView.razor.rz.scp.css */
/*
    Extracto de la ficha de proveedor: panel, estados de carga y pie de saldos. Espejo del de cliente
    (ClienteExtractoView.razor.css) — si se toca uno, se toca el otro. La tabla la estila TablaPaginada.
*/

.pext-panel[b-evbaalbtyg] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pext-estado[b-evbaalbtyg] {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: .875rem;
}

.pext-error[b-evbaalbtyg] {
    color: #b91c1c;
}

/* Aviso sobre una tabla que SÍ se pinta: la cuenta de la ficha no sirve para leer el mayor. No es un
   error —la pestaña funciona— pero sin destacarlo, la tabla vacía de debajo se leería como «no se le
   debe nada», que es lo contrario de lo que pasa. */
.pext-aviso[b-evbaalbtyg] {
    padding: .75rem 1rem;
    text-align: left;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}

.pext-pie[b-evbaalbtyg] {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: .5rem .75rem;
    border-top: 1px solid #e2e8f0;
    font-size: .8125rem;
    color: #475569;
}

    .pext-pie strong[b-evbaalbtyg] {
        color: #1f2937;
        font-variant-numeric: tabular-nums;
    }
/* _content/ErpPowergest/Presentation/Fichas/Proveedores/Views/ProveedorTarifasView.razor.rz.scp.css */
/* ============================================================================
   TARIFAS DEL PROVEEDOR — estilos de la pestaña (scoped)
   ----------------------------------------------------------------------------
   El cromo del grid (cabecera, filas, pager) lo aporta la clase global .cf-grid
   (wwwroot/css/ficha-terceros.css), compartida con las demás tablas de la ficha.
   Aquí viven la cabecera (buscador + CommandBar de alta), el estado vacío y los
   botones de acción de cada fila. El modal de alta/edición es un componente aparte
   (ProveedorTarifaModal) con su propio estilo (patrón de los modales de Artículos).
   ============================================================================ */

.ct-panel[b-ft51zfjcdi] {
    /* Rellena todo el alto del contenedor del tab (flex) como mínimo, y puede crecer si su contenido no
       cabe. Se usa flex-grow (no height:100%) porque, como hijo flex estirado, el porcentaje de altura no
       siempre resuelve; el flex-grow sí llena de forma fiable —igual que la tabla de listados (.tp-panel)—. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    animation: ctPanelIn-b-ft51zfjcdi 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ===== CABECERA (buscador + boton de alta) ===== */

.ct-header[b-ft51zfjcdi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    border-bottom: 1px solid #eef2f7;
}

.ct-searchbox[b-ft51zfjcdi] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
}

.ct-search-icon[b-ft51zfjcdi] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ct-search-input[b-ft51zfjcdi] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px 0 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ct-search-input[b-ft51zfjcdi]::placeholder {
        color: #9ca3af;
    }

    .ct-search-input:focus[b-ft51zfjcdi] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* Botón de alta (CommandBar): conserva su ancho natural a la derecha; el propio componente
   colapsa el texto (modo compacto) cuando no cabe. ::deep alcanza el DOM del componente hijo. */
.ct-header[b-ft51zfjcdi]  .command-bar {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}

    /* El botón «Añadir tarifa» (y el «···») igualan la altura y el redondeo de la barra de
       búsqueda (.ct-search-input, 38px) para que formen una pareja del mismo tamaño. */
    .ct-header[b-ft51zfjcdi]  .command-bar__btn,
    .ct-header[b-ft51zfjcdi]  .command-bar__more {
        height: 38px;
        border-radius: 11px;
    }

/* ===== TABLA ===== */

/* Marco de la tabla: la zona de la tabla ocupa el alto sobrante y el paginador queda anclado abajo. */
.ct-table-shell[b-ft51zfjcdi] {
    min-height: 240px;
    height: 100%;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.ct-table-scroll[b-ft51zfjcdi] {
    min-height: 0;
}

.ct-table[b-ft51zfjcdi] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

.ct-table thead th[b-ft51zfjcdi] {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

/* Cabecera sin orden: mismo alto y ritmo tipográfico que las ordenables. */
.ct-table thead th.ct-th-plain[b-ft51zfjcdi] {
    padding: 0 14px;
    height: 42px;
}

/* Columnas numéricas: rótulo alineado a la derecha, como sus importes. */
.ct-table thead th.ct-col-descuento[b-ft51zfjcdi],
.ct-table thead th.ct-col-precio[b-ft51zfjcdi],
.ct-table thead th.ct-col-cantidad[b-ft51zfjcdi] {
    text-align: right;
}

.ct-table thead th.ct-th-center[b-ft51zfjcdi] {
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.ct-sort[b-ft51zfjcdi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .ct-sort:hover[b-ft51zfjcdi] {
        background: #f1f5f9;
        color: #334155;
    }

    .ct-sort:focus-visible[b-ft51zfjcdi] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.ct-sort-icon[b-ft51zfjcdi] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto de la cabecera
   no se desplace) y solo aparece al pasar el puntero o al enfocar con teclado. */
.ct-sort-icon-inactivo[b-ft51zfjcdi] {
    opacity: 0;
}

.ct-sort:hover .ct-sort-icon-inactivo[b-ft51zfjcdi],
.ct-sort:focus-visible .ct-sort-icon-inactivo[b-ft51zfjcdi] {
    opacity: 1;
}

.ct-table tbody td[b-ft51zfjcdi] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    /* Permite el salto de línea (incluso partiendo palabras largas sin espacios) en celdas estrechas. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ct-table tbody tr[b-ft51zfjcdi] {
    transition: background 0.14s ease;
}

    .ct-table tbody tr:hover td[b-ft51zfjcdi] {
        background: #f8fbff;
    }

    /* La última fila no dibuja separador: el borde inferior lo pone el paginador. */
    .ct-table tbody tr:last-child td[b-ft51zfjcdi] {
        border-bottom: none;
    }

/* Anchos de columna: «Descripción» absorbe el espacio sobrante; el resto es contenido. */
.ct-col-familia[b-ft51zfjcdi] {
    width: 150px;
}

.ct-col-articulo[b-ft51zfjcdi] {
    width: 140px;
}

.ct-col-regalo[b-ft51zfjcdi] {
    width: 140px;
}

.ct-col-descuento[b-ft51zfjcdi] {
    width: 120px;
    text-align: right;
}

.ct-col-precio[b-ft51zfjcdi] {
    width: 120px;
    text-align: right;
}

.ct-col-cantidad[b-ft51zfjcdi] {
    width: 140px;
    text-align: right;
}

.ct-col-desde[b-ft51zfjcdi] {
    width: 130px;
    text-align: center;
}

.ct-col-hasta[b-ft51zfjcdi] {
    width: 135px;
    text-align: center;
}

.ct-col-acciones[b-ft51zfjcdi] {
    width: 110px;
    text-align: center;
}

/* ===== PAGINADOR ===== */

.ct-pager[b-ft51zfjcdi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.ct-pager-info[b-ft51zfjcdi] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.ct-pager-nav[b-ft51zfjcdi] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ct-pager-btn[b-ft51zfjcdi],
.ct-pager-page[b-ft51zfjcdi] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .ct-pager-btn:hover:not(:disabled)[b-ft51zfjcdi],
    .ct-pager-page:hover[b-ft51zfjcdi] {
        background: #eef2f7;
        color: #1f2937;
    }

    .ct-pager-btn:disabled[b-ft51zfjcdi] {
        opacity: 0.4;
        cursor: default;
    }

    .ct-pager-btn .material-symbols-outlined[b-ft51zfjcdi] {
        font-size: 18px;
        pointer-events: none;
    }

/* Página activa: relleno primary sólido, como el botón principal de la cabecera. */
.ct-pager-page-active[b-ft51zfjcdi],
.ct-pager-page-active:hover[b-ft51zfjcdi] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila (editar / borrar): botones-icono compactos, mismo lenguaje que la tabla de almacenes. */
.ct-row-actions[b-ft51zfjcdi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ct-action-btn[b-ft51zfjcdi] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    user-select: none;
    -webkit-user-select: none;
}

    .ct-action-btn .material-symbols-outlined[b-ft51zfjcdi] {
        font-size: 18px;
        pointer-events: none;
        user-select: none;
    }

.ct-action-btn-edit[b-ft51zfjcdi] {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.2);
}

    .ct-action-btn-edit:hover[b-ft51zfjcdi] {
        background: rgba(37, 99, 235, 0.1);
    }

.ct-action-btn-delete[b-ft51zfjcdi] {
    color: #64748b;
}

    .ct-action-btn-delete:hover[b-ft51zfjcdi] {
        color: #b91c1c;
        background: rgba(185, 28, 28, 0.09);
    }

/* ===== ESTADO VACIO ===== */

/* Va dentro del marco de la tabla, bajo la cabecera: sin caja propia ni borde punteado. */
.ct-empty[b-ft51zfjcdi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 48px 20px;
}

.ct-empty-icon[b-ft51zfjcdi] {
    font-size: 40px;
    color: #cbd5e1;
    line-height: 1;
    margin-bottom: 4px;
}

.ct-empty-title[b-ft51zfjcdi] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.ct-empty-text[b-ft51zfjcdi] {
    max-width: 380px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

.ct-empty-btn[b-ft51zfjcdi] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 15px 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

    .ct-empty-btn:hover[b-ft51zfjcdi] {
        background: #dbeafe;
        border-color: #93c5fd;
    }

    .ct-empty-btn .material-symbols-outlined[b-ft51zfjcdi] {
        font-size: 18px;
    }

/* ===== ANIMACIONES ===== */

@keyframes ctPanelIn-b-ft51zfjcdi {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== RESPONSIVE ===== */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Descripción» y
   «Acciones» permanecen siempre visibles. */
@media (max-width: 1400px) {
    .ct-col-hasta[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 1240px) {
    .ct-col-desde[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 1160px) {
    .ct-col-regalo[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 1080px) {
    .ct-col-articulo[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 1000px) {
    .ct-col-cantidad[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 920px) {
    .ct-col-familia[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 800px) {
    .ct-col-precio[b-ft51zfjcdi] {
        display: none;
    }
}

@media (max-width: 680px) {
    .ct-col-descuento[b-ft51zfjcdi] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-panel[b-ft51zfjcdi],
    .ct-action-btn[b-ft51zfjcdi] {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/DefinicionIva/Pages/DefinicionIvaPage.razor.rz.scp.css */
.dei-page[b-oo49uxqn58],
.dei-page *[b-oo49uxqn58],
.dei-page *[b-oo49uxqn58]::before,
.dei-page *[b-oo49uxqn58]::after {
    box-sizing: border-box;
}

.dei-page[b-oo49uxqn58] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    /* Capa la columna única al ancho del contenedor: sin esto la columna implícita (auto) se
       estira al min-content del hijo más ancho y la cabecera (y su «···») desborda el viewport. */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    overflow: hidden;
}

.dei-header[b-oo49uxqn58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.dei-header-copy[b-oo49uxqn58] {
    /* Fase 1: el texto conserva su ancho natural (acotado al contenedor) y NO cede; el CommandBar
       se repliega primero (iconos → «···») respetando el ancho del texto. */
    flex: 0 0 auto;
    min-width: min(100%, 8rem);
    max-width: 100%;
}

/* Fase 2 (el CommandBar ya está replegado a «···» y aún no cabe): el texto cede y envuelve. */
.dei-header.command-bar-host-collapsed .dei-header-copy[b-oo49uxqn58] {
    flex: 1 1 auto;
}

.dei-title[b-oo49uxqn58] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.dei-subtitle[b-oo49uxqn58] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. */
.dei-header-actions[b-oo49uxqn58] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.card-panel[b-oo49uxqn58] {
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

.section-title[b-oo49uxqn58] {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-oo49uxqn58] {
    margin: 0;
}

/* WORKSPACE: una sola superficie que aloja el rail de pestañas y el contenido de la activa.
   El rail no es una tarjeta suelta: es la cabecera de este panel, integrada sobre el mismo lienzo. */

.dei-workspace[b-oo49uxqn58] {
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);   /* rail (auto) + lienzo (resto) */
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
    overflow: hidden;                          /* recorta el lienzo a las esquinas redondeadas */
}

/* Cabecera del panel: aloja el rail. El subrayado continuo de 1px lo pinta ScrollableTabs. */
.dei-workspace-rail[b-oo49uxqn58] {
    padding: 6px 14px 0;
    background: #ffffff;
}

/* Lienzo del contenido: superficie suave para que las tarjetas del contenido floten sobre él. */
.dei-workspace-body[b-oo49uxqn58] {
    min-height: 0;
    min-width: 0;
    padding: 14px;
    background: #f7f9fc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .dei-workspace-body > *[b-oo49uxqn58] {
        flex: 1 1 auto;
        min-height: 0;
    }

/* Tarjetas dentro del lienzo: sombra sutil para que se agrupen en el mismo panel. */
.dei-workspace-body .card-panel[b-oo49uxqn58] {
    border-color: #e8ecf2;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* PESTAÑAS (subrayado profesional) */
/* La barra (rail, scroll horizontal y flechas) la aporta el componente <ScrollableTabs>; aquí solo
   se estilan los botones de pestaña, que conservan el CSS de esta página por viajar en el ChildContent. */
.dei-tab[b-oo49uxqn58] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .dei-tab:hover[b-oo49uxqn58] {
        color: #334155;
    }

    .dei-tab.active[b-oo49uxqn58] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .dei-tab:focus-visible[b-oo49uxqn58] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

.dei-content-grid[b-oo49uxqn58] {
    min-height: 0;
    display: grid;
    /* La columna lateral mide 360px cuando cabe; cede (minmax 0) en vez de imponer un mínimo
       horizontal que ensancharía la página más allá del viewport. */
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    overflow: hidden;
}

.dei-content-grid-rev[b-oo49uxqn58] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}

.dei-list-panel[b-oo49uxqn58],
.dei-edit-panel[b-oo49uxqn58] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.dei-panel-header[b-oo49uxqn58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    flex: 0 0 auto;
}

    .dei-panel-header > div:first-child[b-oo49uxqn58] {
        min-width: 0;
        flex: 1 1 auto;
    }

.dei-panel-subtitle[b-oo49uxqn58] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

.dei-inline-actions[b-oo49uxqn58] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* GRUPOS */

.dei-group-tabs[b-oo49uxqn58] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    flex: 0 0 auto;
}

/* LISTA TIPOS */

.dei-types-list[b-oo49uxqn58] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .dei-types-list[b-oo49uxqn58]::-webkit-scrollbar {
        width: 6px;
    }

    .dei-types-list[b-oo49uxqn58]::-webkit-scrollbar-track {
        background: transparent;
    }

    .dei-types-list[b-oo49uxqn58]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .dei-types-list[b-oo49uxqn58]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.dei-type-top[b-oo49uxqn58],
.dei-type-title[b-oo49uxqn58],
.dei-type-meta[b-oo49uxqn58] {
    min-width: 0;
}

/* EDICION */

.dei-edit-grid[b-oo49uxqn58] {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .dei-edit-grid[b-oo49uxqn58]::-webkit-scrollbar {
        width: 6px;
    }

    .dei-edit-grid[b-oo49uxqn58]::-webkit-scrollbar-track {
        background: transparent;
    }

    .dei-edit-grid[b-oo49uxqn58]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .dei-edit-grid[b-oo49uxqn58]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.dei-edit-block[b-oo49uxqn58] {
    min-width: 0;
    align-self: start;
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px;
}

.dei-block-title[b-oo49uxqn58] {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5eaf0;
    font-size: 13px;
    font-weight: 900;
    color: #111827;
}

/* FORM */

.dei-form-grid[b-oo49uxqn58] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
}

.dei-field[b-oo49uxqn58] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dei-field-span-2[b-oo49uxqn58] {
    grid-column: span 2;
}

.dei-field label[b-oo49uxqn58] {
    font-size: 12px;
    font-weight: 800;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dei-input[b-oo49uxqn58] {
    width: 100%;
    max-width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .dei-input:focus[b-oo49uxqn58] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.dei-check-item[b-oo49uxqn58] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    cursor: pointer;
}

    .dei-check-item input[b-oo49uxqn58] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
        flex: 0 0 auto;
    }

.dei-info-box[b-oo49uxqn58] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

/* TABLA DE IVAS COMUNITARIOS
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. El marco lo trae ya la tabla (.tp-shell),
   así que este contenedor no dibuja ninguno: solo reparte el alto.

   Las reglas que alcanzan al markup de la tabla van con `::deep`: lo renderiza el componente, y el
   CSS scoped de esta página no lo alcanza por sí solo. */

.dei-grid-panel[b-oo49uxqn58] {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.dei-grid-wrap[b-oo49uxqn58] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* FILA SELECCIONADA
   La tabla no tiene noción de selección: la marca la aporta la página (ClaseFilaExtra) porque es
   quien sabe cuál es el país que se está editando a la derecha. El hover de la tabla no debe
   pisarla, de ahí el `:hover` explícito con el mismo fondo. */
.dei-page[b-oo49uxqn58]  .dei-row-sel > td,
.dei-page[b-oo49uxqn58]  .dei-row-sel:hover > td {
    background: #eff6ff;
}

/* MODAL */

.dei-modal-backdrop[b-oo49uxqn58] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dei-modal-card[b-oo49uxqn58] {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.dei-modal-header[b-oo49uxqn58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #eef2f7;
}

.dei-modal-kicker[b-oo49uxqn58] {
    font-size: 11px;
    font-weight: 850;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dei-modal-title[b-oo49uxqn58] {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}

.dei-modal-subtitle[b-oo49uxqn58] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.dei-modal-body[b-oo49uxqn58] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.dei-modal-section[b-oo49uxqn58] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dei-modal-section-title[b-oo49uxqn58] {
    font-size: 13px;
    font-weight: 900;
    color: #111827;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef2f7;
}

.dei-modal-grid[b-oo49uxqn58] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.dei-modal-actions[b-oo49uxqn58] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 18px;
    border-top: 1px solid #eef2f7;
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .dei-page[b-oo49uxqn58] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .dei-content-grid[b-oo49uxqn58],
    .dei-content-grid-rev[b-oo49uxqn58] {
        grid-template-columns: 1fr;
    }

    .dei-grid-wrap[b-oo49uxqn58] {
        min-height: 360px;
        max-height: 420px;
    }
}

@media (max-width: 980px) {
    .dei-page[b-oo49uxqn58] {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .dei-workspace-body[b-oo49uxqn58] {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .dei-content-grid[b-oo49uxqn58],
    .dei-content-grid-rev[b-oo49uxqn58] {
        min-height: auto;
        overflow: visible;
    }

    .dei-list-panel[b-oo49uxqn58],
    .dei-edit-panel[b-oo49uxqn58] {
        overflow: visible;
    }

    .dei-types-list[b-oo49uxqn58] {
        max-height: min(340px, 38dvh);
        flex: 0 0 auto;
    }

    .dei-edit-grid[b-oo49uxqn58] {
        overflow: visible;
        padding-right: 0;
    }

    .dei-grid-panel[b-oo49uxqn58] {
        display: flex;
        flex-direction: column;
    }

    .dei-grid-wrap[b-oo49uxqn58] {
        flex: 0 0 auto;
        height: min(420px, 48dvh);
        min-height: 280px;
        max-height: min(420px, 48dvh);
    }
}

@media (max-width: 768px) {
    .dei-page[b-oo49uxqn58] {
        gap: 10px;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */
    .dei-panel-header[b-oo49uxqn58] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .dei-inline-actions[b-oo49uxqn58] {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .dei-edit-grid[b-oo49uxqn58],
    .dei-form-grid[b-oo49uxqn58],
    .dei-group-tabs[b-oo49uxqn58],
    .dei-modal-grid[b-oo49uxqn58] {
        grid-template-columns: 1fr;
    }

    .dei-field-span-2[b-oo49uxqn58] {
        grid-column: auto;
    }

    .dei-types-list[b-oo49uxqn58] {
        max-height: min(300px, 36dvh);
    }

    .dei-grid-wrap[b-oo49uxqn58] {
        height: min(380px, 46dvh);
        min-height: 260px;
        max-height: min(380px, 46dvh);
    }

    .dei-modal-backdrop[b-oo49uxqn58] {
        padding: 14px;
    }

    .dei-modal-card[b-oo49uxqn58] {
        max-height: calc(100dvh - 28px);
    }
}

@media (max-width: 520px) {
    .dei-page[b-oo49uxqn58] {
        gap: 8px;
    }

    /* El título y el subtítulo escalan con el clamp responsive; no se fija tamaño aquí. */

    .card-panel[b-oo49uxqn58] {
        border-radius: 14px;
        padding: 10px;
    }

    .dei-workspace-rail[b-oo49uxqn58] {
        padding: 6px 10px 0;
    }

    .dei-workspace-body[b-oo49uxqn58] {
        padding: 10px;
    }

    .dei-types-list[b-oo49uxqn58] {
        max-height: min(270px, 34dvh);
    }

    .dei-grid-wrap[b-oo49uxqn58] {
        height: min(340px, 44dvh);
        min-height: 240px;
        max-height: min(340px, 44dvh);
    }

    .dei-modal-backdrop[b-oo49uxqn58] {
        padding: 0;
        align-items: stretch;
    }

    .dei-modal-card[b-oo49uxqn58] {
        max-width: none;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
    }

    .dei-modal-header[b-oo49uxqn58] {
        padding: 16px 16px 12px;
    }

    .dei-modal-body[b-oo49uxqn58] {
        padding: 14px 16px;
    }

    .dei-modal-actions[b-oo49uxqn58] {
        padding: 12px 16px 16px;
        flex-direction: column;
    }
}

/* Plan IU: la subcuenta en la que acabará la cuenta tecleada, bajo el campo. */
.dei-hint[b-oo49uxqn58] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* Rango de articulos del dialogo de actualizacion: lo pinta RangoCodigos (componente hijo), que recibe estas
   clases por parametro y a las que el CSS aislado de la pagina no llega sin ::deep. */
.dei-modal-grid[b-oo49uxqn58]  .dei-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dei-modal-grid[b-oo49uxqn58]  .dei-field > label {
    font-size: 12px;
    font-weight: 800;
    color: #4b5563;
}

.dei-modal-grid[b-oo49uxqn58]  .dei-input {
    width: 100%;
    max-width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}
/* _content/ErpPowergest/Presentation/Fiscal/Ejercicios/Pages/EjerciciosPage.razor.rz.scp.css */
.ejercicios-cfg-page[b-7xc5xs1cm3],
.ejercicios-cfg-page *[b-7xc5xs1cm3],
.ejercicios-cfg-page *[b-7xc5xs1cm3]::before,
.ejercicios-cfg-page *[b-7xc5xs1cm3]::after {
    box-sizing: border-box;
}

.ejercicios-cfg-page[b-7xc5xs1cm3] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* HEADER */

.ec-header[b-7xc5xs1cm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: no cede; los botones del CommandBar se repliegan primero. Solo cede cuando el
   CommandBar ya está totalmente replegado (clase host-collapsed que añade el propio CommandBar). */
.ec-header-text[b-7xc5xs1cm3] {
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header.command-bar-host-collapsed .ec-header-text[b-7xc5xs1cm3] {
    flex: 1 1 auto;
}

.ec-title[b-7xc5xs1cm3] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.ec-subtitle[b-7xc5xs1cm3] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. Usa las
   variantes `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover), las
   mismas que Clientes y Movimientos. Al no colgar de `.cform-page`, los tokens --cf-* de esas
   reglas resuelven por sus fallbacks, que son los mismos valores. */
.ec-header-actions[b-7xc5xs1cm3] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.ec-card[b-7xc5xs1cm3] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ec-empty[b-7xc5xs1cm3] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.ec-section-title[b-7xc5xs1cm3] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* MAIN GRID */

.ec-main[b-7xc5xs1cm3] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-7xc5xs1cm3] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.ec-list-head[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-search[b-7xc5xs1cm3] {
    position: relative;
    display: flex;
    align-items: center;
}

.ec-search-icon[b-7xc5xs1cm3] {
    position: absolute;
    left: 9px;
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ec-search-input[b-7xc5xs1cm3] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    color: #1f2937;
    background: #f9fafb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .ec-search-input:focus[b-7xc5xs1cm3] {
        outline: none;
        background: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.ec-list[b-7xc5xs1cm3] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-list[b-7xc5xs1cm3]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-list[b-7xc5xs1cm3]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-list-empty[b-7xc5xs1cm3] {
    color: #9ca3af;
    font-size: 12.5px;
    padding: 12px 4px;
}

.ec-card-item[b-7xc5xs1cm3] {
    width: 100%;
    min-height: 70px;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-card-item:hover[b-7xc5xs1cm3] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .ec-card-item.active[b-7xc5xs1cm3] {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }

.ec-card-item-main[b-7xc5xs1cm3] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ej-card-ico[b-7xc5xs1cm3] {
    font-size: 30px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 11px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ec-card-item-texts[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-card-item-name[b-7xc5xs1cm3] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-card-item-desc[b-7xc5xs1cm3] {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.25;
}

.ec-card-item-side[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

/* BADGES */

.ec-badge[b-7xc5xs1cm3] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-actual[b-7xc5xs1cm3] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.ec-badge-activa[b-7xc5xs1cm3] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ec-badge-inactiva[b-7xc5xs1cm3] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* BOTON ENTRAR */

.ec-entrar[b-7xc5xs1cm3] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 750;
    border-radius: 999px;
    padding: 4px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ec-entrar:hover[b-7xc5xs1cm3] {
        background: #1d4ed8;
    }

/* DETALLE */

.ec-detail-panel[b-7xc5xs1cm3] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* TABS */

.ec-tabs[b-7xc5xs1cm3] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ec-tab[b-7xc5xs1cm3] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.ec-detail-scroll[b-7xc5xs1cm3] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-detail-scroll[b-7xc5xs1cm3]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-detail-scroll[b-7xc5xs1cm3]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* FORM */

.ec-fields[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.ec-field-grid[b-7xc5xs1cm3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.ec-field[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ec-field label[b-7xc5xs1cm3] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input[b-7xc5xs1cm3] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-input:focus[b-7xc5xs1cm3] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ec-input:disabled[b-7xc5xs1cm3] {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

.ec-field-hint[b-7xc5xs1cm3] {
    font-size: 11px;
    color: #9ca3af;
}

/* METADATOS */

.ec-meta-grid[b-7xc5xs1cm3] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.ec-meta[b-7xc5xs1cm3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-meta-label[b-7xc5xs1cm3] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    font-weight: 700;
}

.ec-meta-value[b-7xc5xs1cm3] {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

/* ACCIONES */

.ec-detail-actions[b-7xc5xs1cm3] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.ec-btn[b-7xc5xs1cm3] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .ec-btn:disabled[b-7xc5xs1cm3] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ec-btn-primary[b-7xc5xs1cm3] {
    background: #2563eb;
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-7xc5xs1cm3] {
        background: #1d4ed8;
    }

.ec-btn-ghost[b-7xc5xs1cm3] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .ec-btn-ghost:hover:not(:disabled)[b-7xc5xs1cm3] {
        background: #f9fafb;
    }

.ec-btn-danger[b-7xc5xs1cm3] {
    background: #ffffff;
    color: #b45309;
    border-color: #fcd34d;
}

    .ec-btn-danger:hover:not(:disabled)[b-7xc5xs1cm3] {
        background: #fffbeb;
        border-color: #f59e0b;
    }

.ec-btn-ico[b-7xc5xs1cm3] {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 2px;
}

/* APERTURA / TRASPASO */

.ec-traspaso[b-7xc5xs1cm3] {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-traspaso-head[b-7xc5xs1cm3] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.ec-traspaso-row[b-7xc5xs1cm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-traspaso-text[b-7xc5xs1cm3] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
    flex: 1 1 280px;
}

/* ZONA DE BORRADO (tono atenuado, no alarmante) */

.ec-danger[b-7xc5xs1cm3] {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-danger-head[b-7xc5xs1cm3] {
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
}

.ec-danger-row[b-7xc5xs1cm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-danger-text[b-7xc5xs1cm3] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}

.ec-danger-box[b-7xc5xs1cm3] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ec-danger-warning[b-7xc5xs1cm3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.35;
}

    .ec-danger-warning .material-symbols-rounded[b-7xc5xs1cm3] {
        font-size: 20px;
        flex: 0 0 auto;
        color: #d97706;
    }

/* RESPONSIVE */

@media (max-width: 980px) {
    .ec-main[b-7xc5xs1cm3] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/EstadosContables/Pages/EstadosContablesPage.razor.rz.scp.css */
/* Calco del CSS aislado de TiposRetencionPage (que a su vez calca EjerciciosPage): misma forma y los
   mismos nombres de clase. Va aparte porque aquel CSS es aislado y no se hereda. Lo propio de esta
   pantalla es la TABLA del listado y las acciones por fila. */

.estados-contables-page[b-kym705uub2],
.estados-contables-page *[b-kym705uub2],
.estados-contables-page *[b-kym705uub2]::before,
.estados-contables-page *[b-kym705uub2]::after {
    box-sizing: border-box;
}

.estados-contables-page[b-kym705uub2] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* HEADER */

.ec-header[b-kym705uub2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header-text[b-kym705uub2] {
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header.command-bar-host-collapsed .ec-header-text[b-kym705uub2] {
    flex: 1 1 auto;
}

.ec-title[b-kym705uub2] {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.ec-subtitle[b-kym705uub2] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ec-header-actions[b-kym705uub2] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.ec-card[b-kym705uub2] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ec-empty[b-kym705uub2] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.ec-section-title[b-kym705uub2] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* MAIN GRID — aquí la lista manda (tabla ancha) y el alta es la columna estrecha. */

.ec-main[b-kym705uub2] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-kym705uub2] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.ec-list-head[b-kym705uub2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-year[b-kym705uub2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ec-year label[b-kym705uub2] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input-corto[b-kym705uub2] {
    width: auto;
    min-width: 96px;
}

/* TABLA */

.ec-table-scroll[b-kym705uub2] {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-table-scroll[b-kym705uub2]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ec-table-scroll[b-kym705uub2]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-table[b-kym705uub2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ec-table thead th[b-kym705uub2] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .ec-table tbody td[b-kym705uub2] {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        vertical-align: middle;
    }

    .ec-table tbody tr:hover td[b-kym705uub2] {
        background: #f8fbff;
    }

    .ec-table .num[b-kym705uub2] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .ec-table .acciones[b-kym705uub2] {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

.ec-nombre[b-kym705uub2] {
    font-weight: 700;
    margin-right: 6px;
}

.ec-aviso[b-kym705uub2] {
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.35;
}

/* BADGES */

.ec-badge[b-kym705uub2] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-neutra[b-kym705uub2] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ec-badge-liquidada[b-kym705uub2] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ec-badge-pendiente[b-kym705uub2] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* DETALLE / ALTA */

.ec-detail-panel[b-kym705uub2] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.ec-tabs[b-kym705uub2] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ec-tab[b-kym705uub2] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.ec-detail-scroll[b-kym705uub2] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-detail-scroll[b-kym705uub2]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-detail-scroll[b-kym705uub2]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* FORM */

.ec-fields[b-kym705uub2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-field-grid[b-kym705uub2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.ec-field[b-kym705uub2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ec-field label[b-kym705uub2] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input[b-kym705uub2] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-input:focus[b-kym705uub2] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ec-input:disabled[b-kym705uub2] {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

/* El input del perceptor lo pinta CampoConBuscador (otro componente = otro ámbito de CSS aislado):
   sin ::deep heredaría el aspecto por defecto del navegador y desentonaría con el resto del panel. */
.ec-field[b-kym705uub2]  .ec-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
}

    .ec-field[b-kym705uub2]  .ec-input:focus {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.ec-field-hint[b-kym705uub2] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.35;
}

/* ACCIONES */

.ec-detail-actions[b-kym705uub2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.ec-btn[b-kym705uub2] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .ec-btn:disabled[b-kym705uub2] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ec-btn-mini[b-kym705uub2] {
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 4px;
}

.ec-btn-primary[b-kym705uub2] {
    background: #2563eb;
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-kym705uub2] {
        background: #1d4ed8;
    }

.ec-btn-ghost[b-kym705uub2] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .ec-btn-ghost:hover:not(:disabled)[b-kym705uub2] {
        background: #f9fafb;
    }

.ec-btn-peligro[b-kym705uub2] {
    background: #dc2626;
    color: #ffffff;
}

    .ec-btn-peligro:hover:not(:disabled)[b-kym705uub2] {
        background: #b91c1c;
    }

.ec-icon-btn[b-kym705uub2] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .ec-icon-btn:hover:not(:disabled)[b-kym705uub2] {
        background: #fef2f2;
        color: #dc2626;
    }

    .ec-icon-btn:disabled[b-kym705uub2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ec-icon-btn .material-symbols-rounded[b-kym705uub2] {
        font-size: 19px;
    }

/* RESPONSIVE */

@media (max-width: 1100px) {
    .ec-main[b-kym705uub2] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

/* PROPIO DE ESTA PANTALLA */

/* Los dos estados, uno al lado del otro: el 200 los cruza, y verlos en pestanas obligaria a recordar
   una cifra para compararla con la otra. Por debajo de 1100px se apilan. */
.ec-estados[b-kym705uub2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}

@media (max-width: 1100px) {
    .ec-estados[b-kym705uub2] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ec-cuadres[b-kym705uub2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.ec-badge-ok[b-kym705uub2] {
    background: #dcfce7;
    color: #166534;
}

.ec-badge-mal[b-kym705uub2] {
    background: #fee2e2;
    color: #991b1b;
}

/* Sangria por nivel: 0 seccion/total, 1 epigrafe romano, 2 partida, 3 desglose. */
.ec-nivel-0 > td:first-child[b-kym705uub2] {
    padding-left: 8px;
    font-weight: 800;
}

.ec-nivel-1 > td:first-child[b-kym705uub2] {
    padding-left: 22px;
    font-weight: 700;
}

.ec-nivel-2 > td:first-child[b-kym705uub2] {
    padding-left: 40px;
}

.ec-nivel-3 > td:first-child[b-kym705uub2] {
    padding-left: 58px;
    font-size: 0.94em;
}

.ec-fila-total[b-kym705uub2] {
    background: #f3f4f6;
}

.ec-epigrafe[b-kym705uub2] {
    color: #6b7280;
    margin-right: 6px;
}

.ec-formula[b-kym705uub2] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: #374151;
    overflow-wrap: anywhere;
}

.ec-sin-formula[b-kym705uub2] {
    color: #9ca3af;
    font-style: italic;
}

.ec-fila-error > td[b-kym705uub2] {
    background: #fef2f2;
}

/* _content/ErpPowergest/Presentation/Fiscal/Hub/Pages/ImpuestosHubPage.razor.rz.scp.css */
.impuestos-hub[b-aydsvalhui],
.impuestos-hub *[b-aydsvalhui],
.impuestos-hub *[b-aydsvalhui]::before,
.impuestos-hub *[b-aydsvalhui]::after {
    box-sizing: border-box;
}

.impuestos-hub[b-aydsvalhui] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* CABECERA (mismo patrón visual que el resto de pantallas: cc-header) */

.cc-header[b-aydsvalhui] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Título en dos fases, como en Diario: el bloque no cede y el título va en una línea, así la barra
   ve que falta sitio y pasa a solo iconos y luego al «···». Con la barra replegada del todo
   (command-bar-host-collapsed, la pone el script) el texto envuelve. */
.cc-header > .cc-header-text[b-aydsvalhui] {
    flex: 0 0 auto;
    min-width: 0;
}

.cc-header.command-bar-host-collapsed > .cc-header-text[b-aydsvalhui] {
    flex: 1 1 auto;
}

.cc-eyebrow[b-aydsvalhui] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.cc-title[b-aydsvalhui] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
    white-space: nowrap;
}

.cc-subtitle[b-aydsvalhui] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.cc-header.command-bar-host-collapsed .cc-title[b-aydsvalhui],
.cc-header.command-bar-host-collapsed .cc-subtitle[b-aydsvalhui] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.cc-header[b-aydsvalhui]  .cc-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* TARJETAS DE SECCIÓN */

.cc-card[b-aydsvalhui] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cc-section-title[b-aydsvalhui] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.cc-list-subtitle[b-aydsvalhui] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.cc-empty[b-aydsvalhui] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.cc-error-box[b-aydsvalhui] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* TARJETAS-ENLACE */

.ih-tarjetas[b-aydsvalhui] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* Envoltorio de la tarjeta: existe solo para poder poner la estrella encima del enlace (FUN-121). */
.ih-tarjeta-marco[b-aydsvalhui] {
    position: relative;
}

.ih-fav[b-aydsvalhui] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    /* Apagada solo se ve al pasar por encima o si la pantalla ya es favorita: la tarjeta no puede
       acabar siendo una fila de estrellas grises que compiten con su propio texto. */
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.ih-tarjeta-marco:hover .ih-fav[b-aydsvalhui],
.ih-fav:focus-visible[b-aydsvalhui],
.ih-fav-on[b-aydsvalhui] {
    opacity: 1;
}

.ih-fav-on[b-aydsvalhui] {
    color: #f59e0b;
}

    .ih-fav:hover[b-aydsvalhui] {
        background: #f1f5f9;
        color: #f59e0b;
    }

    .ih-fav:disabled[b-aydsvalhui] {
        cursor: default;
    }

.ih-fav-ico[b-aydsvalhui] {
    font-size: 18px;
    line-height: 1;
}

.ih-tarjeta[b-aydsvalhui] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .ih-tarjeta:hover[b-aydsvalhui] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

.ih-tarjeta-ico[b-aydsvalhui] {
    font-size: 22px;
    line-height: 1;
    color: #2563eb;
}

.ih-tarjeta-texto[b-aydsvalhui] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Hueco para la estrella: sin él, un título largo pasa por debajo. */
.ih-tarjeta-texto[b-aydsvalhui] {
    padding-right: 22px;
}

.ih-tarjeta-titulo[b-aydsvalhui] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.ih-tarjeta-desc[b-aydsvalhui] {
    font-size: 11.5px;
    color: #6b7280;
}

/* BOTONES */

/* RESPONSIVE */

@media (max-width: 1100px) {
    .ih-tarjetas[b-aydsvalhui] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ih-tarjetas[b-aydsvalhui] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/LiquidacionesIva/Pages/LiquidacionesIvaPage.razor.rz.scp.css */
.liq-page[b-h63arwaqiq],
.liq-page *[b-h63arwaqiq],
.liq-page *[b-h63arwaqiq]::before,
.liq-page *[b-h63arwaqiq]::after {
    box-sizing: border-box;
}

.liq-page[b-h63arwaqiq] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       Filas: cabecera, KPIs, listado y barra inferior. La del listado es `1fr` (mínimo automático = su
       contenido): reparte el espacio sobrante cuando sobra, y empuja el alto de la página cuando falta. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
}

.liq-header[b-h63arwaqiq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.liq-heading[b-h63arwaqiq] {
    min-width: 0;
    flex: 0 0 auto;
}

.liq-header.command-bar-host-collapsed .liq-heading[b-h63arwaqiq] {
    flex: 1 1 auto;
}

.liq-title[b-h63arwaqiq] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.liq-subtitle[b-h63arwaqiq] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. Usa las
   variantes `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover), las
   mismas que Clientes y Movimientos. Al no colgar de `.cform-page`, los tokens --cf-* de esas
   reglas resuelven por sus fallbacks, que son los mismos valores. */
.liq-header-actions[b-h63arwaqiq] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.card-panel[b-h63arwaqiq] {
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Sin tarjeta envolvente: el único marco es
   el de la propia tabla (.tp-shell), así que no hay cajas dentro de cajas.

   Las reglas que alcanzan al markup de la tabla van con `::deep`: lo renderiza el componente, y el
   CSS scoped de esta página no lo alcanza por sí solo. */

.liq-tabla[b-h63arwaqiq] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto) el
   contenido no podría empujar la fila `1fr` del grid y la tabla se desplazaría por dentro en vez de
   crecer la página. */
.liq-page[b-h63arwaqiq]  .tp-panel {
    min-height: auto;
}

/* FILA SELECCIONADA
   La tabla no tiene noción de selección: la marca la aporta la página (ClaseFilaExtra) porque es
   quien sabe cuál es la liquidación activa: la que gobierna «Borrar» y «Aceptar». El hover de la
   tabla no debe pisarla, de ahí el `:hover` explícito con el mismo fondo. */
.liq-page[b-h63arwaqiq]  .liq-row-sel > td,
.liq-page[b-h63arwaqiq]  .liq-row-sel:hover > td {
    background: #eff6ff;
}

/* ===== BARRA INFERIOR =====
   Dos grupos: filtros (izquierda) y acciones sobre la selección (derecha). La barra envuelve por
   grupos —`flex-wrap` sobre los dos hijos, no sobre cada control— y las acciones se pegan a la
   derecha con `margin-left:auto`, así que al bajar a su propia fila siguen alineadas a la derecha.
   Esto es lo que sustituye al reparto anterior: una ristra de controles sueltos con `nowrap`, un
   `padding-right` de 78px para reservarles hueco y un `order:1..7` por control en cada media query.
   El `overflow:hidden` también sobra: nada desborda, porque todo tiene por dónde ceder. */

.liq-bottom-bar[b-h63arwaqiq] {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.liq-bottom-filters[b-h63arwaqiq] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Absorbe el ancho sobrante y es lo primero que cede: los botones no se estrujan. */
    flex: 1 1 420px;
    min-width: 0;
}

.liq-bottom-actions[b-h63arwaqiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.liq-searchbox[b-h63arwaqiq] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.liq-search-icon[b-h63arwaqiq] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}

.liq-search-input[b-h63arwaqiq] {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0 12px 0 36px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .liq-search-input:focus[b-h63arwaqiq] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
        background: #fff;
    }

.liq-search-select[b-h63arwaqiq] {
    flex: 0 1 175px;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    outline: none;
}

    .liq-search-select:focus[b-h63arwaqiq] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.liq-check-item[b-h63arwaqiq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

    .liq-check-item input[b-h63arwaqiq] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
    }

.liq-check-disabled[b-h63arwaqiq] {
    opacity: .55;
    cursor: not-allowed;
}

/* BOTONES DE LA BARRA INFERIOR
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Mismo aspecto que las acciones de la cabecera de la ficha de artículo (.cb-ficha, en
   wwwroot/css/articulos.css): contorno gris sobre fondo transparente, icono y texto en línea, y
   ningún relleno de color. El énfasis no lo pone el fondo del botón, lo pone su icono.

   Los estilos de los botones de los MODALES siguen en app.css: son SfButton, y el CSS con scope de
   esta página no alcanza al markup que renderiza Syncfusion. */

.liq-btn[b-h63arwaqiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-family: inherit;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .liq-btn:hover:not(:disabled)[b-h63arwaqiq] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .liq-btn:disabled[b-h63arwaqiq] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.liq-btn-ico[b-h63arwaqiq] {
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1;
    /* El glifo es la ligadura de un texto: sin esto se puede seleccionar al arrastrar. */
    user-select: none;
    -webkit-user-select: none;
}

/* «Borrar» reposa igual que los demás y solo se tiñe de rojo al pasar por encima: ese hover es la
   única señal de que la acción no es reversible. */
.liq-btn-danger:hover:not(:disabled)[b-h63arwaqiq] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* MODAL */

.liq-modal-backdrop[b-h63arwaqiq] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.liq-modal-card[b-h63arwaqiq] {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.liq-modal-card-sm[b-h63arwaqiq] {
    max-width: 440px;
}

.liq-modal-card-lg[b-h63arwaqiq] {
    max-width: 780px;
}

.liq-empty[b-h63arwaqiq] {
    padding: 24px 12px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.liq-modal-header[b-h63arwaqiq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #eef2f7;
}

.liq-modal-kicker[b-h63arwaqiq] {
    font-size: 11px;
    font-weight: 850;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.liq-modal-title[b-h63arwaqiq] {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}

.liq-modal-subtitle[b-h63arwaqiq] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.liq-modal-body[b-h63arwaqiq] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.liq-modal-grid[b-h63arwaqiq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

/* Filas etiqueta + campo */

.liq-form-rows[b-h63arwaqiq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liq-form-row[b-h63arwaqiq] {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
}

    .liq-form-row label[b-h63arwaqiq] {
        font-size: 13px;
        font-weight: 800;
        color: #4b5563;
    }

.liq-field[b-h63arwaqiq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .liq-field label[b-h63arwaqiq] {
        font-size: 12px;
        font-weight: 800;
        color: #4b5563;
    }

.liq-input[b-h63arwaqiq] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .liq-input:focus[b-h63arwaqiq] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.liq-info-box[b-h63arwaqiq] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.liq-error-box[b-h63arwaqiq] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* ===== PREVISUALIZACIÓN (modal «Nueva liquidación») ===== */

.liq-preview-panel[b-h63arwaqiq] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liq-preview-title[b-h63arwaqiq] {
    font-size: 12px;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.liq-preview-loading[b-h63arwaqiq] {
    font-size: 12px;
    color: #6b7280;
}

.liq-preview-grid[b-h63arwaqiq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.liq-preview-item[b-h63arwaqiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 8px 10px;
}

    .liq-preview-item span[b-h63arwaqiq] {
        font-size: 11px;
        color: #6b7280;
        font-weight: 700;
    }

    .liq-preview-item strong[b-h63arwaqiq] {
        font-size: 14px;
        color: #111827;
    }

.liq-preview-resultado strong[b-h63arwaqiq] {
    color: #2563eb;
}

.liq-preview-counts[b-h63arwaqiq] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #475569;
    font-weight: 700;
}

.liq-avisos[b-h63arwaqiq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.liq-aviso-item[b-h63arwaqiq] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

/* ===== DETALLE DE LIQUIDACIÓN ===== */

.liq-detail-meta[b-h63arwaqiq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.liq-detail-table-wrapper[b-h63arwaqiq] {
    overflow-x: auto;
    border: 1px solid #eef2f7;
    border-radius: 12px;
}

.liq-detail-table[b-h63arwaqiq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .liq-detail-table th[b-h63arwaqiq],
    .liq-detail-table td[b-h63arwaqiq] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        white-space: nowrap;
    }

    .liq-detail-table th[b-h63arwaqiq] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
    }

.liq-col-importe[b-h63arwaqiq] {
    text-align: right !important;
}

.liq-col-centrada[b-h63arwaqiq] {
    text-align: center !important;
}

.liq-modal-actions[b-h63arwaqiq] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 18px;
    border-top: 1px solid #eef2f7;
}

/* =========================
   RESPONSIVE
   Desktop queda igual.
========================= */

/* Columna replegable: «IVA a compensar» es la primera (y única) que cae al estrechar; el resto
   identifica el periodo y da el resultado, que es lo que se viene a ver. La clase la lleva la
   cabecera Y sus celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 900px) {
    .liq-page[b-h63arwaqiq]  .liq-col-compensar {
        display: none;
    }
}

/* La barra inferior no necesita puntos de ruptura propios por encima de 640px: al no caber, los
   filtros y las acciones se reparten solos en dos filas (`flex-wrap` + la base de 420px de los
   filtros). Lo que sigue es solo lo que el reparto automático no resuelve. */

@media (max-width: 768px) {
    .liq-page[b-h63arwaqiq] {
        gap: 10px;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */

    .liq-bottom-bar[b-h63arwaqiq] {
        gap: 8px;
        padding: 10px;
    }

    .liq-modal-grid[b-h63arwaqiq] {
        grid-template-columns: 1fr;
    }

    .liq-form-row[b-h63arwaqiq] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .liq-modal-backdrop[b-h63arwaqiq] {
        padding: 14px;
    }

    .liq-modal-card[b-h63arwaqiq] {
        max-height: calc(100dvh - 28px);
    }
}

/* Ya no caben los tres filtros en una línea: el buscador toma la fila entera y «Normalizar» y el
   desplegable se reparten la siguiente. Las acciones pasan a ocupar su fila completa, repartidas a
   partes iguales: a este ancho ya no hay sitio para que se agrupen a la derecha. */
@media (max-width: 640px) {
    .liq-bottom-filters[b-h63arwaqiq] {
        flex-wrap: wrap;
        flex-basis: 100%;
    }

    .liq-searchbox[b-h63arwaqiq] {
        flex: 1 1 100%;
    }

    .liq-check-item[b-h63arwaqiq],
    .liq-search-select[b-h63arwaqiq] {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        justify-content: center;
    }

    .liq-bottom-actions[b-h63arwaqiq] {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .liq-btn[b-h63arwaqiq] {
        flex: 1 1 calc(50% - 4px);
    }
}

@media (max-width: 520px) {
    .liq-page[b-h63arwaqiq] {
        gap: 8px;
    }

    /* El título y el subtítulo escalan con el clamp responsive; no se fija tamaño aquí. */

    .card-panel[b-h63arwaqiq] {
        border-radius: 14px;
        padding: 10px;
    }

    .liq-bottom-bar[b-h63arwaqiq] {
        gap: 8px;
        padding: 10px;
    }

    /* Último recurso: cada filtro toma su propia fila. Los botones NO se apilan (seguirían de dos en
       dos): cuatro botones a fila cada uno dejarían la barra más alta que el propio listado. */
    .liq-check-item[b-h63arwaqiq],
    .liq-search-select[b-h63arwaqiq] {
        flex: 1 1 100%;
    }

    .liq-check-item[b-h63arwaqiq] {
        justify-content: flex-start;
    }

    .liq-modal-backdrop[b-h63arwaqiq] {
        padding: 0;
        align-items: stretch;
    }

    .liq-modal-card[b-h63arwaqiq],
    .liq-modal-card-sm[b-h63arwaqiq] {
        max-width: none;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
    }

    .liq-modal-header[b-h63arwaqiq] {
        padding: 16px 16px 12px;
    }

    .liq-modal-body[b-h63arwaqiq] {
        padding: 14px 16px;
    }

    .liq-modal-actions[b-h63arwaqiq] {
        padding: 12px 16px 16px;
        flex-direction: column;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/LiquidacionesRetencion/Pages/LiquidacionesRetencionPage.razor.rz.scp.css */
.lqr-page[b-pb4qa8jw0a],
.lqr-page *[b-pb4qa8jw0a],
.lqr-page *[b-pb4qa8jw0a]::before,
.lqr-page *[b-pb4qa8jw0a]::after {
    box-sizing: border-box;
}

.lqr-page[b-pb4qa8jw0a] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       Filas: cabecera, selector de modelo, KPIs, listado y barra inferior. La del listado es `1fr`
       (mínimo automático = su contenido): reparte el espacio sobrante cuando sobra, y empuja el alto de
       la página cuando falta. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
}

/* ===== SELECTOR DE ÁMBITO (modelo 111 / 115 / 123) =====
   No es un filtro más de la barra inferior: es el eje de la pantalla, porque cada impreso es una
   autoliquidación distinta con su propio pago. Por eso va arriba, con el peso visual de una pestaña, y
   no escondido entre los controles que solo acotan el listado. */

.lqr-ambitos[b-pb4qa8jw0a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lqr-ambito[b-pb4qa8jw0a] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
    color: #414754;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .lqr-ambito:hover[b-pb4qa8jw0a] {
        background: #f3f4f6;
        border-color: #afb8c1;
    }

.lqr-ambito-activo[b-pb4qa8jw0a],
.lqr-ambito-activo:hover[b-pb4qa8jw0a] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.lqr-ambito-codigo[b-pb4qa8jw0a] {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
}

.lqr-ambito-texto[b-pb4qa8jw0a] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}

.lqr-ambito-activo .lqr-ambito-texto[b-pb4qa8jw0a] {
    color: #2563eb;
}

.lqr-header[b-pb4qa8jw0a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.lqr-heading[b-pb4qa8jw0a] {
    min-width: 0;
    flex: 0 0 auto;
}

.lqr-header.command-bar-host-collapsed .lqr-heading[b-pb4qa8jw0a] {
    flex: 1 1 auto;
}

.lqr-title[b-pb4qa8jw0a] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.lqr-subtitle[b-pb4qa8jw0a] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. Usa las
   variantes `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover), las
   mismas que Clientes y Movimientos. Al no colgar de `.cform-page`, los tokens --cf-* de esas
   reglas resuelven por sus fallbacks, que son los mismos valores. */
.lqr-header-actions[b-pb4qa8jw0a] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.card-panel[b-pb4qa8jw0a] {
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Sin tarjeta envolvente: el único marco es
   el de la propia tabla (.tp-shell), así que no hay cajas dentro de cajas.

   Las reglas que alcanzan al markup de la tabla van con `::deep`: lo renderiza el componente, y el
   CSS scoped de esta página no lo alcanza por sí solo. */

.lqr-tabla[b-pb4qa8jw0a] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto) el
   contenido no podría empujar la fila `1fr` del grid y la tabla se desplazaría por dentro en vez de
   crecer la página. */
.lqr-page[b-pb4qa8jw0a]  .tp-panel {
    min-height: auto;
}

/* FILA SELECCIONADA
   La tabla no tiene noción de selección: la marca la aporta la página (ClaseFilaExtra) porque es
   quien sabe cuál es la liquidación activa: la que gobierna «Borrar» y «Aceptar». El hover de la
   tabla no debe pisarla, de ahí el `:hover` explícito con el mismo fondo. */
.lqr-page[b-pb4qa8jw0a]  .lqr-row-sel > td,
.lqr-page[b-pb4qa8jw0a]  .lqr-row-sel:hover > td {
    background: #eff6ff;
}

/* ===== BARRA INFERIOR =====
   Dos grupos: filtros (izquierda) y acciones sobre la selección (derecha). La barra envuelve por
   grupos —`flex-wrap` sobre los dos hijos, no sobre cada control— y las acciones se pegan a la
   derecha con `margin-left:auto`, así que al bajar a su propia fila siguen alineadas a la derecha.
   Esto es lo que sustituye al reparto anterior: una ristra de controles sueltos con `nowrap`, un
   `padding-right` de 78px para reservarles hueco y un `order:1..7` por control en cada media query.
   El `overflow:hidden` también sobra: nada desborda, porque todo tiene por dónde ceder. */

.lqr-bottom-bar[b-pb4qa8jw0a] {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.lqr-bottom-filters[b-pb4qa8jw0a] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Absorbe el ancho sobrante y es lo primero que cede: los botones no se estrujan. */
    flex: 1 1 420px;
    min-width: 0;
}

.lqr-bottom-actions[b-pb4qa8jw0a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.lqr-searchbox[b-pb4qa8jw0a] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.lqr-search-icon[b-pb4qa8jw0a] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}

.lqr-search-input[b-pb4qa8jw0a] {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0 12px 0 36px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .lqr-search-input:focus[b-pb4qa8jw0a] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
        background: #fff;
    }

.lqr-search-select[b-pb4qa8jw0a] {
    flex: 0 1 175px;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    outline: none;
}

    .lqr-search-select:focus[b-pb4qa8jw0a] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.lqr-check-item[b-pb4qa8jw0a] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 750;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

    .lqr-check-item input[b-pb4qa8jw0a] {
        width: 15px;
        height: 15px;
        accent-color: #2563eb;
    }

.lqr-check-disabled[b-pb4qa8jw0a] {
    opacity: .55;
    cursor: not-allowed;
}

/* BOTONES DE LA BARRA INFERIOR
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Mismo aspecto que las acciones de la cabecera de la ficha de artículo (.cb-ficha, en
   wwwroot/css/articulos.css): contorno gris sobre fondo transparente, icono y texto en línea, y
   ningún relleno de color. El énfasis no lo pone el fondo del botón, lo pone su icono.

   Los estilos de los botones de los MODALES siguen en app.css: son SfButton, y el CSS con scope de
   esta página no alcanza al markup que renderiza Syncfusion. */

.lqr-btn[b-pb4qa8jw0a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-family: inherit;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .lqr-btn:hover:not(:disabled)[b-pb4qa8jw0a] {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .lqr-btn:disabled[b-pb4qa8jw0a] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.lqr-btn-ico[b-pb4qa8jw0a] {
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1;
    /* El glifo es la ligadura de un texto: sin esto se puede seleccionar al arrastrar. */
    user-select: none;
    -webkit-user-select: none;
}

/* «Borrar» reposa igual que los demás y solo se tiñe de rojo al pasar por encima: ese hover es la
   única señal de que la acción no es reversible. */
.lqr-btn-danger:hover:not(:disabled)[b-pb4qa8jw0a] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* MODAL */

.lqr-modal-backdrop[b-pb4qa8jw0a] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lqr-modal-card[b-pb4qa8jw0a] {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.lqr-modal-card-sm[b-pb4qa8jw0a] {
    max-width: 440px;
}

.lqr-modal-card-lg[b-pb4qa8jw0a] {
    max-width: 780px;
}

.lqr-empty[b-pb4qa8jw0a] {
    padding: 24px 12px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.lqr-modal-header[b-pb4qa8jw0a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #eef2f7;
}

.lqr-modal-kicker[b-pb4qa8jw0a] {
    font-size: 11px;
    font-weight: 850;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lqr-modal-title[b-pb4qa8jw0a] {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}

.lqr-modal-subtitle[b-pb4qa8jw0a] {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.lqr-modal-body[b-pb4qa8jw0a] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.lqr-modal-grid[b-pb4qa8jw0a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

/* Filas etiqueta + campo */

.lqr-form-rows[b-pb4qa8jw0a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lqr-form-row[b-pb4qa8jw0a] {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
}

    .lqr-form-row label[b-pb4qa8jw0a] {
        font-size: 13px;
        font-weight: 800;
        color: #4b5563;
    }

.lqr-field[b-pb4qa8jw0a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .lqr-field label[b-pb4qa8jw0a] {
        font-size: 12px;
        font-weight: 800;
        color: #4b5563;
    }

.lqr-input[b-pb4qa8jw0a] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .lqr-input:focus[b-pb4qa8jw0a] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.lqr-info-box[b-pb4qa8jw0a] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.lqr-error-box[b-pb4qa8jw0a] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* ===== PREVISUALIZACIÓN (modal «Nueva liquidación») ===== */

.lqr-preview-panel[b-pb4qa8jw0a] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lqr-preview-title[b-pb4qa8jw0a] {
    font-size: 12px;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.lqr-preview-loading[b-pb4qa8jw0a] {
    font-size: 12px;
    color: #6b7280;
}

.lqr-preview-grid[b-pb4qa8jw0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.lqr-preview-item[b-pb4qa8jw0a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 8px 10px;
}

    .lqr-preview-item span[b-pb4qa8jw0a] {
        font-size: 11px;
        color: #6b7280;
        font-weight: 700;
    }

    .lqr-preview-item strong[b-pb4qa8jw0a] {
        font-size: 14px;
        color: #111827;
    }

.lqr-preview-resultado strong[b-pb4qa8jw0a] {
    color: #2563eb;
}

.lqr-preview-counts[b-pb4qa8jw0a] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #475569;
    font-weight: 700;
}

.lqr-avisos[b-pb4qa8jw0a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lqr-aviso-item[b-pb4qa8jw0a] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

/* ===== DETALLE DE LIQUIDACIÓN ===== */

.lqr-detail-meta[b-pb4qa8jw0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.lqr-detail-table-wrapper[b-pb4qa8jw0a] {
    overflow-x: auto;
    border: 1px solid #eef2f7;
    border-radius: 12px;
}

.lqr-detail-table[b-pb4qa8jw0a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .lqr-detail-table th[b-pb4qa8jw0a],
    .lqr-detail-table td[b-pb4qa8jw0a] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        white-space: nowrap;
    }

    .lqr-detail-table th[b-pb4qa8jw0a] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
    }

.lqr-col-importe[b-pb4qa8jw0a] {
    text-align: right !important;
}

.lqr-col-centrada[b-pb4qa8jw0a] {
    text-align: center !important;
}

.lqr-modal-actions[b-pb4qa8jw0a] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 18px;
    border-top: 1px solid #eef2f7;
}

/* =========================
   RESPONSIVE
   Desktop queda igual.
========================= */

/* Columna replegable: «Perceptores» es la primera (y única) que cae al estrechar; el resto
   identifica el periodo y da el resultado, que es lo que se viene a ver. La clase la lleva la
   cabecera Y sus celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 900px) {
    .lqr-page[b-pb4qa8jw0a]  .lqr-col-perceptores {
        display: none;
    }
}

/* La barra inferior no necesita puntos de ruptura propios por encima de 640px: al no caber, los
   filtros y las acciones se reparten solos en dos filas (`flex-wrap` + la base de 420px de los
   filtros). Lo que sigue es solo lo que el reparto automático no resuelve. */

@media (max-width: 768px) {
    .lqr-page[b-pb4qa8jw0a] {
        gap: 10px;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */

    .lqr-bottom-bar[b-pb4qa8jw0a] {
        gap: 8px;
        padding: 10px;
    }

    .lqr-modal-grid[b-pb4qa8jw0a] {
        grid-template-columns: 1fr;
    }

    .lqr-form-row[b-pb4qa8jw0a] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .lqr-modal-backdrop[b-pb4qa8jw0a] {
        padding: 14px;
    }

    .lqr-modal-card[b-pb4qa8jw0a] {
        max-height: calc(100dvh - 28px);
    }
}

/* Ya no caben los tres filtros en una línea: el buscador toma la fila entera y «Normalizar» y el
   desplegable se reparten la siguiente. Las acciones pasan a ocupar su fila completa, repartidas a
   partes iguales: a este ancho ya no hay sitio para que se agrupen a la derecha. */
@media (max-width: 640px) {
    .lqr-bottom-filters[b-pb4qa8jw0a] {
        flex-wrap: wrap;
        flex-basis: 100%;
    }

    .lqr-searchbox[b-pb4qa8jw0a] {
        flex: 1 1 100%;
    }

    .lqr-check-item[b-pb4qa8jw0a],
    .lqr-search-select[b-pb4qa8jw0a] {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        justify-content: center;
    }

    .lqr-bottom-actions[b-pb4qa8jw0a] {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .lqr-btn[b-pb4qa8jw0a] {
        flex: 1 1 calc(50% - 4px);
    }
}

@media (max-width: 520px) {
    .lqr-page[b-pb4qa8jw0a] {
        gap: 8px;
    }

    /* El título y el subtítulo escalan con el clamp responsive; no se fija tamaño aquí. */

    .card-panel[b-pb4qa8jw0a] {
        border-radius: 14px;
        padding: 10px;
    }

    .lqr-bottom-bar[b-pb4qa8jw0a] {
        gap: 8px;
        padding: 10px;
    }

    /* Último recurso: cada filtro toma su propia fila. Los botones NO se apilan (seguirían de dos en
       dos): cuatro botones a fila cada uno dejarían la barra más alta que el propio listado. */
    .lqr-check-item[b-pb4qa8jw0a],
    .lqr-search-select[b-pb4qa8jw0a] {
        flex: 1 1 100%;
    }

    .lqr-check-item[b-pb4qa8jw0a] {
        justify-content: flex-start;
    }

    .lqr-modal-backdrop[b-pb4qa8jw0a] {
        padding: 0;
        align-items: stretch;
    }

    .lqr-modal-card[b-pb4qa8jw0a],
    .lqr-modal-card-sm[b-pb4qa8jw0a] {
        max-width: none;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
    }

    .lqr-modal-header[b-pb4qa8jw0a] {
        padding: 16px 16px 12px;
    }

    .lqr-modal-body[b-pb4qa8jw0a] {
        padding: 14px 16px;
    }

    .lqr-modal-actions[b-pb4qa8jw0a] {
        padding: 12px 16px 16px;
        flex-direction: column;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo111/Pages/Modelo111Page.razor.rz.scp.css */
.m111-page[b-mcqtm4tpq6],
.m111-page *[b-mcqtm4tpq6],
.m111-page *[b-mcqtm4tpq6]::before,
.m111-page *[b-mcqtm4tpq6]::after {
    box-sizing: border-box;
}

.m111-page[b-mcqtm4tpq6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m111-header[b-mcqtm4tpq6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m111-title[b-mcqtm4tpq6] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m111-subtitle[b-mcqtm4tpq6] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m111-subtitle code[b-mcqtm4tpq6] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m111-card[b-mcqtm4tpq6] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m111-section-title[b-mcqtm4tpq6] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m111-filtros[b-mcqtm4tpq6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m111-field[b-mcqtm4tpq6] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.m111-field-grow[b-mcqtm4tpq6] {
    flex: 1 1 320px;
}

    .m111-field label[b-mcqtm4tpq6] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m111-input[b-mcqtm4tpq6] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m111-input:focus[b-mcqtm4tpq6] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m111-btn[b-mcqtm4tpq6] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m111-btn-primary[b-mcqtm4tpq6] {
    background: #2563eb;
    color: #ffffff;
}

    .m111-btn-primary:hover[b-mcqtm4tpq6] {
        background: #1d4ed8;
    }

    .m111-btn-primary:disabled[b-mcqtm4tpq6] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m111-declarante[b-mcqtm4tpq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m111-lbl[b-mcqtm4tpq6] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* BLOQUES DEL IMPRESO */

.m111-bloques[b-mcqtm4tpq6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m111-bloques th[b-mcqtm4tpq6],
    .m111-bloques td[b-mcqtm4tpq6] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m111-bloques th[b-mcqtm4tpq6] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m111-num[b-mcqtm4tpq6] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m111-casillas[b-mcqtm4tpq6] {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
}

/* KPIS */

.m111-kpis[b-mcqtm4tpq6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m111-kpi[b-mcqtm4tpq6] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m111-kpi-val[b-mcqtm4tpq6] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m111-kpi-lbl[b-mcqtm4tpq6] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m111-avisos[b-mcqtm4tpq6] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m111-avisos-title[b-mcqtm4tpq6] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m111-avisos ul[b-mcqtm4tpq6] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR Y VACIO */

.m111-error[b-mcqtm4tpq6] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m111-vacio[b-mcqtm4tpq6] {
    font-size: 13px;
    color: #475569;
}

/* ACCIONES */

.m111-acciones[b-mcqtm4tpq6] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m111-acciones-nota[b-mcqtm4tpq6] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m111-filtros[b-mcqtm4tpq6] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo115/Pages/Modelo115Page.razor.rz.scp.css */
.m115-page[b-h47uuwsev3],
.m115-page *[b-h47uuwsev3],
.m115-page *[b-h47uuwsev3]::before,
.m115-page *[b-h47uuwsev3]::after {
    box-sizing: border-box;
}

.m115-page[b-h47uuwsev3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m115-header[b-h47uuwsev3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m115-title[b-h47uuwsev3] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m115-subtitle[b-h47uuwsev3] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m115-subtitle code[b-h47uuwsev3] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m115-card[b-h47uuwsev3] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m115-section-title[b-h47uuwsev3] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m115-filtros[b-h47uuwsev3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m115-field[b-h47uuwsev3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.m115-field-grow[b-h47uuwsev3] {
    flex: 1 1 320px;
}

    .m115-field label[b-h47uuwsev3] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m115-input[b-h47uuwsev3] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m115-input:focus[b-h47uuwsev3] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m115-btn[b-h47uuwsev3] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m115-btn-primary[b-h47uuwsev3] {
    background: #2563eb;
    color: #ffffff;
}

    .m115-btn-primary:hover[b-h47uuwsev3] {
        background: #1d4ed8;
    }

    .m115-btn-primary:disabled[b-h47uuwsev3] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m115-declarante[b-h47uuwsev3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m115-lbl[b-h47uuwsev3] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* BLOQUES DEL IMPRESO */

.m115-bloques[b-h47uuwsev3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m115-bloques th[b-h47uuwsev3],
    .m115-bloques td[b-h47uuwsev3] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m115-bloques th[b-h47uuwsev3] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m115-num[b-h47uuwsev3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m115-casillas[b-h47uuwsev3] {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
}

/* KPIS */

.m115-kpis[b-h47uuwsev3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m115-kpi[b-h47uuwsev3] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m115-kpi-val[b-h47uuwsev3] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m115-kpi-lbl[b-h47uuwsev3] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m115-avisos[b-h47uuwsev3] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m115-avisos-title[b-h47uuwsev3] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m115-avisos ul[b-h47uuwsev3] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR Y VACIO */

.m115-error[b-h47uuwsev3] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m115-vacio[b-h47uuwsev3] {
    font-size: 13px;
    color: #475569;
}

/* ACCIONES */

.m115-acciones[b-h47uuwsev3] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m115-acciones-nota[b-h47uuwsev3] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m115-filtros[b-h47uuwsev3] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo123/Pages/Modelo123Page.razor.rz.scp.css */
.m123-page[b-8yk8da2tqd],
.m123-page *[b-8yk8da2tqd],
.m123-page *[b-8yk8da2tqd]::before,
.m123-page *[b-8yk8da2tqd]::after {
    box-sizing: border-box;
}

.m123-page[b-8yk8da2tqd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m123-header[b-8yk8da2tqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m123-title[b-8yk8da2tqd] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m123-subtitle[b-8yk8da2tqd] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m123-subtitle code[b-8yk8da2tqd] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m123-card[b-8yk8da2tqd] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m123-section-title[b-8yk8da2tqd] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m123-filtros[b-8yk8da2tqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m123-field[b-8yk8da2tqd] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.m123-field-grow[b-8yk8da2tqd] {
    flex: 1 1 320px;
}

    .m123-field label[b-8yk8da2tqd] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m123-input[b-8yk8da2tqd] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m123-input:focus[b-8yk8da2tqd] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m123-btn[b-8yk8da2tqd] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m123-btn-primary[b-8yk8da2tqd] {
    background: #2563eb;
    color: #ffffff;
}

    .m123-btn-primary:hover[b-8yk8da2tqd] {
        background: #1d4ed8;
    }

    .m123-btn-primary:disabled[b-8yk8da2tqd] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m123-declarante[b-8yk8da2tqd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m123-lbl[b-8yk8da2tqd] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* BLOQUES DEL IMPRESO */

.m123-bloques[b-8yk8da2tqd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m123-bloques th[b-8yk8da2tqd],
    .m123-bloques td[b-8yk8da2tqd] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m123-bloques th[b-8yk8da2tqd] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m123-num[b-8yk8da2tqd] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m123-casillas[b-8yk8da2tqd] {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
}

/* KPIS */

.m123-kpis[b-8yk8da2tqd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m123-kpi[b-8yk8da2tqd] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m123-kpi-val[b-8yk8da2tqd] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m123-kpi-lbl[b-8yk8da2tqd] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m123-avisos[b-8yk8da2tqd] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m123-avisos-title[b-8yk8da2tqd] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m123-avisos ul[b-8yk8da2tqd] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR Y VACIO */

.m123-error[b-8yk8da2tqd] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m123-vacio[b-8yk8da2tqd] {
    font-size: 13px;
    color: #475569;
}

/* ACCIONES */

.m123-acciones[b-8yk8da2tqd] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m123-acciones-nota[b-8yk8da2tqd] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m123-filtros[b-8yk8da2tqd] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* _content/ErpPowergest/Presentation/Fiscal/Modelo130/Pages/Modelo130Page.razor.rz.scp.css */
.m130-page[b-syh72n2pt5],
.m130-page *[b-syh72n2pt5],
.m130-page *[b-syh72n2pt5]::before,
.m130-page *[b-syh72n2pt5]::after {
    box-sizing: border-box;
}

.m130-page[b-syh72n2pt5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m130-header[b-syh72n2pt5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m130-title[b-syh72n2pt5] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m130-subtitle[b-syh72n2pt5] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m130-subtitle code[b-syh72n2pt5] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m130-card[b-syh72n2pt5] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m130-section-title[b-syh72n2pt5] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 4px;
}

.m130-ayuda[b-syh72n2pt5] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

/* FILTROS */

.m130-filtros[b-syh72n2pt5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m130-field[b-syh72n2pt5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m130-field label[b-syh72n2pt5] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m130-input[b-syh72n2pt5] {
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m130-input:focus[b-syh72n2pt5] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

    .m130-input:disabled[b-syh72n2pt5] {
        background: #f8fafc;
        color: #94a3b8;
    }

/* BOTONES */

.m130-btn[b-syh72n2pt5] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m130-btn-primary[b-syh72n2pt5] {
    background: #2563eb;
    color: #ffffff;
}

    .m130-btn-primary:hover[b-syh72n2pt5] {
        background: #1d4ed8;
    }

    .m130-btn-primary:disabled[b-syh72n2pt5] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m130-declarante[b-syh72n2pt5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 12px;
}

.m130-lbl[b-syh72n2pt5] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* ORIGEN DE LOS DATOS
   Es una banda y no una línea más: con el origen (B) el rendimiento neto está incompleto por
   construcción y quien firme tiene que verlo sin ir a buscarlo. */

.m130-origen[b-syh72n2pt5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.m130-origen-letra[b-syh72n2pt5] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    font-size: 13px;
    color: #ffffff;
}

.m130-origen-a[b-syh72n2pt5] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

    .m130-origen-a .m130-origen-letra[b-syh72n2pt5] {
        background: #059669;
    }

.m130-origen-b[b-syh72n2pt5] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

    .m130-origen-b .m130-origen-letra[b-syh72n2pt5] {
        background: #d97706;
    }

/* TABLA DE CASILLAS */

.m130-casillas[b-syh72n2pt5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

    .m130-casillas th[b-syh72n2pt5],
    .m130-casillas td[b-syh72n2pt5] {
        padding: 5px 8px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        vertical-align: middle;
    }

    .m130-casillas th[b-syh72n2pt5] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m130-col-casilla[b-syh72n2pt5] {
    width: 64px;
}

.m130-chip[b-syh72n2pt5] {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    padding: 2px 6px;
}

.m130-num[b-syh72n2pt5] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Las derivadas las calcula el impreso a partir de otras: se distinguen para que se vea de un
   vistazo cuáles se mueven solas al ajustar una de arriba. */
.m130-derivada[b-syh72n2pt5] {
    font-weight: 700;
    color: #0f172a;
}

.m130-propuesto[b-syh72n2pt5] {
    color: #94a3b8;
}

.m130-definitivo[b-syh72n2pt5] {
    font-weight: 800;
    color: #111827;
}

.m130-fila-ajustada[b-syh72n2pt5] {
    background: #fefce8;
}

    .m130-fila-ajustada .m130-definitivo[b-syh72n2pt5] {
        color: #a16207;
    }

.m130-input-num[b-syh72n2pt5] {
    width: 110px;
    text-align: right;
    height: 28px;
    font-size: 12px;
}

.m130-input-motivo[b-syh72n2pt5] {
    width: 100%;
    min-width: 140px;
    height: 28px;
    font-size: 12px;
}

/* KPIS */

.m130-kpis[b-syh72n2pt5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.m130-kpi[b-syh72n2pt5] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m130-kpi-fuerte[b-syh72n2pt5] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.m130-kpi-val[b-syh72n2pt5] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m130-kpi-lbl[b-syh72n2pt5] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m130-avisos[b-syh72n2pt5] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m130-avisos-title[b-syh72n2pt5] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m130-avisos ul[b-syh72n2pt5] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m130-error[b-syh72n2pt5] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m130-error-inline[b-syh72n2pt5] {
    margin-top: 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 12px 14px;
}

/* ACCIONES */

.m130-acciones[b-syh72n2pt5] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m130-acciones-nota[b-syh72n2pt5] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .m130-filtros[b-syh72n2pt5] {
        flex-direction: column;
        align-items: stretch;
    }

    .m130-casillas[b-syh72n2pt5] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo180/Pages/Modelo180Page.razor.rz.scp.css */
.m180-page[b-eb0zuen1a3],
.m180-page *[b-eb0zuen1a3],
.m180-page *[b-eb0zuen1a3]::before,
.m180-page *[b-eb0zuen1a3]::after {
    box-sizing: border-box;
}

.m180-page[b-eb0zuen1a3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m180-header[b-eb0zuen1a3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m180-title[b-eb0zuen1a3] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m180-subtitle[b-eb0zuen1a3] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m180-card[b-eb0zuen1a3] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m180-section-title[b-eb0zuen1a3] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m180-filtros[b-eb0zuen1a3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m180-field[b-eb0zuen1a3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m180-field label[b-eb0zuen1a3] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m180-input[b-eb0zuen1a3] {
    height: 36px;
    width: 140px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m180-input:focus[b-eb0zuen1a3] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m180-btn[b-eb0zuen1a3] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #1f2937;
}

    .m180-btn:disabled[b-eb0zuen1a3] {
        opacity: 0.55;
        cursor: default;
    }

.m180-btn-primary[b-eb0zuen1a3] {
    background: #2563eb;
    color: #ffffff;
    border-color: transparent;
}

    .m180-btn-primary:hover:not(:disabled)[b-eb0zuen1a3] {
        background: #1d4ed8;
    }

    .m180-btn-primary:disabled[b-eb0zuen1a3] {
        background: #93c5fd;
        opacity: 1;
    }

/* CUADRE — el bloque que decide si este modelo se puede presentar */

.m180-cuadre-cabecera[b-eb0zuen1a3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.m180-estado[b-eb0zuen1a3] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
}

.m180-estado-ok[b-eb0zuen1a3] {
    background: #dcfce7;
    color: #15803d;
}

.m180-estado-ko[b-eb0zuen1a3] {
    background: #fee2e2;
    color: #b91c1c;
}

.m180-cuadre-nota[b-eb0zuen1a3] {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
}

.m180-tick[b-eb0zuen1a3] {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #7f1d1d;
    cursor: pointer;
}

    .m180-tick input[b-eb0zuen1a3] {
        margin-top: 2px;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

/* TABLAS */

.m180-tabla[b-eb0zuen1a3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m180-tabla th[b-eb0zuen1a3],
    .m180-tabla td[b-eb0zuen1a3] {
        padding: 7px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m180-tabla th[b-eb0zuen1a3] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .m180-tabla tfoot td[b-eb0zuen1a3] {
        font-weight: 850;
        color: #111827;
        border-top: 2px solid #e5e7eb;
        border-bottom: none;
    }

.m180-num[b-eb0zuen1a3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m180-fila-ko td[b-eb0zuen1a3] {
    background: #fff7ed;
}

/* DECLARANTE */

.m180-declarante[b-eb0zuen1a3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m180-lbl[b-eb0zuen1a3] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m180-kpis[b-eb0zuen1a3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.m180-kpi[b-eb0zuen1a3] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m180-kpi-val[b-eb0zuen1a3] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m180-kpi-lbl[b-eb0zuen1a3] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m180-avisos[b-eb0zuen1a3] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m180-avisos-title[b-eb0zuen1a3] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m180-avisos ul[b-eb0zuen1a3] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m180-error[b-eb0zuen1a3] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m180-acciones[b-eb0zuen1a3] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.m180-acciones-nota[b-eb0zuen1a3] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m180-filtros[b-eb0zuen1a3] {
        flex-direction: column;
        align-items: stretch;
    }

    .m180-input[b-eb0zuen1a3] {
        width: 100%;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo190/Pages/Modelo190Page.razor.rz.scp.css */
.m190-page[b-i6pzg13pmi],
.m190-page *[b-i6pzg13pmi],
.m190-page *[b-i6pzg13pmi]::before,
.m190-page *[b-i6pzg13pmi]::after {
    box-sizing: border-box;
}

.m190-page[b-i6pzg13pmi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m190-header[b-i6pzg13pmi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m190-title[b-i6pzg13pmi] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m190-subtitle[b-i6pzg13pmi] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m190-card[b-i6pzg13pmi] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m190-section-title[b-i6pzg13pmi] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m190-filtros[b-i6pzg13pmi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m190-field[b-i6pzg13pmi] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m190-field label[b-i6pzg13pmi] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m190-input[b-i6pzg13pmi] {
    height: 36px;
    width: 140px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m190-input:focus[b-i6pzg13pmi] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m190-btn[b-i6pzg13pmi] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #1f2937;
}

    .m190-btn:disabled[b-i6pzg13pmi] {
        opacity: 0.55;
        cursor: default;
    }

.m190-btn-primary[b-i6pzg13pmi] {
    background: #2563eb;
    color: #ffffff;
    border-color: transparent;
}

    .m190-btn-primary:hover:not(:disabled)[b-i6pzg13pmi] {
        background: #1d4ed8;
    }

    .m190-btn-primary:disabled[b-i6pzg13pmi] {
        background: #93c5fd;
        opacity: 1;
    }

/* CUADRE — el bloque que decide si este modelo se puede presentar */

.m190-cuadre-cabecera[b-i6pzg13pmi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.m190-estado[b-i6pzg13pmi] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
}

.m190-estado-ok[b-i6pzg13pmi] {
    background: #dcfce7;
    color: #15803d;
}

.m190-estado-ko[b-i6pzg13pmi] {
    background: #fee2e2;
    color: #b91c1c;
}

.m190-cuadre-nota[b-i6pzg13pmi] {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
}

.m190-tick[b-i6pzg13pmi] {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #7f1d1d;
    cursor: pointer;
}

    .m190-tick input[b-i6pzg13pmi] {
        margin-top: 2px;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

/* TABLAS */

.m190-tabla[b-i6pzg13pmi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m190-tabla th[b-i6pzg13pmi],
    .m190-tabla td[b-i6pzg13pmi] {
        padding: 7px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m190-tabla th[b-i6pzg13pmi] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .m190-tabla tfoot td[b-i6pzg13pmi] {
        font-weight: 850;
        color: #111827;
        border-top: 2px solid #e5e7eb;
        border-bottom: none;
    }

.m190-num[b-i6pzg13pmi] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m190-fila-ko td[b-i6pzg13pmi] {
    background: #fff7ed;
}

/* DECLARANTE */

.m190-declarante[b-i6pzg13pmi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m190-lbl[b-i6pzg13pmi] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m190-kpis[b-i6pzg13pmi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.m190-kpi[b-i6pzg13pmi] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m190-kpi-val[b-i6pzg13pmi] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m190-kpi-lbl[b-i6pzg13pmi] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m190-avisos[b-i6pzg13pmi] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m190-avisos-title[b-i6pzg13pmi] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m190-avisos ul[b-i6pzg13pmi] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m190-error[b-i6pzg13pmi] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m190-acciones[b-i6pzg13pmi] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.m190-acciones-nota[b-i6pzg13pmi] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m190-filtros[b-i6pzg13pmi] {
        flex-direction: column;
        align-items: stretch;
    }

    .m190-input[b-i6pzg13pmi] {
        width: 100%;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo193/Pages/Modelo193Page.razor.rz.scp.css */
.m193-page[b-z69m80gmfb],
.m193-page *[b-z69m80gmfb],
.m193-page *[b-z69m80gmfb]::before,
.m193-page *[b-z69m80gmfb]::after {
    box-sizing: border-box;
}

.m193-page[b-z69m80gmfb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m193-header[b-z69m80gmfb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m193-title[b-z69m80gmfb] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m193-subtitle[b-z69m80gmfb] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m193-card[b-z69m80gmfb] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m193-section-title[b-z69m80gmfb] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m193-filtros[b-z69m80gmfb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m193-field[b-z69m80gmfb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m193-field label[b-z69m80gmfb] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m193-input[b-z69m80gmfb] {
    height: 36px;
    width: 140px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m193-input:focus[b-z69m80gmfb] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m193-btn[b-z69m80gmfb] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #1f2937;
}

    .m193-btn:disabled[b-z69m80gmfb] {
        opacity: 0.55;
        cursor: default;
    }

.m193-btn-primary[b-z69m80gmfb] {
    background: #2563eb;
    color: #ffffff;
    border-color: transparent;
}

    .m193-btn-primary:hover:not(:disabled)[b-z69m80gmfb] {
        background: #1d4ed8;
    }

    .m193-btn-primary:disabled[b-z69m80gmfb] {
        background: #93c5fd;
        opacity: 1;
    }

/* CUADRE — el bloque que decide si este modelo se puede presentar */

.m193-cuadre-cabecera[b-z69m80gmfb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.m193-estado[b-z69m80gmfb] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
}

.m193-estado-ok[b-z69m80gmfb] {
    background: #dcfce7;
    color: #15803d;
}

.m193-estado-ko[b-z69m80gmfb] {
    background: #fee2e2;
    color: #b91c1c;
}

.m193-cuadre-nota[b-z69m80gmfb] {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
}

.m193-tick[b-z69m80gmfb] {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #7f1d1d;
    cursor: pointer;
}

    .m193-tick input[b-z69m80gmfb] {
        margin-top: 2px;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

/* TABLAS */

.m193-tabla[b-z69m80gmfb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
}

    .m193-tabla th[b-z69m80gmfb],
    .m193-tabla td[b-z69m80gmfb] {
        padding: 7px 10px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m193-tabla th[b-z69m80gmfb] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .m193-tabla tfoot td[b-z69m80gmfb] {
        font-weight: 850;
        color: #111827;
        border-top: 2px solid #e5e7eb;
        border-bottom: none;
    }

.m193-num[b-z69m80gmfb] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m193-fila-ko td[b-z69m80gmfb] {
    background: #fff7ed;
}

/* DECLARANTE */

.m193-declarante[b-z69m80gmfb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m193-lbl[b-z69m80gmfb] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m193-kpis[b-z69m80gmfb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.m193-kpi[b-z69m80gmfb] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m193-kpi-val[b-z69m80gmfb] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m193-kpi-lbl[b-z69m80gmfb] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m193-avisos[b-z69m80gmfb] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m193-avisos-title[b-z69m80gmfb] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m193-avisos ul[b-z69m80gmfb] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m193-error[b-z69m80gmfb] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m193-acciones[b-z69m80gmfb] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.m193-acciones-nota[b-z69m80gmfb] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m193-filtros[b-z69m80gmfb] {
        flex-direction: column;
        align-items: stretch;
    }

    .m193-input[b-z69m80gmfb] {
        width: 100%;
    }
}

/* _content/ErpPowergest/Presentation/Fiscal/Modelo200/Pages/Modelo200Page.razor.rz.scp.css */
.m200-page[b-5qd5x9ivfs],
.m200-page *[b-5qd5x9ivfs],
.m200-page *[b-5qd5x9ivfs]::before,
.m200-page *[b-5qd5x9ivfs]::after {
    box-sizing: border-box;
}

.m200-page[b-5qd5x9ivfs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m200-header[b-5qd5x9ivfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m200-title[b-5qd5x9ivfs] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m200-subtitle[b-5qd5x9ivfs] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m200-subtitle code[b-5qd5x9ivfs] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m200-card[b-5qd5x9ivfs] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m200-section-title[b-5qd5x9ivfs] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 4px;
}

.m200-ayuda[b-5qd5x9ivfs] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

/* FILTROS */

.m200-filtros[b-5qd5x9ivfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m200-field[b-5qd5x9ivfs] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m200-field label[b-5qd5x9ivfs] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m200-input[b-5qd5x9ivfs] {
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m200-input:focus[b-5qd5x9ivfs] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

    .m200-input:disabled[b-5qd5x9ivfs] {
        background: #f8fafc;
        color: #94a3b8;
    }

/* BOTONES */

.m200-btn[b-5qd5x9ivfs] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m200-btn-primary[b-5qd5x9ivfs] {
    background: #2563eb;
    color: #ffffff;
}

    .m200-btn-primary:hover[b-5qd5x9ivfs] {
        background: #1d4ed8;
    }

    .m200-btn-primary:disabled[b-5qd5x9ivfs] {
        background: #93c5fd;
        cursor: default;
    }

.m200-btn-peligro[b-5qd5x9ivfs] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.m200-btn-peligro:disabled[b-5qd5x9ivfs] {
    color: #fca5a5;
    cursor: default;
}

/* DECLARANTE */

.m200-declarante[b-5qd5x9ivfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 12px;
}

.m200-lbl[b-5qd5x9ivfs] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* ESTADO DEL CIERRE
   Es lo primero que hay que ver: no es lo mismo un cálculo de hoy que la foto que se presentó, y las
   dos enseñan las mismas cifras. */

.m200-cierre[b-5qd5x9ivfs] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.m200-cierre-abierto[b-5qd5x9ivfs] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.m200-cierre-provisional[b-5qd5x9ivfs] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.m200-cierre-definitivo[b-5qd5x9ivfs] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.m200-cierre-titulo[b-5qd5x9ivfs] {
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 12px;
}

/* ENLACES A LAS PANTALLAS DE LAS QUE SALE TODO */

.m200-fuentes[b-5qd5x9ivfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    margin-bottom: 14px;
}

.m200-fuentes a[b-5qd5x9ivfs] {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.m200-fuentes a:hover[b-5qd5x9ivfs] {
    text-decoration: underline;
}

/* TABLA DE LA CADENA */

.m200-casillas[b-5qd5x9ivfs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

    .m200-casillas th[b-5qd5x9ivfs],
    .m200-casillas td[b-5qd5x9ivfs] {
        padding: 5px 8px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        vertical-align: middle;
    }

    .m200-casillas th[b-5qd5x9ivfs] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m200-col-casilla[b-5qd5x9ivfs] {
    width: 72px;
}

.m200-chip[b-5qd5x9ivfs] {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    padding: 2px 6px;
}

.m200-num[b-5qd5x9ivfs] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.m200-bloque td[b-5qd5x9ivfs] {
    background: #f8fafc;
    font-size: 11px;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-top: 12px;
}

/* Las derivadas las calcula el impreso a partir de otras: se distinguen para que se vea de un vistazo
   cuáles se mueven solas al ajustar una de arriba. */
.m200-derivada[b-5qd5x9ivfs] {
    font-weight: 700;
    color: #0f172a;
}

.m200-propuesto[b-5qd5x9ivfs] {
    color: #94a3b8;
}

.m200-definitivo[b-5qd5x9ivfs] {
    font-weight: 800;
    color: #111827;
}

.m200-fila-ajustada[b-5qd5x9ivfs] {
    background: #fefce8;
}

    .m200-fila-ajustada .m200-definitivo[b-5qd5x9ivfs] {
        color: #a16207;
    }

.m200-explicacion[b-5qd5x9ivfs] {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.m200-input-num[b-5qd5x9ivfs] {
    width: 120px;
    text-align: right;
    height: 28px;
    font-size: 12px;
}

.m200-input-motivo[b-5qd5x9ivfs] {
    width: 100%;
    min-width: 140px;
    height: 28px;
    font-size: 12px;
}

/* ARRASTRES */

.m200-arrastres[b-5qd5x9ivfs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

    .m200-arrastres th[b-5qd5x9ivfs],
    .m200-arrastres td[b-5qd5x9ivfs] {
        padding: 4px 8px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
    }

    .m200-arrastres th[b-5qd5x9ivfs] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
    }

.m200-caducada[b-5qd5x9ivfs] {
    color: #b91c1c;
}

/* KPIS */

.m200-kpis[b-5qd5x9ivfs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.m200-kpi[b-5qd5x9ivfs] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m200-kpi-fuerte[b-5qd5x9ivfs] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.m200-kpi-val[b-5qd5x9ivfs] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m200-kpi-lbl[b-5qd5x9ivfs] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m200-avisos[b-5qd5x9ivfs] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m200-avisos-title[b-5qd5x9ivfs] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m200-avisos ul[b-5qd5x9ivfs] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m200-error[b-5qd5x9ivfs] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m200-error-inline[b-5qd5x9ivfs] {
    margin-top: 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 12px 14px;
}

/* CONFIRMACIÓN DE LAS ÓRDENES QUE NO SE DESHACEN SOLAS */

.m200-confirmar[b-5qd5x9ivfs] {
    margin-top: 14px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #9a3412;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.m200-confirmar-texto[b-5qd5x9ivfs] {
    margin-right: auto;
}

/* ACCIONES */

.m200-acciones[b-5qd5x9ivfs] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.m200-acciones-nota[b-5qd5x9ivfs] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .m200-filtros[b-5qd5x9ivfs] {
        flex-direction: column;
        align-items: stretch;
    }

    .m200-casillas[b-5qd5x9ivfs] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo202/Pages/Modelo202Page.razor.rz.scp.css */
.m202-page[b-n6hdyilxwj],
.m202-page *[b-n6hdyilxwj],
.m202-page *[b-n6hdyilxwj]::before,
.m202-page *[b-n6hdyilxwj]::after {
    box-sizing: border-box;
}

.m202-page[b-n6hdyilxwj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m202-header[b-n6hdyilxwj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m202-title[b-n6hdyilxwj] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m202-subtitle[b-n6hdyilxwj] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.m202-subtitle code[b-n6hdyilxwj] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
}

/* TARJETAS */

.m202-card[b-n6hdyilxwj] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m202-section-title[b-n6hdyilxwj] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 4px;
}

.m202-ayuda[b-n6hdyilxwj] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

/* FILTROS */

.m202-filtros[b-n6hdyilxwj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m202-field[b-n6hdyilxwj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m202-field label[b-n6hdyilxwj] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m202-input[b-n6hdyilxwj] {
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m202-input:focus[b-n6hdyilxwj] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

    .m202-input:disabled[b-n6hdyilxwj] {
        background: #f8fafc;
        color: #94a3b8;
    }

/* BOTONES */

.m202-btn[b-n6hdyilxwj] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m202-btn-primary[b-n6hdyilxwj] {
    background: #2563eb;
    color: #ffffff;
}

    .m202-btn-primary:hover[b-n6hdyilxwj] {
        background: #1d4ed8;
    }

    .m202-btn-primary:disabled[b-n6hdyilxwj] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m202-declarante[b-n6hdyilxwj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 12px;
}

.m202-lbl[b-n6hdyilxwj] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* MODALIDAD DE LIQUIDACIÓN
   Es una banda y no una línea más: el impreso lleva DOS liquidaciones y las mismas casillas a cero
   significan «no aplica» o «sale cero» según por cuál se presente. Quien firme tiene que verlo sin
   ir a buscarlo. */

.m202-modalidad[b-n6hdyilxwj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.m202-modalidad-letra[b-n6hdyilxwj] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    font-size: 13px;
    color: #ffffff;
}

.m202-modalidad-a[b-n6hdyilxwj] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

    .m202-modalidad-a .m202-modalidad-letra[b-n6hdyilxwj] {
        background: #059669;
    }

.m202-modalidad-b[b-n6hdyilxwj] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

    .m202-modalidad-b .m202-modalidad-letra[b-n6hdyilxwj] {
        background: #d97706;
    }

/* TABLA DE CASILLAS */

.m202-casillas[b-n6hdyilxwj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

    .m202-casillas th[b-n6hdyilxwj],
    .m202-casillas td[b-n6hdyilxwj] {
        padding: 5px 8px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        vertical-align: middle;
    }

    .m202-casillas th[b-n6hdyilxwj] {
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

.m202-col-casilla[b-n6hdyilxwj] {
    width: 64px;
}

.m202-chip[b-n6hdyilxwj] {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    padding: 2px 6px;
}

.m202-num[b-n6hdyilxwj] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* SEPARADOR DE BLOQUE
   El 202 tiene cincuenta casillas repartidas en cinco apartados del impreso. Sin el rótulo del
   apartado la tabla es una lista de números y nadie encuentra la casilla que busca. */

.m202-bloque td[b-n6hdyilxwj] {
    background: #f8fafc;
    font-size: 11px;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-top: 12px;
}

/* Las casillas de la modalidad que NO se está liquidando siguen ahí —el fichero las lleva— pero
   apagadas: si se vieran igual, un cero de «no aplica» pasaría por un cero calculado. */
.m202-inactiva[b-n6hdyilxwj] {
    opacity: 0.5;
}

/* Las derivadas las calcula el impreso a partir de otras: se distinguen para que se vea de un
   vistazo cuáles se mueven solas al ajustar una de arriba. */
.m202-derivada[b-n6hdyilxwj] {
    font-weight: 700;
    color: #0f172a;
}

.m202-propuesto[b-n6hdyilxwj] {
    color: #94a3b8;
}

.m202-definitivo[b-n6hdyilxwj] {
    font-weight: 800;
    color: #111827;
}

.m202-fila-ajustada[b-n6hdyilxwj] {
    background: #fefce8;
}

    .m202-fila-ajustada .m202-definitivo[b-n6hdyilxwj] {
        color: #a16207;
    }

.m202-input-num[b-n6hdyilxwj] {
    width: 110px;
    text-align: right;
    height: 28px;
    font-size: 12px;
}

.m202-input-motivo[b-n6hdyilxwj] {
    width: 100%;
    min-width: 140px;
    height: 28px;
    font-size: 12px;
}

/* KPIS */

.m202-kpis[b-n6hdyilxwj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.m202-kpi[b-n6hdyilxwj] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m202-kpi-fuerte[b-n6hdyilxwj] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.m202-kpi-val[b-n6hdyilxwj] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m202-kpi-lbl[b-n6hdyilxwj] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m202-avisos[b-n6hdyilxwj] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m202-avisos-title[b-n6hdyilxwj] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m202-avisos ul[b-n6hdyilxwj] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m202-error[b-n6hdyilxwj] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

.m202-error-inline[b-n6hdyilxwj] {
    margin-top: 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 12px 14px;
}

/* ACCIONES */

.m202-acciones[b-n6hdyilxwj] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m202-acciones-nota[b-n6hdyilxwj] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .m202-filtros[b-n6hdyilxwj] {
        flex-direction: column;
        align-items: stretch;
    }

    .m202-casillas[b-n6hdyilxwj] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo303/Pages/Modelo303Page.razor.rz.scp.css */
.m303-page[b-hb3j668s8c],
.m303-page *[b-hb3j668s8c],
.m303-page *[b-hb3j668s8c]::before,
.m303-page *[b-hb3j668s8c]::after {
    box-sizing: border-box;
}

.m303-page[b-hb3j668s8c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m303-header[b-hb3j668s8c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m303-title[b-hb3j668s8c] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m303-subtitle[b-hb3j668s8c] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m303-card[b-hb3j668s8c] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m303-section-title[b-hb3j668s8c] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m303-filtros[b-hb3j668s8c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m303-field[b-hb3j668s8c] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.m303-field-grow[b-hb3j668s8c] {
    flex: 1 1 320px;
}

    .m303-field label[b-hb3j668s8c] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m303-input[b-hb3j668s8c] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m303-input:focus[b-hb3j668s8c] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m303-btn[b-hb3j668s8c] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m303-btn-primary[b-hb3j668s8c] {
    background: #2563eb;
    color: #ffffff;
}

    .m303-btn-primary:hover[b-hb3j668s8c] {
        background: #1d4ed8;
    }

    .m303-btn-primary:disabled[b-hb3j668s8c] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m303-declarante[b-hb3j668s8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m303-lbl[b-hb3j668s8c] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m303-kpis[b-hb3j668s8c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m303-kpi[b-hb3j668s8c] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m303-kpi-val[b-hb3j668s8c] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m303-kpi-lbl[b-hb3j668s8c] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m303-avisos[b-hb3j668s8c] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m303-avisos-title[b-hb3j668s8c] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m303-avisos ul[b-hb3j668s8c] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m303-error[b-hb3j668s8c] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m303-acciones[b-hb3j668s8c] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m303-acciones-nota[b-hb3j668s8c] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m303-filtros[b-hb3j668s8c] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo340/Pages/Modelo340Page.razor.rz.scp.css */
.m340-page[b-t74fcj8rb1],
.m340-page *[b-t74fcj8rb1],
.m340-page *[b-t74fcj8rb1]::before,
.m340-page *[b-t74fcj8rb1]::after {
    box-sizing: border-box;
}

.m340-page[b-t74fcj8rb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modelo-header[b-t74fcj8rb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.modelo-heading[b-t74fcj8rb1] {
    min-width: 0;
    flex: 0 0 auto;
}

.modelo-header.command-bar-host-collapsed .modelo-heading[b-t74fcj8rb1] {
    flex: 1 1 auto;
}

.modelo-title[b-t74fcj8rb1] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
    overflow-wrap: break-word;
}

.m340-subtitle[b-t74fcj8rb1] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. Usa las
   variantes `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover), las
   mismas que Clientes y Movimientos. Al no colgar de `.cform-page`, los tokens --cf-* de esas
   reglas resuelven por sus fallbacks, que son los mismos valores. */
.modelo-header-actions[b-t74fcj8rb1] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.m340-card[b-t74fcj8rb1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m340-section-title[b-t74fcj8rb1] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m340-filtros[b-t74fcj8rb1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m340-field[b-t74fcj8rb1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m340-field label[b-t74fcj8rb1] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m340-input[b-t74fcj8rb1] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m340-input:focus[b-t74fcj8rb1] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m340-btn[b-t74fcj8rb1] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m340-btn-primary[b-t74fcj8rb1] {
    background: #2563eb;
    color: #ffffff;
}

    .m340-btn-primary:hover[b-t74fcj8rb1] {
        background: #1d4ed8;
    }

    .m340-btn-primary:disabled[b-t74fcj8rb1] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m340-lbl[b-t74fcj8rb1] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

.m340-acciones[b-t74fcj8rb1] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja los botones a la derecha (margin-right auto), igual que en el 190/180. */
.m340-acciones-nota[b-t74fcj8rb1] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

.m340-declarante[b-t74fcj8rb1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

/* PESTAÑAS (subrayado, igual que la ficha de cliente y Definición de IVA)
   La barra (rail continuo de 1px, scroll horizontal y flechas cuando no caben) la aporta el
   componente <ScrollableTabs>; aquí solo se estilan los botones, que conservan el CSS de esta
   página por viajar en su ChildContent. Ya no son una rejilla de cuatro pastillas repartidas al
   ancho: el rail las coloca en fila y las desplaza si no caben. */

.modelo-tabs[b-t74fcj8rb1] {
    min-width: 0;
}

.modelo-tab[b-t74fcj8rb1] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;    /* el subrayado activo solapa el rail de 1px */
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

    .modelo-tab:hover[b-t74fcj8rb1] {
        color: #334155;
    }

    .modelo-tab.active[b-t74fcj8rb1] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .modelo-tab:focus-visible[b-t74fcj8rb1] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

.modelo-tabpanel[b-t74fcj8rb1] {
    min-width: 0;
}

/* KPIS
   La unificación de estilos del grupo fiscal se llevó los contenedores (.m340-kpis y .m340-kpi) y
   dejó solo el valor y la etiqueta: la página que quedó en esta carpeta era la del 347 y no los
   usaba. Vuelven con la página del 340. */

.m340-kpis[b-t74fcj8rb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m340-kpi[b-t74fcj8rb1] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m340-kpi-val[b-t74fcj8rb1] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m340-kpi-lbl[b-t74fcj8rb1] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m340-avisos[b-t74fcj8rb1] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m340-avisos-title[b-t74fcj8rb1] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m340-avisos ul[b-t74fcj8rb1] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m340-error[b-t74fcj8rb1] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

@media (max-width: 980px) {
    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila);
       al faltar espacio son sus botones los que se repliegan al menú «···». */

    /* Las pestañas ya no se reparten el ancho en una rejilla: cuando no caben, el rail las desplaza
       con sus flechas. Aquí solo se apila el contenido. */
    .modelo-intro-grid[b-t74fcj8rb1],
    .modelo-listados-grid[b-t74fcj8rb1],
    .modelo-revision-grid[b-t74fcj8rb1] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo347/Pages/Modelo347Page.razor.rz.scp.css */
.m347-page[b-6cqeukx9a2],
.m347-page *[b-6cqeukx9a2],
.m347-page *[b-6cqeukx9a2]::before,
.m347-page *[b-6cqeukx9a2]::after {
    box-sizing: border-box;
}

.m347-page[b-6cqeukx9a2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m347-header[b-6cqeukx9a2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m347-title[b-6cqeukx9a2] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m347-subtitle[b-6cqeukx9a2] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m347-card[b-6cqeukx9a2] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m347-section-title[b-6cqeukx9a2] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m347-filtros[b-6cqeukx9a2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m347-field[b-6cqeukx9a2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m347-field label[b-6cqeukx9a2] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m347-input[b-6cqeukx9a2] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m347-input:focus[b-6cqeukx9a2] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m347-btn[b-6cqeukx9a2] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m347-btn-primary[b-6cqeukx9a2] {
    background: #2563eb;
    color: #ffffff;
}

    .m347-btn-primary:hover[b-6cqeukx9a2] {
        background: #1d4ed8;
    }

    .m347-btn-primary:disabled[b-6cqeukx9a2] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m347-declarante[b-6cqeukx9a2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m347-lbl[b-6cqeukx9a2] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m347-kpis[b-6cqeukx9a2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m347-kpi[b-6cqeukx9a2] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m347-kpi-val[b-6cqeukx9a2] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m347-kpi-lbl[b-6cqeukx9a2] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m347-avisos[b-6cqeukx9a2] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m347-avisos-title[b-6cqeukx9a2] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m347-avisos ul[b-6cqeukx9a2] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m347-error[b-6cqeukx9a2] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m347-acciones[b-6cqeukx9a2] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja los botones a la derecha (margin-right auto), igual que en el 190/180. */
.m347-acciones-nota[b-6cqeukx9a2] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m347-filtros[b-6cqeukx9a2] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo349/Pages/Modelo349Page.razor.rz.scp.css */
.m349-page[b-a4585g7o2d],
.m349-page *[b-a4585g7o2d],
.m349-page *[b-a4585g7o2d]::before,
.m349-page *[b-a4585g7o2d]::after {
    box-sizing: border-box;
}

.m349-page[b-a4585g7o2d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m349-header[b-a4585g7o2d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m349-title[b-a4585g7o2d] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m349-subtitle[b-a4585g7o2d] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m349-card[b-a4585g7o2d] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m349-section-title[b-a4585g7o2d] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m349-filtros[b-a4585g7o2d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m349-field[b-a4585g7o2d] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m349-field label[b-a4585g7o2d] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m349-input[b-a4585g7o2d] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m349-input:focus[b-a4585g7o2d] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m349-btn[b-a4585g7o2d] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m349-btn-primary[b-a4585g7o2d] {
    background: #2563eb;
    color: #ffffff;
}

    .m349-btn-primary:hover[b-a4585g7o2d] {
        background: #1d4ed8;
    }

    .m349-btn-primary:disabled[b-a4585g7o2d] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m349-declarante[b-a4585g7o2d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m349-lbl[b-a4585g7o2d] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m349-kpis[b-a4585g7o2d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m349-kpi[b-a4585g7o2d] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m349-kpi-val[b-a4585g7o2d] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m349-kpi-lbl[b-a4585g7o2d] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m349-avisos[b-a4585g7o2d] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m349-avisos-title[b-a4585g7o2d] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m349-avisos ul[b-a4585g7o2d] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m349-error[b-a4585g7o2d] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m349-acciones[b-a4585g7o2d] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja los botones a la derecha (margin-right auto), igual que en el 190/180. */
.m349-acciones-nota[b-a4585g7o2d] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m349-filtros[b-a4585g7o2d] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Modelo390/Pages/Modelo390Page.razor.rz.scp.css */
.m390-page[b-bggjx1bjog],
.m390-page *[b-bggjx1bjog],
.m390-page *[b-bggjx1bjog]::before,
.m390-page *[b-bggjx1bjog]::after {
    box-sizing: border-box;
}

.m390-page[b-bggjx1bjog] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.m390-header[b-bggjx1bjog] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.m390-title[b-bggjx1bjog] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.m390-subtitle[b-bggjx1bjog] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* TARJETAS */

.m390-card[b-bggjx1bjog] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.m390-section-title[b-bggjx1bjog] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 12px;
}

/* FILTROS */

.m390-filtros[b-bggjx1bjog] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m390-field[b-bggjx1bjog] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .m390-field label[b-bggjx1bjog] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.m390-input[b-bggjx1bjog] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .m390-input:focus[b-bggjx1bjog] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

/* BOTONES */

.m390-btn[b-bggjx1bjog] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.m390-btn-primary[b-bggjx1bjog] {
    background: #2563eb;
    color: #ffffff;
}

    .m390-btn-primary:hover[b-bggjx1bjog] {
        background: #1d4ed8;
    }

    .m390-btn-primary:disabled[b-bggjx1bjog] {
        background: #93c5fd;
        cursor: default;
    }

/* DECLARANTE */

.m390-declarante[b-bggjx1bjog] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 14px;
}

.m390-lbl[b-bggjx1bjog] {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* KPIS */

.m390-kpis[b-bggjx1bjog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.m390-kpi[b-bggjx1bjog] {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.m390-kpi-val[b-bggjx1bjog] {
    font-size: 18px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.m390-kpi-lbl[b-bggjx1bjog] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

/* AVISOS */

.m390-avisos[b-bggjx1bjog] {
    margin-top: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

.m390-avisos-title[b-bggjx1bjog] {
    font-size: 12px;
    font-weight: 850;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.m390-avisos ul[b-bggjx1bjog] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #92400e;
}

/* ERROR */

.m390-error[b-bggjx1bjog] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}

/* ACCIONES */

.m390-acciones[b-bggjx1bjog] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* La nota empuja a los botones a la derecha y, cuando no cabe, baja entera en vez de partir la fila. */
.m390-acciones-nota[b-bggjx1bjog] {
    margin-right: auto;
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .m390-filtros[b-bggjx1bjog] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Percepciones/Pages/PercepcionesPage.razor.rz.scp.css */
/* Calco del CSS aislado de TiposRetencionPage (que a su vez calca EjerciciosPage): misma forma y los
   mismos nombres de clase. Va aparte porque aquel CSS es aislado y no se hereda. Lo propio de esta
   pantalla es la TABLA del listado y las acciones por fila. */

.percepciones-page[b-fhx9z40uyz],
.percepciones-page *[b-fhx9z40uyz],
.percepciones-page *[b-fhx9z40uyz]::before,
.percepciones-page *[b-fhx9z40uyz]::after {
    box-sizing: border-box;
}

.percepciones-page[b-fhx9z40uyz] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* HEADER */

.ec-header[b-fhx9z40uyz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header-text[b-fhx9z40uyz] {
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header.command-bar-host-collapsed .ec-header-text[b-fhx9z40uyz] {
    flex: 1 1 auto;
}

.ec-title[b-fhx9z40uyz] {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.ec-subtitle[b-fhx9z40uyz] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ec-header-actions[b-fhx9z40uyz] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.ec-card[b-fhx9z40uyz] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ec-empty[b-fhx9z40uyz] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.ec-section-title[b-fhx9z40uyz] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* MAIN GRID — aquí la lista manda (tabla ancha) y el alta es la columna estrecha. */

.ec-main[b-fhx9z40uyz] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-fhx9z40uyz] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.ec-list-head[b-fhx9z40uyz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-year[b-fhx9z40uyz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ec-year label[b-fhx9z40uyz] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input-corto[b-fhx9z40uyz] {
    width: auto;
    min-width: 96px;
}

/* TABLA */

.ec-table-scroll[b-fhx9z40uyz] {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-table-scroll[b-fhx9z40uyz]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ec-table-scroll[b-fhx9z40uyz]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-table[b-fhx9z40uyz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ec-table thead th[b-fhx9z40uyz] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .ec-table tbody td[b-fhx9z40uyz] {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        vertical-align: middle;
    }

    .ec-table tbody tr:hover td[b-fhx9z40uyz] {
        background: #f8fbff;
    }

    .ec-table .num[b-fhx9z40uyz] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .ec-table .acciones[b-fhx9z40uyz] {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

.ec-nombre[b-fhx9z40uyz] {
    font-weight: 700;
    margin-right: 6px;
}

.ec-aviso[b-fhx9z40uyz] {
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.35;
}

/* BADGES */

.ec-badge[b-fhx9z40uyz] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-neutra[b-fhx9z40uyz] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ec-badge-liquidada[b-fhx9z40uyz] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ec-badge-pendiente[b-fhx9z40uyz] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* DETALLE / ALTA */

.ec-detail-panel[b-fhx9z40uyz] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.ec-tabs[b-fhx9z40uyz] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ec-tab[b-fhx9z40uyz] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.ec-detail-scroll[b-fhx9z40uyz] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-detail-scroll[b-fhx9z40uyz]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-detail-scroll[b-fhx9z40uyz]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* FORM */

.ec-fields[b-fhx9z40uyz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-field-grid[b-fhx9z40uyz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.ec-field[b-fhx9z40uyz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ec-field label[b-fhx9z40uyz] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input[b-fhx9z40uyz] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-input:focus[b-fhx9z40uyz] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ec-input:disabled[b-fhx9z40uyz] {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

/* El input del perceptor lo pinta CampoConBuscador (otro componente = otro ámbito de CSS aislado):
   sin ::deep heredaría el aspecto por defecto del navegador y desentonaría con el resto del panel. */
.ec-field[b-fhx9z40uyz]  .ec-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
}

    .ec-field[b-fhx9z40uyz]  .ec-input:focus {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.ec-field-hint[b-fhx9z40uyz] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.35;
}

/* ACCIONES */

.ec-detail-actions[b-fhx9z40uyz] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.ec-btn[b-fhx9z40uyz] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .ec-btn:disabled[b-fhx9z40uyz] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ec-btn-mini[b-fhx9z40uyz] {
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 4px;
}

.ec-btn-primary[b-fhx9z40uyz] {
    background: #2563eb;
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-fhx9z40uyz] {
        background: #1d4ed8;
    }

.ec-btn-ghost[b-fhx9z40uyz] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .ec-btn-ghost:hover:not(:disabled)[b-fhx9z40uyz] {
        background: #f9fafb;
    }

.ec-btn-peligro[b-fhx9z40uyz] {
    background: #dc2626;
    color: #ffffff;
}

    .ec-btn-peligro:hover:not(:disabled)[b-fhx9z40uyz] {
        background: #b91c1c;
    }

.ec-icon-btn[b-fhx9z40uyz] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .ec-icon-btn:hover:not(:disabled)[b-fhx9z40uyz] {
        background: #fef2f2;
        color: #dc2626;
    }

    .ec-icon-btn:disabled[b-fhx9z40uyz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ec-icon-btn .material-symbols-rounded[b-fhx9z40uyz] {
        font-size: 19px;
    }

/* RESPONSIVE */

@media (max-width: 1100px) {
    .ec-main[b-fhx9z40uyz] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/PresentacionAeat/ValidacionAeatPanel.razor.rz.scp.css */
.val-aeat[b-btz3nulf3c],
.val-aeat *[b-btz3nulf3c],
.val-aeat *[b-btz3nulf3c]::before,
.val-aeat *[b-btz3nulf3c]::after {
    box-sizing: border-box;
}

.val-aeat[b-btz3nulf3c] {
    margin-top: 16px;
    border-top: 1px solid #eef2f7;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.val-aeat-cabecera[b-btz3nulf3c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.val-aeat-btn[b-btz3nulf3c] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1f2937;
}

    .val-aeat-btn:hover[b-btz3nulf3c] {
        background: #f1f5f9;
    }

    .val-aeat-btn:disabled[b-btz3nulf3c] {
        color: #94a3b8;
        cursor: default;
    }

/* Presentar es irreversible: el botón se distingue del de validar a propósito, para que no se
   pulse por inercia creyendo que es el de al lado. */
.val-aeat-btn-presentar[b-btz3nulf3c] {
    border-color: #b45309;
    background: #b45309;
    color: #ffffff;
}

    .val-aeat-btn-presentar:hover[b-btz3nulf3c] {
        background: #92400e;
    }

    .val-aeat-btn-presentar:disabled[b-btz3nulf3c] {
        border-color: #cbd5e1;
        background: #e2e8f0;
        color: #94a3b8;
    }

.val-aeat-confirmar[b-btz3nulf3c] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

.val-aeat-confirmar-acciones[b-btz3nulf3c] {
    display: flex;
    gap: 8px;
}

.val-aeat-nota[b-btz3nulf3c] {
    font-size: 12px;
    color: #64748b;
    flex: 1 1 240px;
}

.val-aeat-titulo[b-btz3nulf3c] {
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.val-aeat-ok[b-btz3nulf3c] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
}

.val-aeat-fallo[b-btz3nulf3c] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
}

.val-aeat-errores[b-btz3nulf3c] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 12px;
    padding: 12px 14px;
}

    .val-aeat-errores .val-aeat-titulo[b-btz3nulf3c] {
        color: #b91c1c;
    }

    .val-aeat-errores ul[b-btz3nulf3c] {
        margin: 0;
        padding-left: 18px;
        font-size: 13px;
        color: #991b1b;
    }

.val-aeat-avisos[b-btz3nulf3c] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 12px 14px;
}

    .val-aeat-avisos .val-aeat-titulo[b-btz3nulf3c] {
        color: #b45309;
    }

    .val-aeat-avisos ul[b-btz3nulf3c] {
        margin: 0;
        padding-left: 18px;
        font-size: 13px;
        color: #92400e;
    }

.val-aeat-codigo[b-btz3nulf3c] {
    display: inline-block;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

/* Plan EA5: presentar en la sede cuando la empresa no tiene certificado propio. */
.val-aeat-sede[b-btz3nulf3c] {
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 10px 14px;
}

.val-aeat-sede ol[b-btz3nulf3c] {
    margin: 6px 0 10px;
    padding-left: 20px;
}

.val-aeat-sede a.val-aeat-btn[b-btz3nulf3c] {
    display: inline-block;
    text-decoration: none;
}
/* _content/ErpPowergest/Presentation/Fiscal/Presentaciones/Pages/PresentacionesPage.razor.rz.scp.css */
.pres-page[b-wz83pc5a32],
.pres-page *[b-wz83pc5a32],
.pres-page *[b-wz83pc5a32]::before,
.pres-page *[b-wz83pc5a32]::after {
    box-sizing: border-box;
}

.pres-page[b-wz83pc5a32] {
    padding: 0;   /* como Clientes: el borde lo pone .main-body */
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Cabecera como en Diario: sin flex-wrap (si la barra bajara de línea, su script nunca vería que falta
   sitio). El bloque del título no cede y el título va en una línea, así la barra pasa a solo icono y
   al «···» antes de aplastarlo; con la barra replegada del todo, el texto envuelve. */
.pres-header[b-wz83pc5a32] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.pres-header > .pres-header-text[b-wz83pc5a32] {
    flex: 0 0 auto;
    min-width: 0;
}

.pres-header.command-bar-host-collapsed > .pres-header-text[b-wz83pc5a32] {
    flex: 1 1 auto;
}

.pres-title[b-wz83pc5a32] {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    color: #0f172a;
    white-space: nowrap;
}

.pres-subtitle[b-wz83pc5a32] {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
    max-width: 760px;
}

.pres-header.command-bar-host-collapsed .pres-title[b-wz83pc5a32] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera (lo pinta otro componente, de ahí el ::deep): su ancho, a la derecha. */
.pres-header[b-wz83pc5a32]  .pres-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.pres-card[b-wz83pc5a32] {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
}

.pres-filtros[b-wz83pc5a32] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
}

.pres-field[b-wz83pc5a32] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .pres-field label[b-wz83pc5a32] {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #64748b;
    }

.pres-input[b-wz83pc5a32] {
    height: 34px;
    min-width: 160px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    background: #ffffff;
    color: #0f172a;
}

.pres-btn[b-wz83pc5a32] {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1f2937;
    white-space: nowrap;
}

    .pres-btn:hover[b-wz83pc5a32] {
        background: #f1f5f9;
    }

    .pres-btn:disabled[b-wz83pc5a32] {
        color: #94a3b8;
        cursor: default;
    }

/* Presentar no se deshace. El botón lo dice antes de que alguien lo lea. */
.pres-btn-peligro[b-wz83pc5a32] {
    border-color: #b45309;
    background: #b45309;
    color: #ffffff;
}

    .pres-btn-peligro:hover[b-wz83pc5a32] {
        background: #92400e;
    }

    .pres-btn-peligro:disabled[b-wz83pc5a32] {
        border-color: #cbd5e1;
        background: #e2e8f0;
        color: #94a3b8;
    }

/* En una fila sin confirmar, consultar no es una opción más: es lo único que se puede hacer. */
.pres-btn-aviso[b-wz83pc5a32] {
    border-color: #b45309;
    color: #b45309;
}

.pres-error[b-wz83pc5a32] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.pres-empty[b-wz83pc5a32] {
    padding: 22px 4px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

.pres-table[b-wz83pc5a32] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .pres-table th[b-wz83pc5a32] {
        text-align: left;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .pres-table td[b-wz83pc5a32] {
        border-bottom: 1px solid #f1f5f9;
        padding: 9px 10px;
        vertical-align: top;
    }

.pres-modelo[b-wz83pc5a32] {
    font-weight: 850;
    color: #0f172a;
}

.pres-fecha[b-wz83pc5a32],
.pres-csv[b-wz83pc5a32] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pres-csv[b-wz83pc5a32] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.pres-detalle[b-wz83pc5a32] {
    color: #475569;
    font-size: 12px;
    max-width: 380px;
}

.pres-acciones-col[b-wz83pc5a32] {
    width: 1%;
}

.pres-acciones[b-wz83pc5a32] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.pres-confirmar[b-wz83pc5a32] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 6px 10px;
}

.pres-badge[b-wz83pc5a32] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pres-badge-ok[b-wz83pc5a32] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.pres-badge-ko[b-wz83pc5a32] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* «Sin confirmar» no es verde ni rojo a propósito: no se sabe cómo acabó, y el color no debe
   sugerir un desenlace que nadie conoce. */
.pres-badge-duda[b-wz83pc5a32] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.pres-badge-cola[b-wz83pc5a32] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.pres-badge-neutro[b-wz83pc5a32] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

/* El estado que tiene la AEAT, debajo del nuestro y en tono menor: informa, no manda. Solo aparece
   en las informativas, que son las únicas cuyo envío vive también al otro lado. */
.pres-remoto[b-wz83pc5a32] {
    display: block;
    margin-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: #64748b;
}

/* Cuántos declarados pasaron y cuántos no. La cifra roja es la que decide si presentar dejaría
   gente fuera, así que se ve sin tener que abrir nada. */
.pres-declarados[b-wz83pc5a32] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
}

.pres-ok[b-wz83pc5a32] {
    color: #15803d;
    font-weight: 800;
}

.pres-ko[b-wz83pc5a32] {
    margin-left: 8px;
    color: #b91c1c;
    font-weight: 800;
}

.pres-modal-fondo[b-wz83pc5a32] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.pres-modal[b-wz83pc5a32] {
    background: #ffffff;
    border-radius: 14px;
    width: min(900px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pres-modal-cabecera[b-wz83pc5a32] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    color: #0f172a;
}

.pres-modal-cuerpo[b-wz83pc5a32] {
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}
/* _content/ErpPowergest/Presentation/Fiscal/PresentacionIvas/Pages/PresentacionIvaPage.razor.rz.scp.css */
.presentacion-iva-page[b-kyapfojn5d] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
}

.piva-header[b-kyapfojn5d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.piva-title[b-kyapfojn5d] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.piva-subtitle[b-kyapfojn5d] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

.piva-header-actions[b-kyapfojn5d],
.piva-panel-header[b-kyapfojn5d] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.piva-panel-header[b-kyapfojn5d] {
    align-items: flex-start;
    justify-content: space-between;
}

.card-panel[b-kyapfojn5d] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.piva-summary-panel[b-kyapfojn5d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.piva-kpi-card[b-kyapfojn5d] {
    background: #ffffff;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    min-height: 96px;
}

.piva-kpi-head[b-kyapfojn5d] {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.piva-kpi-card-blue .piva-kpi-head[b-kyapfojn5d] {
    background: linear-gradient(90deg, #3b82f6 0%, #2f74e7 100%);
}

.piva-kpi-card-green .piva-kpi-head[b-kyapfojn5d] {
    background: linear-gradient(90deg, #22c55e 0%, #5fb84c 100%);
}

.piva-kpi-card-orange .piva-kpi-head[b-kyapfojn5d] {
    background: linear-gradient(90deg, #f59e0b 0%, #ee9b12 100%);
}

.piva-kpi-card-purple .piva-kpi-head[b-kyapfojn5d] {
    background: linear-gradient(90deg, #8b5cf6 0%, #9a74ea 100%);
}

.piva-kpi-body[b-kyapfojn5d] {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.piva-kpi-value[b-kyapfojn5d] {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
}

.piva-kpi-value-text[b-kyapfojn5d] {
    font-size: 18px;
}

.piva-kpi-foot[b-kyapfojn5d] {
    font-size: 12px;
    color: #8b95a7;
    line-height: 1.3;
}

.piva-tabs-panel[b-kyapfojn5d] {
    padding: 10px;
}

.piva-tabs[b-kyapfojn5d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.piva-tab-btn[b-kyapfojn5d] {
    height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #4b5563;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .piva-tab-btn:hover[b-kyapfojn5d] {
        background: #f8fafc;
    }

    .piva-tab-btn.active[b-kyapfojn5d] {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

.piva-panel[b-kyapfojn5d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    flex: 1 0 auto;
}

.piva-panel-subtitle[b-kyapfojn5d] {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.piva-check-grid[b-kyapfojn5d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.piva-check-item[b-kyapfojn5d] {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

    .piva-check-item input[b-kyapfojn5d] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

.piva-warning-box[b-kyapfojn5d] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 12px;
    padding: 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.piva-grid.e-grid[b-kyapfojn5d] {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.piva-liquidacion-grid[b-kyapfojn5d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.piva-field[b-kyapfojn5d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .piva-field label[b-kyapfojn5d] {
        font-size: 12px;
        font-weight: 800;
        color: #4b5563;
    }

.piva-input[b-kyapfojn5d] {
    width: 100%;
    max-width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
}

    .piva-input:focus[b-kyapfojn5d] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.piva-result-box[b-kyapfojn5d] {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .piva-result-box span[b-kyapfojn5d] {
        display: block;
        font-size: 12px;
        color: #1d4ed8;
        font-weight: 800;
    }

    .piva-result-box strong[b-kyapfojn5d] {
        display: block;
        margin-top: 4px;
        font-size: 24px;
        color: #111827;
        font-weight: 900;
    }

.piva-primary-btn[b-kyapfojn5d],
.piva-action-btn[b-kyapfojn5d] {
    height: 42px;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.piva-primary-btn[b-kyapfojn5d] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .piva-primary-btn:hover[b-kyapfojn5d] {
        background: #1d4ed8;
    }

.piva-action-btn[b-kyapfojn5d] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .piva-action-btn:hover[b-kyapfojn5d] {
        background: #f8fafc;
    }

@media (max-width: 1280px) {
    .piva-summary-panel[b-kyapfojn5d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .piva-liquidacion-grid[b-kyapfojn5d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .piva-tabs[b-kyapfojn5d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .piva-header[b-kyapfojn5d],
    .piva-panel-header[b-kyapfojn5d],
    .piva-result-box[b-kyapfojn5d] {
        flex-direction: column;
        align-items: stretch;
    }

    .piva-summary-panel[b-kyapfojn5d],
    .piva-check-grid[b-kyapfojn5d],
    .piva-liquidacion-grid[b-kyapfojn5d] {
        grid-template-columns: 1fr;
    }

    .piva-header-actions[b-kyapfojn5d],
    .piva-primary-btn[b-kyapfojn5d],
    .piva-action-btn[b-kyapfojn5d] {
        width: 100%;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/RegistroIva/Pages/RegistroIvaPage.razor.rz.scp.css */
.ri-page[b-ccre48h51b],
.ri-page *[b-ccre48h51b],
.ri-page *[b-ccre48h51b]::before,
.ri-page *[b-ccre48h51b]::after {
    box-sizing: border-box;
}

.ri-page[b-ccre48h51b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.ri-header[b-ccre48h51b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ri-title[b-ccre48h51b] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.ri-subtitle[b-ccre48h51b] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

/* PESTAÑAS */

.ri-tabs[b-ccre48h51b] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ri-tab[b-ccre48h51b] {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .ri-tab:hover[b-ccre48h51b] {
        color: #1f2937;
    }

.ri-tab-activo[b-ccre48h51b] {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
}

/* TARJETAS */

.ri-card[b-ccre48h51b] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ri-section-title[b-ccre48h51b] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 10px;
}

/* FILTROS */

.ri-filtros[b-ccre48h51b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.ri-field[b-ccre48h51b] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ri-field label[b-ccre48h51b] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.ri-input[b-ccre48h51b] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .ri-input:focus[b-ccre48h51b] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.ri-check-item[b-ccre48h51b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    padding-bottom: 6px;
}

/* LISTADO */

.ri-results-bar[b-ccre48h51b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.ri-empty[b-ccre48h51b] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* TABLA */

.ri-grid-wrapper[b-ccre48h51b] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.ri-table[b-ccre48h51b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ri-table thead th[b-ccre48h51b] {
        position: sticky;
        top: 0;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .ri-table tbody td[b-ccre48h51b] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        white-space: nowrap;
    }

    .ri-table tbody tr:last-child td[b-ccre48h51b] {
        border-bottom: 0;
    }

.ri-row:hover[b-ccre48h51b] {
    background: #f8fbff;
}

.ri-row-total td[b-ccre48h51b] {
    font-weight: 850;
    background: #f8fafc;
}

.ri-col-centrada[b-ccre48h51b] {
    text-align: center;
}

.ri-col-importe[b-ccre48h51b] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ri-table thead .ri-col-importe[b-ccre48h51b] {
    text-align: right;
}

.ri-table thead .ri-col-centrada[b-ccre48h51b] {
    text-align: center;
}

/* BADGES */

.ri-badge[b-ccre48h51b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ri-badge-pendiente[b-ccre48h51b] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.ri-badge-liquidado[b-ccre48h51b] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.ri-badge-rect[b-ccre48h51b] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .ri-filtros[b-ccre48h51b] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/SociedadesEjercicio/Pages/SociedadesEjercicioPage.razor.rz.scp.css */
/* Calco del CSS aislado de TiposRetencionPage (que a su vez calca EjerciciosPage): misma forma y los
   mismos nombres de clase. Va aparte porque aquel CSS es aislado y no se hereda. Lo propio de esta
   pantalla es la TABLA del listado y las acciones por fila. */

.sociedades-ejercicio-page[b-han5gc8tcs],
.sociedades-ejercicio-page *[b-han5gc8tcs],
.sociedades-ejercicio-page *[b-han5gc8tcs]::before,
.sociedades-ejercicio-page *[b-han5gc8tcs]::after {
    box-sizing: border-box;
}

.sociedades-ejercicio-page[b-han5gc8tcs] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* HEADER */

.ec-header[b-han5gc8tcs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header-text[b-han5gc8tcs] {
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header.command-bar-host-collapsed .ec-header-text[b-han5gc8tcs] {
    flex: 1 1 auto;
}

.ec-title[b-han5gc8tcs] {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.ec-subtitle[b-han5gc8tcs] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ec-header-actions[b-han5gc8tcs] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.ec-card[b-han5gc8tcs] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ec-empty[b-han5gc8tcs] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.ec-section-title[b-han5gc8tcs] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* MAIN GRID — aquí la lista manda (tabla ancha) y el alta es la columna estrecha. */

.ec-main[b-han5gc8tcs] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-han5gc8tcs] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.ec-list-head[b-han5gc8tcs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-year[b-han5gc8tcs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ec-year label[b-han5gc8tcs] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input-corto[b-han5gc8tcs] {
    width: auto;
    min-width: 96px;
}

/* TABLA */

.ec-table-scroll[b-han5gc8tcs] {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-table-scroll[b-han5gc8tcs]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ec-table-scroll[b-han5gc8tcs]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-table[b-han5gc8tcs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ec-table thead th[b-han5gc8tcs] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .ec-table tbody td[b-han5gc8tcs] {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        vertical-align: middle;
    }

    .ec-table tbody tr:hover td[b-han5gc8tcs] {
        background: #f8fbff;
    }

    .ec-table .num[b-han5gc8tcs] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .ec-table .acciones[b-han5gc8tcs] {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

.ec-nombre[b-han5gc8tcs] {
    font-weight: 700;
    margin-right: 6px;
}

.ec-aviso[b-han5gc8tcs] {
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.35;
}

/* BADGES */

.ec-badge[b-han5gc8tcs] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-neutra[b-han5gc8tcs] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ec-badge-liquidada[b-han5gc8tcs] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ec-badge-pendiente[b-han5gc8tcs] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* DETALLE / ALTA */

.ec-detail-panel[b-han5gc8tcs] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.ec-tabs[b-han5gc8tcs] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ec-tab[b-han5gc8tcs] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.ec-detail-scroll[b-han5gc8tcs] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-detail-scroll[b-han5gc8tcs]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-detail-scroll[b-han5gc8tcs]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* FORM */

.ec-fields[b-han5gc8tcs] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-field-grid[b-han5gc8tcs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.ec-field[b-han5gc8tcs] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ec-field label[b-han5gc8tcs] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-input[b-han5gc8tcs] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-input:focus[b-han5gc8tcs] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ec-input:disabled[b-han5gc8tcs] {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

/* El input del perceptor lo pinta CampoConBuscador (otro componente = otro ámbito de CSS aislado):
   sin ::deep heredaría el aspecto por defecto del navegador y desentonaría con el resto del panel. */
.ec-field[b-han5gc8tcs]  .ec-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
}

    .ec-field[b-han5gc8tcs]  .ec-input:focus {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.ec-field-hint[b-han5gc8tcs] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.35;
}

/* ACCIONES */

.ec-detail-actions[b-han5gc8tcs] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.ec-btn[b-han5gc8tcs] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .ec-btn:disabled[b-han5gc8tcs] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ec-btn-mini[b-han5gc8tcs] {
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 4px;
}

.ec-btn-primary[b-han5gc8tcs] {
    background: #2563eb;
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-han5gc8tcs] {
        background: #1d4ed8;
    }

.ec-btn-ghost[b-han5gc8tcs] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .ec-btn-ghost:hover:not(:disabled)[b-han5gc8tcs] {
        background: #f9fafb;
    }

.ec-btn-peligro[b-han5gc8tcs] {
    background: #dc2626;
    color: #ffffff;
}

    .ec-btn-peligro:hover:not(:disabled)[b-han5gc8tcs] {
        background: #b91c1c;
    }

.ec-icon-btn[b-han5gc8tcs] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .ec-icon-btn:hover:not(:disabled)[b-han5gc8tcs] {
        background: #fef2f2;
        color: #dc2626;
    }

    .ec-icon-btn:disabled[b-han5gc8tcs] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ec-icon-btn .material-symbols-rounded[b-han5gc8tcs] {
        font-size: 19px;
    }

/* RESPONSIVE */

@media (max-width: 1100px) {
    .ec-main[b-han5gc8tcs] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

/* PROPIO DE ESTA PANTALLA */

.ec-tabs .ec-tab[b-han5gc8tcs] {
    cursor: pointer;
}

.ec-badge-aumenta[b-han5gc8tcs] {
    background: #fee2e2;
    color: #991b1b;
}

.ec-badge-disminuye[b-han5gc8tcs] {
    background: #dcfce7;
    color: #166534;
}

.ec-badge-caducada[b-han5gc8tcs] {
    background: #fef3c7;
    color: #92400e;
}

.ec-resumen[b-han5gc8tcs] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.ec-dato[b-han5gc8tcs] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 150px;
}

.ec-dato-rotulo[b-han5gc8tcs] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.ec-dato-valor[b-han5gc8tcs] {
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

/* _content/ErpPowergest/Presentation/Fiscal/TiposRetencion/Pages/TiposRetencionPage.razor.rz.scp.css */
/* Calco del CSS aislado de EjerciciosPage: misma forma (lista a la izquierda, ficha a la derecha) y
   los mismos nombres de clase. Va aparte porque el CSS de aquella página es aislado y no se hereda. */

.tipos-ret-page[b-adbqe813nk],
.tipos-ret-page *[b-adbqe813nk],
.tipos-ret-page *[b-adbqe813nk]::before,
.tipos-ret-page *[b-adbqe813nk]::after {
    box-sizing: border-box;
}

.tipos-ret-page[b-adbqe813nk] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* HEADER */

.ec-header[b-adbqe813nk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: no cede; los botones del CommandBar se repliegan primero. Solo cede cuando el
   CommandBar ya está totalmente replegado (clase host-collapsed que añade el propio CommandBar). */
.ec-header-text[b-adbqe813nk] {
    min-width: 0;
    flex: 0 0 auto;
}

.ec-header.command-bar-host-collapsed .ec-header-text[b-adbqe813nk] {
    flex: 1 1 auto;
}

.ec-title[b-adbqe813nk] {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.ec-subtitle[b-adbqe813nk] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ec-header-actions[b-adbqe813nk] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.ec-card[b-adbqe813nk] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ec-empty[b-adbqe813nk] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.ec-section-title[b-adbqe813nk] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* MAIN GRID */

.ec-main[b-adbqe813nk] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.ec-list-panel[b-adbqe813nk] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.ec-list-head[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-search[b-adbqe813nk] {
    position: relative;
    display: flex;
    align-items: center;
}

.ec-search-icon[b-adbqe813nk] {
    position: absolute;
    left: 9px;
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ec-search-input[b-adbqe813nk] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    color: #1f2937;
    background: #f9fafb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .ec-search-input:focus[b-adbqe813nk] {
        outline: none;
        background: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.ec-list[b-adbqe813nk] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-list[b-adbqe813nk]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-list[b-adbqe813nk]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.ec-list-empty[b-adbqe813nk] {
    color: #9ca3af;
    font-size: 12.5px;
    padding: 12px 4px;
}

.ec-card-item[b-adbqe813nk] {
    width: 100%;
    min-height: 70px;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-card-item:hover[b-adbqe813nk] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .ec-card-item.active[b-adbqe813nk] {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }

.ec-card-item-main[b-adbqe813nk] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.tr-card-ico[b-adbqe813nk] {
    font-size: 30px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 11px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ec-card-item-texts[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-card-item-name[b-adbqe813nk] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-card-item-desc[b-adbqe813nk] {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ec-card-item-side[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

/* BADGES */

.ec-badge[b-adbqe813nk] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-badge-neutra[b-adbqe813nk] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ec-badge-activa[b-adbqe813nk] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ec-badge-inactiva[b-adbqe813nk] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* DETALLE */

.ec-detail-panel[b-adbqe813nk] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* TABS */

.ec-tabs[b-adbqe813nk] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ec-tab[b-adbqe813nk] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.ec-detail-scroll[b-adbqe813nk] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ec-detail-scroll[b-adbqe813nk]::-webkit-scrollbar {
        width: 6px;
    }

    .ec-detail-scroll[b-adbqe813nk]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* FORM */

.ec-fields[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.ec-field-grid[b-adbqe813nk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.ec-field[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ec-field label[b-adbqe813nk] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.ec-check[b-adbqe813nk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-input[b-adbqe813nk] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ec-input:focus[b-adbqe813nk] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ec-input:disabled[b-adbqe813nk] {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

.ec-field-hint[b-adbqe813nk] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.35;
}

/* METADATOS */

.ec-meta-grid[b-adbqe813nk] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.ec-meta[b-adbqe813nk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-meta-label[b-adbqe813nk] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    font-weight: 700;
}

.ec-meta-value[b-adbqe813nk] {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

/* ACCIONES */

.ec-detail-actions[b-adbqe813nk] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.ec-btn[b-adbqe813nk] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .ec-btn:disabled[b-adbqe813nk] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ec-btn-primary[b-adbqe813nk] {
    background: #2563eb;
    color: #ffffff;
}

    .ec-btn-primary:hover:not(:disabled)[b-adbqe813nk] {
        background: #1d4ed8;
    }

.ec-btn-ghost[b-adbqe813nk] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .ec-btn-ghost:hover:not(:disabled)[b-adbqe813nk] {
        background: #f9fafb;
    }

/* RESPONSIVE */

@media (max-width: 980px) {
    .ec-main[b-adbqe813nk] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}
/* _content/ErpPowergest/Presentation/Fiscal/Validacion/Pages/ValidacionFiscalPage.razor.rz.scp.css */
.vf-page[b-elo4alaws4],
.vf-page *[b-elo4alaws4],
.vf-page *[b-elo4alaws4]::before,
.vf-page *[b-elo4alaws4]::after {
    box-sizing: border-box;
}

.vf-page[b-elo4alaws4] {
    padding: 18px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* CABECERA */

.vf-header[b-elo4alaws4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.vf-title[b-elo4alaws4] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.vf-subtitle[b-elo4alaws4] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    max-width: 820px;
    line-height: 1.5;
}

/* TARJETAS */

.vf-card[b-elo4alaws4] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.vf-section-title[b-elo4alaws4] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.vf-ayuda[b-elo4alaws4] {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    max-width: 820px;
    line-height: 1.5;
}

/* CONTROLES */

.vf-filtros[b-elo4alaws4] {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.vf-field[b-elo4alaws4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .vf-field label[b-elo4alaws4] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.vf-input[b-elo4alaws4] {
    height: 36px;
    width: 120px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
    font-variant-numeric: tabular-nums;
}

    .vf-input:focus[b-elo4alaws4] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.vf-check[b-elo4alaws4] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}

/* BOTONES */

.vf-btn[b-elo4alaws4] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1f2937;
    white-space: nowrap;
}

    .vf-btn:hover[b-elo4alaws4] {
        background: #f1f5f9;
    }

    .vf-btn:disabled[b-elo4alaws4] {
        color: #94a3b8;
        background: #f8fafc;
        cursor: default;
    }

.vf-btn-primary[b-elo4alaws4] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

    .vf-btn-primary:hover[b-elo4alaws4] {
        background: #1d4ed8;
    }

    .vf-btn-primary:disabled[b-elo4alaws4] {
        background: #bfdbfe;
        border-color: #bfdbfe;
        color: #ffffff;
    }

/* Resembrar arrasa datos. El botón de confirmación lo dice con el color antes que con el texto. */
.vf-btn-peligro[b-elo4alaws4] {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
}

    .vf-btn-peligro:hover[b-elo4alaws4] {
        background: #92400e;
    }

.vf-acciones[b-elo4alaws4] {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* AVISOS Y ESTADOS DE LA PÁGINA */

.vf-progreso[b-elo4alaws4] {
    margin-top: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: #1d4ed8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.vf-error[b-elo4alaws4] {
    margin-top: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
}

.vf-confirmar[b-elo4alaws4] {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 12px;
}

.vf-confirmar-acciones[b-elo4alaws4] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.vf-vacio[b-elo4alaws4] {
    padding: 16px 4px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

.vf-sin-sembrar[b-elo4alaws4] {
    font-size: 12px;
    font-weight: 800;
    color: #b45309;
}

/* TABLAS */

.vf-tabla[b-elo4alaws4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

    .vf-tabla th[b-elo4alaws4] {
        text-align: left;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .vf-tabla td[b-elo4alaws4] {
        border-bottom: 1px solid #f1f5f9;
        padding: 9px 10px;
        vertical-align: top;
    }

.vf-modelo[b-elo4alaws4] {
    font-weight: 850;
    color: #0f172a;
    white-space: nowrap;
}

.vf-fecha[b-elo4alaws4] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vf-col-num[b-elo4alaws4],
.vf-num[b-elo4alaws4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vf-ok[b-elo4alaws4] {
    color: #15803d;
    font-weight: 800;
}

.vf-ko[b-elo4alaws4] {
    color: #b91c1c;
    font-weight: 800;
}

/* El detalle puede ser larguísimo (la respuesta de la AEAT). Se acota y el texto íntegro queda en el
   title; la copia completa vive en Presentaciones AEAT, que es lo que dice la nota al pie. */
.vf-detalle[b-elo4alaws4] {
    color: #475569;
    font-size: 12px;
    max-width: 460px;
}

.vf-col-toggle[b-elo4alaws4] {
    width: 1%;
}

.vf-toggle[b-elo4alaws4] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    padding: 0 4px;
}

.vf-fila-detalle > td[b-elo4alaws4] {
    background: #f8fafc;
    padding: 0 10px 12px;
}

/* BLOQUES (una empresa / una tanda) */

.vf-bloque[b-elo4alaws4] {
    margin-top: 14px;
}

.vf-bloque-title[b-elo4alaws4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    font-weight: 850;
    color: #334155;
}

.vf-contadores[b-elo4alaws4] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.vf-historial-head[b-elo4alaws4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vf-nota[b-elo4alaws4] {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

    .vf-nota a[b-elo4alaws4] {
        color: #2563eb;
        font-weight: 700;
    }

/* RESPONSIVE */

@media (max-width: 760px) {
    .vf-filtros[b-elo4alaws4] {
        flex-direction: column;
        align-items: stretch;
    }

    .vf-detalle[b-elo4alaws4] {
        max-width: none;
    }
}
/* _content/ErpPowergest/Presentation/Gestion/ArqueoCaja/Pages/ArqueoCaja.razor.rz.scp.css */
.arqueo-page[b-1653vwt3xa],
.arqueo-page *[b-1653vwt3xa],
.arqueo-page *[b-1653vwt3xa]::before,
.arqueo-page *[b-1653vwt3xa]::after {
    box-sizing: border-box;
}

.arqueo-page[b-1653vwt3xa] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    animation: arqueoPageIn-b-1653vwt3xa 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.arqueo-header[b-1653vwt3xa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.arqueo-heading[b-1653vwt3xa] {
    min-width: 0;
    flex: 0 0 auto;
}

.arqueo-header.command-bar-host-collapsed .arqueo-heading[b-1653vwt3xa] {
    flex: 1 1 auto;
}

.arqueo-title[b-1653vwt3xa] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.arqueo-subtitle[b-1653vwt3xa] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. */
.arqueo-header-actions[b-1653vwt3xa] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

/* PANEL GENERAL */

.card-panel[b-1653vwt3xa] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* PANEL PRINCIPAL */

.arqueo-main-panel[b-1653vwt3xa] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.arqueo-list-header[b-1653vwt3xa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.arqueo-list-heading[b-1653vwt3xa] {
    min-width: 0;
    flex: 1 1 auto;
}

.arqueo-list-title[b-1653vwt3xa] {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.arqueo-list-subtitle[b-1653vwt3xa] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* TABS */

/* La barra (rail, scroll horizontal y flechas) la aporta el componente <ScrollableTabs>; aqui solo
   se estilan los botones de pestana, que conservan el CSS de esta pagina por viajar en el ChildContent. */
.arqueo-tab[b-1653vwt3xa] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .arqueo-tab:hover[b-1653vwt3xa] {
        color: #334155;
    }

    .arqueo-tab.active[b-1653vwt3xa] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .arqueo-tab:focus-visible[b-1653vwt3xa] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

/* CONTENIDO: cada pestana pinta dentro de un panel con su propio scroll */

.arqueo-pane[b-1653vwt3xa] {
    min-height: 0;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .arqueo-pane[b-1653vwt3xa]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .arqueo-pane[b-1653vwt3xa]::-webkit-scrollbar-track {
        background: transparent;
    }

    .arqueo-pane[b-1653vwt3xa]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.arqueo-toolbar[b-1653vwt3xa] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.arqueo-block-title[b-1653vwt3xa] {
    margin: 14px 0 8px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.arqueo-empty[b-1653vwt3xa] {
    padding: 14px;
    border: 1px dashed #dbe2ea;
    border-radius: 12px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 13px;
}

/* TABLAS */

.arqueo-table-wrap[b-1653vwt3xa] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.arqueo-table[b-1653vwt3xa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: #1f2937;
}

    .arqueo-table th[b-1653vwt3xa] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #4b5563;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        padding: 9px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .arqueo-table td[b-1653vwt3xa] {
        padding: 8px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .arqueo-table tbody tr:last-child td[b-1653vwt3xa] {
        border-bottom: 0;
    }

    .arqueo-table tbody tr:hover[b-1653vwt3xa] {
        background: #f8fafc;
    }

    .arqueo-table th.num[b-1653vwt3xa],
    .arqueo-table td.num[b-1653vwt3xa] {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .arqueo-table th.acciones[b-1653vwt3xa],
    .arqueo-table td.acciones[b-1653vwt3xa] {
        text-align: right;
        white-space: nowrap;
    }

    .arqueo-table td.acciones button + button[b-1653vwt3xa] {
        margin-left: 6px;
    }

    .arqueo-table tbody tr.anulado td[b-1653vwt3xa] {
        color: #9ca3af;
        text-decoration: line-through;
    }

.arqueo-chip[b-1653vwt3xa] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

/* ARQUEO DIARIO */

.arqueo-workflow[b-1653vwt3xa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
    align-items: start;
}

.arqueo-workflow-info[b-1653vwt3xa] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

    .arqueo-workflow-info h3[b-1653vwt3xa] {
        margin: 0;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 850;
        color: #1f2937;
    }

    .arqueo-workflow-info p[b-1653vwt3xa] {
        margin: 8px 0 0;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.45;
    }

/* Cifras que devuelve Application (previsualizacion, descuadre, retirada): la UI solo las pinta. */
.arqueo-cifras[b-1653vwt3xa] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.arqueo-cifra[b-1653vwt3xa] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #f8fafc;
}

    .arqueo-cifra span[b-1653vwt3xa] {
        font-size: 11px;
        font-weight: 750;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .arqueo-cifra strong[b-1653vwt3xa] {
        font-size: 16px;
        font-weight: 900;
        color: #111827;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .arqueo-cifra.destacada[b-1653vwt3xa] {
        border-color: #bfdbfe;
        background: #eff6ff;
    }

        .arqueo-cifra.destacada strong[b-1653vwt3xa] {
            color: #1d4ed8;
        }

    .arqueo-cifra.alerta[b-1653vwt3xa] {
        border-color: #fecaca;
        background: #fef2f2;
    }

        .arqueo-cifra.alerta strong[b-1653vwt3xa] {
            color: #b91c1c;
        }

.arqueo-aviso[b-1653vwt3xa] {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.4;
}

    .arqueo-aviso span.material-symbols-outlined[b-1653vwt3xa] {
        font-size: 20px;
        flex: 0 0 auto;
    }

.arqueo-form-grid[b-1653vwt3xa] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.arqueo-nota[b-1653vwt3xa] {
    margin-top: 10px;
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.35;
}

.arqueo-filter-box[b-1653vwt3xa] {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

/* CAMPOS */

.ar-field[b-1653vwt3xa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    min-width: 0;
}

    .ar-field.ar-field-wide[b-1653vwt3xa] {
        grid-column: 1 / -1;
    }

    .ar-field label[b-1653vwt3xa] {
        font-size: 12px;
        font-weight: 800;
        color: #4b5563;
    }

    .ar-field input[b-1653vwt3xa],
    .ar-field select[b-1653vwt3xa] {
        width: 100%;
        height: 38px;
        border: 1px solid #dbe2ea;
        border-radius: 11px;
        background: #ffffff;
        font-size: 13px;
        color: #1f2937;
        outline: none;
        padding: 0 12px;
    }

        .ar-field input:focus[b-1653vwt3xa],
        .ar-field select:focus[b-1653vwt3xa] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        }

/* MODAL DE OPERACION MANUAL (usa el componente <Modal> de la casa) */

.arqueo-modal-body[b-1653vwt3xa] {
    padding: 4px 10px 10px;
}

.arqueo-modal-actions[b-1653vwt3xa] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

/* BOTONES */

.ar-primary-btn[b-1653vwt3xa],
.ar-action-btn[b-1653vwt3xa] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.ar-primary-btn[b-1653vwt3xa] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .ar-primary-btn:hover[b-1653vwt3xa] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.ar-action-btn[b-1653vwt3xa] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .ar-action-btn:hover[b-1653vwt3xa] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .ar-action-btn.compact[b-1653vwt3xa] {
        height: 30px;
        padding: 0 11px;
        font-size: 11.5px;
        font-weight: 800;
    }

.ar-primary-btn:disabled[b-1653vwt3xa],
.ar-action-btn:disabled[b-1653vwt3xa] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ar-primary-btn.full[b-1653vwt3xa],
.ar-action-btn.full[b-1653vwt3xa] {
    width: 100%;
    margin-top: 4px;
}

/* ANIMACIONES */

@keyframes arqueoPageIn-b-1653vwt3xa {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .arqueo-page[b-1653vwt3xa] {
        height: calc(100dvh - 96px);
    }

    .arqueo-cifras[b-1653vwt3xa],
    .arqueo-form-grid[b-1653vwt3xa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .arqueo-page[b-1653vwt3xa] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */
    .arqueo-header-actions[b-1653vwt3xa] {
        justify-content: flex-end;
    }

    .arqueo-main-panel[b-1653vwt3xa] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .arqueo-pane[b-1653vwt3xa] {
        overflow: visible;
        padding-right: 0;
    }

    .arqueo-workflow[b-1653vwt3xa] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .arqueo-cifras[b-1653vwt3xa],
    .arqueo-form-grid[b-1653vwt3xa] {
        grid-template-columns: 1fr;
    }

    .arqueo-header-actions[b-1653vwt3xa] {
        width: 100%;
    }

    .arqueo-list-header[b-1653vwt3xa] {
        flex-direction: column;
        align-items: stretch;
    }

    .arqueo-toolbar > *[b-1653vwt3xa] {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    /* El título y el subtítulo de cabecera escalan con el clamp responsive; no se fija tamaño aquí. */

    .arqueo-list-subtitle[b-1653vwt3xa] {
        font-size: 12px;
    }

    .card-panel[b-1653vwt3xa] {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arqueo-page[b-1653vwt3xa],
    .arqueo-page *[b-1653vwt3xa],
    .arqueo-page *[b-1653vwt3xa]::before,
    .arqueo-page *[b-1653vwt3xa]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Components/DescifradoTipoClientePanel.razor.rz.scp.css */
.dtc-reglas[b-mzfpq2m1e3] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Components/VerificacionMigracionPanel.razor.rz.scp.css */
/* Panel «Verificar la migración» (plan VP). Vive dentro de .cform-page, que aporta las tarjetas,
   botones y rejillas; aquí solo el semáforo del acta. Colores: verde cuadra, azul explicada por regla,
   ámbar defecto del programa antiguo, rojo sin explicar, gris no se pudo. */

.vp-resumen[b-dbs08axdge] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--cf-r-lg, 14px);
    border: 1px solid var(--vp-line);
    background: var(--vp-soft);
    --vp-line: #e5e7eb;
    --vp-soft: #fafbfc;
    --vp-ink: #374151;
}

    .vp-resumen > span[b-dbs08axdge] {
        font-size: 28px;
        color: var(--vp-ink);
    }

    .vp-resumen p[b-dbs08axdge] {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.45;
    }

.vp-resumen-titulo[b-dbs08axdge] {
    font-weight: 600;
    font-size: 14px !important;
    color: var(--vp-ink);
}

.vp-chip[b-dbs08axdge] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--vp-line);
    background: var(--vp-soft);
    color: var(--vp-ink);
}

.vp-punto[b-dbs08axdge] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vp-ink);
}

.vp-ok[b-dbs08axdge] { --vp-line: #bbf7d0; --vp-soft: #f0fdf4; --vp-ink: #15803d; }
.vp-regla[b-dbs08axdge] { --vp-line: #bfdbfe; --vp-soft: #eff6ff; --vp-ink: #1d4ed8; }
.vp-legado[b-dbs08axdge] { --vp-line: #fde68a; --vp-soft: #fffbeb; --vp-ink: #b45309; }
.vp-mal[b-dbs08axdge] { --vp-line: #fecaca; --vp-soft: #fef2f2; --vp-ink: #b91c1c; }
/* FUN-V698: no cuadra, pero no mueve importes (datos de fichas). */
.vp-datos[b-dbs08axdge] { --vp-line: #ddd6fe; --vp-soft: #f5f3ff; --vp-ink: #6d28d9; }
.vp-nada[b-dbs08axdge] { --vp-line: #e5e7eb; --vp-soft: #f3f4f6; --vp-ink: #6b7280; }

.vp-detalle[b-dbs08axdge] {
    border: 1px solid var(--cf-line, #e5e7eb);
    border-radius: var(--cf-r-md, 10px);
    padding: 10px 12px;
    background: var(--cf-surface, #fff);
}

    .vp-detalle > summary[b-dbs08axdge] {
        cursor: pointer;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .vp-detalle > p[b-dbs08axdge] {
        margin: 8px 0;
        font-size: 12.5px;
    }

.vp-notas[b-dbs08axdge] {
    margin: 6px 0 10px 18px;
    padding: 0;
    font-size: 12.5px;
    color: var(--cf-text-2, #374151);
}

.vp-error[b-dbs08axdge] {
    color: #b91c1c;
    font-weight: 600;
}

.vp-num[b-dbs08axdge] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* FUN-V537 — La corrección, separada de la verificación. */
.vp-correccion[b-dbs08axdge] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Pages/ImportacionDatos.razor.rz.scp.css */
.import-page[b-jgvuq808f2],
.import-page *[b-jgvuq808f2],
.import-page *[b-jgvuq808f2]::before,
.import-page *[b-jgvuq808f2]::after {
    box-sizing: border-box;
}

.import-page[b-jgvuq808f2] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    animation: importPageIn-b-jgvuq808f2 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.import-header[b-jgvuq808f2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.import-heading[b-jgvuq808f2] {
    min-width: 0;
    flex: 0 0 auto;
}

.import-header.command-bar-host-collapsed .import-heading[b-jgvuq808f2] {
    flex: 1 1 auto;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. */
.import-header-actions[b-jgvuq808f2] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.import-title[b-jgvuq808f2] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Si el título no cabe, envuelve (sin puntos suspensivos) cuando la cabecera cede el ancho. */
    overflow-wrap: break-word;
}

.import-subtitle[b-jgvuq808f2] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    /* Tope de ancho responsive: si el texto no cabe, salta de línea (envuelve). */
    max-width: clamp(440px, 52vw, 1100px);
    overflow-wrap: break-word;
}

/* PANEL GENERAL */

.card-panel[b-jgvuq808f2] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* KPIS */

.import-summary-panel[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.imp-kpi-card[b-jgvuq808f2] {
    min-width: 0;
    height: 76px;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: importCardIn-b-jgvuq808f2 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .imp-kpi-card:nth-child(1)[b-jgvuq808f2] {
        animation-delay: 0.03s;
    }

    .imp-kpi-card:nth-child(2)[b-jgvuq808f2] {
        animation-delay: 0.06s;
    }

    .imp-kpi-card:nth-child(3)[b-jgvuq808f2] {
        animation-delay: 0.09s;
    }

    .imp-kpi-card:nth-child(4)[b-jgvuq808f2] {
        animation-delay: 0.12s;
    }

    .imp-kpi-card:hover[b-jgvuq808f2] {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10);
    }

.imp-kpi-head[b-jgvuq808f2] {
    width: 104px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
}

.imp-kpi-card-blue .imp-kpi-head[b-jgvuq808f2] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.imp-kpi-card-green .imp-kpi-head[b-jgvuq808f2] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.imp-kpi-card-orange .imp-kpi-head[b-jgvuq808f2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.imp-kpi-card-purple .imp-kpi-head[b-jgvuq808f2] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.imp-kpi-body[b-jgvuq808f2] {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.imp-kpi-value[b-jgvuq808f2] {
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imp-kpi-foot[b-jgvuq808f2] {
    font-size: 11px;
    color: #8b95a7;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PANEL PRINCIPAL */

.import-main-panel[b-jgvuq808f2] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.import-list-header[b-jgvuq808f2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.import-list-title[b-jgvuq808f2] {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.import-list-subtitle[b-jgvuq808f2] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* TABS */

/* La barra (rail, scroll horizontal y flechas) la aporta <ScrollableTabs>; aquí solo los botones. */
.import-tab[b-jgvuq808f2] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;        /* el subrayado solapa el rail de 1px */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .import-tab:hover[b-jgvuq808f2] {
        color: #334155;
    }

    .import-tab.active[b-jgvuq808f2] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .import-tab:focus-visible[b-jgvuq808f2] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

/* CUERPO DE PESTAÑA (asistente funcional M3) */

.import-tab-body[b-jgvuq808f2] {
    min-height: 0;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .import-tab-body[b-jgvuq808f2]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .import-tab-body[b-jgvuq808f2]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.imp-panel[b-jgvuq808f2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.imp-subtitle[b-jgvuq808f2] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
    margin-top: 2px;
}

.imp-muted[b-jgvuq808f2] {
    color: #6b7280;
}

.imp-hint[b-jgvuq808f2] {
    font-size: 11px;
    margin-top: 2px;
}

.imp-empty[b-jgvuq808f2] {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    padding: 16px;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
}

.imp-field--inline[b-jgvuq808f2] {
    margin-bottom: 0;
}

.imp-file-input[b-jgvuq808f2] {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 8px 0;
}

.imp-toolbar[b-jgvuq808f2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.imp-check[b-jgvuq808f2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .imp-check input[b-jgvuq808f2] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

/* GRID GENÉRICO (tablas de datos del asistente) */

.imp-table-wrap[b-jgvuq808f2] {
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    overflow: auto;
    max-height: 320px;
}

.imp-table-wrap--tall[b-jgvuq808f2] {
    max-height: 440px;
}

.imp-grid[b-jgvuq808f2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .imp-grid thead th[b-jgvuq808f2] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 10px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .imp-grid tbody td[b-jgvuq808f2] {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        color: #374151;
        vertical-align: top;
    }

    .imp-grid tbody tr:last-child td[b-jgvuq808f2] {
        border-bottom: 0;
    }

.imp-map-grid select[b-jgvuq808f2],
.imp-map-grid input[b-jgvuq808f2] {
    width: 100%;
    height: 34px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    padding: 0 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 12px;
    outline: none;
}

    .imp-map-grid select:focus[b-jgvuq808f2],
    .imp-map-grid input:focus[b-jgvuq808f2] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.imp-expr--error[b-jgvuq808f2] {
    border-color: #fca5a5 !important;
    background: #fef2f2;
}

.imp-error-msg[b-jgvuq808f2] {
    margin-top: 4px;
    font-size: 11px;
    color: #b91c1c;
    font-weight: 700;
}

.imp-error-list[b-jgvuq808f2] {
    margin: 4px 0 0;
    padding-left: 18px;
    color: #b91c1c;
    font-size: 12px;
}

.imp-req[b-jgvuq808f2] {
    color: #dc2626;
    font-weight: 900;
    margin-left: 3px;
}

/* CONTADORES DEL INFORME */

.imp-counters[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.imp-counter[b-jgvuq808f2] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .imp-counter span[b-jgvuq808f2] {
        font-size: 22px;
        font-weight: 900;
        color: #111827;
        line-height: 1;
    }

    .imp-counter label[b-jgvuq808f2] {
        font-size: 11px;
        color: #8b95a7;
        font-weight: 700;
    }

.imp-counter--ok span[b-jgvuq808f2] {
    color: #16a34a;
}

.imp-counter--warn span[b-jgvuq808f2] {
    color: #d97706;
}

.imp-counter--err span[b-jgvuq808f2] {
    color: #dc2626;
}

/* BOTONES / SPINNER */

.imp-action-btn--sm[b-jgvuq808f2] {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.imp-spinner[b-jgvuq808f2] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: impSpin-b-jgvuq808f2 0.7s linear infinite;
}

@keyframes impSpin-b-jgvuq808f2 {
    to { transform: rotate(360deg); }
}

/* CONTENIDO */

.import-content-grid[b-jgvuq808f2],
.import-final-grid[b-jgvuq808f2],
.import-origin-layout[b-jgvuq808f2],
.import-steps-grid[b-jgvuq808f2] {
    min-height: 0;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .import-content-grid[b-jgvuq808f2]::-webkit-scrollbar,
    .import-final-grid[b-jgvuq808f2]::-webkit-scrollbar,
    .import-origin-layout[b-jgvuq808f2]::-webkit-scrollbar,
    .import-steps-grid[b-jgvuq808f2]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .import-content-grid[b-jgvuq808f2]::-webkit-scrollbar-track,
    .import-final-grid[b-jgvuq808f2]::-webkit-scrollbar-track,
    .import-origin-layout[b-jgvuq808f2]::-webkit-scrollbar-track,
    .import-steps-grid[b-jgvuq808f2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .import-content-grid[b-jgvuq808f2]::-webkit-scrollbar-thumb,
    .import-final-grid[b-jgvuq808f2]::-webkit-scrollbar-thumb,
    .import-origin-layout[b-jgvuq808f2]::-webkit-scrollbar-thumb,
    .import-steps-grid[b-jgvuq808f2]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.import-content-grid[b-jgvuq808f2],
.import-final-grid[b-jgvuq808f2],
.import-origin-layout[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 12px;
    align-items: start;
}

.import-steps-grid[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* CARDS */

.import-info-card[b-jgvuq808f2],
.import-table-card[b-jgvuq808f2],
.import-origin-box[b-jgvuq808f2],
.import-preview-card[b-jgvuq808f2],
.import-form-card[b-jgvuq808f2],
.import-result-card[b-jgvuq808f2],
.import-step-card[b-jgvuq808f2],
.import-warning[b-jgvuq808f2] {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 14px;
}

.import-info-card[b-jgvuq808f2],
.import-result-card[b-jgvuq808f2],
.import-step-card[b-jgvuq808f2],
.import-warning[b-jgvuq808f2] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .import-info-card > span[b-jgvuq808f2],
    .import-result-card > span[b-jgvuq808f2],
    .import-step-card > span[b-jgvuq808f2],
    .import-warning > span[b-jgvuq808f2] {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 12px;
        background: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
    }

    .import-info-card h3[b-jgvuq808f2],
    .import-result-card h3[b-jgvuq808f2],
    .import-step-card h3[b-jgvuq808f2],
    .import-preview-card h3[b-jgvuq808f2] {
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 850;
        color: #1f2937;
    }

    .import-info-card p[b-jgvuq808f2],
    .import-result-card p[b-jgvuq808f2],
    .import-step-card p[b-jgvuq808f2],
    .import-preview-card p[b-jgvuq808f2],
    .import-warning p[b-jgvuq808f2],
    .import-help[b-jgvuq808f2] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.4;
    }

/* TABLA EJEMPLO */

.import-table-title[b-jgvuq808f2] {
    margin: 0 0 10px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.import-table[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 82px 82px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    overflow: hidden;
    font-size: 12px;
    background: #ffffff;
}

    .import-table div[b-jgvuq808f2] {
        min-width: 0;
        padding: 10px;
        border-bottom: 1px solid #edf2f7;
        border-right: 1px solid #edf2f7;
        color: #374151;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .import-table div:nth-child(-n+4)[b-jgvuq808f2] {
            background: #f8fafc;
            color: #475569;
            font-weight: 850;
        }

        .import-table div:nth-child(4n)[b-jgvuq808f2] {
            border-right: 0;
        }

        .import-table div:nth-last-child(-n+4)[b-jgvuq808f2] {
            border-bottom: 0;
        }

/* PLANTILLA */

.import-warning[b-jgvuq808f2] {
    margin-top: 12px;
    border-color: #fed7aa;
    background: #fff7ed;
}

    .import-warning > span[b-jgvuq808f2] {
        background: #ffedd5;
        color: #c2410c;
    }

/* ORIGEN */

.import-origin-box label[b-jgvuq808f2],
.imp-field label[b-jgvuq808f2] {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #4b5563;
}

.import-file-row[b-jgvuq808f2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

    .import-file-row input[b-jgvuq808f2],
    .imp-field input[b-jgvuq808f2],
    .imp-field select[b-jgvuq808f2] {
        width: 100%;
        height: 38px;
        border: 1px solid #dbe2ea;
        border-radius: 11px;
        padding: 0 12px;
        background: #ffffff;
        color: #1f2937;
        font-size: 13px;
        outline: none;
    }

        .import-file-row input:focus[b-jgvuq808f2],
        .imp-field input:focus[b-jgvuq808f2],
        .imp-field select:focus[b-jgvuq808f2] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        }

.import-help[b-jgvuq808f2] {
    margin-top: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 750;
}

/* Resultado de mirar la carpeta de imágenes: cuántas hay, o que no hay ninguna. Misma forma que
   .import-help, cambiando solo el color, para que se lea como parte del mismo campo. */
.imp-ok[b-jgvuq808f2] {
    margin-top: 10px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 750;
}

.imp-warn[b-jgvuq808f2] {
    margin-top: 10px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 750;
}

.import-preview-list[b-jgvuq808f2] {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

    .import-preview-list div[b-jgvuq808f2] {
        border-radius: 11px;
        background: #f8fafc;
        border: 1px solid #edf2f7;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 750;
        color: #374151;
    }

/* IMPORTAR */

.imp-field[b-jgvuq808f2] {
    margin-bottom: 10px;
}

.import-result-card[b-jgvuq808f2] {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

    .import-result-card > span[b-jgvuq808f2] {
        background: #dcfce7;
        color: #16a34a;
    }

/* BOTONES */

.imp-primary-btn[b-jgvuq808f2],
.imp-action-btn[b-jgvuq808f2] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.imp-primary-btn[b-jgvuq808f2] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .imp-primary-btn:hover[b-jgvuq808f2] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.imp-action-btn[b-jgvuq808f2] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .imp-action-btn:hover[b-jgvuq808f2] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.imp-primary-btn.full[b-jgvuq808f2] {
    width: 100%;
    margin-top: 4px;
}

/* ANIMACIONES */

@keyframes importPageIn-b-jgvuq808f2 {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes importCardIn-b-jgvuq808f2 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .import-page[b-jgvuq808f2] {
        height: calc(100dvh - 96px);
    }

    .import-summary-panel[b-jgvuq808f2],
    .import-steps-grid[b-jgvuq808f2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-content-grid[b-jgvuq808f2],
    .import-final-grid[b-jgvuq808f2],
    .import-origin-layout[b-jgvuq808f2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .import-page[b-jgvuq808f2] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila). */

    .import-main-panel[b-jgvuq808f2] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .import-content-grid[b-jgvuq808f2],
    .import-final-grid[b-jgvuq808f2],
    .import-origin-layout[b-jgvuq808f2],
    .import-steps-grid[b-jgvuq808f2] {
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .import-summary-panel[b-jgvuq808f2],
    .import-steps-grid[b-jgvuq808f2] {
        grid-template-columns: 1fr;
    }

    .imp-primary-btn[b-jgvuq808f2] {
        width: 100%;
    }

    .import-file-row[b-jgvuq808f2] {
        grid-template-columns: 1fr;
    }

    .import-table[b-jgvuq808f2] {
        min-width: 520px;
    }

    .import-table-card[b-jgvuq808f2] {
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    /* El título y el subtítulo de cabecera escalan con el clamp responsive; no se fija tamaño aquí. */

    .import-list-subtitle[b-jgvuq808f2] {
        font-size: 12px;
    }

    .card-panel[b-jgvuq808f2] {
        padding: 12px;
    }

    .imp-kpi-card[b-jgvuq808f2] {
        height: 74px;
    }

    .imp-kpi-head[b-jgvuq808f2] {
        width: 96px;
        font-size: 11px;
        padding: 0 10px;
    }

    .imp-kpi-value[b-jgvuq808f2] {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .import-page[b-jgvuq808f2],
    .import-page *[b-jgvuq808f2],
    .import-page *[b-jgvuq808f2]::before,
    .import-page *[b-jgvuq808f2]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Pages/MigracionPowergest.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   MIGRACIÓN DE POWERGEST — pantalla de un solo paso (subir ZIP y volcar)
   ───────────────────────────────────────────────────────────────────────────
   Esta página nació copiando el markup de ImportacionDatos.razor, pero SIN su
   `.razor.css`: el CSS scoped de Blazor pertenece a UN componente, así que las
   reglas `imp-*` / `import-*` de aquel fichero nunca le llegaban y la pantalla
   salía en crudo. La solución es la del resto del ERP: traerse el sistema
   visual, no enlazar al del vecino.

   Por eso este fichero reúne DOS bloques:

     1. SISTEMA cform-*  — el mismo de ClienteFicha.razor.css (implementación de
        referencia, ya clonado igual en ProveedorFicha, AgenteFicha y CuentaFicha).
        Se copia solo lo que esta pantalla usa —tokens, rejilla, tarjeta, campos,
        controles, casillas, botones, nota y aviso—; queda fuera el cromo propio
        de una ficha (pestañas, barra pegada, logo, direcciones, etiquetas).
        Los selectores van anclados en `.cform-page` y con `::deep` porque los
        controles pueden venir de un componente hijo (InputFile) y el CSS scoped
        de esta página no los marcaría.
     2. TABLAS Y AVISOS  — lo que el sistema cform-* no cubre y esta pantalla sí
        necesita: la rejilla de resultados (`imp-table-wrap` + `imp-grid`), el
        spinner del botón «Migrar», el texto atenuado, el recuadro vacío y el
        aviso naranja. Copiado de ImportacionDatos.razor.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. SISTEMA cform-*
   ══════════════════════════════════════════════════════════════════════════ */

/* El reset alcanza también el DOM de los componentes hijos (`::deep`): sin él, Blazor
   ataría el `*` al scope de ESTA página y los hijos se quedarían sin box-sizing. */
.cform-page[b-3d1o9hq5b2],
.cform-page[b-3d1o9hq5b2]  *,
.cform-page[b-3d1o9hq5b2]  *::before,
.cform-page[b-3d1o9hq5b2]  *::after {
    box-sizing: border-box;
}

.cform-page[b-3d1o9hq5b2] {
    /* Fondo de .main-body. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* min-height:100% = suelo de comodidad: la página llena como mínimo el alto que le cede
       .main-body y crece por encima si su contenido no cabe (el scroll lo lleva la ventana).
       A diferencia de ImportacionDatos, esta pantalla NO se encierra en una rejilla con
       `overflow:hidden`: el informe de la migración es largo y debe poder crecer. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cf-gap);
    color: var(--cf-text);
    animation: migracionPageIn-b-3d1o9hq5b2 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ───────────────────────────────  CABECERA  ─────────────────────────────── */

.cform-topbar[b-3d1o9hq5b2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.cform-topbar-text[b-3d1o9hq5b2] {
    min-width: 0;
}

.cform-title[b-3d1o9hq5b2] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    overflow-wrap: break-word;
}

.cform-subtitle[b-3d1o9hq5b2] {
    margin: 4px 0 0;
    max-width: 96ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cf-muted);
}

    .cform-subtitle code[b-3d1o9hq5b2] {
        padding: 1px 5px;
        border: 1px solid var(--cf-line);
        border-radius: 6px;
        background: var(--cf-surface-2);
        font-size: 12px;
        color: var(--cf-text-2);
    }

/* ───────────────────────────────  AVISO  ─────────────────────────────── */

.cform-alert[b-3d1o9hq5b2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--cf-gap);
    padding: 10px 14px;
    border: 1px solid var(--cf-danger-line);
    border-left: 3px solid #dc2626;
    border-radius: var(--cf-r-md);
    background: var(--cf-danger-soft);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

    .cform-alert .material-symbols-outlined[b-3d1o9hq5b2] {
        font-size: 20px;
        flex: 0 0 auto;
    }

/* ─────────────────────  REJILLA DE PÁGINA (TARJETAS)  ───────────────────── */

.cform-page[b-3d1o9hq5b2]  .cform-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cf-gap);
    align-items: start;
    min-width: 0;
}

.cform-page[b-3d1o9hq5b2]  .cform-col-4 {
    grid-column: span 4;
}

.cform-page[b-3d1o9hq5b2]  .cform-col-6 {
    grid-column: span 6;
}

.cform-page[b-3d1o9hq5b2]  .cform-col-8 {
    grid-column: span 8;
}

.cform-page[b-3d1o9hq5b2]  .cform-col-12 {
    grid-column: 1 / -1;
}

/* Una sola columna de tarjetas cuando el ancho ya no da para dos. */
@media (max-width: 1100px) {
    .cform-page[b-3d1o9hq5b2]  .cform-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cform-page[b-3d1o9hq5b2]  .cform-col-4,
    .cform-page[b-3d1o9hq5b2]  .cform-col-6,
    .cform-page[b-3d1o9hq5b2]  .cform-col-8,
    .cform-page[b-3d1o9hq5b2]  .cform-col-12 {
        grid-column: 1 / -1;
    }
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-3d1o9hq5b2]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

.cform-page[b-3d1o9hq5b2]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-3d1o9hq5b2]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho
   de ESTA tarjeta, no del viewport. */
.cform-page[b-3d1o9hq5b2]  .cform-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* Subtítulo dentro del cuerpo de una tarjeta (p. ej. «Resultado de la migración»).
   Mismo lenguaje que el título de la tarjeta, sin volver a ser una cabecera. */
.cform-page[b-3d1o9hq5b2]  .cform-card-body .cform-card-title {
    white-space: normal;
}

/* Nota explicativa: texto con filete, no una tarjeta dentro de la tarjeta. */
.cform-page[b-3d1o9hq5b2]  .cform-note {
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid var(--cf-brand-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--cf-muted);
}

    .cform-page[b-3d1o9hq5b2]  .cform-note ul {
        margin: 6px 0 0;
        padding-left: 18px;
    }

    .cform-page[b-3d1o9hq5b2]  .cform-note strong {
        color: var(--cf-text-2);
    }

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-3d1o9hq5b2]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-3d1o9hq5b2]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-3d1o9hq5b2]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-3d1o9hq5b2]  .cform-field-2 {
    grid-column: span 2;
}

.cform-page[b-3d1o9hq5b2]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-3d1o9hq5b2]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-3d1o9hq5b2]  .cform-field-5 {
    grid-column: span 5;
}

.cform-page[b-3d1o9hq5b2]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-3d1o9hq5b2]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-3d1o9hq5b2]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-3d1o9hq5b2]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-3d1o9hq5b2]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-3d1o9hq5b2]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-3d1o9hq5b2]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ─────────────────────────────
   `::deep` además del selector directo: el input puede venir de un componente hijo
   (InputFile) y el CSS scoped de esta página no lo marcaría. Anclado en .cform-page
   para no sangrar a otros componentes. */

.cform-page[b-3d1o9hq5b2]  .cform-input,
.cform-page[b-3d1o9hq5b2]  .cform-select,
.cform-page[b-3d1o9hq5b2]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-3d1o9hq5b2]  .cform-input,
.cform-page[b-3d1o9hq5b2]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-3d1o9hq5b2]  .cform-select {
    cursor: pointer;
}

.cform-page[b-3d1o9hq5b2]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-3d1o9hq5b2]  .cform-input::placeholder,
.cform-page[b-3d1o9hq5b2]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-3d1o9hq5b2]  .cform-input:hover,
.cform-page[b-3d1o9hq5b2]  .cform-select:hover,
.cform-page[b-3d1o9hq5b2]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-3d1o9hq5b2]  .cform-input:focus,
.cform-page[b-3d1o9hq5b2]  .cform-select:focus,
.cform-page[b-3d1o9hq5b2]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

.cform-page[b-3d1o9hq5b2]  .cform-input:disabled,
.cform-page[b-3d1o9hq5b2]  .cform-select:disabled {
    background: var(--cf-surface-2);
    border-color: var(--cf-line);
    color: var(--cf-muted);
    cursor: not-allowed;
}

/* El selector de fichero: <InputFile> propaga `class` a su <input type=file>, pero un
   file no es una caja de texto —el botón del navegador vive dentro— así que se le da
   alto automático y se estiliza ese botón. */
.cform-page[b-3d1o9hq5b2]  input[type="file"].cform-input {
    height: auto;
    padding: 7px 10px;
    cursor: pointer;
}

    .cform-page[b-3d1o9hq5b2]  input[type="file"].cform-input::file-selector-button {
        margin-right: 10px;
        height: 26px;
        padding: 0 10px;
        border: 1px solid var(--cf-line-strong);
        border-radius: var(--cf-r-sm);
        background: var(--cf-surface-2);
        color: var(--cf-text-2);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .cform-page[b-3d1o9hq5b2]  input[type="file"].cform-input::file-selector-button:hover {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

/* ─────────────────────────────  CASILLAS  ───────────────────────────── */

.cform-page[b-3d1o9hq5b2]  .cform-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-3d1o9hq5b2]  .cform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-3d1o9hq5b2]  .cform-check:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    /* La casilla marcada se lee de un vistazo, sin mirar el cuadrito. */
    .cform-page[b-3d1o9hq5b2]  .cform-check:has(input:checked) {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-3d1o9hq5b2]  .cform-check:focus-within {
        box-shadow: var(--cf-ring);
    }

    .cform-page[b-3d1o9hq5b2]  .cform-check:has(input:disabled) {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .cform-page[b-3d1o9hq5b2]  .cform-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cf-brand);
    }

/* ─────────────────────────────  BOTONES  ───────────────────────────── */

.cform-page[b-3d1o9hq5b2]  .cform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-3d1o9hq5b2]  .cform-btn:hover:not(:disabled) {
        background: var(--cf-surface-2);
    }

    .cform-page[b-3d1o9hq5b2]  .cform-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .cform-page[b-3d1o9hq5b2]  .cform-btn .material-symbols-outlined {
        font-size: 18px;
    }

.cform-page[b-3d1o9hq5b2]  .cform-btn-primary {
    border-color: transparent;
    background: var(--cf-brand);
    color: #ffffff;
}

    .cform-page[b-3d1o9hq5b2]  .cform-btn-primary:hover:not(:disabled) {
        background: var(--cf-brand-strong);
    }

/* Los dos botones son <SfButton>, que llega con el cromo de Syncfusion (fondo propio,
   MAYÚSCULAS, min-width, sombra y ondas). Aquí NO vale el truco de ImportacionDatos
   —`.import-page .e-btn { all: unset !important }` en app.css—, porque ese `!important`
   global también borraría lo que pinta `.cform-btn`. Se apaga solo lo que estorba, y
   basta la especificidad: el selector scoped lleva el atributo de scope y gana a `.e-btn`,
   que no usa `!important`. */
.cform-page[b-3d1o9hq5b2]  .cform-btn.e-btn {
    min-width: auto;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
    box-shadow: none;
}

    .cform-page[b-3d1o9hq5b2]  .cform-btn.e-btn .e-ripple-element {
        display: none;
    }

/* Fila de acciones al pie de una tarjeta (botón + casilla en la misma línea). */
.cform-page[b-3d1o9hq5b2]  .cform-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TABLAS Y AVISOS — lo que cform-* no cubre (copiado de ImportacionDatos)
   ══════════════════════════════════════════════════════════════════════════ */

/* La rejilla de resultados: se desplaza por dentro con la cabecera pegada, para que un
   informe de 40 tablas no empuje el resto de la página. */
.cform-page[b-3d1o9hq5b2]  .imp-table-wrap {
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    overflow: auto;
    max-height: 320px;
}

.cform-page[b-3d1o9hq5b2]  .imp-table-wrap--tall {
    max-height: 440px;
}

.cform-page[b-3d1o9hq5b2]  .imp-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .cform-page[b-3d1o9hq5b2]  .imp-grid thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 10px;
        border-bottom: 1px solid var(--cf-line);
        white-space: nowrap;
    }

    .cform-page[b-3d1o9hq5b2]  .imp-grid tbody td {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        color: var(--cf-text-2);
        vertical-align: top;
    }

    .cform-page[b-3d1o9hq5b2]  .imp-grid tbody tr:last-child td {
        border-bottom: 0;
    }

.cform-page[b-3d1o9hq5b2]  .imp-muted {
    color: var(--cf-muted);
}

/* Recuadro de estado: «no hay nada todavía» o «aún no puedes migrar». */
.cform-page[b-3d1o9hq5b2]  .imp-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    padding: 16px;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
}

/* Aviso naranja: no es un error (la migración puede seguir), pero hay que leerlo. */
.cform-page[b-3d1o9hq5b2]  .import-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 14px;
    border: 1px solid #fed7aa;
    border-radius: var(--cf-r-lg);
    background: #fff7ed;
}

    .cform-page[b-3d1o9hq5b2]  .import-warning > span {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 12px;
        background: #ffedd5;
        color: #c2410c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
    }

    .cform-page[b-3d1o9hq5b2]  .import-warning p {
        margin: 0;
        color: var(--cf-text-2);
        font-size: 12.5px;
        line-height: 1.45;
    }

/* RC3: la previsión de la regeneración de códigos, dentro del aviso. */
.cform-page[b-3d1o9hq5b2]  .imp-tabla-longitudes {
    margin: 6px 0;
    border-collapse: collapse;
    font-size: 12px;
}

    .cform-page[b-3d1o9hq5b2]  .imp-tabla-longitudes th,
    .cform-page[b-3d1o9hq5b2]  .imp-tabla-longitudes td {
        padding: 3px 8px;
        border-bottom: 1px solid #fed7aa;
        text-align: left;
    }

/* Variante ROJA del aviso, para lo que borra (CE10). Es el mismo bloque, con otro color: lo que
   cambia no es la forma sino la consecuencia, y el naranja de «léelo» no sirve para «esto no se
   deshace». */
.cform-page[b-3d1o9hq5b2]  .import-warning.imp-peligro {
    border-color: #fecaca;
    background: #fef2f2;
}

    .cform-page[b-3d1o9hq5b2]  .import-warning.imp-peligro > span {
        background: #fee2e2;
        color: #b91c1c;
    }

/* Aviso de cabecera: migración en marcha (azul), terminada sin errores (verde) o con algo que leer
   (salmón, el mismo del aviso naranja). Va lo primero de la página y es más grande que un aviso: es la
   respuesta a «¿se ha migrado?». */
.cform-page[b-3d1o9hq5b2]  .imp-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--ib-line);
    border-radius: var(--cf-r-lg);
    background: var(--ib-soft);
    --ib-line: #bfdbfe;
    --ib-soft: #eff6ff;
    --ib-ink: #1d4ed8;
}

    .cform-page[b-3d1o9hq5b2]  .imp-banner > span {
        flex: 0 0 auto;
        font-size: 30px;
        color: var(--ib-ink);
    }

    .cform-page[b-3d1o9hq5b2]  .imp-banner p {
        margin: 0;
        color: var(--cf-text-2);
        font-size: 12.5px;
        line-height: 1.5;
    }

        .cform-page[b-3d1o9hq5b2]  .imp-banner p + p {
            margin-top: 4px;
        }

    .cform-page[b-3d1o9hq5b2]  .imp-banner .imp-banner-titulo {
        color: var(--ib-ink);
        font-size: 14.5px;
        font-weight: 700;
    }

.cform-page[b-3d1o9hq5b2]  .imp-banner--ok {
    --ib-line: #bbf7d0;
    --ib-soft: #f0fdf4;
    --ib-ink: #15803d;
}

.cform-page[b-3d1o9hq5b2]  .imp-banner--aviso {
    --ib-line: #fed7aa;
    --ib-soft: #fff7ed;
    --ib-ink: #c2410c;
}

/* Los dos botones de la confirmación, uno al lado del otro y separados del texto. */
.cform-page[b-3d1o9hq5b2]  .imp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Spinner del botón «Migrar ahora»: va sobre el azul del botón primario. */
.cform-page[b-3d1o9hq5b2]  .imp-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: impSpin-b-3d1o9hq5b2 0.7s linear infinite;
}

@keyframes impSpin-b-3d1o9hq5b2 {
    to {
        transform: rotate(360deg);
    }
}

/* ───────────────────────────────  ANIMACIÓN  ─────────────────────────────
   Solo opacidad: NO usar filter/transform aquí. Un ancestro con filter crea un
   «containing block» para los descendientes position:fixed y atraparía cualquier
   modal dentro del área de la página en vez de cubrir el viewport. */
@keyframes migracionPageIn-b-3d1o9hq5b2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-3d1o9hq5b2] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-3d1o9hq5b2] {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-3d1o9hq5b2],
    .cform-page[b-3d1o9hq5b2]  *,
    .cform-page[b-3d1o9hq5b2]  *::before,
    .cform-page[b-3d1o9hq5b2]  *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* IM2 — La carpeta elegida y su boton en la misma linea: el campo dice QUE se eligio y el boton
   deja cambiarlo sin tener que buscarlo en otro sitio. */
.cform-page[b-3d1o9hq5b2]  .imp-fila-accion {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.cform-page[b-3d1o9hq5b2]  .imp-fila-accion .cform-input {
    flex: 1 1 18rem;
    min-width: 0;
}

/* La hora a la que empieza una migración programada: lo justo para fecha y hora, al lado de su casilla. */
.cform-page .imp-hora-programada[b-3d1o9hq5b2] {
    width: auto;
    max-width: 14rem;
}

/* VI11 — Las áreas de una migración por partes: una casilla por línea, sangradas bajo su opción. */
.cform-page .mpd-areas[b-3d1o9hq5b2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.25rem 0 0.5rem 1.75rem;
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Pages/TareasImportacion.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TAREAS DE IMPORTACIÓN PROGRAMADAS
   ───────────────────────────────────────────────────────────────────────────
   Esta página tenía el marcado copiado de ImportacionDatos.razor pero NO su
   `.razor.css`: el CSS scoped de Blazor es exclusivo de su componente, así que
   ninguna regla `imp-*` / `import-*` llegaba aquí y la pantalla salía cruda.

   La solución no es reimportar aquel fichero, sino pasar la página al sistema
   visual CANÓNICO del repo, `cform-*` (ficha de cliente / proveedor / agente /
   cuenta). Este fichero reúne DOS bloques:

     1. SISTEMA cform-*  — clonado de ClienteFicha.razor.css, solo las secciones
        que esta pantalla usa: tokens, tarjeta, campos, controles, casillas,
        botones y nota. Se dejan fuera pestañas, logo, tags, direcciones,
        segmentado y resumen de cobro: aquí no hay nada de eso.
     2. LISTADO + MODAL  — el contenedor de la TablaPaginada (`imp-tabla`, que
        pinta marco, orden, filas, vacío y paginador), las columnas que caen en
        pantallas estrechas (`imp-col-*`) y el texto atenuado (`imp-muted`), más
        el diálogo artesanal, que ANTES vivía en un <style> inline al final del
        .razor y ahora vive aquí.

   Detalle técnico: las reglas de control se anclan en `.cform-page` y usan
   `::deep` para alcanzar a los hijos. Por eso el modal se renderiza DENTRO del
   `<div class="cform-page">` — si colgara de la raíz del documento (o de un
   componente <Modal>) sus `cform-input` quedarían fuera del ancla y volverían a
   salir crudos.
   ═══════════════════════════════════════════════════════════════════════════ */

.cform-page[b-4xxx3et9te],
.cform-page[b-4xxx3et9te]  *,
.cform-page[b-4xxx3et9te]  *::before,
.cform-page[b-4xxx3et9te]  *::after {
    box-sizing: border-box;
}

.cform-page[b-4xxx3et9te] {
    /* Fondo de .main-body. */
    --cf-bg: #f3f4f6;
    --cf-surface: #ffffff;
    --cf-surface-2: #fafbfc;
    --cf-line: #e5e7eb;
    --cf-line-strong: #d5dae1;

    --cf-text: #111827;
    --cf-text-2: #374151;
    --cf-label: #5b6472;
    --cf-muted: #6b7280;
    --cf-faint: #9ca3af;

    --cf-brand: #2563eb;
    --cf-brand-strong: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-brand-line: #bfdbfe;

    --cf-danger: #b91c1c;
    --cf-danger-line: #fecaca;
    --cf-danger-soft: #fef2f2;

    --cf-r-lg: 14px;
    --cf-r-md: 10px;
    --cf-r-sm: 8px;

    --cf-gap: 16px;
    --cf-pad: 16px;

    --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --cf-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

    /* A todo el ancho y todo el alto, como Clientes: sin margen ni max-width propios (el margen ya lo
       pone .main-body), 9px entre bloques y el listado se queda con el alto que sobra. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: var(--cf-text);
    animation: tareasImportacionPageIn-b-4xxx3et9te 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA  ───────────────────────────── */

/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta
   sitio y no replegaría nada al menú «···». */
.cform-topbar[b-4xxx3et9te] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Título en dos fases, como Clientes. Fase 1: en una línea y sin ceder, para que la falta de sitio la
   vea el script del CommandBar y repliegue la barra (solo iconos y «···»). Fase 2: ya replegada (clase
   command-bar-host-collapsed que pone el propio CommandBar en la cabecera), el bloque cede y el texto
   envuelve en vez de empujar la barra. */
.cform-topbar-text[b-4xxx3et9te] {
    flex: 0 0 auto;
    min-width: 0;
}

    .cform-topbar.command-bar-host-collapsed > .cform-topbar-text[b-4xxx3et9te] {
        flex: 1 1 auto;
    }

.cform-title[b-4xxx3et9te] {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    white-space: nowrap;
}

/* El subtítulo es largo: se acota su ancho para que no empuje la barra al «···» antes de tiempo. */
.cform-subtitle[b-4xxx3et9te] {
    margin: 2px 0 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

.cform-topbar.command-bar-host-collapsed .cform-title[b-4xxx3et9te],
.cform-topbar.command-bar-host-collapsed .cform-subtitle[b-4xxx3et9te] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: su ancho natural, a la derecha. Con ::deep porque el elemento lo pinta
   el componente CommandBar, no esta página. */
.cform-topbar[b-4xxx3et9te]  .cform-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ───────────────────────────────  TARJETA  ─────────────────────────────── */

.cform-page[b-4xxx3et9te]  .cform-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-r-lg);
    box-shadow: var(--cf-shadow);
    overflow: hidden;
}

.cform-page[b-4xxx3et9te]  .cform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-4xxx3et9te]  .cform-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La tarjeta del listado se queda con el alto sobrante y lo pasa, en columna, hasta la tabla. */
.cform-card-tareas[b-4xxx3et9te] {
    flex: 1 1 auto;
    min-height: 0;
}

    .cform-card-tareas > .cform-card-body[b-4xxx3et9te] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

/* El cuerpo es el contenedor de referencia: sus campos colapsan según el ancho
   de ESTA tarjeta, no del viewport. */
.cform-page[b-4xxx3et9te]  .cform-card-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

/* Nota explicativa: texto con filete, no una tarjeta dentro de la tarjeta. */
.cform-page[b-4xxx3et9te]  .cform-note {
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--cf-brand-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--cf-muted);
}

/* Bajo un campo la nota es la ayuda de ESE campo: sin el margen inferior de bloque. */
.cform-page[b-4xxx3et9te]  .cform-field > .cform-note {
    margin: 0;
}

/* ───────────────────────────────  CAMPOS  ─────────────────────────────── */

.cform-page[b-4xxx3et9te]  .cform-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.cform-page[b-4xxx3et9te]  .cform-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .cform-page[b-4xxx3et9te]  .cform-field > label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--cf-label);
    }

.cform-page[b-4xxx3et9te]  .cform-field-3 {
    grid-column: span 3;
}

.cform-page[b-4xxx3et9te]  .cform-field-4 {
    grid-column: span 4;
}

.cform-page[b-4xxx3et9te]  .cform-field-6 {
    grid-column: span 6;
}

.cform-page[b-4xxx3et9te]  .cform-field-full {
    grid-column: 1 / -1;
}

/* Tarjeta estrecha → dos campos por fila; muy estrecha → uno. */
@container (max-width: 620px) {
    .cform-page[b-4xxx3et9te]  .cform-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cform-page[b-4xxx3et9te]  .cform-fields > .cform-field {
            grid-column: auto;
        }

        .cform-page[b-4xxx3et9te]  .cform-fields > .cform-field-full {
            grid-column: 1 / -1;
        }
}

@container (max-width: 360px) {
    .cform-page[b-4xxx3et9te]  .cform-fields {
        grid-template-columns: minmax(0, 1fr);
    }

        .cform-page[b-4xxx3et9te]  .cform-fields > .cform-field {
            grid-column: 1 / -1;
        }
}

/* ─────────────────────────────  CONTROLES  ───────────────────────────── */

.cform-page[b-4xxx3et9te]  .cform-input,
.cform-page[b-4xxx3et9te]  .cform-select,
.cform-page[b-4xxx3et9te]  .cform-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--cf-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cform-page[b-4xxx3et9te]  .cform-input,
.cform-page[b-4xxx3et9te]  .cform-select {
    height: 36px;
    padding: 0 10px;
}

.cform-page[b-4xxx3et9te]  .cform-select {
    cursor: pointer;
}

.cform-page[b-4xxx3et9te]  .cform-textarea {
    min-height: 148px;
    padding: 9px 10px;
    resize: vertical;
    line-height: 1.5;
}

.cform-page[b-4xxx3et9te]  .cform-input::placeholder,
.cform-page[b-4xxx3et9te]  .cform-textarea::placeholder {
    color: var(--cf-faint);
}

.cform-page[b-4xxx3et9te]  .cform-input:hover,
.cform-page[b-4xxx3et9te]  .cform-select:hover,
.cform-page[b-4xxx3et9te]  .cform-textarea:hover {
    border-color: #b9c1cc;
}

.cform-page[b-4xxx3et9te]  .cform-input:focus,
.cform-page[b-4xxx3et9te]  .cform-select:focus,
.cform-page[b-4xxx3et9te]  .cform-textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: var(--cf-ring);
}

/* ─────────────────────────────  CASILLAS  ───────────────────────────── */

.cform-page[b-4xxx3et9te]  .cform-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cform-page[b-4xxx3et9te]  .cform-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: var(--cf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-4xxx3et9te]  .cform-check:hover {
        border-color: var(--cf-line-strong);
        background: var(--cf-surface-2);
    }

    /* La casilla marcada se lee de un vistazo, sin mirar el cuadrito. */
    .cform-page[b-4xxx3et9te]  .cform-check:has(input:checked) {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-4xxx3et9te]  .cform-check:focus-within {
        box-shadow: var(--cf-ring);
    }

    .cform-page[b-4xxx3et9te]  .cform-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cf-brand);
    }

/* ─────────────────────────────  BOTONES  ───────────────────────────── */

.cform-page[b-4xxx3et9te]  .cform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-4xxx3et9te]  .cform-btn:hover {
        background: var(--cf-surface-2);
    }

    .cform-page[b-4xxx3et9te]  .cform-btn .material-symbols-outlined {
        font-size: 18px;
    }

.cform-page[b-4xxx3et9te]  .cform-btn-primary {
    border-color: transparent;
    background: var(--cf-brand);
    color: #ffffff;
}

    .cform-page[b-4xxx3et9te]  .cform-btn-primary:hover {
        background: var(--cf-brand-strong);
    }

/* Botón compacto de fila de tabla (Editar / Eliminar). En móvil sube a 36px (ver al final). */
.cform-page[b-4xxx3et9te]  .cform-btn-sm {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.cform-page[b-4xxx3et9te]  .cform-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-r-sm);
    background: var(--cf-surface);
    color: var(--cf-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cform-page[b-4xxx3et9te]  .cform-icon-btn:hover {
        border-color: var(--cf-brand-line);
        background: var(--cf-brand-soft);
        color: var(--cf-brand-strong);
    }

    .cform-page[b-4xxx3et9te]  .cform-icon-btn .material-symbols-outlined {
        font-size: 18px;
    }

/* ══════════════════════════════════════════════════════════════════════════
   LISTADO — traído de ImportacionDatos.razor.css, que es donde nació el marcado
   ══════════════════════════════════════════════════════════════════════════ */

.cform-page[b-4xxx3et9te]  .imp-muted {
    color: var(--cf-muted);
}

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella). */
.imp-tabla[b-4xxx3et9te] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.cform-page[b-4xxx3et9te]  .imp-tabla .tp-panel {
    min-height: auto;
}

/* Las dos acciones de la última columna, juntas y sin saltar de línea. */
.cform-page[b-4xxx3et9te]  .imp-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Envoltorio de la casilla «Activa»: solo para parar el clic antes de que abra la edición. */
.cform-page[b-4xxx3et9te]  .imp-celda-accion {
    display: inline-flex;
}

/* La casilla Activa/No de la rejilla es un mando compacto: mismo lenguaje que
   `cform-check` pero sin la píldora, que en una celda de tabla estorba. */
.cform-page[b-4xxx3et9te]  .imp-tabla .cform-check {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cf-text-2);
}

    .cform-page[b-4xxx3et9te]  .imp-tabla .cform-check:hover {
        background: transparent;
        border-color: transparent;
    }

    .cform-page[b-4xxx3et9te]  .imp-tabla .cform-check:has(input:checked) {
        background: transparent;
        border-color: transparent;
        color: var(--cf-brand-strong);
    }

    .cform-page[b-4xxx3et9te]  .imp-tabla .cform-check:focus-within {
        box-shadow: none;
        outline: 2px solid var(--cf-brand-line);
        outline-offset: 2px;
    }

/* ══════════════════════════════════════════════════════════════════════════
   DIÁLOGO DE ALTA/EDICIÓN
   ──────────────────────────────────────────────────────────────────────────
   Sigue siendo artesanal (no es un SfDialog ni el componente <Modal>), pero
   ahora se renderiza DENTRO de `.cform-page`: así los `::deep` de arriba
   alcanzan sus inputs, selects y casillas. Estas reglas venían del <style>
   inline que había al final del .razor y que se ha eliminado.
   ══════════════════════════════════════════════════════════════════════════ */

.cform-page[b-4xxx3et9te]  .cform-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    z-index: 1200;
    overflow-y: auto;
}

.cform-page[b-4xxx3et9te]  .cform-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    background: var(--cf-surface);
    border-radius: var(--cf-r-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cform-page[b-4xxx3et9te]  .cform-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--cf-pad);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-line);
}

.cform-page[b-4xxx3et9te]  .cform-modal-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--cf-text);
}

/* La tarjeta del listado se queda con el alto sobrante y lo pasa, en columna, hasta la tabla. */
.cform-card-tareas[b-4xxx3et9te] {
    flex: 1 1 auto;
    min-height: 0;
}

    .cform-card-tareas > .cform-card-body[b-4xxx3et9te] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

/* El cuerpo es el contenedor de referencia de sus `cform-fields`, igual que
   `cform-card-body`: los campos colapsan según el ancho del diálogo. */
.cform-page[b-4xxx3et9te]  .cform-modal-body {
    padding: var(--cf-pad);
    container-type: inline-size;
}

.cform-page[b-4xxx3et9te]  .cform-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px var(--cf-pad);
    background: var(--cf-surface-2);
    border-top: 1px solid var(--cf-line);
}

/* ───────────────────────────────  ANIMACIÓN  ───────────────────────────────
   Solo opacidad: un ancestro con filter/transform crearía «containing block»
   para los descendientes position:fixed y atraparía el diálogo dentro del área
   de la página en vez de cubrir el viewport. */
@keyframes tareasImportacionPageIn-b-4xxx3et9te {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ───────────────────────────  AJUSTES FINOS  ─────────────────────────── */

@media (max-width: 640px) {
    .cform-page[b-4xxx3et9te] {
        --cf-gap: 12px;
        --cf-pad: 13px;
    }

    .cform-title[b-4xxx3et9te] {
        font-size: 18px;
    }

    .cform-subtitle[b-4xxx3et9te] {
        display: none;   /* en móvil el subtítulo solo roba altura */
    }
}

/* Columnas secundarias que caen según se estrecha la pantalla (las pinta TablaPaginada: ::deep). */
@media (max-width: 1100px) {
    .imp-tabla[b-4xxx3et9te]  .imp-col-ultima,
    .imp-tabla[b-4xxx3et9te]  .imp-col-resultado {
        display: none;
    }
}

@media (max-width: 860px) {
    .imp-tabla[b-4xxx3et9te]  .imp-col-origen,
    .imp-tabla[b-4xxx3et9te]  .imp-col-proxima {
        display: none;
    }
}

@media (max-width: 600px) {
    .imp-tabla[b-4xxx3et9te]  .imp-col-plantilla,
    .imp-tabla[b-4xxx3et9te]  .imp-col-cada {
        display: none;
    }

    /* Botones de fila con objetivo táctil de al menos 36px. */
    .cform-page[b-4xxx3et9te]  .cform-btn-sm {
        height: 36px;
        min-width: 36px;
    }

    .cform-page[b-4xxx3et9te]  .imp-tabla .cform-check {
        min-height: 36px;
    }

    .imp-tabla[b-4xxx3et9te]  .imp-col-acciones {
        width: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform-page[b-4xxx3et9te],
    .cform-page[b-4xxx3et9te]  *,
    .cform-page[b-4xxx3et9te]  *::before,
    .cform-page[b-4xxx3et9te]  *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Gestion/ImportacionDatos/Pages/TraspasoEscritorioPage.razor.rz.scp.css */
/* Traspaso al ERP de escritorio: el estilo de las pantallas nuevas (copias, marketing): cabecera con icono, cifras con
   fondo de color suave, tarjetas con radio 12 y borde superior de color, chips por tipo. La lista de lo que no se
   traspasa se desplaza dentro de su tarjeta: con muchos documentos la página no crece sin fin. */

.tde-page[b-n90a2pbi8j] {
    --tde-acento: #2563eb;
    --tde-acento-suave: #eff6ff;
    --tde-acento-borde: #bfdbfe;
    --tde-borde: var(--borde, #e5e7eb);
    --tde-gris: var(--texto-secundario, #6b7280);
    --tde-fondo: var(--fondo-tarjeta, #fff);

    /* Todo el ancho y todo el alto, como las demás pantallas: el borde lo pone .main-body, y la tarjeta de abajo se
       queda con el alto que sobra. */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
}

.tde-page > :last-child[b-n90a2pbi8j] {
    flex: 1 1 auto;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.tde-cabecera[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tde-cabecera-icono[b-n90a2pbi8j] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: var(--tde-acento);
    font-size: 26px;
}

.tde-titulo[b-n90a2pbi8j] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.tde-lema[b-n90a2pbi8j] {
    margin: 2px 0 0;
    font-size: 0.88rem;
    color: var(--tde-gris);
}

/* ── Franja de aviso ──────────────────────────────────────────────────────── */

.tde-franja[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
}

.tde-franja .material-symbols-rounded[b-n90a2pbi8j] { font-size: 20px; flex: 0 0 auto; }
.tde-franja-azul[b-n90a2pbi8j] { background: var(--tde-acento-suave); color: #1e40af; }
.tde-franja-ambar[b-n90a2pbi8j] { background: #fef3c7; color: #92400e; }
.tde-franja-ambar code[b-n90a2pbi8j] { user-select: all; font-weight: 600; word-break: break-all; }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.tde-tarjeta[b-n90a2pbi8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--tde-borde);
    border-top: 3px solid var(--tde-acento);
    border-radius: 12px;
    background: var(--tde-fondo);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tde-tarjeta-ambar[b-n90a2pbi8j] { border-top-color: #f59e0b; }

.tde-tarjeta-cab[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.tde-h2[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.tde-h2 .material-symbols-rounded[b-n90a2pbi8j] { font-size: 20px; color: var(--tde-acento); }
.tde-tarjeta-ambar .tde-h2 .material-symbols-rounded[b-n90a2pbi8j] { color: #d97706; }

/* ── Filtros ──────────────────────────────────────────────────────────────── */

.tde-filtros[b-n90a2pbi8j] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Las mismas clases las pintan RangoCodigos y CampoCodigo (componentes hijos): por eso también con ::deep. */
.tde-campo[b-n90a2pbi8j],
.tde-page[b-n90a2pbi8j]  .tde-campo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tde-campo label[b-n90a2pbi8j],
.tde-page[b-n90a2pbi8j]  .tde-campo label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.tde-input[b-n90a2pbi8j],
.tde-page[b-n90a2pbi8j]  .tde-input {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.tde-input-corto[b-n90a2pbi8j] { width: 8rem; }

/* ── Documentos / Fichas ─────────────────────────────────────────────────── */

.tde-vistas[b-n90a2pbi8j] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #f1f5f9;
    align-self: flex-start;
}

.tde-vista[b-n90a2pbi8j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 9px;
    padding: .4rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    cursor: pointer;
}

.tde-vista .material-symbols-rounded[b-n90a2pbi8j] { font-size: 18px; }
.tde-vista.is-sel[b-n90a2pbi8j] { background: #fff; color: var(--tde-acento); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }

.tde-tipos[b-n90a2pbi8j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tde-tipo[b-n90a2pbi8j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--tde-borde);
    border-radius: 999px;
    font-size: .86rem;
    cursor: pointer;
    background: #fff;
}

.tde-tipo:has(input:checked)[b-n90a2pbi8j] {
    background: var(--tde-acento-suave);
    border-color: var(--tde-acento-borde);
    color: #1e40af;
}

.tde-acciones[b-n90a2pbi8j] { display: flex; justify-content: flex-end; }

.tde-btn[b-n90a2pbi8j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}

.tde-btn .material-symbols-rounded[b-n90a2pbi8j] { font-size: 18px; }
.tde-btn:disabled[b-n90a2pbi8j] { opacity: .55; cursor: default; }
.tde-btn-primario[b-n90a2pbi8j] { background: var(--tde-acento); color: #fff; }
.tde-btn-primario:hover:not(:disabled)[b-n90a2pbi8j] { background: #1d4ed8; }

/* ── Cifras ───────────────────────────────────────────────────────────────── */

.tde-cifras[b-n90a2pbi8j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tde-cifra[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.tde-cifra .material-symbols-rounded[b-n90a2pbi8j] { font-size: 26px; }
.tde-cifra div[b-n90a2pbi8j] { display: flex; flex-direction: column; min-width: 0; }
.tde-cifra strong[b-n90a2pbi8j] { font-size: 1.05rem; font-weight: 600; }
.tde-cifra div span[b-n90a2pbi8j] { font-size: 0.78rem; color: var(--tde-gris); }

.tde-cifra-verde[b-n90a2pbi8j] { background: #f0fdf4; border-color: #dcfce7; }
.tde-cifra-verde .material-symbols-rounded[b-n90a2pbi8j] { color: #16a34a; }
.tde-cifra-ambar[b-n90a2pbi8j] { background: #fffbeb; border-color: #fde68a; }
.tde-cifra-ambar .material-symbols-rounded[b-n90a2pbi8j] { color: #d97706; }

/* ── Chips y vacío ────────────────────────────────────────────────────────── */

.tde-chips[b-n90a2pbi8j] { display: flex; flex-wrap: wrap; gap: 6px; }

.tde-chip[b-n90a2pbi8j] {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--tde-acento-suave);
    color: #1e40af;
    font-size: .8rem;
    font-weight: 600;
}

.tde-vacio[b-n90a2pbi8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px dashed var(--tde-acento-borde);
    border-radius: 12px;
    background: var(--tde-acento-suave);
    color: #1e40af;
    font-size: .88rem;
}

/* ── Lista con desplazamiento propio ──────────────────────────────────────── */

.tde-lista[b-n90a2pbi8j] {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--tde-borde);
    border-radius: 10px;
}

.tde-tabla[b-n90a2pbi8j] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.tde-tabla th[b-n90a2pbi8j] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .45rem .6rem;
    border-bottom: 1px solid #e3e8ee;
}

.tde-tabla td[b-n90a2pbi8j] {
    padding: .4rem .6rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: top;
}

@media (max-width: 600px) {
    .tde-page[b-n90a2pbi8j] { padding: 16px; }
    .tde-cifras[b-n90a2pbi8j] { grid-template-columns: 1fr; }
    .tde-filtros[b-n90a2pbi8j] { flex-direction: column; align-items: stretch; }
}

/* ── Envíos al escritorio (TE9) ───────────────────────────────────────────── */

.tde-envio[b-n90a2pbi8j] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tde-informe summary[b-n90a2pbi8j] { cursor: pointer; color: #1e40af; }
.tde-informe pre[b-n90a2pbi8j] { max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 12px; margin: 6px 0 0; }
/* _content/ErpPowergest/Presentation/Gestion/Movimientos/Pages/Movimientos.razor.rz.scp.css */
.movimientos-page[b-py5awk0ba9],
.movimientos-page *[b-py5awk0ba9],
.movimientos-page *[b-py5awk0ba9]::before,
.movimientos-page *[b-py5awk0ba9]::after {
    box-sizing: border-box;
}

.movimientos-page[b-py5awk0ba9] {
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       Filas: cabecera, KPIs y listado. La última es `1fr` (mínimo automático = su contenido): reparte
       el espacio sobrante cuando sobra, y empuja el alto de la página cuando falta. */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 12px;
    animation: movimientosPageIn-b-py5awk0ba9 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.movimientos-header[b-py5awk0ba9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .movimientos-header > div:first-child[b-py5awk0ba9] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .movimientos-header.command-bar-host-collapsed > div:first-child[b-py5awk0ba9] {
        flex: 1 1 auto;
    }

.movimientos-title[b-py5awk0ba9] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.movimientos-subtitle[b-py5awk0ba9] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.movimientos-header.command-bar-host-collapsed .movimientos-title[b-py5awk0ba9],
.movimientos-header.command-bar-host-collapsed .movimientos-subtitle[b-py5awk0ba9] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa las variantes
   `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover). */
.movimientos-header-actions[b-py5awk0ba9] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* KPIS */

.movimientos-summary-panel[b-py5awk0ba9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.mov-strip-card[b-py5awk0ba9] {
    min-width: 0;
    height: 76px;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: movimientosCardIn-b-py5awk0ba9 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .mov-strip-card:nth-child(1)[b-py5awk0ba9] {
        animation-delay: 0.03s;
    }

    .mov-strip-card:nth-child(2)[b-py5awk0ba9] {
        animation-delay: 0.06s;
    }

    .mov-strip-card:nth-child(3)[b-py5awk0ba9] {
        animation-delay: 0.09s;
    }

    .mov-strip-card:nth-child(4)[b-py5awk0ba9] {
        animation-delay: 0.12s;
    }

    .mov-strip-card:hover[b-py5awk0ba9] {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10);
    }

.mov-strip-head[b-py5awk0ba9] {
    width: 104px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
}

.mov-strip-title[b-py5awk0ba9] {
    display: block;
    min-width: 0;
}

.mov-strip-blue .mov-strip-head[b-py5awk0ba9] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.mov-strip-orange .mov-strip-head[b-py5awk0ba9] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.mov-strip-green .mov-strip-head[b-py5awk0ba9] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.mov-strip-purple .mov-strip-head[b-py5awk0ba9] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.mov-strip-body[b-py5awk0ba9] {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mov-strip-value[b-py5awk0ba9] {
    font-size: 21px;
    line-height: 1;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mov-strip-foot[b-py5awk0ba9] {
    font-size: 11px;
    color: #8b95a7;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.movimientos-list-panel[b-py5awk0ba9] {
    /* Se ancla siempre a la última fila (la de 1fr) del grid de .movimientos-page: ocupa el alto que
       sobra tras la cabecera y los KPIs, y crece con la tabla cuando no cabe. */
    grid-row: -2 / -1;
    display: grid;
    /* Filtros y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    grid-template-rows: auto 1fr;
    gap: 9px;
}

/* FILTROS */

.movimientos-filters[b-py5awk0ba9] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: center;
}

.mov-filter-item[b-py5awk0ba9],
.mov-filter-item-search[b-py5awk0ba9] {
    min-width: 0;
}

.mov-filter-searchbox[b-py5awk0ba9] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.mov-filter-search-icon[b-py5awk0ba9] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.mov-filter-input[b-py5awk0ba9],
.mov-filter-select[b-py5awk0ba9] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mov-filter-input[b-py5awk0ba9] {
    padding: 0 13px;
}

.mov-filter-input-search[b-py5awk0ba9] {
    padding-left: 40px !important;
}

.mov-filter-select[b-py5awk0ba9] {
    padding: 0 12px;
    cursor: pointer;
}

.mov-filter-input[b-py5awk0ba9]::placeholder {
    color: #9ca3af;
}

.mov-filter-input:focus[b-py5awk0ba9],
.mov-filter-select:focus[b-py5awk0ba9] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (la insignia de estado).

   Esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que el
   CSS scoped de esta página no lo alcanza por sí solo. */

.mov-tabla[b-py5awk0ba9] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto) el
   contenido no podría empujar la fila `1fr` del grid y la tabla se desplazaría por dentro en vez de
   crecer la página. */
.movimientos-page[b-py5awk0ba9]  .tp-panel {
    min-height: auto;
}

/* COLUMNAS REPLEGABLES: los anchos los declara cada columna (Ancho, inline en el <th>); aquí solo
   se decide qué columna desaparece y a qué ancho de ventana (ver bloque RESPONSIVE). */

/* INSIGNIA DE ESTADO (plantilla de la columna «Estado») */

.movimientos-page[b-py5awk0ba9]  .mov-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.movimientos-page[b-py5awk0ba9]  .mov-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.movimientos-page[b-py5awk0ba9]  .mov-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.movimientos-page[b-py5awk0ba9]  .mov-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.movimientos-page[b-py5awk0ba9]  .mov-estado-purple {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* ANIMACIONES */

@keyframes movimientosPageIn-b-py5awk0ba9 {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes movimientosCardIn-b-py5awk0ba9 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* RESPONSIVE */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. «Fecha»,
   «Documento», «Cliente» e «Importe» permanecen siempre visibles. La clase la lleva la cabecera Y sus
   celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1440px) {
    .movimientos-page[b-py5awk0ba9]  .mov-col-usuario {
        display: none;
    }
}

@media (max-width: 1280px) {
    .movimientos-page[b-py5awk0ba9]  .mov-col-descripcion {
        display: none;
    }
}

@media (max-width: 1120px) {
    .movimientos-page[b-py5awk0ba9]  .mov-col-hora {
        display: none;
    }
}

@media (max-width: 980px) {
    .movimientos-page[b-py5awk0ba9]  .mov-col-tipo {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho para nada más que identificar la fila. */
@media (max-width: 640px) {
    .movimientos-page[b-py5awk0ba9]  .mov-col-estado {
        display: none;
    }
}

@media (max-width: 1280px) {
    .movimientos-summary-panel[b-py5awk0ba9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .movimientos-filters[b-py5awk0ba9] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    /* El modelo de alto («suelo = la pantalla, y crece si hace falta») ya es el mismo en todos los
       anchos, así que aquí no hay nada que corregir: solo el reparto de los filtros. */
    .movimientos-filters[b-py5awk0ba9] {
        grid-template-columns: 1fr 1fr;
    }

    .mov-filter-item-search[b-py5awk0ba9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .movimientos-summary-panel[b-py5awk0ba9] {
        grid-template-columns: 1fr;
    }

    .movimientos-filters[b-py5awk0ba9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .movimientos-title[b-py5awk0ba9] {
        font-size: 20px;
    }

    .movimientos-subtitle[b-py5awk0ba9] {
        font-size: 12px;
    }

    .mov-strip-card[b-py5awk0ba9] {
        height: 74px;
    }

    .mov-strip-head[b-py5awk0ba9] {
        width: 96px;
        font-size: 11px;
        padding: 0 10px;
    }

    .mov-strip-value[b-py5awk0ba9] {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .movimientos-page[b-py5awk0ba9],
    .movimientos-page *[b-py5awk0ba9],
    .movimientos-page *[b-py5awk0ba9]::before,
    .movimientos-page *[b-py5awk0ba9]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Informes/Areas/Almacenes/Components/InformeAlmacenFiltrosGenerico.razor.rz.scp.css */
/* Mismo lenguaje visual que el resto de pantallas de informes (ParametroListadoField):
   etiqueta 11.5px/600, campos de 36px con radio 8 y foco #2563eb, sin negritas en los valores.
   Esta pantalla iba por libre y se veía como otra aplicación. */

.inf-compact-form[b-8re6fih3d1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.inf-lookup-field[b-8re6fih3d1] {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .inf-lookup-field label[b-8re6fih3d1] {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: #5b6472;
    }

.inf-select-field[b-8re6fih3d1] {
    gap: 4px;
}

.inf-filter-input[b-8re6fih3d1] {
    width: 100%;
    height: 36px;
    border: 1px solid #d5dae1;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    font-size: 13.5px;
    color: #111827;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

    .inf-filter-input:hover[b-8re6fih3d1] {
        border-color: #b9c1cc;
    }

    .inf-filter-input:focus[b-8re6fih3d1] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

    .inf-filter-input[type="number"][b-8re6fih3d1] {
        appearance: textfield;
        max-width: 120px;
    }

        .inf-filter-input[type="number"][b-8re6fih3d1]::-webkit-outer-spin-button,
        .inf-filter-input[type="number"][b-8re6fih3d1]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    .inf-filter-input[type="date"][b-8re6fih3d1] {
        max-width: 160px;
    }

.inf-select-input[b-8re6fih3d1] {
    width: 100%;
    height: 36px;
    border: 1px solid #d5dae1;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    font-size: 13.5px;
    color: #111827;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .inf-select-input:focus[b-8re6fih3d1] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

.inf-existencias-options[b-8re6fih3d1] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid #eef2f7;
}

.inf-check-item[b-8re6fih3d1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    font-size: 12px;
    font-weight: 650;
    color: #374151;
}

    .inf-check-item input[type="checkbox"][b-8re6fih3d1] {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: #2563eb;
    }

@media (max-width: 980px) {
    .inf-compact-form[b-8re6fih3d1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .inf-compact-form[b-8re6fih3d1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .inf-compact-form[b-8re6fih3d1] {
        grid-template-columns: 1fr;
    }
}


/* ─── Buscadores con popup (almacén · artículo · familia · proveedor) ───────────────── */
/* Los componentes RangoXxxSelectorField tienen su propio scope; se estilan vía ::deep
   porque cuelgan de .inf-compact-form (scope de este componente). */

[b-8re6fih3d1] .inf-lookup-field {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    [b-8re6fih3d1] .inf-lookup-field label {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: #5b6472;
    }

[b-8re6fih3d1] .inf-lookup-box {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid #d5dae1;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    [b-8re6fih3d1] .inf-lookup-box:hover {
        border-color: #b9c1cc;
    }

/* Sin icono delante: el resto de buscadores de informes no lo lleva. Se oculta en vez de quitarse
   del marcado para que el cambio sea solo de estilo. */
[b-8re6fih3d1] .inf-lookup-leading-icon {
    display: none;
}

/* El disparador es un <button> que se comporta como un input y abre el popup. */
[b-8re6fih3d1] .inf-lookup-box > button {
    width: 100%;
    height: 34px;
    border: 0;
    background: transparent;
    padding: 0 8px 0 10px;
    font-size: 13.5px;
    font-weight: 400;
    color: #111827;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    text-align: left;
}

    /* Texto de la selección: recorta con puntos suspensivos si no cabe. */
    [b-8re6fih3d1] .inf-lookup-box > button > span:first-child {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Lupa de la derecha. */
    /* Gris apagado, como la lupa del buscador común. */
    [b-8re6fih3d1] .inf-lookup-box > button .material-symbols-outlined {
        flex: none;
        font-size: 17px;
        color: #111827;
        opacity: .55;
    }

    [b-8re6fih3d1] .inf-lookup-box > button:hover .material-symbols-outlined {
        opacity: 1;
    }

[b-8re6fih3d1] .inf-lookup-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}


/* El input de los CampoCodigo (rangos de maestro) lo pinta un componente hijo: sin ::deep el CSS aislado no llega. */
.inf-lookup-field[b-8re6fih3d1]  .inf-filter-input {
    width: 100%;
    height: 36px;
    border: 1px solid #d5dae1;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    font-size: 13.5px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
}

.inf-lookup-field[b-8re6fih3d1]  .inf-filter-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
/* _content/ErpPowergest/Presentation/Informes/Areas/Almacenes/Pages/InformesAlmacenPage.razor.rz.scp.css */
.informes-page[b-l143hq6k82],
.informes-page *[b-l143hq6k82],
.informes-page *[b-l143hq6k82]::before,
.informes-page *[b-l143hq6k82]::after {
    box-sizing: border-box;
}

.informes-page[b-l143hq6k82] {
    height: calc(100dvh - 135px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    animation: informesPageIn-b-l143hq6k82 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── CABECERA HERO ─────────────────────────────────────────────────────────── */
.informes-hero[b-l143hq6k82] {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #e6edf7;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.10), transparent 42%), linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    animation: informesPageIn-b-l143hq6k82 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    /* Barra de acento a la izquierda */
    .informes-hero[b-l143hq6k82]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 5px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    }

.informes-hero-icon[b-l143hq6k82] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
}

    .informes-hero-icon .material-symbols-outlined[b-l143hq6k82] {
        font-size: 28px;
        line-height: 1;
    }

.informes-hero-text[b-l143hq6k82] {
    min-width: 0;
}

.informes-hero-kicker[b-l143hq6k82] {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.informes-hero-title[b-l143hq6k82] {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #111827;
}

.informes-hero-subtitle[b-l143hq6k82] {
    margin: 4px 0 0;
    max-width: 760px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #6b7280;
}

@media (max-width: 640px) {
    .informes-hero[b-l143hq6k82] {
        gap: 12px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .informes-hero-icon[b-l143hq6k82] {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

        .informes-hero-icon .material-symbols-outlined[b-l143hq6k82] {
            font-size: 24px;
        }

    .informes-hero-title[b-l143hq6k82] {
        font-size: 19px;
    }

    .informes-hero-subtitle[b-l143hq6k82] {
        font-size: 12px;
    }
}

.card-panel[b-l143hq6k82] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.section-title[b-l143hq6k82] {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

    .section-title.no-margin[b-l143hq6k82] {
        margin-bottom: 0;
    }

/* LAYOUT */

.informes-layout-panel[b-l143hq6k82] {
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.informes-layout[b-l143hq6k82] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    overflow: hidden;
}

.informes-sidebar[b-l143hq6k82] {
    min-height: 0;
    border-right: 1px solid #e5e7eb;
    background: #fbfcfe;
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.informes-sidebar-head[b-l143hq6k82] {
    min-width: 0;
}

.informes-sidebar-subtitle[b-l143hq6k82] {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.25;
}

.informes-menu-scroll[b-l143hq6k82] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .informes-menu-scroll[b-l143hq6k82]::-webkit-scrollbar {
        width: 6px;
    }

    .informes-menu-scroll[b-l143hq6k82]::-webkit-scrollbar-track {
        background: transparent;
    }

    .informes-menu-scroll[b-l143hq6k82]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .informes-menu-scroll[b-l143hq6k82]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.informes-content[b-l143hq6k82] {
    min-height: 0;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
}

.informes-config-panel[b-l143hq6k82] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
}

.panel-header[b-l143hq6k82],
.informes-config-header[b-l143hq6k82] {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.informes-config-heading[b-l143hq6k82] {
    min-width: 0;
}

.informes-panel-subtitle[b-l143hq6k82] {
    margin-top: 3px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.informes-current-icon[b-l143hq6k82] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.informes-config-scroll[b-l143hq6k82] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .informes-config-scroll[b-l143hq6k82]::-webkit-scrollbar {
        width: 6px;
    }

    .informes-config-scroll[b-l143hq6k82]::-webkit-scrollbar-track {
        background: transparent;
    }

    .informes-config-scroll[b-l143hq6k82]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .informes-config-scroll[b-l143hq6k82]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }


.informes-config-footer[b-l143hq6k82] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
}


/* TITULO DEL INFORME SELECCIONADO */

.informes-report-title-card[b-l143hq6k82] {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e6edf7;
    border-radius: 16px;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

    .informes-report-title-card[b-l143hq6k82]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    }

.informes-report-title-left[b-l143hq6k82] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.informes-report-icon-shell[b-l143hq6k82] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 13px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.informes-report-title-icon[b-l143hq6k82] {
    font-size: 22px;
    line-height: 1;
}

.informes-report-title-text[b-l143hq6k82] {
    min-width: 0;
}

.informes-report-kicker[b-l143hq6k82] {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 900;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.informes-report-title[b-l143hq6k82] {
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.informes-report-subtitle[b-l143hq6k82] {
    min-width: 0;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 650;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.informes-report-pill[b-l143hq6k82] {
    height: 28px;
    max-width: 220px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.06);
}

/* MENU DE INFORMES TIPO NAVMENU */

.inf-nav-group[b-l143hq6k82] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inf-nav-group-btn[b-l143hq6k82],
.e-btn.inf-nav-group-btn[b-l143hq6k82],
.e-btn.inf-nav-group-btn:focus[b-l143hq6k82],
[b-l143hq6k82] .e-btn.inf-nav-group-btn,
[b-l143hq6k82] .e-btn.inf-nav-group-btn:focus {
    width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #263449 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px !important;
    text-align: left !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

    .inf-nav-group-btn:hover[b-l143hq6k82],
    .e-btn.inf-nav-group-btn:hover[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-nav-group-btn:hover {
        background: #f8fafc !important;
        border-color: #eef2f7 !important;
        color: #1f2937 !important;
        transform: translateX(2px);
    }

.inf-nav-group.active > .inf-nav-group-btn[b-l143hq6k82],
.inf-nav-group.active > .e-btn.inf-nav-group-btn[b-l143hq6k82],
.inf-nav-group.active[b-l143hq6k82] >  .e-btn.inf-nav-group-btn {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
}

.inf-nav-group-btn .e-btn-content[b-l143hq6k82],
.e-btn.inf-nav-group-btn .e-btn-content[b-l143hq6k82],
[b-l143hq6k82] .e-btn.inf-nav-group-btn .e-btn-content {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-align: left !important;
}

.inf-nav-icon-wrap[b-l143hq6k82] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inf-nav-group.active .inf-nav-icon-wrap[b-l143hq6k82] {
    background: rgba(255, 255, 255, 0.15);
}

.inf-nav-icon[b-l143hq6k82] {
    font-size: 19px;
    line-height: 1;
}

.inf-nav-text[b-l143hq6k82] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-nav-chevron[b-l143hq6k82] {
    width: 19px;
    height: 19px;
    min-width: 19px;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.inf-nav-group.open .inf-nav-chevron[b-l143hq6k82] {
    transform: rotate(180deg);
}

.inf-nav-submenu[b-l143hq6k82] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0 5px 32px;
    animation: infSubmenuIn-b-l143hq6k82 0.18s ease both;
}

.inf-nav-sub-btn[b-l143hq6k82],
.e-btn.inf-nav-sub-btn[b-l143hq6k82],
.e-btn.inf-nav-sub-btn:focus[b-l143hq6k82],
[b-l143hq6k82] .e-btn.inf-nav-sub-btn,
[b-l143hq6k82] .e-btn.inf-nav-sub-btn:focus {
    width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 9px !important;
    text-align: left !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

    .inf-nav-sub-btn:hover[b-l143hq6k82],
    .e-btn.inf-nav-sub-btn:hover[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-nav-sub-btn:hover {
        background: #f8fafc !important;
        color: #1f2937 !important;
        border-color: #eef2f7 !important;
        transform: translateX(2px);
    }

    .inf-nav-sub-btn.active[b-l143hq6k82],
    .e-btn.inf-nav-sub-btn.active[b-l143hq6k82],
    .e-btn.inf-nav-sub-btn.active:focus[b-l143hq6k82],
    .e-btn.inf-nav-sub-btn.active:hover[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-nav-sub-btn.active,
    [b-l143hq6k82] .e-btn.inf-nav-sub-btn.active:focus,
    [b-l143hq6k82] .e-btn.inf-nav-sub-btn.active:hover {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #dbeafe !important;
    }

    .inf-nav-sub-btn .e-btn-content[b-l143hq6k82],
    .e-btn.inf-nav-sub-btn .e-btn-content[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-nav-sub-btn .e-btn-content {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: left !important;
    }

.inf-nav-sub-icon[b-l143hq6k82] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #94a3b8;
}

.inf-nav-sub-btn.active .inf-nav-sub-icon[b-l143hq6k82],
.inf-nav-sub-btn:hover .inf-nav-sub-icon[b-l143hq6k82] {
    color: #2563eb;
}

.inf-nav-sub-text[b-l143hq6k82] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CABECERA DEL INFORME ANTIGUA / FALLBACK */

.informes-almacen-current-card[b-l143hq6k82] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 13px;
    padding: 9px 11px;
}

.inf-current-label[b-l143hq6k82] {
    font-size: 11px;
    font-weight: 800;
    color: #1d4ed8;
}

.inf-current-title[b-l143hq6k82] {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 900;
    color: #1f2937;
}

.inf-current-pill[b-l143hq6k82] {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

/* FILTROS GENERICOS */

.informes-filters-grid[b-l143hq6k82] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

.inf-filter-item[b-l143hq6k82] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.inf-filter-item-full[b-l143hq6k82] {
    grid-column: 1 / -1;
}

.inf-filter-item label[b-l143hq6k82] {
    font-size: 12px;
    font-weight: 750;
    color: #4b5563;
}

.inf-range-form[b-l143hq6k82] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inf-range-row[b-l143hq6k82] {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

    .inf-range-row label[b-l143hq6k82] {
        font-size: 12px;
        font-weight: 750;
        color: #374151;
    }

.inf-range-control[b-l143hq6k82] {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px 88px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.inf-range-row-short[b-l143hq6k82] {
    max-width: 440px;
}

    .inf-range-row-short .inf-range-control[b-l143hq6k82] {
        max-width: 440px;
    }

.inf-filter-input[b-l143hq6k82] {
    width: 100%;
    height: 32px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    padding: 0 10px;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

    .inf-filter-input:focus[b-l143hq6k82] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .inf-filter-input[type="number"][b-l143hq6k82] {
        appearance: textfield;
    }

        .inf-filter-input[type="number"][b-l143hq6k82]::-webkit-outer-spin-button,
        .inf-filter-input[type="number"][b-l143hq6k82]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.inf-code-input[b-l143hq6k82] {
    text-align: left;
    font-weight: 850;
}

.inf-name-input[b-l143hq6k82] {
    color: #1f2937;
}

.inf-select-input[b-l143hq6k82] {
    max-width: 220px;
}

.inf-date-input[b-l143hq6k82],
.inf-number-input[b-l143hq6k82] {
    max-width: 120px;
    font-weight: 850;
}

.inf-check-grid[b-l143hq6k82],
.inf-existencias-options[b-l143hq6k82] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid #eef2f7;
}

.inf-check-item[b-l143hq6k82] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    font-size: 12px;
    font-weight: 650;
    color: #374151;
}

    .inf-check-item input[type="checkbox"][b-l143hq6k82] {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: #2563eb;
    }

/* RESUMEN */

.informes-almacen-preview[b-l143hq6k82] {
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #f8fafc;
    padding: 10px;
}

.inf-preview-title[b-l143hq6k82] {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    color: #1f2937;
}

.inf-preview-grid[b-l143hq6k82] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

    .inf-preview-grid div[b-l143hq6k82] {
        min-width: 0;
        padding: 7px 9px;
        border: 1px solid #eef2f7;
        border-radius: 10px;
        background: #ffffff;
    }

    .inf-preview-grid span[b-l143hq6k82] {
        display: block;
        margin-bottom: 3px;
        font-size: 10px;
        font-weight: 800;
        color: #64748b;
    }

    .inf-preview-grid strong[b-l143hq6k82] {
        display: block;
        min-width: 0;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 900;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ACCIONES */

.informes-actions-bar[b-l143hq6k82] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 9px;
    border-top: 1px solid #eef2f7;
}

.inf-primary-btn[b-l143hq6k82],
.inf-action-btn[b-l143hq6k82] {
    height: 34px;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.inf-primary-btn[b-l143hq6k82] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .inf-primary-btn:hover[b-l143hq6k82] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.inf-action-btn[b-l143hq6k82] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .inf-action-btn:hover[b-l143hq6k82] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.inf-pending-message[b-l143hq6k82] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #b45309;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 750;
}

    .inf-pending-message .material-symbols-outlined[b-l143hq6k82] {
        font-size: 18px;
        flex: 0 0 auto;
    }

/* BOTONES SYNCFUSION GENERALES */

.e-btn.inf-lookup-btn[b-l143hq6k82],
.e-btn.inf-lookup-btn:focus[b-l143hq6k82],
[b-l143hq6k82] .e-btn.inf-lookup-btn,
[b-l143hq6k82] .e-btn.inf-lookup-btn:focus {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #2563eb !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

    .e-btn.inf-lookup-btn:hover[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-lookup-btn:hover {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
        transform: translateY(-1px);
    }

    .e-btn.inf-lookup-btn .e-btn-content[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-lookup-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .e-btn.inf-lookup-btn .material-symbols-outlined[b-l143hq6k82],
    [b-l143hq6k82] .e-btn.inf-lookup-btn .material-symbols-outlined {
        font-size: 17px;
        line-height: 1;
    }

/* ANIMACIONES */

@keyframes informesPageIn-b-l143hq6k82 {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes informesCardIn-b-l143hq6k82 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes infSubmenuIn-b-l143hq6k82 {
    from {
        opacity: 0;
        transform: translateY(-4px);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .informes-page[b-l143hq6k82] {
        height: calc(100dvh - 96px);
    }

    .informes-summary-panel[b-l143hq6k82] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .informes-layout[b-l143hq6k82] {
        grid-template-columns: 245px minmax(0, 1fr);
    }

    .inf-summary-card[b-l143hq6k82] {
        height: 64px;
    }
}

@media (max-width: 980px) {
    .informes-page[b-l143hq6k82] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .informes-subtitle[b-l143hq6k82] {
        white-space: normal;
    }

    .informes-layout-panel[b-l143hq6k82] {
        height: auto;
        overflow: visible;
    }

    .informes-layout[b-l143hq6k82] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .informes-sidebar[b-l143hq6k82] {
        max-height: 150px;
        padding: 10px;
        gap: 8px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .informes-sidebar-subtitle[b-l143hq6k82] {
        display: none;
    }

    /* Botones de categoría un poco más compactos en móvil */
    [b-l143hq6k82] .e-btn.inf-nav-group-btn {
        min-height: 34px !important;
    }

    .informes-content[b-l143hq6k82] {
        overflow: visible;
    }

    .informes-config-panel[b-l143hq6k82] {
        height: auto;
        overflow: visible;
    }

    .informes-config-scroll[b-l143hq6k82] {
        overflow: visible;
    }

    .inf-range-row[b-l143hq6k82] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .inf-range-control[b-l143hq6k82] {
        grid-template-columns: 30px 88px minmax(0, 1fr);
    }

    .inf-preview-grid[b-l143hq6k82] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .informes-report-title-card[b-l143hq6k82] {
        align-items: flex-start;
        flex-direction: column;
    }

    .informes-report-pill[b-l143hq6k82] {
        max-width: 100%;
    }

    .informes-report-subtitle[b-l143hq6k82],
    .informes-report-title[b-l143hq6k82] {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .informes-summary-panel[b-l143hq6k82],
    .informes-filters-grid[b-l143hq6k82],
    .inf-preview-grid[b-l143hq6k82] {
        grid-template-columns: 1fr;
    }

    .informes-actions-bar[b-l143hq6k82] {
        flex-direction: column;
        align-items: stretch;
    }

    .inf-primary-btn[b-l143hq6k82],
    .inf-action-btn[b-l143hq6k82] {
        width: 100%;
    }

    .informes-almacen-current-card[b-l143hq6k82] {
        align-items: flex-start;
        flex-direction: column;
    }

    .inf-existencias-options[b-l143hq6k82] {
        justify-content: center;
    }

}

@media (max-width: 640px) {
    .informes-title[b-l143hq6k82] {
        font-size: 20px;
    }

    .informes-subtitle[b-l143hq6k82] {
        font-size: 12px;
    }

    .card-panel[b-l143hq6k82] {
        padding: 10px;
    }

    .inf-summary-card[b-l143hq6k82] {
        height: 62px;
    }

    .inf-summary-head[b-l143hq6k82] {
        width: 94px;
        font-size: 10px;
        padding: 0 10px;
    }

    .inf-summary-value[b-l143hq6k82] {
        font-size: 17px;
    }

    .inf-range-control[b-l143hq6k82] {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .inf-name-input[b-l143hq6k82] {
        grid-column: 2 / -1;
    }

    .informes-report-title-card[b-l143hq6k82] {
        padding: 11px 12px;
    }

    .informes-report-title-left[b-l143hq6k82] {
        align-items: flex-start;
    }

    .informes-report-icon-shell[b-l143hq6k82] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 12px;
    }

    .informes-report-title-icon[b-l143hq6k82] {
        font-size: 20px;
    }

    .informes-report-title[b-l143hq6k82] {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .informes-page[b-l143hq6k82],
    .informes-page *[b-l143hq6k82],
    .informes-page *[b-l143hq6k82]::before,
    .informes-page *[b-l143hq6k82]::after {
        animation: none !important;
        transition: none !important;
    }
}

.inf-primary-btn[b-l143hq6k82],
.inf-action-btn[b-l143hq6k82] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.inf-action-icon[b-l143hq6k82] {
    font-size: 18px;
    line-height: 1;
}

/* Tarjeta de filtros de los informes del diseñador (los de existencias usan su propio formulario). */

.inf-param-card[b-l143hq6k82] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    overflow: hidden;
    margin: 2px 0 4px;
}

.inf-param-card-head[b-l143hq6k82] {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
}

.inf-param-card-title[b-l143hq6k82] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}

.inf-param-card-body[b-l143hq6k82] {
    padding: 16px;
}

.inf-parametros[b-l143hq6k82] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 12px;
    align-items: start;
}

.inf-param-vacio[b-l143hq6k82] {
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7280;
}
/* _content/ErpPowergest/Presentation/Informes/Areas/Almacenes/Pages/TrazabilidadLotesPage.razor.rz.scp.css */
.trz[b-qo5s9nlct5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px 40px;
}

.trz__volver[b-qo5s9nlct5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

    .trz__volver:hover[b-qo5s9nlct5] { text-decoration: underline; }

    .trz__volver .material-symbols-rounded[b-qo5s9nlct5] { font-size: 18px; }

.trz__title[b-qo5s9nlct5] {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.trz__subtitle[b-qo5s9nlct5] {
    margin: 4px 0 16px;
    font-size: 13.5px;
    color: #6b7280;
}

.trz__msg[b-qo5s9nlct5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.trz__msg--error[b-qo5s9nlct5] { background: #fef2f2; color: #991b1b; }

.trz__bloque[b-qo5s9nlct5] {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.trz__tipos[b-qo5s9nlct5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.trz__tipo[b-qo5s9nlct5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.trz__tipo.is-sel[b-qo5s9nlct5] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.trz__campos[b-qo5s9nlct5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 14px;
    align-items: end;
    margin-top: 6px;
}

/* Con ::deep además del selector directo: el contenedor del campo lo pintan CampoTeclado y CampoCodigo
   (componentes hijos, que reciben la clase por parámetro) y el CSS aislado de la página no los marca. */
.trz__campo[b-qo5s9nlct5],
.trz[b-qo5s9nlct5]  .trz__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
}

.trz__check[b-qo5s9nlct5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.trz__input[b-qo5s9nlct5],
.trz[b-qo5s9nlct5]  .trz__input {
    padding: 7px 9px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
}

    .trz[b-qo5s9nlct5]  .ccb-selector > .trz__input {
        width: 100%;
        box-sizing: border-box;
    }

.trz__nota[b-qo5s9nlct5] {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #6b7280;
}

.trz__acciones[b-qo5s9nlct5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.trz__btn[b-qo5s9nlct5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.trz__btn--primario[b-qo5s9nlct5] {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
}

.trz__btn:disabled[b-qo5s9nlct5] { opacity: .55; cursor: default; }

.trz__cuenta[b-qo5s9nlct5] {
    font-size: 13px;
    color: #374151;
}

.trz__resultado[b-qo5s9nlct5] {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.trz__cabecera[b-qo5s9nlct5] {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: #374151;
}

.trz__cabecera--aviso[b-qo5s9nlct5] { color: #92400e; }

.trz__seccion[b-qo5s9nlct5] { margin-top: 16px; }

.trz__h2[b-qo5s9nlct5] {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #1f2937;
}

.trz__tabla-scroll[b-qo5s9nlct5] { overflow-x: auto; }

.trz__tabla[b-qo5s9nlct5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .trz__tabla th[b-qo5s9nlct5] {
        padding: 5px 8px;
        border-bottom: 1px solid #d1d5db;
        background: #f9fafb;
        text-align: left;
        font-weight: 700;
        color: #374151;
        white-space: nowrap;
    }

    .trz__tabla td[b-qo5s9nlct5] {
        padding: 4px 8px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .trz__tabla .num[b-qo5s9nlct5] {
        text-align: right;
        white-space: nowrap;
    }

    .trz__tabla tfoot td[b-qo5s9nlct5] {
        border-top: 1px solid #d1d5db;
        border-bottom: none;
        font-weight: 700;
    }
/* _content/ErpPowergest/Presentation/Informes/Components/AjustesImpresionListadosPanel.razor.rz.scp.css */
.aimp[b-w6jpqyry3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
}

.aimp__fila[b-w6jpqyry3n] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.aimp__campo[b-w6jpqyry3n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #374151;
}

.aimp__lbl[b-w6jpqyry3n] {
    font-weight: 700;
    color: #4b5563;
}

.aimp__campo select[b-w6jpqyry3n],
.aimp__campo input[type="number"][b-w6jpqyry3n] {
    min-width: 120px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

.aimp__campo input[type="color"][b-w6jpqyry3n] {
    width: 56px;
    height: 32px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}

.aimp__check[b-w6jpqyry3n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.aimp__check input[b-w6jpqyry3n] {
    width: 15px;
    height: 15px;
    accent-color: #1A3D6E;
}

.aimp__nota[b-w6jpqyry3n] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.aimp__acciones[b-w6jpqyry3n] {
    display: flex;
    gap: 8px;
}

.aimp__btn[b-w6jpqyry3n] {
    padding: 7px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.aimp__btn.is-primary[b-w6jpqyry3n] {
    border-color: #1A3D6E;
    background: #1A3D6E;
    color: #fff;
}

.aimp__btn:disabled[b-w6jpqyry3n] {
    opacity: .6;
    cursor: default;
}
/* _content/ErpPowergest/Presentation/Informes/Components/EmisorListado.razor.rz.scp.css */
/* El emisor de listados (EL2): rangos + acciones + tabla. Mismo lenguaje visual que el diálogo de
   /informes del que nace (panel blanco, morado #6d5ef1 para la acción principal). Sin .btn de Bootstrap:
   app.css fuerza width:100% en .btn-primary.

   El DIÁLOGO DE RANGOS (EL2b) copia la disposición del ERP antiguo: rótulo a la izquierda, el código con
   su lupa y el nombre de la ficha al lado; un desde encima de su hasta; hasta tres columnas. */

.emisor[b-bj233y970o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.emisor__nota[b-bj233y970o] {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

/* ── Rangos ─────────────────────────────────────────────────────────────────────────────────────── */

/* Las COLUMNAS las da Application (DisposicionRangosListado): cada una es tan ancha como sus campos y
   no más (flex sin crecer). Van en BANDAS: una sola si caben todas; si no, lo que sobra se reparte en
   otra banda debajo (EnBandas, con la cuenta que mide columnasRangos.js). El wrap queda de red por si
   la medida no llega. El sitio que sobra es para la tabla. */
.emisor__rangos[b-bj233y970o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* El hueco entre columnas (column-gap) lo lee columnasRangos.js para decidir cuántas caben. */
.emisor__banda[b-bj233y970o] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

/* La separación entre columnas es ELÁSTICA: 24 px como mínimo (los dos huecos que rodean al separador)
   y hasta 96 px cuando el contenedor es ancho. El separador parte de cero (flex-basis: 0), así que al
   decidir qué cabe en la fila no cuenta: crece solo con lo que sobra, nunca a costa de apilar. */
.emisor__sep[b-bj233y970o] {
    flex: 1 1 0;
    max-width: 72px;
    min-width: 0;
}

.emisor__col[b-bj233y970o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 100%;

    /* Anchos por clase de columna. --rng-label lo pone el emisor por columna: el rótulo más largo en ch. */
    /* El control estrecho mide lo que el código de la columna ancha (8.5rem: cabe una fecha con su
       calendario): con 10rem, tres columnas no entraban al lado del menú de informes en 1440 px. */
    --rng-label: 12ch;
    --rng-control: 8.5rem;
    --rng-desc: 0px;
}

/* Columna ANCHA: código con lupa + nombre de la ficha al lado; un texto libre ocupa las dos celdas. */
.emisor__col--ancho[b-bj233y970o] {
    --rng-control: 8.5rem;
    --rng-desc: 14rem;
}

/* La celda: rótulo | control | nombre. El rótulo se alinea a la IZQUIERDA y su columna mide lo justo. */
.emisor__campo[b-bj233y970o] {
    display: grid;
    grid-template-columns: var(--rng-label) var(--rng-control) var(--rng-desc);
    align-items: center;
    gap: 0 10px;
    min-width: 0;
}

/* Sin nombre al lado: la celda del nombre no existe. */
.emisor__campo--ancho[b-bj233y970o] {
    grid-template-columns: var(--rng-label) var(--rng-control);
}

/* En una columna ancha, un campo sin lupa (texto libre) se estira sobre las celdas de código y nombre. */
.emisor__col--ancho .emisor__campo--ancho[b-bj233y970o] {
    grid-template-columns: var(--rng-label) calc(var(--rng-control) + var(--rng-desc) + 10px);
}

.emisor__campo--check .emisor__control[b-bj233y970o] {
    justify-self: start;
}

.emisor__label[b-bj233y970o] {
    font-size: 12.5px;
    font-weight: 600;
    color: #5b6472;
    white-space: nowrap;
    text-align: left;
}

.emisor__control[b-bj233y970o] {
    min-width: 0;
}

/* El nombre de la ficha, como el eco de la cabecera del documento: se lee, no se edita. */
.emisor__desc[b-bj233y970o] {
    min-width: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .emisor__desc:empty[b-bj233y970o] {
        background: #fcfcfd;
        border-style: dashed;
    }

/* Teclado tipo EXCEL: en NAVEGACIÓN el caret va oculto (el campo se ve activo, no «en modo tecleo»); en
   EDICIÓN («ff-editing», la pone enterCampos.js) reaparece. Solo en los campos anclados (rng-). El input
   viene de los componentes hijos, de ahí el ::deep. La ventana de búsqueda tiene su propio teclado y en
   ella se escribe siempre. */
/* El contenedor del BloqueTeclado no es una caja: los rangos y el pie siguen siendo hijos de la maqueta del
   emisor (el pie pegado abajo depende de ello). */
.emisor[b-bj233y970o]  .emisor__bloque {
    display: contents;
}

.emisor[b-bj233y970o]  [id^="rng-"] input:focus {
    caret-color: transparent;
}

.emisor[b-bj233y970o]  [id^="rng-"] input.ff-editing {
    caret-color: auto;
}

.emisor[b-bj233y970o]  .sel-overlay input:focus {
    caret-color: auto;
}

@media (max-width: 560px) {
    .emisor__col[b-bj233y970o] {
        width: 100%;
    }

    /* Apiladas no hay nada que separar: sin esto cada separador ocuparía una fila vacía. */
    .emisor__sep[b-bj233y970o] {
        display: none;
    }

    .emisor__campo[b-bj233y970o],
    .emisor__campo--ancho[b-bj233y970o],
    .emisor__col--ancho .emisor__campo--ancho[b-bj233y970o] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ── Errores y acciones ─────────────────────────────────────────────────────────────────────────── */

.emisor__error[b-bj233y970o] {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12.5px;
}

.emisor__aviso[b-bj233y970o] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

/* El pie, pegado al borde inferior de la zona que se desplaza (la del anfitrión: la página de informes,
   el modal o la ventana): con muchos rangos los botones no se van de la vista. Fondo opaco y una sombra
   hacia arriba para que se lea que hay campos debajo. */
.emisor__pie[b-bj233y970o] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 4px;
    background: #fff;
    border-top: 1px solid #eef0f4;
    box-shadow: 0 -8px 12px -10px rgba(15, 23, 42, .18);
}

.emisor__actions[b-bj233y970o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.emisor__actions-sp[b-bj233y970o] {
    margin-left: auto;
}

/* LP3b: «Listado pautado», entre las salidas y el envío. */
.emisor__check[b-bj233y970o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    color: #374151;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.emisor__check input[b-bj233y970o] {
    width: 15px;
    height: 15px;
    accent-color: #1A3D6E;
    cursor: pointer;
}

.emisor__btn[b-bj233y970o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .emisor__btn:hover:not(:disabled)[b-bj233y970o] {
        background: #f9fafb;
    }

    .emisor__btn:disabled[b-bj233y970o] {
        opacity: .5;
        cursor: default;
    }

    .emisor__btn:focus-visible[b-bj233y970o] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .emisor__btn .material-symbols-rounded[b-bj233y970o] {
        font-size: 17px;
    }

    .emisor__btn.is-primary[b-bj233y970o] {
        border-color: #6d5ef1;
        background: #6d5ef1;
        color: #fff;
    }

        .emisor__btn.is-primary:hover:not(:disabled)[b-bj233y970o] {
            background: #5b4ce0;
            border-color: #5b4ce0;
        }

/* Acciones secundarias (anclar, editar): mismo botón, un poco más discreto, a la derecha. */
.emisor__btn--sec[b-bj233y970o] {
    color: #4b5563;
    font-weight: 600;
}

/* ── Anclar al menú (EL3): una fila plegable bajo las acciones ──────────────────────────────────── */

.emisor__anclar[b-bj233y970o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    border: 1px dashed #c7d2fe;
    border-radius: 10px;
    background: #f5f3ff;
}

.emisor__anclar-lbl[b-bj233y970o] {
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
}

.emisor__anclar-input[b-bj233y970o] {
    flex: 1 1 16rem;
    min-width: 12rem;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
}

.emisor__anclar-nota[b-bj233y970o] {
    flex-basis: 100%;
    font-size: 12px;
    color: #6b7280;
}

/* ── Enviar por correo (EL9): misma forma que anclar, en otro color ─────────────────────────────── */

.emisor__enviar[b-bj233y970o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    border: 1px dashed #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
}

.emisor__enviar-formatos[b-bj233y970o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.emisor__enviar-fmt[b-bj233y970o] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

/* ── Tabla ──────────────────────────────────────────────────────────────────────────────────────── */

.emisor__tabla-wrap[b-bj233y970o] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.emisor__tabla[b-bj233y970o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .emisor__tabla thead th[b-bj233y970o] {
        position: sticky;
        top: 0;
        background: #f9fafb;
        color: #374151;
        font-weight: 700;
        text-align: left;
        padding: 8px 12px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .emisor__tabla tbody td[b-bj233y970o] {
        padding: 7px 12px;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
    }

    .emisor__tabla tbody tr:hover[b-bj233y970o] {
        background: #f9fafb;
    }

    /* FUN-788: subtotal de un grupo y total del listado, como los pies del PDF. */
    .emisor__tabla tbody tr.emisor__subtotal td[b-bj233y970o] {
        font-weight: 600;
        border-top: 1px solid #d1d5db;
    }

    .emisor__tabla tbody tr.emisor__total td[b-bj233y970o] {
        font-weight: 700;
        border-top: 2px solid #374151;
    }

    .emisor__tabla th.num[b-bj233y970o], .emisor__tabla td.num[b-bj233y970o] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.emisor__contador[b-bj233y970o] {
    color: #6b7280;
    font-size: 11.5px;
}

/* La tabla sin filas lo dice en su propio cuerpo (FUN-V598). */
.emisor__sin-resultados td[b-bj233y970o] {
    padding: 18px 12px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}
/* _content/ErpPowergest/Presentation/Informes/Components/EmisorListadoModal.razor.rz.scp.css */
/* Chrome del emisor en modal. Las clases .dlg y .dlg__* se conservan tal cual venían de /informes: las
   pruebas E2E (listados.spec.js) buscan `.dlg[role="dialog"]`. */

.dlg__backdrop[b-wkf61x6prf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
}

.dlg[b-wkf61x6prf] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    /* Ancho para dos columnas de rangos (rótulo + código + nombre × 2) sin apretar. */
    width: min(1040px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    overflow: hidden;
}

.dlg__head[b-wkf61x6prf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
}

.dlg__title[b-wkf61x6prf] {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
}

.dlg__close[b-wkf61x6prf] {
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    display: inline-flex;
    padding: 4px;
    border-radius: 8px;
}

    .dlg__close:hover[b-wkf61x6prf] {
        background: #f3f4f6;
        color: #111827;
    }

.dlg__body[b-wkf61x6prf] {
    padding: 18px 20px;
    overflow: auto;
}

.dlg__btn[b-wkf61x6prf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .dlg__btn:hover[b-wkf61x6prf] {
        background: #f9fafb;
    }
/* _content/ErpPowergest/Presentation/Informes/Components/ParametroListadoField.razor.rz.scp.css */
/* Mismo lenguaje visual que las fichas (sistema «cform» de ClienteFicha): etiqueta de 11.5px sobre
   campo de 36px, radios y colores idénticos. Se replica aquí en vez de reutilizarse porque aquel
   CSS está anclado en «.cform-page» y aislado por componente — no llega a esta pantalla. */

.inf-param[b-byz6qj9n5x] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    max-width: 340px;
}

/* Sin etiqueta propia (el emisor la pinta a la izquierda): el campo ocupa la celda que le den. */
.inf-param--sin-etiqueta[b-byz6qj9n5x] {
    max-width: none;
    width: 100%;
}

.inf-param-label[b-byz6qj9n5x] {
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 600;
    color: #5b6472;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ::deep además del selector directo: el input viene del componente hijo CampoConBuscador,
   que hereda la clase por ClaseInput, y el CSS aislado no lo marcaría. */
.inf-param-input[b-byz6qj9n5x],
[b-byz6qj9n5x] .inf-param-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d5dae1;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    color: #111827;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .inf-param-input[b-byz6qj9n5x]::placeholder,
    [b-byz6qj9n5x] .inf-param-input::placeholder {
        color: #9ca3af;
    }

    .inf-param-input:hover[b-byz6qj9n5x],
    [b-byz6qj9n5x] .inf-param-input:hover {
        border-color: #b9c1cc;
    }

    .inf-param-input:focus[b-byz6qj9n5x],
    [b-byz6qj9n5x] .inf-param-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    }

/* La caja del buscador ocupa la columna entera. */
[b-byz6qj9n5x] .inf-lookup-box,
[b-byz6qj9n5x] .campo-con-buscador {
    width: 100%;
}
/* _content/ErpPowergest/Presentation/Informes/Components/VistaListadoInforme.razor.rz.scp.css */
.vista-listado[b-d3lk7u9mdm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vista-listado__subtitulo[b-d3lk7u9mdm] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.vista-listado__cabecera[b-d3lk7u9mdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 13px;
    color: #374151;
}

.vista-listado__titulo[b-d3lk7u9mdm] {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.vista-listado__scroll[b-d3lk7u9mdm] {
    overflow-x: auto;
}

.vista-listado__tabla[b-d3lk7u9mdm] {
    width: 100%;
}

.vista-listado__tabla .num[b-d3lk7u9mdm] {
    text-align: right;
    white-space: nowrap;
}

.vista-listado__tabla tr.subtotal td[b-d3lk7u9mdm] {
    font-weight: 700;
}
/* _content/ErpPowergest/Presentation/Informes/Etiquetas/EtiquetasPage.razor.rz.scp.css */
/* A todo el ancho y todo el alto, como las demás pantallas: el borde lo pone .main-body. El último bloque
   («En qué hoja») se estira hasta abajo y los botones quedan al pie. */
.etq[b-3e3alos7uk] {
    width: 100%;
    min-height: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Sin «>»: los bloques van dentro del envoltorio de BloqueTeclado, que no es una caja (display: contents),
   así que son elementos del flex de .etq sin ser sus hijos directos en el DOM. */
.etq .etq__bloque:last-of-type[b-3e3alos7uk] {
    flex: 1 1 auto;
}

/* Cabecera como en el resto de pantallas: título a la izquierda y los botones arriba a la derecha. */
/* Sin `flex-wrap`: si la barra bajara de línea, su script nunca vería que falta sitio y no replegaría
   los botones al menú «···». */
.etq__head[b-3e3alos7uk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.etq__head-txt[b-3e3alos7uk] { min-width: 0; flex: 1 1 auto; }

.etq__head[b-3e3alos7uk]  .etq__cmdbar { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.etq__title[b-3e3alos7uk] {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
}

.etq__subtitle[b-3e3alos7uk] {
    margin: 4px 0 16px;
    font-size: 13.5px;
    color: #6b7280;
}

.etq__msg[b-3e3alos7uk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.etq__msg--error[b-3e3alos7uk] { background: #fef2f2; color: #991b1b; }
.etq__msg--ok[b-3e3alos7uk] { background: #f0fdf4; color: #166534; }

.etq__bloque[b-3e3alos7uk] {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.etq__h2[b-3e3alos7uk] {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: #374151;
}

.etq__tipos[b-3e3alos7uk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.etq__tipo[b-3e3alos7uk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.etq__tipo.is-sel[b-3e3alos7uk] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.etq__campos[b-3e3alos7uk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 14px;
    align-items: end;
}

/* Con ::deep además del selector directo: el contenedor del campo lo pintan CampoTeclado y CampoCodigo
   (componentes hijos, que reciben la clase por parámetro) y el CSS aislado de la página no los marca. */
.etq__campo[b-3e3alos7uk],
.etq[b-3e3alos7uk]  .etq__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
}

.etq__campo--ancho[b-3e3alos7uk],
.etq[b-3e3alos7uk]  .etq__campo--ancho {
    grid-column: span 2;
}

.etq__check[b-3e3alos7uk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.etq__input[b-3e3alos7uk],
.etq[b-3e3alos7uk]  .etq__input {
    padding: 7px 9px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
}

    /* El input del código ocupa su sitio junto a la lupa (que lleva su propio hueco). */
    .etq[b-3e3alos7uk]  .ccb-selector > .etq__input {
        width: 100%;
        box-sizing: border-box;
    }

.etq__nota[b-3e3alos7uk] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #6b7280;
}

/* «Salen N etiquetas»: la respuesta de Contar, bajo la cabecera. */
.etq__cuenta[b-3e3alos7uk] {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

@media (max-width: 600px) {
    .etq__campo--ancho[b-3e3alos7uk] { grid-column: auto; }
}

/* Vista previa: las etiquetas en el visor del navegador, con alto para ver la hoja entera. */
.etq__vista-marco[b-3e3alos7uk] {
    display: block;
    width: 100%;
    height: min(75vh, 900px);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}
/* _content/ErpPowergest/Presentation/Informes/Formatos/FormatosImpresionPage.razor.rz.scp.css */
/* Formatos de impresión. Mismo lenguaje visual que la lanzadera de Listados (InformesPage.razor.css):
   paneles blancos de radio 14, título 23/800, azul #2563eb para lo elegido y morado #6d5ef1 para la
   acción principal. Botones propios, NUNCA .btn de Bootstrap (app.css estira .btn-primary a lo ancho). */

.formatos[b-xqh00llync] {
    display: flex;
    flex-direction: column;
    gap: 9px;   /* el ritmo de Clientes entre cabecera y contenido */
    width: 100%;
    min-width: 0;
    container: formatos-page / inline-size;
}

/* ── Cabecera ── */

/* Como en Técnicos y Clientes: sin `flex-wrap` (si la barra bajara de línea, su script nunca vería que
   falta sitio y no replegaría nada al menú «···»), título a la izquierda y CommandBar a la derecha. */
.formatos__head[b-xqh00llync] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.formatos__head-txt[b-xqh00llync] {
    flex: 1 1 auto;
    min-width: 0;
}

/* El selector de ficheros va oculto: lo abre el botón de la barra. La pinta InputFile (hijo), de ahí ::deep. */
.formatos__head[b-xqh00llync]  .formatos__file-oculto {
    display: none;
}

.formatos__title[b-xqh00llync] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.formatos__subtitle[b-xqh00llync] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.formatos__head-acciones[b-xqh00llync] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ── Botones ── */

.formatos__btn[b-xqh00llync] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}

    .formatos__btn:hover:not(:disabled)[b-xqh00llync] {
        border-color: #9ca3af;
        background: #f9fafb;
    }

    .formatos__btn:disabled[b-xqh00llync],
    .formatos__btn.is-disabled[b-xqh00llync] {
        opacity: .55;
        cursor: default;
    }

    .formatos__btn:focus-visible[b-xqh00llync],
    .formatos__btn:focus-within[b-xqh00llync] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .formatos__btn .material-symbols-rounded[b-xqh00llync] {
        font-size: 18px;
    }

.formatos__btn--primario[b-xqh00llync] {
    border-color: #6d5ef1;
    background: #6d5ef1;
    color: #fff;
}

    .formatos__btn--primario:hover:not(:disabled)[b-xqh00llync] {
        border-color: #5b4ce0;
        background: #5b4ce0;
        color: #fff;
    }

.formatos__btn--secundario[b-xqh00llync] {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.formatos__btn--peligro[b-xqh00llync] {
    color: #b91c1c;
}

    .formatos__btn--peligro:hover:not(:disabled)[b-xqh00llync] {
        border-color: #fca5a5;
        background: #fef2f2;
    }

/* El InputFile cubre el botón entero: el clic en cualquier parte abre el selector de ficheros. */
.formatos__btn[b-xqh00llync]  .formatos__file,
.formatos__btn[b-xqh00llync]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.formatos__enlace[b-xqh00llync] {
    padding: 0;
    border: 0;
    background: none;
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
}

    .formatos__enlace:hover[b-xqh00llync] {
        text-decoration: underline;
    }

/* ── Aviso pastel ── */

.formatos__aviso[b-xqh00llync] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    line-height: 1.5;
}

.formatos__aviso-ico[b-xqh00llync] {
    font-size: 22px;
    color: #6d5ef1;
}

.formatos__aviso-txt[b-xqh00llync] {
    flex: 1 1 auto;
}

.formatos__aviso-cerrar[b-xqh00llync] {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

    .formatos__aviso-cerrar:hover[b-xqh00llync] {
        opacity: 1;
        background: rgba(255, 255, 255, .6);
    }

/* ── Mensajes ── */

.formatos__msg[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
}

    .formatos__msg .material-symbols-rounded[b-xqh00llync] {
        font-size: 19px;
    }

.formatos__msg--ok[b-xqh00llync] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.formatos__msg--error[b-xqh00llync] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.formatos__traido[b-xqh00llync] {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-size: 13px;
    color: #374151;
}

.formatos__traido-head[b-xqh00llync] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.formatos__traido-lista[b-xqh00llync] {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .formatos__traido-lista li[b-xqh00llync] {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .formatos__traido-lista .material-symbols-rounded[b-xqh00llync] {
        font-size: 16px;
        align-self: center;
    }

.formatos__ok[b-xqh00llync] {
    color: #16a34a;
}

.formatos__ko[b-xqh00llync] {
    color: #dc2626;
}

.formatos__nota[b-xqh00llync] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #6b7280;
}

/* ── Cuerpo: árbol + detalle ── */

.formatos__cuerpo[b-xqh00llync] {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.formatos__arbol[b-xqh00llync],
.formatos__ficha[b-xqh00llync],
.formatos__bienvenida[b-xqh00llync] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.formatos__arbol[b-xqh00llync] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.formatos__buscar[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin-bottom: 6px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
}

    .formatos__buscar:focus-within[b-xqh00llync] {
        border-color: #c7d2fe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

    .formatos__buscar .material-symbols-rounded[b-xqh00llync] {
        font-size: 18px;
        color: #9ca3af;
    }

    .formatos__buscar input[b-xqh00llync] {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 13px;
        color: #374151;
    }

.formatos__arbol-vacio[b-xqh00llync] {
    margin: 8px 4px;
    font-size: 13px;
    color: #9ca3af;
}

.formatos__cat + .formatos__cat[b-xqh00llync] {
    margin-top: 8px;
}

.formatos__cat-titulo[b-xqh00llync] {
    padding: 6px 8px 4px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.formatos__doc-fila[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .formatos__doc-fila:hover[b-xqh00llync] {
        background: #f3f4f6;
    }

.formatos__doc.is-sel > .formatos__doc-fila[b-xqh00llync] {
    background: #eef2ff;
    color: #2563eb;
}

.formatos__caret[b-xqh00llync] {
    font-size: 18px;
    color: #9ca3af;
}

.formatos__doc-ico[b-xqh00llync] {
    font-size: 18px;
    color: #6d5ef1;
}

.formatos__doc-nombre[b-xqh00llync] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.formatos__cuenta[b-xqh00llync] {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.formatos__hojas[b-xqh00llync] {
    margin: 2px 0 6px 30px;
    padding: 0 0 0 8px;
    border-left: 2px solid #eef2ff;
    list-style: none;
}

.formatos__hojas-vacio[b-xqh00llync] {
    padding: 5px 8px;
    color: #9ca3af;
    font-size: 12.5px;
    font-style: italic;
}

.formatos__hoja[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

    .formatos__hoja:hover[b-xqh00llync] {
        background: #f3f4f6;
    }

    .formatos__hoja.is-sel[b-xqh00llync] {
        background: #2563eb;
        color: #fff;
    }

        .formatos__hoja.is-sel .formatos__chip[b-xqh00llync] {
            background: rgba(255, 255, 255, .22);
            color: #fff;
        }

.formatos__hoja-nombre[b-xqh00llync] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.formatos__chip[b-xqh00llync] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.formatos__chip--defecto[b-xqh00llync] {
    background: #dcfce7;
    color: #166534;
}

.formatos__chip--gris[b-xqh00llync] {
    background: #f9fafb;
    color: #6b7280;
}

.formatos__chips[b-xqh00llync] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* ── Detalle ── */

.formatos__detalle[b-xqh00llync] {
    min-width: 0;
}

.formatos__ficha[b-xqh00llync] {
    padding: 16px 18px;
}

.formatos__ficha-doc[b-xqh00llync] {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.formatos__ficha-titulo[b-xqh00llync] {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 800;
    color: #1f2937;
}

.formatos__ficha-desc[b-xqh00llync] {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.formatos__input[b-xqh00llync] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    font-size: 13px;
}

    .formatos__input:focus[b-xqh00llync] {
        outline: 0;
        border-color: #6d5ef1;
        box-shadow: 0 0 0 3px rgba(109, 94, 241, .15);
    }

.formatos__acciones[b-xqh00llync] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}

.formatos__fila-botones[b-xqh00llync] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.formatos__fila-botones--fin[b-xqh00llync] {
    justify-content: flex-end;
    margin-top: 16px;
}

.formatos__vista[b-xqh00llync] {
    padding: 16px;
    border-radius: 12px;
    background: #f3f4f6;
}

.formatos__vista-msg[b-xqh00llync] {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.formatos__tarjetas[b-xqh00llync] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.formatos__tarjeta[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #6d5ef1;
    border-radius: 12px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .formatos__tarjeta:hover[b-xqh00llync] {
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    }

.formatos__tarjeta-nombre[b-xqh00llync] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Sin nada elegido: el papel en transparencia con el mensaje encima ── */

.formatos__bienvenida[b-xqh00llync] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 28px;
    min-height: 460px;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.formatos__papel-fondo[b-xqh00llync] {
    width: min(360px, 80%);
    height: auto;
    opacity: .55;
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, .08));
}

.formatos__bienvenida-msg[b-xqh00llync] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(380px, 86%);
    transform: translate(-50%, -50%);
    padding: 18px 20px;
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    background: rgba(238, 242, 255, .94);
    color: #3730a3;
    text-align: center;
    box-shadow: 0 10px 28px rgba(55, 48, 163, .10);
}

    .formatos__bienvenida-msg .material-symbols-rounded[b-xqh00llync] {
        font-size: 30px;
        color: #6d5ef1;
    }

    .formatos__bienvenida-msg h2[b-xqh00llync] {
        margin: 4px 0 6px;
        font-size: 17px;
        font-weight: 800;
    }

    .formatos__bienvenida-msg p[b-xqh00llync] {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }

/* ── Modal «Copiar a otros documentos» ── */

.formatos__modal-fondo[b-xqh00llync] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .35);
}

.formatos__modal[b-xqh00llync] {
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

.formatos__modal-titulo[b-xqh00llync] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
}

.formatos__destinos[b-xqh00llync] {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-y: auto;
}

.formatos__destinos-cat[b-xqh00llync] {
    margin-top: 8px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.formatos__destino[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
}

.formatos__destino--opcion[b-xqh00llync] {
    margin-top: 12px;
    font-weight: 600;
}

/* ── Tamaño de la hoja de un formato de etiquetas ── */

.formatos__tamano[b-xqh00llync] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.formatos__tamano-head[b-xqh00llync] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
    color: #1f2937;
}

.formatos__tamano-resumen[b-xqh00llync] {
    flex: 1 1 auto;
    color: #4b5563;
}

.formatos__tamano-rejilla[b-xqh00llync] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px 12px;
    margin-top: 10px;
}

.formatos__tamano-campo[b-xqh00llync] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #4b5563;
}

.formatos__tamano-check[b-xqh00llync] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: #4b5563;
}

.formatos__tamano-campo--ancho[b-xqh00llync] {
    margin-top: 10px;
    max-width: 360px;
}

.formatos__nota--aviso[b-xqh00llync] {
    color: #b45309;
    font-weight: 600;
}

/* ── Traer de Powergest escritorio: la lista de formatos de la carpeta, con su casilla ── */

.formatos__modal--ancho[b-xqh00llync] {
    width: min(760px, 100%);
}

.formatos__modal--ancho > .formatos__btn[b-xqh00llync] {
    align-self: flex-start;
    margin-top: 12px;
}

.formatos__candidatos[b-xqh00llync] {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-y: auto;
}

.formatos__candidato[b-xqh00llync] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 6px 2px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
}

.formatos__candidato:last-child[b-xqh00llync] {
    border-bottom: 0;
}

.formatos__candidato.is-no[b-xqh00llync] {
    color: #9ca3af;
    cursor: default;
}

.formatos__candidato-nombre[b-xqh00llync] {
    min-width: 7ch;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.formatos__candidato-piezas[b-xqh00llync],
.formatos__candidato-motivo[b-xqh00llync] {
    flex-basis: 100%;
    padding-left: 24px;
    font-size: 12px;
    color: #6b7280;
}

.formatos__candidato.is-no .formatos__candidato-motivo[b-xqh00llync],
.formatos__candidato-falta[b-xqh00llync],
.formatos__traido-falta[b-xqh00llync] {
    color: #b45309;
}

.formatos__traido-falta[b-xqh00llync] {
    font-size: 12px;
}

.formatos__candidato-defecto[b-xqh00llync] {
    padding: 1px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 600;
}

.formatos__imagenes[b-xqh00llync] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
}

.formatos__imagenes .formatos__nota[b-xqh00llync] {
    flex: 1 1 260px;
    margin: 0;
}

/* ── Responsive: al ancho real del área de contenido, como Listados ── */

@container formatos-page (max-width: 760px) {
    .formatos__cuerpo[b-xqh00llync] {
        grid-template-columns: 1fr;
    }

    .formatos__arbol[b-xqh00llync] {
        max-height: none;
    }

    .formatos__title[b-xqh00llync] {
        font-size: 21px;
    }
}
/* _content/ErpPowergest/Presentation/Informes/Formatos/MiniaturaFormato.razor.rz.scp.css */
.miniatura[b-s4w7c7sz5a] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    font-family: Arial, Helvetica, sans-serif;
}

.miniatura__papel[b-s4w7c7sz5a] {
    fill: #ffffff;
    stroke: #d1d5db;
    stroke-width: 2;
}

.miniatura__dato[b-s4w7c7sz5a] {
    fill: #e0ecff;
    stroke: #bfd4f2;
    stroke-width: .6;
}

.miniatura__rotulo[b-s4w7c7sz5a] {
    fill: #33587e;
}

.miniatura__imagen[b-s4w7c7sz5a] {
    fill: #f1f5f9;
    stroke: #cbd5e1;
    stroke-dasharray: 4 3;
}

.miniatura__cuerpo[b-s4w7c7sz5a] {
    fill: none;
    stroke: #93c5fd;
    stroke-width: 1.2;
    stroke-dasharray: 6 4;
}
/* _content/ErpPowergest/Presentation/Informes/Listados/DisenadorListadoPage.razor.rz.scp.css */
/* Diseñador de listados — cascarón de la maqueta. Estilo mínimo; pensado para rediseñar. */

.disenador[b-ovmj92qdex] {
    width: 100%;
    height: 100%; 
    min-height: 0;
    padding: 0;   /* como Clientes: el borde lo pone .main-body */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
}

/* Cabecera como en Técnicos y Clientes: sin `flex-wrap` (si la barra bajara de línea, su script nunca
   vería que falta sitio y no replegaría nada al menú «···»), título a la izquierda y barra a la derecha. */
.disenador__head[b-ovmj92qdex] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.disenador__head-txt[b-ovmj92qdex] {
    flex: 1 1 auto;
    min-width: 0;
}

.disenador__title[b-ovmj92qdex] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.disenador__head-icono[b-ovmj92qdex] {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 10px;
    padding: 8px;
}

.disenador__subtitle[b-ovmj92qdex] {
    margin-top: 4px;
    max-width: 80ch;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.disenador__cmdbar[b-ovmj92qdex] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.disenador__confirm[b-ovmj92qdex] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: .45rem;
    padding: .6rem .85rem;
    font-size: .85rem;
}

.disenador__confirm-actions[b-ovmj92qdex] {
    display: flex;
    gap: .4rem;
}

.disenador__estado[b-ovmj92qdex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .55rem .8rem;
    background: #fff;
}

.disenador__estado-txt[b-ovmj92qdex] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1;
}

.disenador__estado-sub[b-ovmj92qdex] {
    color: #6c757d;
    font-size: .8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* EL3b: el área del listado, en la misma línea del resumen. */
.disenador__estado-area[b-ovmj92qdex] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

    .disenador__estado-area select[b-ovmj92qdex] {
        font-size: .8rem;
        padding: .1rem .3rem;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: #fff;
        color: #374151;
    }

.disenador__estado-input[b-ovmj92qdex] {
    font-weight: 600;
    border: 1px solid #e0e0e0;
    border-radius: .35rem;
    padding: .2rem .45rem;
    background: transparent;
    width: 35rem;
    max-width: 100%;
}

    .disenador__estado-input:hover[b-ovmj92qdex] {
        border-color: var(--bs-border-color, #dee2e6);
    }

    .disenador__estado-input:focus[b-ovmj92qdex] {
        border-color: #0d6efd;
        outline: none;
        background: #fff;
    }

.disenador__estado-badges[b-ovmj92qdex] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.disenador__badge[b-ovmj92qdex] {
    border-radius: 1rem;
    padding: .1rem .6rem;
    font-size: .75rem;
    font-weight: 600;
}

.disenador__badge--err[b-ovmj92qdex] {
    background: #f8d7da;
    color: #842029;
    border: 0;
    cursor: pointer;
}

/* Lista de errores desplegada desde la insignia: uno por línea, legibles. */
.disenador__errores[b-ovmj92qdex] {
    margin: 0;
    padding: .5rem .75rem .5rem 2rem;
    background: #fdf1f2;
    border: 1px solid #f1aeb5;
    border-radius: .375rem;
    color: #842029;
    font-size: .82rem;
    max-height: 12rem;
    overflow-y: auto;
}

.disenador__badge--warn[b-ovmj92qdex] {
    background: #fff3cd;
    color: #664d03;
}

.disenador__badge--ok[b-ovmj92qdex] {
    background: #d1e7dd;
    color: #0f5132;
}

/* ── Pasos: pastillas como las pestañas del panel de campañas (MarcoMarketingAds), con el icono del paso en el
   círculo y repartidas a todo el ancho: las de una fila crecen a partes iguales hasta llenarla. ── */
.disenador__tabs[b-ovmj92qdex] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.disenador__tab[b-ovmj92qdex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 14px 7px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

    .disenador__tab:hover:not(:disabled)[b-ovmj92qdex] { border-color: #bfdbfe; color: #1d4ed8; }
    .disenador__tab:focus-visible[b-ovmj92qdex] { outline: 2px solid #2563eb; outline-offset: 2px; }
    .disenador__tab:disabled[b-ovmj92qdex] { color: #b6bcc6; background: #fafafa; cursor: not-allowed; }
    .disenador__tab.is-active[b-ovmj92qdex] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }

.disenador__tab-ico[b-ovmj92qdex] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: inherit;
}

    .disenador__tab-ico .material-symbols-rounded[b-ovmj92qdex] { font-size: 15px; }
    .disenador__tab.is-active .disenador__tab-ico[b-ovmj92qdex] { background: #2563eb; color: #fff; }

.disenador__tab-txt[b-ovmj92qdex] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── El paso activo: tarjeta con borde azul suave (como «Puesta en marcha» del panel de campañas) y su pie ── */
.disenador__paso[b-ovmj92qdex] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    box-shadow: 0 .5rem 1.4rem rgba(15, 23, 42, .045);
    overflow: hidden;
}

.disenador__cuerpo[b-ovmj92qdex] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.1rem;
}

.disenador__pie[b-ovmj92qdex] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid #eef2f7;
    background: #f8fafc;
}

.disenador__pie-paso[b-ovmj92qdex] { font-size: 12.5px; font-weight: 650; color: #6b7280; }
.disenador__pie-botones[b-ovmj92qdex] { display: flex; gap: 8px; }

.disenador__nav-btn[b-ovmj92qdex] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

    .disenador__nav-btn .material-symbols-rounded[b-ovmj92qdex] { font-size: 18px; }
    .disenador__nav-btn:hover:not(:disabled)[b-ovmj92qdex] { background: #f3f4f6; }
    .disenador__nav-btn.primario[b-ovmj92qdex] { background: #2563eb; border-color: #2563eb; color: #fff; }
    .disenador__nav-btn.primario:hover:not(:disabled)[b-ovmj92qdex] { background: #1d4ed8; }
    .disenador__nav-btn:disabled[b-ovmj92qdex] { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    .disenador__tab[b-ovmj92qdex] { flex-basis: calc(50% - 4px); justify-content: flex-start; }
}

/* ── Vista previa: crece hasta ocupar el resto de la pantalla ── */
.disenador__preview[b-ovmj92qdex] {
    flex: 0 0 auto; 
/*    height: clamp(12rem, 30vh, 22rem); 
*/    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: #fff;
    overflow: hidden;
}


.disenador__preview-bar[b-ovmj92qdex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .8rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    flex: 0 0 auto;
}

.disenador__preview-tit[b-ovmj92qdex] {
    font-weight: 600;
    font-size: .9rem;
}

.disenador__preview-actions[b-ovmj92qdex] {
    display: flex;
    gap: .5rem;
}

    .disenador__preview-actions .material-symbols-rounded[b-ovmj92qdex] {
        font-size: 1.1rem;
        vertical-align: -.2rem;
    }

.disenador__preview-shell[b-ovmj92qdex] {
    flex: 1 1 auto;
    min-height: 0; 
    overflow: auto;
    padding: .5rem;
}

.disenador__preview-tabla[b-ovmj92qdex] {
    width: 100%;
    table-layout: fixed; /* imprescindible: sin esto el <colgroup> no manda */
    border-collapse: collapse;
    font-size: .82rem;
}

    .disenador__preview-tabla th[b-ovmj92qdex],
    .disenador__preview-tabla td[b-ovmj92qdex] {
        border: 1px solid #e9ecef;
        padding: .3rem .5rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden; /* una columna «Estrecho» recorta en vez de reventar el reparto */
        text-overflow: ellipsis;
    }

    .disenador__preview-tabla th[b-ovmj92qdex] {
        position: sticky;
        top: 0;
        background: #f1f3f5;
        font-weight: 600;
        z-index: 1;
    }

    .disenador__preview-tabla .is-num[b-ovmj92qdex] {
        text-align: right;
    }

    .disenador__preview-tabla .is-left[b-ovmj92qdex] {
        text-align: left;
    }

    .disenador__preview-tabla .is-center[b-ovmj92qdex] {
        text-align: center;
    }

    .disenador__preview-tabla .is-right[b-ovmj92qdex] {
        text-align: right;
    }

.disenador__preview-vacia[b-ovmj92qdex] {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
    font-size: .82rem;
}

.disenador__preview-fallo[b-ovmj92qdex] {
    padding: .5rem .75rem;
    background: #fdf1f2;
    color: #842029;
    font-size: .82rem;
    border-bottom: 1px solid #f1aeb5;
}

.disenador__preview-nota[b-ovmj92qdex] {
    padding: .4rem .6rem;
    color: #6c757d;
    font-size: .78rem;
}
/* _content/ErpPowergest/Presentation/Informes/Listados/EditorExpresionListado.razor.rz.scp.css */
/* Editor de expresión asistido. Estilo mínimo y funcional: pensado para ser rediseñado. */

.expr[b-uk2zghrpni] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.expr__label[b-uk2zghrpni] {
    font-size: .8rem;
    font-weight: 600;
    margin: 0;
}

.expr__input[b-uk2zghrpni] {
    width: 100%;
    font-size: .85rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .35rem;
    padding: .4rem .5rem;
    resize: vertical;
}

.expr__ok[b-uk2zghrpni] {
    color: #198754;
    font-size: .8rem;
}

.expr__diag[b-uk2zghrpni] {
    font-size: .8rem;
}

.expr__badge[b-uk2zghrpni] {
    display: inline-block;
    background: #dc3545;
    color: #fff;
    border-radius: .25rem;
    padding: 0 .4rem;
    font-size: .7rem;
    font-weight: 600;
}

.expr__diag-msg[b-uk2zghrpni] {
    margin-left: .35rem;
}

.expr__caret[b-uk2zghrpni] {
    background: #f8f9fa;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .25rem;
    padding: .35rem .5rem;
    margin: .25rem 0 0;
    font-size: .8rem;
    white-space: pre;
    overflow-x: auto;
}

.expr__hint[b-uk2zghrpni] {
    color: #6c757d;
    font-style: italic;
}

.expr__toolbar[b-uk2zghrpni] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.expr__eval[b-uk2zghrpni] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .82rem;
}

.expr__eval--ok[b-uk2zghrpni] { color: #198754; }
.expr__eval--err[b-uk2zghrpni] { color: #dc3545; }

.expr__toggle[b-uk2zghrpni] {
    margin-left: auto;
    font-size: .78rem;
    padding: 0;
}

/* Ancla del menú flotante */
.expr__ayuda-wrap[b-uk2zghrpni] {
    position: relative;
    margin-left: auto;
}

/* Backdrop: capta el clic fuera y separa el popup del fondo */
.expr__backdrop[b-uk2zghrpni] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, .18);
}

/* `fixed` = sale del flujo: el overflow:auto de .disenador__cuerpo ya no lo recorta.
   OJO: si algún día un ancestro recibe transform/filter/contain, el fixed se rompe. */
.expr__pop[b-uk2zghrpni] {
    position: fixed;
    z-index: 1081;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(72vh, 36rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    padding: .75rem;
    overscroll-behavior: contain;
}

.expr__pop-head[b-uk2zghrpni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expr__pop-tit[b-uk2zghrpni] {
    font-weight: 600;
    font-size: .85rem;
}

.expr__pop-close[b-uk2zghrpni] {
    border: 0;
    background: none;
    color: #6c757d;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    padding: .15rem .35rem;
    border-radius: .25rem;
}

    .expr__pop-close:hover[b-uk2zghrpni] {
        background: #f1f3f5;
        color: #212529;
    }

/* Selector de grupo */
.expr__grupos[b-uk2zghrpni] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.expr__grupo[b-uk2zghrpni] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    border-radius: 1rem;
    padding: .1rem .65rem;
    font-size: .75rem;
    cursor: pointer;
}

    .expr__grupo:hover[b-uk2zghrpni] {
        background: #f4f8ff;
        border-color: #b6d4fe;
    }

    .expr__grupo.is-active[b-uk2zghrpni] {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        font-weight: 600;
    }

.expr__lista[b-uk2zghrpni] {
    flex: 1 1 auto;
    min-height: 0; 
    overflow-y: auto;
    display: flex;
    overscroll-behavior: contain;
    flex-direction: column;
}

.expr__sug[b-uk2zghrpni] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    padding: .2rem .1rem;
    font-size: .78rem;
    cursor: pointer;
}

.expr__sug:hover[b-uk2zghrpni] { background: #f4f8ff; }

.expr__sug-det[b-uk2zghrpni] { color: #6c757d; }
.expr__sug-desc[b-uk2zghrpni] {
    color: #6c757d;
    font-style: italic;
    margin-left: auto;
}

.expr__vacio[b-uk2zghrpni] {
    color: #6c757d;
    font-size: .78rem;
    padding: .25rem;
}

@media (max-width: 640px) {
    .expr__ayuda[b-uk2zghrpni] { grid-template-columns: 1fr; }
}
/* _content/ErpPowergest/Presentation/Informes/Listados/PasoCalculadosFiltros.razor.rz.scp.css */
/* ④ Campos calculados y filtros. Estilo mínimo; pensado para rediseñar. */

/* La sección llena el cuerpo del paso; solo scrollea la lista de campos. */
.paso-cf[b-v4phvd5im3] {
    display: flex;
    flex-direction: column;
    height: 100%; /* DEFINIDA: con `min-height` la altura sigue siendo auto y el scroll interno no engancha */
    min-height: 0;
}

.paso-cf__head[b-v4phvd5im3] {
    margin-bottom: 1rem;
    flex: 0 0 auto;
}
.paso-cf__title[b-v4phvd5im3] { margin: 0 0 .25rem; font-size: 1.1rem; }
.paso-cf__hint[b-v4phvd5im3] { margin: 0; color: #6c757d; font-size: .85rem; }

.paso-cf__bloque[b-v4phvd5im3] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* deja que el bloque se encoja por debajo de su contenido */
    overflow-y: auto; /* muchos campos calculados scrollean AQUÍ, no empujan el layout */
    overscroll-behavior: contain;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: 0;
}

.paso-cf__bloque-tit[b-v4phvd5im3] {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .4rem;
}

.paso-cf__calc-cab[b-v4phvd5im3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

/* El .btn-primary global (app.css) fuerza width:100% y padding gordo; aquí se anula. */
.paso-cf__add[b-v4phvd5im3] {
    flex: 0 0 auto;
    width: auto;
    padding: .25rem .7rem;
    font-size: .72rem;
    line-height: 1.4;
    border-radius: .35rem;
    white-space: nowrap;
}

/* Un campo calculado = una fila: nombre · fórmula · quitar */
.paso-cf__calc[b-v4phvd5im3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #eef0f2;
    border-radius: .4rem;
    padding: .35rem .5rem;
    margin-bottom: .4rem;
    background: #fafbfc;
}

.paso-cf__calc-nombre[b-v4phvd5im3] {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El editor vive en otro scope de CSS → ::deep. Se come el hueco central. */
.paso-cf__calc[b-v4phvd5im3]  .expr {
    flex: 1 1 auto;
    min-width: 0; /* sin esto un nombre largo desborda la fila en vez de recortarse */
}

.paso-cf__calc .btn[b-v4phvd5im3] {
    flex: 0 0 auto;
}

.paso-cf__sub[b-v4phvd5im3] { color: #6c757d; font-size: .8rem; margin: 0 0 .5rem; }

/* Cabecera y alta fijos; la ÚNICA zona con scroll es la lista de campos ya creados */
.paso-cf__nuevo[b-v4phvd5im3] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-bottom: 1px dashed #dee2e6;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
}

.paso-cf__calc-lista[b-v4phvd5im3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.paso-cf__nuevo-nombre[b-v4phvd5im3] { max-width: 22rem; }

/* El alta: fija arriba, con el punteado separándola de la lista */
.paso-cf__nuevo-rango[b-v4phvd5im3] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    font-size: .78rem;
    border-bottom: 1px dashed #dee2e6; /* era border-top: el formulario estaba abajo */
    padding-bottom: .6rem;
    margin-bottom: .4rem;
}

    .paso-cf__nuevo-rango select[b-v4phvd5im3] {
        max-width: 14rem;
    }

    .paso-cf__nuevo-rango input[b-v4phvd5im3] {
        max-width: 10rem;
    }

.paso-cf__ayuda-rango[b-v4phvd5im3] {
    flex: 0 0 auto;
    margin: 0 0 .5rem;
    font-size: .72rem;
    color: #6c757d;
}

/* La ÚNICA zona con scroll del bloque */
.paso-cf__rango-lista[b-v4phvd5im3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Un rango = una fila: campo · desde → hasta · quitar */
.paso-cf__rango[b-v4phvd5im3] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
}

.paso-cf__rango-campo[b-v4phvd5im3] {
    flex: 0 0 auto;
    max-width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sin min-width:0 los inputs no bajan de su tamaño natural y expulsan al botón */
.paso-cf__rango input[b-v4phvd5im3] {
    flex: 1 1 0;
    min-width: 0;
}

.paso-cf__rango-sep[b-v4phvd5im3] {
    flex: 0 0 auto;
    color: #adb5bd;
}

.paso-cf__rango .btn[b-v4phvd5im3] {
    flex: 0 0 auto;
}

.paso-cf__empty[b-v4phvd5im3] {
    color: #6c757d;
    font-size: .85rem;
    padding: .75rem;
}

/* Los tres bloques, uno al lado del otro, llenando el alto disponible */
.paso-cf__layout[b-v4phvd5im3] {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible: sin esto el hijo no puede scrollear dentro del flex */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch; /* era `start`: eso es lo que los dejaba a la altura del contenido */
}

/* ── Pestañas: con sitio se ven los tres bloques; por debajo del corte, uno solo ── */
.paso-cf__tabs[b-v4phvd5im3] {
    display: none; /* con hueco para tres columnas las pestañas sobran */
}

.paso-cf__tab[b-v4phvd5im3] {
    flex: 0 0 auto; /* tamaño fijo: ni crecen para llenar la fila ni se encogen */
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    border-radius: .8rem;
    padding: .1rem .6rem;
    font-size: .72rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}

    /* El <button> pelado trae el anillo de foco negro del navegador; se cambia por uno discreto. */
    .paso-cf__tab:focus-visible[b-v4phvd5im3] {
        outline: 2px solid #b6d4fe;
        outline-offset: 1px;
    }

    .paso-cf__tab:hover[b-v4phvd5im3] {
        background: #f4f8ff;
        border-color: #b6d4fe;
    }

    .paso-cf__tab.is-active[b-v4phvd5im3] {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        font-weight: 600;
    }

@media (max-width: 1200px) {
    .paso-cf__tabs[b-v4phvd5im3] {
        display: flex;
        flex: 0 0 auto; /* la barra no crece ni se encoge: se queda clavada arriba */
        align-items: center;
        flex-wrap: wrap;
        gap: .3rem;
        margin-bottom: .5rem;
    }

    /* Una sola columna y un solo bloque visible: se conserva el estiramiento y el scroll
       interno del modo ancho, porque ya no hay varias filas que repartir. */
    .paso-cf__layout[b-v4phvd5im3] {
        grid-template-columns: 1fr;
    }

    .paso-cf__bloque:not(.is-activa)[b-v4phvd5im3] {
        display: none;
    }
}

/* Ayuda «?» con popup al pasar el ratón / al enfocar */
.paso-cf__help[b-v4phvd5im3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
    font-size: .72rem;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
    user-select: none;
}

.paso-cf__help-pop[b-v4phvd5im3] {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    z-index: 40;
    width: 17rem;
    max-width: 60vw;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .45rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: .55rem .7rem;
    font-size: .78rem;
    font-weight: 400; /* que no herede el negrita del título */
    color: #495057;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.2rem);
    transition: opacity .12s, transform .12s, visibility .12s;
}

.paso-cf__help:hover .paso-cf__help-pop[b-v4phvd5im3],
.paso-cf__help:focus .paso-cf__help-pop[b-v4phvd5im3],
.paso-cf__help:focus-within .paso-cf__help-pop[b-v4phvd5im3] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* _content/ErpPowergest/Presentation/Informes/Listados/PasoColumnas.razor.rz.scp.css */
/* ③ Columnas. Estilo mínimo; pensado para rediseñar. */

.paso-columnas__head[b-bnwn5shbyq] { margin-bottom: 1rem; }
.paso-columnas__title[b-bnwn5shbyq] { margin: 0 0 .25rem; font-size: 1.1rem; }
.paso-columnas__hint[b-bnwn5shbyq] { margin: 0; color: #6c757d; font-size: .85rem; }
/* La sección llena el cuerpo del paso; solo scrollean las listas de los paneles */
.paso-columnas[b-bnwn5shbyq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.paso-columnas__head[b-bnwn5shbyq] {
    flex: 0 0 auto;
}


.paso-columnas__layout[b-bnwn5shbyq] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(0, 1.5fr);
    gap: 1rem;
    align-items: stretch; /* era: start → ahora los paneles llenan la altura */
}


.paso-columnas__panel-tit[b-bnwn5shbyq] {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.paso-columnas__count[b-bnwn5shbyq] {
    background: #0d6efd;
    color: #fff;
    border-radius: 1rem;
    font-size: .72rem;
    padding: 0 .45rem;
}

/* Panel: cabecera fija + lista con scroll + botón fijo. NO scrollea entero. */
.paso-columnas__disponibles[b-bnwn5shbyq] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .6rem;
    min-height: 0; /* era: max-height: 32rem */
}

    /* Cabecera y botón: nunca se encogen ni scrollean */
    .paso-columnas__disponibles > .paso-columnas__panel-tit[b-bnwn5shbyq],
    .paso-columnas__disponibles > .btn[b-bnwn5shbyq] {
        flex: 0 0 auto;
    }

/* ÚNICA zona con scroll: los campos, en 2 columnas */
.paso-columnas__campos[b-bnwn5shbyq] {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible: sin esto el flex no deja scrollear */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(11rem, (100% - 1rem) / 3), 1fr));
    gap: .25rem .5rem;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain; /* al llegar al tope no arrastra la página */
}

    /* Las cabeceras de grupo ocupan las 2 columnas */
    .paso-columnas__campos > .paso-columnas__grupo[b-bnwn5shbyq] {
        grid-column: 1 / -1;
    }

.paso-columnas__grupo[b-bnwn5shbyq] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin: .6rem 0 .25rem;
}

.paso-columnas__campo[b-bnwn5shbyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: .35rem;
    padding: .3rem .5rem;
    margin-bottom: 0;
    font-size: .82rem;
    cursor: pointer;
}

.paso-columnas__campo:hover[b-bnwn5shbyq] { background: #f4f8ff; border-color: #b6d4fe; }
.paso-columnas__campo-tipo[b-bnwn5shbyq] { color: #adb5bd; font-size: .72rem; }

.paso-columnas__campo[b-bnwn5shbyq] {
    min-width: 0;
}

    /* El nombre del campo se recorta con puntos suspensivos; el tipo nunca se encoge */
    .paso-columnas__campo > span:first-child[b-bnwn5shbyq] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.paso-columnas__campo-tipo[b-bnwn5shbyq] {
    flex: 0 0 auto;
}

/* Panel: cabecera fija + lista con scroll propio (igual que disponibles) */
.paso-columnas__elegidas[b-bnwn5shbyq] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* era: max-height: 32rem */
}

    .paso-columnas__elegidas > .paso-columnas__panel-tit[b-bnwn5shbyq] {
        flex: 0 0 auto; /* el título no scrollea */
    }

.paso-columnas__elegidas-lista[b-bnwn5shbyq] {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible para que el scroll funcione en flex */
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-right: .25rem; /* hueco para la barra de scroll */
}

.paso-columnas__col[b-bnwn5shbyq] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .6rem .7rem;
    background: #fff;
}

.paso-columnas__col-head[b-bnwn5shbyq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.paso-columnas__col-orden[b-bnwn5shbyq] {
    font-weight: 700;
    color: #6c757d;
    font-size: .8rem;
}

.paso-columnas__col-origen[b-bnwn5shbyq] { min-width: 0; }
.paso-columnas__badge-expr[b-bnwn5shbyq] {
    background: #e9ecef;
    color: #495057;
    border-radius: .25rem;
    padding: 0 .4rem;
    font-size: .72rem;
}

.paso-columnas__col-actions[b-bnwn5shbyq] {
    margin-left: auto;
    display: flex;
    gap: .25rem;
}

.paso-columnas__col-body[b-bnwn5shbyq] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
}

.paso-columnas__field[b-bnwn5shbyq] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 8rem;
    font-size: .75rem;
    color: #495057;
    margin: 0;
}

.paso-columnas__field--sm[b-bnwn5shbyq] { flex: 0 1 7rem; }
.paso-columnas__field--full[b-bnwn5shbyq] { flex: 1 1 100%; }
.paso-columnas__field--expr[b-bnwn5shbyq] {
    flex: 2 1 18rem;
}

    /* El textarea del editor vive en otro scope de CSS → ::deep para alcanzarlo.
   Misma altura que .form-control-sm, en una sola línea y sin tirador de redimensionar. */
    .paso-columnas__field--expr::deep .expr__input[b-bnwn5shbyq] {
        height: calc(1.5em + .5rem + 2px);
        min-height: 0;
        padding: .25rem .5rem;
        resize: none;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }


.paso-columnas__check[b-bnwn5shbyq] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    margin: 0 0 .3rem;
    white-space: nowrap;
}

.paso-columnas__empty[b-bnwn5shbyq] {
    color: #6c757d;
    font-size: .85rem;
    padding: .5rem;
}

.paso-columnas__empty.small[b-bnwn5shbyq] { font-size: .78rem; }

@media (max-width: 820px) {
    .paso-columnas__layout[b-bnwn5shbyq] { grid-template-columns: 1fr; }
}

.paso-columnas__formula[b-bnwn5shbyq] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

    /* .paso-columnas__field trae flex:1 1 8rem para la fila de la derecha; aquí estorba */
    .paso-columnas__formula .paso-columnas__field[b-bnwn5shbyq] {
        flex: 0 0 auto;
    }

.paso-columnas__formula-top[b-bnwn5shbyq] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

    /* Rótulo estrecho. Va DESPUÉS de la regla .paso-columnas__formula .paso-columnas__field
       (misma especificidad) para poder ganarle el flex. */
    .paso-columnas__formula-top .paso-columnas__field[b-bnwn5shbyq] {
        flex: 0 1 14rem;
        max-width: 14rem;
    }

.paso-columnas__formula-actions[b-bnwn5shbyq] {
    display: flex;
    align-items: flex-end; /* evita que los botones se estiren en vertical */
    gap: .4rem;
    margin-left: auto; /* empuja los botones a la derecha */
}

    .paso-columnas__formula-actions .btn[b-bnwn5shbyq] {
        padding: .25rem .7rem;
        font-size: .78rem;
        line-height: 1.4;
        border-radius: .35rem;
    }



/* _content/ErpPowergest/Presentation/Informes/Listados/PasoDetalle.razor.rz.scp.css */
/* ② Tablas del listado. Estilo mínimo; pensado para rediseñar. */

.paso-detalle__head[b-9vptgxap03] { margin-bottom: 1rem; }
.paso-detalle__title[b-9vptgxap03] { margin: 0 0 .25rem; font-size: 1.1rem; }
.paso-detalle__hint[b-9vptgxap03] { margin: 0; color: #6c757d; font-size: .85rem; }

/* ── Nivel del listado (dos tarjetas) ── */
.paso-detalle__nivel[b-9vptgxap03] { margin-bottom: 0; }
.paso-detalle__nivel-tit[b-9vptgxap03] { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }

.paso-detalle__nivel-cards[b-9vptgxap03] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.paso-detalle__nivel-card[b-9vptgxap03] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    flex: 1 1 18rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    padding: .75rem .9rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.paso-detalle__nivel-card:hover:not(:disabled)[b-9vptgxap03] { border-color: #86b7fe; }
.paso-detalle__nivel-card.is-selected[b-9vptgxap03] { border-color: #0d6efd; background: #e7f1ff; }
.paso-detalle__nivel-card.is-pending[b-9vptgxap03] { border-color: #0d6efd; border-style: dashed; background: #f2f8ff; }
.paso-detalle__nivel-card:disabled[b-9vptgxap03] { opacity: .5; cursor: not-allowed; }

.paso-detalle__nivel-icon[b-9vptgxap03] { font-size: 1.4rem; color: #0d6efd; }
.paso-detalle__nivel-txt[b-9vptgxap03] { display: flex; flex-direction: column; gap: .15rem; }
.paso-detalle__nivel-txt strong[b-9vptgxap03] { font-size: .92rem; }
.paso-detalle__nivel-txt span[b-9vptgxap03] { color: #6c757d; font-size: .8rem; }
.paso-detalle__nivel-nota[b-9vptgxap03] { color: #b02a37 !important; }

.paso-detalle__nivel-confirm[b-9vptgxap03],
.paso-detalle__nivel-guia[b-9vptgxap03] {
    margin-top: .6rem;
    border-radius: .45rem;
    padding: .55rem .75rem;
    font-size: .85rem;
}

.paso-detalle__nivel-confirm[b-9vptgxap03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
}

.paso-detalle__nivel-confirm-actions[b-9vptgxap03] { display: flex; gap: .4rem; }
.paso-detalle__nivel-guia[b-9vptgxap03] { background: #e7f1ff; border: 1px solid #b6d4fe; color: #084298; }

/* ── Árbol de tablas asociadas ── */
.paso-detalle__arbol[b-9vptgxap03] { margin-bottom: 1.25rem; }
.paso-detalle .arbol[b-9vptgxap03],
.paso-detalle .arbol ul[b-9vptgxap03] { list-style: none; margin: 0; padding: 0; }
.paso-detalle .arbol__ramas[b-9vptgxap03] { margin-left: 1.1rem; padding-left: .9rem; border-left: 2px solid #e3e6ea; }
.paso-detalle .arbol__ramas ul[b-9vptgxap03] { margin-left: 1rem; padding-left: .8rem; border-left: 1px dashed #e3e6ea; }

.arbol__fila[b-9vptgxap03] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .45rem;
    background: #fff;
}

.arbol__nodo--raiz > .arbol__fila[b-9vptgxap03] { background: #f6f9ff; border-color: #b6d4fe; }
.arbol__nodo[b-9vptgxap03] { margin: .35rem 0; }
.arbol__icono[b-9vptgxap03] { font-size: 1.2rem; color: #6c757d; }
.arbol__nodo--raiz > .arbol__fila .arbol__icono[b-9vptgxap03] { color: #0d6efd; }
.arbol__txt[b-9vptgxap03] { display: flex; flex-direction: column; min-width: 0; }
.arbol__desc[b-9vptgxap03], .arbol__alias[b-9vptgxap03] { color: #6c757d; font-size: .78rem; }
.arbol__alias[b-9vptgxap03] { color: #0a7d33; }
.arbol__badge[b-9vptgxap03] {
    margin-left: auto;
    font-size: .7rem;
    color: #084298;
    background: #cfe2ff;
    border-radius: .4rem;
    padding: .1rem .45rem;
}
.arbol__fila .btn[b-9vptgxap03] { margin-left: auto; }

.arbol__rama[b-9vptgxap03] { margin: .5rem 0; }
.arbol__rama-tit[b-9vptgxap03] { font-weight: 600; font-size: .82rem; color: #495057; margin: .25rem 0; }
.arbol__rama.is-highlight[b-9vptgxap03] { background: #f2f8ff; border-radius: .45rem; padding: .35rem .5rem; }
.arbol__nota[b-9vptgxap03] { margin: .25rem 0 0; color: #6c757d; font-size: .76rem; }
.arbol__nodo--detalle.is-chosen > .arbol__fila[b-9vptgxap03] { background: #e7f1ff; border-color: #b6d4fe; }
.arbol__nodo--info > .arbol__fila[b-9vptgxap03] { background: #fafbfc; }

.paso-detalle__actual[b-9vptgxap03] { margin-bottom: 1rem; }

.paso-detalle__chip[b-9vptgxap03] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    border-radius: .5rem;
    padding: .55rem .75rem;
}

.paso-detalle__chip-txt[b-9vptgxap03] { display: flex; flex-direction: column; }
.paso-detalle__alias[b-9vptgxap03] { color: #6c757d; font-size: .75rem; }
.paso-detalle__chip .btn[b-9vptgxap03] { margin-left: auto; }

.paso-detalle__disponibles[b-9vptgxap03] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.paso-detalle__rel[b-9vptgxap03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .45rem;
    padding: .55rem .75rem;
}

.paso-detalle__rel.is-chosen[b-9vptgxap03] { opacity: .55; }

.paso-detalle__rel-txt[b-9vptgxap03] { display: flex; flex-direction: column; min-width: 0; }
.paso-detalle__rel-desc[b-9vptgxap03] { color: #6c757d; font-size: .8rem; }

.paso-detalle__empty[b-9vptgxap03] {
    color: #6c757d;
    font-size: .85rem;
    padding: .75rem;
}

/* Avanzado: unir por campos (relación manual, L8). Plegado por defecto. */
.paso-detalle__avanzado[b-9vptgxap03] {
    margin-top: 0;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
    padding-top: .75rem;
}

.paso-detalle__avanzado-sum[b-9vptgxap03] {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: #495057;
}

.paso-detalle__avanzado-body[b-9vptgxap03] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .75rem;
}

.paso-detalle__coste[b-9vptgxap03] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: .45rem;
    padding: .5rem .75rem;
    font-size: .8rem;
    color: #664d03;
}

.paso-detalle__coste .material-symbols-rounded[b-9vptgxap03] { font-size: 1.1rem; }

.paso-detalle__campos[b-9vptgxap03] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.paso-detalle__campos label[b-9vptgxap03] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    color: #6c757d;
    min-width: 12rem;
    flex: 1 1 12rem;
}

.paso-detalle__campos select[b-9vptgxap03] {
    padding: .35rem .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .35rem;
}

.paso-detalle__confirm[b-9vptgxap03] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

/* ── Reparto en dos columnas: izquierda operativa, derecha resumen ── */
.paso-detalle__layout[b-9vptgxap03] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.paso-detalle__col[b-9vptgxap03] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.paso-detalle__panel[b-9vptgxap03] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem .85rem;
    background: #fff;
}

    .paso-detalle__panel.is-highlight[b-9vptgxap03] {
        border-color: #b6d4fe;
        background: #f6f9ff;
    }

.paso-detalle__panel-tit[b-9vptgxap03] {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.paso-detalle__panel-sub[b-9vptgxap03] {
    font-weight: 600;
    font-size: .82rem;
    color: #495057;
    margin: .85rem 0 .25rem;
}

@media (max-width: 980px) {
    .paso-detalle__layout[b-9vptgxap03] {
        grid-template-columns: 1fr;
    }
}

/* «Detalles disponibles»: rejilla con tantas columnas como detalles, máx. 3 */
.arbol--detalles[b-9vptgxap03] {
    display: grid;
    grid-template-columns: repeat(var(--detalle-cols, 1), minmax(0, 1fr));
    gap: .5rem;
}

    /* .arbol__nodo trae margin: .35rem 0; aquí el hueco lo da el gap */
    .arbol--detalles .arbol__nodo[b-9vptgxap03] {
        margin: 0;
    }

    /* La descripción no rebasa su línea: se recorta con «…» (responsive) */
    .arbol--detalles .arbol__txt[b-9vptgxap03] {
        min-width: 0;
    }
        /* permite encoger para que el recorte funcione */

        .arbol--detalles .arbol__desc[b-9vptgxap03],
        .arbol--detalles .arbol__txt strong[b-9vptgxap03] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }


/* En pantallas estrechas la columna izquierda es angosta: baja a 1 columna */
@media (max-width: 720px) {
    .arbol--detalles[b-9vptgxap03] {
        grid-template-columns: 1fr;
    }
}

/* «Datos relacionados» en dos columnas */
.paso-detalle__rel-grid[b-9vptgxap03] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

    /* .arbol__nodo trae margin: .35rem 0; aquí el hueco lo da el gap */
    .paso-detalle__rel-grid .arbol__nodo[b-9vptgxap03] {
        margin: 0;
    }

@media (max-width: 720px) {
    .paso-detalle__rel-grid[b-9vptgxap03] {
        grid-template-columns: 1fr;
    }
}

/* Confirmación + botón «Unir por campos» en la misma línea */
.paso-detalle__unir-row[b-9vptgxap03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

    .paso-detalle__unir-row .paso-detalle__confirm[b-9vptgxap03] {
        margin: 0;
    }

    .paso-detalle__unir-row .btn[b-9vptgxap03] {
        flex: 0 0 auto; /* el botón deja de estirarse a todo el ancho */
        white-space: nowrap;
    }
/* _content/ErpPowergest/Presentation/Informes/Listados/PasoEntidad.razor.rz.scp.css */
/* ① Entidad principal. Estilo mínimo; pensado para rediseñar. */

.paso-entidad__head[b-t57pw1zkle] { margin-bottom: 1rem; }
.paso-entidad__title[b-t57pw1zkle] { margin: 0 0 .25rem; font-size: 1.1rem; }
.paso-entidad__hint[b-t57pw1zkle] { margin: 0; color: #6c757d; font-size: .85rem; }

.paso-entidad__confirm[b-t57pw1zkle] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: .4rem;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    font-size: .85rem;
}

.paso-entidad__confirm-actions[b-t57pw1zkle] { display: flex; gap: .4rem; }

.paso-entidad__grid[b-t57pw1zkle] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.paso-entidad__card[b-t57pw1zkle] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

    .paso-entidad__card:hover[b-t57pw1zkle] {
        border-color: #86b7fe;
        box-shadow: 0 4px 14px rgba(13, 110, 253, .12);
        transform: translateY(-2px);
    }

    .paso-entidad__card.is-selected[b-t57pw1zkle] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, .18);
        background: #f7faff;
    }

/* Pastilla del icono */
.paso-entidad__card-icon[b-t57pw1zkle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .6rem;
    background: #eaf1ff;
    color: #0d6efd;
    font-size: 1.4rem;
}

.paso-entidad__card.is-selected .paso-entidad__card-icon[b-t57pw1zkle] {
    background: #0d6efd;
    color: #fff;
}

.paso-entidad__card-title[b-t57pw1zkle] {
    font-weight: 600;
    font-size: .95rem;
    color: #212529;
}

/* Descripción a 2 líneas: alinea los pies de todas las tarjetas */
.paso-entidad__card-desc[b-t57pw1zkle] {
    color: #6c757d;
    font-size: .82rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

/* Contador de campos como chip, pegado al pie */
.paso-entidad__card-meta[b-t57pw1zkle] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    align-self: flex-start;
    margin-top: auto;
    padding: .15rem .55rem;
    border-radius: 1rem;
    background: #f1f3f5;
    color: #6c757d;
    font-size: .72rem;
    font-weight: 600;
}

    .paso-entidad__card-meta .material-symbols-rounded[b-t57pw1zkle] {
        font-size: .95rem;
    }

.paso-entidad__card-check[b-t57pw1zkle] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    color: #0d6efd;
    font-size: 1.25rem;
}

.paso-entidad__empty[b-t57pw1zkle] {
    grid-column: 1 / -1;
    color: #6c757d;
    font-size: .85rem;
    padding: 1rem;
}
/* _content/ErpPowergest/Presentation/Informes/Listados/PasoGruposOrden.razor.rz.scp.css */
/* ⑤ Grupos y orden. Estilo mínimo; pensado para rediseñar. */

/* La sección llena el cuerpo del paso; solo scrollean los bloques. */
.paso-go[b-e96lqwq2jt] {
    display: flex;
    flex-direction: column;
    height: 100%; /* DEFINIDA: con `min-height` la altura sigue siendo auto y el scroll interno no engancha */
    min-height: 0;
}

.paso-go__head[b-e96lqwq2jt] {
    margin-bottom: 1rem;
    flex: 0 0 auto;
}

.paso-go__title[b-e96lqwq2jt] {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
}

.paso-go__hint[b-e96lqwq2jt] {
    margin: 0;
    color: #6c757d;
    font-size: .85rem;
}

.paso-go__bloque[b-e96lqwq2jt] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* deja que el bloque se encoja por debajo de su contenido */
    overflow-y: auto; /* el contenido largo scrollea AQUÍ, no empuja el layout */
    overscroll-behavior: contain;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: 0; /* era 1rem: ahora la separación la pone el gap del grid */
}

.paso-go__bloque-tit[b-e96lqwq2jt] {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .5rem;
}


/* Cabecera del bloque: título a la izquierda, acciones a la derecha. Fija: no scrollea. */
.paso-go__cab[b-e96lqwq2jt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

    .paso-go__cab .paso-go__bloque-tit[b-e96lqwq2jt] {
        margin: 0; /* el margen inferior lo pone ya la cabecera */
    }

    /* Sin esto los botones heredan el stretch de la columna flex y salen a todo lo ancho */
    .paso-go__cab .btn[b-e96lqwq2jt] {
        flex: 0 0 auto;
        width: auto;
        padding: .15rem .6rem;
        font-size: .72rem;
        line-height: 1.5;
        white-space: nowrap;
    }

.paso-go__grupo[b-e96lqwq2jt] {
    border: 1px solid #eef0f2;
    border-radius: .4rem;
    padding: .55rem;
    margin-bottom: .5rem;
    background: #fafbfc;
}

.paso-go__grupo-head[b-e96lqwq2jt] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.paso-go__grupo-orden[b-e96lqwq2jt] { font-weight: 700; color: #6c757d; font-size: .8rem; }
.paso-go__grupo-modo[b-e96lqwq2jt] { color: #adb5bd; font-size: .75rem; }
.paso-go__grupo-head .btn[b-e96lqwq2jt] { margin-left: auto; }

.paso-go__grupo-body[b-e96lqwq2jt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

.paso-go__field[b-e96lqwq2jt] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 10rem;
    font-size: .75rem;
    color: #495057;
    margin: 0;
}

.paso-go__field--full[b-e96lqwq2jt] { flex: 1 1 100%; }

.paso-go__check[b-e96lqwq2jt] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    margin: 0 0 .3rem;
    white-space: nowrap;
}

.paso-go__acciones[b-e96lqwq2jt] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.paso-go__orden[b-e96lqwq2jt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.paso-go__orden select[b-e96lqwq2jt] { max-width: 16rem; }

.paso-go__empty[b-e96lqwq2jt] {
    color: #6c757d;
    font-size: .85rem;
    padding: .75rem;
}

/* ── Nivel de acumulación (Solo totales) ── */
.paso-go__resumen[b-e96lqwq2jt] { background: #f6f9ff; border-color: #b6d4fe; }

.paso-go__resumen-check[b-e96lqwq2jt] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    cursor: pointer;
}

.paso-go__resumen-check input[b-e96lqwq2jt] { margin-top: .2rem; }
.paso-go__resumen-txt[b-e96lqwq2jt] { display: flex; flex-direction: column; gap: .1rem; }
.paso-go__resumen-txt strong[b-e96lqwq2jt] { font-size: .92rem; }
.paso-go__resumen-txt span[b-e96lqwq2jt] { color: #495057; font-size: .82rem; }
.paso-go__resumen-nota[b-e96lqwq2jt] { margin: .5rem 0 0; color: #6c757d; font-size: .78rem; }

/* ── Los tres bloques, uno al lado del otro, llenando el alto disponible ── */
.paso-go__layout[b-e96lqwq2jt] {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible: sin esto el hijo no puede scrollear dentro del flex */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* ── Pestañas: con sitio se ven los tres bloques; por debajo del corte, uno solo ── */
.paso-go__tabs[b-e96lqwq2jt] {
    display: none; /* con hueco para tres columnas las pestañas sobran */
}

.paso-go__tab[b-e96lqwq2jt] {
    flex: 0 0 auto; /* tamaño fijo: ni crecen para llenar la fila ni se encogen */
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    border-radius: .8rem;
    padding: .1rem .6rem;
    font-size: .72rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}

    .paso-go__tab:hover[b-e96lqwq2jt] {
        background: #f4f8ff;
        border-color: #b6d4fe;
    }

    .paso-go__tab.is-active[b-e96lqwq2jt] {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        font-weight: 600;
    }

    /* El <button> pelado trae el anillo de foco negro del navegador; se cambia por uno discreto. */
    .paso-go__tab:focus-visible[b-e96lqwq2jt] {
        outline: 2px solid #b6d4fe;
        outline-offset: 1px;
    }

@media (max-width: 1200px) {
    .paso-go__tabs[b-e96lqwq2jt] {
        display: flex;
        flex: 0 0 auto; /* la barra no crece ni se encoge: se queda clavada arriba */
        align-items: center;
        flex-wrap: wrap;
        gap: .3rem;
        margin-bottom: .5rem;
    }

    /* Una sola columna y un solo bloque visible: se conserva el estiramiento y el scroll
       interno del modo ancho, porque ya no hay varias filas que repartir. */
    .paso-go__layout[b-e96lqwq2jt] {
        grid-template-columns: 1fr;
    }

    .paso-go__bloque:not(.is-activa)[b-e96lqwq2jt] {
        display: none;
    }
}

/* _content/ErpPowergest/Presentation/Informes/Listados/PasoParametros.razor.rz.scp.css */
/* Parámetros del diálogo de ejecución. Estilo mínimo; pensado para rediseñar. */

.paso-par__head[b-qs8ge1fjd0] { margin-bottom: 1rem; }
.paso-par__title[b-qs8ge1fjd0] { margin: 0 0 .25rem; font-size: 1.1rem; }
.paso-par__hint[b-qs8ge1fjd0] { margin: 0; color: #6c757d; font-size: .85rem; }

.paso-par__empty[b-qs8ge1fjd0] { color: #6c757d; font-size: .85rem; padding: .75rem; }

.paso-par__item[b-qs8ge1fjd0] {
    border: 1px solid #eef0f2;
    border-radius: .4rem;
    padding: .55rem;
    margin-bottom: .5rem;
    background: #fafbfc;
}

.paso-par__item-head[b-qs8ge1fjd0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.paso-par__item-head .btn[b-qs8ge1fjd0] { margin-left: auto; }

.paso-par__item-body[b-qs8ge1fjd0],
.paso-par__nuevo-body[b-qs8ge1fjd0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

.paso-par__field[b-qs8ge1fjd0] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 10rem;
    font-size: .75rem;
    color: #495057;
    margin: 0;
}

.paso-par__field--sm[b-qs8ge1fjd0] { flex: 0 1 9rem; }
.paso-par__field--wide[b-qs8ge1fjd0] { flex: 1 1 100%; }

.paso-par__badge[b-qs8ge1fjd0] {
    font-size: .7rem;
    color: #495057;
    background: #eef0f2;
    border-radius: .3rem;
    padding: .1rem .4rem;
}

.paso-par__estandar[b-qs8ge1fjd0] { border-style: solid; background: #f6f9ff; }
.paso-par__estandar .paso-par__hint[b-qs8ge1fjd0] { flex: 1 1 14rem; align-self: center; }

.paso-par__check[b-qs8ge1fjd0] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    margin: 0 0 .3rem;
    white-space: nowrap;
}

.paso-par__nuevo[b-qs8ge1fjd0] {
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    margin: 0 0 1rem; /* era margin-top: ahora el formulario va arriba y separa de la lista */
}

.paso-par__nuevo-cab[b-qs8ge1fjd0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.paso-par__nuevo-tit[b-qs8ge1fjd0] {
    font-weight: 600;
    font-size: .9rem;
    margin: 0; /* el hueco lo pone ya la cabecera */
}

/* El .btn-primary global (app.css) fuerza width:100% y padding gordo; aquí se anula. */
.paso-par__add[b-qs8ge1fjd0] {
    flex: 0 0 auto;
    width: auto;
    padding: .25rem .7rem;
    font-size: .72rem;
    line-height: 1.4;
    border-radius: .35rem;
    white-space: nowrap;
}
/* _content/ErpPowergest/Presentation/Informes/Pages/EjecutarListadoPage.razor.rz.scp.css */
/* El emisor como página: cabecera como la de /informes y un panel blanco con el emisor dentro. */

.ejecutar[b-hd0g4cef3p] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.ejecutar__head[b-hd0g4cef3p] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ejecutar__title[b-hd0g4cef3p] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.ejecutar__subtitle[b-hd0g4cef3p] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.ejecutar__volver[b-hd0g4cef3p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

    .ejecutar__volver:hover[b-hd0g4cef3p] {
        background: #f9fafb;
    }

    .ejecutar__volver .material-symbols-rounded[b-hd0g4cef3p] {
        font-size: 17px;
    }

.ejecutar__panel[b-hd0g4cef3p] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    padding: 18px 20px;
}
/* _content/ErpPowergest/Presentation/Informes/Pages/InformesAreaPage.razor.rz.scp.css */
/* Página de informes por área (EL3). Es el CSS que tenían las ocho páginas de área, quedándose solo
   con lo que esta pinta: hero, panel con menú lateral y la cabecera del informe seleccionado.
   Los rangos, los botones y la tabla los pinta EmisorListado con su propio CSS, así que aquí no hay
   nada de .inf-param-*, .inf-tabla*, .informes-actions-bar ni .inf-primary-btn.
   Los botones del menú son nativos (<button>), no SfButton: por eso tampoco hay selectores .e-btn
   ni ::deep. */

.informes-page[b-lcsop5wkjb],
.informes-page *[b-lcsop5wkjb],
.informes-page *[b-lcsop5wkjb]::before,
.informes-page *[b-lcsop5wkjb]::after {
    box-sizing: border-box;
}

.informes-page[b-lcsop5wkjb] {
    height: calc(100dvh - 135px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    animation: informesPageIn-b-lcsop5wkjb 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.card-panel[b-lcsop5wkjb] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.section-title[b-lcsop5wkjb] {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

    .section-title.no-margin[b-lcsop5wkjb] {
        margin-bottom: 0;
    }

.informes-layout-panel[b-lcsop5wkjb] {
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.informes-layout[b-lcsop5wkjb] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    overflow: hidden;
}

.informes-sidebar[b-lcsop5wkjb] {
    min-height: 0;
    border-right: 1px solid #e5e7eb;
    background: #fbfcfe;
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.informes-sidebar-head[b-lcsop5wkjb] {
    min-width: 0;
}

.informes-sidebar-subtitle[b-lcsop5wkjb] {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.25;
}

.informes-menu-scroll[b-lcsop5wkjb] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .informes-menu-scroll[b-lcsop5wkjb]::-webkit-scrollbar {
        width: 6px;
    }

    .informes-menu-scroll[b-lcsop5wkjb]::-webkit-scrollbar-track {
        background: transparent;
    }

    .informes-menu-scroll[b-lcsop5wkjb]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .informes-menu-scroll[b-lcsop5wkjb]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.informes-content[b-lcsop5wkjb] {
    min-height: 0;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
}

.informes-config-panel[b-lcsop5wkjb] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.panel-header[b-lcsop5wkjb],
.informes-config-header[b-lcsop5wkjb] {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.informes-config-scroll[b-lcsop5wkjb] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .informes-config-scroll[b-lcsop5wkjb]::-webkit-scrollbar {
        width: 6px;
    }

    .informes-config-scroll[b-lcsop5wkjb]::-webkit-scrollbar-track {
        background: transparent;
    }

    .informes-config-scroll[b-lcsop5wkjb]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .informes-config-scroll[b-lcsop5wkjb]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.informes-report-title-card[b-lcsop5wkjb] {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e6edf7;
    border-radius: 16px;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

    .informes-report-title-card[b-lcsop5wkjb]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    }

.informes-report-title-left[b-lcsop5wkjb] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.informes-report-icon-shell[b-lcsop5wkjb] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 13px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.informes-report-title-icon[b-lcsop5wkjb] {
    font-size: 22px;
    line-height: 1;
}

.informes-report-title-text[b-lcsop5wkjb] {
    min-width: 0;
}

.informes-report-kicker[b-lcsop5wkjb] {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 900;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.informes-report-title[b-lcsop5wkjb] {
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.informes-report-subtitle[b-lcsop5wkjb] {
    min-width: 0;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 650;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.informes-report-pill[b-lcsop5wkjb] {
    height: 28px;
    max-width: 220px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.06);
}

/* ─── MENÚ LATERAL (botones nativos) ───────────────────────────────────────── */

.inf-nav-group[b-lcsop5wkjb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inf-nav-group-btn[b-lcsop5wkjb] {
    width: 100%;
    min-height: 38px;
    height: auto;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #263449;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .inf-nav-group-btn:hover[b-lcsop5wkjb] {
        background: #f8fafc;
        border-color: #eef2f7;
        color: #1f2937;
        transform: translateX(2px);
    }

.inf-nav-group.active > .inf-nav-group-btn[b-lcsop5wkjb] {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.inf-nav-icon-wrap[b-lcsop5wkjb] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inf-nav-group.active .inf-nav-icon-wrap[b-lcsop5wkjb] {
    background: rgba(255, 255, 255, 0.15);
}

.inf-nav-icon[b-lcsop5wkjb] {
    font-size: 19px;
    line-height: 1;
}

.inf-nav-text[b-lcsop5wkjb] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-nav-chevron[b-lcsop5wkjb] {
    width: 19px;
    height: 19px;
    min-width: 19px;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.inf-nav-group.open .inf-nav-chevron[b-lcsop5wkjb] {
    transform: rotate(180deg);
}

.inf-nav-submenu[b-lcsop5wkjb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0 5px 32px;
    animation: infSubmenuIn-b-lcsop5wkjb 0.18s ease both;
}

.inf-nav-sub-btn[b-lcsop5wkjb] {
    width: 100%;
    min-height: 30px;
    height: auto;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .inf-nav-sub-btn:hover[b-lcsop5wkjb] {
        background: #f8fafc;
        color: #1f2937;
        border-color: #eef2f7;
        transform: translateX(2px);
    }

    .inf-nav-sub-btn.active[b-lcsop5wkjb],
    .inf-nav-sub-btn.active:hover[b-lcsop5wkjb] {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #dbeafe;
    }

.inf-nav-sub-icon[b-lcsop5wkjb] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #94a3b8;
}

.inf-nav-sub-btn.active .inf-nav-sub-icon[b-lcsop5wkjb],
.inf-nav-sub-btn:hover .inf-nav-sub-icon[b-lcsop5wkjb] {
    color: #2563eb;
}

.inf-nav-sub-text[b-lcsop5wkjb] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un área sin ningún listado ejecutable (rol sin permisos, o nada sembrado). */
.inf-vacio[b-lcsop5wkjb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #b45309;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 750;
}

    .inf-vacio .material-symbols-outlined[b-lcsop5wkjb] {
        font-size: 18px;
        flex: 0 0 auto;
    }

@keyframes informesPageIn-b-lcsop5wkjb {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes infSubmenuIn-b-lcsop5wkjb {
    from {
        opacity: 0;
        transform: translateY(-4px);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (max-width: 1280px) {
    .informes-page[b-lcsop5wkjb] {
        height: calc(100dvh - 96px);
    }

    .informes-layout[b-lcsop5wkjb] {
        grid-template-columns: 245px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .informes-page[b-lcsop5wkjb] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .informes-layout-panel[b-lcsop5wkjb] {
        height: auto;
        overflow: visible;
    }

    .informes-layout[b-lcsop5wkjb] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .informes-sidebar[b-lcsop5wkjb] {
        max-height: 150px;
        padding: 10px;
        gap: 8px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .informes-sidebar-subtitle[b-lcsop5wkjb] {
        display: none;
    }

    .inf-nav-group-btn[b-lcsop5wkjb] {
        min-height: 34px;
    }

    .informes-content[b-lcsop5wkjb] {
        overflow: visible;
    }

    .informes-config-panel[b-lcsop5wkjb] {
        height: auto;
        overflow: visible;
    }

    .informes-config-scroll[b-lcsop5wkjb] {
        overflow: visible;
    }

    .informes-report-title-card[b-lcsop5wkjb] {
        align-items: flex-start;
        flex-direction: column;
    }

    .informes-report-pill[b-lcsop5wkjb] {
        max-width: 100%;
    }

    .informes-report-subtitle[b-lcsop5wkjb],
    .informes-report-title[b-lcsop5wkjb] {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .informes-sidebar[b-lcsop5wkjb] {
        max-height: 150px;
    }
}

@media (max-width: 640px) {
    .card-panel[b-lcsop5wkjb] {
        padding: 10px;
    }

    .informes-report-title-card[b-lcsop5wkjb] {
        padding: 11px 12px;
    }

    .informes-report-title-left[b-lcsop5wkjb] {
        align-items: flex-start;
    }

    .informes-report-icon-shell[b-lcsop5wkjb] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 12px;
    }

    .informes-report-title-icon[b-lcsop5wkjb] {
        font-size: 20px;
    }

    .informes-report-title[b-lcsop5wkjb] {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .informes-page[b-lcsop5wkjb],
    .informes-page *[b-lcsop5wkjb],
    .informes-page *[b-lcsop5wkjb]::before,
    .informes-page *[b-lcsop5wkjb]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── CABECERA HERO ─────────────────────────────────────────────────────────── */

.informes-hero[b-lcsop5wkjb] {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #e6edf7;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.10), transparent 42%), linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    animation: informesPageIn-b-lcsop5wkjb 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .informes-hero[b-lcsop5wkjb]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 5px;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    }

.informes-hero-icon[b-lcsop5wkjb] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
}

    .informes-hero-icon .material-symbols-outlined[b-lcsop5wkjb] {
        font-size: 28px;
        line-height: 1;
    }

.informes-hero-text[b-lcsop5wkjb] {
    min-width: 0;
}

.informes-hero-kicker[b-lcsop5wkjb] {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.informes-hero-title[b-lcsop5wkjb] {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #111827;
}

.informes-hero-subtitle[b-lcsop5wkjb] {
    margin: 4px 0 0;
    max-width: 760px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #6b7280;
}

@media (max-width: 640px) {
    .informes-hero[b-lcsop5wkjb] {
        gap: 12px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .informes-hero-icon[b-lcsop5wkjb] {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

        .informes-hero-icon .material-symbols-outlined[b-lcsop5wkjb] {
            font-size: 24px;
        }

    .informes-hero-title[b-lcsop5wkjb] {
        font-size: 19px;
    }

    .informes-hero-subtitle[b-lcsop5wkjb] {
        font-size: 12px;
    }
}
/* _content/ErpPowergest/Presentation/Informes/Pages/InformesPage.razor.rz.scp.css */
/* Lanzadera de listados guardados (L6), con la MISMA disposición y el mismo vocabulario visual que
   «Mis tareas» (TareasPage.razor.css): cabecera con título y CommandBar, panel de categorías a la izquierda
   y tarjeta blanca con el buscador y la lista a la derecha. Mismas medidas, colores y radios.

   Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de otra
   página lleva su propio atributo de scope y no alcanza a esta.

   NINGÚN botón usa las clases .btn de Bootstrap A PROPÓSITO: app.css le pone `width: 100%` y
   `padding: .95rem` a .btn-primary, así que cualquier botón primario salía como una barra de lado a lado. */

/* ── Lo común con «Mis tareas» ── */

.op-page[b-t2a0iht9tc] { padding: 0; color: #1f2933; --ta-alto-campo: 2.6rem; }

.op-header[b-t2a0iht9tc] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; margin-bottom: 9px; }
.op-header-text[b-t2a0iht9tc] { flex: 0 0 auto; min-width: 0; }
.op-header.command-bar-host-collapsed > .op-header-text[b-t2a0iht9tc] { flex: 1 1 auto; }
.op-header[b-t2a0iht9tc]  .op-header-actions { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }
.op-title[b-t2a0iht9tc] { font-size: 1.6rem; font-weight: 700; margin: 0; white-space: nowrap; }
.op-subtitle[b-t2a0iht9tc] { color: #61707d; font-size: .9rem; margin-top: .15rem; white-space: nowrap; }
.op-header.command-bar-host-collapsed .op-title[b-t2a0iht9tc],
.op-header.command-bar-host-collapsed .op-subtitle[b-t2a0iht9tc] { white-space: normal; overflow-wrap: break-word; }

.op-card[b-t2a0iht9tc] { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.op-card-head[b-t2a0iht9tc] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.op-card-title[b-t2a0iht9tc] { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }

.op-form-row[b-t2a0iht9tc] { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .9rem; }
.op-field[b-t2a0iht9tc] { display: flex; flex-direction: column; gap: .25rem; }
.op-field-ancho[b-t2a0iht9tc] { flex: 1 1 16rem; }
.op-field label[b-t2a0iht9tc] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 600; }
.op-input[b-t2a0iht9tc] { border: 1px solid #cdd5df; border-radius: 8px; padding: .55rem .7rem; font-size: .95rem; background: #fff; color: #1f2933; box-sizing: border-box; height: var(--ta-alto-campo); }

.op-icon-btn[b-t2a0iht9tc] { background: none; border: none; color: #61707d; cursor: pointer; padding: .15rem; line-height: 1; border-radius: 6px; }
.op-icon-btn:hover:not(:disabled)[b-t2a0iht9tc] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn .material-symbols-rounded[b-t2a0iht9tc] { font-size: 1.15rem; }

.op-hint[b-t2a0iht9tc] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-t2a0iht9tc] { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.op-badge-off[b-t2a0iht9tc] { background: #eef1f4; color: #61707d; }

/* Dos columnas: panel de categorías a la izquierda y la categoría elegida a la derecha, del mismo alto. */
.ta-layout[b-t2a0iht9tc] { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ta-main[b-t2a0iht9tc] { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ta-main > .op-card[b-t2a0iht9tc] { margin-bottom: 0; border-radius: 16px; border-color: #e5e7eb; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); }

.ta-panel[b-t2a0iht9tc] { min-width: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .045); display: flex; flex-direction: column; }
.ta-bandejas-panel[b-t2a0iht9tc] { min-height: 0; }
.ta-panel-header[b-t2a0iht9tc] { margin-bottom: 12px; }
.ta-panel-title[b-t2a0iht9tc] { font-size: 16px; line-height: 1.2; font-weight: 850; color: #1f2937; }
.ta-panel-subtitle[b-t2a0iht9tc] { margin-top: 4px; font-size: 12px; color: #6b7280; line-height: 1.35; }

.ta-bandejas-buscar[b-t2a0iht9tc] { display: flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 10px;
                      padding: 0 10px; margin-bottom: 10px; background: #fff; }
.ta-bandejas-buscar .material-symbols-rounded[b-t2a0iht9tc] { font-size: 18px; color: #94a3b8; }
.ta-bandejas-input[b-t2a0iht9tc] { flex: 1 1 auto; min-width: 0; border: none; outline: none; padding: 8px 0; font-size: 13px; background: transparent; }
.ta-bandejas-buscar:focus-within[b-t2a0iht9tc] { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.ta-tabs[b-t2a0iht9tc] { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden;
           padding-right: 3px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.ta-tab[b-t2a0iht9tc] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent;
          border-radius: 9px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: #334155; cursor: pointer;
          transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ta-tab:hover[b-t2a0iht9tc] { background: #f1f5f9; }
.ta-tab-ico[b-t2a0iht9tc] { font-size: 19px; color: #64748b; flex: 0 0 auto; }
.ta-tab-texto[b-t2a0iht9tc] { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-tab-activa[b-t2a0iht9tc], .ta-tab-activa:hover[b-t2a0iht9tc] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ta-tab-activa .ta-tab-ico[b-t2a0iht9tc] { color: #2563eb; }
.ta-bandejas-vacio[b-t2a0iht9tc] { padding: 6px 8px; }

.ta-filtros[b-t2a0iht9tc] { margin-bottom: .6rem; }
.ta-lista-card[b-t2a0iht9tc] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ── Propio de los listados ── */

/* Cuántos listados tiene cada categoría, discreto a la derecha de su nombre. */
.lg-cuenta[b-t2a0iht9tc] { flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b;
             font-size: 11.5px; font-weight: 700; text-align: center; }
.ta-tab-activa .lg-cuenta[b-t2a0iht9tc] { background: #dbeafe; color: #1d4ed8; }

/* La lista: una fila por listado, como las filas de la tabla de tareas. La fila entera ejecuta. */
.lg-lista[b-t2a0iht9tc] { display: flex; flex-direction: column; border-top: 1px solid #e3e8ee; }
.lg-fila[b-t2a0iht9tc] { display: flex; align-items: center; gap: .85rem; padding: .75rem .65rem; border-bottom: 1px solid #f0f3f7; cursor: pointer;
           border-radius: 0; transition: background .12s; }
.lg-fila:hover[b-t2a0iht9tc] { background: #f5f8fc; }
.lg-fila:focus-visible[b-t2a0iht9tc] { outline: 2px solid #93c5fd; outline-offset: -2px; background: #f5f8fc; }
.lg-fila-ico[b-t2a0iht9tc] { font-size: 20px; color: #94a3b8; flex: 0 0 auto; }
.lg-fila-texto[b-t2a0iht9tc] { flex: 1 1 auto; min-width: 0; }
.lg-fila-titulo[b-t2a0iht9tc] { font-weight: 600; font-size: .95rem; color: #1f2933; }
.lg-fila-desc[b-t2a0iht9tc] { margin-top: 2px; font-size: .82rem; color: #61707d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-fila-cod[b-t2a0iht9tc] { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: #61707d;
               background: #f2f5f9; border: 1px solid #e0e6ee; border-radius: 6px; padding: .1rem .45rem; }
.lg-fila-run[b-t2a0iht9tc] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .15rem; color: #2f6fed; font-size: .85rem; font-weight: 600; }
.lg-fila-run .material-symbols-rounded[b-t2a0iht9tc] { font-size: 1.1rem; }
.lg-fila-editar[b-t2a0iht9tc] { flex: 0 0 auto; opacity: 0; }
.lg-fila:hover .lg-fila-editar[b-t2a0iht9tc], .lg-fila:focus-within .lg-fila-editar[b-t2a0iht9tc] { opacity: 1; }

/* ── Estados sin lista ── */

.listados__estado[b-t2a0iht9tc],
.listados__vacio[b-t2a0iht9tc] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 32px 18px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.ta-lista-card .listados__vacio[b-t2a0iht9tc] { border: none; padding: 24px 12px; }

.listados__vacio[b-t2a0iht9tc] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.listados__vacio-icon[b-t2a0iht9tc] { font-size: 40px; color: #9ca3af; }
.listados__vacio p[b-t2a0iht9tc] { margin: 0; }

.listados__vacio-btn[b-t2a0iht9tc] {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    background: #fff; color: #374151; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.listados__vacio-btn:hover[b-t2a0iht9tc] { background: #f9fafb; }

/* ── Pantallas pequeñas: como «Mis tareas», las categorías pasan arriba en una tira que se desplaza en
   horizontal (no se apilan en varias filas) ── */
@media (max-width: 900px) {
    .ta-layout[b-t2a0iht9tc] { grid-template-columns: minmax(0, 1fr); }
    .ta-tabs[b-t2a0iht9tc] { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .ta-tab[b-t2a0iht9tc] { width: auto; flex: 0 0 auto; }
    .ta-tab-texto[b-t2a0iht9tc] { flex: 0 1 auto; }
    .op-card[b-t2a0iht9tc] { padding: 1rem; }
    .lg-fila-editar[b-t2a0iht9tc] { opacity: 1; }
}

@media (max-width: 600px) {
    .op-subtitle[b-t2a0iht9tc] { white-space: normal; }
    .op-form-row[b-t2a0iht9tc] { flex-direction: column; align-items: stretch; }
    .op-field[b-t2a0iht9tc], .op-field-ancho[b-t2a0iht9tc] { width: 100%; flex: 1 1 auto; }
    .op-input[b-t2a0iht9tc] { width: 100%; }
    .lg-fila[b-t2a0iht9tc] { flex-wrap: wrap; gap: .4rem .7rem; }
    .lg-fila-texto[b-t2a0iht9tc] { flex: 1 1 calc(100% - 3rem); }
    .lg-fila-cod[b-t2a0iht9tc] { margin-left: 2rem; }
    .lg-fila-run[b-t2a0iht9tc] { margin-left: auto; }
    .op-icon-btn[b-t2a0iht9tc] { min-width: 36px; min-height: 36px; }
}
/* _content/ErpPowergest/Presentation/Informes/Pages/InformeVisorPage.razor.rz.scp.css */
.iv-page[b-jmhvdjbnzd] { padding: 20px 24px; max-width: 1100px; margin: 0 auto; }

.iv-header[b-jmhvdjbnzd] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.iv-title[b-jmhvdjbnzd] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.iv-chip[b-jmhvdjbnzd] { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
           background: #eef2ff; color: #4338ca; font-size: .8rem; font-weight: 600; }
.iv-chip .material-symbols-rounded[b-jmhvdjbnzd] { font-size: 16px; }

.iv-card[b-jmhvdjbnzd] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 0; overflow: hidden; }
.iv-empty[b-jmhvdjbnzd] { padding: 32px; text-align: center; color: #6b7280; }

.iv-table-wrap[b-jmhvdjbnzd] { overflow-x: auto; }
.iv-table[b-jmhvdjbnzd] { width: 100%; border-collapse: collapse; font-size: .88rem; }
.iv-table thead th[b-jmhvdjbnzd] { position: sticky; top: 0; background: #f9fafb; color: #374151; font-weight: 600;
                     text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.iv-table tbody td[b-jmhvdjbnzd] { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.iv-table tbody tr:hover[b-jmhvdjbnzd] { background: #f9fafb; }
.iv-table th.num[b-jmhvdjbnzd], .iv-table td.num[b-jmhvdjbnzd] { text-align: right; font-variant-numeric: tabular-nums; }

.iv-foot[b-jmhvdjbnzd] { padding: 10px 14px; color: #6b7280; font-size: .8rem; border-top: 1px solid #f3f4f6; }
/* _content/ErpPowergest/Presentation/Informes/Pages/VerListadoPage.razor.rz.scp.css */
/* El informe en pantalla con el visor de Syncfusion. Mismo lenguaje que /informes/ejecutar: cabecera
   con título y «volver», y debajo el marco blanco. La diferencia es que aquí el marco LO OCUPA TODO:
   un visor de PDF con media pantalla no resuelve nada, que es justo lo que se venía a arreglar. */

.verlistado[b-s47evtg7ya] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    /* Alto completo menos la cabecera: el visor es la pantalla, no un widget dentro de ella. */
    height: calc(100vh - 150px);
    min-height: 480px;
}

.verlistado__head[b-s47evtg7ya] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.verlistado__titulo[b-s47evtg7ya] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

    .verlistado__titulo h1[b-s47evtg7ya] {
        margin: 0;
        font-size: 23px;
        line-height: 1.2;
        font-weight: 800;
        color: #1f2937;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .verlistado__titulo .material-symbols-rounded[b-s47evtg7ya] {
        font-size: 26px;
        color: #b91c1c;
        flex: 0 0 auto;
    }

.verlistado__volver[b-s47evtg7ya] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    flex: 0 0 auto;
}

    .verlistado__volver:hover[b-s47evtg7ya] {
        background: #f9fafb;
    }

    .verlistado__volver .material-symbols-rounded[b-s47evtg7ya] {
        font-size: 17px;
    }

/* El marco del visor. `overflow: hidden` + el radio recortan las esquinas de la barra de Syncfusion,
   que es cuadrada y se salía del marco. */
.verlistado__visor[b-s47evtg7ya] {
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.verlistado__aviso[b-s47evtg7ya] {
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13.5px;
}
/* _content/ErpPowergest/Presentation/Instalacion/Pages/Instalar.razor.rz.scp.css */
/* Pantalla de instalación inicial.
 *
 * Estilos PROPIOS y no los del alta de empresa: aquélla es de dos columnas (un panel con
 * imagen a la izquierda y el formulario a la derecha), y al reutilizarla aquí el logo salía
 * a tamaño gigante y el formulario se desbordaba por la izquierda, cortando el título.
 * Aquí basta una sola columna centrada. */

.instalar-wrapper[b-zbzdd1usv4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 16px;
    background: #f5f6fa;
    box-sizing: border-box;
}

/* Marca */
.marca[b-zbzdd1usv4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.8rem;
}

/* Altura fija: el logo es un SVG grande y sin esto ocupa media pantalla. */
.marca-logo[b-zbzdd1usv4] {
    height: 34px;
    width: auto;
    user-select: none;
    -webkit-user-select: none;
}

.marca-texto[b-zbzdd1usv4] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin: 0;
}

/* Tarjeta */
.tarjeta[b-zbzdd1usv4] {
    width: 100%;
    max-width: 460px;
    padding: 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.tarjeta-centrada[b-zbzdd1usv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.titulo[b-zbzdd1usv4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 0.4rem;
}

.subtitulo[b-zbzdd1usv4] {
    color: #555;
    font-size: 0.95rem;
    margin: 0 0 1.6rem;
}

/* Separación entre los campos: el InputField no la trae. */
.campos > *[b-zbzdd1usv4] {
    margin-bottom: 0.9rem;
}

.icono[b-zbzdd1usv4] {
    font-size: 3.2rem;
    line-height: 1;
    color: #3b82f6;
}

.icono-ok[b-zbzdd1usv4] {
    color: #2e9e5b;
}

.icono-cerrado[b-zbzdd1usv4] {
    color: #b0752a;
}

.mensaje[b-zbzdd1usv4] {
    color: #555;
    font-size: 1rem;
    margin: 0.4rem 0 0.8rem;
}

.error[b-zbzdd1usv4] {
    color: #c0392b;
    font-size: 0.9rem;
    margin: 0 0 0.8rem;
}

/* Dirección resultante, bajo el campo del nombre corto. Sube un poco para quedar pegada
   al campo al que se refiere y no parecer un texto suelto. */
.ayuda[b-zbzdd1usv4] {
    margin: -0.5rem 0 0.9rem;
    padding-left: 2px;
    font-size: 0.85rem;
    color: #667;
}

.ayuda strong[b-zbzdd1usv4] {
    color: #3b82f6;
    font-weight: 600;
}

.enlace[b-zbzdd1usv4] {
    font-size: 0.9rem;
    margin: 0;
}

.enlace a[b-zbzdd1usv4] {
    color: #3b82f6;
    text-decoration: none;
}

.enlace a:hover[b-zbzdd1usv4] {
    text-decoration: underline;
}

/* Botón: ancho completo, como el resto de formularios de acceso. */
.boton[b-zbzdd1usv4] {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.boton:hover:not(:disabled)[b-zbzdd1usv4] {
    background: #2f6fd0;
}

.boton:disabled[b-zbzdd1usv4] {
    background: #9db8e0;
    cursor: default;
}

/* Móviles */
@media (max-width: 520px) {
    .instalar-wrapper[b-zbzdd1usv4] {
        padding: 28px 12px;
    }

    .tarjeta[b-zbzdd1usv4] {
        padding: 24px;
    }

    .marca-texto[b-zbzdd1usv4] {
        font-size: 1.5rem;
    }
}
/* _content/ErpPowergest/Presentation/Layout/LeftSidebar.razor.rz.scp.css */
/* =========================================================
   LeftSidebar
   Estilo sobrio (referencias: Linear, Vercel, shadcn/ui Sidebar): fondo blanco, neutros slate y el azul
   de marca solo como acento del elemento activo. Sin degradados ni sombras en las filas.

   Geometría: los iconos NO se mueven al contraer/expandir. Todas las filas miden lo mismo en los dos
   estados (--sb-row) y el centro de cada icono cae siempre en x = --sb-collapsed / 2 (32px):
     · expandido: 12px de margen del scroller + 10px de padding de la fila + 10px (medio icono) = 32px
     · contraído: 64px / 2 = 32px
   El logo y la insignia del espacio de trabajo se alinean al mismo eje. Al contraer solo desaparecen
   las etiquetas; la altura y posición de cada icono se mantienen.
========================================================= */

.sidebar[b-0wfn46b7j1] {
    --sb-width: 256px;
    --sb-collapsed: 64px;
    --sb-gutter: 12px;
    --sb-row: 36px;
    --sb-row-gap: 2px;
    --sb-radius: 8px;
    --sb-icon: 20px;

    --sb-bg: #ffffff;
    --sb-border: #e7edf5;
    --sb-text: #334155;
    --sb-text-strong: #0f172a;
    --sb-text-muted: #64748b;
    --sb-text-subtle: #94a3b8;
    --sb-icon-color: #64748b;
    --sb-hover: #f4f6f9;
    --sb-guide: #edf0f5;
    --sb-accent: #2563eb;
    --sb-accent-text: #1e40af;
    --sb-accent-soft: rgba(37, 99, 235, 0.07);
    --sb-focus: rgba(37, 99, 235, 0.35);

    height: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    width: var(--sb-width);
    max-width: var(--sb-width);
    background: var(--sb-bg);
    color: var(--sb-text);
    display: flex;
    flex-direction: column;
    position: relative;
    border-right: 1px solid var(--sb-border);
    /* visible: el flyout de grupo y el desplegable del espacio salen por la derecha. El scroll y el
       recorte de etiquetas los hace .sidebar-menu-items, no el contenedor raíz. */
    overflow: visible;
    overscroll-behavior: contain;
    transition: width 0.2s ease, max-width 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.sidebar-top[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sidebar[b-0wfn46b7j1]  a {
    text-decoration: none;
}

/* La versión instalada: abajo, pequeña y apagada. Se puede seleccionar para copiarla y mandarla a soporte. */
.sidebar-version[b-0wfn46b7j1] {
    flex: none;
    padding: 8px var(--sb-gutter) 10px;
    border-top: 1px solid var(--sb-border);
    color: var(--sb-text-subtle);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: text;
    -webkit-user-select: text;
}

.tooltip-text[b-0wfn46b7j1] {
    display: none;
}

/* =========================================================
   Cabecera / marca — 64px en los dos estados, alineada con MainHeader
========================================================= */

.sidebar-header[b-0wfn46b7j1] {
    position: relative;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--sb-border);
    z-index: 4;
}

.sidebar-logo[b-0wfn46b7j1] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.brand-link[b-0wfn46b7j1] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sb-text-strong);
    border-radius: var(--sb-radius);
}

    .brand-link:focus-visible[b-0wfn46b7j1] {
        outline: 2px solid var(--sb-focus);
        outline-offset: 2px;
    }

.brand-logo-shell[b-0wfn46b7j1] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo[b-0wfn46b7j1] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.brand-text-wrap[b-0wfn46b7j1] {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.brand-text[b-0wfn46b7j1] {
    color: var(--sb-text-strong);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-resizer[b-0wfn46b7j1] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-resizer:hover[b-0wfn46b7j1] {
        background: var(--sb-hover);
        color: var(--sb-text);
    }

    .sidebar-resizer:focus[b-0wfn46b7j1] {
        outline: none;
    }

    .sidebar-resizer:focus-visible[b-0wfn46b7j1] {
        outline: 2px solid var(--sb-focus);
        outline-offset: -2px;
    }

    .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
        font-size: 20px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    }

/* =========================================================
   Espacio de trabajo (fila sobre el menú; el componente trae su propio estilo)
========================================================= */

.sidebar-menu[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.sidebar-espacio-block[b-0wfn46b7j1] {
    position: relative;
    flex: 0 0 auto;
    padding: 12px var(--sb-gutter) 0;
}

    .sidebar-espacio-block:empty[b-0wfn46b7j1] {
        display: none;
    }

/* =========================================================
   Menú
========================================================= */

.sidebar-menu-items[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: var(--sb-row-gap);
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px var(--sb-gutter) 16px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Se puede scrollear, pero la barra no se pinta: contraído descentraba los iconos. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

    .sidebar-menu-items[b-0wfn46b7j1]::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

.sidebar-group[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: var(--sb-row-gap);
}

/* Fila de primer nivel: hoja (enlace) o cabecera de grupo (botón). Misma caja en los dos estados. */
.sidebar-group-btn[b-0wfn46b7j1],
.sidebar-link[b-0wfn46b7j1] {
    position: relative;
    width: 100%;
    height: var(--sb-row);
    min-height: var(--sb-row);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-group-btn:hover[b-0wfn46b7j1],
    .sidebar-link:hover[b-0wfn46b7j1] {
        background: var(--sb-hover);
        color: var(--sb-text-strong);
    }

    .sidebar-group-btn:focus[b-0wfn46b7j1],
    .sidebar-link:focus[b-0wfn46b7j1] {
        outline: none;
    }

    .sidebar-group-btn:focus-visible[b-0wfn46b7j1],
    .sidebar-link:focus-visible[b-0wfn46b7j1] {
        outline: 2px solid var(--sb-focus);
        outline-offset: -2px;
    }

.nav-icon-wrap[b-0wfn46b7j1] {
    width: var(--sb-icon);
    height: var(--sb-icon);
    flex: 0 0 var(--sb-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-icon-color);
    transition: color 0.15s ease;
}

.nav-icon[b-0wfn46b7j1] {
    color: inherit;
    font-size: var(--sb-icon);
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.sidebar-group-btn:hover .nav-icon-wrap[b-0wfn46b7j1],
.sidebar-link:hover .nav-icon-wrap[b-0wfn46b7j1] {
    color: var(--sb-text);
}

.nav-text[b-0wfn46b7j1] {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-chevron[b-0wfn46b7j1] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--sb-text-subtle);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-group.open > .sidebar-group-btn .nav-chevron[b-0wfn46b7j1] {
    transform: rotate(180deg);
}

/* Activo — hoja de primer nivel: tinte suave, texto e icono de marca. */
.sidebar-link.active[b-0wfn46b7j1] {
    background: var(--sb-accent-soft);
    color: var(--sb-accent-text);
    font-weight: 600;
}

    .sidebar-link.active .nav-icon-wrap[b-0wfn46b7j1] {
        color: var(--sb-accent);
    }

/* Activo — grupo que contiene la pantalla abierta: sin fondo (lo lleva la hoja), solo énfasis. */
.sidebar-group.active > .sidebar-group-btn[b-0wfn46b7j1] {
    color: var(--sb-text-strong);
    font-weight: 600;
}

    .sidebar-group.active > .sidebar-group-btn .nav-icon-wrap[b-0wfn46b7j1] {
        color: var(--sb-accent);
    }

/* EM7: contador de correos nuevos */
.correo-menu-badge[b-0wfn46b7j1] {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sb-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Submenú (segundo nivel)
   N11b: sin icono; se lee por la sangría y una guía vertical alineada con el centro del icono padre.
   El texto de las hojas arranca en la misma columna que la etiqueta del grupo.
========================================================= */

.sidebar-submenu[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: var(--sb-row-gap);
    margin: 0 0 4px 19px;
    padding-left: 9px;
    border-left: 2px solid var(--sb-guide);
}

.sidebar-sub-link[b-0wfn46b7j1] {
    position: relative;
    height: 32px;
    min-height: 32px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--sb-radius);
    color: var(--sb-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-sub-link:hover[b-0wfn46b7j1] {
        background: var(--sb-hover);
        color: var(--sb-text-strong);
    }

    .sidebar-sub-link:focus[b-0wfn46b7j1] {
        outline: none;
    }

    .sidebar-sub-link:focus-visible[b-0wfn46b7j1] {
        outline: 2px solid var(--sb-focus);
        outline-offset: -2px;
    }

    .sidebar-sub-link.active[b-0wfn46b7j1] {
        background: var(--sb-accent-soft);
        color: var(--sb-accent-text);
        font-weight: 600;
    }

        /* Tramo de la guía en azul a la altura de la hoja activa (pisa exactamente el borde de 2px). */
        .sidebar-sub-link.active[b-0wfn46b7j1]::before {
            content: "";
            position: absolute;
            left: -11px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            border-radius: 2px;
            background: var(--sb-accent);
        }

.nav-sub-text[b-0wfn46b7j1] {
    min-width: 0;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Título de apartado (MenuNodo.Seccion, p. ej. «Ajustes»): rótulo pequeño, sin enlace. */
.sidebar-sub-seccion[b-0wfn46b7j1] {
    margin-top: 8px;
    padding: 6px 12px 4px;
    color: var(--sb-text-subtle);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    cursor: default;
}

/* =========================================================
   Contraído
   Mismas filas, mismo gap, mismo padding vertical: solo cambia el ancho y se ocultan las etiquetas.
========================================================= */

/* +1px del borde derecho (border-box): el área útil mide exactamente --sb-collapsed y su centro es 32px. */
.sidebar.collapsed[b-0wfn46b7j1] {
    width: calc(var(--sb-collapsed) + 1px);
    max-width: calc(var(--sb-collapsed) + 1px);
}

    /* Logo centrado en x = 32px: 16px de padding + 16px de medio logo, igual que expandido. */
    .sidebar.collapsed .sidebar-header[b-0wfn46b7j1] {
        padding: 0 16px;
    }

    .sidebar.collapsed .brand-link[b-0wfn46b7j1] {
        gap: 0;
    }

    .sidebar.collapsed .brand-text-wrap[b-0wfn46b7j1] {
        display: none;
    }

    /* El botón de expandir se superpone al logo. Su icono aparece al pasar por CUALQUIER parte del
       sidebar contraído (y al recibir foco de teclado), sustituyendo al logo en el mismo hueco. */
    .sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        margin: 0;
        transform: translate(-50%, -50%);
        color: var(--sb-text-muted);
        z-index: 5;
        transition: none;
    }

        .sidebar.collapsed .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
            display: none;
        }

    .sidebar.collapsed:hover .sidebar-resizer .resize-icon[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-resizer:focus-visible .resize-icon[b-0wfn46b7j1] {
        display: inline-flex;
    }

    .sidebar.collapsed:hover .brand-logo-shell[b-0wfn46b7j1],
    .sidebar.collapsed:has(.sidebar-resizer:focus-visible) .brand-logo-shell[b-0wfn46b7j1] {
        visibility: hidden;
    }

    .sidebar.collapsed .sidebar-group-btn[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-link[b-0wfn46b7j1] {
        width: var(--sb-row);
        min-width: var(--sb-row);
        margin-inline: auto;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .sidebar.collapsed .nav-text[b-0wfn46b7j1],
    .sidebar.collapsed .nav-chevron[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-submenu[b-0wfn46b7j1] {
        display: none;
    }

    /* Contraído no se ve la hoja: el grupo activo lleva el tinte para que se sepa dónde está uno. */
    .sidebar.collapsed .sidebar-group.active > .sidebar-group-btn[b-0wfn46b7j1] {
        background: var(--sb-accent-soft);
    }

    /* Grupo con su flyout abierto */
    .sidebar.collapsed .sidebar-group.flyout-open > .sidebar-group-btn[b-0wfn46b7j1] {
        background: var(--sb-hover);
        color: var(--sb-text-strong);
    }

        .sidebar.collapsed .sidebar-group.flyout-open > .sidebar-group-btn .nav-icon-wrap[b-0wfn46b7j1] {
            color: var(--sb-text);
        }

    .sidebar.collapsed .sidebar-group.active.flyout-open > .sidebar-group-btn .nav-icon-wrap[b-0wfn46b7j1] {
        color: var(--sb-accent);
    }

    .sidebar.collapsed .correo-menu-badge[b-0wfn46b7j1] {
        position: absolute;
        top: 3px;
        right: 1px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 16px;
        box-shadow: 0 0 0 2px var(--sb-bg);
    }

/* =========================================================
   Flyout de grupo (sidebar contraído)
   position: fixed para escapar del scroller; sidebarPopover.js lo pega al borde derecho del botón y lo
   encaja en vertical dentro de la ventana.
   Nunca es más alto que la ventana (menos 12px por arriba y por abajo, el mismo margen que usa el JS):
   la cabecera queda fija y solo la lista de páginas hace scroll, sin arrastrar al sidebar ni a la página.
========================================================= */

.sidebar-flyout[b-0wfn46b7j1] {
    position: fixed;
    z-index: 2200;
    min-width: 220px;
    max-width: 280px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    /* recorta la cabecera y el scroll a las esquinas redondeadas */
    overflow: hidden;
    animation: flyout-in-b-0wfn46b7j1 0.12s ease-out;
}

@keyframes flyout-in-b-0wfn46b7j1 {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Cabecera: icono del grupo + nombre en semibold, sobre una franja gris muy suave y con divisor.
   Tres niveles que no se confunden: cabecera (esto), apartado (mayúsculas pequeñas) y página (fila). */
.sidebar-flyout-title[b-0wfn46b7j1] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    padding: 12px 16px 11px;
    border-bottom: 1px solid var(--sb-border);
    background: #f8fafc;
    color: var(--sb-text-strong);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1.2;
    cursor: default;
}

.sidebar-flyout-title-icon[b-0wfn46b7j1] {
    flex: 0 0 18px;
    width: 18px;
    font-size: 18px;
    line-height: 1;
    color: var(--sb-text-muted);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.sidebar.collapsed .sidebar-group.active .sidebar-flyout-title-icon[b-0wfn46b7j1] {
    color: var(--sb-accent);
}

.sidebar-flyout-title-text[b-0wfn46b7j1] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lista desplazable. Las sombras arriba/abajo (técnica de background-attachment local/scroll, sin JS)
   solo se ven cuando queda contenido por ese lado: indican que hay más páginas sin ensuciar el caso corto. */
.sidebar-flyout-items[b-0wfn46b7j1] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sb-row-gap);
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-padding-block: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    background:
        linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) center top,
        linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) center bottom,
        radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.10), transparent) center top,
        radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.10), transparent) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 32px, 100% 32px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}

    .sidebar-flyout-items[b-0wfn46b7j1]::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar-flyout-items[b-0wfn46b7j1]::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-flyout-items[b-0wfn46b7j1]::-webkit-scrollbar-thumb {
        border: 2px solid #ffffff;
        border-radius: 8px;
        background: #cbd5e1;
    }

        .sidebar-flyout-items[b-0wfn46b7j1]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

    /* Si la primera página va precedida de un apartado, ese rótulo no necesita su propio divisor. */
    .sidebar-flyout-items > .sidebar-flyout-seccion:first-child[b-0wfn46b7j1] {
        margin-top: 0;
        padding-top: 4px;
        border-top: 0;
    }

.sidebar-flyout-seccion[b-0wfn46b7j1] {
    margin-top: 6px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--sb-guide);
    color: var(--sb-text-subtle);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    cursor: default;
}

.sidebar-flyout-link[b-0wfn46b7j1] {
    height: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--sb-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-flyout-link:hover[b-0wfn46b7j1] {
        background: var(--sb-hover);
        color: var(--sb-text-strong);
    }

    .sidebar-flyout-link:focus[b-0wfn46b7j1] {
        outline: none;
    }

    .sidebar-flyout-link:focus-visible[b-0wfn46b7j1] {
        outline: 2px solid var(--sb-focus);
        outline-offset: -2px;
    }

    .sidebar-flyout-link.active[b-0wfn46b7j1] {
        background: var(--sb-accent-soft);
        color: var(--sb-accent-text);
        font-weight: 600;
    }

/* =========================================================
   Móvil: el sidebar es un cajón superpuesto; «contraído» = oculto.
========================================================= */

@media (max-width: 768px) {
    .sidebar[b-0wfn46b7j1] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--sb-width);
        max-width: var(--sb-width);
        transform: translateX(-100%);
        z-index: 2000;
    }

        .sidebar:not(.collapsed)[b-0wfn46b7j1] {
            transform: translateX(0);
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 8px 0 24px rgba(15, 23, 42, 0.12);
        }

        .sidebar.collapsed[b-0wfn46b7j1] {
            transform: translateX(-100%);
        }

    .sidebar-overlay[b-0wfn46b7j1] {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.32);
        z-index: 1500;
    }
}

@media (min-width: 769px) {
    .sidebar-overlay[b-0wfn46b7j1] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-0wfn46b7j1],
    .sidebar *[b-0wfn46b7j1],
    .sidebar *[b-0wfn46b7j1]::before,
    .sidebar *[b-0wfn46b7j1]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Layout/MainHeader.razor.rz.scp.css */
/* =============================
   MainHeader inspirado en TopBar
   Sin selector de empresa por ahora.
============================= */

.main-header[b-cyv30x6dv1] {
    --header-blue: #2563eb;
    --header-blue-dark: #1d4ed8;
    --header-blue-soft: #eff6ff;
    --header-text: #172033;
    --header-muted: #64748b;
    --header-border: #e7edf5;
    --header-hover: #f8fafc;
    width: 100%;
    height: 64px;
    min-height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--header-border);
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.main-header-shell[b-cyv30x6dv1] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
    pointer-events: auto;
}

/* =============================
   N15: empresa, IA y perfil en la cabecera
============================= */

.header-company[b-cyv30x6dv1] {
    min-width: 0;
    max-width: 300px;
    flex-shrink: 1;
}

/* El asistente se distingue del resto de utilidades por el color, no por otro icono */
.header-ia-btn .icon[b-cyv30x6dv1] {
    color: #7c3aed;
}

.header-ia-btn:hover .icon[b-cyv30x6dv1] {
    color: #6d28d9;
}

.header-profile[b-cyv30x6dv1] {
    display: flex;
    align-items: center;
}

/* =============================
   Boton menu responsive
============================= */

.menu[b-cyv30x6dv1],
.header-icon-btn[b-cyv30x6dv1] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #ffffff;
    color: var(--header-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .menu:hover[b-cyv30x6dv1],
    .header-icon-btn:hover[b-cyv30x6dv1] {
        background: #f8fbff;
        color: var(--header-blue);
        border-color: #bfdbfe;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.09);
        transform: translateY(-1px);
    }

    .menu:active[b-cyv30x6dv1],
    .header-icon-btn:active[b-cyv30x6dv1] {
        transform: scale(0.97);
    }

    .menu:focus[b-cyv30x6dv1],
    .header-icon-btn:focus[b-cyv30x6dv1] {
        outline: none;
    }

    .menu:focus-visible[b-cyv30x6dv1],
    .header-icon-btn:focus-visible[b-cyv30x6dv1] {
        outline: 3px solid rgba(37, 99, 235, 0.16);
        outline-offset: 2px;
    }

    .menu .icon[b-cyv30x6dv1],
    .header-icon-btn .icon[b-cyv30x6dv1] {
        color: inherit;
        font-size: 24px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
    }

/* Burger del menu responsive (solo movil): sin borde, sin fondo y sin animacion de traslacion en hover. */
.menu[b-cyv30x6dv1] {
    border: none;
    background: transparent;
    box-shadow: none;
}

    .menu:hover[b-cyv30x6dv1] {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

/* =============================
   Buscador
============================= */

.header-search-wrapper[b-cyv30x6dv1] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    margin-left: auto;
}

.search-icon[b-cyv30x6dv1] {
    position: absolute;
    left: 12px;
    font-size: 19px;
    line-height: 1;
    color: #9ca3af;
    pointer-events: none;
}

.header-search[b-cyv30x6dv1] {
    width: clamp(240px, 29vw, 430px);
    max-width: 100%;
    height: 40px;
    border: 1px solid #d6dce5;
    border-radius: 13px;
    padding: 0 16px 0 38px;
    background: #ffffff;
    color: #111827;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.025);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .header-search[b-cyv30x6dv1]::placeholder {
        color: #9ca3af;
        font-weight: 600;
    }

    .header-search:hover[b-cyv30x6dv1] {
        background: #fbfdff;
        border-color: #cbd5e1;
    }

    .header-search:focus[b-cyv30x6dv1] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), 0 10px 24px rgba(37, 99, 235, 0.07);
    }

/* =============================
   Barra de acceso rápido (favoritos)
============================= */

.header-favoritos[b-cyv30x6dv1] {
    display: none; /* oculta en móvil; activada desde ≥768px */
    align-items: center;
    gap: 8px; 
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

    .header-favoritos[b-cyv30x6dv1]  .fav-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        background: #ffffff;
        color: var(--header-blue);
        line-height: 1;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        flex-shrink: 0;
    }

        .header-favoritos[b-cyv30x6dv1]  .fav-chip:hover {
            background: #f8fbff;
            color: var(--header-blue);
            border-color: #bfdbfe;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.09);
            transform: translateY(-1px);
        }

        .header-favoritos[b-cyv30x6dv1]  .fav-chip:active {
            transform: scale(0.97);
        }

        .header-favoritos[b-cyv30x6dv1]  .fav-chip.active {
            background: #eff6ff;
            color: var(--header-blue);
            border-color: #bfdbfe;
            box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
        }

    .header-favoritos[b-cyv30x6dv1]  .fav-icon {
        font-size: 22px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
    }


/* =============================
   Acciones derecha
============================= */

.header-actions[b-cyv30x6dv1] {
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.header-btn[b-cyv30x6dv1] {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--header-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .header-btn:hover[b-cyv30x6dv1],
    .header-btn:focus[b-cyv30x6dv1],
    .header-btn:active[b-cyv30x6dv1],
    .header-btn.open[b-cyv30x6dv1] {
        background: var(--header-hover);
        color: #1f2937;
        outline: none;
        box-shadow: none;
    }

    .header-btn:active[b-cyv30x6dv1] {
        transform: scale(0.96);
    }

    .header-btn:focus-visible[b-cyv30x6dv1] {
        outline: 3px solid rgba(37, 99, 235, 0.16);
        outline-offset: 2px;
    }

    .header-btn .icon[b-cyv30x6dv1] {
        color: inherit;
        font-size: 22px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
    }

.header-notification-btn .icon[b-cyv30x6dv1] {
    font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' 0, 'opsz' 24;
}

/* =============================
   Popup notificaciones
============================= */

.header-notification-area[b-cyv30x6dv1] {
    position: relative;
    flex: 0 0 auto;
}

.notification-badge[b-cyv30x6dv1] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

.notifications-panel[b-cyv30x6dv1] {
    position: absolute;
    top: 46px;
    right: 0;
    width: 360px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e3eaf3;
    border-radius: 18px;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    z-index: 3000;
    backdrop-filter: blur(12px);
    transform-origin: top right;
    will-change: opacity, transform, filter;
}

    .notifications-panel.closing[b-cyv30x6dv1] {
        pointer-events: none;
    }

.notifications-header[b-cyv30x6dv1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.notifications-title[b-cyv30x6dv1] {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
    color: #111827;
}

.notifications-subtitle[b-cyv30x6dv1] {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 650;
    color: #64748b;
}

.notifications-link-btn[b-cyv30x6dv1] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--header-blue);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}

    .notifications-link-btn:hover[b-cyv30x6dv1] {
        background: var(--header-blue-soft);
        color: var(--header-blue-dark);
    }

.notifications-list[b-cyv30x6dv1] {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

    .notifications-list[b-cyv30x6dv1]::-webkit-scrollbar {
        width: 6px;
    }

    .notifications-list[b-cyv30x6dv1]::-webkit-scrollbar-track {
        background: transparent;
    }

    .notifications-list[b-cyv30x6dv1]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* Item estilo tarjeta (mismo lenguaje visual que NotificacionesPage) */
.notification-item[b-cyv30x6dv1] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .notification-item:hover[b-cyv30x6dv1] {
        background: #fbfdff;
        border-color: #dbeafe;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    }

/* Barra de acento vertical (color por tema) */
.notification-item-accent[b-cyv30x6dv1] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #cbd5e1;
}

.notification-item.info .notification-item-accent[b-cyv30x6dv1] {
    background: #005ab7;
}

.notification-item.success .notification-item-accent[b-cyv30x6dv1] {
    background: #006c49;
}

.notification-item.warning .notification-item-accent[b-cyv30x6dv1] {
    background: #825100;
}

.notification-item.danger .notification-item-accent[b-cyv30x6dv1] {
    background: #ba1a1a;
}

/* Contenedor del icono, tintado por tema */
.notification-item-icon[b-cyv30x6dv1] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #64748b;
}

.notification-item-icon-symbol[b-cyv30x6dv1] {
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' 0, 'opsz' 24;
}

.notification-item.info .notification-item-icon[b-cyv30x6dv1] {
    background: #e1ecff;
    color: #005ab7;
}

.notification-item.success .notification-item-icon[b-cyv30x6dv1] {
    background: #d3f5e6;
    color: #006c49;
}

.notification-item.warning .notification-item-icon[b-cyv30x6dv1] {
    background: #ffe8c7;
    color: #825100;
}

.notification-item.danger .notification-item-icon[b-cyv30x6dv1] {
    background: #ffdcd8;
    color: #ba1a1a;
}

.notification-item-body[b-cyv30x6dv1] {
    flex: 1 1 auto;
    min-width: 0;
}

.notification-top[b-cyv30x6dv1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.notification-title[b-cyv30x6dv1] {
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    color: #0b1c30;
    letter-spacing: -0.01em;
}

.notification-time[b-cyv30x6dv1] {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1.3;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.notification-detail[b-cyv30x6dv1] {
    font-size: 13px;
    color: #414754;
    line-height: 1.45;
}

/* Aviso con diseño HTML: el diseño ocupa el aviso entero (sin márgenes, icono ni barra de acento). El iframe crece con
   su contenido (iframeAutoAlto.js); el alto de aquí es solo el de mientras carga. */
.notification-item.notification-item-diseno[b-cyv30x6dv1] {
    display: block;
    padding: 0;
}

.notification-html[b-cyv30x6dv1] {
    display: block;
    width: 100%;
    height: 120px;
    border: 0;
    background: #fff;
}

/* Capa transparente encima del diseño: el clic va al aviso (el iframe se lo quedaría). */
.notification-item-pulsar[b-cyv30x6dv1] {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.notification-item-pulsar:focus-visible[b-cyv30x6dv1] {
    outline: 2px solid #2f6fed;
    outline-offset: -2px;
    border-radius: 14px;
}

/* La imagen de una notificación escrita a mano: debajo del texto, sin pasarse del ancho ni del alto del panel. */
.notification-imagen[b-cyv30x6dv1] {
    display: block;
    max-width: 100%;
    max-height: 140px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.notifications-empty[b-cyv30x6dv1] {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

    .notifications-empty .material-symbols-rounded[b-cyv30x6dv1] {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: var(--header-blue-soft);
        color: var(--header-blue);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

.notifications-footer[b-cyv30x6dv1] {
    padding: 12px 16px 16px;
    border-top: 1px solid #eef2f7;
    background: #fbfdff;
}

.notifications-footer-button[b-cyv30x6dv1] {
    appearance: none;
    width: 100%;
    min-height: 38px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
    color: var(--header-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .notifications-footer-button:hover[b-cyv30x6dv1] {
        background: var(--header-blue-soft);
        border-color: #bfdbfe;
        transform: translateY(-1px);
    }

/* Usuarios compartidos: lo integramos visualmente sin tocar el componente */
.header-users[b-cyv30x6dv1] {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
}

    .header-users[b-cyv30x6dv1]  * {
        max-width: 100%;
    }

    .header-users[b-cyv30x6dv1]  button,
    .header-users[b-cyv30x6dv1]  a,
    .header-users[b-cyv30x6dv1]  [role="button"] {
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

        .header-users[b-cyv30x6dv1]  button:hover,
        .header-users[b-cyv30x6dv1]  a:hover,
        .header-users[b-cyv30x6dv1]  [role="button"]:hover {
            transform: translateY(-1px);
        }

/* Limpieza de botones/links internos, por si el componente trae estilos externos */
[b-cyv30x6dv1] a,
[b-cyv30x6dv1] a.active {
    text-decoration: none !important;
}

button[b-cyv30x6dv1] {
    font-family: inherit;
}

/* Skeleton styles */
.avatar-skeleton[b-cyv30x6dv1] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: shine-b-cyv30x6dv1 1.5s infinite;
}

.text-skeleton[b-cyv30x6dv1] {
    display: inline-block;
    height: 1.2em;
    width: 200px;
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: shine-b-cyv30x6dv1 1.5s infinite;
    border-radius: 8px;
}

@keyframes shine-b-cyv30x6dv1 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* =============================
   Responsive
============================= */

/* 769 y no 768: la barra lateral pasa a ir oculta con `max-width: 768px` (LeftSidebar.razor.css), así que a
   768 justos no había ni barra ni botón para abrirla. */
@media (min-width: 769px) {
    .menu[b-cyv30x6dv1] {
        display: none;
    }

    /* N15: la empresa ancla la izquierda; el buscador empuja las acciones a la derecha */
    .main-header-shell[b-cyv30x6dv1] {
        justify-content: flex-start;
    }

    .header-favoritos[b-cyv30x6dv1] {
        display: flex;
    }

    .header-search-wrapper[b-cyv30x6dv1] {
        margin-left: auto;
    }
}

@media (max-width: 1180px) {
    .main-header-shell[b-cyv30x6dv1] {
        gap: 14px;
        padding: 0 18px;
    }

    .header-search[b-cyv30x6dv1] {
        width: clamp(220px, 28vw, 340px);
    }

    .header-actions[b-cyv30x6dv1] {
        gap: 10px;
    }
}

@media (max-width: 920px) {
    .header-search[b-cyv30x6dv1] {
        width: clamp(180px, 30vw, 270px);
    }

    /* N15: los avatares del equipo solo en pantallas anchas — el panel de miembros los tiene siempre */
    .header-users[b-cyv30x6dv1] {
        display: none;
    }
}

/* N15: breakpoint unificado con el sidebar (era 760 y el sidebar 768: se descuadraban) */
@media (max-width: 768px) {
    .main-header[b-cyv30x6dv1] {
        height: 62px;
        min-height: 62px;
    }

    .main-header-shell[b-cyv30x6dv1] {
        gap: 10px;
        padding: 0 12px;
    }

    .header-search-wrapper[b-cyv30x6dv1] {
        display: none;
    }

    .header-actions[b-cyv30x6dv1] {
        margin-left: auto;
        gap: 8px;
    }

    .header-btn[b-cyv30x6dv1] {
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .header-users[b-cyv30x6dv1] {
        padding-left: 0;
    }

    /* N15: en móvil la empresa queda como su logo, sin nombre ni flecha */
    .header-company[b-cyv30x6dv1]  .text,
    .header-company[b-cyv30x6dv1]  .arrow-icon {
        display: none;
    }

    .notifications-panel[b-cyv30x6dv1] {
        position: fixed;
        top: 72px;
        right: 12px;
        width: min(360px, calc(100vw - 24px));
        z-index: 99999;
    }
}

@media (max-width: 520px) {
    .main-header-shell[b-cyv30x6dv1] {
        gap: 8px;
    }

    .menu[b-cyv30x6dv1],
    .header-icon-btn[b-cyv30x6dv1] {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .header-btn[b-cyv30x6dv1] {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

        .header-btn .icon[b-cyv30x6dv1] {
            font-size: 21px;
        }

    .notifications-header[b-cyv30x6dv1] {
        flex-direction: column;
        gap: 8px;
    }

    .notifications-link-btn[b-cyv30x6dv1] {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-header *[b-cyv30x6dv1],
    .main-header *[b-cyv30x6dv1]::before,
    .main-header *[b-cyv30x6dv1]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   FIX Z-INDEX POPUP NOTIFICACIONES
   Evita que el panel quede por debajo de tarjetas, sidebars,
   overlays o componentes con stacking context propio.
========================================================= */

.main-header[b-cyv30x6dv1] {
    position: relative;
    z-index: 10;
}

.fav-chip[b-cyv30x6dv1] {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* centra el icono */
    gap: 0;
    width: 42px; /* cuadrado y más grande */
    height: 42px;
    padding: 0;
    border: 1px solid #dbe3ee;
    border-radius: 12px; /* algo más redondeado */
    background: #ffffff;
    color: var(--header-muted);
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
}


/* AL9: la franja de la prueba. Discreta (un chip, no un banner) y a tres dias cambia de tono. */
.header-prueba[b-cyv30x6dv1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

.header-prueba:hover[b-cyv30x6dv1] {
    border-color: #6366f1;
    background: #e0e7ff;
}

.header-prueba .material-symbols-rounded[b-cyv30x6dv1] {
    font-size: 16px;
}

.header-prueba-cta[b-cyv30x6dv1] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #6366f1;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
}

.header-prueba-urgente[b-cyv30x6dv1] {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.header-prueba-urgente:hover[b-cyv30x6dv1] {
    border-color: #f59e0b;
    background: #fef3c7;
}

.header-prueba-urgente .header-prueba-cta[b-cyv30x6dv1] {
    background: #d97706;
}

@media (max-width: 900px) {
    .header-prueba-txt[b-cyv30x6dv1] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Layout/MainLayout.razor.rz.scp.css */
/* -----------------------------
   Layout principal
----------------------------- */
.dashboard[b-qaozxlk51f] {
    display: flex;
    flex-direction: row;
    min-height: 100%;
    max-height:100%;
    height:100%;
    flex-shrink: 0;
    overflow: hidden;
}

.main-content[b-qaozxlk51f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: #f3f4f6;
}

.main-header[b-qaozxlk51f] {
    height: 64px;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.main-body[b-qaozxlk51f] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

/* Estilos de scrollbar disimulados */
.main-body[b-qaozxlk51f]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.main-body[b-qaozxlk51f]::-webkit-scrollbar-track {
    background: transparent;
}

.main-body[b-qaozxlk51f]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.main-body[b-qaozxlk51f]::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* -----------------------------
   Pantalla de error de sección (ErrorBoundary)
----------------------------- */
.seccion-error[b-qaozxlk51f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 48px 24px;
    color: #475569;
}

.seccion-error-ico[b-qaozxlk51f] {
    font-size: 48px;
    color: #94a3b8;
}

.seccion-error h2[b-qaozxlk51f] {
    margin: 0;
    font-size: 1.25rem;
    color: #334155;
}

.seccion-error p[b-qaozxlk51f] {
    margin: 0;
    max-width: 420px;
}

.seccion-error-btn[b-qaozxlk51f] {
    margin-top: 8px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background-color: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.seccion-error-btn:hover[b-qaozxlk51f] {
    background-color: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Layout/PublicLayout.razor.rz.scp.css */
main[b-szrck2rz2p] {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
/* _content/ErpPowergest/Presentation/Layout/RightSidebar.razor.rz.scp.css */
/* -----------------------------
   Sidebar
----------------------------- */
.sidebar[b-j73eht6ajl] {
    height: 100%;
    width: 300px;
    max-width: 300px;
    background-color: white;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid #e5e7eb;
    transition: width 0.3s ease;
    flex-shrink: 0;
    /*transition: width 0.25s ease, opacity 0.2s ease;*/
}

    .sidebar.collapsed[b-j73eht6ajl] {
        width: 0;
        max-width: 0;
        flex: 0 0 0;
        overflow: hidden;
        border-left: none;
    }

/* -----------------------------
   Header
----------------------------- */
.sidebar-header[b-j73eht6ajl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

/* Botón resizer cuadrado */
.sidebar-resizer[b-j73eht6ajl] {
    display: flex;
    align-items: center;
    justify-content: center; /* centra icono */
    width: 36px; /* ancho fijo igual al alto */
    height: 36px; /* alto fijo */
    border: none;
    cursor: pointer;
    background-color: transparent;
    padding: 0; /* quitar padding extra */
}

    /* Icono dentro del botón */
    .sidebar-resizer .resize-icon[b-j73eht6ajl] {
        font-size: 24px;
        font-weight: 300;
        color: #666;
        border-radius: 50%; /* ahora sí será un círculo perfecto */
        width: 100%; /* ocupa todo el botón */
        height: 100%; /* ocupa todo el botón */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hover sobre el icono */
    .sidebar-resizer:hover .resize-icon[b-j73eht6ajl] {
        background-color: #e0e0e0;
    }

.sidebar-title[b-j73eht6ajl] {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.sidebar-body[b-j73eht6ajl] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    /* Scroll por defecto casi invisible */
    .sidebar-body[b-j73eht6ajl]::-webkit-scrollbar {
        width: 4px;
        background: transparent;
    }

    .sidebar-body[b-j73eht6ajl]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    /* Cuando el usuario hace hover sobre la lista */
    .sidebar-body:hover[b-j73eht6ajl]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
    }

    .sidebar-body:not(:hover)[b-j73eht6ajl] {
        scrollbar-color: transparent transparent;
    }

/* =========================
   RESPONSIVE MOBILE
========================= */
@media (max-width: 768px) {
    .sidebar[b-j73eht6ajl] {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        max-width: 300px;
        transform: translateX(110%);
        opacity: 0;
        box-shadow: -2px 0 10px rgba(0,0,0,0.15);
        z-index: 2000;
        transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, border-color 0.32s ease;
        overflow: hidden;
    }

        .sidebar:not(.collapsed)[b-j73eht6ajl] {
            transform: translateX(0);
        }

        .sidebar.collapsed[b-j73eht6ajl] {
            width: 0;
            max-width: 0;
            border-left: none;
            opacity: 0;
            pointer-events: none;
        }

        .sidebar:not(.collapsed)[b-j73eht6ajl] {
            transform: translateX(0);
            opacity: 1;
        }

    .sidebar-overlay[b-j73eht6ajl] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1500;
        animation: overlayFadeIn 0.28s ease forwards;
    }
}

/* Desktop → no overlay */
@media (min-width: 769px) {
    .sidebar-overlay[b-j73eht6ajl] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Layout/SidebarMenuGroup.razor.rz.scp.css */
/* =====================================
   Wrapper
===================================== */
.group-wrapper[b-lyum7fux3f] {
    position: relative;
    display: flex;
    flex-direction: column;
    user-select: none;
}

/* =====================================
   Header del grupo
===================================== */
/* Outer en bloque: sin padding lateral para que el bg (hover/activo) del inner
   ocupe todo el ancho disponible, igual que los items simples del menu. */
.group-header[b-lyum7fux3f] {
    cursor: pointer;
    padding: 0;
    position: relative;
}

/* Inner es flex por dentro pero ocupa el 100% del ancho del outer
   (por ser hijo bloque). Asi el bg redondeado cubre toda la fila. */
.group-header-inner[b-lyum7fux3f] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    padding: 10px 10px 10px 20px;
    border-radius: 6px;
    transition: background-color 0.2s, border-radius 0.2s;
}

.group-header:hover > .group-header-inner[b-lyum7fux3f] {
    background-color: #e6f0ff;
}

/* Cuando un hijo esta activo: icono y texto del padre en estado activo,
   sin fondo (se reserva al hijo realmente activo) */
.group-header-inner.child-active .icon[b-lyum7fux3f] {
    color: #2696ff;
}

.group-header-inner.child-active .text[b-lyum7fux3f] {
    color: black;
    font-weight: 400;
}

/* =====================================
   Iconos y texto del header
===================================== */
.icon[b-lyum7fux3f] {
    font-size: 28px;
    color: gray;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 48;
}

.text[b-lyum7fux3f] {
    font-size: 16px;
    font-weight: 200;
    color: #666;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* =====================================
   Chevron (dentro del inner, queda dentro del bg de hover)
===================================== */
.chevron[b-lyum7fux3f] {
    margin-left: auto;
    font-size: 22px;
    color: #999;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.group-wrapper.is-open .chevron[b-lyum7fux3f] {
    transform: rotate(180deg);
}

/* En colapsado no se muestra el chevron */
.group-wrapper.collapsed .chevron[b-lyum7fux3f] {
    display: none;
}

/* =====================================
   Panel de hijos (modo expandido)
===================================== */
.children-panel[b-lyum7fux3f] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.18s ease;
    display: flex;
    flex-direction: column;
}

.group-wrapper.is-open .children-panel[b-lyum7fux3f] {
    max-height: 500px;
    opacity: 1;
}

/* =====================================
   Items hijos (modo expandido)
===================================== */
.child-link[b-lyum7fux3f] {
    text-decoration: none !important;
    color: inherit;
    display: block;
    padding: 2px 6px;
}

.child-inner[b-lyum7fux3f] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    padding: 8px 8px 8px 36px;
    border-radius: 6px;
    transition: background-color 0.2s, border-radius 0.2s;
}

.child-link:hover .child-inner[b-lyum7fux3f] {
    background-color: #e6f0ff;
}

.child-link.active .child-inner[b-lyum7fux3f] {
    background-color: #e6f0ff;
}

.child-link.active .child-inner .icon[b-lyum7fux3f] {
    color: #2696ff;
}

.child-link.active .child-inner .text[b-lyum7fux3f] {
    color: black;
    font-weight: 400;
}

.child-icon[b-lyum7fux3f] {
    font-size: 22px;
}

/* =====================================
   Flyout (modo colapsado, on hover o click)
===================================== */
.flyout[b-lyum7fux3f] {
    /* fixed: el flyout solo se renderiza en colapsado, donde la lista de items
       hace scroll (overflow) y recortaria un popover absoluto. Con fixed escapa
       del recorte; su top/left exactos los calcula sidebarPopover.js al hover. */
    position: fixed;
    top: -4px;
    left: 64px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 8px;
    min-width: 220px;
    z-index: 1500;
    opacity: 0;
    transform: translateX(-8px) scale(0.98);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Visible por hover o por click (estado is-flyout-open) */
.group-wrapper.collapsed:hover .flyout[b-lyum7fux3f],
.group-wrapper.collapsed.is-flyout-open .flyout[b-lyum7fux3f] {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Titulo de seccion del popover */
.flyout-title[b-lyum7fux3f] {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 6px 10px 10px;
    line-height: 1;
}

.flyout-items[b-lyum7fux3f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* OUTER (el <a> renderizado por NavLink). Como NavLink es un componente hijo,
   el <a> NO recibe el atributo de scope (b-xxx) y las reglas scoped no le aplican.
   Usamos ::deep para llegar a el y solo le quitamos la decoracion del link. */
[b-lyum7fux3f] .flyout-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
    border-radius: 8px;
}

/* INNER (div que SI esta en mi template y recibe el scope).
   Aqui van TODOS los estilos visibles: padding, gap, border-radius, etc. */
.flyout-link-inner[b-lyum7fux3f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}

/* Hover sobre el outer -> bg + colores en el inner */
.flyout-link:hover .flyout-link-inner[b-lyum7fux3f] {
    background-color: #e6f0ff;
}

.flyout-link:hover .flyout-link-inner .flyout-icon[b-lyum7fux3f],
.flyout-link:hover .flyout-link-inner .flyout-text[b-lyum7fux3f] {
    color: #2696ff;
}

/* Estado activo (NavLink agrega la clase "active" al outer <a>) */
.flyout-link.active .flyout-link-inner[b-lyum7fux3f] {
    background-color: #e6f0ff;
}

.flyout-link.active .flyout-link-inner .flyout-icon[b-lyum7fux3f] {
    color: #2696ff;
}

.flyout-link.active .flyout-link-inner .flyout-text[b-lyum7fux3f] {
    color: #111827;
    font-weight: 500;
}

/* Indicador lateral del item activo (barrita azul) */
.flyout-link.active .flyout-link-inner[b-lyum7fux3f]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background-color: #2696ff;
    border-radius: 0 3px 3px 0;
}

/* Icono del item: ancho fijo para que el texto siempre arranque
   en la misma X, garantizando alineacion entre filas. */
.flyout-icon[b-lyum7fux3f] {
    font-size: 22px;
    width: 24px;
    height: 24px;
    line-height: 1;
    color: #6b7280;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: color 0.15s ease;
}

.flyout-text[b-lyum7fux3f] {
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    line-height: 1;
    transition: color 0.15s ease;
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 768px) {
    .flyout[b-lyum7fux3f] {
        left: 60px;
    }
}
/* _content/ErpPowergest/Presentation/Legal/Pages/PrivacyPolicy.razor.rz.scp.css */
/* Fixed Header */
.privacy-header-fixed[b-9ibcezab85] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 999;
    font-family: 'Poppins', sans-serif;
}

.app-brand[b-9ibcezab85] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #222;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
}

.app-logo[b-9ibcezab85] {
    height: 35px;
    margin-right: 10px;
}

.app-name[b-9ibcezab85] {
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
}

/* Botón login */
.login-button[b-9ibcezab85] {
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #4a6cf7;
    color: white;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    display: inline-block;
}

    .login-button:hover[b-9ibcezab85] {
        background-color: #3b57c6;
    }

/* Page Content */
.privacy-container[b-9ibcezab85] {
    max-width: 900px;
    margin: 100px auto 0 auto;
    padding: 20px 30px;
    font-family: 'Inter', sans-serif;
    color: #333;
}

.privacy-content[b-9ibcezab85] {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    line-height: 1.65;
    font-family: 'Inter', sans-serif;
    text-align: justify;
    text-justify: inter-word;
}

/* Titles */
h1[b-9ibcezab85], h2[b-9ibcezab85], h3[b-9ibcezab85] {
    color: #222;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: left;
}

h2[b-9ibcezab85] {
    font-size: 23px;
}

h3[b-9ibcezab85] {
    font-size: 17px;
}

a[b-9ibcezab85] {
    color: #4a6cf7;
    font-family: 'Inter', sans-serif;
}

/* ============================= */
/* Responsive Styles Ajustadas */
@media (max-width: 768px) {
    .privacy-header-fixed[b-9ibcezab85] {
        flex-direction: row;
        height: auto;
        padding: 10px 15px;
    }

    .app-name[b-9ibcezab85] {
        font-size: 18px;
    }

    .app-brand[b-9ibcezab85] {
        font-size: 18px;
    }

    .login-button[b-9ibcezab85] {
        padding: 6px 12px;
        font-size: 13px;
        margin-top: 0;
        min-width: 120px; /* limita ancho mínimo */
    }

    .privacy-container[b-9ibcezab85] {
        margin: 80px 15px 0 15px;
        padding: 15px;
        font-size: 15px;
    }

    .privacy-content[b-9ibcezab85] {
        padding: 2rem;
        font-size: 15px;
    }

    h1[b-9ibcezab85] {
        font-size: 20px;
    }

    h2[b-9ibcezab85] {
        font-size: 18px;
    }

    h3[b-9ibcezab85] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .app-brand[b-9ibcezab85] {
        flex-direction: row;
        align-items: center;
    }

    .app-logo[b-9ibcezab85] {
        height: 28px;
        margin-right: 5px;
    }

    .app-name[b-9ibcezab85] {
        font-size: 15px;
    }

    .login-button[b-9ibcezab85] {
        width: auto;
        padding: 5px 10px;
        font-size: 12px;
    }

    .privacy-container[b-9ibcezab85] {
        margin: 70px 10px 0 10px;
        padding: 10px;
        font-size: 14px;
    }

    .privacy-content[b-9ibcezab85] {
        padding: 1.5rem;
        font-size: 14px;
    }

    h1[b-9ibcezab85] {
        font-size: 18px;
    }

    h2[b-9ibcezab85] {
        font-size: 16px;
    }

    h3[b-9ibcezab85] {
        font-size: 14px;
    }
}

/* _content/ErpPowergest/Presentation/Legal/Pages/TermsAndConditions.razor.rz.scp.css */
/* Fixed Header */
.privacy-header-fixed[b-c21tmn9t9s] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 999;
    font-family: 'Poppins', sans-serif;
}

.app-brand[b-c21tmn9t9s] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #222;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
}

.app-logo[b-c21tmn9t9s] {
    height: 35px;
    margin-right: 10px;
}

.app-name[b-c21tmn9t9s] {
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
}

/* Botón login */
.login-button[b-c21tmn9t9s] {
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #4a6cf7;
    color: white;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    display: inline-block;
}

    .login-button:hover[b-c21tmn9t9s] {
        background-color: #3b57c6;
    }

/* Page Content */
.privacy-container[b-c21tmn9t9s] {
    max-width: 900px;
    margin: 100px auto 0 auto;
    padding: 20px 30px;
    font-family: 'Inter', sans-serif;
    color: #333;
}

.privacy-content[b-c21tmn9t9s] {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    line-height: 1.65;
    font-family: 'Inter', sans-serif;
    text-align: justify;
    text-justify: inter-word;
}

/* Titles */
h1[b-c21tmn9t9s], h2[b-c21tmn9t9s], h3[b-c21tmn9t9s] {
    color: #222;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: left;
}

h2[b-c21tmn9t9s] {
    font-size: 23px;
}

h3[b-c21tmn9t9s] {
    font-size: 17px;
}

a[b-c21tmn9t9s] {
    color: #4a6cf7;
    font-family: 'Inter', sans-serif;
}

/* ============================= */
/* Responsive Styles Ajustadas */
@media (max-width: 768px) {
    .privacy-header-fixed[b-c21tmn9t9s] {
        flex-direction: row;
        height: auto;
        padding: 10px 15px;
    }

    .app-name[b-c21tmn9t9s] {
        font-size: 18px;
    }

    .app-brand[b-c21tmn9t9s] {
        font-size: 18px;
    }

    .login-button[b-c21tmn9t9s] {
        padding: 6px 12px;
        font-size: 13px;
        margin-top: 0;
        min-width: 120px; /* limita ancho mínimo */
    }

    .privacy-container[b-c21tmn9t9s] {
        margin: 80px 15px 0 15px;
        padding: 15px;
        font-size: 15px;
    }

    .privacy-content[b-c21tmn9t9s] {
        padding: 2rem;
        font-size: 15px;
    }

    h1[b-c21tmn9t9s] {
        font-size: 20px;
    }

    h2[b-c21tmn9t9s] {
        font-size: 18px;
    }

    h3[b-c21tmn9t9s] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .app-brand[b-c21tmn9t9s] {
        flex-direction: row;
        align-items: center;
    }

    .app-logo[b-c21tmn9t9s] {
        height: 28px;
        margin-right: 5px;
    }

    .app-name[b-c21tmn9t9s] {
        font-size: 15px;
    }

    .login-button[b-c21tmn9t9s] {
        width: auto;
        padding: 5px 10px;
        font-size: 12px;
    }

    .privacy-container[b-c21tmn9t9s] {
        margin: 70px 10px 0 10px;
        padding: 10px;
        font-size: 14px;
    }

    .privacy-content[b-c21tmn9t9s] {
        padding: 1.5rem;
        font-size: 14px;
    }

    h1[b-c21tmn9t9s] {
        font-size: 18px;
    }

    h2[b-c21tmn9t9s] {
        font-size: 16px;
    }

    h3[b-c21tmn9t9s] {
        font-size: 14px;
    }
}
/* _content/ErpPowergest/Presentation/Maestros/Componentes/ModalMaestro.razor.rz.scp.css */
/*
    Misma piel que el modal «Crear nueva familia» de Artículos (FamiliaNuevaModal.razor.css). Los
    campos los pinta el componente padre (ChildContent), de ahí el ::deep anclado en .mm-card.
*/

.mm-backdrop[b-wdrkvud4an] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.mm-card[b-wdrkvud4an] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .mm-card .material-symbols-outlined[b-wdrkvud4an] {
        user-select: none;
        -webkit-user-select: none;
    }

.mm-header[b-wdrkvud4an] {
    flex: 0 0 auto;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.mm-title[b-wdrkvud4an] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.mm-subtitle[b-wdrkvud4an] {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.mm-body[b-wdrkvud4an] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mm-info-box[b-wdrkvud4an] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.mm-info-icon[b-wdrkvud4an] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.mm-info-title[b-wdrkvud4an] {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 3px;
}

.mm-info-text[b-wdrkvud4an] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

/* ── Campos (los pone el padre) ── */

.mm-card[b-wdrkvud4an]  .mm-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* Dos campos en una fila (código + nombre, fechas…). En móvil se apilan. */
.mm-card[b-wdrkvud4an]  .mm-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mm-card[b-wdrkvud4an]  .mm-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* Todos los campos con la misma piel y las esquinas redondeadas, también el del agente / cliente, que
   es un CampoMaestro y pinta su <input> dentro de un componente hijo. */
.mm-card[b-wdrkvud4an]  .mm-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .mm-card[b-wdrkvud4an]  .mm-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .mm-card[b-wdrkvud4an]  .mm-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

.mm-card[b-wdrkvud4an]  .mm-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}

/* Confirmación de borrado en el pie: ámbar, no rojo, porque aún no ha pasado nada. */
.mm-card[b-wdrkvud4an]  .mm-confirm {
    font-size: 13px;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 10px;
    padding: 6px 10px;
}

/* ── Pie ── */

.mm-actions[b-wdrkvud4an] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

.mm-actions-izquierda[b-wdrkvud4an] {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Botones: los mismos que el modal de familias (estilo EditPerfilForm). */
.mm-btn[b-wdrkvud4an],
.mm-card[b-wdrkvud4an]  .mm-btn {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .mm-btn:hover:not(:disabled)[b-wdrkvud4an],
    .mm-card[b-wdrkvud4an]  .mm-btn:hover:not(:disabled) {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .mm-btn:disabled[b-wdrkvud4an],
    .mm-card[b-wdrkvud4an]  .mm-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Guardar es la orden principal y se tiene que leer como tal: relleno azul, el mismo de los botones
   principales de las pantallas. Cancelar, contorno discreto. Antes era al revés —Guardar blanco con
   borde gris y Cancelar relleno— y el Guardar parecía texto plano (FUN-V594). Se decide AQUÍ, en el
   componente, para todas las ventanas de maestro: ninguna pantalla lo repinta en su hoja. */
.mm-btn-accept[b-wdrkvud4an] {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
    font-weight: 600;
}

    .mm-btn-accept:hover:not(:disabled)[b-wdrkvud4an] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.mm-btn-cancel[b-wdrkvud4an] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

    .mm-btn-cancel:hover:not(:disabled)[b-wdrkvud4an] {
        background: #f3f4f6;
    }

/* Borrar (lo pone el padre en PieIzquierda): contorno rojo; el definitivo, relleno. */
.mm-card[b-wdrkvud4an]  .mm-btn-borrar {
    background: #ffffff;
    color: #c22f39;
    border: 1px solid #f0c4c7;
}

    .mm-card[b-wdrkvud4an]  .mm-btn-borrar:hover:not(:disabled) {
        background: #fdf1f2;
    }

.mm-card[b-wdrkvud4an]  .mm-btn-borrar-si {
    background: #d93a44;
    color: #ffffff;
}

    .mm-card[b-wdrkvud4an]  .mm-btn-borrar-si:hover:not(:disabled) {
        background: #c22f39;
    }

@media (max-width: 560px) {
    .mm-backdrop[b-wdrkvud4an] {
        padding: 0;
    }

    .mm-card[b-wdrkvud4an] {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .mm-card[b-wdrkvud4an]  .mm-fila {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Maestros/Divisas/Components/DivisaModal.razor.rz.scp.css */
.dvs-modal-backdrop[b-zbhlhk7mcg] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.dvs-modal-card[b-zbhlhk7mcg] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.dvs-modal-card .material-symbols-outlined[b-zbhlhk7mcg] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dvs-modal-header[b-zbhlhk7mcg] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.dvs-modal-title[b-zbhlhk7mcg] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.dvs-modal-body[b-zbhlhk7mcg] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tres columnas: el código es un campo corto (tres letras) y no debe ocupar la misma anchura que el
   nombre, que es el que necesita sitio. */
.dvs-modal-grid[b-zbhlhk7mcg] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.dvs-modal-field[b-zbhlhk7mcg] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.dvs-modal-field-ancho[b-zbhlhk7mcg] {
    grid-column: span 2;
}

.dvs-modal-label[b-zbhlhk7mcg] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.dvs-modal-ayuda[b-zbhlhk7mcg] {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Fecha de la última consulta al servicio de tipos de cambio: dato de solo lectura bajo el campo
   Cambio, con su icono en línea. */
.dvs-modal-ayuda-fecha[b-zbhlhk7mcg] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.dvs-modal-ayuda-fecha .material-symbols-outlined[b-zbhlhk7mcg] {
    font-size: 13px;
}

.dvs-modal-input[b-zbhlhk7mcg] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .dvs-modal-input[b-zbhlhk7mcg]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .dvs-modal-input:focus[b-zbhlhk7mcg] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    /* En la moneda base el cambio queda bloqueado a 1: se ve, pero no se edita. */
    .dvs-modal-input:disabled[b-zbhlhk7mcg] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

.dvs-modal-toggle[b-zbhlhk7mcg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

.dvs-modal-toggle input[type="checkbox"][b-zbhlhk7mcg] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

    .dvs-modal-toggle input[type="checkbox"]:disabled[b-zbhlhk7mcg] {
        cursor: not-allowed;
        opacity: 0.5;
    }

.dvs-modal-toggle span[b-zbhlhk7mcg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dvs-modal-toggle strong[b-zbhlhk7mcg] {
    font-size: 13px;
    font-weight: 850;
    color: #0f172a;
}

.dvs-modal-toggle small[b-zbhlhk7mcg] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.dvs-modal-actions[b-zbhlhk7mcg] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que el resto de modales de mantenimiento. */
.btn[b-zbhlhk7mcg] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-zbhlhk7mcg] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-zbhlhk7mcg] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.btn-accept[b-zbhlhk7mcg] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-zbhlhk7mcg] {
        background: #f3f4f6;
    }

.btn-cancel[b-zbhlhk7mcg] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-zbhlhk7mcg] {
        background: #4b5563;
    }

/* Pantallas pequeñas: el modal ocupa toda la pantalla y la rejilla pasa a una columna. */
@media (max-width: 560px) {
    .dvs-modal-backdrop[b-zbhlhk7mcg] {
        padding: 0;
    }

    .dvs-modal-card[b-zbhlhk7mcg] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .dvs-modal-grid[b-zbhlhk7mcg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dvs-modal-field-ancho[b-zbhlhk7mcg] {
        grid-column: span 1;
    }
}
/* _content/ErpPowergest/Presentation/Maestros/Divisas/Pages/DivisasPage.razor.rz.scp.css */
.dvs-page[b-yhhuwg1ln9],
.dvs-page *[b-yhhuwg1ln9],
.dvs-page *[b-yhhuwg1ln9]::before,
.dvs-page *[b-yhhuwg1ln9]::after {
    box-sizing: border-box;
}

.dvs-page[b-yhhuwg1ln9] {
    /* Rellena el alto disponible que le cede .main-body (sin número mágico).
       min-height actúa como suelo de comodidad: si el viewport es muy bajo,
       la página crece y deja que .main-body haga scroll en vez de aplastar el grid. */
    height: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: dvsPageIn-b-yhhuwg1ln9 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dvs-header[b-yhhuwg1ln9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. */
    .dvs-header > div:first-child[b-yhhuwg1ln9] {
        flex: 1 1 auto;
        min-width: min(100%, 16rem);
    }

.dvs-title[b-yhhuwg1ln9] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.dvs-subtitle[b-yhhuwg1ln9] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.dvs-header.command-bar-host-collapsed .dvs-title[b-yhhuwg1ln9],
.dvs-header.command-bar-host-collapsed .dvs-subtitle[b-yhhuwg1ln9] {
    white-space: normal;
    overflow-wrap: break-word;
}

.dvs-header-actions[b-yhhuwg1ln9] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.dvs-error-banner[b-yhhuwg1ln9] {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    font-size: 13px;
}

.dvs-filters[b-yhhuwg1ln9] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr);
    gap: 10px;
    align-items: center;
}

.dvs-filter-item[b-yhhuwg1ln9],
.dvs-filter-item-search[b-yhhuwg1ln9] {
    min-width: 0;
}

.dvs-filter-searchbox[b-yhhuwg1ln9] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.dvs-filter-search-icon[b-yhhuwg1ln9] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.dvs-filter-input[b-yhhuwg1ln9] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dvs-filter-input-search[b-yhhuwg1ln9] {
    padding-left: 38px;
}

.dvs-filter-input[b-yhhuwg1ln9]::placeholder {
    color: #9ca3af;
}

.dvs-filter-input:focus[b-yhhuwg1ln9] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA */

.dvs-table-shell[b-yhhuwg1ln9] {
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.dvs-table-scroll[b-yhhuwg1ln9] {
    min-height: 0;
}

.dvs-table[b-yhhuwg1ln9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

/* Cabecera fija: se mantiene visible mientras el cuerpo hace scroll. */
.dvs-table thead th[b-yhhuwg1ln9] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.dvs-table thead th.dvs-th-plain[b-yhhuwg1ln9] {
    padding: 0 14px;
    height: 42px;
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.dvs-sort[b-yhhuwg1ln9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .dvs-sort:hover[b-yhhuwg1ln9] {
        background: #f1f5f9;
        color: #334155;
    }

    .dvs-sort:focus-visible[b-yhhuwg1ln9] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.dvs-sort-center[b-yhhuwg1ln9] {
    justify-content: center;
}

.dvs-sort-icon[b-yhhuwg1ln9] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto no baile). */
.dvs-sort-icon-inactivo[b-yhhuwg1ln9] {
    opacity: 0;
}

.dvs-sort:hover .dvs-sort-icon-inactivo[b-yhhuwg1ln9],
.dvs-sort:focus-visible .dvs-sort-icon-inactivo[b-yhhuwg1ln9] {
    opacity: 1;
}

.dvs-table tbody td[b-yhhuwg1ln9] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dvs-table tbody tr[b-yhhuwg1ln9] {
    transition: background 0.14s ease;
}

    .dvs-table tbody tr:hover td[b-yhhuwg1ln9] {
        background: #f8fbff;
    }

    .dvs-table tbody tr:last-child td[b-yhhuwg1ln9] {
        border-bottom: none;
    }

/* Anchos de columna: «Nombre» absorbe el espacio sobrante; el resto es contenido. */
.dvs-col-codigo[b-yhhuwg1ln9] {
    width: 130px;
}

.dvs-col-simbolo[b-yhhuwg1ln9] {
    width: 90px;
    text-align: center;
}

.dvs-col-cambio[b-yhhuwg1ln9] {
    width: 150px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* El cambio y, debajo, cuándo se trajo del servicio: dos líneas alineadas a la derecha. */
.dvs-cambio-celda[b-yhhuwg1ln9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.dvs-cambio-fecha[b-yhhuwg1ln9] {
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: normal;
    white-space: nowrap;
}

/* Nunca consultada: el cambio no viene del servicio, y se dice en tono más apagado todavía —es un
   apunte, no una alarma: un cambio tecleado a mano es perfectamente válido. */
.dvs-cambio-fecha-nunca[b-yhhuwg1ln9] {
    font-style: italic;
    color: #b6c0cd;
}

.dvs-col-decimales[b-yhhuwg1ln9] {
    width: 100px;
    text-align: center;
}

.dvs-col-estado[b-yhhuwg1ln9] {
    width: 110px;
    text-align: center;
}

.dvs-col-acciones[b-yhhuwg1ln9] {
    width: 140px;
    text-align: center;
}

/* Código con bandera: los dos van juntos y no se parten en dos líneas. */
.dvs-codigo-celda[b-yhhuwg1ln9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Proporción 4:3 con borde tenue: sin él, las banderas claras se funden con el fondo blanco de la fila. */
.dvs-bandera[b-yhhuwg1ln9] {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    object-fit: cover;
    background: #ffffff;
}

/* La moneda sin SVG ocupa EL MISMO hueco, para que la columna no baile. */
.dvs-bandera-generica[b-yhhuwg1ln9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #94a3b8;
    border-color: transparent;
    background: transparent;
}

/* ESTADO VACÍO */

.dvs-empty[b-yhhuwg1ln9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 20px;
    text-align: center;
}

.dvs-empty-icon[b-yhhuwg1ln9] {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.dvs-empty-title[b-yhhuwg1ln9] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.dvs-empty-seed[b-yhhuwg1ln9] {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: var(--fdp-primary, #00288e);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.85rem;
}

    .dvs-empty-seed:hover[b-yhhuwg1ln9] {
        filter: brightness(1.15);
    }

.dvs-empty-text[b-yhhuwg1ln9] {
    font-size: 12px;
    color: #94a3b8;
    max-width: 380px;
}

/* PAGINADOR */

.dvs-pager[b-yhhuwg1ln9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.dvs-pager-info[b-yhhuwg1ln9] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.dvs-pager-nav[b-yhhuwg1ln9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dvs-pager-btn[b-yhhuwg1ln9],
.dvs-pager-page[b-yhhuwg1ln9] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .dvs-pager-btn:hover:not(:disabled)[b-yhhuwg1ln9],
    .dvs-pager-page:hover[b-yhhuwg1ln9] {
        background: #eef2f7;
        color: #1f2937;
    }

    .dvs-pager-btn:disabled[b-yhhuwg1ln9] {
        opacity: 0.4;
        cursor: default;
    }

    .dvs-pager-btn .material-symbols-outlined[b-yhhuwg1ln9] {
        font-size: 18px;
        pointer-events: none;
    }

.dvs-pager-page-active[b-yhhuwg1ln9],
.dvs-pager-page-active:hover[b-yhhuwg1ln9] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila. */
.dvs-row-actions[b-yhhuwg1ln9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dvs-action-btn[b-yhhuwg1ln9] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .dvs-action-btn .material-symbols-outlined[b-yhhuwg1ln9] {
        font-size: 18px;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

.dvs-action-btn-toggle[b-yhhuwg1ln9] {
    color: #475569;
}

    .dvs-action-btn-toggle:hover[b-yhhuwg1ln9] {
        background: #eef2f7;
        color: #1f2937;
    }

/* Traer el cambio del servicio: acción de consulta, no destructiva. Se apaga mientras hay una ronda
   de peticiones en marcha para que dos clics no lancen dos. */
.dvs-action-btn-cambio[b-yhhuwg1ln9] {
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.2);
}

    .dvs-action-btn-cambio:hover:not(:disabled)[b-yhhuwg1ln9] {
        background: #ecfdf5;
        color: #115e59;
    }

    .dvs-action-btn-cambio:disabled[b-yhhuwg1ln9] {
        opacity: 0.45;
        cursor: default;
    }

.dvs-action-btn-edit[b-yhhuwg1ln9] {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .dvs-action-btn-edit:hover[b-yhhuwg1ln9] {
        background: rgba(0, 40, 142, 0.1);
    }

.dvs-action-btn-delete[b-yhhuwg1ln9] {
    color: #444653;
}

    .dvs-action-btn-delete:hover[b-yhhuwg1ln9] {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* Distintivos de fila: base, activa e inactiva. */
.dvs-badge[b-yhhuwg1ln9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dvs-badge-base[b-yhhuwg1ln9] {
    margin-left: 8px;
    min-width: 0;
    color: #00288e;
    background: rgba(0, 40, 142, 0.1);
    border-color: rgba(0, 40, 142, 0.2);
}

.dvs-badge-activa[b-yhhuwg1ln9] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.dvs-badge-inactiva[b-yhhuwg1ln9] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* ANIMACIONES */

@keyframes dvsPageIn-b-yhhuwg1ln9 {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .dvs-page[b-yhhuwg1ln9] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }
}

@media (max-height: 720px) {
    .dvs-page[b-yhhuwg1ln9] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .dvs-table-shell[b-yhhuwg1ln9] {
        min-height: 320px;
    }
}

/* Columnas replegables: primero los decimales, después el símbolo. «Código», «Nombre», «Cambio»,
   «Estado» y «Acciones» permanecen siempre visibles. */
@media (max-width: 860px) {
    .dvs-col-decimales[b-yhhuwg1ln9] {
        display: none;
    }
}

@media (max-width: 700px) {
    .dvs-col-simbolo[b-yhhuwg1ln9] {
        display: none;
    }
}

@media (max-width: 640px) {
    .dvs-title[b-yhhuwg1ln9] {
        font-size: 20px;
    }

    .dvs-subtitle[b-yhhuwg1ln9] {
        font-size: 12px;
    }

    .dvs-pager[b-yhhuwg1ln9] {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dvs-page[b-yhhuwg1ln9],
    .dvs-page *[b-yhhuwg1ln9],
    .dvs-page *[b-yhhuwg1ln9]::before,
    .dvs-page *[b-yhhuwg1ln9]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Maestros/MaestrosSimples/MaestroSimplePantalla.razor.rz.scp.css */
/*
    Asientos predefinidos (C4). Mismo vocabulario visual que «Libros oficiales» e «Inmovilizado»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    InmovilizadoPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y alto, como Clientes: el suelo es la pantalla, y la tabla (la última) se queda con
   el alto que sobra o lo reclama si no cabe. */
.op-page[b-606xpc48ol] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

/* Contenedor de la TablaPaginada: flex-columna, que es lo que espera .tp-panel para repartirse el alto. */
.op-tabla[b-606xpc48ol] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto: con `min-height: 0` no podría empujar a la página. */
.op-page[b-606xpc48ol]  .tp-panel {
    min-height: auto;
}

/* Cabecera con el mismo reparto que el resto de listados: sin `flex-wrap` (si la barra bajara de línea,
   su script nunca vería que falta sitio y no replegaría nada). */
.op-header[b-606xpc48ol] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.op-header-actions[b-606xpc48ol] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .op-header > div:first-child[b-606xpc48ol] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .op-header.command-bar-host-collapsed > div:first-child[b-606xpc48ol] {
        flex: 1 1 auto;
    }

.op-title[b-606xpc48ol] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.op-subtitle[b-606xpc48ol] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.op-header.command-bar-host-collapsed .op-title[b-606xpc48ol],
.op-header.command-bar-host-collapsed .op-subtitle[b-606xpc48ol] {
    white-space: normal;
    overflow-wrap: break-word;
}

.op-card[b-606xpc48ol] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-606xpc48ol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-606xpc48ol] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-606xpc48ol] { margin-top: .9rem; }

.op-subhead[b-606xpc48ol] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

.op-form-row[b-606xpc48ol] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-606xpc48ol] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-606xpc48ol] { flex: 1 1 16rem; }

.op-field label[b-606xpc48ol] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-606xpc48ol], .op-input[b-606xpc48ol] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-606xpc48ol] { min-width: 7rem; }
.op-select-sm[b-606xpc48ol] { min-width: 5.5rem; }
.op-input-num[b-606xpc48ol] { text-align: right; width: 9rem; }
.op-input-pct[b-606xpc48ol] { text-align: right; width: 5rem; }
.op-input-cuenta[b-606xpc48ol] { width: 9rem; font-variant-numeric: tabular-nums; }

/* El par «21 % de la línea 2» se lee como una frase: si se parte en dos controles sueltos deja de
   verse que el porcentaje y su base son un mismo dato. */
.op-inline[b-606xpc48ol] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.op-inline-sep[b-606xpc48ol] { font-size: .82rem; color: #61707d; }

.op-actions[b-606xpc48ol] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-606xpc48ol] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-606xpc48ol] { opacity: .55; cursor: default; }
.op-btn-ico[b-606xpc48ol] { font-size: 1.05rem; }

.op-btn-primary[b-606xpc48ol] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-606xpc48ol] { background: #245cd0; }

.op-btn-ghost[b-606xpc48ol] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-606xpc48ol] { background: #e7edf4; }

.op-btn-danger[b-606xpc48ol] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-606xpc48ol] { background: #c22f39; }

.op-btn-danger-ghost[b-606xpc48ol] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-606xpc48ol] { background: #fdf1f2; }

.op-link-btn[b-606xpc48ol] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Botones de fila (subir/bajar/quitar): sin marco, para que la rejilla no parezca una botonera. */
.op-icon-btn[b-606xpc48ol] {
    background: none;
    border: none;
    color: #61707d;
    cursor: pointer;
    padding: .15rem;
    line-height: 1;
    border-radius: 6px;
}

.op-icon-btn:hover:not(:disabled)[b-606xpc48ol] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-606xpc48ol] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-606xpc48ol] { font-size: 1.15rem; }
.op-icon-danger:hover:not(:disabled)[b-606xpc48ol] { background: #fdf1f2; color: #c22f39; }

.op-grid-wrapper[b-606xpc48ol] { overflow-x: auto; }

.op-table[b-606xpc48ol] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-606xpc48ol] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.op-table td[b-606xpc48ol] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-606xpc48ol] { text-align: right; font-variant-numeric: tabular-nums; }

/* La rejilla de líneas lleva controles: necesita más aire vertical que una tabla de solo lectura. */
.op-table-lineas td[b-606xpc48ol] { padding: .35rem .5rem; }
.op-col-orden[b-606xpc48ol] { width: 2.5rem; }
.op-col-acciones[b-606xpc48ol] { width: 6.5rem; white-space: nowrap; text-align: right; }

/* El listado abre el editor al pulsar la fila: hay que verse que es pulsable. */
.op-table-click tbody tr[b-606xpc48ol] { cursor: pointer; }
.op-table-click tbody tr:hover[b-606xpc48ol] { background: #f5f8fc; }
.op-row-sel[b-606xpc48ol], .op-table-click tbody tr.op-row-sel:hover[b-606xpc48ol] { background: #e8f0fe; }

/*
    Ámbar y no rojo: lo que marca —una plantilla sin líneas suficientes— es algo que hay que completar
    antes de seguir, no un error de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-606xpc48ol] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso .material-symbols-rounded[b-606xpc48ol] { font-size: 1.1rem; }

.op-check[b-606xpc48ol] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

/* La casilla «Activa» convive con campos que tienen rótulo encima: se baja a su línea base. */
.op-check-campo[b-606xpc48ol] { align-self: center; padding-bottom: .45rem; }

.op-confirm[b-606xpc48ol] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-606xpc48ol] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-606xpc48ol] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-606xpc48ol] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-606xpc48ol] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-606xpc48ol] { background: #e2f4e8; color: #1c7a3a; }
/* _content/ErpPowergest/Presentation/Maestros/Vehiculos/VehiculosPage.razor.rz.scp.css */
/*
    Asientos predefinidos (C4). Mismo vocabulario visual que «Libros oficiales» e «Inmovilizado»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    InmovilizadoPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y alto, como Clientes: el suelo es la pantalla, y la tabla (la última) se queda con
   el alto que sobra o lo reclama si no cabe. */
.op-page[b-kot5j7240p] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

/* Contenedor de la TablaPaginada: flex-columna, que es lo que espera .tp-panel para repartirse el alto. */
.op-tabla[b-kot5j7240p] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo del alto: con `min-height: 0` no podría empujar a la página. */
.op-page[b-kot5j7240p]  .tp-panel {
    min-height: auto;
}

/* Cabecera con el mismo reparto que el resto de listados: sin `flex-wrap` (si la barra bajara de línea,
   su script nunca vería que falta sitio y no replegaría nada). */
.op-header[b-kot5j7240p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.op-header-actions[b-kot5j7240p] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .op-header > div:first-child[b-kot5j7240p] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .op-header.command-bar-host-collapsed > div:first-child[b-kot5j7240p] {
        flex: 1 1 auto;
    }

.op-title[b-kot5j7240p] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.op-subtitle[b-kot5j7240p] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.op-header.command-bar-host-collapsed .op-title[b-kot5j7240p],
.op-header.command-bar-host-collapsed .op-subtitle[b-kot5j7240p] {
    white-space: normal;
    overflow-wrap: break-word;
}

.op-card[b-kot5j7240p] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-kot5j7240p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-kot5j7240p] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-kot5j7240p] { margin-top: .9rem; }

.op-subhead[b-kot5j7240p] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

.op-form-row[b-kot5j7240p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-kot5j7240p] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-kot5j7240p] { flex: 1 1 16rem; }

.op-field label[b-kot5j7240p] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-kot5j7240p], .op-input[b-kot5j7240p] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-kot5j7240p] { min-width: 7rem; }
.op-select-sm[b-kot5j7240p] { min-width: 5.5rem; }
.op-input-num[b-kot5j7240p] { text-align: right; width: 9rem; }
.op-input-pct[b-kot5j7240p] { text-align: right; width: 5rem; }
.op-input-cuenta[b-kot5j7240p] { width: 9rem; font-variant-numeric: tabular-nums; }

/* El par «21 % de la línea 2» se lee como una frase: si se parte en dos controles sueltos deja de
   verse que el porcentaje y su base son un mismo dato. */
.op-inline[b-kot5j7240p] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.op-inline-sep[b-kot5j7240p] { font-size: .82rem; color: #61707d; }

.op-actions[b-kot5j7240p] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-kot5j7240p] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-kot5j7240p] { opacity: .55; cursor: default; }
.op-btn-ico[b-kot5j7240p] { font-size: 1.05rem; }

.op-btn-primary[b-kot5j7240p] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-kot5j7240p] { background: #245cd0; }

.op-btn-ghost[b-kot5j7240p] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-kot5j7240p] { background: #e7edf4; }

.op-btn-danger[b-kot5j7240p] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-kot5j7240p] { background: #c22f39; }

.op-btn-danger-ghost[b-kot5j7240p] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-kot5j7240p] { background: #fdf1f2; }

.op-link-btn[b-kot5j7240p] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Botones de fila (subir/bajar/quitar): sin marco, para que la rejilla no parezca una botonera. */
.op-icon-btn[b-kot5j7240p] {
    background: none;
    border: none;
    color: #61707d;
    cursor: pointer;
    padding: .15rem;
    line-height: 1;
    border-radius: 6px;
}

.op-icon-btn:hover:not(:disabled)[b-kot5j7240p] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-kot5j7240p] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-kot5j7240p] { font-size: 1.15rem; }
.op-icon-danger:hover:not(:disabled)[b-kot5j7240p] { background: #fdf1f2; color: #c22f39; }

.op-grid-wrapper[b-kot5j7240p] { overflow-x: auto; }

.op-table[b-kot5j7240p] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-kot5j7240p] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.op-table td[b-kot5j7240p] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-kot5j7240p] { text-align: right; font-variant-numeric: tabular-nums; }

/* La rejilla de líneas lleva controles: necesita más aire vertical que una tabla de solo lectura. */
.op-table-lineas td[b-kot5j7240p] { padding: .35rem .5rem; }
.op-col-orden[b-kot5j7240p] { width: 2.5rem; }
.op-col-acciones[b-kot5j7240p] { width: 6.5rem; white-space: nowrap; text-align: right; }

/* El listado abre el editor al pulsar la fila: hay que verse que es pulsable. */
.op-table-click tbody tr[b-kot5j7240p] { cursor: pointer; }
.op-table-click tbody tr:hover[b-kot5j7240p] { background: #f5f8fc; }
.op-row-sel[b-kot5j7240p], .op-table-click tbody tr.op-row-sel:hover[b-kot5j7240p] { background: #e8f0fe; }

/*
    Ámbar y no rojo: lo que marca —una plantilla sin líneas suficientes— es algo que hay que completar
    antes de seguir, no un error de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-kot5j7240p] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso .material-symbols-rounded[b-kot5j7240p] { font-size: 1.1rem; }

.op-check[b-kot5j7240p] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

/* La casilla «Activa» convive con campos que tienen rótulo encima: se baja a su línea base. */
.op-check-campo[b-kot5j7240p] { align-self: center; padding-bottom: .45rem; }

.op-confirm[b-kot5j7240p] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-kot5j7240p] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-kot5j7240p] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-kot5j7240p] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-kot5j7240p] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-kot5j7240p] { background: #e2f4e8; color: #1c7a3a; }
/* _content/ErpPowergest/Presentation/Mailing/Boletin/AltaRemitenteMailing.razor.rz.scp.css */
/* El alta de un remitente dentro del boletín: una ficha corta con lo esencial. */

.bar[b-luycu2iwam] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px dashed #c7d2fe;
    border-radius: 10px;
    background: #fafaff;
}

.bar-dos[b-luycu2iwam] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.bar-tres[b-luycu2iwam] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 0.7rem;
}

.bar-ok[b-luycu2iwam],
.bar-mal[b-luycu2iwam] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-size: 12px;
}

.bar-ok[b-luycu2iwam] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.bar-mal[b-luycu2iwam] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

    .bar-ok .material-symbols-outlined[b-luycu2iwam],
    .bar-mal .material-symbols-outlined[b-luycu2iwam] {
        font-size: 18px;
    }

.bar-faltan[b-luycu2iwam] {
    margin: 0;
    padding: 0.55rem 0.7rem 0.55rem 1.6rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
}

@media (max-width: 700px) {
    .bar-dos[b-luycu2iwam],
    .bar-tres[b-luycu2iwam] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/ControlEnvioLanzadoMailing.razor.rz.scp.css */
/* El control de un envío lanzado: estado, situación, barra de progreso, cifras por estado, prueba A/B y reenvío. */

.bcl-cabecera[b-m37ob7lk3o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bcl-a-quien[b-m37ob7lk3o] {
    flex: 1 1 18rem;
}

.bcl-estado[b-m37ob7lk3o] {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
}

.bcl-estado-cancelado[b-m37ob7lk3o] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.bcl-control[b-m37ob7lk3o] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fbfcfe;
}

.bcl-situacion[b-m37ob7lk3o] {
    font-size: 14px;
    font-weight: 750;
    color: #1f2937;
}

.bcl-situacion-pausa[b-m37ob7lk3o] {
    color: #92400e;
}

.bcl-progreso[b-m37ob7lk3o] {
    height: 0.6rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.bcl-progreso-barra[b-m37ob7lk3o] {
    height: 100%;
    border-radius: 999px;
    background: #4f46e5;
    transition: width 0.4s ease;
}

.bcl-tarjetas[b-m37ob7lk3o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
}

.bcl-tarjeta[b-m37ob7lk3o] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

    .bcl-tarjeta b[b-m37ob7lk3o] {
        font-size: 18px;
        font-weight: 850;
        color: #1f2937;
    }

    .bcl-tarjeta span[b-m37ob7lk3o] {
        font-size: 12px;
        color: #6b7280;
    }

.bcl-tarjeta-enlace[b-m37ob7lk3o] {
    text-decoration: none;
    cursor: pointer;
}

    .bcl-tarjeta-enlace:hover[b-m37ob7lk3o] {
        border-color: #a5b4fc;
        background: #eef2ff;
    }

.bcl-reenvio[b-m37ob7lk3o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
}

.bcl-prueba-ab[b-m37ob7lk3o] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #fafaff;
}

.bcl-tabla-desliza[b-m37ob7lk3o] {
    overflow-x: auto;
}

.bcl-prueba-tabla[b-m37ob7lk3o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .bcl-prueba-tabla th[b-m37ob7lk3o] {
        text-align: left;
        font-weight: 750;
        color: #475569;
        padding: 0.35rem 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .bcl-prueba-tabla td[b-m37ob7lk3o] {
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid #eef1f5;
    }

    .bcl-prueba-tabla th.mlv-numero[b-m37ob7lk3o] {
        text-align: right;
    }

.bcl-prueba-ganadora td[b-m37ob7lk3o] {
    background: #f0fdf4;
    font-weight: 700;
}

.bcl-prueba-marca[b-m37ob7lk3o] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 750;
}

    .bcl-prueba-marca .material-symbols-outlined[b-m37ob7lk3o] {
        font-size: 14px;
    }

/* La columna «Lo que dijo el servidor» la pinta la tabla (otro componente): con ::deep desde un elemento de aquí. */
.mlv-tabla[b-m37ob7lk3o]  .bcl-col-error {
    max-width: 22rem;
    font-size: 12px;
    color: #6b7280;
    overflow-wrap: anywhere;
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/MarcoEnvioMailing.razor.rz.scp.css */
/*
    Los estilos COMUNES de la pantalla de un envío: los usan todas sus secciones (componentes distintos, cada uno con su hoja).
    Van anclados en el marco y con ::deep para llegar a los elementos de las secciones. Lo propio de cada sección está en su
    hoja; aquí no se repite nada suyo.
*/

.mlv-marco[b-69ldwjougz] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlv-marco[b-69ldwjougz]  .mlv-aviso {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* SECCIONES */

.mlv-marco[b-69ldwjougz]  .mlv-seccion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlv-marco[b-69ldwjougz]  .mlv-seccion-cabecera {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mlv-marco[b-69ldwjougz]  .mlv-seccion-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 850;
    flex: 0 0 auto;
}

.mlv-marco[b-69ldwjougz]  .mlv-seccion-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 850;
    color: #111827;
}

.mlv-marco[b-69ldwjougz]  .mlv-seccion-resumen {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
}

.mlv-marco[b-69ldwjougz]  .mlv-subtitulo {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

/* CAMPOS */

.mlv-marco[b-69ldwjougz]  .mlv-campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.mlv-marco[b-69ldwjougz]  .mlv-campo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    min-width: 0;
}

    .mlv-marco[b-69ldwjougz]  .mlv-campo input,
    .mlv-marco[b-69ldwjougz]  .mlv-campo select,
    .mlv-marco[b-69ldwjougz]  .mlv-campo textarea {
        width: 100%;
        padding: 0.5rem 0.7rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: #1f2937;
        background: #ffffff;
        outline: none;
    }

        .mlv-marco[b-69ldwjougz]  .mlv-campo input:focus,
        .mlv-marco[b-69ldwjougz]  .mlv-campo select:focus,
        .mlv-marco[b-69ldwjougz]  .mlv-campo textarea:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
        }

        .mlv-marco[b-69ldwjougz]  .mlv-campo input:disabled,
        .mlv-marco[b-69ldwjougz]  .mlv-campo select:disabled {
            background: #f8fafc;
            color: #6b7280;
        }

.mlv-marco[b-69ldwjougz]  .mlv-input {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    min-width: 0;
}

.mlv-marco[b-69ldwjougz]  .mlv-input-fecha {
    max-width: 16rem;
}

.mlv-marco[b-69ldwjougz]  .mlv-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

    .mlv-marco[b-69ldwjougz]  .mlv-fila .mlv-input {
        flex: 1 1 14rem;
    }

.mlv-marco[b-69ldwjougz]  .mlv-fecha {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .mlv-marco[b-69ldwjougz]  .mlv-fecha input {
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
    }

.mlv-marco[b-69ldwjougz]  .mlv-casillas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.mlv-marco[b-69ldwjougz]  .mlv-casilla {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

    .mlv-marco[b-69ldwjougz]  .mlv-casilla input {
        width: 1rem;
        height: 1rem;
        accent-color: #4f46e5;
    }

.mlv-marco[b-69ldwjougz]  .mlv-nota {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlv-marco[b-69ldwjougz]  .mlv-errores,
.mlv-marco[b-69ldwjougz]  .mlv-faltan {
    padding: 0.75rem 0.9rem;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

.mlv-marco[b-69ldwjougz]  .mlv-faltan {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

    .mlv-marco[b-69ldwjougz]  .mlv-errores ul,
    .mlv-marco[b-69ldwjougz]  .mlv-faltan ul {
        margin: 0.35rem 0 0;
        padding-left: 1.1rem;
    }

.mlv-marco[b-69ldwjougz]  .mlv-avisos-diseno {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

    .mlv-marco[b-69ldwjougz]  .mlv-avisos-diseno ul {
        margin: 0.3rem 0 0;
        padding-left: 1.1rem;
    }

/* FICHAS (grupos, segmentos, accesos, criterios, personas) */

.mlv-marco[b-69ldwjougz]  .mlv-chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-criterio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.35rem 0.25rem 0.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #312e81;
    font-size: 12px;
    max-width: 100%;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-grupo {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #14532d;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-segmento {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0c4a6e;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-persona {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #1f2937;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-icono {
    font-size: 16px;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-archivado {
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
}

.mlv-marco[b-69ldwjougz]  .mlv-chip-elegir {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem 0.25rem 0.4rem;
    border: 1px dashed #94a3b8;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .mlv-marco[b-69ldwjougz]  .mlv-chip-elegir:hover:not(:disabled) {
        border-color: #4f46e5;
        background: #eef2ff;
        color: #3730a3;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-chip-elegir:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-chip-elegir .material-symbols-outlined {
        font-size: 16px;
    }

.mlv-marco[b-69ldwjougz]  .mlv-origen {
    display: inline-flex;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: #1e293b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mlv-marco[b-69ldwjougz]  .mlv-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    flex: 0 0 auto;
}

    .mlv-marco[b-69ldwjougz]  .mlv-quitar:hover {
        background: rgba(15, 23, 42, 0.08);
        color: #1f2937;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-quitar .material-symbols-outlined {
        font-size: 16px;
    }

.mlv-marco[b-69ldwjougz]  .mlv-manual,
.mlv-marco[b-69ldwjougz]  .mlv-sugerencias {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .mlv-marco[b-69ldwjougz]  .mlv-manual li,
    .mlv-marco[b-69ldwjougz]  .mlv-sugerencias li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.5rem;
        border: 1px solid #eef1f5;
        border-radius: 8px;
        font-size: 12px;
        min-width: 0;
    }

.mlv-marco[b-69ldwjougz]  .mlv-manual-nombre {
    font-weight: 700;
    color: #1f2937;
}

.mlv-marco[b-69ldwjougz]  .mlv-manual-dato {
    flex: 1 1 auto;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* TABLAS Y CIFRAS */

.mlv-marco[b-69ldwjougz]  .mlv-tabla {
    min-width: 0;
}

.mlv-marco[b-69ldwjougz]  .mlv-tabla .tp-panel {
    min-height: auto;
}

.mlv-marco[b-69ldwjougz]  .mlv-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.mlv-marco[b-69ldwjougz]  .mlv-motivos {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .mlv-marco[b-69ldwjougz]  .mlv-motivos td {
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid #eef1f5;
    }

.mlv-marco[b-69ldwjougz]  .mlv-resumen {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 13px;
}

    .mlv-marco[b-69ldwjougz]  .mlv-resumen dt {
        color: #6b7280;
        font-weight: 700;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-resumen dd {
        margin: 0;
        color: #1f2937;
        overflow-wrap: anywhere;
    }

.mlv-marco[b-69ldwjougz]  .mlv-enlace {
    color: #4338ca;
    font-weight: 700;
    text-decoration: none;
}

    .mlv-marco[b-69ldwjougz]  .mlv-enlace:hover {
        text-decoration: underline;
    }

.mlv-marco[b-69ldwjougz]  .mlv-enlace-boton {
    padding: 0;
    border: none;
    background: none;
    color: #4338ca;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

    .mlv-marco[b-69ldwjougz]  .mlv-enlace-boton:hover {
        text-decoration: underline;
    }

/* BOTONES */

.mlv-marco[b-69ldwjougz]  .mlv-botones {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mlv-marco[b-69ldwjougz]  .mlv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .mlv-marco[b-69ldwjougz]  .mlv-btn:hover:not(:disabled) {
        background: #f8fafc;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-btn .material-symbols-outlined {
        font-size: 18px;
    }

.mlv-marco[b-69ldwjougz]  .mlv-btn-pequeno {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mlv-marco[b-69ldwjougz]  .mlv-btn-primario {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlv-marco[b-69ldwjougz]  .mlv-btn-primario:hover:not(:disabled) {
        background: #4338ca;
    }

.mlv-marco[b-69ldwjougz]  .mlv-btn-peligro {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mlv-marco[b-69ldwjougz]  .mlv-btn-peligro:hover:not(:disabled) {
        background: #b91c1c;
    }

/* VENTANAS DE CONFIRMACIÓN */

.mlv-marco[b-69ldwjougz]  .mlv-modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlv-marco[b-69ldwjougz]  .mlv-modal {
    width: min(30rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

    /* Un campo seguido de los botones: que no se toquen. */
    .mlv-marco[b-69ldwjougz]  .mlv-modal .mlv-campo + .mlv-botones {
        margin-top: 0.75rem;
    }

.mlv-marco[b-69ldwjougz]  .mlv-modal-titulo {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

@media (max-width: 1100px) {
    .mlv-marco[b-69ldwjougz]  .mlv-campos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .mlv-marco[b-69ldwjougz]  .mlv-seccion {
        padding: 0.8rem;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-seccion-resumen {
        margin-left: 0;
        flex-basis: 100%;
    }

    .mlv-marco[b-69ldwjougz]  .mlv-botones {
        justify-content: stretch;
    }

        .mlv-marco[b-69ldwjougz]  .mlv-botones .mlv-btn {
            flex: 1 1 auto;
        }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/MasOpcionesMailing.razor.rz.scp.css */
/* «Más opciones», plegado: la cabecera con el resumen en una línea y, desplegado, los ajustes. */

/* Más específico que la sección común del marco (que le daría su relleno y su separación). */
section.mlv-seccion.bmo[b-65lu15vyd2] {
    gap: 0;
    padding: 0;
}

.bmo-cabecera[b-65lu15vyd2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .bmo-cabecera:hover[b-65lu15vyd2] {
        background: #f8fafc;
    }

.bmo-titulo[b-65lu15vyd2] {
    font-size: 15px;
    font-weight: 850;
}

.bmo-resumen[b-65lu15vyd2] {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
    text-align: right;
}

.bmo-cuerpo[b-65lu15vyd2] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.2rem 1rem 1rem;
}

.bmo-bloque[b-65lu15vyd2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef1f5;
}

.bmo-prueba-ab[b-65lu15vyd2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #fafaff;
}

@media (max-width: 640px) {
    .bmo-cabecera[b-65lu15vyd2] {
        flex-wrap: wrap;
    }

    .bmo-resumen[b-65lu15vyd2] {
        margin-left: 0;
        flex-basis: 100%;
        text-align: left;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/RecuentoEnvioMailing.razor.rz.scp.css */
/* El recuento en su columna, fija al desplazar en escritorio. */

.brc[b-mw9wxmfh6r] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
}

.brc-cifra[b-mw9wxmfh6r] {
    font-size: 13px;
    color: #374151;
}

.brc-cifra-grande[b-mw9wxmfh6r] {
    font-size: 15px;
}

    .brc-cifra-grande b[b-mw9wxmfh6r] {
        font-size: 26px;
        font-weight: 850;
        color: #3730a3;
    }

.brc-cifra-suave[b-mw9wxmfh6r] {
    color: #6b7280;
}

@media (max-width: 1100px) {
    .brc[b-mw9wxmfh6r] {
        position: static;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/RevisionDestinatariosMailing.razor.rz.scp.css */
/* «Quién queda fuera y por qué»: las cifras, los motivos (se pulsan para ver quiénes) y la muestra. */

.brv[b-z2ydovjb6a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.brv-cifras[b-z2ydovjb6a] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 13px;
    color: #374151;
}

    .brv-cifras b[b-z2ydovjb6a] {
        font-size: 22px;
        font-weight: 850;
        color: #3730a3;
    }

.brv-grupo[b-z2ydovjb6a] {
    margin-left: auto;
}

.brv-motivos tr[b-z2ydovjb6a] {
    cursor: pointer;
}

    .brv-motivos tr:hover td[b-z2ydovjb6a] {
        background: #f8fafc;
    }

.brv-motivo-activo td[b-z2ydovjb6a] {
    background: #eef2ff;
}

.brv-filtro[b-z2ydovjb6a] {
    display: inline-flex;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
    align-self: flex-start;
}

.brv-filtro-btn[b-z2ydovjb6a] {
    padding: 0.4rem 0.85rem;
    border: none;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

    .brv-filtro-btn + .brv-filtro-btn[b-z2ydovjb6a] {
        border-left: 1px solid #dbe2ea;
    }

.brv-filtro-activo[b-z2ydovjb6a] {
    background: #4f46e5;
    color: #ffffff;
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeccionAsuntoMailing.razor.rz.scp.css */
/* Sección «Asunto»: los dos campos y, al lado, las propuestas de la IA. */

.bas-rejilla[b-68hnagv185] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.bas-con-ia[b-68hnagv185] {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
}

.bas-campos[b-68hnagv185] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.bas-con-variable[b-68hnagv185] {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
}

    .bas-con-variable input[b-68hnagv185] {
        flex: 1 1 auto;
        min-width: 0;
    }

.bas-variable[b-68hnagv185] {
    flex: 0 0 auto;
    max-width: 7.5rem;
    padding: 0 0.4rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.bas-ia[b-68hnagv185] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed #c7d2fe;
    border-radius: 10px;
    background: #fafaff;
    min-width: 0;
}

.bas-propuestas[b-68hnagv185] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.bas-propuesta[b-68hnagv185] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    background: #ffffff;
}

.bas-propuesta-texto[b-68hnagv185] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #374151;
}

    .bas-propuesta-texto b[b-68hnagv185] {
        font-size: 13px;
        color: #1f2937;
        overflow-wrap: anywhere;
    }

@media (max-width: 900px) {
    .bas-con-ia[b-68hnagv185] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeccionCorreoMailing.razor.rz.scp.css */
/* Sección «El correo»: la plantilla de partida, el editor (o el aviso del diseñador) con la vista previa al lado, los
   errores y el diseñador de bloques a pantalla completa. */

.bco-plantilla[b-trczvcsxwi] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bco-plantilla-campo[b-trczvcsxwi] {
    flex: 1 1 18rem;
    max-width: 30rem;
}

.bco-lados[b-trczvcsxwi] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.bco-editor[b-trczvcsxwi] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.bco-pista[b-trczvcsxwi] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
}

.bco-bloques[b-trczvcsxwi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px dashed #c7d2fe;
    border-radius: 10px;
    background: #fafaff;
    font-size: 13px;
    color: #374151;
}

    .bco-bloques p[b-trczvcsxwi] {
        margin: 0;
        line-height: 1.45;
    }

.bco-bloques-icono[b-trczvcsxwi] {
    font-size: 30px;
    color: #4f46e5;
}

.bco-ia[b-trczvcsxwi] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .bco-ia input[b-trczvcsxwi] {
        flex: 1 1 16rem;
    }

div.mlv-botones.bco-arreglos[b-trczvcsxwi] {
    justify-content: flex-start;
}

/* El diseñador de bloques, a pantalla completa sobre el boletín. */

.bco-disenador[b-trczvcsxwi] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.bco-disenador-barra[b-trczvcsxwi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.bco-disenador-titulo[b-trczvcsxwi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    color: #1f2937;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 16rem;
}

    .bco-disenador-titulo .material-symbols-outlined[b-trczvcsxwi] {
        color: #4f46e5;
    }

.bco-disenador-ia[b-trczvcsxwi] {
    display: flex;
    gap: 0.4rem;
    flex: 1 1 26rem;
    max-width: 40rem;
}

    .bco-disenador-ia input[b-trczvcsxwi] {
        flex: 1 1 auto;
    }

.bco-disenador-lienzo[b-trczvcsxwi] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0.5rem;
}

    /* A pantalla completa el lienzo del diseñador aprovecha el alto que deja la barra. */
    .bco-disenador-lienzo[b-trczvcsxwi]  .dpm-lienzo-marco {
        height: calc(100vh - 200px);
        min-height: 420px;
    }

/* Lo que salió de subir un ZIP: qué página, cuántas imágenes y lo que no se usó. */
.bco-zip[b-trczvcsxwi] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
    font-size: 12.5px;
    color: #312e81;
}

    .bco-zip > .material-symbols-outlined[b-trczvcsxwi] {
        color: #4f46e5;
    }

.bco-zip-texto[b-trczvcsxwi] {
    flex: 1 1 auto;
    min-width: 0;
}

    .bco-zip-texto ul[b-trczvcsxwi] {
        margin: 0.3rem 0 0;
        padding-left: 1.1rem;
        color: #3730a3;
    }

.bco-zip-paginas[b-trczvcsxwi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .bco-zip-paginas .mlv-btn[b-trczvcsxwi] {
        justify-content: flex-start;
    }

@media (max-width: 1100px) {
    .bco-lados[b-trczvcsxwi] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeccionDestinatariosMailing.razor.rz.scp.css */
/* Sección «¿A quién?»: accesos directos, grupos y segmentos como fichas; alguien en concreto; el recuento y su panel. */

.bad-bloque[b-nlyxtrrmra] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 0.2rem;
}

    .bad-bloque + .bad-bloque[b-nlyxtrrmra] {
        padding-top: 0.75rem;
        border-top: 1px solid #eef1f5;
    }

.bad-fichas[b-nlyxtrrmra] {
    gap: 0.5rem;
}

.bad-acceso[b-nlyxtrrmra] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    padding: 0 0.95rem 0 0.7rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #ffffff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .bad-acceso:hover:not(:disabled)[b-nlyxtrrmra] {
        background: #eef2ff;
    }

    .bad-acceso:disabled[b-nlyxtrrmra] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .bad-acceso .material-symbols-outlined[b-nlyxtrrmra] {
        font-size: 18px;
    }

.bad-acceso-elegido[b-nlyxtrrmra] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .bad-acceso-elegido:hover:not(:disabled)[b-nlyxtrrmra] {
        background: #4338ca;
    }

.bad-grupo[b-nlyxtrrmra] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.bad-etiqueta[b-nlyxtrrmra] {
    min-width: 5.5rem;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
}

.bad-dato[b-nlyxtrrmra] {
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.bad-recuento[b-nlyxtrrmra] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #f8faff;
}

.bad-cifra[b-nlyxtrrmra] {
    font-size: 14px;
    color: #374151;
}

    .bad-cifra b[b-nlyxtrrmra] {
        font-size: 24px;
        font-weight: 850;
        color: #3730a3;
    }

.bad-cifra-suave[b-nlyxtrrmra] {
    font-size: 13px;
    color: #6b7280;
}

/* El panel lateral «Quién lo recibe y quién queda fuera». */

.bad-panel-fondo[b-nlyxtrrmra] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.35);
}

.bad-panel[b-nlyxtrrmra] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: min(46rem, 100%);
    height: 100%;
    overflow: auto;
    padding: 1rem 1.1rem 1.5rem;
    background: #ffffff;
    box-shadow: -1rem 0 2.5rem rgba(15, 23, 42, 0.2);
}

.bad-panel-cabecera[b-nlyxtrrmra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bad-panel-titulo[b-nlyxtrrmra] {
    margin: 0;
    font-size: 16px;
    font-weight: 850;
    color: #111827;
}

@media (max-width: 640px) {
    .bad-etiqueta[b-nlyxtrrmra] {
        min-width: 0;
        flex-basis: 100%;
    }

    .bad-dato[b-nlyxtrrmra] {
        display: none;
    }
}


/* «Dejar fuera a»: el atajo en rojo suave, para que no se confunda con elegir a quién va. */
.bad-chip-fuera[b-nlyxtrrmra] {
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

    .bad-chip-fuera:hover:not(:disabled)[b-nlyxtrrmra] {
        background: #fef2f2 !important;
    }
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeccionMandarMailing.razor.rz.scp.css */
/* Sección «Mandar»: la prueba, cuándo sale y los botones de guardar y lanzar. */

.bmd-bloque[b-wvsyu1vrzb] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.bmd-cuando[b-wvsyu1vrzb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
}

.bmd-confirmacion[b-wvsyu1vrzb] {
    max-width: 24rem;
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeccionRemitenteMailing.razor.rz.scp.css */
/* Sección «De parte de quién»: el desplegable del remitente y, al lado, dar de alta otra cuenta. */

.brm-fila[b-xgynignffy] {
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.brm-campo[b-xgynignffy] {
    flex: 1 1 22rem;
    max-width: 36rem;
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/SeleccionDocumentosMailing.razor.rz.scp.css */
/* Paso «Documentos» del envío de documentos: el filtro que se compone y los añadidos a mano. */

.bsd-filtro[b-8qvtcimhzs] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.bsd-opciones[b-8qvtcimhzs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

div.mlv-botones.bsd-botones[b-8qvtcimhzs] {
    justify-content: flex-start;
}
/* _content/ErpPowergest/Presentation/Mailing/Boletin/VistaPreviaCorreoMailing.razor.rz.scp.css */
/* La vista previa del correo compuesta por el servidor, en escritorio o en móvil. */

.bvp[b-61qk7rdv1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.bvp-barra[b-61qk7rdv1l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bvp-titulo[b-61qk7rdv1l] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
    margin-right: auto;
}

.bvp-segmentos[b-61qk7rdv1l] {
    display: inline-flex;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
}

.bvp-seg[b-61qk7rdv1l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 1.9rem;
    border: none;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
}

    .bvp-seg + .bvp-seg[b-61qk7rdv1l] {
        border-left: 1px solid #dbe2ea;
    }

    .bvp-seg .material-symbols-outlined[b-61qk7rdv1l] {
        font-size: 18px;
    }

.bvp-seg-activo[b-61qk7rdv1l] {
    background: #4f46e5;
    color: #ffffff;
}

.bvp-cabecera[b-61qk7rdv1l] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: #374151;
    overflow-wrap: anywhere;
}

.bvp-peso[b-61qk7rdv1l] {
    color: #6b7280;
}

.bvp-peso-alto[b-61qk7rdv1l] {
    color: #b45309;
    font-weight: 750;
}

.bvp-desfasada[b-61qk7rdv1l] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
}

.bvp-marco[b-61qk7rdv1l] {
    display: flex;
    justify-content: center;
    padding: 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f1f5f9;
    min-width: 0;
}

.bvp-iframe[b-61qk7rdv1l] {
    width: 100%;
    height: 560px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
}

.bvp-iframe-movil[b-61qk7rdv1l] {
    width: 375px;
    max-width: 100%;
    height: 640px;
}

.bvp-vacia[b-61qk7rdv1l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}
/* _content/ErpPowergest/Presentation/Mailing/BoletinesMailingPage.razor.rz.scp.css */
/*
    Mailing · Boletines (la lista). Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se vería
    sin estilo. La tabla la pinta <TablaPaginada> (componente hijo): lo que se pone a sus celdas va con ::deep desde un
    elemento de esta página.
*/

/* Hijo directo de <PantallaMailing AnchoCompleto>: se queda con el alto sobrante, y lo pasa a la lista. */
.mlb-cuerpo[b-9o9jis0mbg] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlb-aviso[b-9o9jis0mbg] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* Los buscadores, a todo el ancho y repartidos: la búsqueda por asunto, el doble que cada desplegable. */
.mlb-barra[b-9o9jis0mbg] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: center;
}

.mlb-barra-cuatro[b-9o9jis0mbg] {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

    .mlb-barra > .mlb-input[b-9o9jis0mbg] {
        width: 100%;
    }

.mlb-buscar[b-9o9jis0mbg] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding-left: 0.6rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
}

    .mlb-buscar .material-symbols-outlined[b-9o9jis0mbg] {
        font-size: 18px;
        color: #94a3b8;
    }

    .mlb-buscar .mlb-input[b-9o9jis0mbg] {
        flex: 1 1 auto;
        border: none;
        padding-left: 0.2rem;
        min-width: 0;
    }

.mlb-input[b-9o9jis0mbg] {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    max-width: 100%;
}

/* La tabla, a todo el largo: se estira hasta el suelo de la pantalla y el paginador queda abajo. */
.mlb-lista[b-9o9jis0mbg] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlb-lista[b-9o9jis0mbg]  .tp-panel {
    min-height: auto;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-asunto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-asunto-texto {
    font-weight: 700;
    color: #1f2937;
    overflow-wrap: anywhere;
}

/* Debajo del asunto: su campaña y, si no lo preparó una persona en Mailing, quién (regla del CRM, recurrente, asistente). */
.mlb-lista[b-9o9jis0mbg]  .mlb-origen {
    display: block;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.25;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-col-a-quien {
    font-size: 12px;
    color: #374151;
    overflow-wrap: anywhere;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-col-cuando {
    font-size: 12px;
    color: #475569;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip-azul {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip-rojo {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-chip-ambar {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.mlb-lista[b-9o9jis0mbg]  .mlb-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4338ca;
    text-decoration: none;
    cursor: pointer;
}

    .mlb-lista[b-9o9jis0mbg]  .mlb-icono:hover:not(:disabled) {
        background: #eef2ff;
    }

    .mlb-lista[b-9o9jis0mbg]  .mlb-icono:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlb-lista[b-9o9jis0mbg]  .mlb-icono .material-symbols-outlined {
        font-size: 1.15rem;
    }

.mlb-lista[b-9o9jis0mbg]  .mlb-icono-peligro {
    color: #b91c1c;
}

    .mlb-lista[b-9o9jis0mbg]  .mlb-icono-peligro:hover:not(:disabled) {
        background: #fef2f2;
    }

/* Confirmar el borrado de un borrador. */

.mlb-modal-fondo[b-9o9jis0mbg] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlb-modal[b-9o9jis0mbg] {
    width: min(30rem, 100%);
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

.mlb-modal-titulo[b-9o9jis0mbg] {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mlb-botones[b-9o9jis0mbg] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mlb-btn[b-9o9jis0mbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlb-btn:disabled[b-9o9jis0mbg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.mlb-btn-peligro[b-9o9jis0mbg] {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

/* En pantallas estrechas se van primero las cifras y luego «cuándo»: el asunto, el estado y a quién va, siempre. */
@media (max-width: 1200px) {
    .mlb-lista[b-9o9jis0mbg]  .mlb-col-cifra {
        display: none;
    }
}

@media (max-width: 760px) {
    .mlb-barra[b-9o9jis0mbg],
    .mlb-barra-cuatro[b-9o9jis0mbg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlb-lista[b-9o9jis0mbg]  .mlb-col-cuando {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/BoletinMailingPage.razor.rz.scp.css */
/*
    Mailing · El boletín. Los estilos de sus secciones están en cada sección y los comunes, en el marco (MarcoEnvioMailing):
    aquí solo la columna de las secciones, con un ancho cómodo de leer (como el de un correo) y el editor a su lado.
*/

.mlbo-secciones[b-454xjo8m3t] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    max-width: 1180px;
    min-width: 0;
}
/* _content/ErpPowergest/Presentation/Mailing/CampaniasMailingPage.razor.rz.scp.css */
/*
    Mailing · Campañas. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo, no de Syncfusion), así que lo que se le
    pone a sus filas y celdas va con ::deep desde un elemento de esta página.
*/

.mlc-cuerpo[b-ikkbrc2xfq] {
    /* Hijo del ChildContent de <PantallaMailing AnchoCompleto>: se queda con el alto que sobra. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlc-aviso[b-ikkbrc2xfq] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlc-lista[b-ikkbrc2xfq] {
    /* La tabla, todo el largo de la pantalla: la caja crece y su .tp-panel (flex: 1 1 auto) la llena. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlc-lista[b-ikkbrc2xfq]  .tp-panel {
    min-height: auto;
}

.mlc-lista[b-ikkbrc2xfq]  .mlc-fila-abierta td {
    background: #eef2ff;
}

.mlc-chip[b-ikkbrc2xfq],
.mlc-lista[b-ikkbrc2xfq]  .mlc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlc-chip-verde[b-ikkbrc2xfq],
.mlc-lista[b-ikkbrc2xfq]  .mlc-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlc-chip-gris[b-ikkbrc2xfq],
.mlc-lista[b-ikkbrc2xfq]  .mlc-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mlc-chip-azul[b-ikkbrc2xfq] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.mlc-chip-rojo[b-ikkbrc2xfq] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* FICHA, en ventana flotante (<ModalMaestro>). Los campos llevan la piel común (mm-field, mm-input…); aquí solo
   el ancho de la ventana, que lleva debajo boletines y cifras, y la descripción en varias líneas. Va con ::deep
   anclado en .mlc-modal para no tocar la hoja común de ModalMaestro. */

.mlc-modal[b-ikkbrc2xfq]  .mm-card {
    max-width: 760px;
}

.mlc-modal[b-ikkbrc2xfq]  textarea.mm-input {
    height: auto;
    min-height: 5.5rem;
    padding: 10px 14px;
    resize: vertical;
    font-family: inherit;
}

.mlc-modal[b-ikkbrc2xfq]  .mm-input:disabled {
    background: #f8fafc;
    color: #64748b;
}

.mlc-modal[b-ikkbrc2xfq]  .mm-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
}

.mlc-ficha[b-ikkbrc2xfq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mlc-nota[b-ikkbrc2xfq] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlc-btn[b-ikkbrc2xfq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlc-btn:hover:not(:disabled)[b-ikkbrc2xfq] {
        background: #f8fafc;
    }

    .mlc-btn:disabled[b-ikkbrc2xfq] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlc-btn .material-symbols-outlined[b-ikkbrc2xfq] {
        font-size: 18px;
    }

.mlc-btn-pequeno[b-ikkbrc2xfq] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

/* SECCIONES DE LA FICHA: envíos e indicadores */

.mlc-seccion[b-ikkbrc2xfq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef1f5;
}

.mlc-seccion-cabecera[b-ikkbrc2xfq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.mlc-envios[b-ikkbrc2xfq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mlc-envio[b-ikkbrc2xfq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}

    .mlc-envio:hover[b-ikkbrc2xfq] {
        background: #f8fafc;
        border-color: #dbe2ea;
    }

.mlc-envio-asunto[b-ikkbrc2xfq] {
    font-weight: 700;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mlc-envio-dato[b-ikkbrc2xfq] {
    color: #6b7280;
}

a.mlc-btn[b-ikkbrc2xfq] {
    text-decoration: none;
}

/* Cifras clave de la campaña en su ficha */

.mlc-cifras[b-ikkbrc2xfq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.mlc-cifra[b-ikkbrc2xfq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #ffffff;
    min-width: 0;
}

    .mlc-cifra b[b-ikkbrc2xfq] {
        font-size: 15px;
        font-weight: 850;
        color: #1f2937;
    }

    .mlc-cifra span[b-ikkbrc2xfq] {
        font-size: 11px;
        color: #6b7280;
    }

@media (max-width: 1100px) {
    .mlc-lista[b-ikkbrc2xfq]  .mlc-col-tematica,
    .mlc-lista[b-ikkbrc2xfq]  .mlc-col-fecha,
    .mlc-lista[b-ikkbrc2xfq]  .mlc-col-tasa {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/ConfiguracionMailingPage.razor.rz.scp.css */
/*
    Mailing · Configuración. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se vería
    sin estilo. Todo es markup de esta página (no hay componentes hijos que alcanzar con ::deep).
*/

.mlf-cuerpo[b-b5pgp01ev9] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlf-aviso[b-b5pgp01ev9] {
    padding: 0.8rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
}

.mlf-seccion[b-b5pgp01ev9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlf-seccion-titulo[b-b5pgp01ev9] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.mlf-nota[b-b5pgp01ev9] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlf-campos[b-b5pgp01ev9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.8rem 1rem;
}

.mlf-campo[b-b5pgp01ev9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #fbfcfe;
    min-width: 0;
}

.mlf-campo-error[b-b5pgp01ev9] {
    border-color: #fecaca;
    background: #fef2f2;
}

.mlf-rotulo[b-b5pgp01ev9] {
    font-size: 13px;
    font-weight: 750;
    color: #1f2937;
}

.mlf-valor[b-b5pgp01ev9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mlf-input[b-b5pgp01ev9] {
    width: 8rem;
    min-height: 2.2rem;
    padding: 0 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    text-align: right;
    outline: none;
}

    .mlf-input:focus[b-b5pgp01ev9] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

    .mlf-input:disabled[b-b5pgp01ev9] {
        background: #f3f4f6;
        color: #6b7280;
    }

/* Las opciones que se eligen de una lista (plantilla, remitente) necesitan el ancho de un nombre, no de un número. */
.mlf-lista[b-b5pgp01ev9] {
    width: min(26rem, 100%);
}

.mlf-unidad[b-b5pgp01ev9] {
    font-size: 12px;
    color: #6b7280;
}

.mlf-casilla[b-b5pgp01ev9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

    .mlf-casilla input[b-b5pgp01ev9] {
        width: 1.05rem;
        height: 1.05rem;
    }

.mlf-ayuda[b-b5pgp01ev9] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.mlf-fabrica[b-b5pgp01ev9] {
    display: block;
    margin-top: 0.15rem;
    color: #9ca3af;
}

.mlf-error[b-b5pgp01ev9] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

/* CONFIRMACIÓN */

.mlf-modal-fondo[b-b5pgp01ev9] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlf-modal[b-b5pgp01ev9] {
    width: min(30rem, 100%);
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

.mlf-modal-titulo[b-b5pgp01ev9] {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.mlf-botones[b-b5pgp01ev9] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mlf-btn[b-b5pgp01ev9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlf-btn:disabled[b-b5pgp01ev9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.mlf-btn-primario[b-b5pgp01ev9] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}
/* _content/ErpPowergest/Presentation/Mailing/DireccionesMailingPage.razor.rz.scp.css */
/*
    Mailing · Direcciones. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo): lo que se pone a sus filas y a las
    plantillas de sus celdas va con ::deep desde un elemento de esta página. La ficha es markup de esta página
    (un RenderFragment propio), así que no lo necesita.
*/

/* Todo el largo: PantallaMailing (AnchoCompleto) es una columna flex con suelo en la pantalla; el cuerpo, la
   rejilla y la lista se quedan con el alto que sobra y la tabla lo rellena hasta abajo. */
.mld-cuerpo[b-m6qnf7xyue] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.mld-aviso[b-m6qnf7xyue] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* FILTROS */

.mld-barra[b-m6qnf7xyue] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 0.6rem;
}

.mld-buscador[b-m6qnf7xyue] {
    position: relative;
    min-width: 0;
}

.mld-lupa[b-m6qnf7xyue] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
}

.mld-input[b-m6qnf7xyue] {
    width: 100%;
    min-width: 0;
    min-height: 2.4rem;
    padding: 0 0.8rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .mld-input:focus[b-m6qnf7xyue] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.mld-input-busqueda[b-m6qnf7xyue] {
    padding-left: 2.4rem;
}

.mld-input-fecha[b-m6qnf7xyue] {
    max-width: 10rem;
}

.mld-leyenda[b-m6qnf7xyue] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* ELEGIR VARIAS PARA METERLAS EN UN GRUPO */

.mld-seleccion[b-m6qnf7xyue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 12px;
    color: #374151;
}

.mld-casilla[b-m6qnf7xyue] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    cursor: pointer;
}

    .mld-casilla input[b-m6qnf7xyue] {
        width: 1rem;
        height: 1rem;
        accent-color: #4f46e5;
    }

.mld-seleccion-cuantas[b-m6qnf7xyue] {
    color: #6b7280;
}

.mld-btn-pequeno[b-m6qnf7xyue] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mld-lista[b-m6qnf7xyue]  .mld-marca-fila {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
    cursor: pointer;
}

/* LISTA + FICHA */

.mld-rejilla[b-m6qnf7xyue] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

    .mld-rejilla.mld-con-ficha[b-m6qnf7xyue] {
        grid-template-columns: minmax(0, 1.3fr) minmax(22rem, 1fr);
    }

.mld-lista[b-m6qnf7xyue] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mld-lista[b-m6qnf7xyue]  .tp-panel {
    min-height: auto;
}

.mld-lista[b-m6qnf7xyue]  .mld-fila-abierta td {
    background: #eef2ff;
}

.mld-lista[b-m6qnf7xyue]  .mld-marca {
    font-size: 1.1rem;
    color: #b91c1c;
}

.mld-lista[b-m6qnf7xyue]  .mld-chip-estado,
.mld-chip-estado[b-m6qnf7xyue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mld-lista[b-m6qnf7xyue]  .mld-verde,
.mld-verde[b-m6qnf7xyue] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mld-lista[b-m6qnf7xyue]  .mld-naranja,
.mld-naranja[b-m6qnf7xyue] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.mld-lista[b-m6qnf7xyue]  .mld-rojo,
.mld-rojo[b-m6qnf7xyue] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.mld-lista[b-m6qnf7xyue]  .mld-gris,
.mld-gris[b-m6qnf7xyue] {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* FICHA */

.mld-ficha[b-m6qnf7xyue] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mld-ficha-cabecera[b-m6qnf7xyue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mld-ficha-titulo[b-m6qnf7xyue] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mld-resumen[b-m6qnf7xyue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    color: #374151;
}

.mld-calidad b[b-m6qnf7xyue] {
    font-size: 15px;
}

.mld-dato[b-m6qnf7xyue] {
    color: #4b5563;
}

.mld-envio[b-m6qnf7xyue] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.4;
}

    .mld-envio .material-symbols-outlined[b-m6qnf7xyue] {
        font-size: 1.15rem;
    }

.mld-envio-si[b-m6qnf7xyue] {
    background: #f0fdf4;
    color: #166534;
}

.mld-envio-no[b-m6qnf7xyue] {
    background: #fef2f2;
    color: #991b1b;
}

.mld-bloque[b-m6qnf7xyue] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px solid #f1f5f9;
}

.mld-bloque-titulo[b-m6qnf7xyue] {
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.mld-texto[b-m6qnf7xyue] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mld-tenue[b-m6qnf7xyue] {
    color: #9ca3af;
}

.mld-linea[b-m6qnf7xyue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

    .mld-linea .mld-input[b-m6qnf7xyue] {
        flex: 1 1 12rem;
    }

.mld-chips[b-m6qnf7xyue] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mld-chip[b-m6qnf7xyue] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
}

.mld-mini[b-m6qnf7xyue] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .mld-mini th[b-m6qnf7xyue] {
        text-align: left;
        font-weight: 800;
        color: #6b7280;
        padding: 0.3rem 0.4rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .mld-mini td[b-m6qnf7xyue] {
        padding: 0.3rem 0.4rem;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

/* BOTONES */

.mld-btn[b-m6qnf7xyue] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.4rem;
    padding: 0 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

    .mld-btn:hover:not(:disabled)[b-m6qnf7xyue] {
        background: #f8fafc;
    }

    .mld-btn:disabled[b-m6qnf7xyue] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mld-btn .material-symbols-outlined[b-m6qnf7xyue] {
        font-size: 1.1rem;
    }

.mld-btn-primario[b-m6qnf7xyue] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mld-btn-primario:hover:not(:disabled)[b-m6qnf7xyue] {
        background: #4338ca;
    }

.mld-btn-peligro[b-m6qnf7xyue] {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mld-btn-peligro:hover:not(:disabled)[b-m6qnf7xyue] {
        background: #b91c1c;
    }

.mld-icono-btn[b-m6qnf7xyue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .mld-icono-btn:hover[b-m6qnf7xyue] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* CONFIRMACIÓN DE LA BAJA */

.mld-modal-fondo[b-m6qnf7xyue] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.mld-modal[b-m6qnf7xyue] {
    width: min(32rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.1rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
}

    .mld-modal p[b-m6qnf7xyue] {
        margin: 0;
    }

.mld-modal-titulo[b-m6qnf7xyue] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mld-botones[b-m6qnf7xyue] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* VERIFICACIÓN: la insignia del último resultado (en la lista y en la ficha). Una verificación caducada se atenúa. */

.mld-lista[b-m6qnf7xyue]  .mld-chip-verificacion,
.mld-chip-verificacion[b-m6qnf7xyue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.mld-lista[b-m6qnf7xyue]  .mld-caducada,
.mld-caducada[b-m6qnf7xyue] {
    opacity: 0.55;
    border-style: dashed;
}

.mld-enlace[b-m6qnf7xyue] {
    color: #4338ca;
    font-weight: 700;
    text-decoration: none;
}

    .mld-enlace:hover[b-m6qnf7xyue] {
        text-decoration: underline;
    }

/* RESPONSIVE: con la ficha abierta, lo que ya dice la ficha sobra en la lista; al estrechar caen primero las
   columnas que menos dicen y la ficha baja debajo de la lista. */

.mld-rejilla.mld-con-ficha .mld-lista[b-m6qnf7xyue]  .mld-col-evento,
.mld-rejilla.mld-con-ficha .mld-lista[b-m6qnf7xyue]  .mld-col-noreenviar {
    display: none;
}

@media (max-width: 1400px) {
    .mld-rejilla.mld-con-ficha .mld-lista[b-m6qnf7xyue]  .mld-col-base,
    .mld-rejilla.mld-con-ficha .mld-lista[b-m6qnf7xyue]  .mld-col-verificacion {
        display: none;
    }
}

@media (max-width: 1150px) {
    .mld-rejilla.mld-con-ficha[b-m6qnf7xyue] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mld-barra[b-m6qnf7xyue] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mld-buscador[b-m6qnf7xyue] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .mld-lista[b-m6qnf7xyue]  .mld-col-base,
    .mld-lista[b-m6qnf7xyue]  .mld-col-evento,
    .mld-lista[b-m6qnf7xyue]  .mld-col-verificacion {
        display: none;
    }

    .mld-barra[b-m6qnf7xyue] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/DisenadorPlantillaMailing.razor.rz.scp.css */
/*
    Diseñador de plantillas del mailing. Hoja propia del componente (el CSS de Blazor tiene ámbito por
    componente). Solo se viste lo que pinta este componente —la barra de variables y el marco del lienzo—: el
    interior del lienzo lo dibuja GrapesJS con su propia hoja (lib/grapesjs/…/grapes.min.css) y aquí no se toca,
    así que no hace falta ::deep.
*/

.dpm[b-sk7fzp1mpf] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.dpm-barra[b-sk7fzp1mpf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    user-select: none;
}

.dpm-barra-titulo[b-sk7fzp1mpf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

    .dpm-barra-titulo .material-symbols-outlined[b-sk7fzp1mpf] {
        font-size: 18px;
        color: #4f46e5;
    }

.dpm-barra-ayuda[b-sk7fzp1mpf] {
    font-size: 12px;
    color: #6b7280;
}

.dpm-grupos[b-sk7fzp1mpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    flex-basis: 100%;
}

.dpm-grupo[b-sk7fzp1mpf] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.dpm-grupo-nombre[b-sk7fzp1mpf] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-right: 0.15rem;
}

.dpm-chip[b-sk7fzp1mpf] {
    padding: 0.15rem 0.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #ffffff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dpm-icono-ayuda[b-sk7fzp1mpf] {
    font-size: 15px;
    vertical-align: -3px;
}

    .dpm-chip:hover[b-sk7fzp1mpf] {
        background: #eef2ff;
    }

.dpm-lienzo-marco[b-sk7fzp1mpf] {
    position: relative;
    height: calc(100vh - 330px);
    min-height: 560px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.dpm-lienzo[b-sk7fzp1mpf] {
    width: 100%;
    height: 100%;
}

.dpm-cargando[b-sk7fzp1mpf],
.dpm-error[b-sk7fzp1mpf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    font-size: 13px;
    z-index: 2;
}

.dpm-cargando[b-sk7fzp1mpf] {
    color: #6b7280;
    background: #ffffff;
}

.dpm-error[b-sk7fzp1mpf] {
    color: #991b1b;
    background: #fef2f2;
}
/* _content/ErpPowergest/Presentation/Mailing/DocumentosMailingPage.razor.rz.scp.css */
/*
    Mailing · Enviar documentos por correo (el asistente por pasos). Los estilos de cada paso están en su sección y los
    comunes, en el marco (MarcoEnvioMailing): aquí, la barra de pasos, la rejilla (el paso a la izquierda, el recuento a la
    derecha) y los botones de avanzar.
*/

/* TODO EL ALTO. Con AnchoCompleto, PantallaMailing es una columna flex con suelo en la pantalla; de ahí hacia abajo cada
   envoltorio se queda con el alto sobrante hasta la tabla del paso: la de los documentos (paso 1) y la muestra de la
   revisión (paso 3). En los otros pasos no hay listado y el contenido mide lo suyo. */
.mld-pantalla[b-nznirf618b] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .mld-pantalla[b-nznirf618b]  .mlv-marco {
        flex: 1 1 auto;
    }

.mld-pasos[b-nznirf618b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mld-paso[b-nznirf618b] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.3rem;
    padding: 0 0.9rem 0 0.45rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

    .mld-paso:hover[b-nznirf618b] {
        background: #f8fafc;
    }

.mld-paso-activo[b-nznirf618b] {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #3730a3;
}

.mld-paso-numero[b-nznirf618b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.mld-paso-activo .mld-paso-numero[b-nznirf618b] {
    background: #4f46e5;
    color: #ffffff;
}

.mld-rejilla[b-nznirf618b] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    grid-template-rows: 1fr;
    gap: 1rem;
    align-items: start;
}

/* El paso se estira a todo el alto de la rejilla; el recuento, a su lado, sigue midiendo lo suyo. */
.mld-contenido[b-nznirf618b] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

/* El paso con listado: él, su sección y la caja de la tabla se quedan con el alto sobrante (los botones de avanzar
   quedan debajo, al pie). Lo que hay bajo la tabla en la revisión (los que faltan) sigue debajo, sin reordenar. */
.mld-lleno[b-nznirf618b],
.mld-lleno[b-nznirf618b]  .mlv-seccion,
.mld-lleno[b-nznirf618b]  .brv,
.mld-lleno[b-nznirf618b]  .mlv-tabla {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mld-lleno[b-nznirf618b] {
    gap: 0.9rem;
}

    /* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
    .mld-lleno[b-nznirf618b]  .mlv-tabla .tp-panel {
        min-height: auto;
    }

.mld-navegacion[b-nznirf618b] {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .mld-rejilla[b-nznirf618b] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/EditorCodigoMailing.razor.rz.scp.css */
/*
    Editor de código HTML de un correo: código y vista previa del servidor, lado a lado. Hoja propia (el CSS de Blazor tiene
    ámbito por componente). Solo el control del fichero del ZIP va con ::deep: lo pinta InputFile, otro componente, desde
    .ecm-fichero, que sí es de este.
*/

.ecm[b-kr1c0wiceu] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.ecm-barra[b-kr1c0wiceu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
}

.ecm-ayuda[b-kr1c0wiceu] {
    flex: 1 1 18rem;
    font-size: 12px;
    color: #6b7280;
}

    .ecm-ayuda code[b-kr1c0wiceu] {
        padding: 0 0.25rem;
        border-radius: 4px;
        background: #f1f5f9;
        color: #334155;
        font-size: 11.5px;
        white-space: nowrap;
    }

.ecm-btn[b-kr1c0wiceu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    padding: 0 0.8rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ecm-btn .material-symbols-outlined[b-kr1c0wiceu] {
        font-size: 18px;
    }

    .ecm-btn:hover:not(:disabled)[b-kr1c0wiceu] {
        background: #f8fafc;
    }

    .ecm-btn:disabled[b-kr1c0wiceu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ecm-btn-primario[b-kr1c0wiceu] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .ecm-btn-primario:hover:not(:disabled)[b-kr1c0wiceu] {
        background: #4338ca;
    }

.ecm-lados[b-kr1c0wiceu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.8rem;
    min-height: 520px;
}

.ecm-codigo[b-kr1c0wiceu],
.ecm-previa[b-kr1c0wiceu] {
    display: flex;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.ecm-area[b-kr1c0wiceu] {
    width: 100%;
    min-height: 520px;
    height: calc(100vh - 420px);
    padding: 0.8rem 0.9rem;
    border: none;
    outline: none;
    resize: vertical;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}

    .ecm-area[b-kr1c0wiceu]::placeholder {
        color: #94a3b8;
    }

.ecm-previa[b-kr1c0wiceu] {
    justify-content: center;
    background: #f1f5f9;
}

.ecm-iframe[b-kr1c0wiceu] {
    width: 100%;
    min-height: 520px;
    border: none;
    background: #ffffff;
}

.ecm-previa-vacia[b-kr1c0wiceu] {
    align-self: center;
    padding: 1rem;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* Ventana «Pegar código HTML» */

.ecm-modal-fondo[b-kr1c0wiceu] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
}

.ecm-modal[b-kr1c0wiceu] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(960px, 100%);
    max-height: calc(100vh - 3rem);
    padding: 1.1rem 1.2rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.ecm-modal-titulo[b-kr1c0wiceu] {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.ecm-modal-texto[b-kr1c0wiceu] {
    margin: 0;
    font-size: 13px;
    color: #475569;
}

.ecm-area-pegar[b-kr1c0wiceu] {
    min-height: 360px;
    height: 55vh;
    border-radius: 8px;
}

.ecm-modal-estrecha[b-kr1c0wiceu] {
    width: min(34rem, 100%);
}

/* «Elegir el ZIP…»: la etiqueta hace de botón y el control del fichero queda invisible encima (se puede pulsar y soltar). */
.ecm-fichero[b-kr1c0wiceu] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    align-self: flex-start;
    min-height: 2.4rem;
    padding: 0 1rem;
    border: 1px dashed #818cf8;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
}

.ecm-fichero-ocupado[b-kr1c0wiceu] {
    opacity: 0.7;
    cursor: progress;
}

    .ecm-fichero[b-kr1c0wiceu]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.ecm-botones[b-kr1c0wiceu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 1100px) {
    .ecm-lados[b-kr1c0wiceu] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/EditorCriteriosMailing.razor.rz.scp.css */
/*
    Mailing · El editor de criterios (el de un envío y el de un segmento). Hoja propia: el CSS de Blazor tiene ámbito por
    componente, y el de la página que lo usa no le llega. Sin Templates de Syncfusion dentro: los selectores van directos.
*/

.ecm-nota[b-vmoshxus36] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.ecm-chips[b-vmoshxus36] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ecm-chip[b-vmoshxus36] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.35rem 0.25rem 0.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #312e81;
    font-size: 12px;
}

/* La actividad filtra a los demás: se distingue de un vistazo. */
.ecm-chip-actividad[b-vmoshxus36] {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #7c2d12;
}

.ecm-origen[b-vmoshxus36] {
    display: inline-flex;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: #1e293b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.ecm-chip-actividad .ecm-origen[b-vmoshxus36] {
    background: #9a3412;
}

.ecm-quitar[b-vmoshxus36] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .ecm-quitar:hover:not(:disabled)[b-vmoshxus36] {
        background: rgba(15, 23, 42, 0.08);
        color: #1f2937;
    }

    .ecm-quitar .material-symbols-outlined[b-vmoshxus36] {
        font-size: 16px;
    }

.ecm-nuevo[b-vmoshxus36] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.ecm-input[b-vmoshxus36] {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    min-width: 0;
}

.ecm-operador[b-vmoshxus36] {
    align-self: flex-start;
    max-width: 16rem;
}

.ecm-fila[b-vmoshxus36] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.ecm-fecha[b-vmoshxus36] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .ecm-fecha input[b-vmoshxus36] {
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
    }

.ecm-opciones[b-vmoshxus36] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.ecm-casilla[b-vmoshxus36] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

    .ecm-casilla input[b-vmoshxus36] {
        width: 1rem;
        height: 1rem;
        accent-color: #4f46e5;
    }

.ecm-botones[b-vmoshxus36] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.ecm-btn[b-vmoshxus36] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .ecm-btn:disabled[b-vmoshxus36] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ecm-btn-primario[b-vmoshxus36] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .ecm-btn-primario:hover:not(:disabled)[b-vmoshxus36] {
        background: #4338ca;
    }


/* «A quién dejamos fuera»: en rojo suave, para que no se confunda nunca con lo que mete gente. */
.ecm-chip-fuera[b-vmoshxus36] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
}

.ecm-chip-fuera .ecm-origen[b-vmoshxus36] {
    background: #b91c1c;
}

.ecm-nuevo-fuera[b-vmoshxus36] {
    border-color: #fecaca;
    background: #fffafa;
}

.ecm-btn-fuera[b-vmoshxus36] {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}

    .ecm-btn-fuera:hover:not(:disabled)[b-vmoshxus36] {
        background: #991b1b;
    }
/* _content/ErpPowergest/Presentation/Mailing/EditorTextoMailing.razor.rz.scp.css */
/*
    Editor de texto de un correo. Hoja propia (el CSS de Blazor tiene ámbito por componente). Lo que pinta el editor de
    Syncfusion no lleva el atributo de ámbito, así que las reglas de su contenido (las pastillas de las variables) cuelgan
    de ::deep desde el marco .etm, que SÍ es un antepasado real con ámbito. No hay plantillas <Template> de Syncfusion aquí
    (ahí ::deep no casa: ver la memoria del puesto).
*/

.etm[b-jir7oxifn0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.etm-barra[b-jir7oxifn0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #fafaff;
}

.etm-barra-titulo[b-jir7oxifn0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 800;
    color: #4338ca;
}

    .etm-barra-titulo .material-symbols-outlined[b-jir7oxifn0] {
        font-size: 18px;
    }

.etm-variables[b-jir7oxifn0] {
    min-width: 14rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12.5px;
    font-weight: 700;
}

.etm-btn[b-jir7oxifn0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #ffffff;
    color: #3730a3;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .etm-btn .material-symbols-outlined[b-jir7oxifn0] {
        font-size: 17px;
    }

    .etm-btn:hover[b-jir7oxifn0] {
        background: #eef2ff;
    }

.etm-ayuda[b-jir7oxifn0] {
    flex: 1 1 18rem;
    font-size: 12px;
    color: #6b7280;
}

.etm-editor[b-jir7oxifn0] {
    min-width: 0;
}

    .etm-editor[b-jir7oxifn0]  .e-richtexteditor {
        border-radius: 10px;
    }

    /* El contenido como se leerá en el correo: tipografía neutra y el ancho de la columna del correo. */
    .etm-editor[b-jir7oxifn0]  .e-rte-content .e-content {
        max-width: 600px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.55;
        color: #1f2937;
    }

    .etm-editor[b-jir7oxifn0]  .e-content img {
        max-width: 100%;
        height: auto;
    }

    /* Las pastillas: una variable (azul) o una etiqueta de control (ámbar), atómicas; una condición sobre un trozo, subrayada. */
    .etm-editor[b-jir7oxifn0]  .erp-var,
    .etm-editor[b-jir7oxifn0]  .erp-control {
        display: inline-block;
        padding: 0 7px;
        margin: 0 1px;
        border: 1px solid #c7d2fe;
        border-radius: 9px;
        background: #e0e7ff;
        color: #3730a3;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 0.85em;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
        vertical-align: baseline;
        cursor: default;
        user-select: none;
    }

    .etm-editor[b-jir7oxifn0]  .erp-control {
        border-color: #fde68a;
        background: #fef3c7;
        color: #92400e;
    }

    .etm-editor[b-jir7oxifn0]  .erp-si {
        border-bottom: 2px dotted #d97706;
        background: rgba(245, 158, 11, 0.1);
    }
/* _content/ErpPowergest/Presentation/Mailing/ElegirGrupoMailing.razor.rz.scp.css */
/* Mailing · «¿A qué grupo?». Hoja propia: el CSS de Blazor tiene ámbito por componente. */

.meg-fondo[b-nl2iptj7cx] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.meg-modal[b-nl2iptj7cx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(30rem, 100%);
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

.meg-titulo[b-nl2iptj7cx] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.meg-texto[b-nl2iptj7cx] {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.45;
}

.meg-campo[b-nl2iptj7cx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .meg-campo input[b-nl2iptj7cx],
    .meg-campo select[b-nl2iptj7cx] {
        width: 100%;
        min-height: 2.25rem;
        padding: 0.4rem 0.7rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: #1f2937;
        background: #ffffff;
        outline: none;
    }

        .meg-campo input:focus[b-nl2iptj7cx],
        .meg-campo select:focus[b-nl2iptj7cx] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
        }

.meg-botones[b-nl2iptj7cx] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.meg-btn[b-nl2iptj7cx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .meg-btn:hover:not(:disabled)[b-nl2iptj7cx] {
        background: #f8fafc;
    }

    .meg-btn:disabled[b-nl2iptj7cx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.meg-btn-primario[b-nl2iptj7cx] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .meg-btn-primario:hover:not(:disabled)[b-nl2iptj7cx] {
        background: #4338ca;
    }
/* _content/ErpPowergest/Presentation/Mailing/ExplorarMailingPage.razor.rz.scp.css */
/*
    Mailing · Explorar. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se vería sin estilo.
    Los editores de criterios y la ventana «¿A qué grupo?» llevan la suya; lo que esta página pone dentro de esa ventana
    (ChildContent) se escribe aquí y le llega el ámbito de esta página.

    Rejilla: los subtotales van PRIMERO en el marcado (en el móvil salen encima, plegados) y la rejilla los coloca a la
    derecha en pantalla ancha.
*/

/* Todo el ancho y todo el alto (AnchoCompleto en el marco): el cuerpo, la rejilla y la tarjeta de personas se
   quedan con el alto que sobra; los subtotales siguen arriba, fijos al desplazar. */
.mlx-cuerpo[b-ch10nf66aa] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

/* Descendiente y no hijo: en medio va el <div> de BloqueTeclado, que sin Clase no es caja (display: contents). */
.mlx-cuerpo .mlx-rejilla[b-ch10nf66aa] {
    flex: 1 1 auto;
    align-items: stretch;
}

.mlx-contenido > :last-child[b-ch10nf66aa] {
    flex: 1 1 auto;
}

.mlx-aviso[b-ch10nf66aa] {
    padding: 0.75rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
}

.mlx-aviso-error[b-ch10nf66aa] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.mlx-hecho[b-ch10nf66aa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.9rem;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
}

    .mlx-hecho a[b-ch10nf66aa] {
        font-weight: 750;
        color: #15803d;
    }

    .mlx-hecho .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 18px;
    }

.mlx-cerrar[b-ch10nf66aa] {
    margin-left: auto;
    display: inline-flex;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mlx-calculando[b-ch10nf66aa] {
    padding: 1rem;
}

/* REJILLA */

.mlx-rejilla[b-ch10nf66aa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas: "contenido subtotales";
    gap: 1rem;
    align-items: start;
    transition: opacity 0.15s;
}

.mlx-ocupado[b-ch10nf66aa] {
    opacity: 0.7;
    cursor: progress;
}

.mlx-contenido[b-ch10nf66aa] {
    grid-area: contenido;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlx-seccion[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlx-subtitulo[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.mlx-nota[b-ch10nf66aa] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlx-suave[b-ch10nf66aa] {
    color: #9ca3af;
    font-size: 12px;
}

/* FILTROS: «Quiénes entran» y «A quién dejamos fuera», lado a lado */

.mlx-filtros[b-ch10nf66aa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mlx-filtro[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.mlx-filtro-fuera[b-ch10nf66aa] {
    padding-left: 1rem;
    border-left: 1px solid #eef2f7;
}

.mlx-paso[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.mlx-paso-fuera[b-ch10nf66aa] {
    background: #b91c1c;
}

.mlx-opcional[b-ch10nf66aa] {
    font-weight: 500;
    color: #9ca3af;
}

.mlx-resumen[b-ch10nf66aa] {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    line-height: 1.5;
}

    .mlx-resumen .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 18px;
        color: #64748b;
    }

/* BARRA: búsqueda, situación vista, marcadas y órdenes en bloque */

.mlx-barra[b-ch10nf66aa],
.mlx-marcados[b-ch10nf66aa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mlx-buscador[b-ch10nf66aa] {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

.mlx-lupa[b-ch10nf66aa] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.mlx-input[b-ch10nf66aa] {
    min-height: 2.1rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

    .mlx-input:focus[b-ch10nf66aa] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.mlx-input-busqueda[b-ch10nf66aa] {
    width: 100%;
    padding-left: 2rem;
}

.mlx-chip-vista[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}

    .mlx-chip-vista button[b-ch10nf66aa] {
        display: inline-flex;
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .mlx-chip-vista .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 16px;
    }

.mlx-salieron[b-ch10nf66aa] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12.5px;
}

    .mlx-salieron .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 18px;
    }

.mlx-marcados[b-ch10nf66aa] {
    padding: 0.5rem 0.6rem;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #f8fafc;
}

.mlx-cuantas[b-ch10nf66aa] {
    font-size: 12.5px;
    font-weight: 750;
    color: #334155;
    margin-right: 0.25rem;
}

.mlx-orden-bloque[b-ch10nf66aa] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.mlx-campo[b-ch10nf66aa] {
    display: inline-flex;
}

    .mlx-campo .mlx-input[b-ch10nf66aa] {
        min-height: 1.9rem;
        font-size: 12.5px;
    }

/* TABLA */

.mlx-tabla-marco[b-ch10nf66aa] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.mlx-tabla[b-ch10nf66aa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: #1f2937;
}

    .mlx-tabla th[b-ch10nf66aa] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0.45rem 0.55rem;
        border-bottom: 1px solid #e5e7eb;
        background: #f8fafc;
        text-align: left;
        font-size: 11.5px;
        font-weight: 800;
        color: #475569;
        white-space: nowrap;
    }

    .mlx-tabla td[b-ch10nf66aa] {
        padding: 0.45rem 0.55rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

    .mlx-tabla tbody tr:hover td[b-ch10nf66aa] {
        background: #fafbff;
    }

.mlx-fila-marcada td[b-ch10nf66aa] {
    background: #eef2ff;
}

.mlx-col-marca[b-ch10nf66aa] {
    width: 2rem;
    text-align: center;
}

.mlx-col-codigo[b-ch10nf66aa] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mlx-col-correos[b-ch10nf66aa] {
    min-width: 10rem;
}

.mlx-col-situacion[b-ch10nf66aa] {
    white-space: nowrap;
}

.mlx-col-etiquetas[b-ch10nf66aa] {
    min-width: 13rem;
}

/* El código y la población debajo del nombre: solo cuando sus columnas no caben. */
.mlx-extra[b-ch10nf66aa] {
    display: none;
}

.mlx-orden[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

    .mlx-orden .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 15px;
        color: #cbd5e1;
    }

.mlx-orden-activo[b-ch10nf66aa] {
    color: #3730a3;
}

    .mlx-orden-activo .material-symbols-outlined[b-ch10nf66aa] {
        color: #4f46e5;
    }

.mlx-nombre[b-ch10nf66aa] {
    font-weight: 700;
}

.mlx-tipo[b-ch10nf66aa] {
    font-size: 11px;
    color: #94a3b8;
}

.mlx-correo[b-ch10nf66aa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
    word-break: break-all;
}

.mlx-correo-motivo[b-ch10nf66aa] {
    font-size: 11px;
    color: #b45309;
}

.mlx-situacion[b-ch10nf66aa] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.mlx-situacion-llega[b-ch10nf66aa] {
    background: #dcfce7;
    color: #166534;
}

.mlx-situacion-sin[b-ch10nf66aa] {
    background: #f1f5f9;
    color: #64748b;
}

.mlx-situacion-fuera[b-ch10nf66aa] {
    background: #fef3c7;
    color: #92400e;
}

/* ETIQUETAS DE LA FILA: chips que se quitan y «+» que añade */

.mlx-chips[b-ch10nf66aa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.mlx-chip[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.1rem 0.15rem 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .mlx-chip:not(:has(button))[b-ch10nf66aa] {
        padding-right: 0.5rem;
    }

.mlx-chip-quitar[b-ch10nf66aa],
.mlx-chip-ok[b-ch10nf66aa],
.mlx-chip-mas[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .mlx-chip-quitar .material-symbols-outlined[b-ch10nf66aa],
    .mlx-chip-ok .material-symbols-outlined[b-ch10nf66aa],
    .mlx-chip-mas .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 14px;
    }

    .mlx-chip-quitar:hover:not(:disabled)[b-ch10nf66aa] {
        background: #c7d2fe;
        color: #b91c1c;
    }

    .mlx-chip-ok[b-ch10nf66aa] {
        color: #166534;
    }

.mlx-chip-mas[b-ch10nf66aa] {
    border: 1px dashed #a5b4fc;
    color: #4f46e5;
}

    .mlx-chip-mas:hover:not(:disabled)[b-ch10nf66aa] {
        background: #eef2ff;
    }

    .mlx-chip-quitar:disabled[b-ch10nf66aa],
    .mlx-chip-ok:disabled[b-ch10nf66aa],
    .mlx-chip-mas:disabled[b-ch10nf66aa] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.mlx-chip-nueva[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.mlx-input-chip[b-ch10nf66aa] {
    width: 9rem;
    min-height: 1.6rem;
    padding: 0.1rem 0.45rem;
    font-size: 12px;
}

.mlx-vacio[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #64748b;
}

    .mlx-vacio .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 32px;
        color: #cbd5e1;
    }

.mlx-vacio-titulo[b-ch10nf66aa] {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
}

.mlx-paginador[b-ch10nf66aa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mlx-paginador-nav[b-ch10nf66aa] {
    display: flex;
    gap: 0.3rem;
}

/* SUBTOTALES */

.mlx-subtotales[b-ch10nf66aa] {
    grid-area: subtotales;
    align-self: start;
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlx-plegar[b-ch10nf66aa] {
    display: none;
}

.mlx-sub-cuerpo[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.mlx-cifra[b-ch10nf66aa] {
    font-size: 13px;
    color: #374151;
}

.mlx-cifra-grande[b-ch10nf66aa] {
    font-size: 15px;
}

    .mlx-cifra-grande b[b-ch10nf66aa] {
        font-size: 26px;
        font-weight: 850;
        color: #3730a3;
    }

.mlx-cifra-fuerte[b-ch10nf66aa] {
    font-weight: 800;
    color: #166534;
}

.mlx-cifra-suave[b-ch10nf66aa] {
    color: #6b7280;
}

.mlx-lista-marco[b-ch10nf66aa] {
    max-height: 26rem;
    overflow-y: auto;
}

.mlx-lista[b-ch10nf66aa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .mlx-lista th[b-ch10nf66aa] {
        position: sticky;
        top: 0;
        padding: 0.25rem 0.35rem;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
    }

    .mlx-lista td[b-ch10nf66aa] {
        padding: 0.3rem 0.35rem;
        border-bottom: 1px solid #eef1f5;
    }

.mlx-lista[data-testid="explorar-por-situacion"] tr[b-ch10nf66aa] {
    cursor: pointer;
}

    .mlx-lista[data-testid="explorar-por-situacion"] tr:hover td[b-ch10nf66aa] {
        background: #f8fafc;
    }

.mlx-lista-activa td[b-ch10nf66aa] {
    background: #eef2ff;
    font-weight: 700;
}

/* La etiqueta se queda todo el ancho que dejan las cifras y los botones (que no se parten). */
.mlx-lista-etiqueta[b-ch10nf66aa] {
    width: 100%;
    overflow-wrap: anywhere;
}

.mlx-numero[b-ch10nf66aa] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}

.mlx-lista-acciones[b-ch10nf66aa] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.mlx-guardar[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.15rem 0 0.35rem;
}

    .mlx-guardar .mlx-btn[b-ch10nf66aa] {
        justify-content: flex-start;
    }

.mlx-icono[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #4f46e5;
    cursor: pointer;
}

    .mlx-icono .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 16px;
    }

    .mlx-icono:hover:not(:disabled)[b-ch10nf66aa] {
        border-color: #c7d2fe;
        background: #eef2ff;
    }

    .mlx-icono:disabled[b-ch10nf66aa] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.mlx-icono-fuera[b-ch10nf66aa] {
    color: #b91c1c;
}

    .mlx-icono-fuera:hover:not(:disabled)[b-ch10nf66aa] {
        border-color: #fecaca;
        background: #fef2f2;
    }

.mlx-icono-nota[b-ch10nf66aa] {
    font-size: 14px;
    vertical-align: -3px;
}

/* BOTONES */

.mlx-botones[b-ch10nf66aa] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.mlx-btn[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlx-btn:hover:not(:disabled)[b-ch10nf66aa] {
        background: #f8fafc;
    }

    .mlx-btn:disabled[b-ch10nf66aa] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlx-btn .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 18px;
    }

.mlx-btn-pequeno[b-ch10nf66aa] {
    min-height: 1.9rem;
    padding: 0 0.65rem;
    font-size: 12px;
}

    .mlx-btn-pequeno .material-symbols-outlined[b-ch10nf66aa] {
        font-size: 16px;
    }

.mlx-btn-primario[b-ch10nf66aa] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlx-btn-primario:hover:not(:disabled)[b-ch10nf66aa] {
        background: #4338ca;
    }

/* VENTANAS */

.mlx-modal-fondo[b-ch10nf66aa] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlx-modal[b-ch10nf66aa] {
    width: min(32rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
}

    .mlx-modal p[b-ch10nf66aa] {
        margin: 0 0 0.75rem;
    }

.mlx-modal-titulo[b-ch10nf66aa] {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.mlx-campo-modal[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .mlx-campo-modal input[b-ch10nf66aa],
    .mlx-campo-modal select[b-ch10nf66aa],
    .mlx-campo-modal textarea[b-ch10nf66aa] {
        width: 100%;
        padding: 0.5rem 0.7rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: #1f2937;
        background: #ffffff;
        outline: none;
    }

        .mlx-campo-modal input:focus[b-ch10nf66aa],
        .mlx-campo-modal select:focus[b-ch10nf66aa],
        .mlx-campo-modal textarea:focus[b-ch10nf66aa] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
        }

.mlx-texto-ventana[b-ch10nf66aa] {
    display: block;
    margin-bottom: 0.6rem;
}

.mlx-alcances[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mlx-alcance[b-ch10nf66aa] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: #1f2937;
}

.mlx-opciones-boletin[b-ch10nf66aa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mlx-opcion[b-ch10nf66aa] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    font: inherit;
    color: #1f2937;
    cursor: pointer;
}

    .mlx-opcion > span:last-child[b-ch10nf66aa] {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .mlx-opcion .material-symbols-outlined[b-ch10nf66aa] {
        color: #4f46e5;
    }

    .mlx-opcion:hover:not(:disabled)[b-ch10nf66aa] {
        border-color: #a5b4fc;
        background: #f8faff;
    }

    .mlx-opcion:disabled[b-ch10nf66aa] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* PANTALLA MEDIA: el código y la población pasan debajo del nombre, para que las etiquetas se vean sin desplazar */

@media (max-width: 1400px) {
    .mlx-col-codigo[b-ch10nf66aa],
    .mlx-col-detalle[b-ch10nf66aa] {
        display: none;
    }

    .mlx-extra[b-ch10nf66aa] {
        display: inline;
    }
}

/* PANTALLA ESTRECHA: los subtotales encima, plegados */

@media (max-width: 1100px) {
    .mlx-rejilla[b-ch10nf66aa] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "subtotales"
            "contenido";
    }

    .mlx-subtotales[b-ch10nf66aa] {
        position: static;
    }

    .mlx-plegar[b-ch10nf66aa] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 1rem;
        border: none;
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .mlx-plegar-resumen[b-ch10nf66aa] {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        color: #475569;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mlx-sub-cuerpo[b-ch10nf66aa] {
        display: none;
        padding-top: 0;
    }

    .mlx-sub-abierto[b-ch10nf66aa] {
        display: flex;
    }

    .mlx-solo-ancho[b-ch10nf66aa] {
        display: none;
    }

    .mlx-filtros[b-ch10nf66aa] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlx-filtro-fuera[b-ch10nf66aa] {
        padding-left: 0;
        padding-top: 0.9rem;
        border-left: none;
        border-top: 1px solid #eef2f7;
    }

    .mlx-orden-bloque[b-ch10nf66aa] {
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    .mlx-seccion[b-ch10nf66aa] {
        padding: 0.75rem;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Fichas/AccionesMailingLista.razor.rz.scp.css */
/* Mailing · la barra de la selección en las listas de contactos, clientes y proveedores. Hoja propia: el CSS de Blazor tiene
   ámbito por componente. */

.mfl-barra[b-lsuxdp7lcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    color: #374151;
}

.mfl-casilla[b-lsuxdp7lcu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0;
}

    .mfl-casilla input[b-lsuxdp7lcu] {
        width: 1rem;
        height: 1rem;
        accent-color: #4f46e5;
    }

.mfl-cuantos[b-lsuxdp7lcu] {
    color: #6b7280;
}

.mfl-hueco[b-lsuxdp7lcu] {
    flex: 1 1 auto;
}

.mfl-enlace[b-lsuxdp7lcu] {
    padding: 0;
    border: none;
    background: none;
    color: #4f46e5;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.mfl-btn[b-lsuxdp7lcu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    padding: 0 0.85rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mfl-btn:hover:not(:disabled)[b-lsuxdp7lcu] {
        background: #f1f5f9;
    }

    .mfl-btn:disabled[b-lsuxdp7lcu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mfl-btn .material-symbols-outlined[b-lsuxdp7lcu] {
        font-size: 1.1rem;
    }

.mfl-btn-pequeno[b-lsuxdp7lcu] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mfl-btn-primario[b-lsuxdp7lcu] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mfl-btn-primario:hover:not(:disabled)[b-lsuxdp7lcu] {
        background: #4338ca;
    }

@media (max-width: 640px) {
    .mfl-hueco[b-lsuxdp7lcu] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/Fichas/SeccionMailingFicha.razor.rz.scp.css */
/* Mailing · el apartado «Mailing» de una ficha (contacto, cliente, proveedor). Hoja propia: el CSS de Blazor tiene ámbito por
   componente, y la ficha que lo aloja no lo alcanza. */

.mff[b-zhlcy9j9q0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 13px;
    color: #374151;
}

.mff-cargando[b-zhlcy9j9q0],
.mff-tenue[b-zhlcy9j9q0] {
    color: #6b7280;
}

.mff-aviso[b-zhlcy9j9q0] {
    padding: 0.6rem 0.8rem;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
}

.mff-cabecera[b-zhlcy9j9q0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mff-titulo[b-zhlcy9j9q0] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.mff-seccion[b-zhlcy9j9q0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.mff-fila-titulo[b-zhlcy9j9q0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mff-subtitulo[b-zhlcy9j9q0] {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}

.mff-tabla[b-zhlcy9j9q0] {
    width: 100%;
    border-collapse: collapse;
}

    .mff-tabla th[b-zhlcy9j9q0] {
        padding: 0.35rem 0.5rem;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        font-size: 12px;
        font-weight: 800;
        color: #6b7280;
    }

    .mff-tabla td[b-zhlcy9j9q0] {
        padding: 0.45rem 0.5rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .mff-tabla a[b-zhlcy9j9q0] {
        color: #4f46e5;
        font-weight: 700;
        text-decoration: none;
    }

        .mff-tabla a:hover[b-zhlcy9j9q0] {
            text-decoration: underline;
        }

.mff-num[b-zhlcy9j9q0] {
    text-align: right;
}

.mff-fecha[b-zhlcy9j9q0] {
    white-space: nowrap;
}

.mff-antigua td[b-zhlcy9j9q0] {
    color: #9ca3af;
}

.mff-si[b-zhlcy9j9q0] {
    color: #047857;
}

.mff-no[b-zhlcy9j9q0] {
    color: #b91c1c;
}

.mff-calidad-baja[b-zhlcy9j9q0] {
    color: #b91c1c;
    font-weight: 800;
}

.mff-marca[b-zhlcy9j9q0] {
    margin-left: 0.3rem;
    font-size: 1rem;
    vertical-align: middle;
    color: #b91c1c;
}

.mff-chip[b-zhlcy9j9q0] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

    .mff-chip .material-symbols-outlined[b-zhlcy9j9q0] {
        font-size: 0.9rem;
    }

.mff-verde[b-zhlcy9j9q0] {
    background: #dcfce7;
    color: #166534;
}

.mff-naranja[b-zhlcy9j9q0] {
    background: #ffedd5;
    color: #9a3412;
}

.mff-rojo[b-zhlcy9j9q0] {
    background: #fee2e2;
    color: #991b1b;
}

.mff-gris[b-zhlcy9j9q0] {
    background: #f1f5f9;
    color: #475569;
}

.mff-apagada[b-zhlcy9j9q0] {
    background: #f8fafc;
    color: #cbd5e1;
}

.mff-marcas[b-zhlcy9j9q0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.mff-grupos[b-zhlcy9j9q0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mff-grupo[b-zhlcy9j9q0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: #f8fafc;
}

.mff-archivado .mff-grupo-nombre[b-zhlcy9j9q0] {
    color: #9ca3af;
}

.mff-grupo-nombre[b-zhlcy9j9q0] {
    color: #4f46e5;
    font-weight: 800;
    text-decoration: none;
}

.mff-quitar[b-zhlcy9j9q0] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.1rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: #6b7280;
    cursor: pointer;
}

    .mff-quitar:hover:not(:disabled)[b-zhlcy9j9q0] {
        background: #fee2e2;
        color: #991b1b;
    }

.mff-btn[b-zhlcy9j9q0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.2rem;
    padding: 0 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mff-btn:hover:not(:disabled)[b-zhlcy9j9q0] {
        background: #f1f5f9;
    }

    .mff-btn:disabled[b-zhlcy9j9q0] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mff-btn .material-symbols-outlined[b-zhlcy9j9q0] {
        font-size: 1.1rem;
    }

.mff-btn-pequeno[b-zhlcy9j9q0] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mff-btn-primario[b-zhlcy9j9q0] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mff-btn-primario:hover:not(:disabled)[b-zhlcy9j9q0] {
        background: #4338ca;
    }

.mff-rotulo-movil[b-zhlcy9j9q0] {
    display: none;
}

@media (max-width: 720px) {
    .mff-tabla thead[b-zhlcy9j9q0] {
        display: none;
    }

    .mff-rotulo-movil[b-zhlcy9j9q0] {
        display: inline;
        color: #6b7280;
    }

    .mff-tabla tr[b-zhlcy9j9q0] {
        display: block;
        padding: 0.4rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .mff-tabla td[b-zhlcy9j9q0] {
        display: block;
        padding: 0.1rem 0;
        border: none;
    }

    .mff-num[b-zhlcy9j9q0] {
        text-align: left;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/GaleriaImagenesMailing.razor.rz.scp.css */
/* Mailing · la galería de imágenes subidas. Hoja propia: el CSS de Blazor tiene ámbito por componente. */

.gim-fondo[b-rce1owb2mc] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.gim-modal[b-rce1owb2mc] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(56rem, 100%);
    max-height: calc(100vh - 2rem);
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
    overflow: hidden;
}

.gim-cabecera[b-rce1owb2mc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gim-titulo[b-rce1owb2mc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

    .gim-titulo .material-symbols-outlined[b-rce1owb2mc] {
        color: #4f46e5;
    }

.gim-icono-btn[b-rce1owb2mc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

    .gim-icono-btn:hover[b-rce1owb2mc] {
        background: #f3f4f6;
    }

.gim-nota[b-rce1owb2mc] {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
}

.gim-error[b-rce1owb2mc] {
    padding: 0.55rem 0.75rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12.5px;
}

.gim-vacio[b-rce1owb2mc] {
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
}

.gim-rejilla[b-rce1owb2mc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0.1rem;
    list-style: none;
    overflow-y: auto;
    min-height: 0;
}

.gim-imagen[b-rce1owb2mc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gim-miniatura[b-rce1owb2mc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.5rem;
    padding: 0.3rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb repeating-conic-gradient(#f3f4f6 0 25%, #ffffff 0 50%) 50% / 16px 16px;
    cursor: pointer;
}

    .gim-miniatura:hover:not(:disabled)[b-rce1owb2mc] {
        border-color: #4f46e5;
        box-shadow: 0 0 0 0.18rem rgba(79, 70, 229, 0.15);
    }

    .gim-miniatura img[b-rce1owb2mc] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gim-nombre[b-rce1owb2mc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
}

.gim-detalle[b-rce1owb2mc] {
    font-size: 11px;
    color: #6b7280;
}

.gim-borrar[b-rce1owb2mc] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    align-self: flex-start;
    padding: 0.1rem 0.35rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b91c1c;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

    .gim-borrar .material-symbols-outlined[b-rce1owb2mc] {
        font-size: 15px;
    }

    .gim-borrar:hover:not(:disabled)[b-rce1owb2mc] {
        background: #fef2f2;
    }

.gim-confirmar[b-rce1owb2mc] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 11.5px;
    font-weight: 700;
    color: #991b1b;
}

.gim-paginas[b-rce1owb2mc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.gim-cuantas[b-rce1owb2mc] {
    margin-right: auto;
    font-size: 12px;
    color: #6b7280;
}

.gim-btn[b-rce1owb2mc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .gim-btn .material-symbols-outlined[b-rce1owb2mc] {
        font-size: 18px;
    }

    .gim-btn:hover:not(:disabled)[b-rce1owb2mc] {
        background: #f8fafc;
    }

    .gim-btn:disabled[b-rce1owb2mc] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.gim-btn-peligro[b-rce1owb2mc] {
    min-height: 1.6rem;
    padding: 0 0.55rem;
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .gim-btn-peligro:hover:not(:disabled)[b-rce1owb2mc] {
        background: #b91c1c;
    }

@media (max-width: 640px) {
    .gim-rejilla[b-rce1owb2mc] {
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    }

    .gim-miniatura[b-rce1owb2mc] {
        height: 6rem;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/GrupoMailingPage.razor.rz.scp.css */
/*
    Mailing · La ficha de un grupo. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla de miembros la pinta <TablaPaginada> (componente hijo): lo que se pone a sus celdas va con
    ::deep desde un elemento de esta página.
*/

.mlgf-cuerpo[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlgf-aviso[b-8yhrwkaoos] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* REJILLA: la ficha y sus miembros a la izquierda, el recuento a la derecha */

.mlgf-rejilla[b-8yhrwkaoos] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1rem;
    align-items: start;
}

.mlgf-contenido[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlgf-seccion[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlgf-subtitulo[b-8yhrwkaoos] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.mlgf-archivado[b-8yhrwkaoos] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.mlgf-campo[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .mlgf-campo input[b-8yhrwkaoos],
    .mlgf-campo textarea[b-8yhrwkaoos] {
        width: 100%;
        padding: 0.5rem 0.7rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: #1f2937;
        background: #ffffff;
        outline: none;
    }

        .mlgf-campo input:focus[b-8yhrwkaoos],
        .mlgf-campo textarea:focus[b-8yhrwkaoos] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
        }

.mlgf-opciones[b-8yhrwkaoos] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.mlgf-opcion[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mlgf-etiqueta[b-8yhrwkaoos] {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.mlgf-casilla[b-8yhrwkaoos] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

    .mlgf-casilla input[b-8yhrwkaoos] {
        width: 1rem;
        height: 1rem;
        accent-color: #4f46e5;
    }

.mlgf-nota[b-8yhrwkaoos] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* MIEMBROS */

.mlgf-anadir[b-8yhrwkaoos] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.mlgf-fila[b-8yhrwkaoos] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

    .mlgf-fila .mlgf-input[b-8yhrwkaoos] {
        flex: 1 1 14rem;
    }

.mlgf-input[b-8yhrwkaoos] {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    min-width: 0;
}

.mlgf-fila .mlgf-input-tipo[b-8yhrwkaoos] {
    flex: 0 1 14rem;
}

.mlgf-sugerencias[b-8yhrwkaoos] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .mlgf-sugerencias li[b-8yhrwkaoos] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.5rem;
        border: 1px solid #eef1f5;
        border-radius: 8px;
        background: #ffffff;
        font-size: 12px;
    }

.mlgf-origen[b-8yhrwkaoos] {
    display: inline-flex;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: #1e293b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mlgf-nombre[b-8yhrwkaoos] {
    font-weight: 700;
    color: #1f2937;
}

.mlgf-dato[b-8yhrwkaoos] {
    flex: 1 1 auto;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlgf-tabla[b-8yhrwkaoos] {
    min-width: 0;
}

.mlgf-tabla[b-8yhrwkaoos]  .tp-panel {
    min-height: auto;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-nombre {
    font-weight: 700;
    color: #1f2937;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-dato {
    color: #6b7280;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-nota-fila {
    display: block;
    font-size: 11px;
    color: #92400e;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-nota-mal {
    color: #b91c1c;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-tipo {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-tipo-contacto {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-tipo-ficha {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-tipo-direccion {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mlgf-tabla[b-8yhrwkaoos]  .mlgf-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .mlgf-tabla[b-8yhrwkaoos]  .mlgf-quitar:hover:not(:disabled) {
        background: rgba(15, 23, 42, 0.08);
        color: #b91c1c;
    }

    .mlgf-tabla[b-8yhrwkaoos]  .mlgf-quitar .material-symbols-outlined {
        font-size: 18px;
    }

/* RECUENTO */

.mlgf-recuento[b-8yhrwkaoos] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
}

.mlgf-cifra[b-8yhrwkaoos] {
    font-size: 13px;
    color: #374151;
}

.mlgf-cifra-grande[b-8yhrwkaoos] {
    font-size: 15px;
}

    .mlgf-cifra-grande b[b-8yhrwkaoos] {
        font-size: 26px;
        font-weight: 850;
        color: #3730a3;
    }

.mlgf-cifra-suave[b-8yhrwkaoos] {
    color: #6b7280;
}

.mlgf-motivos[b-8yhrwkaoos] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .mlgf-motivos td[b-8yhrwkaoos] {
        padding: 0.3rem 0.4rem;
        border-bottom: 1px solid #eef1f5;
    }

.mlgf-numero[b-8yhrwkaoos] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

/* BOTONES */

.mlgf-botones[b-8yhrwkaoos] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mlgf-btn[b-8yhrwkaoos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlgf-btn:hover:not(:disabled)[b-8yhrwkaoos] {
        background: #f8fafc;
    }

    .mlgf-btn:disabled[b-8yhrwkaoos] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlgf-btn .material-symbols-outlined[b-8yhrwkaoos] {
        font-size: 18px;
    }

.mlgf-btn-pequeno[b-8yhrwkaoos] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mlgf-btn-primario[b-8yhrwkaoos] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlgf-btn-primario:hover:not(:disabled)[b-8yhrwkaoos] {
        background: #4338ca;
    }

.mlgf-btn-peligro[b-8yhrwkaoos] {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mlgf-btn-peligro:hover:not(:disabled)[b-8yhrwkaoos] {
        background: #b91c1c;
    }

/* CONFIRMACIÓN */

.mlgf-modal-fondo[b-8yhrwkaoos] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlgf-modal[b-8yhrwkaoos] {
    width: min(30rem, 100%);
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

.mlgf-modal-titulo[b-8yhrwkaoos] {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

@media (max-width: 1100px) {
    .mlgf-rejilla[b-8yhrwkaoos] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlgf-recuento[b-8yhrwkaoos] {
        position: static;
    }

    .mlgf-opciones[b-8yhrwkaoos] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlgf-tabla[b-8yhrwkaoos]  .mlgf-col-origen,
    .mlgf-tabla[b-8yhrwkaoos]  .mlgf-col-fecha {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/GruposMailingPage.razor.rz.scp.css */
/*
    Mailing · Grupos (la lista). Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo), así que lo que se le pone a sus filas y celdas
    va con ::deep desde un elemento de esta página.
*/

/* Hijo directo de PantallaMailing (AnchoCompleto): se queda con el alto sobrante y se lo pasa a la lista. */
.mlg-cuerpo[b-0ml5zl65c1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlg-aviso[b-0ml5zl65c1] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlg-nota[b-0ml5zl65c1] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* La lista ocupa todo el largo que queda bajo los avisos y la nota. */
.mlg-lista[b-0ml5zl65c1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlg-lista[b-0ml5zl65c1]  .tp-panel {
    min-height: auto;
}

.mlg-lista[b-0ml5zl65c1]  .mlg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlg-lista[b-0ml5zl65c1]  .mlg-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlg-lista[b-0ml5zl65c1]  .mlg-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

@media (max-width: 1100px) {
    .mlg-lista[b-0ml5zl65c1]  .mlg-col-descripcion,
    .mlg-lista[b-0ml5zl65c1]  .mlg-col-fecha {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/IndicadoresMailingPage.razor.rz.scp.css */
/*
    Mailing · Indicadores y control de emails abiertos. Hoja propia: el CSS de Blazor tiene ámbito por componente, y
    sin ella la pantalla se vería sin estilo. Las tablas las pinta <TablaPaginada> (componente hijo, no de Syncfusion):
    lo que se pone a sus celdas va con ::deep desde un elemento de esta página. La gráfica (SfChart) NO se toca por
    dentro: solo su contenedor.
*/

/* A todo el ancho y todo el alto (AnchoCompleto en PantallaMailing): el cuerpo toma el alto que deja la cabecera y,
   dentro, la sección de la tabla principal (.mli-seccion-principal) se queda con lo que sobra. */
.mli-cuerpo[b-vt38c2oqx3] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mli-aviso[b-vt38c2oqx3] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mli-nota[b-vt38c2oqx3] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mli-enlace[b-vt38c2oqx3] {
    color: #4338ca;
    font-weight: 700;
    text-decoration: none;
}

    .mli-enlace:hover[b-vt38c2oqx3] {
        text-decoration: underline;
    }

.mli-seccion[b-vt38c2oqx3] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mli-seccion-principal[b-vt38c2oqx3] {
    flex: 1 1 auto;
}

.mli-seccion-cabecera[b-vt38c2oqx3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mli-subtitulo[b-vt38c2oqx3] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

/* CABECERA DEL ÁMBITO Y PESTAÑAS */

.mli-cabecera[b-vt38c2oqx3] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mli-titulo[b-vt38c2oqx3] {
    font-size: 17px;
    font-weight: 850;
    color: #111827;
    overflow-wrap: anywhere;
}

.mli-pestanas[b-vt38c2oqx3] {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
}

.mli-pestana[b-vt38c2oqx3] {
    padding: 0.5rem 0.9rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

    .mli-pestana:hover[b-vt38c2oqx3] {
        color: #374151;
    }

.mli-pestana-activa[b-vt38c2oqx3] {
    border-bottom-color: #4f46e5;
    color: #3730a3;
}

/* TARJETAS */

.mli-tarjetas[b-vt38c2oqx3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.6rem;
}

.mli-tarjeta[b-vt38c2oqx3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #ffffff;
    cursor: help;
    min-width: 0;
}

.mli-tarjeta-rotulo[b-vt38c2oqx3] {
    font-size: 12px;
    font-weight: 750;
    color: #6b7280;
}

.mli-tarjeta-valor[b-vt38c2oqx3] {
    font-size: 22px;
    font-weight: 850;
    color: #111827;
    line-height: 1.15;
}

.mli-tarjeta-tasa[b-vt38c2oqx3] {
    font-size: 13px;
    font-weight: 800;
    color: #4338ca;
}

.mli-tarjeta-nota[b-vt38c2oqx3] {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
}

/* GRÁFICA */

.mli-grafica[b-vt38c2oqx3] {
    width: 100%;
    min-width: 0;
    height: 260px;
}

/* FILTROS Y TABLAS */

.mli-barra[b-vt38c2oqx3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.6rem;
}

.mli-input[b-vt38c2oqx3] {
    width: 100%;
    min-width: 0;
    min-height: 2.3rem;
    padding: 0 0.75rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .mli-input:focus[b-vt38c2oqx3] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.mli-input-corto[b-vt38c2oqx3] {
    width: auto;
    min-width: 9rem;
}

/* Contenedor de la TablaPaginada: flex-columna, que es lo que espera .tp-panel para repartirse el alto. La tabla marca el
   suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.mli-tabla[b-vt38c2oqx3] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .mli-tabla[b-vt38c2oqx3]  .tp-panel {
        min-height: auto;
    }

    .mli-tabla[b-vt38c2oqx3]  .mli-col-envio,
    .mli-tabla[b-vt38c2oqx3]  .mli-col-secundaria {
        color: #4b5563;
        font-size: 12px;
    }

.mli-enlaces[b-vt38c2oqx3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .mli-enlaces th[b-vt38c2oqx3] {
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        font-size: 12px;
        font-weight: 750;
        text-align: left;
    }

    .mli-enlaces td[b-vt38c2oqx3] {
        padding: 0.45rem 0.5rem;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

.mli-num[b-vt38c2oqx3] {
    text-align: right;
    white-space: nowrap;
}

.mli-enlaces th.mli-num[b-vt38c2oqx3] {
    text-align: right;
}

.mli-url[b-vt38c2oqx3] {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .mli-barra[b-vt38c2oqx3] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mli-tabla[b-vt38c2oqx3]  .mli-col-envio,
    .mli-tabla[b-vt38c2oqx3]  .mli-col-secundaria {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/LineaConDatosMailing.razor.rz.scp.css */
/* Una línea con variables dicha como el editor del correo: las variables son etiquetas de color, como sus pastillas. */

.lcd[b-ofh4h7zekk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    margin-top: 0.3rem;
    font-size: 12.5px;
    line-height: 1.7;
    color: #374151;
}

.lcd-rotulo[b-ofh4h7zekk] {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
}

.lcd-linea[b-ofh4h7zekk] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lcd-dato[b-ofh4h7zekk] {
    display: inline-block;
    padding: 0 7px;
    margin: 0 1px;
    border-radius: 9px;
    border: 1px solid #c7d2fe;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.5;
    white-space: nowrap;
}

.lcd-control[b-ofh4h7zekk] {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}
/* _content/ErpPowergest/Presentation/Mailing/PantallaMailing.razor.rz.scp.css */
/*
    Cabecera de las pantallas del mailing. Mismas medidas y colores que el resto de listados del ERP
    (título 22px/850, subtítulo 13px gris). Hoja propia porque el CSS de Blazor tiene ámbito por
    componente: sin ella la pantalla se vería sin estilo.
*/

/* Sin margen propio, como Clientes: el borde lo pone .main-body (16px). */
.ml-page[b-jzt01abgcq] {
    padding: 0;
    /* Ancho de listado: la pantalla de direcciones pone la ficha al lado de la lista y no cabe en menos. */
    max-width: 1480px;
    margin: 0 auto;
    color: #1f2933;
}

/* AnchoCompleto: todo el ancho (sin el tope de listado) y todo el alto, como columna flex. Los hijos que la
   página marque con `flex: 1 1 auto` se quedan con el alto que sobra. */
.ml-page.ml-page-completa[b-jzt01abgcq] {
    max-width: none;
    margin: 0;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.ml-header[b-jzt01abgcq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 9px;   /* el ritmo de Clientes entre cabecera y contenido */
}

/* El título cede, pero no por debajo de 12rem: sin ese suelo, en el móvil unos comandos con texto («Boletines»,
   «Guardar borrador») lo dejaban en una palabra por línea y la barra nunca pasaba a iconos (el script repliega cuando la
   cabecera DESBORDA, y un texto que envuelve sin fin nunca desborda). Con el suelo, los comandos se quedan en icono o
   pasan al «···» antes. */
.ml-textos[b-jzt01abgcq] {
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
}

/* La barra la pinta CommandBar (componente hijo): su raíz no lleva el atributo de esta hoja. */
.ml-header[b-jzt01abgcq]  .ml-acciones {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}

.ml-icono[b-jzt01abgcq] {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 10px;
    padding: 8px;
}

.ml-title[b-jzt01abgcq] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.ml-subtitle[b-jzt01abgcq] {
    margin-top: 4px;
    max-width: 72ch;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}
/* _content/ErpPowergest/Presentation/Mailing/PlantillaMailingPage.razor.rz.scp.css */
/*
    Mailing · Diseñador de una plantilla. Hoja propia (el CSS de Blazor tiene ámbito por componente). El
    diseñador de bloques es un componente hijo con su propia hoja; aquí solo lo que pinta esta página: campos de
    cabecera, errores y avisos, pestañas y la vista previa. Sin ::deep.
*/

.mlpd-cuerpo[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.mlpd-aviso[b-w5li5ba6yy] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlpd-fabrica[b-w5li5ba6yy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
}

/* CAMPOS */

.mlpd-campos[b-w5li5ba6yy] {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr) minmax(11rem, 1fr);
    gap: 0.7rem 0.9rem;
}

.mlpd-campo[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.mlpd-campo-ancho[b-w5li5ba6yy] {
    grid-column: span 3;
}

.mlpd-campo input[b-w5li5ba6yy],
.mlpd-campo select[b-w5li5ba6yy],
.mlpd-input[b-w5li5ba6yy] {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #1f2937;
    background: #ffffff;
    outline: none;
}

    .mlpd-campo input:focus[b-w5li5ba6yy],
    .mlpd-campo select:focus[b-w5li5ba6yy],
    .mlpd-input:focus[b-w5li5ba6yy] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

    .mlpd-campo input:disabled[b-w5li5ba6yy],
    .mlpd-campo select:disabled[b-w5li5ba6yy] {
        background: #f8fafc;
        color: #64748b;
    }

.mlpd-con-variable[b-w5li5ba6yy] {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

    .mlpd-con-variable input[b-w5li5ba6yy] {
        flex: 1 1 auto;
    }

.mlpd-var[b-w5li5ba6yy] {
    flex: 0 0 9.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
}

/* VALIDACIÓN */

.mlpd-validacion[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mlpd-ok[b-w5li5ba6yy],
.mlpd-error[b-w5li5ba6yy],
.mlpd-a-medias[b-w5li5ba6yy],
.mlpd-av[b-w5li5ba6yy] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

    .mlpd-ok .material-symbols-outlined[b-w5li5ba6yy],
    .mlpd-error .material-symbols-outlined[b-w5li5ba6yy],
    .mlpd-a-medias .material-symbols-outlined[b-w5li5ba6yy],
    .mlpd-av .material-symbols-outlined[b-w5li5ba6yy] {
        font-size: 17px;
    }

/* Con errores la plantilla SE GUARDA: esto lo dice encima de los rojos, para que no se lean como «no se ha guardado». */
.mlpd-a-medias[b-w5li5ba6yy] {
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.mlpd-ok[b-w5li5ba6yy] {
    color: #15803d;
    background: #f0fdf4;
}

.mlpd-error[b-w5li5ba6yy] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.mlpd-av[b-w5li5ba6yy] {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

/* Las órdenes que arreglan lo que dice la validación (subir las imágenes incrustadas, tratar como texto). */
.mlpd-arreglos[b-w5li5ba6yy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Lo que salió de subir un ZIP y la pregunta de qué página es el correo. */
.mlpd-zip[b-w5li5ba6yy] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
    font-size: 12.5px;
    color: #312e81;
}

    .mlpd-zip > .material-symbols-outlined[b-w5li5ba6yy] {
        color: #4f46e5;
    }

.mlpd-zip-texto[b-w5li5ba6yy] {
    flex: 1 1 auto;
    min-width: 0;
}

    .mlpd-zip-texto ul[b-w5li5ba6yy] {
        margin: 0.3rem 0 0;
        padding-left: 1.1rem;
        color: #3730a3;
    }

.mlpd-modal-fondo[b-w5li5ba6yy] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlpd-modal[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(32rem, 100%);
    padding: 1.2rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

    .mlpd-modal p[b-w5li5ba6yy] {
        margin: 0;
    }

.mlpd-modal-titulo[b-w5li5ba6yy] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

.mlpd-zip-paginas[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .mlpd-zip-paginas .mlpd-btn[b-w5li5ba6yy] {
        justify-content: flex-start;
    }

.mlpd-modal-botones[b-w5li5ba6yy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* PESTAÑAS */

.mlpd-pestanas[b-w5li5ba6yy] {
    display: flex;
    gap: 0.3rem;
    border-bottom: 1px solid #e5e7eb;
}

.mlpd-pestana[b-w5li5ba6yy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlpd-pestana .material-symbols-outlined[b-w5li5ba6yy] {
        font-size: 18px;
    }

.mlpd-pestana-activa[b-w5li5ba6yy] {
    color: #4338ca;
    border-bottom-color: #4f46e5;
}

.mlpd-panel[b-w5li5ba6yy] {
    min-width: 0;
}

.mlpd-oculto[b-w5li5ba6yy] {
    display: none;
}

/* VISTA PREVIA */

.mlpd-previa[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mlpd-previa-barra[b-w5li5ba6yy],
.mlpd-prueba[b-w5li5ba6yy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.mlpd-previa-grupo[b-w5li5ba6yy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mlpd-previa-etiqueta[b-w5li5ba6yy] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.mlpd-seg[b-w5li5ba6yy],
.mlpd-btn[b-w5li5ba6yy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    padding: 0 0.8rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .mlpd-seg .material-symbols-outlined[b-w5li5ba6yy],
    .mlpd-btn .material-symbols-outlined[b-w5li5ba6yy] {
        font-size: 18px;
    }

    .mlpd-seg:hover[b-w5li5ba6yy],
    .mlpd-btn:hover:not(:disabled)[b-w5li5ba6yy] {
        background: #f8fafc;
    }

    .mlpd-btn:disabled[b-w5li5ba6yy] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.mlpd-seg-activo[b-w5li5ba6yy],
.mlpd-seg-activo:hover[b-w5li5ba6yy] {
    border-color: #a5b4fc;
    background: #eef2ff;
    color: #4338ca;
}

.mlpd-previa-cabecera[b-w5li5ba6yy] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13px;
    color: #1f2937;
}

.mlpd-peso[b-w5li5ba6yy] {
    color: #64748b;
    white-space: nowrap;
}

.mlpd-peso-alto[b-w5li5ba6yy] {
    color: #b45309;
    font-weight: 800;
}

.mlpd-previa-marco[b-w5li5ba6yy] {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f1f5f9;
}

.mlpd-iframe[b-w5li5ba6yy] {
    width: 100%;
    max-width: 760px;
    height: calc(100vh - 360px);
    min-height: 520px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

.mlpd-iframe-movil[b-w5li5ba6yy] {
    max-width: 380px;
}

.mlpd-nota[b-w5li5ba6yy] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.mlpd-prueba .mlpd-input[b-w5li5ba6yy] {
    width: auto;
    min-width: 16rem;
}

@media (max-width: 1000px) {
    .mlpd-campos[b-w5li5ba6yy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlpd-campo-ancho[b-w5li5ba6yy] {
        grid-column: auto;
    }
}

/* Vista previa con documentos reales (plantillas de tipo Documento) */
.mlpd-previa-documentos[b-w5li5ba6yy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.mlpd-chip-documento[b-w5li5ba6yy] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}

.mlpd-chip-quitar[b-w5li5ba6yy] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: #4338ca;
    cursor: pointer;
    padding: 0;
}

.mlpd-chip-quitar .material-symbols-outlined[b-w5li5ba6yy] {
    font-size: 16px;
}

/* IA del diseñador: propuestas de asunto y bloque de texto redactado */
.mlpd-ia[b-w5li5ba6yy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mlpd-propuestas[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #fafaff;
}

.mlpd-propuesta[b-w5li5ba6yy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mlpd-propuesta-texto[b-w5li5ba6yy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
}

    .mlpd-propuesta-texto span[b-w5li5ba6yy] {
        color: #64748b;
        font-size: 12px;
    }

.mlpd-ia-redactar[b-w5li5ba6yy] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .mlpd-ia-redactar .mlpd-input[b-w5li5ba6yy] {
        flex: 1;
        min-width: 0;
    }
/* _content/ErpPowergest/Presentation/Mailing/PlantillasMailingPage.razor.rz.scp.css */
/*
    Mailing · Plantillas (lista). Hoja propia: el CSS de Blazor tiene ámbito por componente y sin ella la
    pantalla se vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo propio, no de Syncfusion),
    así que lo que se pone en sus celdas va con ::deep desde un elemento de esta página, como en Temáticas.
*/

/* Con AnchoCompleto, PantallaMailing es una columna flex con suelo en la pantalla: el cuerpo y la lista se quedan con el
   alto sobrante para que la tabla llegue hasta abajo. */
.mlp-cuerpo[b-on0vdfiu3e] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlp-aviso[b-on0vdfiu3e] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlp-barra[b-on0vdfiu3e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.mlp-filtro[b-on0vdfiu3e] {
    display: inline-flex;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
}

.mlp-filtro-btn[b-on0vdfiu3e] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.95rem;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}

    .mlp-filtro-btn + .mlp-filtro-btn[b-on0vdfiu3e] {
        border-left: 1px solid #e2e8f0;
    }

    .mlp-filtro-btn:hover[b-on0vdfiu3e] {
        background: #f8fafc;
    }

.mlp-filtro-activo[b-on0vdfiu3e],
.mlp-filtro-activo:hover[b-on0vdfiu3e] {
    background: #eef2ff;
    color: #4338ca;
}

.mlp-leyenda[b-on0vdfiu3e] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.mlp-lista[b-on0vdfiu3e] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.mlp-lista[b-on0vdfiu3e]  .tp-panel {
    min-height: auto;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-chip-azul {
    color: #4338ca;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-chip-ambar {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mlp-lista[b-on0vdfiu3e]  .mlp-btn-fila {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .mlp-lista[b-on0vdfiu3e]  .mlp-btn-fila .material-symbols-outlined {
        font-size: 16px;
    }

    .mlp-lista[b-on0vdfiu3e]  .mlp-btn-fila:hover:not(:disabled) {
        background: #f8fafc;
    }

    .mlp-lista[b-on0vdfiu3e]  .mlp-btn-fila:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlp-lista[b-on0vdfiu3e]  .mlp-col-formato {
        color: #4b5563;
        font-size: 12.5px;
    }

@media (max-width: 1100px) {
    .mlp-lista[b-on0vdfiu3e]  .mlp-col-asunto {
        display: none;
    }
}

@media (max-width: 800px) {
    .mlp-lista[b-on0vdfiu3e]  .mlp-col-formato {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/RebotesMailingPage.razor.rz.scp.css */
/*
    Mailing · Rebotes («Control de rebotes»). Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la
    pantalla se vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo): lo que se pone a sus filas y a las
    plantillas de sus celdas va con ::deep desde un elemento de esta página. La ficha es markup de esta página.
*/

/* A todo el alto: la página (PantallaMailing con AnchoCompleto) es una columna flex; el cuerpo, la rejilla y la lista
   se quedan con el alto sobrante para que la tabla llegue hasta abajo. */
.mlb-cuerpo[b-tr8nebernt] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.mlb-aviso[b-tr8nebernt] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* FILTROS */

.mlb-barra[b-tr8nebernt] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
    gap: 0.6rem;
}

.mlb-buscador[b-tr8nebernt] {
    position: relative;
    min-width: 0;
}

.mlb-lupa[b-tr8nebernt] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
}

.mlb-input[b-tr8nebernt] {
    width: 100%;
    min-width: 0;
    min-height: 2.4rem;
    padding: 0 0.8rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

    .mlb-input:focus[b-tr8nebernt] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.mlb-input-busqueda[b-tr8nebernt] {
    padding-left: 2.4rem;
}

.mlb-filtro-envio[b-tr8nebernt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
}

    .mlb-filtro-envio .material-symbols-outlined[b-tr8nebernt] {
        font-size: 1.1rem;
    }

.mlb-leyenda[b-tr8nebernt] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlb-enlace[b-tr8nebernt] {
    color: #4338ca;
    font-weight: 700;
    text-decoration: none;
}

    .mlb-enlace:hover[b-tr8nebernt] {
        text-decoration: underline;
    }

/* LISTA + FICHA */

/* La lista se estira a todo el alto de la rejilla; la ficha conserva su alto (arriba). */
.mlb-rejilla[b-tr8nebernt] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

    .mlb-rejilla.mlb-con-ficha[b-tr8nebernt] {
        grid-template-columns: minmax(0, 1.3fr) minmax(22rem, 1fr);
    }

.mlb-lista[b-tr8nebernt] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlb-lista[b-tr8nebernt]  .tp-panel {
    min-height: auto;
}

.mlb-lista[b-tr8nebernt]  .mlb-fila-abierta td {
    background: #eef2ff;
}

.mlb-lista[b-tr8nebernt]  .mlb-col-diagnostico {
    color: #4b5563;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.mlb-lista[b-tr8nebernt]  .mlb-chip,
.mlb-chip[b-tr8nebernt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mlb-lista[b-tr8nebernt]  .mlb-verde,
.mlb-verde[b-tr8nebernt] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlb-lista[b-tr8nebernt]  .mlb-naranja,
.mlb-naranja[b-tr8nebernt] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.mlb-lista[b-tr8nebernt]  .mlb-rojo,
.mlb-rojo[b-tr8nebernt] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.mlb-lista[b-tr8nebernt]  .mlb-gris,
.mlb-gris[b-tr8nebernt] {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* FICHA */

.mlb-ficha[b-tr8nebernt] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
    align-self: start;
}

.mlb-ficha-cabecera[b-tr8nebernt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mlb-ficha-titulo[b-tr8nebernt] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.mlb-resumen[b-tr8nebernt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    color: #374151;
}

.mlb-codigo[b-tr8nebernt] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 800;
    color: #1f2937;
}

.mlb-dato[b-tr8nebernt] {
    color: #4b5563;
}

.mlb-bloque[b-tr8nebernt] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px solid #f1f5f9;
}

.mlb-bloque-titulo[b-tr8nebernt] {
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.mlb-texto[b-tr8nebernt] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mlb-tenue[b-tr8nebernt] {
    color: #6b7280;
}

.mlb-linea[b-tr8nebernt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

    .mlb-linea .mlb-input[b-tr8nebernt] {
        flex: 1 1 12rem;
    }

.mlb-extracto[b-tr8nebernt] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.45;
    color: #334155;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* BOTONES */

.mlb-btn[b-tr8nebernt] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.4rem;
    padding: 0 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

    .mlb-btn:hover:not(:disabled)[b-tr8nebernt] {
        background: #f8fafc;
    }

    .mlb-btn:disabled[b-tr8nebernt] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.mlb-btn-pequeno[b-tr8nebernt] {
    min-height: 1.9rem;
    padding: 0 0.65rem;
    font-size: 12px;
}

.mlb-btn-primario[b-tr8nebernt] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlb-btn-primario:hover:not(:disabled)[b-tr8nebernt] {
        background: #4338ca;
    }

.mlb-icono-btn[b-tr8nebernt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .mlb-icono-btn:hover[b-tr8nebernt] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* RESPONSIVE: con la ficha abierta, lo que ya dice la ficha sobra en la lista; al estrechar caen primero las columnas
   que menos dicen y la ficha baja debajo de la lista. */

.mlb-rejilla.mlb-con-ficha .mlb-lista[b-tr8nebernt]  .mlb-col-campania,
.mlb-rejilla.mlb-con-ficha .mlb-lista[b-tr8nebernt]  .mlb-col-efecto {
    display: none;
}

@media (max-width: 1400px) {
    .mlb-rejilla.mlb-con-ficha .mlb-lista[b-tr8nebernt]  .mlb-col-diagnostico,
    .mlb-lista[b-tr8nebernt]  .mlb-col-campania {
        display: none;
    }

    .mlb-barra[b-tr8nebernt] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1150px) {
    /* La ficha baja debajo: el alto sobrante se lo queda la fila de la lista, no la de la ficha. */
    .mlb-rejilla.mlb-con-ficha[b-tr8nebernt] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .mlb-barra[b-tr8nebernt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mlb-buscador[b-tr8nebernt] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .mlb-lista[b-tr8nebernt]  .mlb-col-envio,
    .mlb-lista[b-tr8nebernt]  .mlb-col-efecto,
    .mlb-lista[b-tr8nebernt]  .mlb-col-diagnostico {
        display: none;
    }

    .mlb-barra[b-tr8nebernt] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/RemitentesMailingPage.razor.rz.scp.css */
/*
    Mailing · Remitentes. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se vería
    sin estilo. La tabla la pinta <TablaPaginada> (componente hijo), así que lo que se le pone a sus filas y celdas va
    con ::deep desde un elemento de esta página. Lo mismo la tarjeta de la ventana flotante (ModalMaestro): su ancho se
    amplía desde aquí, anclado en .mlr-modal; los campos de dentro son marcado de esta página y llevan su ámbito.
*/

/* Todo el alto: la página (AnchoCompleto) es una columna flex; el cuerpo y la lista se quedan con lo que sobra. */
.mlr-cuerpo[b-aznowhu1mv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlr-aviso[b-aznowhu1mv] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlr-lista[b-aznowhu1mv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlr-lista[b-aznowhu1mv]  .tp-panel {
    min-height: auto;
}

.mlr-lista[b-aznowhu1mv]  .mlr-fila-abierta td {
    background: #eef2ff;
}

.mlr-lista[b-aznowhu1mv]  .mlr-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlr-lista[b-aznowhu1mv]  .mlr-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlr-lista[b-aznowhu1mv]  .mlr-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mlr-lista[b-aznowhu1mv]  .mlr-chip-rojo {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* LECTURA DE REBOTES (en la ficha) */

.mlr-lectura[b-aznowhu1mv] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.mlr-lectura-titulo[b-aznowhu1mv] {
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.mlr-enlace[b-aznowhu1mv] {
    margin-left: 0.6rem;
    color: #4338ca;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

    .mlr-enlace:hover[b-aznowhu1mv] {
        text-decoration: underline;
    }

/* SERVICIO DE ENVÍO DEL ERP (en la ficha) */

.mlr-servicio[b-aznowhu1mv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    background: #f8faff;
}

.mlr-dns[b-aznowhu1mv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

    .mlr-dns th[b-aznowhu1mv] {
        padding: 0.3rem 0.4rem;
        text-align: left;
        font-weight: 800;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
    }

        .mlr-dns th:first-child[b-aznowhu1mv] {
            width: 3.8rem;
        }

        .mlr-dns th:last-child[b-aznowhu1mv] {
            width: 6.5rem;
        }

    .mlr-dns td[b-aznowhu1mv] {
        padding: 0.35rem 0.4rem;
        vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

.mlr-dns-valor[b-aznowhu1mv] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11.5px;
    overflow-wrap: anywhere;
    user-select: all;
}

/* FICHA (en la ventana flotante) */

/* El envoltorio no pinta caja: solo ancla el ::deep que ensancha la tarjeta (los 560px de los maestros no bastan). */
.mlr-modal[b-aznowhu1mv] {
    display: contents;
}

    .mlr-modal[b-aznowhu1mv]  .mm-card {
        max-width: 820px;
    }

.mlr-ficha[b-aznowhu1mv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .mlr-ficha > .mlr-subtitulo:first-child[b-aznowhu1mv] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

.mlr-subtitulo[b-aznowhu1mv] {
    margin-top: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

/* Servidor · seguridad · puerto: el servidor ancho, el puerto estrecho. Las de dos son .mm-fila (del modal). */
.mlr-tres[b-aznowhu1mv] {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
}

/* Las casillas (.mm-check, del modal): la piel la pone el modal; el tamaño y el color de la marca, esta hoja. */
.mm-check input[b-aznowhu1mv] {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
}

.mlr-nota[b-aznowhu1mv] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlr-comprobacion[b-aznowhu1mv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mlr-ok[b-aznowhu1mv],
.mlr-mal[b-aznowhu1mv] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mlr-ok[b-aznowhu1mv] {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.mlr-mal[b-aznowhu1mv] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

    .mlr-ok .material-symbols-outlined[b-aznowhu1mv],
    .mlr-mal .material-symbols-outlined[b-aznowhu1mv] {
        font-size: 18px;
    }

.mlr-avisos[b-aznowhu1mv],
.mlr-faltan[b-aznowhu1mv] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

.mlr-avisos[b-aznowhu1mv] {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

    .mlr-avisos ul[b-aznowhu1mv] {
        margin: 0.3rem 0 0;
        padding-left: 1.1rem;
    }

.mlr-faltan[b-aznowhu1mv] {
    padding-left: 1.6rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.mlr-btn[b-aznowhu1mv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlr-btn .material-symbols-outlined[b-aznowhu1mv] {
        font-size: 18px;
    }

    .mlr-btn:hover:not(:disabled)[b-aznowhu1mv] {
        background: #f8fafc;
    }

    .mlr-btn:disabled[b-aznowhu1mv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* «Probar conexión», a la izquierda del pie del modal: la piel de sus botones (blanco con borde) y su icono. */
.mlr-pie-btn[b-aznowhu1mv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .mlr-pie-btn:hover:not(:disabled)[b-aznowhu1mv] {
        background: #f3f4f6;
    }

    .mlr-pie-btn .material-symbols-outlined[b-aznowhu1mv] {
        font-size: 18px;
    }

@media (max-width: 1150px) {
    .mlr-lista[b-aznowhu1mv]  .mlr-col-secundaria {
        display: none;
    }
}

@media (max-width: 640px) {
    .mlr-tres[b-aznowhu1mv] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/SegmentoMailingPage.razor.rz.scp.css */
/*
    Mailing · La ficha de un segmento. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La muestra la pinta <TablaPaginada> (componente hijo): lo que se pone a sus celdas va con ::deep desde un
    elemento de esta página. El editor de criterios lleva su propia hoja.
*/

.mlsf-cuerpo[b-vzrkaoyz58] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlsf-aviso[b-vzrkaoyz58] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* REJILLA: la ficha, sus criterios y la muestra a la izquierda; el recuento a la derecha */

.mlsf-rejilla[b-vzrkaoyz58] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1rem;
    align-items: start;
}

.mlsf-contenido[b-vzrkaoyz58] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlsf-seccion[b-vzrkaoyz58] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlsf-subtitulo[b-vzrkaoyz58] {
    font-size: 13px;
    font-weight: 850;
    color: #1f2937;
}

.mlsf-archivado[b-vzrkaoyz58] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.mlsf-campo[b-vzrkaoyz58] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

    .mlsf-campo input[b-vzrkaoyz58],
    .mlsf-campo textarea[b-vzrkaoyz58] {
        width: 100%;
        padding: 0.5rem 0.7rem;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        color: #1f2937;
        background: #ffffff;
        outline: none;
    }

        .mlsf-campo input:focus[b-vzrkaoyz58],
        .mlsf-campo textarea:focus[b-vzrkaoyz58] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
        }

.mlsf-nota[b-vzrkaoyz58] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* MUESTRA */

.mlsf-filtro[b-vzrkaoyz58] {
    display: inline-flex;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
    align-self: flex-start;
}

.mlsf-filtro-btn[b-vzrkaoyz58] {
    padding: 0.4rem 0.85rem;
    border: none;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

    .mlsf-filtro-btn + .mlsf-filtro-btn[b-vzrkaoyz58] {
        border-left: 1px solid #dbe2ea;
    }

.mlsf-filtro-activo[b-vzrkaoyz58] {
    background: #4f46e5;
    color: #ffffff;
}

.mlsf-tabla[b-vzrkaoyz58] {
    min-width: 0;
}

.mlsf-tabla[b-vzrkaoyz58]  .tp-panel {
    min-height: auto;
}

/* RECUENTO */

.mlsf-recuento[b-vzrkaoyz58] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
}

.mlsf-cifra[b-vzrkaoyz58] {
    font-size: 13px;
    color: #374151;
}

.mlsf-cifra-grande[b-vzrkaoyz58] {
    font-size: 15px;
}

    .mlsf-cifra-grande b[b-vzrkaoyz58] {
        font-size: 26px;
        font-weight: 850;
        color: #3730a3;
    }

.mlsf-cifra-suave[b-vzrkaoyz58] {
    color: #6b7280;
}

.mlsf-motivos[b-vzrkaoyz58] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .mlsf-motivos td[b-vzrkaoyz58] {
        padding: 0.3rem 0.4rem;
        border-bottom: 1px solid #eef1f5;
    }

    .mlsf-motivos tr[b-vzrkaoyz58] {
        cursor: pointer;
    }

        .mlsf-motivos tr:hover td[b-vzrkaoyz58] {
            background: #f8fafc;
        }

.mlsf-motivo-activo td[b-vzrkaoyz58] {
    background: #eef2ff;
}

.mlsf-numero[b-vzrkaoyz58] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

/* BOTONES */

.mlsf-botones[b-vzrkaoyz58] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mlsf-btn[b-vzrkaoyz58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlsf-btn:hover:not(:disabled)[b-vzrkaoyz58] {
        background: #f8fafc;
    }

    .mlsf-btn:disabled[b-vzrkaoyz58] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlsf-btn .material-symbols-outlined[b-vzrkaoyz58] {
        font-size: 18px;
    }

.mlsf-btn-pequeno[b-vzrkaoyz58] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mlsf-btn-primario[b-vzrkaoyz58] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlsf-btn-primario:hover:not(:disabled)[b-vzrkaoyz58] {
        background: #4338ca;
    }

.mlsf-btn-peligro[b-vzrkaoyz58] {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mlsf-btn-peligro:hover:not(:disabled)[b-vzrkaoyz58] {
        background: #b91c1c;
    }

/* CONFIRMACIÓN */

.mlsf-modal-fondo[b-vzrkaoyz58] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
}

.mlsf-modal[b-vzrkaoyz58] {
    width: min(30rem, 100%);
    padding: 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

.mlsf-modal-titulo[b-vzrkaoyz58] {
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
}

@media (max-width: 1100px) {
    .mlsf-rejilla[b-vzrkaoyz58] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlsf-recuento[b-vzrkaoyz58] {
        position: static;
    }
}

/* QUIÉNES ENTRAN / A QUIÉN DEJAMOS FUERA: dos pasos numerados, el segundo en rojo suave. */

.mlsf-subtitulo[b-vzrkaoyz58] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mlsf-subtitulo-fuera[b-vzrkaoyz58] {
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid #eef2f7;
}

.mlsf-paso[b-vzrkaoyz58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.mlsf-paso-fuera[b-vzrkaoyz58] {
    background: #b91c1c;
}

.mlsf-opcional[b-vzrkaoyz58] {
    font-weight: 500;
    color: #9ca3af;
}

.mlsf-btn-fuera[b-vzrkaoyz58] {
    border-color: #fecaca;
    color: #b91c1c;
}

    .mlsf-btn-fuera:hover:not(:disabled)[b-vzrkaoyz58] {
        background: #fef2f2;
    }

/* Cómo elige, en una frase con los criterios que tiene. */
.mlsf-resumen[b-vzrkaoyz58] {
    display: flex;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    line-height: 1.5;
}

    .mlsf-resumen .material-symbols-outlined[b-vzrkaoyz58] {
        font-size: 18px;
        color: #64748b;
    }

.mlsf-botones-fuera[b-vzrkaoyz58] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* _content/ErpPowergest/Presentation/Mailing/SegmentosMailingPage.razor.rz.scp.css */
/*
    Mailing · Segmentos (la lista). Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo), así que lo que se le pone a sus filas y celdas
    va con ::deep desde un elemento de esta página.
*/

/* Hijo directo de PantallaMailing (AnchoCompleto): se queda con el alto sobrante y se lo pasa a la lista. */
.mls-cuerpo[b-53ws705jrq] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mls-aviso[b-53ws705jrq] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mls-nota[b-53ws705jrq] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* La lista ocupa todo el largo que queda bajo los avisos y la nota. */
.mls-lista[b-53ws705jrq] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mls-lista[b-53ws705jrq]  .tp-panel {
    min-height: auto;
}

.mls-lista[b-53ws705jrq]  .mls-col-criterios {
    font-size: 12px;
    color: #475569;
}

.mls-lista[b-53ws705jrq]  .mls-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mls-lista[b-53ws705jrq]  .mls-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mls-lista[b-53ws705jrq]  .mls-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

@media (max-width: 1100px) {
    .mls-lista[b-53ws705jrq]  .mls-col-fecha {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/SelectorFormatoMailing.razor.rz.scp.css */
/* «¿Cómo quieres escribirlo?»: tres opciones como tarjetas pequeñas. Hoja propia, sin ::deep. */

.sfm[b-r4l1ask1hq] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.sfm-titulo[b-r4l1ask1hq] {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

.sfm-opciones[b-r4l1ask1hq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.sfm-opcion[b-r4l1ask1hq] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    text-align: left;
    cursor: pointer;
}

    .sfm-opcion:hover:not(:disabled)[b-r4l1ask1hq] {
        border-color: #a5b4fc;
        background: #f8faff;
    }

    .sfm-opcion:disabled[b-r4l1ask1hq] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.sfm-opcion-actual[b-r4l1ask1hq],
.sfm-opcion-actual:hover:not(:disabled)[b-r4l1ask1hq] {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 1px #6366f1 inset;
}

.sfm-icono[b-r4l1ask1hq] {
    font-size: 22px;
    color: #4f46e5;
}

.sfm-texto[b-r4l1ask1hq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 13px;
}

    .sfm-texto span[b-r4l1ask1hq] {
        font-size: 12px;
        color: #6b7280;
    }

.sfm-rechazo[b-r4l1ask1hq] {
    padding: 0.45rem 0.7rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12.5px;
}

/* Confirmación */

.sfm-modal-fondo[b-r4l1ask1hq] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
}

.sfm-modal[b-r4l1ask1hq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(520px, 100%);
    padding: 1.1rem 1.2rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    font-size: 13.5px;
    color: #374151;
}

    .sfm-modal p[b-r4l1ask1hq] {
        margin: 0;
    }

.sfm-modal-titulo[b-r4l1ask1hq] {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.sfm-botones[b-r4l1ask1hq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.sfm-btn[b-r4l1ask1hq] {
    min-height: 2.1rem;
    padding: 0 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sfm-btn-primario[b-r4l1ask1hq] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

@media (max-width: 900px) {
    .sfm-opciones[b-r4l1ask1hq] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/Mailing/TematicasMailingPage.razor.rz.scp.css */
/*
    Mailing · Temáticas. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se
    vería sin estilo. La tabla la pinta <TablaPaginada> (componente hijo), así que lo que se le pone a sus filas
    y celdas va con ::deep desde un elemento de esta página.
*/

.mlt-cuerpo[b-ar20swn2mt] {
    /* Hijo del ChildContent de <PantallaMailing AnchoCompleto>: se queda con el alto que sobra. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlt-aviso[b-ar20swn2mt] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.mlt-lista[b-ar20swn2mt] {
    /* La tabla, todo el largo de la pantalla: la caja crece y su .tp-panel (flex: 1 1 auto) la llena. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlt-lista[b-ar20swn2mt]  .tp-panel {
    min-height: auto;
}

.mlt-lista[b-ar20swn2mt]  .mlt-fila-abierta td {
    background: #eef2ff;
}

.mlt-lista[b-ar20swn2mt]  .mlt-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.mlt-lista[b-ar20swn2mt]  .mlt-chip-verde {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mlt-lista[b-ar20swn2mt]  .mlt-chip-gris {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* FICHA, en ventana flotante (<ModalMaestro>). Los campos llevan la piel común (mm-field, mm-input…); aquí solo
   la descripción en varias líneas y la casilla, con ::deep anclado en .mlt-modal para no tocar la hoja común. */

.mlt-modal[b-ar20swn2mt]  textarea.mm-input {
    height: auto;
    min-height: 5.5rem;
    padding: 10px 14px;
    resize: vertical;
    font-family: inherit;
}

.mlt-modal[b-ar20swn2mt]  .mm-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
}

.mlt-ficha[b-ar20swn2mt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mlt-nota[b-ar20swn2mt] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .mlt-lista[b-ar20swn2mt]  .mlt-col-descripcion {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Mailing/VerificacionMailingPage.razor.rz.scp.css */
/*
    Mailing · Verificación. Hoja propia: el CSS de Blazor tiene ámbito por componente, y sin ella la pantalla se vería
    sin estilo. Las tablas las pinta <TablaPaginada> (componente hijo), así que lo que va en sus filas y en las plantillas
    de sus celdas se pone con ::deep desde un elemento de esta página. El asistente y la abierta son markup de esta página
    (RenderFragments propios), así que no lo necesitan.
*/

/* Hijo directo del ChildContent de PantallaMailing (AnchoCompleto): se queda con el alto que sobra y se lo pasa a la lista
   principal, que es lo último. */
.mlv-cuerpo[b-ka8hx4bjkv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mlv-aviso[b-ka8hx4bjkv] {
    padding: 0.9rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

/* NIVELES */

.mlv-niveles[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mlv-nivel[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 13px;
}

    .mlv-nivel .material-symbols-outlined[b-ka8hx4bjkv] {
        font-size: 18px;
    }

.mlv-nivel-apagado[b-ka8hx4bjkv] {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
}

.mlv-nivel-rotulo[b-ka8hx4bjkv] {
    font-weight: 800;
}

.mlv-nivel-motivo[b-ka8hx4bjkv] {
    font-size: 12px;
    color: #6b7280;
}

/* SECCIONES (la que se prepara y la abierta) */

.mlv-seccion[b-ka8hx4bjkv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    min-width: 0;
}

.mlv-seccion-cabecera[b-ka8hx4bjkv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Los resultados de la abierta (motivos, filtros, tabla): una envoltura que no cuenta para la columna de la sección. */
.mlv-contenido[b-ka8hx4bjkv] {
    display: contents;
}

.mlv-titulo-detalle[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.mlv-subtitulo[b-ka8hx4bjkv] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.mlv-icono-btn[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

    .mlv-icono-btn:hover[b-ka8hx4bjkv] {
        background: #f3f4f6;
        color: #111827;
    }

.mlv-bloque[b-ka8hx4bjkv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f1f5f9;
}

.mlv-bloque-titulo[b-ka8hx4bjkv] {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
}

.mlv-opciones[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mlv-opcion[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: #1f2937;
}

.mlv-saltar[b-ka8hx4bjkv] {
    flex-wrap: wrap;
}

.mlv-no-disponibles[b-ka8hx4bjkv] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
    color: #6b7280;
}

.mlv-nota[b-ka8hx4bjkv] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.mlv-texto[b-ka8hx4bjkv] {
    margin: 0;
    font-size: 13px;
    color: #374151;
}

.mlv-filtros[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

    .mlv-filtros .mlv-input[b-ka8hx4bjkv] {
        flex: 1 1 12rem;
    }

.mlv-input[b-ka8hx4bjkv] {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
    min-width: 0;
}

.mlv-filtros .mlv-input-corto[b-ka8hx4bjkv],
.mlv-input-corto[b-ka8hx4bjkv] {
    flex: 0 1 11rem;
    max-width: 11rem;
}

.mlv-input-dias[b-ka8hx4bjkv] {
    width: 5.5rem;
    min-height: 1.9rem;
}

.mlv-fila-botones[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

    .mlv-fila-botones .mlv-input[b-ka8hx4bjkv] {
        flex: 1 1 14rem;
        max-width: 24rem;
    }

.mlv-btn[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .mlv-btn:hover:not(:disabled)[b-ka8hx4bjkv] {
        background: #f8fafc;
    }

    .mlv-btn:disabled[b-ka8hx4bjkv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mlv-btn .material-symbols-outlined[b-ka8hx4bjkv] {
        font-size: 18px;
    }

.mlv-btn-pequeno[b-ka8hx4bjkv] {
    min-height: 1.9rem;
    padding: 0 0.7rem;
    font-size: 12px;
}

.mlv-btn-primario[b-ka8hx4bjkv] {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

    .mlv-btn-primario:hover:not(:disabled)[b-ka8hx4bjkv] {
        background: #4338ca;
    }

.mlv-btn-peligro[b-ka8hx4bjkv] {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

    .mlv-btn-peligro:hover:not(:disabled)[b-ka8hx4bjkv] {
        background: #b91c1c;
    }

.mlv-faltan[b-ka8hx4bjkv] {
    margin: 0;
    padding: 0.75rem 0.9rem 0.75rem 1.8rem;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
}

.mlv-confirmacion[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: #92400e;
}

/* PROGRESO Y TARJETAS */

.mlv-estado[b-ka8hx4bjkv] {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
}

.mlv-estado-pausa[b-ka8hx4bjkv] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.mlv-estado-terminada[b-ka8hx4bjkv] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.mlv-estado-cancelada[b-ka8hx4bjkv] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.mlv-situacion[b-ka8hx4bjkv] {
    font-size: 14px;
    font-weight: 750;
    color: #1f2937;
}

.mlv-situacion-pausa[b-ka8hx4bjkv] {
    color: #92400e;
}

.mlv-progreso[b-ka8hx4bjkv] {
    height: 0.6rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.mlv-progreso-barra[b-ka8hx4bjkv] {
    height: 100%;
    border-radius: 999px;
    background: #4f46e5;
    transition: width 0.4s ease;
}

.mlv-tarjetas[b-ka8hx4bjkv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
}

.mlv-tarjeta[b-ka8hx4bjkv] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    font: inherit;
}

    .mlv-tarjeta b[b-ka8hx4bjkv] {
        font-size: 18px;
        font-weight: 850;
        color: #111827;
    }

    .mlv-tarjeta span[b-ka8hx4bjkv] {
        font-size: 12px;
        color: #6b7280;
    }

.mlv-tarjeta-fuerte[b-ka8hx4bjkv] {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.mlv-tarjeta-boton[b-ka8hx4bjkv] {
    cursor: pointer;
}

    .mlv-tarjeta-boton:hover[b-ka8hx4bjkv] {
        box-shadow: 0 0.2rem 0.6rem rgba(15, 23, 42, 0.08);
    }

.mlv-tarjeta-activa[b-ka8hx4bjkv] {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}

.mlv-t-valida[b-ka8hx4bjkv] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.mlv-t-invalida[b-ka8hx4bjkv] {
    border-color: #fecaca;
    background: #fef2f2;
}

.mlv-t-arriesgada[b-ka8hx4bjkv] {
    border-color: #fde68a;
    background: #fffbeb;
}

.mlv-t-desconocida[b-ka8hx4bjkv] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.mlv-t-pendiente[b-ka8hx4bjkv] {
    border-color: #e5e7eb;
    background: #ffffff;
}

/* MOTIVOS (se pulsan para filtrar la tabla) */

.mlv-motivos[b-ka8hx4bjkv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mlv-motivo[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    cursor: pointer;
}

.mlv-motivo.mlv-t-valida[b-ka8hx4bjkv] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.mlv-motivo.mlv-t-invalida[b-ka8hx4bjkv] {
    border-color: #fecaca;
    background: #fef2f2;
}

.mlv-motivo.mlv-t-arriesgada[b-ka8hx4bjkv] {
    border-color: #fde68a;
    background: #fffbeb;
}

.mlv-motivo.mlv-t-desconocida[b-ka8hx4bjkv] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.mlv-motivo-activo[b-ka8hx4bjkv] {
    outline: 2px solid #4f46e5;
}

/* TABLAS */

.mlv-lista[b-ka8hx4bjkv] {
    min-width: 0;
}

.mlv-lista[b-ka8hx4bjkv]  .tp-panel {
    min-height: auto;
}

/* La lista de verificaciones, a todo el largo: flex-columna, que es lo que espera .tp-panel para repartirse el alto. La
   tabla marca el suelo (el min-height: auto de arriba): con `min-height: 0` no podría empujar a la página. */
.mlv-lista-principal[b-ka8hx4bjkv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-fila-abierta td {
    background: #eef2ff;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-chip,
.mlv-chip[b-ka8hx4bjkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #374151;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-chip.mlv-t-valida {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-chip.mlv-t-invalida {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-chip.mlv-t-arriesgada {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-chip.mlv-t-desconocida,
.mlv-lista[b-ka8hx4bjkv]  .mlv-chip.mlv-t-pendiente {
    color: #475569;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-col-detalle {
    font-size: 12px;
    color: #6b7280;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-sugerencia {
    font-weight: 750;
    color: #4338ca;
}

.mlv-lista[b-ka8hx4bjkv]  .mlv-rol {
    display: inline-flex;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 11px;
    color: #475569;
    background: #f8fafc;
}

.mlv-limpiar[b-ka8hx4bjkv] {
    padding: 0.8rem 0.9rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.mlv-casillas[b-ka8hx4bjkv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.35rem 1rem;
}

.mlv-casilla[b-ka8hx4bjkv] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

    .mlv-casilla input[b-ka8hx4bjkv] {
        margin-top: 0.2rem;
    }

.mlv-casilla-texto[b-ka8hx4bjkv] {
    display: flex;
    flex-direction: column;
}

.mlv-lista-corta[b-ka8hx4bjkv] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 12px;
    color: #4b5563;
}

.mlv-limpiada[b-ka8hx4bjkv] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #166534;
}

.mlv-col-limpieza[b-ka8hx4bjkv] {
    font-size: 12px;
    color: #4b5563;
}

/* NUEVA VERIFICACIÓN (ventana flotante). Los campos son mm-field / mm-input / mm-check de ModalMaestro; lo de aquí es
   lo propio de esta pantalla. */

/* Los filtros y las cifras no caben en los 560px de los maestros: se ensancha solo aquí (la hoja del modal es común). */
.mlv-modal-nueva[b-ka8hx4bjkv]  .mm-card {
    max-width: 880px;
}

.mlv-asistente[b-ka8hx4bjkv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.mlv-modal-filtros[b-ka8hx4bjkv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

/* CONFIRMACIÓN */

.mlv-modal-fondo[b-ka8hx4bjkv] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.mlv-modal[b-ka8hx4bjkv] {
    width: min(30rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.2rem;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    font-size: 13px;
    color: #374151;
}

    .mlv-modal p[b-ka8hx4bjkv] {
        margin: 0;
    }

.mlv-modal-titulo[b-ka8hx4bjkv] {
    font-size: 15px;
    font-weight: 850;
    color: #111827;
}

.mlv-botones[b-ka8hx4bjkv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .mlv-filtros .mlv-input[b-ka8hx4bjkv],
    .mlv-filtros .mlv-input-corto[b-ka8hx4bjkv] {
        flex: 1 1 100%;
        max-width: none;
    }

    .mlv-modal-filtros[b-ka8hx4bjkv] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/MemoriaC/Pages/MemoriaContableEditor.razor.rz.scp.css */
/* Márgenes como Clientes: sin padding propio (el borde lo pone .main-body) y 9px entre bloques. En
   columna flexible y no en rejilla de filas fijas: el aviso es opcional, y con filas fijas se quedaba
   con el `1fr` que es del editor. */
.memoria-page[b-8fxbp4d1ji] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    color: var(--erp-text);
    background: var(--erp-bg);
}

/* Header */
/* Sin `flex-wrap`, como en Clientes: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.mc-topbar[b-8fxbp4d1ji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.mc-title[b-8fxbp4d1ji] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mc-title-icon[b-8fxbp4d1ji] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 24px;
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
}

.mc-title h1[b-8fxbp4d1ji] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Clientes). */
.mc-header-actions[b-8fxbp4d1ji] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* Segunda fila */
/* C5: tres campos donde antes había dos (modo, ejercicio y el insertador de elementos). Los dos
   primeros son selectores cortos, así que se les da lo justo y el ancho sobrante va al insertador,
   que es el que lleva los parámetros del chip. */
.mc-formbar[b-8fxbp4d1ji] {
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(150px, auto) minmax(560px, 1fr);
    gap: 12px;
    flex: 0 0 auto;
}

/* C5: el aviso de que las cifras pueden no estar al día. Ámbar y no rojo: la memoria se exporta
   igual, pero quien la entrega tiene que saberlo. */
.mc-aviso[b-8fxbp4d1ji] {
    flex: 0 0 auto;
    padding: .55rem .75rem;
    border: 1px solid #f0dcae;
    border-radius: 8px;
    background: #fdf4e3;
    color: #8a5a00;
    font-size: .86rem;
}

.mc-name-field[b-8fxbp4d1ji],
.mc-insert-field[b-8fxbp4d1ji] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
}

    .mc-name-field label[b-8fxbp4d1ji],
    .mc-insert-field label[b-8fxbp4d1ji] {
        flex: 0 0 auto;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--erp-muted);
        white-space: nowrap;
    }

.memoria-nombre[b-8fxbp4d1ji],
.mc-select[b-8fxbp4d1ji],
.mc-param-input[b-8fxbp4d1ji] {
    height: 36px;
    min-width: 0;
    padding: 0 11px;
    font-size: .9rem;
    color: var(--erp-text);
    background: var(--erp-bg);
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}

.memoria-nombre[b-8fxbp4d1ji] {
    flex: 1 1 auto;
    min-width: 180px;
}

.mc-select[b-8fxbp4d1ji] {
    flex: 1 1 150px;
    min-width: 0;
}

.mc-param-input[b-8fxbp4d1ji] {
    flex: 1 1 120px;
    min-width: 0;
}

.mc-insert-field .btn-primary[b-8fxbp4d1ji] {
    flex: 1 1 110px;
    min-width: 0;
    padding-inline: 12px;
}

.memoria-nombre:focus[b-8fxbp4d1ji],
.mc-select:focus[b-8fxbp4d1ji],
.mc-param-input:focus[b-8fxbp4d1ji] {
    outline: none;
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px var(--erp-primary-soft);
}

/* Botones */
.memoria-page .btn[b-8fxbp4d1ji] {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, transform .05s;
}

    .memoria-page .btn:active[b-8fxbp4d1ji] {
        transform: translateY(1px);
    }

.memoria-page .btn-success[b-8fxbp4d1ji] {
    background: var(--erp-success);
    border-color: var(--erp-success);
    color: #fff;
}

.memoria-page .btn-primary[b-8fxbp4d1ji] {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: #fff;
}

    .memoria-page .btn-primary:hover[b-8fxbp4d1ji] {
        background: var(--erp-primary-hover);
        border-color: var(--erp-primary-hover);
    }

/* Editor */
.mc-editor-area[b-8fxbp4d1ji] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.mc-word-panel[b-8fxbp4d1ji] {
    height: 100%;
    min-height: 0;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
}

/* Hueco del editor mientras se cargan ejercicio, cifras y documento. Sin `::deep`: el div es de esta
   página, no del árbol de Syncfusion. */
.mc-editor-cargando[b-8fxbp4d1ji] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--erp-text-muted, #64748b);
    font-size: .9rem;
}

/* Syncfusion RTE */
[b-8fxbp4d1ji] .mc-word-editor,
[b-8fxbp4d1ji] .mc-word-editor.e-richtexteditor {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    [b-8fxbp4d1ji] .mc-word-editor .e-rte-container,
    [b-8fxbp4d1ji] .mc-word-editor .e-rte-content,
    [b-8fxbp4d1ji] .mc-word-editor .e-content {
        height: 100% !important;
        min-height: 0 !important;
    }

    [b-8fxbp4d1ji] .mc-word-editor .e-rte-content {
        overflow: auto;
    }

/* Contenido del editor */
[b-8fxbp4d1ji] .mc-token {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--erp-primary-soft);
    border: 1px solid #bfdbfe;
    color: var(--erp-primary-hover);
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

[b-8fxbp4d1ji] .mc-bloque {
    display: block;
    margin: 8px 0;
}

[b-8fxbp4d1ji] .mc-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
}

    [b-8fxbp4d1ji] .mc-tabla th,
    [b-8fxbp4d1ji] .mc-tabla td {
        border: 1px solid var(--erp-border);
        padding: 6px 10px;
        text-align: left;
    }

    [b-8fxbp4d1ji] .mc-tabla th {
        background: var(--erp-bg);
        font-weight: 700;
    }

    [b-8fxbp4d1ji] .mc-tabla tbody tr:nth-child(even) td {
        background: #fafbfd;
    }

/* Responsive */
/* Por debajo de 1380px los tres campos de la segunda fila se apilan, cada uno a todo el ancho. */
@media (max-width: 1380px) {
    .mc-formbar[b-8fxbp4d1ji] {
        grid-template-columns: 1fr;
    }

    .mc-insert-field[b-8fxbp4d1ji] {
        flex-wrap: wrap;
    }

        .mc-insert-field label[b-8fxbp4d1ji] {
            flex-basis: 100%;
        }

    .mc-select[b-8fxbp4d1ji] {
        flex: 0 1 220px;
        width: 220px;
    }

    .mc-param-input[b-8fxbp4d1ji] {
        flex: 1 1 240px;
        min-width: 200px;
    }

    .mc-insert-field .btn-primary[b-8fxbp4d1ji] {
        flex: 0 0 120px;
        width: 120px;
    }
}

/* Tablet: el título envuelve en vez de empujar la barra, que ya se repliega sola al menú «···». */
@media (max-width: 900px) {
    .mc-title h1[b-8fxbp4d1ji] {
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.15;
    }
}

/* Con la barra replegada, el título tampoco se queda en una línea cortada. */
.mc-topbar.command-bar-host-collapsed .mc-title h1[b-8fxbp4d1ji] {
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 760px) {
    .memoria-page[b-8fxbp4d1ji] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .mc-formbar[b-8fxbp4d1ji] {
        gap: 10px;
    }

    .mc-name-field[b-8fxbp4d1ji],
    .mc-insert-field[b-8fxbp4d1ji] {
        flex-wrap: wrap;
    }

        .mc-name-field label[b-8fxbp4d1ji],
        .mc-insert-field label[b-8fxbp4d1ji] {
            flex-basis: 100%;
        }

        .memoria-nombre[b-8fxbp4d1ji],
        .mc-select[b-8fxbp4d1ji],
        .mc-param-input[b-8fxbp4d1ji],
        .mc-insert-field .btn[b-8fxbp4d1ji] {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
        }

    .mc-editor-area[b-8fxbp4d1ji] {
        overflow: visible;
    }

    .mc-word-panel[b-8fxbp4d1ji] {
        height: 70dvh;
        min-height: 420px;
    }

    /* La barra de herramientas del editor no puede ensanchar la página: se desplaza dentro de su caja. */
    [b-8fxbp4d1ji] .mc-word-editor,
    [b-8fxbp4d1ji] .mc-word-editor .e-toolbar {
        max-width: 100%;
    }
}

/* Móvil: icono del título más pequeño para dejarle sitio al texto y a la barra. */
@media (max-width: 480px) {
    .mc-title-icon[b-8fxbp4d1ji] {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .mc-title h1[b-8fxbp4d1ji] {
        font-size: 1.12rem;
    }

    .mc-word-panel[b-8fxbp4d1ji] {
        min-height: 360px;
    }
}

/* Título en dos fases, como en Diario: primero en UNA línea (así la barra ve que falta sitio y pasa a solo
   iconos y luego al «···»); solo con la barra ya replegada del todo, el título envuelve. Sin esto, en móvil
   el título se parte palabra a palabra y los botones conservan su texto. */
.mc-title h1[b-8fxbp4d1ji] {
    white-space: nowrap;
}

.mc-topbar.command-bar-host-collapsed .mc-title h1[b-8fxbp4d1ji] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* El bloque del título no cede hasta que la barra esté replegada del todo (igual que en Diario). */
.mc-topbar > .mc-title[b-8fxbp4d1ji] {
    flex: 0 0 auto;
    min-width: 0;
}

.mc-topbar.command-bar-host-collapsed > .mc-title[b-8fxbp4d1ji] {
    flex: 1 1 auto;
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/ComponentesPage.razor.rz.scp.css */
/* Pantalla de componentes (Producción PR1). CSS aislado del componente: todo lo que se ve aquí se
   define aquí, sin depender de hojas globales que otra pantalla podría cambiar. */

/* Todo el ancho, como las demás pantallas: el borde lo pone .main-body. */
.comp-page[b-r7mzcl5li6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
}

.comp-header[b-r7mzcl5li6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.comp-title[b-r7mzcl5li6] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #22303c;
}

.comp-subtitle[b-r7mzcl5li6] {
    margin-top: .2rem;
    color: #61707d;
    font-size: .85rem;
}

.comp-panel[b-r7mzcl5li6] {
    padding: 1rem 1.1rem;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
}

/* Maestro/detalle: la lista de compuestos a la izquierda y el editor a la derecha. En pantallas
   estrechas se apilan (la lista arriba). */
.comp-layout[b-r7mzcl5li6] {
    display: grid;
    grid-template-columns: minmax(22rem, 2fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .comp-layout[b-r7mzcl5li6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.comp-maestro[b-r7mzcl5li6] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* El título encabeza el panel: el campo «artículo a componer» que iba encima es ahora la fila de alta
   de la propia rejilla, así que ya no hay nada de lo que separarlo con una línea. */
.comp-maestro-titulo[b-r7mzcl5li6] {
    font-size: .95rem;
    font-weight: 600;
    color: #22303c;
}

/* ── CELDAS DE LA REJILLA DEL MAESTRO ────────────────────────────────────────────────────────────
   Mismo criterio que la rejilla de componentes: la celda no parece un campo, el marco aparece donde
   está el cursor. Las dos rejillas de la pantalla se ven y se manejan igual. */
.comp-celda[b-r7mzcl5li6] {
    width: 100%;
    padding: .2rem .35rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font: inherit;
    color: inherit;
}

/* Una celda que SE PUEDE cambiar tiene que parecerlo ANTES de tocarla: sin esto la columna Unidades se
   ve como texto plano y nadie prueba a escribir en ella. Marca discreta —fondo tenue y borde punteado—
   que no convierte la lista en un formulario, pero dice dónde se teclea. */
.comp-celda:not([readonly])[b-r7mzcl5li6] {
    border-color: #dbe4ec;
    border-style: dashed;
    background: #fbfcfd;
}

.comp-celda:focus[b-r7mzcl5li6] {
    outline: none;
    border-color: #2b7cd3;
    border-style: solid;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(43, 124, 211, .15);
}

.comp-celda:focus:not(.comp-editing)[b-r7mzcl5li6] {
    caret-color: transparent;
}

.comp-celda.comp-editing[b-r7mzcl5li6] {
    border-color: #1a6fc4;
    background: #fff;
    caret-color: auto;
}

.comp-celda[readonly][b-r7mzcl5li6] {
    cursor: default;
}

.comp-celda-num[b-r7mzcl5li6] {
    text-align: right;
}

.comp-celda-codigo[b-r7mzcl5li6] {
    font-variant-numeric: tabular-nums;
}

/* Fila de alta del maestro: separada del cuerpo, como el pie de la rejilla de componentes. */
.comp-alta > td[b-r7mzcl5li6] {
    padding-top: .5rem;
    border-top: 1px solid #e3e9ef;
    vertical-align: middle;
}

.comp-alta-pista[b-r7mzcl5li6] {
    color: #8a97a3;
    font-size: .75rem;
}

.comp-pista[b-r7mzcl5li6] {
    color: #8a97a3;
    font-size: .75rem;
}

/* Dentro del maestro los cuadros ocupan el ancho disponible, no el ancho fijo de los filtros de abajo. */
.comp-maestro .comp-filtro[b-r7mzcl5li6] {
    flex: 1 1 12rem;
    min-width: 0;
}

.comp-maestro .comp-filtro[b-r7mzcl5li6]  .comp-input {
    width: 100%;
}

.comp-filtros-lista[b-r7mzcl5li6] {
    margin-bottom: .25rem;
}

/* Filas de la lista: una fila = un artículo compuesto; se elige con clic. */
.comp-lista .comp-fila[b-r7mzcl5li6] {
    cursor: pointer;
}

.comp-lista .comp-fila-sel td[b-r7mzcl5li6] {
    background: #e8f1fb;
    color: #1c4f86;
    font-weight: 600;
}

.comp-lista .comp-fila-sel:hover td[b-r7mzcl5li6] {
    background: #e8f1fb;
}

/* Detalle sin artículo elegido: la tabla de componentes vacía, con la indicación en su fila. */
.comp-detalle-vacio[b-r7mzcl5li6] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: #61707d;
    font-size: .9rem;
}

.comp-detalle-icono[b-r7mzcl5li6] {
    font-size: 2.4rem;
    color: #b7c2cc;
}

.comp-panel-title[b-r7mzcl5li6] {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #22303c;
}

.comp-panel-desc[b-r7mzcl5li6] {
    margin: 0 0 .9rem;
    color: #61707d;
    font-size: .85rem;
}

/* Filtros: los dos cuadros de búsqueda y los botones, en una fila que se pliega en pantallas estrechas. */
.comp-filtros[b-r7mzcl5li6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
}

.comp-filtro[b-r7mzcl5li6] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.comp-label[b-r7mzcl5li6] {
    color: #61707d;
    font-size: .78rem;
}

/* Los inputs de filtro los pinta CampoConBuscador (un componente HIJO), así que el atributo de
   aislamiento de esta hoja no les llega: hace falta ::deep desde un ancestro propio. El mismo
   selector vale para los inputs del rango, que sí son de esta página. */
.comp-filtro[b-r7mzcl5li6]  .comp-input {
    width: 15rem;
    max-width: 100%;
    padding: .4rem .55rem;
    border: 1px solid #d3dce4;
    border-radius: 6px;
    font-size: .88rem;
}

.comp-filtro[b-r7mzcl5li6]  .comp-input:focus {
    border-color: #4a90d9;
    outline: none;
}

.comp-btn[b-r7mzcl5li6] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .8rem;
    border: 1px solid #d3dce4;
    border-radius: 6px;
    background: #fff;
    color: #35434f;
    font-size: .85rem;
    cursor: pointer;
}

.comp-btn:hover:not(:disabled)[b-r7mzcl5li6] {
    background: #f4f7fa;
}

.comp-btn:disabled[b-r7mzcl5li6] {
    opacity: .55;
    cursor: default;
}

.comp-btn-primario[b-r7mzcl5li6] {
    border-color: #2f6fb0;
    background: #2f6fb0;
    color: #fff;
}

.comp-btn-primario:hover:not(:disabled)[b-r7mzcl5li6] {
    background: #275c93;
}

.comp-btn-ico[b-r7mzcl5li6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #61707d;
    cursor: pointer;
}

.comp-btn-ico:hover:not(:disabled)[b-r7mzcl5li6] {
    background: #f0f4f8;
    color: #22303c;
}

.comp-btn-ico:disabled[b-r7mzcl5li6] {
    opacity: .35;
    cursor: default;
}

/* La tabla desborda por su cuenta: la página nunca se desplaza en horizontal. */
/* Tablas algo más largas: un suelo de alto para que se vean más filas sin desplazar la página. */
.comp-tabla-envoltorio[b-r7mzcl5li6] {
    overflow-x: auto;
    min-height: 24rem;
}

/* La tabla del editor (otro componente, compartido con la ficha del artículo): el mismo alto, solo en esta página. */
.comp-detalle[b-r7mzcl5li6]  .ec-tabla-envoltorio {
    min-height: 24rem;
}

.comp-tabla[b-r7mzcl5li6] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.comp-tabla th[b-r7mzcl5li6] {
    padding: .45rem .55rem;
    border-bottom: 1px solid #e3e9ef;
    color: #61707d;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.comp-tabla td[b-r7mzcl5li6] {
    padding: .45rem .55rem;
    border-bottom: 1px solid #f0f4f8;
    color: #35434f;
}

.comp-tabla tbody tr:hover[b-r7mzcl5li6] {
    background: #f8fafc;
}

.comp-num[b-r7mzcl5li6] {
    text-align: right;
    white-space: nowrap;
}

.comp-codigo[b-r7mzcl5li6] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.comp-col-ir[b-r7mzcl5li6] {
    width: 3rem;
    text-align: center;
}

.comp-vacio[b-r7mzcl5li6] {
    padding: 1.4rem .55rem;
    color: #8a97a3;
    font-size: .85rem;
    text-align: center;
}

.comp-pager[b-r7mzcl5li6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .7rem;
}

.comp-pageinfo[b-r7mzcl5li6] {
    color: #61707d;
    font-size: .8rem;
}

.comp-error[b-r7mzcl5li6] {
    margin-top: .8rem;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #fdecea;
    color: #a02020;
    font-size: .85rem;
}

.comp-resultado[b-r7mzcl5li6] {
    margin: .2rem 0 .8rem;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: #eaf6ec;
    color: #1d6b2c;
    font-size: .85rem;
}

.comp-destacado[b-r7mzcl5li6] {
    font-weight: 600;
    color: #22303c;
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/Components/OperarioModal.razor.rz.scp.css */
.ope-modal-backdrop[b-sb17sedthw] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.ope-modal-card[b-sb17sedthw] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.ope-modal-card .material-symbols-outlined[b-sb17sedthw] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ope-modal-header[b-sb17sedthw] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.ope-modal-title[b-sb17sedthw] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.ope-modal-body[b-sb17sedthw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tres columnas: el codigo es un campo corto y no debe ocupar la misma anchura que el nombre, que es
   el que necesita sitio. */
.ope-modal-grid[b-sb17sedthw] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.ope-modal-field[b-sb17sedthw] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ope-modal-field-ancho[b-sb17sedthw] {
    grid-column: span 2;
}

.ope-modal-label[b-sb17sedthw] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.ope-modal-ayuda[b-sb17sedthw] {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Citas (RV3): los botones del calendario del móvil, en una línea bajo la dirección. */
.ope-modal-acciones-linea[b-sb17sedthw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.ope-modal-input[b-sb17sedthw] {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .ope-modal-input[b-sb17sedthw]::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .ope-modal-input:focus[b-sb17sedthw] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    .ope-modal-input:disabled[b-sb17sedthw] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

/* El campo obligatorio que falta se enciende al pulsar Guardar, no mientras se teclea. */
.ope-modal-input.campo-mal[b-sb17sedthw] {
    border-color: #fca5a5;
    background: #fff5f5;
}

.ope-modal-toggle[b-sb17sedthw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

.ope-modal-toggle input[type="checkbox"][b-sb17sedthw] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.ope-modal-toggle span[b-sb17sedthw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ope-modal-toggle strong[b-sb17sedthw] {
    font-size: 13px;
    font-weight: 850;
    color: #0f172a;
}

.ope-modal-toggle small[b-sb17sedthw] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.ope-modal-actions[b-sb17sedthw] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

.ope-modal-actions .form-aviso[b-sb17sedthw] {
    margin-right: auto;
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

.req[b-sb17sedthw] {
    color: #dc2626;
}

/* Botones con el mismo estilo que el resto de modales de mantenimiento. */
.btn[b-sb17sedthw] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-sb17sedthw] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-sb17sedthw] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.btn-accept[b-sb17sedthw] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-sb17sedthw] {
        background: #f3f4f6;
    }

.btn-cancel[b-sb17sedthw] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-sb17sedthw] {
        background: #4b5563;
    }

/* Pantallas pequenas: el modal ocupa toda la pantalla y la rejilla pasa a una columna. */
@media (max-width: 560px) {
    .ope-modal-backdrop[b-sb17sedthw] {
        padding: 0;
    }

    .ope-modal-card[b-sb17sedthw] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .ope-modal-grid[b-sb17sedthw] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ope-modal-field-ancho[b-sb17sedthw] {
        grid-column: span 1;
    }
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/HorasTrabajoPage.razor.rz.scp.css */
/* Pantalla de HORAS TRABAJADAS (OF4). El CSS de Blazor es scoped por componente, así que no se
   comparte fichero con las pantallas hermanas: se copia el molde del listado de órdenes con el prefijo
   propio (`ord-` → `hrs-`). Lo que sí se comparte es el vocabulario de clases `fc-*` (filtros, tabla)
   para que todas las pantallas del módulo se vean iguales. Propio de esta: el panel lateral «Por
   operario» con su barra, el pie de totales y los enlaces de las celdas. */

.hrs-page[b-7f941sctjn],
.hrs-page *[b-7f941sctjn],
.hrs-page *[b-7f941sctjn]::before,
.hrs-page *[b-7f941sctjn]::after {
    box-sizing: border-box;
}

.hrs-page[b-7f941sctjn] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-gap);
    animation: hrsPageIn-b-7f941sctjn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hrs-heading[b-7f941sctjn],
.hrs-cuerpo[b-7f941sctjn],
.hrs-list-panel[b-7f941sctjn],
.fc-filter-item[b-7f941sctjn],
.fc-filter-item-search[b-7f941sctjn],
.fc-filter-searchbox[b-7f941sctjn] {
    min-inline-size: 0;
}

/* CABECERA */

.hrs-heading[b-7f941sctjn] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    .hrs-heading > div:first-child[b-7f941sctjn] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .hrs-heading.command-bar-host-collapsed > div:first-child[b-7f941sctjn] {
        flex: 1 1 auto;
    }

.hrs-title[b-7f941sctjn] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.hrs-subtitle[b-7f941sctjn] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.hrs-heading.command-bar-host-collapsed .hrs-title[b-7f941sctjn],
.hrs-heading.command-bar-host-collapsed .hrs-subtitle[b-7f941sctjn] {
    white-space: normal;
    overflow-wrap: break-word;
}

.hrs-header-actions[b-7f941sctjn] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* KPIs */

.hrs-kpis[b-7f941sctjn] {
    inline-size: 100%;
    min-inline-size: 0;
}

/* CUERPO: listado a la izquierda, «por operario» a la derecha */

.hrs-cuerpo[b-7f941sctjn] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: var(--fc-gap);
    align-items: start;
    min-block-size: 0;
}

.hrs-list-panel[b-7f941sctjn] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--fc-inner-gap);
    min-inline-size: 0;
}

/* FILTROS: búsqueda ancha + dos fechas + operario + proyecto */

.hrs-filters[b-7f941sctjn] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-7f941sctjn] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-7f941sctjn] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

/* Los inputs de operario y proyecto los pinta CampoConBuscador (componente HIJO): el atributo de
   aislamiento de esta hoja no les llega, así que el aspecto del filtro va con ::deep desde .hrs-filters.
   El mismo selector cubre los inputs propios de la página (búsqueda, fechas), que también cuelgan de ahí.
   El desplegable de origen comparte el aspecto de los inputs. */

.hrs-filters[b-7f941sctjn]  .fc-filter-input,
.fc-filter-select[b-7f941sctjn] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    padding-block: 0;
    padding-inline: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-filter-select[b-7f941sctjn] {
    cursor: pointer;
}

.hrs-filters[b-7f941sctjn]  .fc-filter-input-search {
    padding-inline-start: 2.5rem !important;
}

.hrs-filters[b-7f941sctjn]  .fc-filter-input::placeholder {
    color: #9ca3af;
}

.hrs-filters[b-7f941sctjn]  .fc-filter-input:focus,
.fc-filter-select:focus[b-7f941sctjn] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* El campo con lupa vive dentro del filtro: hereda el alto y el input ocupa todo el ancho. El hueco
   derecho para la lupa lo pone el propio componente (derivado del ancho del botón): aquí no se toca. */

.hrs-page[b-7f941sctjn]  .ccb-selector {
    position: relative;
    inline-size: 100%;
}

.hrs-page[b-7f941sctjn]  .ccb-icon-btn {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .hrs-page[b-7f941sctjn]  .ccb-icon-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

/* TABLA */

.fc-tabla[b-7f941sctjn] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.hrs-page[b-7f941sctjn]  .tp-panel {
    min-height: auto;
}

/* Enlaces dentro de las celdas (parte, orden, proyecto). Van con `::deep`: el markup es plantilla de
   la tabla y vive dentro del componente. */

.hrs-page[b-7f941sctjn]  .hrs-enlace {
    color: #1d4ed8;
    font-weight: 800;
    text-decoration: none;
}

    .hrs-page[b-7f941sctjn]  .hrs-enlace:hover {
        text-decoration: underline;
    }

/* Distintivo del parte de servicio técnico cuando se listan todos los orígenes (ST4). */
.hrs-page[b-7f941sctjn]  .hrs-icono-origen {
    font-size: 0.95rem;
    vertical-align: -0.15rem;
    margin-inline-end: 0.15rem;
    color: #64748b;
}

.hrs-page[b-7f941sctjn]  .hrs-vacio {
    color: #9ca3af;
}

/* PIE DE TOTALES (los del FILTRO ENTERO, que trae la consulta) */

.hrs-pie[b-7f941sctjn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-gap);
    padding-block: 0.5rem;
    padding-inline: var(--fc-panel-pad);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #f8fafc;
    font-size: var(--fc-font-text);
}

.hrs-pie-etiqueta[b-7f941sctjn] {
    margin-inline-end: auto;
    font-weight: 850;
    color: #475569;
}

.hrs-pie-valor[b-7f941sctjn] {
    font-weight: 800;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

.hrs-pie-importe[b-7f941sctjn] {
    color: #b45309;
}

/* PANEL LATERAL «POR OPERARIO» */

.hrs-lateral[b-7f941sctjn] {
    display: flex;
    flex-direction: column;
    gap: var(--fc-inner-gap);
    padding: var(--fc-panel-pad);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    box-shadow: var(--fc-shadow);
    min-inline-size: 0;
    max-block-size: 100%;
    overflow-y: auto;
}

.hrs-lateral-titulo[b-7f941sctjn] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.hrs-lateral-vacio[b-7f941sctjn] {
    font-size: var(--fc-font-small);
    color: #6b7280;
    line-height: 1.4;
}

.hrs-operarios[b-7f941sctjn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.hrs-operario[b-7f941sctjn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "nombre cifras"
        "partes cifras"
        "barra  barra";
    gap: 0.15rem 0.5rem;
}

.hrs-operario-nombre[b-7f941sctjn] {
    grid-area: nombre;
    font-size: var(--fc-font-text);
    font-weight: 800;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrs-operario-cifras[b-7f941sctjn] {
    grid-area: cifras;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.hrs-operario-horas[b-7f941sctjn] {
    font-size: var(--fc-font-text);
    font-weight: 850;
    color: #1d4ed8;
}

.hrs-operario-coste[b-7f941sctjn] {
    font-size: var(--fc-font-small);
    color: #b45309;
}

.hrs-operario-partes[b-7f941sctjn] {
    grid-area: partes;
    font-size: var(--fc-font-small);
    color: #6b7280;
}

.hrs-barra[b-7f941sctjn] {
    grid-area: barra;
    margin-block-start: 0.25rem;
    block-size: 0.35rem;
    border-radius: 999rem;
    background: #eef2f7;
    overflow: hidden;
}

.hrs-barra-relleno[b-7f941sctjn] {
    block-size: 100%;
    border-radius: 999rem;
    background: #60a5fa;
}

/* ANIMACIÓN */

@keyframes hrsPageIn-b-7f941sctjn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE: al estrechar caen primero las columnas que menos dicen. «Fecha», «Parte», «Concepto»,
   «Horas» y «Coste» permanecen visibles el máximo tiempo, y el panel lateral pasa debajo. */

@media (max-width: 1440px) {
    .hrs-page[b-7f941sctjn]  .fc-col-observaciones {
        display: none;
    }
}

@media (max-width: 1280px) {
    .hrs-page[b-7f941sctjn]  .fc-col-proyecto {
        display: none;
    }
}

@media (max-width: 1100px) {
    .hrs-page[b-7f941sctjn]  .fc-col-costehora {
        display: none;
    }
}

@media (max-width: 920px) {
    .hrs-page[b-7f941sctjn]  .fc-col-orden {
        display: none;
    }
}

@media (max-width: 1100px) {
    .hrs-cuerpo[b-7f941sctjn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .hrs-lateral[b-7f941sctjn] {
        max-block-size: none;
    }
}

@media (max-width: 80rem) {
    .hrs-filters[b-7f941sctjn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-7f941sctjn] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .hrs-page[b-7f941sctjn] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .hrs-filters[b-7f941sctjn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .hrs-pie[b-7f941sctjn] {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hrs-page[b-7f941sctjn],
    .hrs-page *[b-7f941sctjn],
    .hrs-page *[b-7f941sctjn]::before,
    .hrs-page *[b-7f941sctjn]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/OperariosPage.razor.rz.scp.css */
.ope-page[b-8zxhy5zyyc],
.ope-page *[b-8zxhy5zyyc],
.ope-page *[b-8zxhy5zyyc]::before,
.ope-page *[b-8zxhy5zyyc]::after {
    box-sizing: border-box;
}

.ope-page[b-8zxhy5zyyc] {
    /* Rellena el alto disponible que le cede .main-body (sin numero magico).
       min-height actua como suelo de comodidad: si el viewport es muy bajo,
       la pagina crece y deja que .main-body haga scroll en vez de aplastar el grid. */
    height: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: opePageIn-b-8zxhy5zyyc 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ope-header[b-8zxhy5zyyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de titulo (fase 1): se mantiene en una linea y NO cede; los botones del CommandBar se
       repliegan primero. Solo cede cuando el CommandBar ya esta totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .ope-header > div:first-child[b-8zxhy5zyyc] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .ope-header.command-bar-host-collapsed > div:first-child[b-8zxhy5zyyc] {
        flex: 1 1 auto;
    }

.ope-title[b-8zxhy5zyyc] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una linea. */
    white-space: nowrap;
}

.ope-subtitle[b-8zxhy5zyyc] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una linea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya esta totalmente replegado -> el texto del titulo cede y envuelve. */
.ope-header.command-bar-host-collapsed .ope-title[b-8zxhy5zyyc],
.ope-header.command-bar-host-collapsed .ope-subtitle[b-8zxhy5zyyc] {
    white-space: normal;
    overflow-wrap: break-word;
}

.ope-header-actions[b-8zxhy5zyyc] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.ope-error-banner[b-8zxhy5zyyc] {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    font-size: 13px;
}

.ope-filters[b-8zxhy5zyyc] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.ope-filter-item[b-8zxhy5zyyc],
.ope-filter-item-search[b-8zxhy5zyyc] {
    min-width: 0;
}

.ope-filter-searchbox[b-8zxhy5zyyc] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ope-filter-search-icon[b-8zxhy5zyyc] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.ope-filter-input[b-8zxhy5zyyc] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ope-filter-input-search[b-8zxhy5zyyc] {
    padding-left: 38px;
}

.ope-filter-input[b-8zxhy5zyyc]::placeholder {
    color: #9ca3af;
}

.ope-filter-input:focus[b-8zxhy5zyyc] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Casilla «Ver inactivos»: cambia lo que se pide, no solo lo que se pinta. */
.ope-filter-check[b-8zxhy5zyyc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.ope-filter-check input[type="checkbox"][b-8zxhy5zyyc] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2563eb;
}

/* TABLA */

.ope-table-shell[b-8zxhy5zyyc] {
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.ope-table-scroll[b-8zxhy5zyyc] {
    min-height: 0;
    overflow-x: auto;
}

.ope-table[b-8zxhy5zyyc] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

/* Cabecera fija: se mantiene visible mientras el cuerpo hace scroll. */
.ope-table thead th[b-8zxhy5zyyc] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.ope-table thead th.ope-th-plain[b-8zxhy5zyyc] {
    padding: 0 14px;
    height: 42px;
    text-align: center;
}

/* Boton de orden: ocupa toda la celda de cabecera para que el area de clic sea la columna entera. */
.ope-sort[b-8zxhy5zyyc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .ope-sort:hover[b-8zxhy5zyyc] {
        background: #f1f5f9;
        color: #334155;
    }

    .ope-sort:focus-visible[b-8zxhy5zyyc] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.ope-sort-center[b-8zxhy5zyyc] {
    justify-content: center;
}

.ope-sort-icon[b-8zxhy5zyyc] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto no baile). */
.ope-sort-icon-inactivo[b-8zxhy5zyyc] {
    opacity: 0;
}

.ope-sort:hover .ope-sort-icon-inactivo[b-8zxhy5zyyc],
.ope-sort:focus-visible .ope-sort-icon-inactivo[b-8zxhy5zyyc] {
    opacity: 1;
}

.ope-table tbody td[b-8zxhy5zyyc] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ope-table tbody tr[b-8zxhy5zyyc] {
    transition: background 0.14s ease;
}

    .ope-table tbody tr:hover td[b-8zxhy5zyyc] {
        background: #f8fbff;
    }

    .ope-table tbody tr:last-child td[b-8zxhy5zyyc] {
        border-bottom: none;
    }

/* Anchos de columna: «Nombre» absorbe el espacio sobrante; el resto es contenido. */
.ope-col-codigo[b-8zxhy5zyyc] {
    width: 140px;
}

.ope-col-coste[b-8zxhy5zyyc] {
    width: 140px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ope-col-empleado[b-8zxhy5zyyc] {
    width: 220px;
}

.ope-col-estado[b-8zxhy5zyyc] {
    width: 110px;
    text-align: center;
}

.ope-col-acciones[b-8zxhy5zyyc] {
    width: 110px;
    text-align: center;
}

/* Usuario enlazado: el icono y el nombre van juntos. */
.ope-usuario-celda[b-8zxhy5zyyc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ope-usuario-icono[b-8zxhy5zyyc] {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

/* Sin usuario NO es un hueco por rellenar: un operario de taller no siempre entra en el ERP. */
.ope-sin-usuario[b-8zxhy5zyyc] {
    color: #cbd5e1;
}

/* ESTADO VACIO */

.ope-empty[b-8zxhy5zyyc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 20px;
    text-align: center;
}

.ope-empty-icon[b-8zxhy5zyyc] {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.ope-empty-title[b-8zxhy5zyyc] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.ope-empty-text[b-8zxhy5zyyc] {
    font-size: 12px;
    color: #94a3b8;
    max-width: 420px;
}

/* PAGINADOR */

.ope-pager[b-8zxhy5zyyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.ope-pager-info[b-8zxhy5zyyc] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.ope-pager-nav[b-8zxhy5zyyc] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ope-pager-btn[b-8zxhy5zyyc],
.ope-pager-page[b-8zxhy5zyyc] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .ope-pager-btn:hover:not(:disabled)[b-8zxhy5zyyc],
    .ope-pager-page:hover[b-8zxhy5zyyc] {
        background: #eef2f7;
        color: #1f2937;
    }

    .ope-pager-btn:disabled[b-8zxhy5zyyc] {
        opacity: 0.4;
        cursor: default;
    }

    .ope-pager-btn .material-symbols-outlined[b-8zxhy5zyyc] {
        font-size: 18px;
        pointer-events: none;
    }

.ope-pager-page-active[b-8zxhy5zyyc],
.ope-pager-page-active:hover[b-8zxhy5zyyc] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila. */
.ope-row-actions[b-8zxhy5zyyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ope-action-btn[b-8zxhy5zyyc] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .ope-action-btn .material-symbols-outlined[b-8zxhy5zyyc] {
        font-size: 18px;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

.ope-action-btn-toggle[b-8zxhy5zyyc] {
    color: #475569;
}

    .ope-action-btn-toggle:hover[b-8zxhy5zyyc] {
        background: #eef2f7;
        color: #1f2937;
    }

.ope-action-btn-edit[b-8zxhy5zyyc] {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .ope-action-btn-edit:hover[b-8zxhy5zyyc] {
        background: rgba(0, 40, 142, 0.1);
    }

/* Distintivos de fila: activo e inactivo. */
.ope-badge[b-8zxhy5zyyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ope-badge-activo[b-8zxhy5zyyc] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.ope-badge-inactivo[b-8zxhy5zyyc] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* ANIMACIONES */

@keyframes opePageIn-b-8zxhy5zyyc {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .ope-page[b-8zxhy5zyyc] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }
}

@media (max-height: 720px) {
    .ope-page[b-8zxhy5zyyc] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .ope-table-shell[b-8zxhy5zyyc] {
        min-height: 320px;
    }
}

/* Columnas replegables: primero el usuario enlazado, despues el coste. «Codigo», «Nombre», «Estado» y
   «Acciones» permanecen siempre visibles. */
@media (max-width: 860px) {
    .ope-col-empleado[b-8zxhy5zyyc] {
        display: none;
    }
}

@media (max-width: 700px) {
    .ope-col-coste[b-8zxhy5zyyc] {
        display: none;
    }
}

@media (max-width: 640px) {
    .ope-title[b-8zxhy5zyyc] {
        font-size: 20px;
    }

    .ope-subtitle[b-8zxhy5zyyc] {
        font-size: 12px;
    }

    .ope-filters[b-8zxhy5zyyc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ope-pager[b-8zxhy5zyyc] {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ope-page[b-8zxhy5zyyc],
    .ope-page *[b-8zxhy5zyyc],
    .ope-page *[b-8zxhy5zyyc]::before,
    .ope-page *[b-8zxhy5zyyc]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/OrdenesFabricacionPage.razor.rz.scp.css */
/* Listado de ÓRDENES DE FABRICACIÓN (OF3). Copia del CSS del listado de partes con el prefijo de la página
   cambiado (`prod-` → `ord-`): el CSS de Blazor es scoped por componente, así que no puede compartirse; lo
   que sí se comparte es el vocabulario de clases `fc-*` (filtros, insignias, tabla, modal) para que las
   pantallas de documentos se vean iguales. Añadidos aquí: la fila de casillas y el bloque de avisos del
   cierre, que el listado de partes no tiene. */

.ord-page[b-oidrvkv0cn],
.ord-page *[b-oidrvkv0cn],
.ord-page *[b-oidrvkv0cn]::before,
.ord-page *[b-oidrvkv0cn]::after {
    box-sizing: border-box;
}

.ord-page[b-oidrvkv0cn] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--fc-gap);
    animation: ordPageIn-b-oidrvkv0cn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ord-heading[b-oidrvkv0cn],
.ord-list-panel[b-oidrvkv0cn],
.fc-filter-item[b-oidrvkv0cn],
.fc-filter-item-search[b-oidrvkv0cn],
.fc-filter-searchbox[b-oidrvkv0cn] {
    min-inline-size: 0;
}

/* CABECERA */

.ord-heading[b-oidrvkv0cn] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    .ord-heading > div:first-child[b-oidrvkv0cn] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .ord-heading.command-bar-host-collapsed > div:first-child[b-oidrvkv0cn] {
        flex: 1 1 auto;
    }

.ord-title[b-oidrvkv0cn] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ord-subtitle[b-oidrvkv0cn] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.ord-heading.command-bar-host-collapsed .ord-title[b-oidrvkv0cn],
.ord-heading.command-bar-host-collapsed .ord-subtitle[b-oidrvkv0cn] {
    white-space: normal;
    overflow-wrap: break-word;
}

.ord-header-actions[b-oidrvkv0cn] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* PANEL LISTADO */

.ord-list-panel[b-oidrvkv0cn] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS: búsqueda ancha + situación + cliente + proyecto + dos fechas. */

.ord-filters[b-oidrvkv0cn] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-oidrvkv0cn] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-oidrvkv0cn] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

/* Los inputs de cliente y proyecto los pinta CampoConBuscador (componente HIJO): el atributo de
   aislamiento de esta hoja no les llega, así que el aspecto del filtro va con ::deep desde .ord-filters.
   El mismo selector cubre los inputs propios de la página (búsqueda, fechas), que también cuelgan de ahí. */

.ord-filters[b-oidrvkv0cn]  .fc-filter-input,
.fc-filter-select[b-oidrvkv0cn] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ord-filters[b-oidrvkv0cn]  .fc-filter-input {
    padding-block: 0;
    padding-inline: 0.85rem;
}

.ord-filters[b-oidrvkv0cn]  .fc-filter-input-search {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-select[b-oidrvkv0cn] {
    padding-block: 0;
    padding-inline: 0.85rem;
    cursor: pointer;
}

.ord-filters[b-oidrvkv0cn]  .fc-filter-input::placeholder {
    color: #9ca3af;
}

.ord-filters[b-oidrvkv0cn]  .fc-filter-input:focus,
.fc-filter-select:focus[b-oidrvkv0cn] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* El campo con lupa vive dentro del filtro: hereda el alto y el input ocupa todo el ancho. El hueco
   derecho para la lupa lo pone el propio componente (derivado del ancho del botón): aquí no se toca. */

.ord-page[b-oidrvkv0cn]  .ccb-selector {
    position: relative;
    inline-size: 100%;
}

.ord-page[b-oidrvkv0cn]  .ccb-icon-btn {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .ord-page[b-oidrvkv0cn]  .ccb-icon-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

/* CASILLAS (incluir facturadas / anuladas) */

.ord-filters-casillas[b-oidrvkv0cn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fc-gap);
}

.ord-casilla[b-oidrvkv0cn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fc-font-text);
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .ord-casilla input[type="checkbox"][b-oidrvkv0cn] {
        inline-size: 0.95rem;
        block-size: 0.95rem;
        accent-color: #2563eb;
        cursor: pointer;
    }

.ord-casilla-modal[b-oidrvkv0cn] {
    margin-block-start: 0.65rem;
    font-weight: 750;
}

.ord-nota[b-oidrvkv0cn] {
    margin-block-start: 0.4rem !important;
    font-size: var(--fc-font-small);
    color: #6b7280;
}

/* AVISOS DEL CIERRE (los da Application; aquí solo se listan) */

.ord-avisos[b-oidrvkv0cn] {
    margin-block-start: 0.75rem;
    padding-block: 0.55rem;
    padding-inline: 0.85rem;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    border: 0.0625rem solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: var(--fc-font-small);
}

.ord-avisos-titulo[b-oidrvkv0cn] {
    font-weight: 800;
    margin-block-end: 0.3rem;
}

.ord-avisos ul[b-oidrvkv0cn] {
    margin: 0;
    padding-inline-start: 1.1rem;
}

/* BOTONES */

.fc-primary-btn[b-oidrvkv0cn],
.fc-action-btn[b-oidrvkv0cn] {
    min-block-size: var(--fc-field-block);
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-block: 0;
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    font-size: var(--fc-font-text);
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fc-primary-btn[b-oidrvkv0cn] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fc-primary-btn:hover[b-oidrvkv0cn] {
        background: #1d4ed8;
        transform: translateY(-0.08rem);
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.fc-danger-btn[b-oidrvkv0cn] {
    background: #dc2626;
}

    .fc-danger-btn:hover[b-oidrvkv0cn] {
        background: #b91c1c;
        box-shadow: 0 0.65rem 1.1rem rgba(220, 38, 38, 0.16);
    }

.fc-action-btn[b-oidrvkv0cn] {
    border: 0.0625rem solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fc-action-btn:hover[b-oidrvkv0cn] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

/* TABLA
   El listado lo pinta <TablaPaginada>; aquí solo lo que la tabla no puede saber: el replegado de columnas
   y el aspecto de las celdas que aporta la página como plantilla. Todo con `::deep`. */

.fc-tabla[b-oidrvkv0cn] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.ord-page[b-oidrvkv0cn]  .tp-panel {
    min-height: auto;
}

/* ACCIONES POR FILA (plantilla de la última columna) */

.ord-page[b-oidrvkv0cn]  .fc-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.ord-page[b-oidrvkv0cn]  .fc-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

    .ord-page[b-oidrvkv0cn]  .fc-row-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .ord-page[b-oidrvkv0cn]  .fc-row-btn-danger:hover {
        background: #fef2f2;
        color: #b91c1c;
    }

    .ord-page[b-oidrvkv0cn]  .fc-row-btn:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .ord-page[b-oidrvkv0cn]  .fc-row-btn .material-symbols-outlined {
        font-size: 1.15rem;
    }

/* SITUACIÓN (chip como plantilla de la columna: markup dentro de la tabla → `::deep`). */

.fc-estado-badge[b-oidrvkv0cn],
.ord-page[b-oidrvkv0cn]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.ord-page[b-oidrvkv0cn]  .ord-firma-icono {
    font-size: 0.95rem;
}

.fc-estado-green[b-oidrvkv0cn],
.ord-page[b-oidrvkv0cn]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fc-estado-blue[b-oidrvkv0cn],
.ord-page[b-oidrvkv0cn]  .fc-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fc-estado-red[b-oidrvkv0cn],
.ord-page[b-oidrvkv0cn]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-estado-gray[b-oidrvkv0cn],
.ord-page[b-oidrvkv0cn]  .fc-estado-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* MODAL DE CONFIRMACIÓN */

.fc-modal-overlay[b-oidrvkv0cn] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: ordModalIn-b-oidrvkv0cn 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-modal[b-oidrvkv0cn] {
    inline-size: min(46rem, 100%);
    max-block-size: min(80dvh, 44rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--fc-inner-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    padding: var(--fc-panel-pad);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.fc-modal-corto[b-oidrvkv0cn] {
    inline-size: min(34rem, 100%);
}

.fc-modal-header[b-oidrvkv0cn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
}

.fc-modal-title[b-oidrvkv0cn] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fc-modal-close[b-oidrvkv0cn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .fc-modal-close:hover[b-oidrvkv0cn] {
        background: #f1f5f9;
        color: #1f2937;
    }

.fc-modal-cuerpo[b-oidrvkv0cn] {
    font-size: var(--fc-font-text);
    color: #374151;
    line-height: 1.45;
    overflow-y: auto;
}

    .fc-modal-cuerpo p[b-oidrvkv0cn] {
        margin: 0;
    }

.fc-modal-actions[b-oidrvkv0cn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-inner-gap);
}

/* ANIMACIONES */

@keyframes ordModalIn-b-oidrvkv0cn {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ordPageIn-b-oidrvkv0cn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE: al estrechar caen primero las columnas que menos dicen. «Número», «Fecha», «Cliente»,
   «Situación», «Coste», «Importe» y las acciones permanecen visibles el máximo tiempo. */

@media (max-width: 1320px) {
    .ord-page[b-oidrvkv0cn]  .fc-col-prevista {
        display: none;
    }
}

@media (max-width: 1180px) {
    .ord-page[b-oidrvkv0cn]  .fc-col-proyecto {
        display: none;
    }
}

@media (max-width: 1020px) {
    .ord-page[b-oidrvkv0cn]  .fc-col-margen {
        display: none;
    }
}

@media (max-width: 860px) {
    .ord-page[b-oidrvkv0cn]  .fc-col-ejecutado {
        display: none;
    }
}

@media (max-width: 700px) {
    .ord-page[b-oidrvkv0cn]  .fc-col-coste {
        display: none;
    }
}

@media (max-width: 80rem) {
    .ord-filters[b-oidrvkv0cn] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-oidrvkv0cn] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .ord-page[b-oidrvkv0cn] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .ord-filters[b-oidrvkv0cn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ord-page[b-oidrvkv0cn],
    .ord-page *[b-oidrvkv0cn],
    .ord-page *[b-oidrvkv0cn]::before,
    .ord-page *[b-oidrvkv0cn]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/ProduccionPage.razor.rz.scp.css */
/* Listado de PARTES DE FABRICACIÓN (PR4). Copia del CSS del listado de compras con el nombre de la
   página cambiado: el CSS de Blazor es scoped por componente, así que no puede compartirse; lo que sí se
   comparte es el vocabulario de clases `fc-*` (filtros, insignias, tabla) para que las tres pantallas de
   documentos se vean iguales. Fuera lo que aquí no existe: selección en bloque, emisión masiva y
   conversión; dentro, las acciones por fila (imprimir y anular) y la confirmación de anulación. */

.prod-page[b-v012x4conx],
.prod-page *[b-v012x4conx],
.prod-page *[b-v012x4conx]::before,
.prod-page *[b-v012x4conx]::after {
    box-sizing: border-box;
}

.prod-page[b-v012x4conx] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-gap);
    animation: prodPageIn-b-v012x4conx 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.prod-heading[b-v012x4conx],
.prod-kpis[b-v012x4conx],
.prod-list-panel[b-v012x4conx],
.fc-filter-item[b-v012x4conx],
.fc-filter-item-search[b-v012x4conx],
.fc-filter-searchbox[b-v012x4conx] {
    min-inline-size: 0;
}

/* CABECERA */

.prod-heading[b-v012x4conx] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    .prod-heading > div:first-child[b-v012x4conx] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .prod-heading.command-bar-host-collapsed > div:first-child[b-v012x4conx] {
        flex: 1 1 auto;
    }

.prod-title[b-v012x4conx] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.prod-subtitle[b-v012x4conx] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.prod-heading.command-bar-host-collapsed .prod-title[b-v012x4conx],
.prod-heading.command-bar-host-collapsed .prod-subtitle[b-v012x4conx] {
    white-space: normal;
    overflow-wrap: break-word;
}

.prod-header-actions[b-v012x4conx] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

.prod-kpis[b-v012x4conx] {
    inline-size: 100%;
    max-inline-size: 100%;
}

    .prod-kpis[b-v012x4conx] (.kpi-board),
    .prod-kpis[b-v012x4conx] (.kpi-grid),
    .prod-kpis[b-v012x4conx] (.kpi-list) {
        inline-size: 100%;
        max-inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        gap: var(--fc-gap);
    }

    .prod-kpis[b-v012x4conx] (.kpi-tile),
    .prod-kpis[b-v012x4conx] (.kpi-card) {
        min-inline-size: 0;
        inline-size: 100%;
    }

/* PANEL LISTADO */

.prod-list-panel[b-v012x4conx] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS: búsqueda ancha + dos fechas + tres desplegables. */

.prod-filters[b-v012x4conx] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-v012x4conx] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-v012x4conx] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.fc-filter-input[b-v012x4conx],
.fc-filter-select[b-v012x4conx] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-filter-input[b-v012x4conx] {
    padding-block: 0;
    padding-inline: 0.85rem;
}

.fc-filter-input-search[b-v012x4conx] {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-select[b-v012x4conx] {
    padding-block: 0;
    padding-inline: 0.85rem;
    cursor: pointer;
}

.fc-filter-input[b-v012x4conx]::placeholder {
    color: #9ca3af;
}

.fc-filter-input:focus[b-v012x4conx],
.fc-filter-select:focus[b-v012x4conx] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* AVISO de resultado (anulación) */

.prod-aviso[b-v012x4conx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
    padding-block: 0.5rem;
    padding-inline: 0.85rem;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    border: 0.0625rem solid transparent;
    font-size: var(--fc-font-text);
    font-weight: 750;
}

.prod-aviso-ok[b-v012x4conx] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.prod-aviso-error[b-v012x4conx] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.prod-aviso-cerrar[b-v012x4conx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* BOTONES */

.fc-primary-btn[b-v012x4conx],
.fc-action-btn[b-v012x4conx] {
    min-block-size: var(--fc-field-block);
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-block: 0;
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    font-size: var(--fc-font-text);
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fc-primary-btn[b-v012x4conx] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fc-primary-btn:hover[b-v012x4conx] {
        background: #1d4ed8;
        transform: translateY(-0.08rem);
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.fc-danger-btn[b-v012x4conx] {
    background: #dc2626;
}

    .fc-danger-btn:hover[b-v012x4conx] {
        background: #b91c1c;
        box-shadow: 0 0.65rem 1.1rem rgba(220, 38, 38, 0.16);
    }

.fc-action-btn[b-v012x4conx] {
    border: 0.0625rem solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fc-action-btn:hover[b-v012x4conx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

/* TABLA
   El listado lo pinta <TablaPaginada>; aquí solo lo que la tabla no puede saber: el replegado de columnas
   y el aspecto de las celdas que aporta la página como plantilla. Todo con `::deep`. */

.fc-tabla[b-v012x4conx] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.prod-page[b-v012x4conx]  .tp-panel {
    min-height: auto;
}

/* ACCIONES POR FILA (plantilla de la última columna) */

.prod-page[b-v012x4conx]  .fc-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.prod-page[b-v012x4conx]  .fc-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

    .prod-page[b-v012x4conx]  .fc-row-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .prod-page[b-v012x4conx]  .fc-row-btn-danger:hover {
        background: #fef2f2;
        color: #b91c1c;
    }

    .prod-page[b-v012x4conx]  .fc-row-btn:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .prod-page[b-v012x4conx]  .fc-row-btn .material-symbols-outlined {
        font-size: 1.15rem;
    }

/* ESTADOS (insignia como plantilla de la columna «Estado»: markup dentro de la tabla → `::deep`). */

.fc-estado-badge[b-v012x4conx],
.prod-page[b-v012x4conx]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.fc-estado-green[b-v012x4conx],
.prod-page[b-v012x4conx]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fc-estado-red[b-v012x4conx],
.prod-page[b-v012x4conx]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-estado-gray[b-v012x4conx],
.prod-page[b-v012x4conx]  .fc-estado-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* MODAL DE CONFIRMACIÓN DE ANULACIÓN */

.fc-modal-overlay[b-v012x4conx] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: prodModalIn-b-v012x4conx 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-modal[b-v012x4conx] {
    inline-size: min(46rem, 100%);
    max-block-size: min(80dvh, 44rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--fc-inner-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    padding: var(--fc-panel-pad);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.fc-modal-corto[b-v012x4conx] {
    inline-size: min(32rem, 100%);
}

.fc-modal-header[b-v012x4conx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
}

.fc-modal-title[b-v012x4conx] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fc-modal-close[b-v012x4conx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .fc-modal-close:hover[b-v012x4conx] {
        background: #f1f5f9;
        color: #1f2937;
    }

.fc-modal-cuerpo[b-v012x4conx] {
    font-size: var(--fc-font-text);
    color: #374151;
    line-height: 1.45;
}

    .fc-modal-cuerpo p[b-v012x4conx] {
        margin: 0;
    }

.fc-modal-actions[b-v012x4conx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-inner-gap);
}

/* ANIMACIONES */

@keyframes prodModalIn-b-v012x4conx {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes prodPageIn-b-v012x4conx {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE: al estrechar caen primero las columnas que menos dicen. «Número», «Fecha», «Almacén»,
   «Estado» y las acciones permanecen siempre visibles. */

@media (max-width: 1180px) {
    .prod-page[b-v012x4conx]  .fc-col-referencia {
        display: none;
    }
}

@media (max-width: 1020px) {
    .prod-page[b-v012x4conx]  .fc-col-serie {
        display: none;
    }
}

@media (max-width: 940px) {
    .prod-page[b-v012x4conx]  .fc-col-tipo {
        display: none;
    }
}

@media (max-width: 860px) {
    .prod-page[b-v012x4conx]  .fc-col-lineas {
        display: none;
    }
}

@media (max-width: 700px) {
    .prod-page[b-v012x4conx]  .fc-col-coste {
        display: none;
    }
}

@media (max-width: 80rem) {
    .prod-filters[b-v012x4conx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-v012x4conx] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .prod-page[b-v012x4conx] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .prod-filters[b-v012x4conx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prod-page[b-v012x4conx],
    .prod-page *[b-v012x4conx],
    .prod-page *[b-v012x4conx]::before,
    .prod-page *[b-v012x4conx]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Pages/Produccion/ProyectosPage.razor.rz.scp.css */
/* Pantalla de PROYECTOS (OF4). El CSS de Blazor es scoped por componente, así que no se comparte
   fichero con las pantallas hermanas: se copia el molde del listado de órdenes con el prefijo propio
   (`ord-` → `pry-`). Lo que sí se comparte es el vocabulario de clases `fc-*` (filtros, insignias,
   tabla) para que todas las pantallas del módulo se vean iguales. Propio de esta: la sangría del
   código jerárquico, los chips de situación de la columna «Órdenes» y los bloques del detalle. */

.pry-page[b-md2rg3nfij],
.pry-page *[b-md2rg3nfij],
.pry-page *[b-md2rg3nfij]::before,
.pry-page *[b-md2rg3nfij]::after {
    box-sizing: border-box;
}

.pry-page[b-md2rg3nfij] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-gap);
    animation: pryPageIn-b-md2rg3nfij 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pry-heading[b-md2rg3nfij],
.pry-list-panel[b-md2rg3nfij],
.fc-filter-item[b-md2rg3nfij],
.fc-filter-item-search[b-md2rg3nfij],
.fc-filter-searchbox[b-md2rg3nfij] {
    min-inline-size: 0;
}

/* CABECERA */

.pry-heading[b-md2rg3nfij] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    .pry-heading > div:first-child[b-md2rg3nfij] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .pry-heading.command-bar-host-collapsed > div:first-child[b-md2rg3nfij] {
        flex: 1 1 auto;
    }

.pry-title[b-md2rg3nfij] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.pry-subtitle[b-md2rg3nfij] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.pry-heading.command-bar-host-collapsed .pry-title[b-md2rg3nfij],
.pry-heading.command-bar-host-collapsed .pry-subtitle[b-md2rg3nfij] {
    white-space: normal;
    overflow-wrap: break-word;
}

.pry-header-actions[b-md2rg3nfij] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* Un proyecto de AGRUPACIÓN (no imputable) lo dice en la cabecera de su detalle. */

.pry-chip-agrega[b-md2rg3nfij] {
    display: inline-flex;
    align-items: center;
    padding-block: 0.1rem;
    padding-inline: 0.5rem;
    border-radius: 999rem;
    border: 0.0625rem solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: var(--fc-font-small);
    font-weight: 800;
}

/* KPIs */

.pry-kpis[b-md2rg3nfij] {
    inline-size: 100%;
    min-inline-size: 0;
}

/* PANEL LISTADO */

.pry-list-panel[b-md2rg3nfij] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS: búsqueda ancha + prefijo + dos fechas. */

.pry-filters[b-md2rg3nfij] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-md2rg3nfij] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-md2rg3nfij] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.fc-filter-input[b-md2rg3nfij] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    padding-block: 0;
    padding-inline: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-filter-input-search[b-md2rg3nfij] {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-input[b-md2rg3nfij]::placeholder {
    color: #9ca3af;
}

.fc-filter-input:focus[b-md2rg3nfij] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* CASILLAS */

.pry-filters-casillas[b-md2rg3nfij] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fc-gap);
}

.pry-casilla[b-md2rg3nfij] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fc-font-text);
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .pry-casilla input[type="checkbox"][b-md2rg3nfij] {
        inline-size: 0.95rem;
        block-size: 0.95rem;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* TABLA (la pinta TablaPaginada: lo que la página aporta como plantilla va con `::deep`) */

.fc-tabla[b-md2rg3nfij] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.pry-page[b-md2rg3nfij]  .tp-panel {
    min-height: auto;
}

/* CÓDIGO CON SANGRÍA POR NIVEL (el escalón es presentación; el nivel lo dice el propio código). */

.pry-page[b-md2rg3nfij]  .pry-codigo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-inline-size: 0;
}

.pry-page[b-md2rg3nfij]  .pry-codigo-icono {
    font-size: 1.05rem;
    color: #94a3b8;
    flex: 0 0 auto;
}

.pry-page[b-md2rg3nfij]  .pry-codigo-texto {
    font-weight: 800;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CHIPS DE SITUACIÓN dentro de la columna «Órdenes» */

.pry-page[b-md2rg3nfij]  .pry-ordenes {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pry-page[b-md2rg3nfij]  .pry-ordenes-total {
    font-weight: 850;
    color: #1f2937;
}

.pry-page[b-md2rg3nfij]  .pry-chips {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.pry-page[b-md2rg3nfij]  .pry-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.35rem;
    padding-block: 0.05rem;
    padding-inline: 0.35rem;
    border-radius: 999rem;
    border: 0.0625rem solid transparent;
    font-size: clamp(0.6rem, 0.57rem + 0.1vw, 0.68rem);
    font-weight: 800;
    line-height: 1.25;
}

.pry-page[b-md2rg3nfij]  .pry-chip-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pry-page[b-md2rg3nfij]  .pry-chip-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pry-page[b-md2rg3nfij]  .pry-chip-purple {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.pry-page[b-md2rg3nfij]  .pry-chip-slate {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Un margen negativo se ve de un vistazo. */

.pry-page[b-md2rg3nfij]  .pry-negativo {
    color: #b91c1c;
    font-weight: 800;
}

/* SITUACIÓN de una orden (chip compartido con el listado de órdenes) */

.pry-page[b-md2rg3nfij]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.pry-page[b-md2rg3nfij]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pry-page[b-md2rg3nfij]  .fc-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pry-page[b-md2rg3nfij]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* DETALLE: bloques apilados (subproyectos, órdenes, horas por operario) */

.pry-detalle[b-md2rg3nfij] {
    grid-row: -2 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--fc-gap);
    min-inline-size: 0;
    overflow-y: auto;
}

.pry-bloque[b-md2rg3nfij] {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--fc-inner-gap);
    min-inline-size: 0;
}

.pry-bloque-titulo[b-md2rg3nfij] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

/* ANIMACIÓN */

@keyframes pryPageIn-b-md2rg3nfij {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE: al estrechar caen primero las columnas que menos dicen. «Código», «Nombre», «Órdenes»
   e «Importe» permanecen visibles el máximo tiempo. */

@media (max-width: 1320px) {
    .pry-page[b-md2rg3nfij]  .fc-col-partes {
        display: none;
    }
}

@media (max-width: 1180px) {
    .pry-page[b-md2rg3nfij]  .fc-col-margen {
        display: none;
    }
}

@media (max-width: 1020px) {
    .pry-page[b-md2rg3nfij]  .fc-col-facturado {
        display: none;
    }
}

@media (max-width: 860px) {
    .pry-page[b-md2rg3nfij]  .fc-col-coste,
    .pry-page[b-md2rg3nfij]  .fc-col-ejecutado {
        display: none;
    }
}

@media (max-width: 700px) {
    .pry-page[b-md2rg3nfij]  .fc-col-horas {
        display: none;
    }
}

@media (max-width: 80rem) {
    .pry-filters[b-md2rg3nfij] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-md2rg3nfij] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .pry-page[b-md2rg3nfij] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .pry-filters[b-md2rg3nfij] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pry-page[b-md2rg3nfij],
    .pry-page *[b-md2rg3nfij],
    .pry-page *[b-md2rg3nfij]::before,
    .pry-page *[b-md2rg3nfij]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/PdfDesigner/PdfEditor/EditorWorkspace.razor.rz.scp.css */
.editor-layout[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 8px;
    height: calc(100vh - 200px);
    padding: 8px;
}

.editor-palette[b-cj0l9dino0],
.editor-properties[b-cj0l9dino0] {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    overflow: hidden;
}

.editor-properties[b-cj0l9dino0] {
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.prop-form[b-cj0l9dino0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.prop-help[b-cj0l9dino0] {
    flex: 0 0 auto;
    margin-top: 8px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

.prop-help-title[b-cj0l9dino0] {
    font-weight: 600;
    font-size: 0.82rem;
    color: #333;
    margin-bottom: 3px;
}

.prop-help-text[b-cj0l9dino0] {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.35;
}

.tech-toggle[b-cj0l9dino0] {
    flex: 0 0 auto;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.prop-empty[b-cj0l9dino0] {
    color: #888;
    font-size: 0.85rem;
}

.prop-type[b-cj0l9dino0] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #0d6efd;
}

.prop-row[b-cj0l9dino0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

    .prop-row label[b-cj0l9dino0] {
        color: #555;
        flex: 0 0 80px;
    }

    .prop-row input[type="number"][b-cj0l9dino0],
    .prop-row input[type="text"][b-cj0l9dino0] {
        flex: 1;
        min-width: 0;
        padding: 3px 6px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 0.82rem;
    }

    .prop-row input[type="color"][b-cj0l9dino0] {
        width: 40px;
        height: 24px;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

.prop-input-unit[b-cj0l9dino0] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .prop-input-unit input[type="number"][b-cj0l9dino0] {
        flex: 1;
        min-width: 0;
    }

    .prop-input-unit span[b-cj0l9dino0] {
        flex: 0 0 auto;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 700;
    }

.prop-row-col[b-cj0l9dino0] {
    flex-direction: column;
    align-items: stretch;
}

    .prop-row-col label[b-cj0l9dino0] {
        margin-bottom: 2px;
    }

.prop-desc[b-cj0l9dino0] {
    font-size: 0.8rem;
    color: #555;
    background: #f6f8fa;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 5px 7px;
    white-space: normal;
    line-height: 1.3;
}

.file-btn[b-cj0l9dino0] {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 8px;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    color: #0d6efd;
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
}

    .file-btn:hover[b-cj0l9dino0] {
        background: #eef4ff;
    }

    .file-btn[b-cj0l9dino0]  input[type="file"] {
        display: none;
    }

.editor-palette[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
}

.field-list[b-cj0l9dino0] {
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100% - 22px);
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}


.field-search[b-cj0l9dino0] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    margin-bottom: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}

.grp[b-cj0l9dino0] {
    margin-bottom: 6px;
}

.grp-header[b-cj0l9dino0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0d6efd;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e3e3e3;
}

    .grp-header .caret[b-cj0l9dino0] {
        width: 12px;
        color: #888;
    }

.grp-title[b-cj0l9dino0] {
    flex: 1;
}

.grp-count[b-cj0l9dino0] {
    font-weight: normal;
    color: #999;
    font-size: 0.72rem;
}

.field-row[b-cj0l9dino0] {
    padding: 4px 8px;
    border: 1px solid #c4c4c4;
    border-top: none;
    font-size: 0.82rem;
    color: #222;
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .field-row:first-of-type[b-cj0l9dino0] {
        border-top: 1px solid #c4c4c4;
    }

    .field-row:hover[b-cj0l9dino0] {
        filter: brightness(0.96);
    }

    .field-row:active[b-cj0l9dino0] {
        cursor: grabbing;
    }

.tools-pane[b-cj0l9dino0] {
    flex: 0 0 auto;
    border-top: 2px solid #ddd;
    padding: 8px;
    background: #f1f3f5;
}

.tools-title[b-cj0l9dino0] {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 6px;
}

.tools-row[b-cj0l9dino0] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tool-chip[b-cj0l9dino0] {
    font-size: 0.78rem;
    padding: 4px 8px;
    border: 1px dashed #aaa;
    border-radius: 4px;
    background: #fff;
    color: #888;
}

.editor-canvas[b-cj0l9dino0] {
    display: flex;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f0f0f0;
}

    .editor-canvas.has-grid[b-cj0l9dino0] {
        background-image: linear-gradient(to right, var(--grid-color, #c8c8c8) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color, #c8c8c8) 1px, transparent 1px);
        background-size: var(--grid-size, 10px) var(--grid-size, 10px);
        background-position: 0 0;
    }

    .editor-canvas[b-cj0l9dino0]  .e-diagram {
        flex: 1;
        background: transparent !important;
    }

    .editor-canvas[b-cj0l9dino0]  .e-diagram-svg,
    .editor-canvas[b-cj0l9dino0]  svg {
        background: transparent !important;
    }

.canvas-toolbar[b-cj0l9dino0] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    user-select: none;
}

    .canvas-toolbar label[b-cj0l9dino0] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        cursor: pointer;
    }

    .canvas-toolbar .hist-btn[b-cj0l9dino0] {
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 3px;
        width: 26px;
        height: 24px;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        color: #333;
    }

        .canvas-toolbar .hist-btn:hover:not(:disabled)[b-cj0l9dino0] {
            background: #eef4ff;
            border-color: #0d6efd;
        }

        .canvas-toolbar .hist-btn:disabled[b-cj0l9dino0] {
            opacity: 0.4;
            cursor: default;
        }

    .canvas-toolbar .canvas-sep[b-cj0l9dino0] {
        width: 1px;
        height: 18px;
        background: #ddd;
    }

    .canvas-toolbar .grid-size input[b-cj0l9dino0] {
        width: 48px;
        padding: 2px 4px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 0.8rem;
    }

    .canvas-toolbar .grid-check[b-cj0l9dino0] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .canvas-toolbar .grid-size[b-cj0l9dino0] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .canvas-toolbar .grid-size .e-control-wrapper[b-cj0l9dino0] {
            width: 76px;
        }

        .canvas-toolbar .grid-size span[b-cj0l9dino0] {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 700;
        }

.zorder-row[b-cj0l9dino0] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.zorder-btn[b-cj0l9dino0] {
    flex: 1;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    height: 26px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

    .zorder-btn:hover[b-cj0l9dino0] {
        background: #eef4ff;
        border-color: #0d6efd;
    }

.align-grid[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.align-row[b-cj0l9dino0] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.align-title[b-cj0l9dino0] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin: 6px 0 4px;
}

.align-btn[b-cj0l9dino0] {
    flex: 1;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    height: 28px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

    .align-btn:hover[b-cj0l9dino0] {
        background: #eef4ff;
        border-color: #0d6efd;
    }

.align-hint[b-cj0l9dino0] {
    font-size: 0.72rem;
    color: #888;
    margin-top: 6px;
    line-height: 1.3;
}


.editor-layout[b-cj0l9dino0] {
    /* La columna de propiedades la manda --props-w (el splitter la ajusta y se recuerda). */
    grid-template-columns: 248px minmax(0, 1fr) var(--props-w, 280px);
    gap: 10px;
    padding: 10px;
    background: #f5f7fb;
}

.editor-palette[b-cj0l9dino0],
.editor-properties[b-cj0l9dino0],
.editor-canvas[b-cj0l9dino0] {
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.editor-palette[b-cj0l9dino0],
.editor-properties[b-cj0l9dino0] {
    background: #fff;
}

.editor-canvas[b-cj0l9dino0] {
    background-color: #f0f0f0;
}

.editor-palette[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.field-list[b-cj0l9dino0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .field-list[b-cj0l9dino0]::-webkit-scrollbar {
        width: 7px;
    }

    .field-list[b-cj0l9dino0]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.field-search[b-cj0l9dino0] {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 10px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.78rem;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    .field-search:focus[b-cj0l9dino0] {
        border-color: #2f6df6;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
    }

.grp[b-cj0l9dino0] {
    margin-bottom: 8px;
}

.grp-header[b-cj0l9dino0] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 8px;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: #172554;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

    .grp-header:hover[b-cj0l9dino0] {
        background: #eef4ff;
        color: #2563eb;
    }

    .grp-header .caret[b-cj0l9dino0] {
        width: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 0.68rem;
    }

.grp-title[b-cj0l9dino0] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grp-count[b-cj0l9dino0] {
    min-width: 19px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8f0ff;
    color: #2563eb;
    font-size: 0.66rem;
    font-weight: 800;
}

.field-row[b-cj0l9dino0] {
    position: relative;
    margin: 4px 0 0 21px;
    padding: 5px 9px 5px 10px;
    min-height: 25px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 9px;
    font-size: 0.74rem;
    line-height: 1.15;
    color: #1e293b;
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .field-row:first-of-type[b-cj0l9dino0] {
        border-top: 1px solid rgba(148, 163, 184, 0.28);
    }

    .field-row:hover[b-cj0l9dino0] {
        filter: none;
        transform: translateX(2px);
        border-color: rgba(47, 109, 246, 0.35);
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .field-row:active[b-cj0l9dino0] {
        cursor: grabbing;
        transform: scale(0.99);
    }

.tools-pane[b-cj0l9dino0] {
    flex: 0 0 auto;
    border-top: 1px solid #edf2f7;
    padding: 10px;
    background: #fbfdff;
}

.tools-title[b-cj0l9dino0] {
    margin-bottom: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tools-row[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tool-chip[b-cj0l9dino0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: grab;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

    .tool-chip:hover[b-cj0l9dino0] {
        background: #eef4ff;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

@media (max-width: 1200px) {
    .editor-layout[b-cj0l9dino0] {
        grid-template-columns: 220px minmax(0, 1fr) var(--props-w, 240px);
    }

    .field-row[b-cj0l9dino0] {
        margin-left: 16px;
        font-size: 0.71rem;
        padding: 5px 8px;
    }
}


.grp-header.e-btn[b-cj0l9dino0] {
    width: 100%;
    text-align: left;
    box-shadow: none;
    padding: 5px 8px;
}

    .grp-header.e-btn:focus[b-cj0l9dino0],
    .grp-header.e-btn:active[b-cj0l9dino0] {
        box-shadow: none;
    }


.field-search.e-control-wrapper[b-cj0l9dino0] {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    margin-bottom: 10px;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
}

    .field-search.e-control-wrapper .e-input[b-cj0l9dino0] {
        padding: 0 10px;
        color: #0f172a;
        font-size: 0.78rem;
        background: transparent;
    }

    .field-search.e-control-wrapper.e-input-focus[b-cj0l9dino0] {
        border-color: #2f6df6 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12) !important;
    }


.grp-header.e-btn[b-cj0l9dino0] {
    width: 100%;
    text-align: left;
    box-shadow: none;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #172554;
    background: #f8fafc;
    border: 0;
    border-radius: 10px;
}

    .grp-header.e-btn:hover[b-cj0l9dino0] {
        background: #eef4ff;
        color: #2563eb;
        box-shadow: none;
    }

    .grp-header.e-btn:focus[b-cj0l9dino0],
    .grp-header.e-btn:active[b-cj0l9dino0] {
        box-shadow: none;
    }


.prop-section-title[b-cj0l9dino0] {
    margin: 12px 0 6px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.74rem;
    font-weight: 800;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prop-row select[b-cj0l9dino0] {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.82rem;
    background: #fff;
}

.prop-check-row[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 6px 0 8px;
    font-size: 0.8rem;
    color: #374151;
}

    .prop-check-row label[b-cj0l9dino0] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }

.table-cells-editor[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}

.table-cell-editor[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

    .table-cell-editor label[b-cj0l9dino0] {
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748b;
    }

    .table-cell-editor input[b-cj0l9dino0] {
        min-width: 0;
        padding: 4px 6px;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        font-size: 0.78rem;
    }


/* Rejilla como fondo del canvas: no tapa scrollbar ni etiquetas. */
.canvas-toolbar[b-cj0l9dino0] {
    z-index: 20;
}


.editor-canvas.right-panning[b-cj0l9dino0],
.editor-canvas.right-panning *[b-cj0l9dino0] {
    cursor: grabbing !important;
    user-select: none !important;
}

/* M?s espacio navegable alrededor del editor para poder panear con bot?n derecho */
.editor-canvas[b-cj0l9dino0]  .e-diagramcontent,
.editor-canvas[b-cj0l9dino0]  .e-diagram-content,
.editor-canvas[b-cj0l9dino0]  .e-content {
    padding: 400px !important;
    box-sizing: content-box !important;
}

/* Evita que el padding visual rompa el fondo */
.editor-canvas[b-cj0l9dino0]  .e-diagram {
    overflow: auto !important;
}

.prop-color-picker[b-cj0l9dino0] {
    flex: 1;
    min-width: 0;
}

    .prop-color-picker.e-colorpicker-wrapper[b-cj0l9dino0],
    .prop-color-picker .e-colorpicker-wrapper[b-cj0l9dino0] {
        width: 44px !important;
    }

.prop-row[b-cj0l9dino0]  .e-colorpicker-wrapper {
    width: 44px !important;
}

.prop-row[b-cj0l9dino0]  .e-split-colorpicker {
    min-width: 44px !important;
}

.prop-number[b-cj0l9dino0] {
    flex: 1;
    min-width: 0;
}

.prop-row[b-cj0l9dino0]  .prop-number.e-control-wrapper {
    flex: 1;
    min-width: 0;
}

.table-size-list[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 170px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 8px;
}

.table-size-row[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    font-size: 0.78rem;
}

    .table-size-row label[b-cj0l9dino0] {
        color: #64748b;
        font-weight: 700;
    }

.prop-check-row[b-cj0l9dino0]  .e-checkbox-wrapper {
    margin: 0;
}

    .prop-check-row[b-cj0l9dino0]  .e-checkbox-wrapper .e-label {
        font-size: 0.8rem;
        color: #374151;
    }


/* Tabla: controles de filas/columnas */
.table-size-list[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.table-size-row[b-cj0l9dino0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
}

    .table-size-row label[b-cj0l9dino0] {
        flex: 0 0 80px;
        color: #555;
    }


.canvas-toolbar .grid-size .grid-size-label[b-cj0l9dino0] {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Zoom del lienzo ── */
.canvas-toolbar .zoom-pct[b-cj0l9dino0] {
    min-width: 46px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .canvas-toolbar .zoom-pct:hover[b-cj0l9dino0] {
        background: #eef4ff;
        border-color: #0d6efd;
    }

/* ── Splitter del panel de propiedades (borde izquierdo arrastrable) ── */
.editor-properties[b-cj0l9dino0] {
    position: relative;
}

.props-splitter[b-cj0l9dino0] {
    /* Dentro del borde izquierdo del panel: el panel lleva overflow:hidden y cualquier
       parte que asome fuera queda recortada y sin clic. */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
}

    .props-splitter[b-cj0l9dino0]::after {
        content: "";
        position: absolute;
        left: 1px;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 2px;
        background: transparent;
        transition: background .12s ease;
    }

    .props-splitter:hover[b-cj0l9dino0]::after,
    .props-splitter.dragging[b-cj0l9dino0]::after {
        background: #93c5fd;
    }

/* ── Fórmulas en el panel (campos importados y QR) ── */
.prop-formula[b-cj0l9dino0] {
    display: block;
    width: 100%;
    min-width: 0;
    /* Varias líneas visibles de partida: una fórmula larga no cabe en una y era ilegible. */
    min-height: 62px;
    height: 62px;
    padding: 7px 9px;
    border: 1px solid #d7e0ec;
    border-radius: 9px;
    background: #f8fafc;
    color: #0f172a;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.76rem;
    line-height: 1.4;
    /* Solo vertical: en horizontal el asa se salía del panel y pisaba las filas de al lado.
       Al estirar hacia abajo el textarea crece dentro de su fila y el resto baja (ver
       .prop-row-col, que es un grid en columna: nada se solapa). */
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* La fila de la fórmula ocupa el ancho entero (el «FIX FILAS» de abajo forzaba 72px+1fr y
   la etiqueta quedaba comprimida junto al textarea). `align-items: stretch` + altura
   automática son lo que hace que la fila CREZCA con el textarea en vez de recortarlo. */
.editor-properties .prop-row.prop-row-col[b-cj0l9dino0] {
    grid-template-columns: 1fr;
    align-items: stretch;
    height: auto;
    min-height: 0;
}

    .prop-formula:focus[b-cj0l9dino0] {
        border-color: #3b82f6;
        background: #ffffff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
    }







.canvas-toolbar .grid-size[b-cj0l9dino0]  .e-control-wrapper {
    width: 120px !important;
    min-width: 58px !important;
    max-width: 120px !important;
}



/* ==============================
   PANEL DERECHO: PROPIEDADES
   ============================== */

.editor-properties[b-cj0l9dino0] {
    padding: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.prop-form[b-cj0l9dino0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .prop-form[b-cj0l9dino0]::-webkit-scrollbar {
        width: 7px;
    }

    .prop-form[b-cj0l9dino0]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.prop-type[b-cj0l9dino0] {
    margin: -14px -14px 12px;
    padding: 14px 16px;
    background: #f8fbff;
    border-bottom: 1px solid #e6edf7;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.prop-empty[b-cj0l9dino0] {
    margin: 14px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: center;
}

.prop-section-title[b-cj0l9dino0] {
    margin: 14px 0 6px;
    padding: 9px 0 0;
    border-top: 1px solid #e6edf7;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prop-row[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

    .prop-row:hover[b-cj0l9dino0] {
        border-color: #d5e2f2;
        background: #ffffff;
    }

    .prop-row > label[b-cj0l9dino0],
    .table-size-row > label[b-cj0l9dino0],
    .table-cell-editor > label[b-cj0l9dino0] {
        color: #475569;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .prop-row > span:not(.prop-input-unit)[b-cj0l9dino0] {
        min-width: 0;
        color: #0f172a;
        font-size: 0.78rem;
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.prop-input-unit[b-cj0l9dino0] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .prop-input-unit > span[b-cj0l9dino0] {
        flex: 0 0 auto;
        min-width: 20px;
        color: #64748b;
        font-size: 0.68rem;
        font-weight: 850;
        text-align: right;
    }

.prop-row input[type="number"][b-cj0l9dino0],
.prop-row input[type="text"][b-cj0l9dino0],
.prop-row select[b-cj0l9dino0],
.table-cell-editor input[b-cj0l9dino0] {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.78rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .prop-row input[type="number"]:focus[b-cj0l9dino0],
    .prop-row input[type="text"]:focus[b-cj0l9dino0],
    .prop-row select:focus[b-cj0l9dino0],
    .table-cell-editor input:focus[b-cj0l9dino0] {
        border-color: #2f6df6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
    }

.prop-row-col[b-cj0l9dino0] {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 7px;
}

    .prop-row-col label[b-cj0l9dino0] {
        margin: 0;
    }

.prop-check-row[b-cj0l9dino0] {
    margin: 2px 0 4px;
    padding: 10px;
    display: grid;
    gap: 7px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #ffffff;
}

.prop-help[b-cj0l9dino0] {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid #e6edf7;
    background: #f8fbff;
}

.prop-help-title[b-cj0l9dino0] {
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 850;
}

.prop-help-text[b-cj0l9dino0] {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.tech-toggle[b-cj0l9dino0] {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid #e6edf7;
    background: #ffffff;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
}

.table-size-list[b-cj0l9dino0],
.table-cells-editor[b-cj0l9dino0] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 2px;
}

.table-size-row[b-cj0l9dino0],
.table-cell-editor[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #ffffff;
}

.align-grid[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 10px;
}

.align-row[b-cj0l9dino0],
.zorder-row[b-cj0l9dino0] {
    display: flex;
    gap: 7px;
    margin-bottom: 10px;
}

.align-title[b-cj0l9dino0] {
    margin: 8px 0 6px;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 850;
}

.align-hint[b-cj0l9dino0] {
    padding: 10px;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.4;
}

/* ==============================
   FIX FILAS NUMERICAS / COLORES
   Panel propiedades
   ============================== */

.editor-properties .prop-row[b-cj0l9dino0] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 4px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0;
    background: transparent;
}

    .editor-properties .prop-row:hover[b-cj0l9dino0] {
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    .editor-properties .prop-row > label[b-cj0l9dino0] {
        color: #334155;
        font-size: 0.76rem;
        font-weight: 800;
    }

.editor-properties .prop-input-unit[b-cj0l9dino0] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

    .editor-properties .prop-input-unit > span[b-cj0l9dino0] {
        min-width: 26px;
        height: 28px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f1f5f9;
        color: #475569;
        font-size: 0.68rem;
        font-weight: 900;
    }

/* Inputs nativos */
.editor-properties .prop-row input[type="number"][b-cj0l9dino0],
.editor-properties .prop-row input[type="text"][b-cj0l9dino0],
.editor-properties .prop-row select[b-cj0l9dino0] {
    width: 100%;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #d7e0ec;
    border-radius: 9px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 650;
    text-align: right;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.editor-properties .prop-row input[type="text"][b-cj0l9dino0] {
    text-align: left;
}

    .editor-properties .prop-row input[type="number"]:focus[b-cj0l9dino0],
    .editor-properties .prop-row input[type="text"]:focus[b-cj0l9dino0],
    .editor-properties .prop-row select:focus[b-cj0l9dino0] {
        border-color: #3b82f6;
        background: #ffffff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
    }

/* ── La fila de la fórmula, al final y a propósito ──
   El «FIX FILAS» de arriba le repone a TODA .prop-row el grid de 72px + 1fr, el
   align-items:center y el min-height de 40px. Aplicado a la fórmula, eso la encajona en una
   celda de alto fijo: el textarea se recorta a una línea y estirarlo no mueve nada. Se
   reponen aquí las tres, después, porque manda la última regla de igual especificidad. */
.editor-properties .prop-row.prop-row-col[b-cj0l9dino0] {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    height: auto;
    min-height: 0;
}

/* Las filas del formulario NO encogen. .prop-form es una columna flex con scroll y sus hijos
   heredaban `flex-shrink: 1`: con el «Modo técnico» abierto el contenido no cabía y el navegador
   encogía las filas hasta su min-height —0 en la fila de la fórmula—, así que el textarea se
   desbordaba y se pintaba ENCIMA de las filas de alrededor. Sin encoger, lo que no cabe se va al
   scroll, que es lo que tiene que pasar. */
.editor-properties .prop-form > *[b-cj0l9dino0] {
    flex-shrink: 0;
}

.prop-help-nota[b-cj0l9dino0] {
    margin-top: 6px;
    color: #475569;
}

/* El textarea ocupa su celda entera: así, al arrastrar el asa, lo que crece es la FILA y las
   de abajo bajan con ella. Sin esto el textarea se sale de la celda y las pisa. */
.editor-properties .prop-row.prop-row-col .prop-formula[b-cj0l9dino0] {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}
/* _content/ErpPowergest/Presentation/PdfDesigner/PdfEditor/Pages/Editor.razor.rz.scp.css */
.pdf-editor-page[b-bsz88bl45c] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-editor-header[b-bsz88bl45c],
.editor-toolbar[b-bsz88bl45c] {
    flex: 0 0 auto;
}

.editor-toolbar[b-bsz88bl45c] {
    display: grid;
    grid-template-columns: minmax(440px, auto) minmax(220px, 1fr) minmax(360px, auto);
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.toolbar-zone[b-bsz88bl45c] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-tools[b-bsz88bl45c] {
    justify-content: flex-start;
    overflow: hidden;
}

.toolbar-main-action[b-bsz88bl45c] {
    justify-content: center;
    min-width: 256px;
}

.toolbar-format-actions[b-bsz88bl45c] {
    justify-content: flex-end;
    overflow: hidden;
}

.toolbar-label[b-bsz88bl45c] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tool-chip[b-bsz88bl45c] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: grab;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .tool-chip:hover[b-bsz88bl45c] {
        background: #dbeafe;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

    .tool-chip:active[b-bsz88bl45c] {
        cursor: grabbing;
    }

/* Las dos acciones principales: un ancho IDEAL (190 px) que no se estira nunca más, y que encoge (hasta
   120 px) si la barra se queda estrecha. */
.main-btn[b-bsz88bl45c] {
    flex: 0 1 190px;
    min-width: 120px;
    max-width: 190px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .main-btn .material-symbols-rounded[b-bsz88bl45c] {
        font-size: 18px;
    }

    .main-btn:focus-visible[b-bsz88bl45c] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.main-btn--nuevo[b-bsz88bl45c] {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.16);
}

    .main-btn--nuevo:hover[b-bsz88bl45c] {
        background: #2563eb;
    }

.main-btn--cargar[b-bsz88bl45c] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

    .main-btn--cargar:hover[b-bsz88bl45c] {
        border-color: #93c5fd;
        background: #dbeafe;
    }

.toolbar-btn[b-bsz88bl45c],
.editor-toolbar .btn[b-bsz88bl45c] {
    flex: 0 0 auto;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 0 12px;
    border-radius: 8px;
}

.format-name[b-bsz88bl45c] {
    flex: 0 1 180px;
    min-width: 140px;
    max-width: 220px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 650;
    color: #1f2937;
    outline: none;
}

    .format-name:focus[b-bsz88bl45c] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.format-load[b-bsz88bl45c] {
    flex: 0 0 170px;
    width: 170px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.82rem;
    color: #1f2937;
    outline: none;
}

    .format-load:focus[b-bsz88bl45c] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.file-import[b-bsz88bl45c] {
    cursor: pointer;
}

    .file-import[b-bsz88bl45c]  input[type="file"] {
        display: none;
    }

.toolbar-sep[b-bsz88bl45c] {
    display: none;
}

.json-overlay[b-bsz88bl45c] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.json-panel[b-bsz88bl45c] {
    width: 70%;
    max-width: 800px;
    height: 70%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.json-head[b-bsz88bl45c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1f2937;
}

.json-panel textarea[b-bsz88bl45c] {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    resize: none;
    white-space: pre;
    outline: none;
    padding: 10px;
    background: #f8fafc;
    color: #111827;
}

/* ── Selector de formatos en árbol (modal «Cargar formato…») ── */

.selector-panel[b-bsz88bl45c] {
    width: 70%;
    max-width: 860px;
    height: 75%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.selector-msg[b-bsz88bl45c] {
    flex: 0 0 auto;
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.8rem;
}

.selector-body[b-bsz88bl45c] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
}

.selector-arbol[b-bsz88bl45c] {
    flex: 1 1 60%;
    min-width: 0;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.selector-acciones[b-bsz88bl45c] {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selector-hoja[b-bsz88bl45c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.85rem;
}

    .selector-hoja .badge[b-bsz88bl45c] {
        align-self: flex-start;
    }

.selector-vacio[b-bsz88bl45c] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 4px;
}

.selector-gestion[b-bsz88bl45c] {
    margin-top: auto;
    font-size: 0.78rem;
    color: #2563eb;
    text-decoration: none;
}

    .selector-gestion:hover[b-bsz88bl45c] {
        text-decoration: underline;
    }

@media (max-width: 1320px) {
    .editor-toolbar[b-bsz88bl45c] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .toolbar-tools[b-bsz88bl45c],
    .toolbar-format-actions[b-bsz88bl45c] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* En una columna, las dos acciones principales siguen juntas y centradas, con su ancho ideal. */
    .toolbar-main-action[b-bsz88bl45c] {
        justify-content: center;
    }

    .toolbar-format-actions[b-bsz88bl45c] {
        justify-content: flex-start;
    }
}

.pdf-editor-header[b-bsz88bl45c] {
    padding: 14px 16px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.pdf-editor-volver[b-bsz88bl45c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

    .pdf-editor-volver:hover[b-bsz88bl45c] {
        color: #2563eb;
    }

    .pdf-editor-volver .material-symbols-rounded[b-bsz88bl45c] {
        font-size: 16px;
    }

/* Aviso del límite del lienzo: solo aparece si el dibujado falla dos veces seguidas. */
.lienzo-error[b-bsz88bl45c] {
    margin: 24px auto;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
    color: #78350f;
    font-size: 13px;
    text-align: center;
}

.pdf-editor-title[b-bsz88bl45c] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
}

.pdf-editor-subtitle[b-bsz88bl45c] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}
/* _content/ErpPowergest/Presentation/Principal/Actividad/Pages/Actividad.razor.rz.scp.css */
/* Registro de actividad. Comparte lenguaje visual con la pagina de notificaciones (mismos colores,
   alturas, radios y estados): toolbar + chips + tarjeta con acento por tema. Lo unico que NO se importa
   de alli son las animaciones de entrada y los desplazamientos al pasar el raton: en esta pagina el
   feedback se da con color y sombra, que no mueven nada. */

.actividad-page[b-lxub5hnsjy],
.actividad-page *[b-lxub5hnsjy],
.actividad-page *[b-lxub5hnsjy]::before,
.actividad-page *[b-lxub5hnsjy]::after {
    box-sizing: border-box;
}

/* Iconos y controles de filtro: son decoracion, no texto. No deben poder seleccionarse ni arrastrarse
   (un doble clic pintaba de azul la ligadura del glifo). */
.actividad-page .material-symbols-outlined[b-lxub5hnsjy],
.actividad-page .act-chip[b-lxub5hnsjy],
.actividad-page .act-segment-btn[b-lxub5hnsjy] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.actividad-page[b-lxub5hnsjy] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

/* CABECERA */

.actividad-header[b-lxub5hnsjy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.actividad-title[b-lxub5hnsjy] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.actividad-subtitle[b-lxub5hnsjy] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

/* PANEL */

/* Filas: toolbar, chips, filtros, listado (el que crece y hace scroll) y paginacion. La paginacion es la
   ultima fila y de alto automatico, asi que se queda pegada abajo, siempre visible, fuera del scroll. */
.actividad-list-panel[b-lxub5hnsjy] {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
}

/* BARRA DE HERRAMIENTAS (segmento de accion + acciones) */

.actividad-toolbar[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.actividad-toolbar-actions[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.actividad-results-text[b-lxub5hnsjy] {
    font-size: clamp(11px, 1.3vw, 12px);
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

/* SEGMENTO DE ACCION (todas / creaciones / modificaciones / eliminaciones) */

.act-segment[b-lxub5hnsjy] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #f1f5f9;
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .act-segment[b-lxub5hnsjy]::-webkit-scrollbar {
        display: none;
    }

.act-segment-btn[b-lxub5hnsjy] {
    flex: 0 0 auto;
    height: clamp(28px, 4vw, 32px);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    padding: 0 clamp(10px, 1.8vw, 16px);
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

    .act-segment-btn:hover[b-lxub5hnsjy] {
        color: #334155;
    }

    .act-segment-btn.active[b-lxub5hnsjy] {
        background: #ffffff;
        color: #005ab7;
        font-weight: 850;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    }

    .act-segment-btn:focus-visible[b-lxub5hnsjy] {
        outline: 2px solid #abc7ff;
        outline-offset: 2px;
    }

/* CHIPS DE AREA */

/* El scroll horizontal y las flechas los aporta <ScrollableTabs>; aqui se estilan las chips, que
   conservan el CSS de esta pagina por viajar en el ChildContent. */
.act-chip[b-lxub5hnsjy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(11px, 1.7vw, 14px);
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .act-chip:hover[b-lxub5hnsjy] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #334155;
    }

    .act-chip.active[b-lxub5hnsjy] {
        background: #e1ecff;
        border-color: #abc7ff;
        color: #005ab7;
        font-weight: 800;
    }

    .act-chip:focus-visible[b-lxub5hnsjy] {
        outline: 2px solid #abc7ff;
        outline-offset: 2px;
    }

/* FILTROS (busqueda + periodo) */

.actividad-filters[b-lxub5hnsjy] {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px;
    gap: 10px;
    align-items: center;
}

.act-searchbox[b-lxub5hnsjy] {
    position: relative;
    min-width: 0;
}

.act-search-icon[b-lxub5hnsjy] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.act-input[b-lxub5hnsjy],
.act-select[b-lxub5hnsjy] {
    width: 100%;
    height: clamp(34px, 4.6vw, 38px);
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    color: #414754;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.act-input[b-lxub5hnsjy] {
    padding: 0 13px 0 38px;
}

    .act-input[b-lxub5hnsjy]::placeholder {
        color: #9ca3af;
        font-weight: 500;
    }

.act-select[b-lxub5hnsjy] {
    padding: 0 10px;
    cursor: pointer;
}

.act-input:focus[b-lxub5hnsjy],
.act-select:focus[b-lxub5hnsjy] {
    border-color: #abc7ff;
    box-shadow: 0 0 0 3px rgba(0, 90, 183, 0.14);
}

/* BOTONES */

/* Boton secundario (Limpiar): mismo molde que el CTA de la tarjeta. */
.act-secondary-btn[b-lxub5hnsjy],
.act-cta[b-lxub5hnsjy] {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 8px);
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .act-secondary-btn .material-symbols-outlined[b-lxub5hnsjy],
    .act-cta .material-symbols-outlined[b-lxub5hnsjy] {
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1;
    }

    .act-secondary-btn:hover[b-lxub5hnsjy],
    .act-cta:hover[b-lxub5hnsjy] {
        background: rgba(211, 228, 254, 0.4);
        border-color: #a9b3cc;
        color: #0b1c30;
    }

    .act-secondary-btn:focus-visible[b-lxub5hnsjy],
    .act-cta:focus-visible[b-lxub5hnsjy] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 90, 183, 0.28);
    }

/* Variante enlace: misma forma que el CTA, con acento primary (accion de navegar) */
.act-cta-link[b-lxub5hnsjy] {
    border-color: #abc7ff;
    color: #005ab7;
}

    .act-cta-link:hover[b-lxub5hnsjy] {
        background: #e1ecff;
        color: #004590;
        border-color: #7aa7e6;
    }

/* LISTADO */

.actividad-list-page[b-lxub5hnsjy] {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f3f6fb;
    border-radius: 12px;
    padding: 12px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .actividad-list-page[b-lxub5hnsjy]::-webkit-scrollbar {
        width: 6px;
    }

    .actividad-list-page[b-lxub5hnsjy]::-webkit-scrollbar-track {
        background: transparent;
    }

    .actividad-list-page[b-lxub5hnsjy]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .actividad-list-page[b-lxub5hnsjy]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* TARJETA DE ACTIVIDAD */

.actividad-card[b-lxub5hnsjy] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1.6vw, 16px);
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding: clamp(12px, 1.7vw, 20px) clamp(12px, 1.7vw, 20px) clamp(12px, 1.7vw, 20px) clamp(14px, 2.2vw, 24px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: clamp(12px, 1.5vw, 14px);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

    .actividad-card:hover[b-lxub5hnsjy] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(191, 219, 254, 0.9);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

/* Barra de acento vertical (color por accion) */
.actividad-card-accent[b-lxub5hnsjy] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #cbd5e1;
}

.actividad-card-icon[b-lxub5hnsjy] {
    width: clamp(38px, 4vw, 48px);
    height: clamp(38px, 4vw, 48px);
    border-radius: clamp(10px, 1.4vw, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.actividad-card-icon-symbol[b-lxub5hnsjy] {
    font-size: clamp(20px, 2.6vw, 24px);
    font-variation-settings: 'FILL' 1;
}

/* TEMA POR ACCION: una sola clase en el <article> tiñe acento, icono y badge. Anadir una accion nueva
   es anadir aqui su bloque de color, sin tocar el markup ni el codigo. */

.actividad-card.act-alta .actividad-card-accent[b-lxub5hnsjy] {
    background: #006c49;
}

.actividad-card.act-alta .actividad-card-icon[b-lxub5hnsjy] {
    background: #d3f5e6;
    color: #006c49;
}

.actividad-card.act-alta .actividad-card-badge[b-lxub5hnsjy] {
    color: #006c49;
    background: #d3f5e6;
    border-color: #4edea3;
}

.actividad-card.act-cambio .actividad-card-accent[b-lxub5hnsjy] {
    background: #005ab7;
}

.actividad-card.act-cambio .actividad-card-icon[b-lxub5hnsjy] {
    background: #e1ecff;
    color: #005ab7;
}

.actividad-card.act-cambio .actividad-card-badge[b-lxub5hnsjy] {
    color: #005ab7;
    background: #e1ecff;
    border-color: #abc7ff;
}

/* Lo que corrió solo (una programación de Tareas): violeta, para no confundirlo con un cambio hecho a mano. */
.actividad-card.act-programada .actividad-card-accent[b-lxub5hnsjy] {
    background: #7c3aed;
}

.actividad-card.act-programada .actividad-card-icon[b-lxub5hnsjy] {
    background: #f1ebff;
    color: #7c3aed;
}

.actividad-card.act-programada .actividad-card-badge[b-lxub5hnsjy] {
    color: #6d28d9;
    background: #f1ebff;
    border-color: #d8c8ff;
}

.actividad-card.act-baja .actividad-card-accent[b-lxub5hnsjy] {
    background: #ba1a1a;
}

.actividad-card.act-baja .actividad-card-icon[b-lxub5hnsjy] {
    background: #ffdcd8;
    color: #ba1a1a;
}

.actividad-card.act-baja .actividad-card-badge[b-lxub5hnsjy] {
    color: #ba1a1a;
    background: #ffdcd8;
    border-color: #ffb4ab;
}

/* CUERPO DE LA TARJETA */

.actividad-card-body[b-lxub5hnsjy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actividad-card-head[b-lxub5hnsjy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.actividad-card-title-wrap[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.actividad-card-title[b-lxub5hnsjy] {
    min-width: 0;
    font-size: clamp(14px, 1.7vw, 16px);
    font-weight: 700;
    color: #0b1c30;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.actividad-card-badge[b-lxub5hnsjy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(19px, 2.6vw, 22px);
    padding: 0 clamp(7px, 1.1vw, 9px);
    border-radius: 999px;
    font-size: clamp(10px, 1.2vw, 11px);
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.actividad-card-time[b-lxub5hnsjy] {
    font-size: clamp(11px, 1.4vw, 13px);
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
    padding-top: 2px;
}

.actividad-card-detail[b-lxub5hnsjy] {
    margin: 0;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1.6;
    color: #414754;
    overflow-wrap: anywhere;
}

/* PIE DE LA TARJETA (metadatos + acceso a la ficha) */

.actividad-card-foot[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-top: 2px;
}

.actividad-card-meta[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.act-meta-chip[b-lxub5hnsjy] {
    display: inline-flex;
    align-items: center;
    height: clamp(19px, 2.6vw, 22px);
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2f8;
    color: #414754;
    font-size: clamp(10px, 1.2vw, 11px);
    font-weight: 750;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .act-meta-chip.muted[b-lxub5hnsjy] {
        color: #64748b;
        background: #f6f8fb;
    }

.act-meta-date[b-lxub5hnsjy] {
    font-size: clamp(10px, 1.2vw, 11px);
    color: #94a3b8;
    font-weight: 700;
    white-space: nowrap;
}

/* ESTADOS (carga, error, vacio) */

.actividad-empty-state[b-lxub5hnsjy] {
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

    .actividad-empty-state .material-symbols-outlined[b-lxub5hnsjy] {
        font-size: 28px;
        color: #9ca3af;
    }

/* PAGINACION */

.act-pagination[b-lxub5hnsjy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 4px 4px;
}

.act-page-btn[b-lxub5hnsjy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: clamp(30px, 4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .act-page-btn .material-symbols-outlined[b-lxub5hnsjy] {
        font-size: 18px;
    }

    .act-page-btn:hover:not(:disabled)[b-lxub5hnsjy] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .act-page-btn:disabled[b-lxub5hnsjy] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.act-page-info[b-lxub5hnsjy] {
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
}

/* El selector de tamano de pagina es el mismo control que el de periodo, pero no debe estirarse */
.act-page-size[b-lxub5hnsjy] {
    width: auto;
    height: clamp(30px, 4vw, 34px);
    font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .actividad-page[b-lxub5hnsjy] {
        overflow: hidden;
    }

    .actividad-filters[b-lxub5hnsjy] {
        grid-template-columns: minmax(220px, 1fr) 170px;
    }
}

@media (max-width: 980px) {
    .actividad-header[b-lxub5hnsjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .actividad-card-foot[b-lxub5hnsjy] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .act-cta[b-lxub5hnsjy] {
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    /* Solo aqui (movil / tablet vertical) apilamos la barra de herramientas y los filtros a lo ancho */
    .actividad-toolbar[b-lxub5hnsjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .act-segment[b-lxub5hnsjy] {
        width: 100%;
    }

    .actividad-toolbar-actions[b-lxub5hnsjy] {
        width: 100%;
        flex-wrap: wrap;
    }

    .actividad-results-text[b-lxub5hnsjy] {
        flex: 1 1 auto;
    }

    .actividad-filters[b-lxub5hnsjy] {
        grid-template-columns: 1fr;
    }

    .actividad-card-head[b-lxub5hnsjy] {
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actividad-page[b-lxub5hnsjy],
    .actividad-page *[b-lxub5hnsjy],
    .actividad-page *[b-lxub5hnsjy]::before,
    .actividad-page *[b-lxub5hnsjy]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetGrafico.razor.rz.scp.css */
/* Gráfico de widget — DH7: SfChart / SfAccumulationChart reales.

   El contenedor manda sobre el chart, nunca al revés: la celda de la rejilla de cuartos define el ancho
   y aquí se fuerza el SVG a no desbordarlo. Sin esto, Syncfusion mide una vez al montar y conserva el
   ancho viejo cuando la celda se estrecha (cambio de ancho del widget, colapso responsive 4→2→1 o
   apertura del sidebar), y el chart se sale de su tarjeta. */

.widget-grafico[b-fo1wsm3vz1] {
    width: 100%;
    min-width: 0; /* imprescindible en grid: sin él, el chart impone un ancho mínimo y rompe la fila */
}

.panel-header[b-fo1wsm3vz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.widget-chart[b-fo1wsm3vz1] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* El alto va aquí Y en el parámetro Height del componente: Syncfusion dibuja el SVG con el valor del
   parámetro, y el CSS es la red que impide que un remedimiento a destiempo deje la tarjeta con otra
   altura y descuadre la fila. Los dos valores tienen que coincidir (240px). */
[b-fo1wsm3vz1] .widget-chart .e-chart,
[b-fo1wsm3vz1] .widget-chart .e-accumulationchart,
[b-fo1wsm3vz1] .widget-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}

[b-fo1wsm3vz1] .widget-chart .e-chart,
[b-fo1wsm3vz1] .widget-chart .e-accumulationchart {
    height: 240px !important;
}

.widget-vacio[b-fo1wsm3vz1] {
    color: #6b7280;
    font-size: 13px;
    padding: 8px 0;
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetKpi.razor.rz.scp.css */
/* Tarjeta KPI de la home. Los estilos vienen de la maqueta anterior (Dashboard.razor.css), movidos aquí
   porque el marcado se mudó a este componente y el CSS con ámbito solo alcanza a su propia plantilla. */

.mini-kpi-card[b-jvdrfkuvsi] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

/* Acento de color por KPI. En la maqueta las clases blue/green/purple existían pero no pintaban nada
   (solo fondo blanco); aquí sí distinguen la tarjeta, con la misma paleta de las sparklines. */
.mini-kpi-card.blue[b-jvdrfkuvsi] { border-top: 3px solid #2563eb; }
.mini-kpi-card.green[b-jvdrfkuvsi] { border-top: 3px solid #16a34a; }
.mini-kpi-card.purple[b-jvdrfkuvsi] { border-top: 3px solid #7c3aed; }
.mini-kpi-card.orange[b-jvdrfkuvsi] { border-top: 3px solid #ea580c; }

.mini-kpi-card-header[b-jvdrfkuvsi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.mini-kpi-title[b-jvdrfkuvsi] {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    line-height: 1.35;
}

.mini-kpi-amount[b-jvdrfkuvsi] {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

/* Pie de apoyo del KPI (DH6): acompaña a la cifra sin competir con ella. */
.mini-kpi-detalle[b-jvdrfkuvsi] {
    font-size: 12px;
    color: #6b7280;
    margin-top: -4px;
    margin-bottom: 8px;
}

.mini-kpi-footer[b-jvdrfkuvsi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 12px;
    gap: 10px;
    margin-bottom: 10px;
}

.mini-kpi-trend[b-jvdrfkuvsi] {
    color: #16a34a;
    font-weight: 700;
    white-space: nowrap;
}

/* Una tendencia negativa NO se pinta de verde: la flecha ya baja, el color lo confirma. */
.mini-kpi-trend-baja[b-jvdrfkuvsi] {
    color: #dc2626;
}

.mini-kpi-chart[b-jvdrfkuvsi] {
    margin-top: auto;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 6px;
    background: #ffffff;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* La SfSparkline ocupa todo el ancho disponible y conserva una altura estable (solo se redibuja en
   anchura). Mantener la altura fija evita que se recorten las columnas al reducir la pantalla. */
[b-jvdrfkuvsi] .mini-kpi-chart .e-sparkline,
[b-jvdrfkuvsi] .mini-kpi-chart .e-sparkline svg,
[b-jvdrfkuvsi] .mini-kpi-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    display: block !important;
    overflow: hidden !important;
}

    /* Evita que el SVG pinte fuera de la tarjeta */
    [b-jvdrfkuvsi] .mini-kpi-chart svg * {
        max-width: 100%;
    }
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetLista.razor.rz.scp.css */
/* Lista de widget: mismo aspecto que la «Actividad Reciente» de la maqueta. Ningún widget del catálogo
   inicial es de este tipo; el componente está para que TipoWidget.Lista no quede sin pintar. */

.widget-lista[b-yt99cfb9xg] {
    width: 100%;
    min-width: 0;
}

.panel-header[b-yt99cfb9xg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.simple-list[b-yt99cfb9xg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.simple-row[b-yt99cfb9xg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

    .simple-row:last-child[b-yt99cfb9xg] {
        border-bottom: 0;
        padding-bottom: 0;
    }

.simple-main[b-yt99cfb9xg] {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.simple-date[b-yt99cfb9xg] {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.widget-vacio[b-yt99cfb9xg] {
    color: #6b7280;
    font-size: 13px;
    padding: 8px 0;
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetResumen.razor.rz.scp.css */
/* Strip de la tira de resúmenes (DH10, D14). Es el formato compacto de la maqueta original: fondo suave,
   FILO IZQUIERDO de color (no borde superior como la tarjeta: en una tira ancha y baja el filo lateral es
   lo que separa un strip del siguiente de un vistazo), título pequeño en versalitas y la cifra debajo.

   Los hex son los MISMOS cuatro acentos de WidgetKpi (azul/verde/morado/naranja). Se repiten aquí porque
   el CSS aislado no cruza de un componente a otro; la fuente de verdad de QUÉ acento le toca a cada clave
   es una sola (WidgetKpi.AcentoDe). */

/* `width: 100%` va AQUÍ y no en el `.razor.css` de la página, aunque allí ya haya una regla
   `.dashboard-celda > *`: el CSS con ámbito le pega su atributo al `*`, y el elemento raíz de un
   componente HIJO no lo lleva — no cruza la frontera. Es la misma lección de DH3 con las tarjetas, y
   sin esto los strips se encogen a su contenido y la tira sale con cuatro cajitas y huecos. */
.resumen-strip[b-ue6l39rv1u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #9ca3af;   /* lo pisa el acento de más abajo */
    background: #f8fafc;
}

.resumen-strip.blue[b-ue6l39rv1u] { border-left-color: #2563eb; background: #f5f8ff; }
.resumen-strip.green[b-ue6l39rv1u] { border-left-color: #16a34a; background: #f4fbf6; }
.resumen-strip.purple[b-ue6l39rv1u] { border-left-color: #7c3aed; background: #f8f5ff; }
.resumen-strip.orange[b-ue6l39rv1u] { border-left-color: #ea580c; background: #fff8f3; }

.resumen-cab[b-ue6l39rv1u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

/* Versalitas: el título es la etiqueta del dato, no compite con la cifra. */
.resumen-titulo[b-ue6l39rv1u] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Tendencia discreta: solo flecha y porcentaje. El «desde el periodo anterior» se queda en la tarjeta. */
.resumen-trend[b-ue6l39rv1u] {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
    flex-shrink: 0;
}

    .resumen-trend.baja[b-ue6l39rv1u] {
        color: #dc2626;
    }

.resumen-cifra[b-ue6l39rv1u] {
    font-size: 19px;
    font-weight: 800;
    color: #111827;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pie del KPI en pequeño: hasta dos líneas y el resto en el title del strip. */
.resumen-detalle[b-ue6l39rv1u] {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetSugerencia.razor.rz.scp.css */
/* Tarjeta de sugerencia (marketing interno, DH11). Cuidada a propósito: es un escaparate, no un aviso.
   Es el diseño de la antigua SugerenciaHome, ya como widget. */

.sug-card[b-fqqfyblz7u] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e3e0f7;
    background: linear-gradient(120deg, #f6f5ff 0%, #fdfcff 55%, #f2f9ff 100%);
    box-shadow: 0 1px 2px rgba(30, 27, 75, 0.06);
}

.sug-media[b-fqqfyblz7u] {
    flex: 0 0 84px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #6d5ef1 0%, #8b7bf7 60%, #5aa8f5 100%);
    color: #fff;
}

.sug-media .material-symbols-rounded[b-fqqfyblz7u] {
    font-size: 34px;
}

.sug-cuerpo[b-fqqfyblz7u] {
    padding: 14px 18px;
    min-width: 0;
}

.sug-kicker[b-fqqfyblz7u] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d5ef1;
}

.sug-titulo[b-fqqfyblz7u] {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.sug-texto[b-fqqfyblz7u] {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4b5563;
    max-width: 68ch;
}

.sug-acciones[b-fqqfyblz7u] {
    margin-top: 8px;
}

.sug-link[b-fqqfyblz7u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #6d5ef1;
    text-decoration: none;
}

.sug-link:hover[b-fqqfyblz7u] {
    text-decoration: underline;
}

.sug-link .material-symbols-rounded[b-fqqfyblz7u] {
    font-size: 16px;
}

@media (max-width: 560px) {
    .sug-media[b-fqqfyblz7u] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetTabla.razor.rz.scp.css */
/* Tabla de widget: una rejilla CSS con el aspecto de las tablas de la maqueta (top de clientes y
   últimos movimientos), pero con el número de columnas que traiga TablaDatos. */

.widget-tabla[b-yaceofw20l] {
    width: 100%;
    min-width: 0;
}

.panel-header[b-yaceofw20l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.last-movements-link[b-yaceofw20l] {
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

    .last-movements-link:hover[b-yaceofw20l] {
        text-decoration: underline;
    }

/* El reparto de columnas lo calcula el componente a partir del número de columnas que traiga
   TablaDatos y lo publica en --widget-tabla-cols; las filas lo heredan. Una variable y no
   grid-template-columns directo porque el contenedor es una COLUMNA de filas, no la propia rejilla. */
.widget-tabla-grid[b-yaceofw20l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.widget-tabla-fila[b-yaceofw20l] {
    display: grid;
    grid-template-columns: var(--widget-tabla-cols, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
    min-width: 0;
}

    .widget-tabla-fila:last-child[b-yaceofw20l] {
        border-bottom: 0;
        padding-bottom: 0;
    }

.widget-tabla-cabecera[b-yaceofw20l] {
    padding: 0 0 10px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.widget-tabla-celda[b-yaceofw20l] {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.widget-tabla-cabecera .widget-tabla-celda[b-yaceofw20l] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

/* DH6 (FUN-61): importes, fechas y cantidades a la derecha, con cifras de ancho fijo para que las
   unidades queden alineadas en columna y las magnitudes se comparen de un vistazo. */
.widget-tabla-celda-num[b-yaceofw20l] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* La primera columna es la que identifica la fila (cliente, fecha): se destaca. */
.widget-tabla-fila .widget-tabla-celda:first-child[b-yaceofw20l] {
    font-weight: 700;
}

.widget-tabla-cabecera .widget-tabla-celda:first-child[b-yaceofw20l] {
    font-weight: 700;
}

.widget-vacio[b-yaceofw20l] {
    color: #6b7280;
    font-size: 13px;
    padding: 8px 0;
}

/* ============ Modo APILADO: la tabla en la columna lateral (DH10) ============
   Sin cabecera y sin rejilla de columnas: cada fila es un bloque —título arriba, pares «etiqueta: valor»
   debajo— porque en un carril de ~230px una tabla de 3 columnas se parte y deja de leerse. Los mismos
   datos, otra disposición. */

.widget-tabla-apilada[b-yaceofw20l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.widget-tabla-bloque[b-yaceofw20l] {
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
    min-width: 0;
}

    .widget-tabla-bloque:first-child[b-yaceofw20l] {
        padding-top: 0;
    }

    .widget-tabla-bloque:last-child[b-yaceofw20l] {
        border-bottom: 0;
        padding-bottom: 0;
    }

.widget-tabla-bloque-titulo[b-yaceofw20l] {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.widget-tabla-bloque-datos[b-yaceofw20l] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 3px;
}

.widget-tabla-par[b-yaceofw20l] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
}

.widget-tabla-par-etiqueta[b-yaceofw20l] {
    color: #9ca3af;
}

.widget-tabla-par-valor[b-yaceofw20l] {
    color: #4b5563;
    font-weight: 600;
}

    .widget-tabla-par-valor.num[b-yaceofw20l] {
        font-variant-numeric: tabular-nums;
    }
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Components/WidgetTareas.razor.rz.scp.css */
/* Widget de tareas pendientes (DH11): filas-enlace con icono, título, detalle y contador. Misma
   anatomía de tarjeta que las tablas (cabecera + lista), para que gráfico y tareas convivan en una fila. */

.widget-tareas[b-zychfejyv9] {
    width: 100%;
    min-width: 0;
}

.panel-header[b-zychfejyv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.widget-vacio[b-zychfejyv9] {
    color: #6b7280;
    font-size: 13px;
    padding: 8px 0;
}

.tareas-lista[b-zychfejyv9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tareas-fila[b-zychfejyv9] {
    border-bottom: 1px solid #eef2f7;
}

    .tareas-fila:last-child[b-zychfejyv9] {
        border-bottom: 0;
    }

.tareas-enlace[b-zychfejyv9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    margin: 0 -6px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

    .tareas-enlace:hover[b-zychfejyv9] {
        background: #f8fafc;
    }

    .tareas-enlace:focus-visible[b-zychfejyv9] {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
    }

.tareas-ico[b-zychfejyv9] {
    flex: 0 0 auto;
    font-size: 22px;
    color: #2563eb;
}

/* Las filas URGENTES (vencido, atascado) cambian el tono del icono y del contador, no el de la fila
   entera: una lista con tres filas rojas se lee como una alarma, y esto es un empujón. */
.tareas-fila.urgente .tareas-ico[b-zychfejyv9],
.tareas-fila.urgente .tareas-num[b-zychfejyv9] {
    color: #dc2626;
}

.tareas-fila.urgente .tareas-num[b-zychfejyv9] {
    background: #fef2f2;
}

.tareas-txt[b-zychfejyv9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tareas-titulo[b-zychfejyv9] {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.tareas-detalle[b-zychfejyv9] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

/* El contador va a la derecha, con cifras de ancho fijo, para que los de la lista queden en columna. */
.tareas-num[b-zychfejyv9] {
    flex: 0 0 auto;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tareas-ir[b-zychfejyv9] {
    flex: 0 0 auto;
    font-size: 20px;
    color: #9ca3af;
}

/* «Todo hecho»: una sola línea con la marca, sin fingir una lista vacía. */
.tareas-hecho[b-zychfejyv9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: #4b5563;
    font-size: 13px;
}

.tareas-hecho-ico[b-zychfejyv9] {
    color: #16a34a;
    font-size: 22px;
}

.tareas-pie[b-zychfejyv9] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    color: #6b7280;
    font-size: 12px;
}
/* _content/ErpPowergest/Presentation/Principal/Dashboards/Pages/Dashboard.razor.rz.scp.css */
/* Home. El CSS con ámbito solo alcanza al marcado de ESTA página: el contenedor, el título, el panel
   de KPI y la rejilla de widgets. Lo que pinta cada tarjeta vive en el .razor.css de su componente
   (WidgetKpi / WidgetGrafico / WidgetTabla / WidgetLista). */

.dashboard-page[b-mhswcb858k] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
    container: dashboard-page / inline-size;
}

/* Cabecera: el saludo y, discreto a su derecha, el acceso a la personalización (DH4). */
.dashboard-cabecera[b-mhswcb858k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-saludo[b-mhswcb858k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dashboard-title[b-mhswcb858k] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

/* El espacio cuyo inicio es este (DH11): una línea discreta bajo el saludo. */
.dashboard-espacio[b-mhswcb858k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

    .dashboard-espacio .material-symbols-rounded[b-mhswcb858k] {
        font-size: 18px;
    }

    .dashboard-espacio strong[b-mhswcb858k] {
        color: #374151;
    }

.dashboard-cabecera-acciones[b-mhswcb858k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Selector único de periodo (DH5): control segmentado, calcado del patrón .me-seg del editor de menú. */
.dashboard-seg[b-mhswcb858k] {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    overflow: hidden;
    background: #ffffff;
}

.dashboard-seg-btn[b-mhswcb858k] {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 0;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .dashboard-seg-btn + .dashboard-seg-btn[b-mhswcb858k] {
        border-left: 1px solid #e5e7eb;
    }

    .dashboard-seg-btn.on[b-mhswcb858k] {
        background: #2563eb;
        color: #ffffff;
    }

    .dashboard-seg-btn:disabled[b-mhswcb858k] {
        opacity: .5;
        cursor: default;
    }

    .dashboard-seg-btn:focus-visible[b-mhswcb858k] {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
    }

.dashboard-personalizar[b-mhswcb858k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    border-radius: 9px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

    .dashboard-personalizar .material-symbols-rounded[b-mhswcb858k] {
        font-size: 18px;
    }

    .dashboard-personalizar:hover[b-mhswcb858k] {
        border-color: #c7d2fe;
        background: #eef2ff;
        color: #2563eb;
    }

    .dashboard-personalizar:focus-visible[b-mhswcb858k] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.card-panel[b-mhswcb858k] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.section-title[b-mhswcb858k] {
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 14px;
}

/* Mensaje de «cargando» / «tu perfil no alcanza ningún indicador». */
.widget-vacio[b-mhswcb858k] {
    color: #6b7280;
    font-size: 13px;
    padding: 8px 0;
}

/* ==================== ZONA «Resúmenes»: la tira de arriba (DH10, D14) ====================
   Tira compacta de strips. NO es la rejilla de cuartos: aquí los widgets no tienen ancho, así que los
   strips se reparten el ancho a partes iguales con un mínimo — con 4 caben los cuatro en una línea, y si
   el usuario pone más (o la ventana se estrecha) bajan solos a la línea siguiente sin que nada se rompa.
   `auto-fit` y no `auto-fill` a propósito: con dos strips se reparten la tira entera en vez de dejar dos
   huecos fantasma a la derecha. */

.dashboard-resumenes[b-mhswcb858k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    min-width: 0;
}

/* La celda del strip es hija de la tira (grid) y madre del strip. Se estira en las dos direcciones a
   propósito: el strip tiene que llenar su columna —si no, la tira queda con cuatro cajitas encogidas y
   huecos entre ellas— y todos los strips de la línea tienen que medir lo mismo de alto aunque uno lleve
   tendencia y otro no. */
.dashboard-celda-resumen[b-mhswcb858k] {
    min-height: 0;
    display: flex;
    align-items: stretch;
}

    .dashboard-celda-resumen > *[b-mhswcb858k] {
        width: 100%;
    }

/* ==================== Cuerpo: panel + carril lateral (DH10, D14) ====================
   El panel manda y el carril le acompaña a la derecha con ~1/4 del ancho, que es lo que la maqueta
   original tenía. Sin lateral (zona vacía o el permiso se la llevó) el panel ocupa el ancho entero: la
   clase `con-lateral` la pone la página solo cuando hay algo que poner, así que no se reserva sitio para
   un carril que no existe. */

.dashboard-cuerpo[b-mhswcb858k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

    .dashboard-cuerpo.con-lateral[b-mhswcb858k] {
        grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    }

.dashboard-lateral[b-mhswcb858k] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.dashboard-celda-lateral[b-mhswcb858k] {
    min-width: 0;
    display: flex;
}

    .dashboard-celda-lateral > *[b-mhswcb858k] {
        width: 100%;
    }

/* ==================== Rejilla única de widgets (D10) ====================
   CUATRO columnas para TODOS los widgets —KPI incluidos: ya no tienen banda propia—. Cuánto ocupa cada
   celda (1, 2, 3 o 4 columnas) lo decide el empaquetador de presentación EmpaquetadoRejilla, compartido
   con la matriz del editor; aquí solo se traducen sus cuartos a `grid-column: span N`. Un span de 3 sale
   de la regla del hueco (el último de la fila absorbe lo que sobra), no de un tamaño del enum. */

.dashboard-rejilla[b-mhswcb858k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.dashboard-celda[b-mhswcb858k] {
    min-width: 0;
    display: flex;
}

    .dashboard-celda > *[b-mhswcb858k] {
        width: 100%;
    }

.dashboard-celda-span-1[b-mhswcb858k] { grid-column: span 1; }
.dashboard-celda-span-2[b-mhswcb858k] { grid-column: span 2; }
.dashboard-celda-span-3[b-mhswcb858k] { grid-column: span 3; }
.dashboard-celda-span-4[b-mhswcb858k] { grid-column: span 4; }

/* ==================== Esqueletos de carga (DH5) ====================
   El primer render pinta TODAS las celdas al instante como bloque gris pulsante — solo CSS, sin JS — y
   cada widget lo sustituye por su tarjeta cuando llegan SUS datos. La altura por tipo aproxima la de la
   tarjeta real para que el layout no salte al resolverse. */

.widget-esqueleto[b-mhswcb858k] {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #eef0f3, #e5e7eb);
    animation: widget-esqueleto-pulso-b-mhswcb858k 1.4s ease-in-out infinite;
}

/* El strip de la tira es bajo: su esqueleto tiene que serlo también, o la tira daría un salto de 200px
   al resolverse (DH10). */
.esq-resumen[b-mhswcb858k] { height: 62px; border-radius: 10px; }

.esq-kpi[b-mhswcb858k] { height: 252px; }
.esq-grafico[b-mhswcb858k] { height: 208px; }
.esq-tabla[b-mhswcb858k] { height: 300px; }
.esq-lista[b-mhswcb858k] { height: 252px; }
.esq-tareas[b-mhswcb858k] { height: 208px; }
.esq-sugerencia[b-mhswcb858k] { height: 118px; }

@keyframes widget-esqueleto-pulso-b-mhswcb858k {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .widget-esqueleto[b-mhswcb858k] {
        animation: none;
    }
}

/* ===================== RESPONSIVE =====================
   Responde al ancho REAL del área de contenido (container query), no solo al viewport: al colapsar o
   expandir el sidebar el viewport no cambia, pero el espacio disponible sí.

   El colapso es 4 → 2 → 1 columnas, y los spans se recortan al número de columnas que quedan: con 2
   columnas, un span de 3 o de 4 vale 2, y los de 1 y 2 se conservan (dos cuartos siguen cabiendo al
   lado). Con 1 columna todo ocupa la única que hay. Sin recortar, un `span 4` en una rejilla de 2
   dejaría filas rotas.

   Los cortes de la REJILLA (4 → 2 → 1) miran el ancho de la propia rejilla, no el del área de
   contenido, porque es la rejilla la que tiene que repartir. No es lo mismo: con carril lateral la
   rejilla recibe 3/4 del área, y a viewport 1180 con el sidebar desplegado eso son 890px medidos frente
   a los 1078 del área. El criterio es el de siempre —un cuarto por debajo de ~200px ya no es un
   cuarto—, aplicado sobre el ancho que de verdad manda.

   El editor NO replica este corte: su matriz comparte la fila con la paleta y el carril, así que es
   siempre más estrecha que esta área y ningún umbral fijo los hace coincidir en todos los anchos. Allí
   la rejilla se queda en cuatro columnas y enseña el REPARTO en cuartos, que es lo que se decide en esa
   pantalla. El porqué, con las cuentas, está en DashboardConfiguracionPage.razor.css. */

/* El carril CAE DEBAJO del panel (D14): por debajo de 900px de contenedor, quitarle su cuarto al panel
   dejaría cada columna demasiado estrecha. Debajo ocupa el ancho entero, no un carril centrado. */
@container dashboard-page (max-width: 900px) {
    .dashboard-cuerpo.con-lateral[b-mhswcb858k] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El número de COLUMNAS lo decide la rejilla por SU propio ancho, no por el del contenedor, y esto es
   una corrección: antes las dos cosas colgaban del mismo umbral de 900 sobre `dashboard-page`, y eso
   no medía lo que limita. Con carril, la rejilla recibe 3/4 del contenedor: a viewport 1180 con el
   sidebar desplegado el área son 1078px pero la rejilla son 890 —medido—, así que caía por debajo de
   900 y la home enseñaba DOS columnas siempre que hubiera carril, que es el caso normal. Un cuarto de
   fila no llegaba a existir.

   Ahora el envoltorio de la rejilla (.dashboard-panel) es el contenedor de consulta y el corte mira su
   ancho real. En el envoltorio y no en la rejilla: un elemento no puede consultarse a sí mismo, y con el
   contenedor en la rejilla sus columnas no cambiaban nunca (solo los spans, que dejaban huecos). Los dos umbrales
   conservan el criterio de antes —un cuarto por debajo de ~200px no es un cuarto— aplicado donde
   corresponde. Cuando el carril cae debajo (regla de arriba), la rejilla recupera el ancho entero y
   vuelve a sus cuatro columnas ella sola, sin que haya que coordinar los dos cortes. */
.dashboard-panel[b-mhswcb858k] {
    container: dashboard-rejilla / inline-size;
    min-width: 0;
}

/* Umbrales medidos con el contenedor ya funcionando: a 1366 con la barra desplegada la rejilla mide ~790px
   y tiene que seguir en cuatro columnas (es la vista de diseño de la home); se pasa a dos cuando de verdad
   no caben, con su propio reparto sin huecos (ver abajo). */
@container dashboard-rejilla (max-width: 760px) {
    .dashboard-rejilla[b-mhswcb858k] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* A dos columnas manda el reparto propio (EmpaquetadoRejilla.SpansMedias): el último de cada fila se
       queda lo que sobra, así no hay huecos. Va con dos clases para ganar a las de cuatro columnas. */
    .dashboard-celda.dashboard-celda-media-1[b-mhswcb858k] { grid-column: span 1; }
    .dashboard-celda.dashboard-celda-media-2[b-mhswcb858k] { grid-column: span 2; }
}

/* Y a una sola columna cuando ni media fila da de sí. A este ancho el carril ya cayó debajo (regla de
   los 900), así que rejilla y área de contenido miden ya lo mismo: el corte es el de siempre, solo que
   ahora mira el mismo ancho que el de 4→2 y no hay dos criterios conviviendo. */
@container dashboard-rejilla (max-width: 520px) {
    .dashboard-rejilla[b-mhswcb858k] {
        grid-template-columns: 1fr;
    }

    .dashboard-celda-span-2[b-mhswcb858k],
    .dashboard-celda-span-3[b-mhswcb858k],
    .dashboard-celda-span-4[b-mhswcb858k],
    .dashboard-celda.dashboard-celda-media-2[b-mhswcb858k] {
        grid-column: span 1;
    }
}

@container dashboard-page (max-width: 760px) {
    .dashboard-page[b-mhswcb858k],
    .dashboard-rejilla[b-mhswcb858k],
    .dashboard-cuerpo[b-mhswcb858k],
    .dashboard-lateral[b-mhswcb858k],
    .dashboard-resumenes[b-mhswcb858k] {
        gap: 14px;
    }

    .dashboard-title[b-mhswcb858k] {
        font-size: 21px;
    }

    /* Estrecho: el botón se queda en icono (el title y el aria siguen diciendo lo que hace). */
    .dashboard-personalizar-txt[b-mhswcb858k] {
        display: none;
    }

    .card-panel[b-mhswcb858k] {
        padding: 14px;
        border-radius: 13px;
    }
}

/* ── La home VACIA: de callejon sin salida a punto de partida ─────────────────────────────── */

.dashboard-vacio[b-mhswcb858k] {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.dashboard-vacio-cab[b-mhswcb858k] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dashboard-vacio-ico[b-mhswcb858k] {
    font-size: 28px;
    color: #6d5ef1;
}

.dashboard-vacio-cab strong[b-mhswcb858k] {
    font-size: 15px;
    color: #1f2937;
}

.dashboard-vacio-cab p[b-mhswcb858k] {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7280;
    max-width: 70ch;
}

.dashboard-vacio-acciones[b-mhswcb858k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-vacio-btn[b-mhswcb858k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

.dashboard-vacio-btn:hover[b-mhswcb858k] {
    background: #f9fafb;
}

.dashboard-vacio-btn.primario[b-mhswcb858k] {
    background: #6d5ef1;
    border-color: #6d5ef1;
    color: #fff;
}

.dashboard-vacio-btn.primario:hover[b-mhswcb858k] {
    background: #5b4ce0;
}

.dashboard-vacio-btn .material-symbols-rounded[b-mhswcb858k] {
    font-size: 16px;
}

.dashboard-vacio-arranque[b-mhswcb858k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #f0f0f4;
    padding-top: 12px;
}

.dashboard-vacio-acceso[b-mhswcb858k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafaff;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    text-decoration: none;
}

.dashboard-vacio-acceso:hover[b-mhswcb858k] {
    border-color: #c7c2f2;
    background: #f4f2ff;
}

.dashboard-vacio-acceso .material-symbols-rounded[b-mhswcb858k] {
    font-size: 18px;
    color: #6d5ef1;
}
/* _content/ErpPowergest/Presentation/Principal/Notificaciones/Pages/NotificacionesPage.razor.rz.scp.css */
.notifications-page[b-ib8cg0zjhj],
.notifications-page *[b-ib8cg0zjhj],
.notifications-page *[b-ib8cg0zjhj]::before,
.notifications-page *[b-ib8cg0zjhj]::after {
    box-sizing: border-box;
}

/* Iconos y controles de filtro: no seleccionables por el usuario */
.notifications-page .material-symbols-outlined[b-ib8cg0zjhj],
.notifications-page .nt-chip[b-ib8cg0zjhj],
.notifications-page .nt-segment-btn[b-ib8cg0zjhj] {
    user-select: none;
    -webkit-user-select: none;
}

.notifications-page[b-ib8cg0zjhj] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    animation: notificationsPageIn-b-ib8cg0zjhj 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.notifications-header[b-ib8cg0zjhj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.notifications-title[b-ib8cg0zjhj] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.notifications-subtitle[b-ib8cg0zjhj] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.card-panel[b-ib8cg0zjhj] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.section-title[b-ib8cg0zjhj] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-ib8cg0zjhj] {
    margin: 0;
}

/* KPIS */

.notifications-summary-panel[b-ib8cg0zjhj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.nt-kpi-card[b-ib8cg0zjhj] {
    min-width: 0;
    height: clamp(52px, 11vw, 76px);
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: clamp(7px, 1.8vw, 11px);
    padding: clamp(7px, 2vw, 12px);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    animation: notificationsCardIn-b-ib8cg0zjhj 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .nt-kpi-card:nth-child(1)[b-ib8cg0zjhj] {
        animation-delay: 0.03s;
    }

    .nt-kpi-card:nth-child(2)[b-ib8cg0zjhj] {
        animation-delay: 0.06s;
    }

    .nt-kpi-card:nth-child(3)[b-ib8cg0zjhj] {
        animation-delay: 0.09s;
    }

    .nt-kpi-card:nth-child(4)[b-ib8cg0zjhj] {
        animation-delay: 0.12s;
    }

    .nt-kpi-card:hover[b-ib8cg0zjhj] {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10);
    }

    .nt-kpi-card.active[b-ib8cg0zjhj] {
        background: #eff6ff;
        border-color: #bfdbfe;
        box-shadow: inset 3px 0 0 #2563eb, 0 12px 26px rgba(37, 99, 235, 0.10);
    }

.nt-kpi-icon[b-ib8cg0zjhj] {
    width: clamp(30px, 8.5vw, 42px);
    height: clamp(30px, 8.5vw, 42px);
    border-radius: clamp(10px, 2.6vw, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .nt-kpi-icon .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: clamp(16px, 4.4vw, 22px);
    }

.nt-kpi-blue[b-ib8cg0zjhj] {
    background: #eff6ff;
    color: #2563eb;
}

.nt-kpi-orange[b-ib8cg0zjhj] {
    background: #fffbeb;
    color: #d97706;
}

.nt-kpi-yellow[b-ib8cg0zjhj] {
    background: #fefce8;
    color: #ca8a04;
}

.nt-kpi-red[b-ib8cg0zjhj] {
    background: #fef2f2;
    color: #dc2626;
}

.nt-kpi-main[b-ib8cg0zjhj] {
    min-width: 0;
}

.nt-kpi-label[b-ib8cg0zjhj] {
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 850;
    color: #64748b;
    line-height: 1.1;
}

.nt-kpi-value[b-ib8cg0zjhj] {
    margin-top: 2px;
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.03em;
}

.nt-kpi-foot[b-ib8cg0zjhj] {
    margin-top: 2px;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.1;
    font-weight: 650;
    color: #8b95a7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PANEL */

.notifications-list-panel[b-ib8cg0zjhj] {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.notifications-results-text[b-ib8cg0zjhj] {
    font-size: clamp(11px, 1.3vw, 12px);
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

/* SEGMENTO DE ESTADO (todas / sin leer) */

.nt-segment[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #f1f5f9;
    flex: 0 0 auto;
}

.nt-segment-btn[b-ib8cg0zjhj] {
    height: clamp(28px, 4vw, 32px);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    padding: 0 clamp(12px, 1.8vw, 16px);
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

    .nt-segment-btn:hover[b-ib8cg0zjhj] {
        color: #334155;
    }

    .nt-segment-btn.active[b-ib8cg0zjhj] {
        background: #ffffff;
        color: #005ab7;
        font-weight: 850;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    }

    .nt-segment-btn:focus-visible[b-ib8cg0zjhj] {
        outline: 2px solid #abc7ff;
        outline-offset: 2px;
    }

/* CHIPS DE TIPO (con punto de color) */

/* El scroll horizontal y las flechas los aporta <ScrollableTabs>; aqui se estilan las chips, que
   conservan el CSS de esta pagina por viajar en el ChildContent. */
.nt-chip[b-ib8cg0zjhj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 8px);
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(11px, 1.7vw, 14px);
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .nt-chip:hover[b-ib8cg0zjhj] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #334155;
    }

    .nt-chip.active[b-ib8cg0zjhj] {
        background: #e1ecff;
        border-color: #abc7ff;
        color: #005ab7;
        font-weight: 800;
    }

    .nt-chip:focus-visible[b-ib8cg0zjhj] {
        outline: 2px solid #abc7ff;
        outline-offset: 2px;
    }

.nt-chip-dot[b-ib8cg0zjhj] {
    width: clamp(7px, 1vw, 8px);
    height: clamp(7px, 1vw, 8px);
    border-radius: 999px;
    flex: 0 0 auto;
}

.nt-chip-dot-all[b-ib8cg0zjhj] {
    background: #005ab7;
}

.nt-chip-dot-info[b-ib8cg0zjhj] {
    background: #0072e5;
}

.nt-chip-dot-success[b-ib8cg0zjhj] {
    background: #006c49;
}

.nt-chip-dot-warning[b-ib8cg0zjhj] {
    background: #825100;
}

.nt-chip-dot-danger[b-ib8cg0zjhj] {
    background: #ba1a1a;
}

.notifications-chips[b-ib8cg0zjhj]{
    border-bottom: none;
}

/* MARCAR TODAS COMO LEIDAS (mismo estilo que el CTA de la tarjeta) */
.nt-markall-btn[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 8px);
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .nt-markall-btn:hover[b-ib8cg0zjhj] {
        background: rgba(211, 228, 254, 0.4);
        color: #0b1c30;
        border-color: #a9b3cc;
    }

    .nt-markall-btn .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1;
    }

/* BARRA DE HERRAMIENTAS (segmento de estado + acciones) */

.notifications-toolbar[b-ib8cg0zjhj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.notifications-toolbar-actions[b-ib8cg0zjhj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Boton Limpiar (mismo estilo que el CTA de la tarjeta) */
.nt-secondary-btn[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 8px);
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .nt-secondary-btn:hover[b-ib8cg0zjhj] {
        background: rgba(211, 228, 254, 0.4);
        border-color: #a9b3cc;
        color: #0b1c30;
    }

    .nt-secondary-btn .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1;
    }

/* LISTA */

.notifications-list-page[b-ib8cg0zjhj] {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f3f6fb;
    border-radius: 12px;
    padding: 12px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .notifications-list-page[b-ib8cg0zjhj]::-webkit-scrollbar {
        width: 6px;
    }

    .notifications-list-page[b-ib8cg0zjhj]::-webkit-scrollbar-track {
        background: transparent;
    }

    .notifications-list-page[b-ib8cg0zjhj]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .notifications-list-page[b-ib8cg0zjhj]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* TARJETAS DE NOTIFICACION */

.notification-card[b-ib8cg0zjhj] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1.6vw, 16px);
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: clamp(96px, 11.5vw, 140px);
    padding: clamp(12px, 1.7vw, 20px) clamp(12px, 1.7vw, 20px) clamp(12px, 1.7vw, 20px) clamp(14px, 2.2vw, 24px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: clamp(12px, 1.5vw, 14px);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    animation: notificationItemIn-b-ib8cg0zjhj 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

    .notification-card:nth-child(1)[b-ib8cg0zjhj] {
        animation-delay: 0.03s;
    }

    .notification-card:nth-child(2)[b-ib8cg0zjhj] {
        animation-delay: 0.06s;
    }

    .notification-card:nth-child(3)[b-ib8cg0zjhj] {
        animation-delay: 0.09s;
    }

    .notification-card:nth-child(4)[b-ib8cg0zjhj] {
        animation-delay: 0.12s;
    }

    .notification-card:nth-child(5)[b-ib8cg0zjhj] {
        animation-delay: 0.15s;
    }

    .notification-card:hover[b-ib8cg0zjhj] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(191, 219, 254, 0.9);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .notification-card.unread[b-ib8cg0zjhj] {
        background: rgba(251, 253, 255, 0.85);
        border-color: rgba(191, 214, 251, 0.9);
    }

/* Barra de acento vertical (color por tema) */
.notification-card-accent[b-ib8cg0zjhj] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #cbd5e1;
}

.notification-card.info .notification-card-accent[b-ib8cg0zjhj] {
    background: #005ab7;
}

.notification-card.success .notification-card-accent[b-ib8cg0zjhj] {
    background: #006c49;
}

.notification-card.warning .notification-card-accent[b-ib8cg0zjhj] {
    background: #825100;
}

.notification-card.danger .notification-card-accent[b-ib8cg0zjhj] {
    background: #ba1a1a;
}

/* Contenedor del icono; el color de fondo/texto lo aporta .notification-icon-* */
.notification-card-icon[b-ib8cg0zjhj] {
    width: clamp(38px, 4vw, 48px);
    height: clamp(38px, 4vw, 48px);
    border-radius: clamp(10px, 1.4vw, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.notification-card-icon-symbol[b-ib8cg0zjhj] {
    font-size: clamp(20px, 2.6vw, 24px);
    font-variation-settings: 'FILL' 1;
}

/* Tarjetas ya leidas: icono en escala de grises y sin barra de acento izquierda */
.notification-card:not(.unread) .notification-card-accent[b-ib8cg0zjhj] {
    display: none;
}

.notification-card:not(.unread) .notification-card-icon[b-ib8cg0zjhj] {
    filter: grayscale(1);
}

.notification-icon-info[b-ib8cg0zjhj] {
    background: #e1ecff;
    color: #005ab7;
}

.notification-icon-success[b-ib8cg0zjhj] {
    background: #d3f5e6;
    color: #006c49;
}

.notification-icon-warning[b-ib8cg0zjhj] {
    background: #ffe8c7;
    color: #825100;
}

.notification-icon-danger[b-ib8cg0zjhj] {
    background: #ffdcd8;
    color: #ba1a1a;
}

.notification-card-body[b-ib8cg0zjhj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-card-head[b-ib8cg0zjhj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.notification-card-title-wrap[b-ib8cg0zjhj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.notification-card-title[b-ib8cg0zjhj] {
    min-width: 0;
    font-size: clamp(14px, 1.7vw, 16px);
    font-weight: 700;
    color: #0b1c30;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.notification-card-time[b-ib8cg0zjhj] {
    font-size: clamp(11px, 1.4vw, 13px);
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
    padding-top: 2px;
}

.notification-card-detail[b-ib8cg0zjhj] {
    margin: 0 0 6px;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1.6;
    color: #414754;
}

/* Aviso con diseño HTML: el diseño ocupa la tarjeta entera, sin márgenes ni barra de acento. El iframe crece con su
   contenido (iframeAutoAlto.js); el alto de aquí es solo el de mientras carga. */
.notification-card.notification-card-diseno[b-ib8cg0zjhj] {
    display: block;
    padding: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.notification-card-html[b-ib8cg0zjhj] {
    display: block;
    width: 100%;
    height: 160px;
    border: 0;
    background: #fff;
}

/* Las acciones del aviso, flotando en la esquina: se ven al pasar el ratón (o siempre, en pantallas táctiles). */
.notification-card-flotante[b-ib8cg0zjhj] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.notification-card-diseno:hover .notification-card-flotante[b-ib8cg0zjhj],
.notification-card-diseno:focus-within .notification-card-flotante[b-ib8cg0zjhj] {
    opacity: 1;
}

@media (hover: none) {
    .notification-card-flotante[b-ib8cg0zjhj] { opacity: 1; }
}

/* «Nueva»: se ve siempre, aunque las acciones estén escondidas. */
.notification-card-diseno.unread[b-ib8cg0zjhj]::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2f6fed;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.notification-card-nueva[b-ib8cg0zjhj] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.notification-card-flotante-hora[b-ib8cg0zjhj] {
    font-size: 12px;
    color: #64748b;
    margin: 0 4px;
    white-space: nowrap;
}

.notification-card-flotante-btn[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.notification-card-flotante-btn:hover[b-ib8cg0zjhj] { background: #eef2f7; color: #1e293b; }
.notification-card-flotante-borrar:hover[b-ib8cg0zjhj] { background: #fdecec; color: #b91c1c; }
.notification-card-flotante-btn .material-symbols-outlined[b-ib8cg0zjhj] { font-size: 19px; }

/* La imagen de una notificación escrita a mano, debajo del texto. */
.notification-card-imagen[b-ib8cg0zjhj] {
    display: block;
    max-width: min(100%, 420px);
    max-height: 260px;
    margin: 4px 0 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.notification-card-actions[b-ib8cg0zjhj] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

/* Boton de accion dentro de la tarjeta (marcar como leida) */
.notification-cta[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 8px);
    height: clamp(30px, 4.4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .notification-cta .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1;
    }

    .notification-cta:hover[b-ib8cg0zjhj] {
        background: rgba(211, 228, 254, 0.4);
        color: #0b1c30;
        border-color: #a9b3cc;
    }

    .notification-cta:focus-visible[b-ib8cg0zjhj] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 90, 183, 0.28);
    }

/* Variante enlace: misma forma que el CTA, con acento primary (accion de navegar) */
.notification-cta-link[b-ib8cg0zjhj] {
    border-color: #abc7ff;
    color: #005ab7;
}

    .notification-cta-link:hover[b-ib8cg0zjhj] {
        background: #e1ecff;
        color: #004590;
        border-color: #7aa7e6;
    }

/* Descartar: icono que aparece al pasar el raton sobre la tarjeta */
.notification-card-dismiss[b-ib8cg0zjhj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 4.4vw, 34px);
    height: clamp(30px, 4.4vw, 34px);
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

    .notification-card-dismiss .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: clamp(18px, 2.4vw, 20px);
        line-height: 1;
    }

    .notification-card-dismiss:hover[b-ib8cg0zjhj] {
        background: #ffdcd8;
        color: #ba1a1a;
    }

    .notification-card-dismiss:focus-visible[b-ib8cg0zjhj] {
        opacity: 1;
        outline: none;
        box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.25);
    }

.notification-theme-badge[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(19px, 2.6vw, 22px);
    padding: 0 clamp(7px, 1.1vw, 9px);
    border-radius: 999px;
    font-size: clamp(10px, 1.2vw, 11px);
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.notification-theme-info[b-ib8cg0zjhj] {
    color: #005ab7;
    background: #e1ecff;
    border-color: #abc7ff;
}

.notification-theme-success[b-ib8cg0zjhj] {
    color: #006c49;
    background: #d3f5e6;
    border-color: #4edea3;
}

.notification-theme-warning[b-ib8cg0zjhj] {
    color: #825100;
    background: #ffe8c7;
    border-color: #ffb95f;
}

.notification-theme-danger[b-ib8cg0zjhj] {
    color: #ba1a1a;
    background: #ffdcd8;
    border-color: #ffb4ab;
}

.notifications-empty-state[b-ib8cg0zjhj] {
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

    .notifications-empty-state .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: 28px;
        color: #9ca3af;
    }

/* ANIMACIONES */

@keyframes notificationsPageIn-b-ib8cg0zjhj {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes notificationsCardIn-b-ib8cg0zjhj {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notificationItemIn-b-ib8cg0zjhj {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .notifications-page[b-ib8cg0zjhj] {
        height: 100%;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .notifications-summary-panel[b-ib8cg0zjhj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    /* La pagina conserva la altura completa (grid) tambien en tablet; la lista sigue
       teniendo su propio scroll interno en lugar de un alto fijo. */
    .notifications-summary-panel[b-ib8cg0zjhj] {
        grid-template-columns: 1fr 1fr;
    }

    .notifications-header[b-ib8cg0zjhj] {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-card-title-wrap[b-ib8cg0zjhj] {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .notifications-summary-panel[b-ib8cg0zjhj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Solo aqui (movil / tablet vertical) apilamos la barra de herramientas a lo ancho */
    .notifications-toolbar[b-ib8cg0zjhj] {
        flex-direction: column;
        align-items: stretch;
    }

    .nt-segment[b-ib8cg0zjhj] {
        width: 100%;
    }

    .nt-segment-btn[b-ib8cg0zjhj] {
        flex: 1 1 auto;
    }

    .notifications-toolbar-actions[b-ib8cg0zjhj] {
        width: 100%;
        flex-wrap: wrap;
    }

    .notifications-results-text[b-ib8cg0zjhj] {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notifications-page[b-ib8cg0zjhj],
    .notifications-page *[b-ib8cg0zjhj],
    .notifications-page *[b-ib8cg0zjhj]::before,
    .notifications-page *[b-ib8cg0zjhj]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* CONFIRMACION DE DESCARTE (contenido del Modal) — mismo estilo que el borrado de ficha de cliente */

.nt-confirm-modal[b-ib8cg0zjhj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.nt-confirm-icon[b-ib8cg0zjhj] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.nt-confirm-body[b-ib8cg0zjhj] {
    flex: 1 1 auto;
    min-width: 0;
}

.nt-confirm-subtitle[b-ib8cg0zjhj] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .nt-confirm-subtitle strong[b-ib8cg0zjhj] {
        font-weight: 850;
        color: #1f2937;
    }

.nt-confirm-actions[b-ib8cg0zjhj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.nt-confirm-cancel[b-ib8cg0zjhj],
.nt-confirm-danger[b-ib8cg0zjhj] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nt-confirm-cancel[b-ib8cg0zjhj] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .nt-confirm-cancel:hover:not(:disabled)[b-ib8cg0zjhj] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.nt-confirm-danger[b-ib8cg0zjhj] {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .nt-confirm-danger:hover:not(:disabled)[b-ib8cg0zjhj] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .nt-confirm-cancel:disabled[b-ib8cg0zjhj],
    .nt-confirm-danger:disabled[b-ib8cg0zjhj] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Paginacion del listado */
.nt-pagination[b-ib8cg0zjhj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 4px 4px;
}

.nt-page-btn[b-ib8cg0zjhj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: clamp(30px, 4vw, 34px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .nt-page-btn .material-symbols-outlined[b-ib8cg0zjhj] {
        font-size: 18px;
    }

    .nt-page-btn:hover:not(:disabled)[b-ib8cg0zjhj] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .nt-page-btn:disabled[b-ib8cg0zjhj] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.nt-page-info[b-ib8cg0zjhj] {
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}
/* _content/ErpPowergest/Presentation/ServicioTecnico/Pages/PartesServicioPage.razor.rz.scp.css */
/* Listado de PARTES DE SERVICIO TÉCNICO (ST2). Copia del CSS del listado de órdenes de fabricación con el
   prefijo de la página cambiado (`ord-` → `st-`): el CSS de Blazor es scoped por componente, así que no puede
   compartirse; lo que sí se comparte es el vocabulario de clases `fc-*` (filtros, insignias, tabla, modal)
   para que las pantallas de documentos se vean iguales. */

.st-page[b-z1072u4yvy],
.st-page *[b-z1072u4yvy],
.st-page *[b-z1072u4yvy]::before,
.st-page *[b-z1072u4yvy]::after {
    box-sizing: border-box;
}

.st-page[b-z1072u4yvy] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--fc-gap);
    animation: stPageIn-b-z1072u4yvy 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.st-heading[b-z1072u4yvy],
.st-list-panel[b-z1072u4yvy],
.fc-filter-item[b-z1072u4yvy],
.fc-filter-item-search[b-z1072u4yvy],
.fc-filter-searchbox[b-z1072u4yvy] {
    min-inline-size: 0;
}

/* CABECERA */

.st-heading[b-z1072u4yvy] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    .st-heading > div:first-child[b-z1072u4yvy] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .st-heading.command-bar-host-collapsed > div:first-child[b-z1072u4yvy] {
        flex: 1 1 auto;
    }

.st-title[b-z1072u4yvy] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.st-subtitle[b-z1072u4yvy] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.st-heading.command-bar-host-collapsed .st-title[b-z1072u4yvy],
.st-heading.command-bar-host-collapsed .st-subtitle[b-z1072u4yvy] {
    white-space: normal;
    overflow-wrap: break-word;
}

.st-header-actions[b-z1072u4yvy] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* PANEL LISTADO */

.st-list-panel[b-z1072u4yvy] {
    grid-row: -2 / -1;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS: búsqueda ancha + estado + técnico + cliente + dos fechas. */

.st-filters[b-z1072u4yvy] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-z1072u4yvy] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-z1072u4yvy] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

/* El input de cliente lo pinta CampoConBuscador (componente HIJO): el atributo de aislamiento de esta hoja
   no le llega, así que el aspecto del filtro va con ::deep desde .st-filters. El mismo selector cubre los
   inputs propios de la página (búsqueda, fechas), que también cuelgan de ahí. */

.st-filters[b-z1072u4yvy]  .fc-filter-input,
.fc-filter-select[b-z1072u4yvy] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.st-filters[b-z1072u4yvy]  .fc-filter-input {
    padding-block: 0;
    padding-inline: 0.85rem;
}

.st-filters[b-z1072u4yvy]  .fc-filter-input-search {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-select[b-z1072u4yvy] {
    padding-block: 0;
    padding-inline: 0.85rem;
    cursor: pointer;
}

.st-filters[b-z1072u4yvy]  .fc-filter-input::placeholder {
    color: #9ca3af;
}

.st-filters[b-z1072u4yvy]  .fc-filter-input:focus,
.fc-filter-select:focus[b-z1072u4yvy] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* El campo con lupa vive dentro del filtro: hereda el alto y el input ocupa todo el ancho. El hueco
   derecho para la lupa lo pone el propio componente (derivado del ancho del botón): aquí no se toca. */

.st-page[b-z1072u4yvy]  .ccb-selector {
    position: relative;
    inline-size: 100%;
}

.st-page[b-z1072u4yvy]  .ccb-icon-btn {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .st-page[b-z1072u4yvy]  .ccb-icon-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

/* CASILLAS (solo abiertos / garantía / presupuesto / incluir facturados / anulados) */

.st-filters-casillas[b-z1072u4yvy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fc-gap);
}

.st-casilla[b-z1072u4yvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fc-font-text);
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .st-casilla input[type="checkbox"][b-z1072u4yvy] {
        inline-size: 0.95rem;
        block-size: 0.95rem;
        accent-color: #2563eb;
        cursor: pointer;
    }

.st-nota[b-z1072u4yvy] {
    margin-block-start: 0.4rem !important;
    font-size: var(--fc-font-small);
    color: #6b7280;
}

/* BOTONES */

.fc-primary-btn[b-z1072u4yvy],
.fc-action-btn[b-z1072u4yvy] {
    min-block-size: var(--fc-field-block);
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-block: 0;
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    font-size: var(--fc-font-text);
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fc-primary-btn[b-z1072u4yvy] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fc-primary-btn:hover[b-z1072u4yvy] {
        background: #1d4ed8;
        transform: translateY(-0.08rem);
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.fc-danger-btn[b-z1072u4yvy] {
    background: #dc2626;
}

    .fc-danger-btn:hover[b-z1072u4yvy] {
        background: #b91c1c;
        box-shadow: 0 0.65rem 1.1rem rgba(220, 38, 38, 0.16);
    }

.fc-action-btn[b-z1072u4yvy] {
    border: 0.0625rem solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fc-action-btn:hover[b-z1072u4yvy] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

/* TABLA (la pinta <TablaPaginada>; aquí solo el replegado de columnas y las celdas con plantilla, con `::deep`). */

.fc-tabla[b-z1072u4yvy] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.st-page[b-z1072u4yvy]  .tp-panel {
    min-height: auto;
}

.st-page[b-z1072u4yvy]  .st-averia {
    display: inline-block;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
}

/* ACCIONES POR FILA (plantilla de la última columna) */

.st-page[b-z1072u4yvy]  .fc-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.st-page[b-z1072u4yvy]  .fc-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

    .st-page[b-z1072u4yvy]  .fc-row-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .st-page[b-z1072u4yvy]  .fc-row-btn-danger:hover {
        background: #fef2f2;
        color: #b91c1c;
    }

    .st-page[b-z1072u4yvy]  .fc-row-btn:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .st-page[b-z1072u4yvy]  .fc-row-btn .material-symbols-outlined {
        font-size: 1.15rem;
    }

/* ESTADO (chip como plantilla de la columna: markup dentro de la tabla → `::deep`). */

.fc-estado-badge[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.st-page[b-z1072u4yvy]  .st-icono-chip {
    font-size: 0.95rem;
}

.fc-estado-green[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fc-estado-blue[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fc-estado-orange[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fc-estado-red[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-estado-gray[b-z1072u4yvy],
.st-page[b-z1072u4yvy]  .fc-estado-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* MODAL DE CONFIRMACIÓN */

.fc-modal-overlay[b-z1072u4yvy] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: stModalIn-b-z1072u4yvy 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-modal[b-z1072u4yvy] {
    inline-size: min(46rem, 100%);
    max-block-size: min(80dvh, 44rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--fc-inner-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    padding: var(--fc-panel-pad);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.fc-modal-corto[b-z1072u4yvy] {
    inline-size: min(34rem, 100%);
}

.fc-modal-header[b-z1072u4yvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
}

.fc-modal-title[b-z1072u4yvy] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fc-modal-close[b-z1072u4yvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .fc-modal-close:hover[b-z1072u4yvy] {
        background: #f1f5f9;
        color: #1f2937;
    }

.fc-modal-cuerpo[b-z1072u4yvy] {
    font-size: var(--fc-font-text);
    color: #374151;
    line-height: 1.45;
    overflow-y: auto;
}

    .fc-modal-cuerpo p[b-z1072u4yvy] {
        margin: 0;
    }

.fc-modal-actions[b-z1072u4yvy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-inner-gap);
}

/* ANIMACIONES */

@keyframes stModalIn-b-z1072u4yvy {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stPageIn-b-z1072u4yvy {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE: al estrechar caen primero las columnas que menos dicen. */

@media (max-width: 1320px) {
    .st-page[b-z1072u4yvy]  .fc-col-entrega {
        display: none;
    }
}

@media (max-width: 1180px) {
    .st-page[b-z1072u4yvy]  .fc-col-tecnico {
        display: none;
    }
}

@media (max-width: 1020px) {
    .st-page[b-z1072u4yvy]  .fc-col-averia {
        display: none;
    }
}

@media (max-width: 80rem) {
    .st-filters[b-z1072u4yvy] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fc-filter-item-search[b-z1072u4yvy] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .st-page[b-z1072u4yvy] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .st-filters[b-z1072u4yvy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-page[b-z1072u4yvy],
    .st-page *[b-z1072u4yvy],
    .st-page *[b-z1072u4yvy]::before,
    .st-page *[b-z1072u4yvy]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/ServicioTecnico/Pages/SolucionesPage.razor.rz.scp.css */
/* SOLUCIONES TÉCNICAS (ST7). Prefijo `sol-`. Tarjetas de lectura y un editor en ventana propia. */

.sol-page[b-156rvicfy6],
.sol-page *[b-156rvicfy6],
.sol-page *[b-156rvicfy6]::before,
.sol-page *[b-156rvicfy6]::after {
    box-sizing: border-box;
}

.sol-page[b-156rvicfy6] {
    --sol-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --sol-radius: clamp(0.75rem, 0.85vw, 1rem);
    --sol-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --sol-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --sol-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --sol-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    inline-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--sol-gap);
}

.sol-heading[b-156rvicfy6] {
    inline-size: 100%;
    min-inline-size: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sol-gap);
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .sol-heading > div:first-child[b-156rvicfy6] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .sol-heading.command-bar-host-collapsed > div:first-child[b-156rvicfy6] {
        flex: 1 1 auto;
    }

.sol-title[b-156rvicfy6] {
    margin: 0;
    font-size: var(--sol-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sol-subtitle[b-156rvicfy6] {
    margin-block-start: 0.25rem;
    font-size: var(--sol-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.sol-heading.command-bar-host-collapsed .sol-title[b-156rvicfy6],
.sol-heading.command-bar-host-collapsed .sol-subtitle[b-156rvicfy6] {
    white-space: normal;
    overflow-wrap: break-word;
}

.sol-filters[b-156rvicfy6] {
    display: flex;
    align-items: center;
    gap: var(--sol-gap);
    flex-wrap: wrap;
}

.sol-searchbox[b-156rvicfy6] {
    position: relative;
    flex: 1 1 20rem;
    max-inline-size: 36rem;
}

.sol-search-icon[b-156rvicfy6] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
}

.sol-input[b-156rvicfy6] {
    inline-size: 100%;
    min-block-size: var(--sol-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--sol-font-text);
    color: #1f2937;
    padding-block: 0.4rem;
    padding-inline: 0.85rem;
    outline: none;
    font-family: inherit;
}

    .sol-input:focus[b-156rvicfy6] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.sol-input-search[b-156rvicfy6] {
    padding-inline-start: 2.5rem;
}

.sol-textarea[b-156rvicfy6] {
    resize: vertical;
    line-height: 1.4;
}

.sol-casilla[b-156rvicfy6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--sol-font-text);
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.sol-vacio[b-156rvicfy6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: #6b7280;
    font-size: var(--sol-font-text);
    border: 0.0625rem dashed #e5e7eb;
    border-radius: var(--sol-radius);
}

.sol-lista[b-156rvicfy6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--sol-gap);
    align-content: start;
}

.sol-card[b-156rvicfy6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--sol-radius);
    padding: 0.9rem 1rem;
    box-shadow: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.04);
}

    .sol-card.inactiva[b-156rvicfy6] {
        opacity: 0.6;
        background: #fafafa;
    }

.sol-card-head[b-156rvicfy6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sol-card-titulo[b-156rvicfy6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.25;
}

.sol-card-marcas[b-156rvicfy6] {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sol-chip[b-156rvicfy6] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999rem;
    background: #f1f5f9;
    color: #334155;
    font-size: var(--sol-font-small);
    font-weight: 750;
    white-space: nowrap;
}

    .sol-chip .material-symbols-outlined[b-156rvicfy6] {
        font-size: 0.95rem;
    }

.sol-chip-rag[b-156rvicfy6] {
    background: #eef2ff;
    color: #4338ca;
}

.sol-chip-off[b-156rvicfy6] {
    background: #fef2f2;
    color: #b91c1c;
}

.sol-card-bloque[b-156rvicfy6] {
    font-size: var(--sol-font-text);
    color: #374151;
}

    .sol-card-bloque p[b-156rvicfy6] {
        margin: 0.15rem 0 0;
        white-space: pre-wrap;
        line-height: 1.4;
    }

.sol-card-label[b-156rvicfy6] {
    font-size: var(--sol-font-small);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.sol-card-etiquetas[b-156rvicfy6] {
    font-size: var(--sol-font-small);
    color: #6b7280;
}

.sol-card-acciones[b-156rvicfy6] {
    display: flex;
    gap: 0.4rem;
    margin-block-start: 0.25rem;
}

.sol-btn[b-156rvicfy6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-block-size: 2.1rem;
    padding-inline: 0.8rem;
    border: 0.0625rem solid #dbe2ea;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #374151;
    font-size: var(--sol-font-text);
    font-weight: 750;
    cursor: pointer;
}

    .sol-btn:hover[b-156rvicfy6] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .sol-btn .material-symbols-outlined[b-156rvicfy6] {
        font-size: 1.05rem;
    }

    .sol-btn:disabled[b-156rvicfy6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sol-btn-primario[b-156rvicfy6] {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .sol-btn-primario:hover[b-156rvicfy6] {
        background: #1d4ed8;
    }

/* EDITOR */

.sol-modal-overlay[b-156rvicfy6] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.sol-modal[b-156rvicfy6] {
    inline-size: min(44rem, 100%);
    max-block-size: min(88dvh, 50rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--sol-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--sol-radius);
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.sol-modal-header[b-156rvicfy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sol-modal-title[b-156rvicfy6] {
    font-size: 1rem;
    font-weight: 850;
    color: #1f2937;
}

.sol-modal-close[b-156rvicfy6] {
    inline-size: 2rem;
    block-size: 2rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.sol-modal-cuerpo[b-156rvicfy6] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
}

.sol-field[b-156rvicfy6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .sol-field label[b-156rvicfy6] {
        font-size: var(--sol-font-small);
        font-weight: 750;
        color: #475569;
    }

.sol-grid-2[b-156rvicfy6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.sol-error[b-156rvicfy6] {
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    background: #fef2f2;
    color: #b91c1c;
    font-size: var(--sol-font-text);
}

.sol-modal-actions[b-156rvicfy6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 42rem) {
    .sol-grid-2[b-156rvicfy6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/ErpPowergest/Presentation/ServicioTecnico/Pages/TableroPartesPage.razor.rz.scp.css */
/* TABLERO de partes de servicio técnico (ST3). Prefijo `stt-`. Cuatro columnas fijas por estado, tarjetas
   arrastrables con drag & drop nativo. La columna destino se resalta mientras algo va en el aire. */

.stt-page[b-xys1meydgb],
.stt-page *[b-xys1meydgb],
.stt-page *[b-xys1meydgb]::before,
.stt-page *[b-xys1meydgb]::after {
    box-sizing: border-box;
}

.stt-page[b-xys1meydgb] {
    --stt-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --stt-inner-gap: clamp(0.45rem, 0.6vw, 0.7rem);
    --stt-radius: clamp(0.75rem, 0.85vw, 1rem);
    --stt-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --stt-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --stt-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --stt-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--stt-gap);
    animation: sttPageIn-b-xys1meydgb 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.stt-heading[b-xys1meydgb] {
    inline-size: 100%;
    min-inline-size: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--stt-gap);
}

    /* Bloque de título (fase 1): una línea y NO cede; los botones del CommandBar se repliegan primero.
       Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .stt-heading > div:first-child[b-xys1meydgb] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .stt-heading.command-bar-host-collapsed > div:first-child[b-xys1meydgb] {
        flex: 1 1 auto;
    }

.stt-title[b-xys1meydgb] {
    margin: 0;
    font-size: var(--stt-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.stt-subtitle[b-xys1meydgb] {
    margin-block-start: 0.25rem;
    font-size: var(--stt-font-text);
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.stt-heading.command-bar-host-collapsed .stt-title[b-xys1meydgb],
.stt-heading.command-bar-host-collapsed .stt-subtitle[b-xys1meydgb] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* FILTROS */

.stt-filters[b-xys1meydgb] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    gap: var(--stt-inner-gap);
    align-items: center;
}

.stt-filter[b-xys1meydgb] {
    min-inline-size: 0;
}

.stt-filter-search[b-xys1meydgb] {
    position: relative;
}

.stt-search-icon[b-xys1meydgb] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.stt-input[b-xys1meydgb],
.stt-page[b-xys1meydgb]  .stt-input {
    inline-size: 100%;
    min-block-size: var(--stt-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--stt-font-text);
    color: #1f2937;
    padding-block: 0;
    padding-inline: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stt-input-search[b-xys1meydgb] {
    padding-inline-start: 2.5rem !important;
}

select.stt-input[b-xys1meydgb] {
    cursor: pointer;
}

.stt-input[b-xys1meydgb]::placeholder,
.stt-page[b-xys1meydgb]  .stt-input::placeholder {
    color: #9ca3af;
}

.stt-input:focus[b-xys1meydgb],
.stt-page[b-xys1meydgb]  .stt-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* El campo con lupa vive dentro del filtro: hereda el alto y el input ocupa todo el ancho. El hueco
   derecho para la lupa lo pone el propio componente (derivado del ancho del botón): aquí no se toca. */

.stt-page[b-xys1meydgb]  .ccb-selector {
    position: relative;
    inline-size: 100%;
}

.stt-page[b-xys1meydgb]  .ccb-icon-btn {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border: none;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .stt-page[b-xys1meydgb]  .ccb-icon-btn:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

.stt-casilla[b-xys1meydgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--stt-font-text);
    color: #374151;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .stt-casilla input[type="checkbox"][b-xys1meydgb] {
        inline-size: 0.95rem;
        block-size: 0.95rem;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* TABLERO */

.stt-cargando[b-xys1meydgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: var(--stt-font-text);
    padding: 1rem;
}

.stt-spin[b-xys1meydgb] {
    animation: sttSpin-b-xys1meydgb 1s linear infinite;
}

.stt-board[b-xys1meydgb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--stt-gap);
    align-items: stretch;
    min-block-size: 0;
}

.stt-column[b-xys1meydgb] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 14rem;
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--stt-radius);
    background: #f8fafc;
    padding: var(--stt-inner-gap);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

    .stt-column.destino[b-xys1meydgb] {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.12);
    }

.stt-board.arrastrando .stt-column:not(.destino)[b-xys1meydgb] {
    border-style: dashed;
}

.stt-column-header[b-xys1meydgb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-block-end: var(--stt-inner-gap);
    flex-shrink: 0;
}

.stt-column-dot[b-xys1meydgb] {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 999rem;
    background: #94a3b8;
    flex-shrink: 0;
}

.stt-column-pendiente .stt-column-dot[b-xys1meydgb] { background: #f59e0b; }
.stt-column-enreparacion .stt-column-dot[b-xys1meydgb] { background: #2563eb; }
.stt-column-reparado .stt-column-dot[b-xys1meydgb] { background: #16a34a; }
.stt-column-entregado .stt-column-dot[b-xys1meydgb] { background: #64748b; }

.stt-column-title[b-xys1meydgb] {
    font-weight: 800;
    font-size: var(--stt-font-text);
    color: #111827;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.stt-badge[b-xys1meydgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    padding-inline: 0.4rem;
    border-radius: 999rem;
    background: #e2e8f0;
    color: #334155;
    font-size: var(--stt-font-small);
    font-weight: 800;
}

.stt-cards[b-xys1meydgb] {
    display: flex;
    flex-direction: column;
    gap: var(--stt-inner-gap);
    flex: 1 1 auto;
    min-block-size: 4rem;
    overflow-y: auto;
}

.stt-vacio[b-xys1meydgb] {
    font-size: var(--stt-font-small);
    color: #94a3b8;
    text-align: center;
    padding: 1rem 0.5rem;
}

/* TARJETA */

.stt-card[b-xys1meydgb] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: #ffffff;
    border: 0.0625rem solid #e5e7eb;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    padding: 0.6rem 0.7rem;
    cursor: grab;
    box-shadow: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .stt-card:hover[b-xys1meydgb] {
        border-color: #bfdbfe;
        box-shadow: 0 0.4rem 0.9rem rgba(15, 23, 42, 0.08);
        transform: translateY(-0.06rem);
    }

    .stt-card[draggable="false"][b-xys1meydgb] {
        cursor: pointer;
    }

    .stt-card.en-el-aire[b-xys1meydgb] {
        opacity: 0.45;
        border: 0.125rem dashed #2563eb;
    }

    .stt-card.facturado[b-xys1meydgb] {
        background: #fafafa;
    }

.stt-card-top[b-xys1meydgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.stt-card-numero[b-xys1meydgb] {
    font-weight: 850;
    font-size: var(--stt-font-text);
    color: #1f2937;
    letter-spacing: -0.01em;
}

.stt-card-marcas[b-xys1meydgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: #64748b;
}

    .stt-card-marcas .material-symbols-outlined[b-xys1meydgb] {
        font-size: 1rem;
    }

.stt-card-cliente[b-xys1meydgb] {
    font-size: var(--stt-font-text);
    font-weight: 650;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stt-card-averia[b-xys1meydgb] {
    font-size: var(--stt-font-small);
    color: #4b5563;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.stt-card-equipo[b-xys1meydgb] {
    font-size: var(--stt-font-small);
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stt-card-foot[b-xys1meydgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-block-start: 0.15rem;
    font-size: var(--stt-font-small);
    color: #64748b;
}

.stt-card-tecnico[b-xys1meydgb],
.stt-card-entrega[b-xys1meydgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-inline-size: 0;
    white-space: nowrap;
}

.stt-card-tecnico[b-xys1meydgb] {
    overflow: hidden;
    text-overflow: ellipsis;
}

    .stt-card-tecnico .material-symbols-outlined[b-xys1meydgb],
    .stt-card-entrega .material-symbols-outlined[b-xys1meydgb] {
        font-size: 0.95rem;
    }

.stt-card-entrega.hoy[b-xys1meydgb] {
    color: #b45309;
    font-weight: 750;
}

.stt-card-entrega.vencida[b-xys1meydgb] {
    color: #b91c1c;
    font-weight: 750;
}

/* ANIMACIONES Y RESPONSIVE */

@keyframes sttPageIn-b-xys1meydgb {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sttSpin-b-xys1meydgb {
    to { transform: rotate(360deg); }
}

@media (max-width: 80rem) {
    .stt-filters[b-xys1meydgb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stt-filter-search[b-xys1meydgb] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 64rem) {
    .stt-board[b-xys1meydgb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    .stt-board[b-xys1meydgb],
    .stt-filters[b-xys1meydgb] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stt-page[b-xys1meydgb],
    .stt-page *[b-xys1meydgb],
    .stt-page *[b-xys1meydgb]::before,
    .stt-page *[b-xys1meydgb]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Actualizacion/AvisoActualizacionVentana.razor.rz.scp.css */
/* El aviso de actualización: arriba en el centro, por encima de todo salvo el aviso de reconexión (10000), que es
   el que toma el relevo cuando el servicio se reinicia. Sin velo: no bloquea la pantalla de debajo. */
.av-aviso[b-eya7212f7t] {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    width: min(580px, calc(100vw - 32px));
    padding: 14px 16px 12px;
    border: 1px solid #f3d9a4;
    border-radius: 16px;
    background: #fffaf0;
    box-shadow: 0 18px 40px rgba(23, 43, 77, .20), 0 2px 6px rgba(23, 43, 77, .08);
    animation: av-entra-b-eya7212f7t .22s ease-out;
}

@keyframes av-entra-b-eya7212f7t {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translateX(-50%); }
}

.av-fila[b-eya7212f7t] { display: flex; align-items: center; gap: 12px; }

.av-instalando[b-eya7212f7t] { border-color: #c9dbf5; background: #f4f8fe; }

.av-icono[b-eya7212f7t] {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff0d1;
    color: #b36b00;
    font-size: 22px;
}
.av-instalando .av-icono[b-eya7212f7t] { background: #e3edfb; color: #2f6fd1; }

.av-textos[b-eya7212f7t] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-titulo[b-eya7212f7t] { color: #1d2b3a; font-size: .92rem; line-height: 1.35; }
.av-mensaje[b-eya7212f7t] { color: #5b6b7c; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }

.av-cuenta[b-eya7212f7t] {
    flex: none;
    min-width: 3.2em;
    color: #b36b00;
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.av-btn[b-eya7212f7t] {
    flex: none;
    padding: 7px 13px;
    border: 1px solid #e4c98f;
    border-radius: 10px;
    background: #fff;
    color: #8a5300;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.av-btn:hover[b-eya7212f7t] { background: #fff6e3; }

/* La barra de la cuenta atrás: se vacía hasta la hora (el ancho lo da el componente, cada segundo). */
.av-barra[b-eya7212f7t] {
    position: relative;
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: #f6e6c4;
    overflow: hidden;
}
.av-barra span[b-eya7212f7t] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0a92b, #e07b00);
    transition: width 1s linear;
}

/* Instalando: ya no hay cuenta; la barra se mueve sin fin mientras vuelve la aplicación. */
.av-instalando .av-barra[b-eya7212f7t] { background: #dbe7f8; }
.av-barra-indefinida span[b-eya7212f7t] {
    position: absolute;
    left: -35%;
    background: linear-gradient(90deg, #6ea1ec, #2f6fd1);
    transition: none;
    animation: av-indefinida-b-eya7212f7t 1.2s ease-in-out infinite;
}
@keyframes av-indefinida-b-eya7212f7t {
    from { left: -35%; }
    to { left: 100%; }
}

/* Reducida: la cuenta atrás sigue a la vista, en una píldora que se vuelve a abrir con un clic. */
.av-pildora[b-eya7212f7t] {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 9px;
    border: 1px solid #f3d9a4;
    border-radius: 999px;
    background: #fffaf0;
    color: #8a5300;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 18px rgba(23, 43, 77, .14);
    cursor: pointer;
    overflow: hidden;
}
.av-pildora .material-symbols-rounded[b-eya7212f7t] { font-size: 17px; }
.av-pildora-barra[b-eya7212f7t] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #f0a92b, #e07b00);
    transition: width 1s linear;
}

@media (max-width: 520px) {
    .av-fila[b-eya7212f7t] { flex-wrap: wrap; }
    .av-textos[b-eya7212f7t] { flex-basis: calc(100% - 50px); }
    .av-cuenta[b-eya7212f7t] { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .av-aviso[b-eya7212f7t] { animation: none; }
    .av-barra span[b-eya7212f7t], .av-pildora-barra[b-eya7212f7t] { transition: none; }
    .av-barra-indefinida span[b-eya7212f7t] { animation: none; left: 0; width: 100% !important; opacity: .5; }
}
/* _content/ErpPowergest/Presentation/Shared/Actualizacion/TrabajoSinGrabar.razor.rz.scp.css */
/* «Trabajo sin grabar» (plan AV): ventana propia, centrada, sobre un velo suave. Una tarjeta por copia. */
.tsg-velo[b-odyh0kvm4p] {
    position: fixed;
    inset: 0;
    z-index: 9970;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(3px);
    animation: tsg-aparece-b-odyh0kvm4p .18s ease-out;
}

.tsg[b-odyh0kvm4p] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9975;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 3px 10px rgba(15, 23, 42, .08);
    animation: tsg-entra-b-odyh0kvm4p .22s ease-out;
    overflow: hidden;
}

@keyframes tsg-aparece-b-odyh0kvm4p { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsg-entra-b-odyh0kvm4p {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.tsg-cabecera[b-odyh0kvm4p] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 20px 16px;
    background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7;
}

.tsg-cabecera-icono[b-odyh0kvm4p] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #e5edfc;
    color: #2f6fd1;
    font-size: 24px;
}

.tsg-cabecera-textos[b-odyh0kvm4p] { flex: 1; min-width: 0; }
.tsg-cabecera-textos h2[b-odyh0kvm4p] { margin: 2px 0 4px; color: #0f172a; font-size: 1.05rem; font-weight: 700; }
.tsg-cabecera-textos p[b-odyh0kvm4p] { margin: 0; color: #5b6b7c; font-size: .84rem; line-height: 1.5; }

.tsg-cerrar[b-odyh0kvm4p] {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #7a8896;
    cursor: pointer;
}
.tsg-cerrar:hover[b-odyh0kvm4p] { background: #f1f4f8; color: #1d2b3a; }
.tsg-cerrar .material-symbols-rounded[b-odyh0kvm4p] { font-size: 20px; }

/* Una lista larga no empuja el pie fuera de la ventana: se desplaza ella. */
.tsg-lista[b-odyh0kvm4p] {
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
}

.tsg-copia[b-odyh0kvm4p] {
    padding: 12px 14px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fbfcfe;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tsg-copia:hover[b-odyh0kvm4p] { border-color: #cdd9ec; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }

.tsg-fila[b-odyh0kvm4p] { display: flex; gap: 12px; align-items: center; }

.tsg-tipo[b-odyh0kvm4p] {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef3fb;
    color: #44608f;
    font-size: 20px;
}

.tsg-textos[b-odyh0kvm4p] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tsg-textos strong[b-odyh0kvm4p] { color: #1d2b3a; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }

.tsg-hora[b-odyh0kvm4p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    background: #f0f3f8;
    color: #64748b;
    font-size: .74rem;
}
.tsg-hora .material-symbols-rounded[b-odyh0kvm4p] { font-size: 14px; }

.tsg-acciones[b-odyh0kvm4p] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-left: 48px; }

.tsg-btn[b-odyh0kvm4p] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid #d5dde6;
    border-radius: 10px;
    background: #fff;
    color: #2c3e50;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.tsg-btn:hover[b-odyh0kvm4p] { background: #f4f7fa; }
.tsg-btn .material-symbols-rounded[b-odyh0kvm4p] { font-size: 17px; }

.tsg-btn-principal[b-odyh0kvm4p] { border-color: #2f6fd1; background: #2f6fd1; color: #fff; }
.tsg-btn-principal:hover[b-odyh0kvm4p] { background: #275fb5; border-color: #275fb5; }

.tsg-btn-activo[b-odyh0kvm4p] { border-color: #9db8e6; background: #eef3fb; color: #1e40af; }

.tsg-btn-peligro[b-odyh0kvm4p] { color: #a12b2b; }
.tsg-btn-peligro:hover[b-odyh0kvm4p] { background: #fdf0f0; border-color: #efc4c4; }

.tsg-vista[b-odyh0kvm4p] {
    margin: 12px 0 0 48px;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #fff;
    max-height: 220px;
    overflow: auto;
}

.tsg-lineas[b-odyh0kvm4p] { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tsg-lineas th[b-odyh0kvm4p] {
    position: sticky;
    top: 0;
    padding: 7px 10px;
    background: #f7f9fc;
    color: #64748b;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid #e6ebf2;
}
.tsg-lineas td[b-odyh0kvm4p] { padding: 6px 10px; color: #2c3e50; border-bottom: 1px solid #f1f4f8; }
.tsg-lineas tr:last-child td[b-odyh0kvm4p] { border-bottom: 0; }
.tsg-lineas th:nth-child(n+2)[b-odyh0kvm4p], .tsg-lineas td:nth-child(n+2)[b-odyh0kvm4p] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tsg-pie[b-odyh0kvm4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid #eef2f7;
}
.tsg-nota[b-odyh0kvm4p] { color: #94a3b8; font-size: .75rem; }

@media (max-width: 520px) {
    .tsg-acciones[b-odyh0kvm4p], .tsg-vista[b-odyh0kvm4p] { padding-left: 0; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tsg[b-odyh0kvm4p], .tsg-velo[b-odyh0kvm4p] { animation: none; }
}
/* _content/ErpPowergest/Presentation/Shared/Asistente/AmpliarIaDialogo.razor.rz.scp.css */
/* Ampliar la IA: el mismo aspecto que la ficha de una prestación no contratada (PrestacionNoContratada).
   Ficha de producto, no aviso: ni rojo, ni ámbar, ni icono de prohibido. */

.aid-fondo[b-5mu3sslkcu] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 24, 39, .35);
}

.aid-tarjeta[b-5mu3sslkcu] {
    max-width: 30rem;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    text-align: center;
}

.aid-ico[b-5mu3sslkcu] {
    font-size: 2.25rem;
    color: #6366f1;
}

.aid-antetitulo[b-5mu3sslkcu] {
    margin: .625rem 0 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b7280;
}

.aid-titulo[b-5mu3sslkcu] {
    margin: .25rem 0 .5rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111827;
}

.aid-resumen[b-5mu3sslkcu] {
    margin: 0 0 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: #374151;
}

.aid-puntos[b-5mu3sslkcu] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.aid-puntos li[b-5mu3sslkcu] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem 0;
    font-size: .875rem;
    line-height: 1.45;
    color: #374151;
}

.aid-puntos .material-symbols-rounded[b-5mu3sslkcu] {
    font-size: 1.0625rem;
    color: #059669;
    flex-shrink: 0;
    margin-top: .1rem;
}

.aid-acciones[b-5mu3sslkcu] {
    display: flex;
    gap: .625rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.aid-btn[b-5mu3sslkcu] {
    display: inline-block;
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.aid-btn-primary[b-5mu3sslkcu] {
    background: #4f46e5;
    color: #fff;
}

.aid-btn-primary:hover[b-5mu3sslkcu] {
    background: #4338ca;
    color: #fff;
}

.aid-btn-secundario[b-5mu3sslkcu] {
    background: #eef2ff;
    color: #3730a3;
}

.aid-btn-secundario:hover[b-5mu3sslkcu] {
    background: #e0e7ff;
}

/* La salida pesa como un enlace: está para quien solo miraba, y no debe parecer un rechazo. */
.aid-btn-suave[b-5mu3sslkcu] {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
}

.aid-btn-suave:hover[b-5mu3sslkcu] {
    color: #374151;
    background: #f3f4f6;
}
/* _content/ErpPowergest/Presentation/Shared/Asistente/AsistenteIaPanel.razor.rz.scp.css */
/* Panel del Asistente IA. Lo abre FloatingDock y se ancla a la esquina inferior derecha, como el chat:
   un panel de este tamaño no debe seguir a un botón arrastrable.

   Rediseño: antes medía 420 x 560 FIJOS y no había forma de agrandarlo, que era la queja de fondo (un
   análisis largo se leía en una columna estrecha). Ahora se estira del borde, la medida se recuerda y hay
   tres tallas de un clic. Y de paso se quitó lo que lo hacía parecer una plantilla: el degradado azul de
   la cabecera, la burbuja estrecha para respuestas largas y el desplegable del sistema para el nivel.

   El vocabulario de clases (ia-*) se conserva ENTERO a propósito: de él dependen los tests de render y
   los de extremo a extremo. Cambia el aspecto, no los nombres. */

.ia-panel[b-aw4rnp2vqj] {
    position: fixed;
    right: 18px;
    bottom: 86px; /* Deja libre la esquina donde el dock descansa por defecto. */
    z-index: 9995;
    font-family: inherit;
    /* Medida por defecto. El usuario puede estirarla (asistentePanel.js escribe width/height en línea y
       las recuerda) o saltar a una de las tallas de abajo. */
    width: min(460px, calc(100vw - 36px));
    /* El alto nunca invade la barra superior de la aplicación: se descuenta lo de abajo (86 px, donde
       descansa el dock) y lo de arriba (72 px de barra). En pantallas altas manda el 640 de siempre; en
       una ventana baja, lo que manda es dejar la aplicación utilizable. */
    height: min(640px, calc(100vh - 86px - 72px));
    min-width: 360px;
    /* El mínimo cede ante la ventana: un `min-height` fijo GANA al `height` de arriba, así que en una
       ventana baja el panel volvía a crecer hacia arriba y a comerse la barra por la puerta de atrás. */
    min-height: min(420px, calc(100vh - 86px - 72px));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Las dos tallas grandes. Ganan a la medida a mano mientras estén elegidas (el JS la retira al entrar y
   la devuelve al volver a la normal). */
/* El alto deja libre la barra superior de la aplicación.
 *
 * Era `calc(100vh - 104px)` con el `bottom: 86px` de siempre, así que el panel subía hasta 18 px del borde
 * y **tapaba la barra de búsqueda y la cabecera de la app**: justo el aspecto de «se ha quedado arriba y
 * cortado» que se venía reportando. La cuenta tiene que descontar lo de ABAJO (los 86 px donde descansa el
 * dock) y lo de ARRIBA (la barra, ~64 px), no solo un número redondo.
 *
 * Se escribe con las dos restas a la vista, y no con el total ya sumado, para que al tocar cualquiera de
 * los dos márgenes se vea qué se está cambiando. */
.ia-panel.ia-ancho[b-aw4rnp2vqj] {
    width: min(880px, calc(100vw - 36px));
    height: calc(100vh - 86px - 72px);
}

.ia-panel.ia-pantalla[b-aw4rnp2vqj] {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: min(1140px, calc(100vw - 56px));
    /* Va centrada, así que el hueco se reparte arriba y abajo: para dejar 72 px de barra libres hay que
       descontar el doble. */
    height: min(880px, calc(100vh - 144px));
}

/* ── Estirar ──────────────────────────────────────────────────────────────────────────────────────
   Solo por la izquierda y por arriba (y su esquina): el panel está anclado abajo a la derecha, así que
   por los otros dos lados no hay hacia dónde crecer. */

.ia-tirador[b-aw4rnp2vqj] {
    position: absolute;
    z-index: 6;
}

.ia-tirador-izq[b-aw4rnp2vqj] {
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 7px;
    cursor: ew-resize;
}

.ia-tirador-arr[b-aw4rnp2vqj] {
    top: 0;
    left: 14px;
    right: 14px;
    height: 7px;
    cursor: ns-resize;
}

.ia-tirador-esq[b-aw4rnp2vqj] {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
}

    /* Una marca discreta en la esquina: sin ella nadie descubre que el panel se estira. */
    .ia-tirador-esq[b-aw4rnp2vqj]::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 8px;
        height: 8px;
        border-left: 2px solid #cbd5e1;
        border-top: 2px solid #cbd5e1;
        border-radius: 3px 0 0 0;
        transition: border-color .15s;
    }

.ia-panel:hover .ia-tirador-esq[b-aw4rnp2vqj]::after {
    border-color: #94a3b8;
}

.ia-panel.ia-pantalla .ia-tirador[b-aw4rnp2vqj] {
    display: none;
}

/* La medida, mientras se estira. Aparece solo entonces: el resto del tiempo estorba. */
.ia-medida[b-aw4rnp2vqj] {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 7;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .86);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.ia-panel.ia-midiendo .ia-medida[b-aw4rnp2vqj] {
    opacity: 1;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────────────
   Blanca. El degradado azul que había era lo que más «plantilla gratuita» hacía parecer al panel; el
   color se queda en el logotipo, que es donde identifica sin gritar. */

.ia-panel-header[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    /* Se agarra por aquí para mover el panel, como cualquier ventana. El cursor es lo único que lo anuncia:
       sin él nadie prueba a arrastrar una cabecera. */
    cursor: grab;
    /* Arrastrar una cabecera con texto selecciona el texto en vez de mover, y queda azul al soltar. */
    user-select: none;
}

    /* Sobre los botones manda el puntero normal: ahí se pulsa, no se arrastra. */
    .ia-panel-header button[b-aw4rnp2vqj],
    .ia-panel-header label[b-aw4rnp2vqj] {
        cursor: pointer;
    }

.ia-panel.ia-moviendo .ia-panel-header[b-aw4rnp2vqj] {
    cursor: grabbing;
}

/* Mientras se mueve, nada de dentro reacciona al ratón: el puntero pasa por encima de burbujas y botones y
   sin esto se encienden los `:hover` y se pueden empezar selecciones dentro del hilo. */
.ia-panel.ia-moviendo .ia-body[b-aw4rnp2vqj],
.ia-panel.ia-moviendo .ia-compositor[b-aw4rnp2vqj] {
    pointer-events: none;
}

/* A pantalla completa el panel lo centra el CSS: no hay sitio que mover, y dejar el cursor de agarre
   prometería algo que no pasa. */
.ia-panel.ia-pantalla .ia-panel-header[b-aw4rnp2vqj] {
    cursor: default;
}

.ia-marca[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ia-logo[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(140deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 17px;
}

.ia-marca-txt[b-aw4rnp2vqj] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.ia-title[b-aw4rnp2vqj] {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.2px;
    color: #0f172a;
}

.ia-estado[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #64748b;
}

.ia-dot[b-aw4rnp2vqj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex: 0 0 auto;
}

.ia-header-botones[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ia-nueva[b-aw4rnp2vqj],
.ia-talla[b-aw4rnp2vqj],
.ia-ayuda[b-aw4rnp2vqj],
.ia-close[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

    .ia-nueva:hover:not(:disabled)[b-aw4rnp2vqj],
    .ia-talla:hover[b-aw4rnp2vqj],
    .ia-ayuda:hover[b-aw4rnp2vqj],
    .ia-close:hover[b-aw4rnp2vqj] {
        background: #f1f5f9;
        color: #0f172a;
    }

.ia-nueva:disabled[b-aw4rnp2vqj] {
    opacity: .4;
    cursor: default;
}

/* FI6: el botón lleva texto además del icono — solo con el icono, el usuario no lo encontraba. */
.ia-nueva[b-aw4rnp2vqj] {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.ia-nueva-txt[b-aw4rnp2vqj] {
    font-size: 12px;
    font-weight: 600;
}

.ia-nueva-ico[b-aw4rnp2vqj],
.ia-talla-ico[b-aw4rnp2vqj],
.ia-ayuda-ico[b-aw4rnp2vqj],
.ia-copiar-ico[b-aw4rnp2vqj] {
    font-size: 18px;
}

/* FI8: copiar la conversación. Mismo molde que los otros botones de la cabecera; el ✔ del acuse va en
   verde para que se distinga del icono de reposo sin cambiar de sitio ni de tamaño. */
.ia-copiar[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #64748b;
    cursor: pointer;
}

    .ia-copiar:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .ia-copiar:disabled[b-aw4rnp2vqj] {
        opacity: .4;
        cursor: default;
    }

    /* El acuse: mientras dura el ✔, en verde. Es lo único que dice que la copia salió bien —el
       portapapeles no se ve—, así que tiene que notarse sin mover nada de sitio. */
    .ia-copiar.ia-copiado[b-aw4rnp2vqj],
    .ia-copiar.ia-copiado:hover[b-aw4rnp2vqj] {
        color: #16a34a;
    }

/* ── Cuerpo ───────────────────────────────────────────────────────────────────────────────────── */

.ia-body[b-aw4rnp2vqj] {
    flex: 1;
    /* Sin esto el cuerpo no puede encogerse por debajo de su contenido (min-height de un elemento
       flexible vale «auto»), y entonces no hay nada que desplazar. */
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
}

/*
 * Los mensajes y las tarjetas NO se encogen.
 *
 * El cuerpo es un contenedor flexible en columna, así que sus hijos se aplastan por defecto para
 * caber. El resultado medido: con una tarjeta de 900 px dentro, el contenido seguía midiendo lo mismo
 * que la ventana (457 px) y no había NADA que desplazar. Una orden propuesta larga quedaba fuera de
 * alcance salvo agrandando el panel a mano.
 *
 * Con esto, ese mismo caso pasa a 1.295 px de contenido y la barra baja hasta el final. Es el mismo
 * fallo que tuvo el tablero del CRM con sus columnas.
 */
.ia-body > *[b-aw4rnp2vqj] {
    flex-shrink: 0;
}

    .ia-body[b-aw4rnp2vqj]::-webkit-scrollbar {
        width: 10px;
    }

    .ia-body[b-aw4rnp2vqj]::-webkit-scrollbar-thumb {
        background: #dbe2ea;
        border: 3px solid #fff;
        border-radius: 999px;
    }

/* FI7: «Ha respondido» — el asistente contestó mientras el usuario leía más arriba.
 *
 * Va FLOTANDO sobre el borde de abajo del hilo, no en el flujo: si empujara el compositor, la barra de
 * escritura daría un salto justo cuando el usuario está leyendo, que es lo contrario de lo que se busca.
 * Se ancla al panel, que ya es contenedor de referencia por su `position: fixed`. El `z-index` lo pone
 * por encima de las burbujas, nunca del compositor. */
.ia-hay-respuesta[b-aw4rnp2vqj] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Justo encima del compositor, que es lo que hay debajo del hilo. */
    bottom: 96px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

    .ia-hay-respuesta:hover[b-aw4rnp2vqj] {
        background: #e0e7ff;
    }

.ia-hay-respuesta-ico[b-aw4rnp2vqj] {
    font-size: 16px;
}

/* Pantalla vacía: antes una frase gris. Decir de qué SE PUEDE hablar no es lo mismo que dar algo que
   pulsar, y quien abre un asistente en blanco casi nunca sabe por dónde empezar. */
.ia-vacio[b-aw4rnp2vqj] {
    margin: auto 0;
    padding: 8px;
    text-align: center;
}

.ia-vacio-logo[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: linear-gradient(140deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 24px;
}

.ia-vacio-tit[b-aw4rnp2vqj] {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.ia-vacio-sub[b-aw4rnp2vqj] {
    margin: 4px 0 16px;
    font-size: 13px;
    color: #64748b;
}

.ia-sugerencias[b-aw4rnp2vqj] {
    display: grid;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
    text-align: left;
}

.ia-sugerencia[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}

    .ia-sugerencia:hover:not(:disabled)[b-aw4rnp2vqj] {
        border-color: #c7d7fb;
        background: #eff4ff;
        transform: translateX(2px);
    }

    .ia-sugerencia:disabled[b-aw4rnp2vqj] {
        opacity: .5;
        cursor: default;
    }

.ia-sugerencia-ico[b-aw4rnp2vqj] {
    font-size: 18px;
    color: #2563eb;
    flex: 0 0 auto;
}

/* ── Mensajes ─────────────────────────────────────────────────────────────────────────────────────
   El usuario va en burbuja; el asistente NO. Un análisis de ocho líneas metido en una burbuja al 82 %
   del ancho se lee mal, y era la mitad de lo que hacía parecer el panel un chat de soporte en vez de
   una herramienta de trabajo. */

.ia-msg[b-aw4rnp2vqj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ia-msg-user[b-aw4rnp2vqj] {
    align-items: flex-end;
}

.ia-msg-bot[b-aw4rnp2vqj] {
    align-items: stretch;
}

/* La firma de la respuesta: avatar + nombre + el nivel con el que contestó. Sin esto, una respuesta
   larga y sin burbuja se confunde con un texto de la propia pantalla. */
.ia-msg-cab[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: #64748b;
}

.ia-msg-avatar[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(140deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 13px;
    flex: 0 0 auto;
}

.ia-msg-nombre[b-aw4rnp2vqj] {
    font-weight: 700;
    color: #475569;
}

.ia-burbuja[b-aw4rnp2vqj] {
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.ia-msg-user .ia-burbuja[b-aw4rnp2vqj] {
    max-width: 82%;
    padding: 10px 14px;
    background: #2563eb;
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}

.ia-msg-bot .ia-burbuja[b-aw4rnp2vqj] {
    padding: 0 2px;
    color: #1e293b;
    line-height: 1.62;
}

/* ── Tarjetas de orden y de oferta ───────────────────────────────────────────────────────────────
   Texto plano siempre (nada de MarkupString, A10 del diseño O0). */

.ia-tarjeta[b-aw4rnp2vqj] {
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    font-size: 13.5px;
    color: #1e293b;
}

.ia-tarjeta[data-estado="Caducada"][b-aw4rnp2vqj],
.ia-tarjeta[data-estado="Reemplazada"][b-aw4rnp2vqj],
.ia-tarjeta[data-estado="Cancelada"][b-aw4rnp2vqj] {
    opacity: .65;
}

.ia-tarjeta-titulo[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    background: #eff4ff;
    border-bottom: 1px solid #dbe6fd;
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #2563eb;
}

.ia-tarjeta-resumen[b-aw4rnp2vqj] {
    padding: 12px 13px 0;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ia-tarjeta-resultado .ia-tarjeta-titulo[b-aw4rnp2vqj] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.ia-tarjeta-resultado[data-exito="False"] .ia-tarjeta-titulo[b-aw4rnp2vqj] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.ia-oferta .ia-tarjeta-titulo[b-aw4rnp2vqj] {
    background: #f5f3ff;
    border-color: #e9e2fd;
    color: #7c3aed;
}

.ia-tarjeta-detalle[b-aw4rnp2vqj] {
    margin: 8px 13px 0;
    border: 1px solid #eef2f7;
    border-radius: 9px;
    overflow: hidden;
    font-size: 12.5px;
}

    .ia-tarjeta-detalle summary[b-aw4rnp2vqj] {
        padding: 7px 11px;
        background: #f8fafc;
        color: #64748b;
        cursor: pointer;
    }

    .ia-tarjeta-detalle table[b-aw4rnp2vqj] {
        width: 100%;
        border-collapse: collapse;
    }

    .ia-tarjeta-detalle td[b-aw4rnp2vqj] {
        padding: 5px 11px;
        border-top: 1px solid #eef2f7;
        vertical-align: top;
        word-break: break-word;
    }

.ia-arg-nombre[b-aw4rnp2vqj] {
    width: 1%;
    color: #64748b;
    white-space: nowrap;
}

.ia-tarjeta-caducidad[b-aw4rnp2vqj] {
    padding: 8px 13px 0;
    font-size: 11.5px;
    color: #b45309;
}

.ia-tarjeta-botones[b-aw4rnp2vqj] {
    display: flex;
    gap: 8px;
    padding: 10px 13px 12px;
}

.ia-btn-confirmar[b-aw4rnp2vqj],
.ia-btn-cancelar[b-aw4rnp2vqj] {
    border: none;
    border-radius: 9px;
    padding: 8px 15px;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ia-btn-confirmar[b-aw4rnp2vqj] {
    background: #16a34a;
    color: #fff;
}

    .ia-btn-confirmar:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #15803d;
    }

.ia-btn-cancelar[b-aw4rnp2vqj] {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

    .ia-btn-cancelar:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #fef2f2;
    }

    .ia-btn-confirmar:disabled[b-aw4rnp2vqj],
    .ia-btn-cancelar:disabled[b-aw4rnp2vqj] {
        opacity: .5;
        cursor: default;
    }

.ia-tarjeta-estado[b-aw4rnp2vqj] {
    padding: 10px 13px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* LT5: varias órdenes en una tarjeta. La lista numerada dice el orden en que se ejecutarán; cada resumen
   se despliega a su detalle, igual que en la tarjeta de una sola orden. */
.ia-tarjeta-lote[b-aw4rnp2vqj] {
    margin: 8px 13px 0;
    padding: 0 0 0 20px;
    font-size: 13px;
    color: #1e293b;
}

    .ia-tarjeta-lote li[b-aw4rnp2vqj] {
        margin: 0 0 5px;
    }

    .ia-tarjeta-lote li[data-exito="False"][b-aw4rnp2vqj] {
        color: #b91c1c;
    }

    .ia-tarjeta-lote .ia-tarjeta-detalle[b-aw4rnp2vqj] {
        margin: 0;
    }

    .ia-tarjeta-lote .ia-tarjeta-detalle summary[b-aw4rnp2vqj] {
        color: #1e293b;
    }

ul.ia-tarjeta-lote[b-aw4rnp2vqj] {
    list-style: none;
    padding: 0 0 10px;
}

/* LT6: «no preguntes más en esta conversación». Un enlace, no un tercer botón: la decisión de hoy sigue
   siendo Adelante / Ahora no. */
.ia-btn-enlace[b-aw4rnp2vqj] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: #4f46e5;
    text-decoration: underline;
    cursor: pointer;
}

    .ia-btn-enlace:disabled[b-aw4rnp2vqj] {
        opacity: .5;
        cursor: default;
    }

.ia-oferta-sesion[b-aw4rnp2vqj] {
    display: block;
    margin: 0 13px 12px;
    text-align: left;
}

.ia-aviso-sesion[b-aw4rnp2vqj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: #eef2ff;
    border-bottom: 1px solid #e0e7ff;
    font-size: 12px;
    color: #3730a3;
}

/* MM9: el coste de la oferta, con su desglose (percepción de adjuntos + análisis). Va grande porque es
   lo que hay que mirar antes de decir que sí. */
.ia-oferta-creditos[b-aw4rnp2vqj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 13px 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.ia-oferta-desglose[b-aw4rnp2vqj] {
    font-size: .78rem;
    font-weight: 400;
    color: #64748b;
}

.ia-oferta-motivo[b-aw4rnp2vqj] {
    padding: 6px 13px 0;
    font-size: 12.5px;
    color: #64748b;
}

/* AC5: el plan corto del triaje, debajo del motivo. */
.ia-oferta-plan[b-aw4rnp2vqj] {
    padding: 4px 13px 0;
    font-size: 12.5px;
    color: #334155;
    font-style: italic;
}

/* AC7 (P-B): la tarjeta ÚNICA de aprobación del plan de una tarea. Los pasos que escriben van en negrita y
   los sensibles (borrar, cobrar, enviar, emitir) con su marca: es lo que el usuario aprueba de una vez. */
.ia-plan .ia-tarjeta-titulo[b-aw4rnp2vqj] {
    color: #6d28d9;
}

.ia-plan-pasos[b-aw4rnp2vqj] {
    margin: 6px 0 0;
    padding: 0 13px 0 30px;
    font-size: 12.5px;
    color: #334155;
}

    .ia-plan-pasos li[b-aw4rnp2vqj] {
        padding: 2px 0;
    }

    .ia-plan-pasos li.ia-plan-escribe[b-aw4rnp2vqj] {
        font-weight: 600;
        color: #0f172a;
    }

    .ia-plan-pasos li.ia-plan-sensible[b-aw4rnp2vqj] {
        color: #b45309;
    }

.ia-plan-categoria[b-aw4rnp2vqj] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 10.5px;
    font-weight: 500;
    color: #475569;
}

.ia-plan-sensible .ia-plan-categoria[b-aw4rnp2vqj] {
    background: #fef3c7;
    color: #92400e;
}

.ia-plan-pie[b-aw4rnp2vqj] {
    padding: 8px 13px 0;
    font-size: 12px;
    color: #64748b;
}

.ia-plan[data-estado="Reemplazada"][b-aw4rnp2vqj] {
    opacity: .6;
}

/* AC9: la tarjeta de la TAREA (AC6), bajo la barra: qué se pidió, el plan con sus estados, el presupuesto y
   lo que se puede hacer. Verde en curso, ámbar parada, gris completada. */
.ia-tarea[b-aw4rnp2vqj] {
    margin: 8px 12px 0;
    padding: 10px 12px;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    background: #f0fdf4;
    font-size: 12.5px;
    color: #0f172a;
}

.ia-tarea[data-estado="Parada"][b-aw4rnp2vqj] {
    border-color: #fde68a;
    background: #fffbeb;
}

.ia-tarea[data-estado="Completada"][b-aw4rnp2vqj] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

/* FUN-J49: la cabecera es el mando de plegado, así que es un BOTÓN de verdad y no un div con un clic
   encima: así se llega a ella tabulando, se activa con Intro y con la barra, y el lector de pantalla
   dice que está plegada o desplegada (aria-expanded). Lo que sigue solo le quita al botón su aspecto
   de botón; la fila se reparte igual que antes. */
.ia-tarea-cabecera[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .ia-tarea-cabecera:focus-visible[b-aw4rnp2vqj] {
        outline: 2px solid #86efac;
        outline-offset: 2px;
        border-radius: 8px;
    }

.ia-tarea-flecha[b-aw4rnp2vqj] {
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
    transition: transform .15s;
}

.ia-tarea-plegada .ia-tarea-flecha[b-aw4rnp2vqj] {
    transform: rotate(-90deg);
}

/* El cuerpo: lo que se pliega y, desplegado, lo que NO puede crecer sin tope. 132px son unas cuatro
   líneas de plan; a partir de ahí se desplaza dentro de la tarjeta en vez de empujar la conversación
   fuera del panel, que es lo que hacía antes. `overscroll-behavior` evita que al llegar al final el
   desplazamiento siga en el hilo de mensajes de debajo. */
.ia-tarea-cuerpo[b-aw4rnp2vqj] {
    max-height: 132px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.ia-tarea-plegada .ia-tarea-cuerpo[b-aw4rnp2vqj] {
    display: none;
}

/* La línea que sustituye al plan mientras está plegada: solo se ve entonces. */
.ia-tarea-resumen[b-aw4rnp2vqj] {
    display: none;
    margin-top: 4px;
    color: #475569;
}

.ia-tarea-plegada .ia-tarea-resumen[b-aw4rnp2vqj] {
    display: block;
}

.ia-tarea-titulo[b-aw4rnp2vqj] {
    font-weight: 600;
}

.ia-tarea-presupuesto[b-aw4rnp2vqj] {
    margin-left: auto;
    font-size: 11.5px;
    color: #475569;
    white-space: nowrap;
}

.ia-tarea-peticion[b-aw4rnp2vqj] {
    margin-top: 4px;
    color: #334155;
}

.ia-tarea-barra[b-aw4rnp2vqj] {
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.ia-tarea-barra-relleno[b-aw4rnp2vqj] {
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
    transition: width .2s;
}

.ia-tarea-barra-agotada[b-aw4rnp2vqj] {
    background: #dc2626;
}

.ia-tarea-pasos[b-aw4rnp2vqj] {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.ia-tarea-paso[b-aw4rnp2vqj] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    color: #475569;
}

    .ia-tarea-paso[data-paso="Hecho"][b-aw4rnp2vqj] {
        color: #64748b;
        text-decoration: line-through;
    }

    .ia-tarea-paso[data-paso="Fallido"][b-aw4rnp2vqj] {
        color: #b91c1c;
    }

.ia-tarea-paso-ico[b-aw4rnp2vqj] {
    font-size: 15px;
    line-height: 1;
    position: relative;
    top: 2px;
}

.ia-tarea-paso-nota[b-aw4rnp2vqj] {
    color: #94a3b8;
    font-size: 11.5px;
}

.ia-tarea-motivo[b-aw4rnp2vqj] {
    margin-top: 6px;
    color: #92400e;
    font-size: 12px;
}

.ia-tarea-botones[b-aw4rnp2vqj] {
    padding: 8px 0 0;
}

/* MO7: con qué nivel se respondió el turno. Va SIEMPRE, no solo cuando cuesta: la pregunta que tiene que
   contestar de un vistazo es «¿esto me está costando algo?», y para eso hace falta ver también el «no».
   Nunca lleva el nombre del modelo: el usuario elige nivel, no modelo. */
.ia-nivel[b-aw4rnp2vqj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 1px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #64748b;
    cursor: default;
    user-select: none;
}

.ia-nivel-punto[b-aw4rnp2vqj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    flex: 0 0 auto;
}

/* El color separa lo que no cuesta de lo que sí. El básico es gris y discreto a propósito: es el caso
   normal y no tiene por qué llamar la atención. */
.ia-nivel[data-cuesta="si"][b-aw4rnp2vqj] {
    color: #92400e;
    border-color: #fde68a;
    background: #fffbeb;
}

/* El punto, por esfuerzo pedido: verde el que no cuesta y va sobrado, azul el intermedio, morado el
   caro. Los tres primeros son los que el usuario elige; los otros los sirve el servidor (premium). */
.ia-nivel[data-nivel="Rapido"] .ia-nivel-punto[b-aw4rnp2vqj] {
    background: #22c55e;
}

.ia-nivel[data-nivel="Normal"] .ia-nivel-punto[b-aw4rnp2vqj] {
    background: #3b82f6;
}

.ia-nivel[data-nivel="Profundo"] .ia-nivel-punto[b-aw4rnp2vqj] {
    background: #7c3aed;
}

.ia-nivel[data-nivel="Avanzado"] .ia-nivel-punto[b-aw4rnp2vqj] {
    background: #d97706;
}

.ia-nivel[data-nivel="Maximo"] .ia-nivel-punto[b-aw4rnp2vqj] {
    background: #dc2626;
}

/* U7: feedback 👍/👎 en respuestas del asistente persistidas. Aparece al pasar por encima: es útil, pero
   no tanto como para ocupar sitio bajo cada respuesta todo el rato. */
/* AY3: «Abrir en la ayuda» bajo una respuesta que cita guías del manual. Siempre visible, no al pasar por encima:
   es lo siguiente que el usuario puede querer hacer. */
.ia-guias[b-aw4rnp2vqj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ia-guia[b-aw4rnp2vqj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid #b9d5df;
    border-radius: 999px;
    background: #f4fafc;
    color: #0a4d5e;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .ia-guia:hover[b-aw4rnp2vqj] {
        background: #e3f0f4;
    }

.ia-guia-ico[b-aw4rnp2vqj] {
    font-size: 16px;
}

.ia-feedback[b-aw4rnp2vqj] {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s;
}

.ia-msg:hover .ia-feedback[b-aw4rnp2vqj],
.ia-feedback:focus-within[b-aw4rnp2vqj] {
    opacity: 1;
}

.ia-feedback-btn[b-aw4rnp2vqj] {
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    font-size: 12px;
    line-height: 1;
    padding: 4px 7px;
    color: #94a3b8;
    cursor: pointer;
}

    .ia-feedback-btn:hover[b-aw4rnp2vqj] {
        background: #f1f5f9;
        color: #0f172a;
    }

.ia-feedback-activo[b-aw4rnp2vqj] {
    background: #eff4ff;
    border-color: #c7d7fb;
    color: #2563eb;
}

/* Chips de adjunto dentro de la burbuja del usuario: «qué se mandó». */
.ia-burbuja-texto[b-aw4rnp2vqj] {
    display: block;
}

.ia-burbuja-adjuntos[b-aw4rnp2vqj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ia-burbuja-adjunto[b-aw4rnp2vqj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 2px 7px;
    background: rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ia-burbuja-adjunto-ico[b-aw4rnp2vqj] {
    font-size: 13px;
}

/* ── Compositor ──────────────────────────────────────────────────────────────────────────────────
   Antes eran cuatro controles apretados en una fila con un campo de una línea. Ahora el redactor manda y
   los controles van debajo, en su barra. */

.ia-compositor[b-aw4rnp2vqj] {
    position: relative;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    padding: 10px 12px 11px;
}

/* Aviso de cortesía (nº/tamaño/MIME, voz): texto pequeño rojo, no bloquea el resto del compositor. */
.ia-adjunto-aviso[b-aw4rnp2vqj] {
    padding: 0 2px 7px;
    font-size: 11.5px;
    color: #b91c1c;
}

/* Vía manual de calidad, mientras haya oferta viva. */
.ia-afin[b-aw4rnp2vqj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 8px;
}

/* SH2c (FUN-660): «Ver como listado». Mismo tamaño y forma que «Análisis profesional», otro color: son dos
   ejes distintos —profundizar o llevarse los datos— y no deben leerse como dos veces lo mismo. Es un enlace
   (abre el emisor del listado), así que pierde el subrayado de los <a>. */
.ia-afin-listado[b-aw4rnp2vqj] {
    border-color: #d5e6f7;
    background: #f1f7fd;
    color: #1d5fa8;
    text-decoration: none;
}

    .ia-afin-listado:hover[b-aw4rnp2vqj] {
        background: #e2eefa;
    }

/* Con varios listados afines, el botón despliega la lista HACIA ARRIBA: la banda vive pegada al redactor, en
   el borde inferior del panel, y hacia abajo no hay sitio. */
.ia-afin-menu[b-aw4rnp2vqj] {
    position: relative;
}

.ia-afin-opciones[b-aw4rnp2vqj] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-width: 340px;
    padding: 4px;
    border: 1px solid #d5e6f7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
}

.ia-afin-opcion[b-aw4rnp2vqj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #1e293b;
    font-size: 12.5px;
    text-decoration: none;
}

    .ia-afin-opcion:hover[b-aw4rnp2vqj] {
        background: #f1f7fd;
    }

.ia-afin-opcion-titulo[b-aw4rnp2vqj] {
    font-weight: 700;
}

.ia-afin-opcion-filtros[b-aw4rnp2vqj] {
    color: #64748b;
    font-size: 11.5px;
}

.ia-afin-btn[b-aw4rnp2vqj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e9e2fd;
    border-radius: 999px;
    background: #f5f3ff;
    color: #7c3aed;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .ia-afin-btn:hover[b-aw4rnp2vqj] {
        background: #ede9fe;
    }

    .ia-afin-btn .material-symbols-rounded[b-aw4rnp2vqj] {
        font-size: 16px;
    }

/* La banda de adjuntos NO ocupa sitio cuando no hay nada: adjuntar se pide desde el clip de la barra
   (que es la etiqueta de este mismo input). Se despliega con adjuntos, y al arrastrar un fichero se
   convierte en la zona de soltar, encima de todo el compositor. */
.ia-dropzone[b-aw4rnp2vqj] {
    position: relative;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 0 8px;
}

.ia-compositor:has(.ia-adjunto-chip) .ia-dropzone[b-aw4rnp2vqj] {
    display: flex;
}

.ia-dropzone-input[b-aw4rnp2vqj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 0;
}

    .ia-dropzone-input:disabled[b-aw4rnp2vqj] {
        cursor: default;
    }

/* El texto de «suelta aquí» solo se ve mientras se arrastra algo. */
.ia-dropzone-hint[b-aw4rnp2vqj] {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    pointer-events: none; /* el clic pasa al InputFile de debajo */
}

.ia-dropzone-ico[b-aw4rnp2vqj] {
    font-size: 18px;
}

.ia-panel.ia-soltando .ia-dropzone[b-aw4rnp2vqj] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 8px;
    border: 2px dashed #93b4fa;
    border-radius: 13px;
    background: rgba(239, 244, 255, .96);
}

.ia-panel.ia-soltando .ia-dropzone-hint[b-aw4rnp2vqj] {
    display: flex;
}

.ia-panel.ia-soltando .ia-adjunto-chip[b-aw4rnp2vqj] {
    display: none;
}

/* Chip de adjunto pendiente: miniatura/icono + nombre + tamaño + ✕. Por encima del InputFile (z-index)
   para que el ✕ siga siendo clicable. */
.ia-adjunto-chip[b-aw4rnp2vqj] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 6px 3px 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 12px;
    color: #1e293b;
}

.ia-adjunto-mini[b-aw4rnp2vqj] {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.ia-adjunto-ico[b-aw4rnp2vqj] {
    font-size: 20px;
    color: #2563eb;
}

.ia-adjunto-nombre[b-aw4rnp2vqj] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ia-adjunto-tam[b-aw4rnp2vqj] {
    color: #94a3b8;
    font-size: 11px;
    flex: 0 0 auto;
}

.ia-adjunto-quitar[b-aw4rnp2vqj] {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px;
    flex: 0 0 auto;
}

    .ia-adjunto-quitar:hover[b-aw4rnp2vqj] {
        color: #b91c1c;
    }

/* El redactor y su barra, dentro de un mismo recuadro: se leen como una sola cosa. */
.ia-footer[b-aw4rnp2vqj] {
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .ia-footer:focus-within[b-aw4rnp2vqj] {
        border-color: #bfd3fb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

.ia-input[b-aw4rnp2vqj] {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
    padding: 11px 13px 4px;
    max-height: 180px;
    overflow-y: auto;
}

    .ia-input[b-aw4rnp2vqj]::placeholder {
        color: #94a3b8;
    }

    .ia-input:disabled[b-aw4rnp2vqj] {
        color: #94a3b8;
    }

/* La barra del redactor: clip, micrófono, NIVEL, MODELO y enviar.
 *
 * Iban los cinco con el mismo `gap` de 4 px, y eso es lo que los hacía confundirse: el ojo agrupa por
 * cercanía, así que a distancia igual los dos segmentados se leían como una sola tira de cinco pastillas y
 * había que pararse a distinguir qué elegía qué. Son DOS preguntas distintas («cuánto esfuerzo» y «quién
 * conduce»), y tienen que verse como dos.
 *
 * La separación crece con el ancho que sobra (`clamp` sobre `cqw`, el ancho del compositor): en el panel
 * estrecho manda el mínimo y no se desborda nada; ampliándolo, los grupos se despegan de verdad en vez de
 * quedarse con la holgura de 460 px. Es el mismo recurso que en las columnas de rangos del emisor. */
.ia-barra[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Unidad de referencia de los `cqw` de abajo. */
    container-type: inline-size;
    /* El panel acoplado mide unos 440 px y los dos segmentados no siempre caben: antes el de Modelo se
       salía por la derecha y Premium quedaba cortado. Si no cabe, baja a otra línea con el botón de enviar. */
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 4px 7px 7px;
}

/* Entre grupos: el mínimo que ya separa, y hasta 22 px cuando el panel da de sí. */
.ia-barra > .ia-niveles[b-aw4rnp2vqj],
.ia-barra > .ia-modelos[b-aw4rnp2vqj] {
    margin-left: clamp(10px, 2.2cqw, 22px);
}

.ia-barra-hueco[b-aw4rnp2vqj] {
    flex: 1;
}

.ia-barra-btn[b-aw4rnp2vqj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    background: none;
    padding: 6px 8px;
    color: #64748b;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

    .ia-barra-btn:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .ia-barra-btn:disabled[b-aw4rnp2vqj],
    .ia-barra-btn-off[b-aw4rnp2vqj] {
        opacity: .45;
        cursor: default;
        pointer-events: none;
    }

    .ia-barra-btn .material-symbols-rounded[b-aw4rnp2vqj] {
        font-size: 19px;
    }

/* MM8: micrófono. Grabando va en rojo y con pulso, para que se lea de un vistazo que está abierto. */
.ia-mic-ico[b-aw4rnp2vqj] {
    font-size: 19px;
    line-height: 1;
}

.ia-mic-contador[b-aw4rnp2vqj] {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ia-mic-grabando[b-aw4rnp2vqj],
.ia-mic-grabando:hover:not(:disabled)[b-aw4rnp2vqj] {
    background: #fef2f2;
    color: #dc2626;
    animation: ia-mic-pulso-b-aw4rnp2vqj 1.2s ease-in-out infinite;
}

@keyframes ia-mic-pulso-b-aw4rnp2vqj {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .40);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
    }
}

/* MP5: el nivel, en segmentado. Eran tres opciones fijas metidas en un desplegable del sistema: había
   que abrirlo para saber en cuál estabas, y así casi nadie lo movía de donde arrancaba. */
.ia-niveles[b-aw4rnp2vqj] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: #f1f5f9;
}

.ia-nivel-btn[b-aw4rnp2vqj] {
    border: none;
    border-radius: 7px;
    background: none;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

    .ia-nivel-btn:hover:not(:disabled):not(.ia-nivel-on)[b-aw4rnp2vqj] {
        color: #0f172a;
    }

    .ia-nivel-btn:disabled[b-aw4rnp2vqj] {
        opacity: .45;
        cursor: default;
    }

.ia-nivel-on[b-aw4rnp2vqj] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* AC3: el control MODELO, con la misma forma que el de nivel — son dos preguntas seguidas («cuánto esfuerzo»
   y «quién conduce») y darles dos aspectos distintos las convertiría en dos cosas que aprender. */
.ia-modelos[b-aw4rnp2vqj] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: #f1f5f9;
}

.ia-modelo-btn[b-aw4rnp2vqj] {
    border: none;
    border-radius: 7px;
    background: none;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

    .ia-modelo-btn:hover:not(:disabled):not(.ia-modelo-on)[b-aw4rnp2vqj] {
        color: #0f172a;
    }

    .ia-modelo-btn:disabled[b-aw4rnp2vqj] {
        opacity: .45;
        cursor: default;
    }

.ia-modelo-on[b-aw4rnp2vqj] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* Panel estrecho: segmentados más prietos, para que quepa en una línea siempre que se pueda. Va detrás de
   las reglas base porque pesa lo mismo que ellas y solo gana por orden. */
@container (max-width: 480px) {
    .ia-barra > .ia-niveles[b-aw4rnp2vqj],
    .ia-barra > .ia-modelos[b-aw4rnp2vqj] {
        margin-left: 6px;
    }

    .ia-nivel-btn[b-aw4rnp2vqj],
    .ia-modelo-btn[b-aw4rnp2vqj] {
        padding: 5px 7px;
    }

    .ia-barra-btn[b-aw4rnp2vqj] {
        padding: 6px 5px;
    }
}

/* Los dos modelos, cada uno con su color.
 *
 * Antes los dos elegidos se pintaban de blanco igual que el nivel, salvo un azulado muy tenue en Premium.
 * Con los cuatro botones pegados no había forma de ver de un vistazo en qué modo iba la conversación —que
 * es justo la pregunta cara: Premium gasta créditos en TODOS los turnos hasta que se quite—.
 *
 * Premium va en el MISMO violeta que «Análisis profesional» (.ia-afin-btn) y que las tarjetas de oferta, a
 * propósito: en todo el panel el violeta significa «esto cuesta», y verlo repetido es lo que hace que se
 * reconozca sin leer. Automático va en verde, que es el color del que no cuesta (el punto de «Rápido»). */
.ia-modelo-on[data-modelo="Automatico"][b-aw4rnp2vqj] {
    background: #ecfdf5;
    color: #047857;
}

.ia-modelo-on[data-modelo="Premium"][b-aw4rnp2vqj] {
    background: #f5f3ff;
    color: #7c3aed;
}

/* El chip PERMANENTE mientras la conversación va en Premium: qué escalón sirve y cuánto lleva gastado.
   Es la contrapartida de no volver a preguntar turno a turno. */
.ia-chip-modelo[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 5px 8px;
    border: 1px solid #c7d2fe;
    border-radius: 9px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11.5px;
}

.ia-chip-ico[b-aw4rnp2vqj] {
    font-size: 15px;
    line-height: 1;
}

.ia-chip-txt[b-aw4rnp2vqj] {
    font-weight: 600;
}

.ia-chip-turno[b-aw4rnp2vqj] {
    color: #6366f1;
}

.ia-chip-quitar[b-aw4rnp2vqj] {
    margin-left: auto;
    border: none;
    border-radius: 7px;
    background: none;
    padding: 3px 7px;
    color: #4338ca;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

    .ia-chip-quitar:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #e0e7ff;
    }

    .ia-chip-quitar:disabled[b-aw4rnp2vqj] {
        opacity: .45;
        cursor: default;
    }

/* El motivo del servidor cuando Premium no se pudo fijar (o volvió solo a Automático). No es un error del
   usuario: va en el gris de aviso, no en el rojo de los adjuntos rechazados. */
.ia-aviso-modelo[b-aw4rnp2vqj] {
    color: #92400e;
}

.ia-send[b-aw4rnp2vqj] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}

    .ia-send:hover:not(:disabled)[b-aw4rnp2vqj] {
        background: #1d4ed8;
    }

    .ia-send:disabled[b-aw4rnp2vqj] {
        background: #cbd5e1;
        cursor: default;
    }

    .ia-send .material-symbols-rounded[b-aw4rnp2vqj] {
        font-size: 19px;
    }

/* Lo que cuesta, ANTES de gastar. Sin esto, elegir «Profundo» es firmar en blanco. */
.ia-nota[b-aw4rnp2vqj] {
    padding: 7px 2px 0;
    font-size: 11px;
    color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
    .ia-sugerencia[b-aw4rnp2vqj],
    .ia-send[b-aw4rnp2vqj],
    .ia-footer[b-aw4rnp2vqj],
    .ia-medida[b-aw4rnp2vqj],
    .ia-feedback[b-aw4rnp2vqj] {
        transition-duration: .001ms;
    }

    .ia-mic-grabando[b-aw4rnp2vqj] {
        animation: none;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Avatar/AvatarRelleno.razor.rz.scp.css */
/* Llena la caja del avatar que lo contiene, sea del tamaño que sea, y la recorta en círculo. */
.avatar-relleno[b-oeyz0vcdd9] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}

/* UserAvatar trae medidas en línea (Size) y un tope de 32 px: aquí manda la caja. Las iniciales, con la letra
   de la caja, que es la que cada pantalla ya tenía pensada para su tamaño. */
.avatar-relleno[b-oeyz0vcdd9]  .user-avatar {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none;
    max-height: none;
    box-shadow: none;
}

.avatar-relleno[b-oeyz0vcdd9]  .avatar-fallback {
    font-size: inherit !important;
    font-weight: 700;
    line-height: 1;
}
/* _content/ErpPowergest/Presentation/Shared/Avatar/UserAvatar.razor.rz.scp.css */
/*----------------------
    AVATAR BASE
----------------------*/
.user-avatar[b-cshw6ux8i7],
.user-avatar.avatar-fallback[b-cshw6ux8i7] {
    width: 32px;
    height: 32px;
    max-height: 32px;
    max-width: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Iniciales dentro del avatar fallback */
.avatar-fallback[b-cshw6ux8i7] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 1;
    font-weight: 400;
    font-size: 14px;
    user-select: none;
}

/*----------------------
    CONTENEDOR DE AVATARES
----------------------*/
.avatars[b-cshw6ux8i7] {
    display: flex;
    position: relative;
    width: max-content; /* ajusta al número de avatares */
    height: 32px; /* altura de los avatares */
}

/*----------------------
    AVATARES SUPERPUESTOS
----------------------*/
.user-avatar.avatar[b-cshw6ux8i7],
.user-avatar.avatar-fallback.avatar[b-cshw6ux8i7] {
    position: relative; /* necesario para z-index */
    margin-left: -10px; /* superposición */
    z-index: 1;
}

    /* Primer avatar no se desplaza hacia atrás */
    .user-avatar.avatar:first-child[b-cshw6ux8i7],
    .user-avatar.avatar-fallback.avatar:first-child[b-cshw6ux8i7] {
        margin-left: 0;
    }

/* Z-index dinámico para que los primeros estén arriba */
.avatars > .user-avatar.avatar[b-cshw6ux8i7],
.avatars > .user-avatar.avatar-fallback.avatar[b-cshw6ux8i7] {
    z-index: auto; /* si quieres puedes calcular dinámicamente desde Blazor */
}
/* _content/ErpPowergest/Presentation/Shared/Ayuda/ContenidoAyuda.razor.rz.scp.css */
/* AY2: el contenido de la ayuda (ventana y pantalla /ayuda). El marco se lleva todo el alto que sobra. */
.ayuda-contenido[b-nrcjekzfd7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #fff;
}

.ayuda-menu[b-nrcjekzfd7] {
    display: flex;
    gap: 4px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ayuda-menu-btn[b-nrcjekzfd7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .ayuda-menu-btn .material-symbols-rounded[b-nrcjekzfd7] {
        font-size: 19px;
    }

    .ayuda-menu-btn:hover[b-nrcjekzfd7] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .ayuda-menu-btn.activa[b-nrcjekzfd7] {
        background: #e3f0f4;
        border-color: #b9d5df;
        color: #0a4d5e;
    }

    .ayuda-menu-btn:focus-visible[b-nrcjekzfd7] {
        outline: 3px solid rgba(14, 107, 128, .25);
        outline-offset: 1px;
    }

/* En la ventana flotante y estrecha el menú se queda en iconos: el rótulo sale en el title. */
@container ayuda (max-width: 470px) {
    .ayuda-contenido-compacto .ayuda-menu-txt[b-nrcjekzfd7] {
        display: none;
    }
}

.ayuda-sugerida[b-nrcjekzfd7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 0;
    padding: 7px 11px;
    border: 1px dashed #b9d5df;
    border-radius: 10px;
    background: #f4fafc;
    color: #0a4d5e;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}

    .ayuda-sugerida:hover[b-nrcjekzfd7] {
        background: #e3f0f4;
    }

    .ayuda-sugerida .material-symbols-rounded[b-nrcjekzfd7] {
        font-size: 18px;
    }

.ayuda-acciones[b-nrcjekzfd7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f6;
}

.ayuda-accion[b-nrcjekzfd7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: .8rem;
    cursor: pointer;
}

    .ayuda-accion:hover[b-nrcjekzfd7] {
        border-color: #94a3b8;
        color: #0f172a;
    }

    .ayuda-accion .material-symbols-rounded[b-nrcjekzfd7] {
        font-size: 17px;
    }

.ayuda-marco[b-nrcjekzfd7] {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}
/* _content/ErpPowergest/Presentation/Shared/Ayuda/VentanaAyuda.razor.rz.scp.css */
/* AY2: la ventana de ayuda. Flotante por defecto; la posición, el tamaño y el acople los pone ayudaVentana.js.
   z-index por debajo de los modales (que sí bloquean) y por encima del contenido y del botón flotante. */
.ayuda-ventana[b-kfyumyfcb8] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(520px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 96px));
    min-width: 300px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d5dee8;
    border-radius: 14px;
    box-shadow: 0 22px 48px -18px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .08);
    overflow: hidden;
    z-index: 1040;
    container: ayuda / inline-size;
}

.ayuda-cab[b-kfyumyfcb8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    background: linear-gradient(135deg, #0e6b80, #0a4d5e);
    color: #fff;
    cursor: move;
    user-select: none;
    touch-action: none;
    flex: none;
}

.ayuda-cab-ico[b-kfyumyfcb8] {
    font-size: 20px;
}

.ayuda-cab-titulo[b-kfyumyfcb8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: .9rem;
}

.ayuda-cab-botones[b-kfyumyfcb8] {
    display: flex;
    gap: 2px;
    flex: none;
}

.ayuda-cab-btn[b-kfyumyfcb8] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .88);
    cursor: pointer;
}

    .ayuda-cab-btn:hover[b-kfyumyfcb8] {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .ayuda-cab-btn:focus-visible[b-kfyumyfcb8] {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

    .ayuda-cab-btn .material-symbols-rounded[b-kfyumyfcb8] {
        font-size: 19px;
    }

.ayuda-cuerpo[b-kfyumyfcb8] {
    flex: 1;
    min-height: 0;
}

/* Mientras se arrastra o se estira, el marco no puede tragarse el ratón: perdería el movimiento al pasar encima. */
.ayuda-ventana.ayuda-moviendo .ayuda-cuerpo[b-kfyumyfcb8] {
    pointer-events: none;
}

.ayuda-tirador[b-kfyumyfcb8] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, #b9c6d3 50%, #b9c6d3 58%, transparent 58%, transparent 70%, #b9c6d3 70%, #b9c6d3 78%, transparent 78%);
}

/* Acoplada a un lado: todo el alto, y la pantalla de trabajo se estrecha (ayuda.css). Se estira por el borde interior. */
.ayuda-ventana.ayuda-acoplada[b-kfyumyfcb8] {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: var(--ayuda-ancho, 440px) !important;
    border-radius: 0;
    box-shadow: 0 0 0 1px #d5dee8, 0 0 24px -10px rgba(15, 23, 42, .3);
}

.ayuda-ventana.ayuda-acoplada-izquierda[b-kfyumyfcb8] {
    left: 0 !important;
    right: auto !important;
}

.ayuda-ventana.ayuda-acoplada-derecha[b-kfyumyfcb8] {
    right: 0 !important;
    left: auto !important;
}

    .ayuda-ventana.ayuda-acoplada .ayuda-tirador[b-kfyumyfcb8] {
        top: 0;
        bottom: 0;
        width: 7px;
        height: auto;
        cursor: ew-resize;
        background: transparent;
    }

    .ayuda-ventana.ayuda-acoplada-derecha .ayuda-tirador[b-kfyumyfcb8] {
        left: 0;
        right: auto;
    }

    .ayuda-ventana.ayuda-acoplada .ayuda-tirador:hover[b-kfyumyfcb8] {
        background: rgba(14, 107, 128, .25);
    }

    .ayuda-ventana.ayuda-acoplada .ayuda-cab[b-kfyumyfcb8] {
        cursor: default;
    }

/* Minimizada: una pastilla abajo a la izquierda. El marco sigue en la página (oculto) para no perder lo leído. */
.ayuda-ventana.ayuda-minimizada[b-kfyumyfcb8] {
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    /* Ancho fijo y sin contención de tamaño: con container-type: inline-size un ancho automático se queda en 0 y
       la pastilla no se ve (el contenedor no mide a sus hijos). */
    width: min(320px, calc(100vw - 32px)) !important;
    container-type: normal;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    border-radius: 999px;
}

    .ayuda-ventana.ayuda-minimizada .ayuda-cuerpo[b-kfyumyfcb8],
    .ayuda-ventana.ayuda-minimizada .ayuda-tirador[b-kfyumyfcb8] {
        display: none;
    }

    .ayuda-ventana.ayuda-minimizada .ayuda-cab[b-kfyumyfcb8] {
        cursor: default;
        padding-left: 14px;
    }

@media (max-width: 700px) {
    /* En el móvil no hay «al lado»: ocupa la pantalla y se cierra o minimiza. */
    .ayuda-ventana:not(.ayuda-minimizada)[b-kfyumyfcb8] {
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0;
    }

    .ayuda-tirador[b-kfyumyfcb8] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Busqueda/BuscadorCabecera.razor.rz.scp.css */
/* Buscador de la cabecera (N8). La caja es la misma de siempre —mismo tamaño y mismo sitio—; lo nuevo es
   el desplegable de resultados y el atajo. */

.bq-wrapper[b-2wlahf7hf4] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
}

.bq-icon[b-2wlahf7hf4] {
    position: absolute;
    left: 12px;
    font-size: 19px;
    line-height: 1;
    color: #9ca3af;
    pointer-events: none;
}

.bq-input[b-2wlahf7hf4] {
    width: clamp(240px, 29vw, 430px);
    max-width: 100%;
    height: 40px;
    border: 1px solid #d6dce5;
    border-radius: 13px;
    padding: 0 64px 0 38px;
    background: #ffffff;
    color: #111827;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.025);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .bq-input[b-2wlahf7hf4]::placeholder {
        color: #9ca3af;
        font-weight: 600;
    }

    .bq-input:hover[b-2wlahf7hf4] {
        background: #fbfdff;
        border-color: #cbd5e1;
    }

    .bq-input:focus[b-2wlahf7hf4] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), 0 10px 24px rgba(37, 99, 235, 0.07);
    }

    .bq-input[b-2wlahf7hf4]::-webkit-search-cancel-button {
        display: none;
    }

.bq-atajo[b-2wlahf7hf4] {
    position: absolute;
    right: 10px;
    padding: 2px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #94a3b8;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
}

.bq-wrapper.open .bq-atajo[b-2wlahf7hf4] {
    display: none;
}

/* ---- desplegable ---- */
.bq-panel[b-2wlahf7hf4] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: clamp(320px, 34vw, 520px);
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bq-seccion[b-2wlahf7hf4] {
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b95a7;
}

.bq-vacio[b-2wlahf7hf4] {
    padding: 12px 10px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.bq-item[b-2wlahf7hf4] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

    .bq-item:hover[b-2wlahf7hf4],
    .bq-item.activo[b-2wlahf7hf4] {
        background: #eef4ff;
        color: #111827;
    }

.bq-item-ico[b-2wlahf7hf4] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
}

    .bq-item-ico .material-symbols-rounded[b-2wlahf7hf4] {
        font-size: 19px;
        line-height: 1;
    }

.bq-item-accion .bq-item-ico[b-2wlahf7hf4] {
    background: #ecfdf5;
    color: #047857;
}

.bq-item-textos[b-2wlahf7hf4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.bq-item-texto[b-2wlahf7hf4] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq-item-detalle[b-2wlahf7hf4] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #8b95a7;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq-item-tipo[b-2wlahf7hf4],
.bq-item-espacio[b-2wlahf7hf4] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.bq-item-tipo[b-2wlahf7hf4] {
    background: #ecfdf5;
    color: #047857;
}

.bq-item-espacio[b-2wlahf7hf4] {
    background: #f1f5f9;
    color: #475569;
}

.bq-pie[b-2wlahf7hf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 4px;
    padding: 8px 10px 4px;
    border-top: 1px solid #eef2f7;
    font-size: 11px;
    color: #94a3b8;
}

    .bq-pie b[b-2wlahf7hf4] {
        color: #64748b;
        font-weight: 800;
    }

@media (max-width: 1180px) {
    .bq-input[b-2wlahf7hf4] {
        width: clamp(220px, 28vw, 340px);
    }
}

@media (max-width: 920px) {
    .bq-input[b-2wlahf7hf4] {
        width: clamp(180px, 30vw, 270px);
        padding-right: 14px;
    }

    .bq-atajo[b-2wlahf7hf4] {
        display: none;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Buttons/BtnCancelar.razor.rz.scp.css */
.btn-secundario[b-ilfhllrrvj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 9px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-secundario:hover[b-ilfhllrrvj] {
        background: #f3f4f6;
        color: #111827;
    }
/* _content/ErpPowergest/Presentation/Shared/Buttons/BtnConfirmar.razor.rz.scp.css */
/* El COLOR y el HOVER los pone `.btn-azul-crm` (app.css), común a todos los botones azules del CRM.
   Aquí solo queda la FORMA: tamaño, radio y tipografía. Ojo: no devolver aquí `background` ni
   `:hover` — los selectores con ámbito ganan por especificidad y volverían a romper la unidad. */
.btn-primario[b-syopfxan8b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/Shared/Cards/TableroTarjeta.razor.rz.scp.css */
/* ===== TARJETA DE TABLERO ===== */
.board-card[b-05j4x1mc5c] {
    position: relative;
    min-height: 178px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Franja de acento superior (contenida dentro de la tarjeta, extremos redondeados) */
.board-card[b-05j4x1mc5c]::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 18px;
    right: 18px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2nd));
    transition: left 0.18s ease, right 0.18s ease;
}

/* Tinte de color sutil al pasar el ratón */
.board-card[b-05j4x1mc5c]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.board-card:hover[b-05j4x1mc5c] {
    transform: translateY(-4px);
    border-color: var(--accent-border);
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.10), 0 0 0 1px var(--accent-border);
}

/* Con el menú de 3 puntos abierto, la tarjeta se eleva por encima del resto para
   que el desplegable no quede tapado por las tarjetas contiguas. */
.board-card.menu-open[b-05j4x1mc5c] {
    z-index: 50;
}

    .board-card:hover[b-05j4x1mc5c]::before {
        left: 14px;
        right: 14px;
    }

    .board-card:hover[b-05j4x1mc5c]::after {
        opacity: 0.035;
    }

.board-card-top[b-05j4x1mc5c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    /* Por encima de .board-card-main (z-index:1) para que el desplegable de los 3 puntos
       se pinte SIEMPRE sobre el título, que va después en el DOM con el mismo z-index. */
    z-index: 3;
}

/* Avatar con inicial del tablero, coloreado por acento */
.board-avatar[b-05j4x1mc5c] {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2nd));
    box-shadow: 0 6px 14px var(--accent-shadow);
}

.board-card-main[b-05j4x1mc5c] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.board-card-title[b-05j4x1mc5c] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 650;
    color: #111827;
    line-height: 1.3;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-badge[b-05j4x1mc5c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    background: #f3f4f6;
    color: #6b7280;
    padding: 3px 10px 3px 7px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

    .card-badge .material-symbols-rounded[b-05j4x1mc5c] {
        font-size: 14px;
    }

/* ===== PIE ===== */
.board-card-foot[b-05j4x1mc5c] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f1f3;
    position: relative;
    z-index: 1;
}

.card-open-link[b-05j4x1mc5c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, gap 0.15s ease;
}

    .card-open-link .material-symbols-rounded[b-05j4x1mc5c] {
        font-size: 17px;
        transition: transform 0.15s ease;
    }

    .card-open-link:hover[b-05j4x1mc5c] {
        background: #eceef2;
        color: #111827;
        gap: 9px;
    }

        .card-open-link:hover .material-symbols-rounded[b-05j4x1mc5c] {
            transform: translateX(2px);
        }

/* Pista de color al pasar por la tarjeta, foco real al pasar por el botón */
.board-card:hover .card-open-link[b-05j4x1mc5c] {
    color: var(--accent);
}

.board-card .card-open-link:hover[b-05j4x1mc5c] {
    color: var(--accent);
}

/* ===== MENÚ ===== */
.board-menu-wrapper[b-05j4x1mc5c] {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-board-menu[b-05j4x1mc5c] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-board-menu .material-symbols-rounded[b-05j4x1mc5c] {
        font-size: 20px;
    }

    .btn-board-menu:hover[b-05j4x1mc5c] {
        background: #f3f4f6;
        color: #374151;
    }

.board-dropdown[b-05j4x1mc5c] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.15);
    min-width: 160px;
    z-index: 999;
    overflow: hidden;
    padding: 4px;
    animation: dropdownFade-b-05j4x1mc5c 0.15s ease-out;
}

.board-dropdown-item[b-05j4x1mc5c] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .board-dropdown-item .material-symbols-rounded[b-05j4x1mc5c] {
        font-size: 18px;
        color: #9ca3af;
    }

    .board-dropdown-item:hover[b-05j4x1mc5c] {
        background: #f3f4f6;
    }

    .board-dropdown-item.danger[b-05j4x1mc5c] {
        color: #dc2626;
    }

        .board-dropdown-item.danger .material-symbols-rounded[b-05j4x1mc5c] {
            color: #dc2626;
        }

        .board-dropdown-item.danger:hover[b-05j4x1mc5c] {
            background: #fef2f2;
        }

/* ===== ACENTOS DE COLOR (variables por tarjeta) ===== */
.accent-1[b-05j4x1mc5c] { --accent: #2563eb; --accent-2nd: #3b82f6; --accent-shadow: rgba(37, 99, 235, 0.30); --accent-border: #bfd3fe; }
.accent-2[b-05j4x1mc5c] { --accent: #7c3aed; --accent-2nd: #a78bfa; --accent-shadow: rgba(124, 58, 237, 0.30); --accent-border: #d6c7fb; }
.accent-3[b-05j4x1mc5c] { --accent: #ea580c; --accent-2nd: #f59e0b; --accent-shadow: rgba(234, 88, 12, 0.28); --accent-border: #fbd2a8; }
.accent-4[b-05j4x1mc5c] { --accent: #059669; --accent-2nd: #10b981; --accent-shadow: rgba(5, 150, 105, 0.28); --accent-border: #a7e6cf; }
.accent-5[b-05j4x1mc5c] { --accent: #334155; --accent-2nd: #64748b; --accent-shadow: rgba(51, 65, 85, 0.28); --accent-border: #cbd5e1; }
.accent-6[b-05j4x1mc5c] { --accent: #0891b2; --accent-2nd: #06b6d4; --accent-shadow: rgba(8, 145, 178, 0.28); --accent-border: #a5e3ef; }

@keyframes dropdownFade-b-05j4x1mc5c {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== MODAL ABANDONAR ===== */
.modal-overlay[b-05j4x1mc5c] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeInBackground-b-05j4x1mc5c 0.15s ease-out;
}

.modal-card[b-05j4x1mc5c] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.20);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: zoomInCard-b-05j4x1mc5c 0.18s ease-out;
}

.modal-card-header[b-05j4x1mc5c] {
    padding: 22px 24px 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .modal-card-header .modal-icon[b-05j4x1mc5c] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fef2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dc2626;
        flex-shrink: 0;
    }

        .modal-card-header .modal-icon .material-symbols-rounded[b-05j4x1mc5c] {
            font-size: 22px;
        }

    .modal-card-header h3[b-05j4x1mc5c] {
        font-size: 1.1rem;
        font-weight: 650;
        color: #111827;
        margin: 0;
    }

.modal-card-body[b-05j4x1mc5c] {
    padding: 12px 24px 22px 24px;
}

    .modal-card-body p[b-05j4x1mc5c] {
        color: #6b7280;
        font-size: 0.92rem;
        margin: 0;
        line-height: 1.6;
    }

.modal-card-footer[b-05j4x1mc5c] {
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #f0f1f3;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-delete[b-05j4x1mc5c] {
    background: #dc2626;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

    .btn-delete:hover[b-05j4x1mc5c] {
        background: #b91c1c;
        transform: translateY(-1px);
    }

    .btn-delete:active[b-05j4x1mc5c] {
        transform: translateY(0);
    }

.btn-cancel[b-05j4x1mc5c] {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .btn-cancel:hover[b-05j4x1mc5c] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

@keyframes fadeInBackground-b-05j4x1mc5c {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomInCard-b-05j4x1mc5c {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/ErpPowergest/Presentation/Shared/Cards/TareaEnTablero.razor.rz.scp.css */
/* Misma caja que la tarjeta (ver Tarjeta.razor.css); lo que cambia es la marca: borde izquierdo verde
   azulado fijo (la tarjeta lo enseña solo en hover) e icono de tarea junto al título. */
.card[b-rkb39x9qsg] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #0f766e;
    /* La misma sombra inferior que la tarjeta del tablero (Tarjeta.razor.css). */
    box-shadow: 0 2px 3px -1px rgba(16, 24, 40, 0.12), 0 1px 0 rgba(16, 24, 40, 0.04);
}

    .card:hover[b-rkb39x9qsg] {
        transform: translateY(-2px);
        border-color: #99f6e4;
        border-left-color: #0f766e;
        box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05);
    }

.card-dragging[b-rkb39x9qsg] {
    opacity: 0.5;
    border: 2px dashed #0f766e;
}

.tarea-erp-hecha[b-rkb39x9qsg] {
    opacity: 0.6;
}

.card-title-row[b-rkb39x9qsg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.tarea-erp-icono[b-rkb39x9qsg] {
    font-size: 16px;
    color: #0f766e;
    flex-shrink: 0;
    margin-top: 1px;
}

.card-title[b-rkb39x9qsg] {
    min-width: 0;
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.titulo-completado[b-rkb39x9qsg] {
    color: #9ca3af;
    text-decoration: line-through;
}

.checkbox-completada[b-rkb39x9qsg] {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #0f766e;
    flex-shrink: 0;
}

.avatar-responsable[b-rkb39x9qsg] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.card-metadata[b-rkb39x9qsg] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: #6b7280;
    align-items: center;
}

.meta-item[b-rkb39x9qsg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .meta-item .material-symbols-rounded[b-rkb39x9qsg] {
        font-size: 15px;
    }

.tarea-erp-ambito[b-rkb39x9qsg] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 600;
}

.meta-item.date.overdue[b-rkb39x9qsg] {
    color: #dc2626;
    font-weight: 600;
}
/* _content/ErpPowergest/Presentation/Shared/Cards/Tarjeta.razor.rz.scp.css */
/* La tarjeta vive dentro de .cards-area, que es un flex column. Sin flex-shrink:0 el navegador la
   encoge para hacerla caber en la columna en vez de desbordar, y el overflow:hidden de aquí recorta
   el contenido a media altura: por eso con muchas tarjetas se aplastaban y no salía nunca la barra
   de scroll. El alto lo manda el contenido, siempre. */
.card[b-yvbz58meej] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    border: 1px solid #e5e7eb;
    /* Sombra ligera solo hacia abajo (el -1px de expansión evita que asome por los lados): la tarjeta
       se lee como algo apoyado sobre la columna. */
    box-shadow: 0 2px 3px -1px rgba(16, 24, 40, 0.12), 0 1px 0 rgba(16, 24, 40, 0.04);
    animation: cardIn-b-yvbz58meej 0.3s ease;
}

/* Entrada: solo se anima el nodo nuevo (las tarjetas usan @key → las existentes se reutilizan). */
@keyframes cardIn-b-yvbz58meej {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Salida: colapsa y se desvanece antes de quitarla del DOM (borrado diferido). */
.card.saliendo[b-yvbz58meej] {
    animation: cardOut-b-yvbz58meej 0.32s ease forwards;
    pointer-events: none;
}

@keyframes cardOut-b-yvbz58meej {
    from {
        opacity: 1;
        transform: scale(1);
        max-height: 220px;
        margin-bottom: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    to {
        opacity: 0;
        transform: scale(0.96);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Barra de acento lateral que aparece en hover */
.card[b-yvbz58meej]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2563eb, #3b82f6);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}

    .card:hover[b-yvbz58meej] {
        transform: translateY(-2px);
        border-color: #c7d2fe;
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05);
    }

        .card:hover[b-yvbz58meej]::before {
            transform: scaleY(1);
        }

    .card:hover .card-title:not(.titulo-completado)[b-yvbz58meej] {
        color: #1d4ed8;
    }

.card-dragging[b-yvbz58meej] {
    opacity: 0.5;
    border: 2px dashed #2563eb;
}

.card-labels[b-yvbz58meej] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.label-pill[b-yvbz58meej] {
    width: 34px;
    height: 6px;
    border-radius: 6px;
}

.card-title-row[b-yvbz58meej] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

/* Dos líneas como máximo: sin tope, un título largo estira la tarjeta y en una columna llena
   son las demás las que dejan de verse. El completo está en el tooltip. */
.card-title[b-yvbz58meej] {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    transition: color 0.16s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Referencias y URLs sin espacios: se parten en vez de desbordar el ancho de la columna. */
    overflow-wrap: anywhere;
}

.card-title-row .card-title[b-yvbz58meej] {
    margin-bottom: 0;
}

.titulo-completado[b-yvbz58meej] {
    color: #9ca3af;
    /* La raya la pone el TACHADO del texto, no una línea dibujada encima de la caja. Lo segundo
       es lo que había y se veía bien mientras el título cabía en una línea: la caja era del
       ancho del texto y la raya coincidía. Con un título de dos líneas la caja pasa a ocupar
       todo el ancho y el doble de alto, y esa línea —colocada a media altura, de borde a
       borde— caía ENTRE los dos renglones, cruzando la tarjeta entera sin tachar ni una letra.
       El tachado sigue al texto renglón a renglón, que es lo que se quiere decir. */
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.checkbox-completada[b-yvbz58meej] {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #2563eb;
    flex-shrink: 0;
}

/* Contacto asignado a la tarjeta: chip discreto para saber de quién va sin abrirla. */
.card-contacto[b-yvbz58meej] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.7rem;
    font-weight: 600;
}

    .card-contacto .material-symbols-rounded[b-yvbz58meej] {
        font-size: 14px;
        flex-shrink: 0;
    }

.card-contacto-nombre[b-yvbz58meej] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-metadata[b-yvbz58meej] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: #6b7280;
    align-items: center;
}

.meta-item[b-yvbz58meej] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .meta-item .material-symbols-rounded[b-yvbz58meej] {
        font-size: 15px;
    }

.meta-item.overdue[b-yvbz58meej] {
    background: #fef2f2;
    color: #dc2626;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}

    .meta-item.overdue .material-symbols-rounded[b-yvbz58meej] {
        color: #dc2626;
    }

/* Responsable: solo las dos iniciales, en la esquina superior derecha. El pie con el nombre entero
   que había antes se comía ~45px de cada tarjeta para repetir, casi siempre, algo que ya estaba en el
   título. El nombre completo se lee en el tooltip del avatar (atributo title en el marcado).
   `margin-left:auto` lo empuja al borde derecho aunque el título sea corto. */
.avatar-responsable[b-yvbz58meej] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-left: auto;
    background: #4f46e5;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #c7d2fe; /* anillo que lo distingue de cualquier otro avatar */
}

.assigned-members[b-yvbz58meej] {
    display: flex;
    align-items: center;
}

.avatar-sm[b-yvbz58meej] {
    width: 24px;
    height: 24px;
    background: #2563eb;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    margin-left: -6px;
}

    .avatar-sm:first-child[b-yvbz58meej] {
        margin-left: 0;
    }

/* Badge de probabilidad de cierre predicha (IC9) */
.prob-cierre[b-yvbz58meej] {
    color: #6366f1;
    font-weight: 600;
}

    .prob-cierre .material-symbols-rounded[b-yvbz58meej] {
        font-size: 14px;
    }
/* _content/ErpPowergest/Presentation/Shared/Chat/AvatarChat.razor.rz.scp.css */
.avatar-chat[b-r9y1rd22ot] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
}

/* El UserAvatar trae un tope de 32 px y sombra pensados para la cabecera; aquí manda el tamaño pedido. */
.avatar-chat[b-r9y1rd22ot]  .user-avatar {
    max-width: none;
    max-height: none;
    box-shadow: none;
}

/* El estado: un punto abajo a la derecha, con un aro del color del fondo para separarlo de la foto. */
.avatar-chat-estado[b-r9y1rd22ot] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 28%;
    height: 28%;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 2px solid var(--c-surface, #fff);
    box-sizing: content-box;
    background: #94a3b8;
}

.avatar-chat-estado.est-disponible[b-r9y1rd22ot] { background: #22c55e; }
.avatar-chat-estado.est-ocupado[b-r9y1rd22ot] { background: #ef4444; }
.avatar-chat-estado.est-ausente[b-r9y1rd22ot] { background: #f59e0b; }
/* _content/ErpPowergest/Presentation/Shared/Chat/ChatWidget.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   CHAT WIDGET · Sistema de diseño "Minimal limpio"
   Header claro · 1 acento medido · mucho blanco · líneas finas.
   Tokens centralizados → cambiar la marca es tocar 4 variables.
   ═══════════════════════════════════════════════════════════ */

/* Raíz sin posicionamiento: el FAB vive en FloatingDock; aquí solo se declaran los tokens
   y cuelgan el panel y el backdrop, que ya son 'fixed' por su cuenta. */
.chat-root[b-n1gkyu1x23] {
    /* Acento (marca) */
    --c-accent: #2563eb;
    --c-accent-strong: #1d4ed8;
    --c-accent-soft: #eef3ff;
    --c-accent-softer: #f6f9ff;
    --c-on-accent: #ffffff;

    /* Texto */
    --c-text: #0f172a;
    --c-text-2: #475569;
    --c-muted: #94a3b8;

    /* Superficies y bordes */
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-surface-3: #f1f5f9;
    --c-border: #e9edf3;
    --c-border-2: #eef2f7;
    --c-cab: #eef1f6;
    --c-cab-borde: #e2e7ef;

    /* Semánticos */
    --c-success: #22c55e;
    --c-danger: #dc2626;
    --c-danger-soft: #fef2f2;

    /* Radios */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Sombras (capas suaves, frías) */
    --sh-1: 0 1px 2px rgba(15,23,42,.06);
    --sh-2: 0 6px 16px rgba(15,23,42,.08);
    --sh-3: 0 18px 50px rgba(15,23,42,.14);
    --sh-pop: 0 16px 40px rgba(15,23,42,.16);
}

.chat-backdrop[b-n1gkyu1x23] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 9990;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

    .chat-backdrop.open[b-n1gkyu1x23] {
        opacity: 1;
        pointer-events: auto;
    }

/* ─── Panel ────────────────────────────────────────────────── */
.chat-panel[b-n1gkyu1x23] {
    position: fixed;
    right: 18px;
    bottom: 86px;
    width: min(740px, calc(100vw - 36px));
    height: min(640px, calc(100vh - 140px));
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    overflow: hidden;
    transform: translateY(14px) scale(.985);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.2,.64,1);
    z-index: 9995;
    display: flex;
    flex-direction: column;
}

    .chat-panel.open[b-n1gkyu1x23] {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

/* Header claro: nada de barra de color maciza */
.chat-panel-header[b-n1gkyu1x23] {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
}

.chat-title[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--c-text);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .chat-title .dot[b-n1gkyu1x23] {
        width: 9px;
        height: 9px;
        border-radius: var(--r-pill);
        background: var(--c-accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.16);
        display: inline-block;
        flex: 0 0 auto;
    }

.chat-header-actions[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header-btn[b-n1gkyu1x23] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .chat-header-btn:hover[b-n1gkyu1x23] { background: var(--c-surface-3); }

.chat-close[b-n1gkyu1x23] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--c-muted);
    transition: background .14s ease, color .14s ease;
}

    .chat-close:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }

.chat-panel-body[b-n1gkyu1x23] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Layout: leftbar + sidebar + main */
.chat-layout[b-n1gkyu1x23] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ─── Barra izquierda ──────────────────────────────────────── */
.chat-leftbar[b-n1gkyu1x23] {
    width: 60px;
    background: var(--c-surface-2);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 14px 8px;
    min-height: 0;
}

.chat-leftbar-top[b-n1gkyu1x23], .chat-leftbar-bottom[b-n1gkyu1x23] {
    display: flex;
    justify-content: center;
}

.chat-user-avatar[b-n1gkyu1x23] {
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    background: var(--c-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent);
}

.chat-user-img[b-n1gkyu1x23] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-user-initial[b-n1gkyu1x23] {
    color: var(--c-text);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}

.chat-leftbar-btn[b-n1gkyu1x23] {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s ease, color .14s ease;
}

    .chat-leftbar-btn:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }

/* ─── Sidebar: lista de hilos ──────────────────────────────── */
.chat-sidebar[b-n1gkyu1x23] {
    width: 232px;            /* ancho por defecto; JS lo ajusta al arrastrar el divisor */
    min-width: 70px;         /* mínimo: solo el icono del grupo visible (el texto se recorta) */
    max-width: 60%;
    flex: 0 0 auto;
    border-right: 1px solid var(--c-border);
    background: var(--c-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;        /* al estrechar, nombres/textos se recortan y queda solo el avatar */
}

/* Divisor arrastrable entre la lista de grupos y el chat (resize horizontal) */
.chat-sidebar-resizer[b-n1gkyu1x23] {
    flex: 0 0 6px;
    width: 6px;
    margin-left: -3px;       /* se solapa con el borde del sidebar para que la "línea" sea la zona de agarre */
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 6;
    transition: background .12s ease;
}

    .chat-sidebar-resizer:hover[b-n1gkyu1x23],
    .chat-sidebar-resizer.dragging[b-n1gkyu1x23] {
        background: var(--c-accent-soft, rgba(13,110,253,.18));
    }

.chat-sidebar-header[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
}

.chat-sidebar-title[b-n1gkyu1x23] {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--c-text);
}

.chat-create-btn[b-n1gkyu1x23] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    border: none;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .14s ease, transform .08s ease, color .14s ease;
}

    .chat-create-btn:hover[b-n1gkyu1x23] { background: var(--c-accent); color: var(--c-on-accent); }
    .chat-create-btn:active[b-n1gkyu1x23] { transform: scale(.94); }

.chat-thread-list[b-n1gkyu1x23] {
    padding: 4px 8px 10px;
    overflow: auto;
    min-height: 0;
    flex: 1;
}

.chat-thread-empty[b-n1gkyu1x23] {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--c-muted);
    text-align: center;
}

/* Panel de conversación sin hilo elegido: ocupa el hueco del hilo de mensajes. */
.chat-sin-hilo[b-n1gkyu1x23] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    color: var(--c-muted);
}

.chat-sin-hilo-icono[b-n1gkyu1x23] {
    font-size: 44px;
    opacity: 0.35;
    margin-bottom: 2px;
}

.chat-sin-hilo-titulo[b-n1gkyu1x23] {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text, #1e293b);
}

.chat-sin-hilo-texto[b-n1gkyu1x23] {
    font-size: 12.5px;
    max-width: 260px;
    line-height: 1.5;
}

.chat-thread-item[b-n1gkyu1x23] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--r-md);
    text-align: left;
    position: relative;
    transition: background .12s ease;
}

    .chat-thread-item:hover[b-n1gkyu1x23] { background: var(--c-surface-2); }

    .chat-thread-item.active[b-n1gkyu1x23] { background: var(--c-accent-soft); }

    /* Marcador de acento del hilo activo */
    .chat-thread-item.active[b-n1gkyu1x23]::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 22px;
        border-radius: var(--r-pill);
        background: var(--c-accent);
    }

.chat-thread-avatar[b-n1gkyu1x23] {
    width: 38px;
    height: 38px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex: 0 0 38px;
}

.chat-thread-item.active .chat-thread-avatar[b-n1gkyu1x23] {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.chat-thread-text[b-n1gkyu1x23] { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.chat-thread-name[b-n1gkyu1x23] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Última línea (estilo WhatsApp): "Autor: texto" en una sola línea */
.chat-thread-last[b-n1gkyu1x23] {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chat-thread-last-author[b-n1gkyu1x23] {
    font-weight: 600;
    color: var(--c-text-2);
    margin-right: 4px;
}

.chat-thread-last-text[b-n1gkyu1x23] { color: var(--c-muted); }

/* Badge de no leídos */
.chat-thread-unread[b-n1gkyu1x23] {
    flex: 0 0 auto;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}

/* Indicador "@" (mención sin leer) */
.chat-thread-mention[b-n1gkyu1x23] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-right: 4px;
    border-radius: var(--r-pill);
    background: var(--c-accent-strong);
    color: var(--c-on-accent);
    font-size: 12px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
    display: inline-block;
}

/* ─── Chat main ────────────────────────────────────────────── */
.chat-main[b-n1gkyu1x23] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: var(--c-surface-2);
}

/* Cabecera nativa del hilo (Syncfusion): de azul (#0d6efd del tema bootstrap5)
   → blanca, para que pegue con el resto del panel claro. El texto del título
   pasa a oscuro (si no, queda blanco sobre blanco e invisible). */
[b-n1gkyu1x23] .e-chat-header {
    background: var(--c-cab) !important;
    border-color: var(--c-cab-borde) !important;
    border-bottom-color: var(--c-cab-borde) !important;
    color: var(--c-text) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    padding-right: 92px; /* hueco para los botones de minimizar y de 3 puntos */
}

[b-n1gkyu1x23] .e-chat-header .e-header-text,
[b-n1gkyu1x23] .e-chat-header .e-header-text-container,
[b-n1gkyu1x23] .e-chat-header .e-tbar-btn .e-btn-icon,
[b-n1gkyu1x23] .e-chat-header .e-toolbar-item .e-tbar-btn .e-btn-icon {
    color: var(--c-text) !important;
}

[b-n1gkyu1x23] .e-chat-header .e-tbar-btn,
[b-n1gkyu1x23] .e-chat-header .e-toolbar-item .e-tbar-btn {
    background: transparent !important;
}

/* Botones flotantes sobre la cabecera del hilo (minimizar y opciones del grupo): ghost circulares,
   sin azul. Combinan con la cabecera blanca; al hover se tiñen de gris suave.

   Van centrados a mano y no con flex porque no cuelgan de la cabecera: la pinta Syncfusion y no
   podemos meter nada dentro, así que flotan sobre ella desde .chat-main. De ahí el cálculo: centrar
   es (alto de la cabecera - alto del botón) / 2.

   La cabecera mide 46px: .e-chat-ui .e-chat-header{height:46px} del tema bootstrap5. OJO, que en ese
   mismo CSS hay otra regla con 56px y es una trampa: va prefijada con .e-bigger (el modo táctil de
   Syncfusion), que aquí no se usa en ningún sitio. Dar por bueno el 56 deja el botón 5px caído. */
.chat-conv-options[b-n1gkyu1x23],
.chat-conv-minimizar[b-n1gkyu1x23] {
    --h-cabecera-hilo: 46px;
    --lado-btn: 34px;

    position: absolute;
    top: calc((var(--h-cabecera-hilo) - var(--lado-btn)) / 2);
    z-index: 20;
    width: var(--lado-btn);
    height: var(--lado-btn);
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s ease, color .14s ease;
}

/* Minimizar va pegado a la esquina; las opciones del grupo, a su izquierda. El de minimizar sale
   siempre que haya conversación, el de opciones solo en grupos: por eso los sitios son fijos y no
   dependen uno de otro. */
.chat-conv-minimizar[b-n1gkyu1x23] { right: 12px; }
.chat-conv-options[b-n1gkyu1x23] { right: 52px; }

    .chat-conv-options:hover[b-n1gkyu1x23],
    .chat-conv-minimizar:hover[b-n1gkyu1x23] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }

    .chat-conv-options:active[b-n1gkyu1x23],
    .chat-conv-minimizar:active[b-n1gkyu1x23] { background: var(--c-cab-borde); box-shadow: none; }

    .chat-conv-options .chat-ico[b-n1gkyu1x23],
    .chat-conv-minimizar .chat-ico[b-n1gkyu1x23] { font-size: 22px; }

.chat-error[b-n1gkyu1x23] {
    margin: 10px 12px 0;
    padding: 9px 12px;
    border-radius: var(--r-md);
    background: var(--c-danger-soft);
    border: 1px solid #fecaca;
    color: #b42318;
    font-size: 12.5px;
}

.chat-ui-wrap[b-n1gkyu1x23] { flex: 1; min-height: 0; }

/* El componente de Syncfusion se dibuja su propio marco (border: 1px solid). Aquí sobra: ya lo
   enmarcan el panel y la línea superior del composer, y lo único que aporta es una raya suelta por
   dentro del borde del panel. */
[b-n1gkyu1x23] .e-chat-ui {
    border: none;
}

/* Syncfusion pinta su pie 10px MÁS ESTRECHO que el panel y lo centra:
       .e-chat-ui .e-footer { width: calc(100% - 10px); margin: 0 auto }
   De ahí los 5px de aire a cada lado del composer y esa sensación de que no encaja. Que ocupe el
   ancho entero; los márgenes de dentro los pone .chat-footer, que es quien debe decidirlos. */
[b-n1gkyu1x23] .e-chat-ui .e-footer {
    width: 100%;
}

/* Y el hueco de abajo es el mismo vicio por el otro lado: el pie vive dentro de .e-chat-content, que
   trae padding-bottom: 10px. Su composer está pensado para ir flotando con aire alrededor; el nuestro
   va pegado al fondo del panel. */
[b-n1gkyu1x23] .e-chat-ui .e-chat-content {
    padding-bottom: 0;
}

/* ─── Footer (composer) ────────────────────────────────────── */
.chat-footer[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.emoji-btn[b-n1gkyu1x23] {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    border: none;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s ease, color .14s ease;
}

    .emoji-btn:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-accent); }

.emoji-input[b-n1gkyu1x23] {
    flex: 1;
    height: 40px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    padding: 0 16px;
    font-size: 13.5px;
    color: var(--c-text);
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

    .emoji-input[b-n1gkyu1x23]::placeholder { color: var(--c-muted); }

    .emoji-input:focus[b-n1gkyu1x23] {
        background: var(--c-surface);
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.14);
    }

.send-btn[b-n1gkyu1x23] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--r-pill);
    border: none;
    color: var(--c-on-accent);
    background: linear-gradient(135deg, #3b82f6, var(--c-accent));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37,99,235,.36);
    transition: transform .12s ease, filter .14s ease;
}

    .send-btn:hover[b-n1gkyu1x23] { filter: brightness(1.05); transform: scale(1.05); }
    .send-btn:active[b-n1gkyu1x23] { transform: scale(.94); }

/* ─── Popup de menciones ───────────────────────────────────── */
.chat-mention-popup[b-n1gkyu1x23] {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 66px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
    padding: 6px;
    z-index: 30;
}

.chat-mention-item[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
}

    .chat-mention-item:hover[b-n1gkyu1x23],
    .chat-mention-item.active[b-n1gkyu1x23] { background: var(--c-accent-soft); }

.chat-mention-avatar[b-n1gkyu1x23] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.chat-mention-name[b-n1gkyu1x23] {
    font-size: 13.5px;
    color: var(--c-text);
    font-weight: 600;
}

.chat-mention-hint[b-n1gkyu1x23] {
    margin-left: auto;
    font-size: 11px;
    color: var(--c-muted);
}

/* ─── Panel de emojis ──────────────────────────────────────── */
.emoji-panel[b-n1gkyu1x23] {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 66px;
    max-height: 290px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .14s ease, transform .14s ease;
    overflow: hidden;
}

    .emoji-panel.open[b-n1gkyu1x23] { opacity: 1; pointer-events: auto; transform: translateY(0); }

.emoji-panel-inner[b-n1gkyu1x23] { padding: 10px; }

.emoji-tabs[b-n1gkyu1x23] {
    display: flex;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
}

.emoji-tab[b-n1gkyu1x23] {
    border: none;
    background: var(--c-surface-3);
    color: var(--c-text-2);
    border-radius: var(--r-md);
    padding: 6px 10px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

    .emoji-tab:hover[b-n1gkyu1x23] { background: var(--c-accent-soft); }
    .emoji-tab.active[b-n1gkyu1x23] { background: var(--c-accent); color: var(--c-on-accent); }

.emoji-scroll[b-n1gkyu1x23] { max-height: 210px; overflow: auto; padding-top: 10px; }

.emoji-section-title[b-n1gkyu1x23] { color: var(--c-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 8px 2px 6px; }

.emoji-grid[b-n1gkyu1x23] { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }

.emoji-item[b-n1gkyu1x23] {
    border: none;
    background: transparent;
    color: var(--c-text);
    border-radius: var(--r-sm);
    padding: 6px 0;
    font-size: 18px;
    cursor: pointer;
    transition: background .1s ease, transform .08s ease;
}

    .emoji-item:hover[b-n1gkyu1x23] { background: var(--c-surface-3); transform: scale(1.12); }

.emoji-empty[b-n1gkyu1x23] { color: var(--c-muted); padding: 14px 8px; }

/* ─── Overlay interno ──────────────────────────────────────── */
.chat-panel-overlay[b-n1gkyu1x23] {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.18);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 2050;
}

/* Mini menú del + */
.chat-mini-menu--inside[b-n1gkyu1x23] {
    position: absolute;
    top: 64px;
    left: 60px;
    z-index: 2060;
    width: 220px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    overflow: hidden;
    padding: 6px;
}

.chat-mini-item[b-n1gkyu1x23] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-text);
}

    .chat-mini-item:hover[b-n1gkyu1x23] { background: var(--c-accent-soft); }

/* ─── Modales dentro del panel ─────────────────────────────── */
.chat-inner-modal[b-n1gkyu1x23],
.chat-modal.chat-modal-inside[b-n1gkyu1x23] {
    position: absolute;
    inset: 58px 14px 14px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    z-index: 2060;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .chat-inner-modal .chat-modal-body[b-n1gkyu1x23] { overflow: auto; }

.chat-modal-header[b-n1gkyu1x23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}

.chat-modal-title[b-n1gkyu1x23] { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--c-text); }

.chat-modal-close[b-n1gkyu1x23] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--c-muted);
    transition: background .14s ease, color .14s ease;
}

    .chat-modal-close:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }

.chat-modal-body[b-n1gkyu1x23] { padding: 16px; flex: 1; overflow: auto; }

.chat-label[b-n1gkyu1x23] { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--c-text-2); }

.chat-input[b-n1gkyu1x23] {
    width: 100%;
    height: 40px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    padding: 0 12px;
    font-size: 13.5px;
    color: var(--c-text);
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

    .chat-input[b-n1gkyu1x23]::placeholder { color: var(--c-muted); }

    .chat-input:focus[b-n1gkyu1x23] {
        background: var(--c-surface);
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.14);
    }

.mt-2[b-n1gkyu1x23] { margin-top: 12px; }

.chat-help[b-n1gkyu1x23] { font-size: 12px; color: var(--c-muted); margin-top: 8px; }

.chat-modal-footer[b-n1gkyu1x23] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
}

.chat-btn[b-n1gkyu1x23] {
    height: 38px;
    border-radius: var(--r-md);
    padding: 0 16px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .14s ease, background .14s ease, border-color .14s ease;
}

    .chat-btn.ghost[b-n1gkyu1x23] { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-2); }
    .chat-btn.ghost:hover[b-n1gkyu1x23] { background: var(--c-surface-3); }

    .chat-btn.primary[b-n1gkyu1x23] { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 4px 12px rgba(37,99,235,.3); }
    .chat-btn.primary:hover[b-n1gkyu1x23] { filter: brightness(1.06); }
    .chat-btn.primary:disabled[b-n1gkyu1x23] { opacity: .55; cursor: not-allowed; box-shadow: none; }

    .chat-btn.danger[b-n1gkyu1x23] { background: var(--c-surface); border-color: #fca5a5; color: var(--c-danger); }
    .chat-btn.danger:hover[b-n1gkyu1x23] { background: var(--c-danger-soft); }

/* Fila renombrar */
.chat-rename-row[b-n1gkyu1x23] { display: flex; gap: 8px; align-items: center; }
.chat-rename-row .chat-input[b-n1gkyu1x23] { flex: 1; }
.chat-rename-row .chat-btn[b-n1gkyu1x23] { white-space: nowrap; }

/* Etiqueta de rol (propietario) */
.chat-member-role[b-n1gkyu1x23] {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    flex: 0 0 auto;
}

/* Botón quitar miembro */
.chat-member-remove[b-n1gkyu1x23] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--c-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    padding: 4px;
}

    .chat-member-remove:hover[b-n1gkyu1x23] { background: var(--c-danger-soft); }
    .chat-member-remove .chat-ico[b-n1gkyu1x23] { font-size: 20px; }

/* Lista de personas */
.chat-pick-list[b-n1gkyu1x23] {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: auto;
    max-height: 240px;
    background: var(--c-surface);
}

.chat-pick-empty[b-n1gkyu1x23] { padding: 14px; font-size: 12.5px; color: var(--c-muted); }

/* Aviso informativo dentro de un modal (p. ej. departamento: miembros de solo lectura) */
.chat-modal-note[b-n1gkyu1x23] {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--c-surface-2, rgba(127,127,127,.10));
    font-size: 12.5px;
    color: var(--c-muted);
}

.chat-pick-item[b-n1gkyu1x23] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--c-border-2);
    transition: background .12s ease;
}

    .chat-pick-item:last-child[b-n1gkyu1x23] { border-bottom: none; }
    .chat-pick-item:hover[b-n1gkyu1x23] { background: var(--c-surface-2); }
    .chat-pick-item.selected[b-n1gkyu1x23] { background: var(--c-accent-soft); }

.chat-pick-avatar[b-n1gkyu1x23] {
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: var(--c-accent);
    flex: 0 0 32px;
}

.chat-pick-name[b-n1gkyu1x23] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-pick-check[b-n1gkyu1x23] { font-weight: 900; color: var(--c-accent); }

/* Chips seleccionados */
.chat-selected[b-n1gkyu1x23] { margin-top: 12px; }
.chat-selected-title[b-n1gkyu1x23] { font-size: 12px; font-weight: 700; color: var(--c-text-2); margin-bottom: 8px; }
.chat-selected-empty[b-n1gkyu1x23] { font-size: 12px; color: var(--c-muted); padding: 8px 0; }

.chat-chips[b-n1gkyu1x23] { display: flex; flex-wrap: wrap; gap: 8px; }

.chat-chip[b-n1gkyu1x23] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    border: 1px solid #dbe6ff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-accent-strong);
}

.chat-chip-x[b-n1gkyu1x23] { border: none; background: transparent; cursor: pointer; font-size: 12px; opacity: .7; color: inherit; }
    .chat-chip-x:hover[b-n1gkyu1x23] { opacity: 1; }

/* Vista previa de reenvío */
[b-n1gkyu1x23] .chat-forward-preview,
.chat-forward-preview[b-n1gkyu1x23] {
    padding: 11px 13px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--c-text-2);
    max-height: 90px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   Status ticks (Syncfusion icon font override)
   ═══════════════════════════════════════════════════════════ */
[b-n1gkyu1x23] .e-status-icon.chat-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 14px;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: transparent !important;
    vertical-align: middle;
    margin-left: 3px;
}

[b-n1gkyu1x23] .e-status-icon.chat-status::before {
    content: "✓" !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(0,0,0,.45) !important;
    display: inline-block !important;
    line-height: 1 !important;
}

[b-n1gkyu1x23] .e-status-icon.chat-status.is-sent::before {
    content: "✓" !important;
    color: rgba(0,0,0,.45) !important;
}

[b-n1gkyu1x23] .e-status-icon.chat-status.is-delivered::before {
    content: "✓✓" !important;
    color: rgba(0,0,0,.65) !important;
    letter-spacing: -3px !important;
}

[b-n1gkyu1x23] .e-status-icon.chat-status.is-read::before {
    content: "✓✓" !important;
    color: var(--c-accent) !important;
    letter-spacing: -3px !important;
}

/* ═══════════════════════════════════════════════════════════
   TIMESTAMP POR MENSAJE — via MessageTemplate
   ═══════════════════════════════════════════════════════════ */
[b-n1gkyu1x23] .msg-tpl {
    display: flex;
    flex-direction: column;
}

[b-n1gkyu1x23] .msg-tpl-text {
    word-break: break-word;
    white-space: pre-wrap;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Mención resaltada dentro del mensaje */
[b-n1gkyu1x23] .msg-mention {
    color: var(--c-accent);
    font-weight: 600;
}

/* Texto + hora en la misma línea (estilo WhatsApp) */
[b-n1gkyu1x23] .msg-textmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 8px;
    row-gap: 2px;
}

[b-n1gkyu1x23] .msg-tpl-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-left: auto;
    line-height: 1;
}

[b-n1gkyu1x23] .msg-tpl-time {
    font-size: 10.5px;
    opacity: 0.55;
    line-height: 1;
}

/* ── Alineación NATIVA de Syncfusion (NO tocar anchos del grupo) ─────── */
[b-n1gkyu1x23] .e-message-group .e-message-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

[b-n1gkyu1x23] .e-message-group .e-message-item + .e-message-item {
    margin-top: 3px !important;
}

[b-n1gkyu1x23] .e-message-group.e-right .e-message-item {
    align-items: flex-end !important;
}

/* Burbuja propia: gris muy claro neutro → mucho blanco, sin azul.
   Se distingue de la recibida por el relleno (sin borde) y la alineación. */
[b-n1gkyu1x23] .e-message-group.e-right .msg-tpl {
    background: var(--c-surface-3);
    color: var(--c-text);
    border-radius: 16px 4px 16px 16px;
    padding: 9px 13px;
    width: fit-content;
    box-shadow: var(--sh-1);
}

[b-n1gkyu1x23] .e-message-group.e-right .msg-tpl-text,
[b-n1gkyu1x23] .e-message-group.e-right .msg-tpl-time {
    text-align: left;
}

/* ── Avatar del remitente (e-left) ──────────────────────────────────── */
[b-n1gkyu1x23] .e-message-group.e-left .e-message-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 8px;
}

[b-n1gkyu1x23] .msg-content-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

[b-n1gkyu1x23] .e-message-group.e-right .msg-content-wrap {
    align-items: flex-end !important;
}

/* ── Separador de día (píldora centrada) ────────────────────────────── */
[b-n1gkyu1x23] .e-message-group:has(.chat-day-sep) {
    max-width: 100% !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 2px 0 !important;
}

[b-n1gkyu1x23] .e-message-group:has(.chat-day-sep) .e-message-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

[b-n1gkyu1x23] .e-message-group:has(.chat-day-sep) .e-message-header,
[b-n1gkyu1x23] .e-message-group:has(.chat-day-sep) .e-message-header-container,
[b-n1gkyu1x23] .e-message-group:has(.chat-day-sep) .e-chat-message-toolbar {
    display: none !important;
}

[b-n1gkyu1x23] .chat-day-sep {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 8px 0;
}

[b-n1gkyu1x23] .chat-day-sep span {
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-1);
}

/* ── Avatares de lectores (visto): hasta dónde ha leído cada miembro ───
   Mini-avatares apilados bajo el último mensaje leído por cada persona,
   alineados al borde derecho de la burbuja (estilo Messenger). */
[b-n1gkyu1x23] .msg-readers {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 3px;
    padding-right: 2px;
}

[b-n1gkyu1x23] .msg-reader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--c-surface, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    margin-left: -5px;       /* apilado/solapado */
    cursor: default;
}

    [b-n1gkyu1x23] .msg-reader:first-child { margin-left: 0; }

/* Nombre del remitente (1er mensaje del grupo) */
[b-n1gkyu1x23] .msg-author-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 3px;
    padding-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Burbuja recibida: superficie clara con borde fino */
[b-n1gkyu1x23] .e-message-group.e-left .msg-tpl {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 4px 16px 16px 16px;
    padding: 9px 13px;
    box-shadow: var(--sh-1);
}

[b-n1gkyu1x23] .e-message-group.e-left .e-message-item:not(:first-child) .msg-author-avatar {
    visibility: hidden;
}

[b-n1gkyu1x23] .e-message-group.e-left .e-message-item:not(:first-child) .msg-author-name {
    display: none;
}

[b-n1gkyu1x23] .msg-author-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, var(--c-accent));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(37,99,235,.28);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* ── Tics de visto ──────────────────────────────────────────────────── */
[b-n1gkyu1x23] .msg-tick {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-style: normal;
}

[b-n1gkyu1x23] .msg-tick::before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}

[b-n1gkyu1x23] .msg-tick.is-sent::before {
    content: "check";
    color: rgba(0,0,0,.40);
}

[b-n1gkyu1x23] .msg-tick.is-delivered::before {
    content: "done_all";
    color: rgba(0,0,0,.55);
}

[b-n1gkyu1x23] .msg-tick.is-read::before {
    content: "done_all";
    color: var(--c-accent);
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR DE OPCIONES DEL MENSAJE
   ═══════════════════════════════════════════════════════════ */
[b-n1gkyu1x23] .e-chat-message-toolbar.e-show {
    display: none !important;
}

[b-n1gkyu1x23] .e-message-item:has(.msg-content-wrap:hover) .e-chat-message-toolbar,
[b-n1gkyu1x23] .e-chat-message-toolbar:hover {
    display: block !important;
}

[b-n1gkyu1x23] .e-message-group.e-left .e-message-item {
    position: relative;
}

[b-n1gkyu1x23] .e-message-group.e-left .e-message-item .e-chat-message-toolbar {
    left: 44px !important;
    right: auto !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar,
[b-n1gkyu1x23] .e-chat-message-toolbar:has(.e-toolbar-item) {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-2) !important;
    overflow: hidden !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar .e-toolbar-items,
[b-n1gkyu1x23] .e-chat-message-toolbar .e-toolbar-item {
    background: transparent !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn {
    background: transparent !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn .e-icons,
[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn .e-btn-icon {
    color: var(--c-text-2) !important;
    font-size: 16px !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn:hover {
    background: var(--c-accent-soft) !important;
}

[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn:hover .e-icons,
[b-n1gkyu1x23] .e-chat-message-toolbar .e-tbar-btn:hover .e-btn-icon {
    color: var(--c-accent) !important;
}

/* "Borrar" solo en mensajes propios. Ya no hay columna derecha (todo es e-left), así que el
   criterio es la marca .is-mine de la caja de contenido, no la columna. */
[b-n1gkyu1x23] .e-message-item:not(:has(.msg-content-wrap.is-mine)) .e-chat-message-toolbar .e-toolbar-item:has(.e-chat-trash) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ICONOS MATERIAL SYMBOLS
   ═══════════════════════════════════════════════════════════ */
.chat-ico[b-n1gkyu1x23],
.chat-mini-ico[b-n1gkyu1x23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-user-select: none;
    user-select: none;
    font-size: 20px;
}

.chat-close[b-n1gkyu1x23],
.chat-leftbar-btn[b-n1gkyu1x23],
.emoji-btn[b-n1gkyu1x23],
.send-btn[b-n1gkyu1x23],
.chat-modal-close[b-n1gkyu1x23],
.chat-chip-x[b-n1gkyu1x23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-close .chat-ico[b-n1gkyu1x23] { font-size: 20px; }
.chat-leftbar-btn .chat-ico[b-n1gkyu1x23] { font-size: 22px; }
.emoji-btn .chat-ico[b-n1gkyu1x23] { font-size: 22px; }
.send-btn .chat-ico[b-n1gkyu1x23] { font-size: 20px; }
.chat-modal-close .chat-ico[b-n1gkyu1x23] { font-size: 22px; }
.chat-chip-x .chat-ico[b-n1gkyu1x23] { font-size: 15px; }

.chat-pick-check.chat-ico[b-n1gkyu1x23] {
    font-size: 20px;
    color: var(--c-accent);
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.chat-mini-ico[b-n1gkyu1x23] {
    font-size: 20px;
    color: var(--c-accent);
    flex: 0 0 auto;
}

/* Botón "Cargar mensajes anteriores" */
.chat-load-older[b-n1gkyu1x23] {
    display: block;
    margin: 8px auto;
    padding: 5px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sh-1);
    z-index: 2;
    transition: background .14s ease;
}

    .chat-load-older:hover[b-n1gkyu1x23] { background: var(--c-accent-soft); }

/* ─── Adjuntos ─────────────────────────────────────────────── */
.chat-file-input[b-n1gkyu1x23] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.chat-attach-pending[b-n1gkyu1x23] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.chat-attach-chip[b-n1gkyu1x23] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 180px;
    padding: 4px 6px 4px 10px;
    background: var(--c-accent-soft);
    border: 1px solid #dbe6ff;
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--c-accent-strong);
}

.chat-attach-chip .chat-ico[b-n1gkyu1x23] { font-size: 16px; color: var(--c-accent); flex: 0 0 auto; }

.chat-attach-chip-name[b-n1gkyu1x23] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-chip-x[b-n1gkyu1x23] {
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
    color: var(--c-accent);
    opacity: .7;
}

    .chat-attach-chip-x:hover[b-n1gkyu1x23] { opacity: 1; }
    .chat-attach-chip-x .chat-ico[b-n1gkyu1x23] { font-size: 14px; color: inherit; }

/* Adjuntos dentro de un mensaje */
[b-n1gkyu1x23] .msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

[b-n1gkyu1x23] .msg-attachments + .msg-textmeta { margin-top: 4px; }

[b-n1gkyu1x23] .msg-attach-img-link { display: inline-block; }

[b-n1gkyu1x23] .msg-attach-img {
    max-width: 220px;
    max-height: 220px;
    border-radius: var(--r-md);
    display: block;
}

[b-n1gkyu1x23] .msg-attach-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 8px 11px;
    background: rgba(0,0,0,.05);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
}

    [b-n1gkyu1x23] .msg-attach-file:hover { background: rgba(0,0,0,.09); }
    [b-n1gkyu1x23] .msg-attach-file .chat-ico { font-size: 20px; color: var(--c-accent); flex: 0 0 auto; }

[b-n1gkyu1x23] .msg-attach-file-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-n1gkyu1x23] .msg-attach-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

[b-n1gkyu1x23] .msg-attach-file-size {
    font-size: 11px;
    color: var(--c-muted);
}

/* ─── Fondo del hilo de mensajes (Syncfusion) ──────────────── */
[b-n1gkyu1x23] .e-chat-ui,
[b-n1gkyu1x23] .e-chat-ui .e-message-wrapper {
    background: var(--c-surface-2);
}

/* ─── Scrollbars finas y discretas (remate profesional) ─────────────────
   Firefox + WebKit. Azul tenue al pasar; ocupan poco y no distraen. */
.chat-thread-list[b-n1gkyu1x23],
.chat-pick-list[b-n1gkyu1x23],
.emoji-scroll[b-n1gkyu1x23],
.chat-mention-popup[b-n1gkyu1x23] {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

.chat-thread-list[b-n1gkyu1x23]::-webkit-scrollbar,
.chat-pick-list[b-n1gkyu1x23]::-webkit-scrollbar,
.emoji-scroll[b-n1gkyu1x23]::-webkit-scrollbar,
.chat-mention-popup[b-n1gkyu1x23]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.chat-thread-list[b-n1gkyu1x23]::-webkit-scrollbar-thumb,
.chat-pick-list[b-n1gkyu1x23]::-webkit-scrollbar-thumb,
.emoji-scroll[b-n1gkyu1x23]::-webkit-scrollbar-thumb,
.chat-mention-popup[b-n1gkyu1x23]::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}

    .chat-thread-list[b-n1gkyu1x23]::-webkit-scrollbar-thumb:hover,
    .chat-pick-list[b-n1gkyu1x23]::-webkit-scrollbar-thumb:hover,
    .emoji-scroll[b-n1gkyu1x23]::-webkit-scrollbar-thumb:hover,
    .chat-mention-popup[b-n1gkyu1x23]::-webkit-scrollbar-thumb:hover {
        background: var(--c-accent);
        background-clip: padding-box;
    }

.chat-thread-list[b-n1gkyu1x23]::-webkit-scrollbar-track,
.chat-pick-list[b-n1gkyu1x23]::-webkit-scrollbar-track,
.emoji-scroll[b-n1gkyu1x23]::-webkit-scrollbar-track,
.chat-mention-popup[b-n1gkyu1x23]::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar del hilo de mensajes de Syncfusion, al mismo estilo */
[b-n1gkyu1x23] .e-chat-ui .e-message-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

[b-n1gkyu1x23] .e-chat-ui .e-message-wrapper::-webkit-scrollbar {
    width: 10px !important;
}

[b-n1gkyu1x23] .e-chat-ui .e-message-wrapper::-webkit-scrollbar-thumb {
    background: var(--c-border) !important;
    border-radius: var(--r-pill) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}

    [b-n1gkyu1x23] .e-chat-ui .e-message-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--c-accent) !important;
        background-clip: padding-box !important;
    }

/* ══════════════════ El panel como ventana: estirar, tallas, cabecera de la conversación, móvil ══════════════════ */

/* ── Estirar (como el asistente): solo por la izquierda, por arriba y su esquina ── */
.chat-tirador[b-n1gkyu1x23] { position: absolute; z-index: 30; }
.chat-tirador-izq[b-n1gkyu1x23] { left: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.chat-tirador-arr[b-n1gkyu1x23] { top: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.chat-tirador-esq[b-n1gkyu1x23] { left: 0; top: 0; width: 20px; height: 20px; cursor: nwse-resize; }
.chat-tirador-esq[b-n1gkyu1x23]::after {
    content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px;
    border-left: 2px solid #cbd5e1; border-top: 2px solid #cbd5e1; border-radius: 3px 0 0 0; transition: border-color .15s;
}
.chat-panel:hover .chat-tirador-esq[b-n1gkyu1x23]::after { border-color: #94a3b8; }
.chat-medida[b-n1gkyu1x23] {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 31; display: none;
    padding: 3px 10px; border-radius: 999px; background: rgba(15, 23, 42, .86); color: #fff;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.chat-panel.chat-midiendo .chat-medida[b-n1gkyu1x23] { display: block; }
.chat-panel.chat-midiendo[b-n1gkyu1x23] { transition: none; user-select: none; }

/* ── Tallas de un clic. Ganan a la medida a mano mientras estén elegidas (el JS la retira) ── */
.chat-panel.chat-ancho[b-n1gkyu1x23] { width: min(1100px, calc(100vw - 36px)); height: calc(100vh - 86px - 72px); }
.chat-panel.chat-pantalla[b-n1gkyu1x23] { right: 28px !important; bottom: 86px !important; width: calc(100vw - 56px); height: calc(100vh - 86px - 72px); }
.chat-panel.chat-ancho .chat-tirador[b-n1gkyu1x23],
.chat-panel.chat-pantalla .chat-tirador[b-n1gkyu1x23] { display: none; }

.chat-talla[b-n1gkyu1x23] {
    width: 34px; height: 34px; border-radius: var(--r-pill); border: none; background: transparent;
    color: var(--c-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.chat-talla:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }
.chat-talla .chat-ico[b-n1gkyu1x23] { font-size: 20px; }

/* ── Cabecera propia de la conversación: foto o icono, nombre y tipo, opciones y minimizar ── */
.chat-conv-cab[b-n1gkyu1x23] {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 56px; padding: 8px 12px;
    background: var(--c-cab); border-bottom: 1px solid var(--c-cab-borde);
}
.chat-conv-avatar[b-n1gkyu1x23] {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--r-pill); display: inline-flex;
    align-items: center; justify-content: center; background: var(--c-accent-soft); color: var(--c-accent);
    font-weight: 800; font-size: 15px; background-size: cover; background-position: center;
}
.chat-conv-avatar .material-symbols-rounded[b-n1gkyu1x23] { font-size: 20px; }
.chat-conv-textos[b-n1gkyu1x23] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.chat-conv-titulo[b-n1gkyu1x23] { font-weight: 750; font-size: 14.5px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-sub[b-n1gkyu1x23] { font-size: 12px; color: var(--c-text-2); }
/* Los botones viven ya DENTRO de la cabecera: dejan de flotar sobre la de Syncfusion. */
.chat-conv-cab .chat-conv-options[b-n1gkyu1x23],
.chat-conv-cab .chat-conv-minimizar[b-n1gkyu1x23] { position: static; flex: 0 0 auto; }
.chat-conv-volver[b-n1gkyu1x23] {
    display: none; flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-pill); border: none;
    background: transparent; color: var(--c-text); cursor: pointer; align-items: center; justify-content: center;
}
.chat-conv-volver:hover[b-n1gkyu1x23] { background: var(--c-surface); }
.chat-conv-volver .chat-ico[b-n1gkyu1x23] { font-size: 22px; }

/* Grupos, departamentos y el General sin foto: su icono. */
.chat-thread-avatar[b-n1gkyu1x23] { background-size: cover; background-position: center; }
.chat-thread-avatar-ico[b-n1gkyu1x23] { font-size: 20px; }

/* ── Pantallas estrechas: el chat ocupa la pantalla y funciona como WhatsApp ──
   Primero la lista de conversaciones a todo lo ancho; al tocar una, la conversación ocupa su sitio y «←»
   vuelve a la lista. Sin tiradores, sin tallas y sin la columna del usuario: no caben y no hacen falta. */
@media (max-width: 700px) {
    .chat-panel[b-n1gkyu1x23] {
        inset: 0 !important; width: 100vw !important; height: 100dvh !important;
        border-radius: 0; border: none; z-index: 10050;
    }
    .chat-panel.chat-ancho[b-n1gkyu1x23], .chat-panel.chat-pantalla[b-n1gkyu1x23] { right: 0; }
    .chat-tirador[b-n1gkyu1x23], .chat-medida[b-n1gkyu1x23], .chat-talla[b-n1gkyu1x23] { display: none !important; }
    .chat-leftbar[b-n1gkyu1x23], .chat-sidebar-resizer[b-n1gkyu1x23] { display: none; }
    .chat-layout .chat-sidebar[b-n1gkyu1x23] { width: 100% !important; max-width: none; flex: 1 1 auto; border-right: none; }
    .chat-layout .chat-main[b-n1gkyu1x23] { display: none; }
    .chat-layout.con-hilo .chat-sidebar[b-n1gkyu1x23] { display: none; }
    .chat-layout.con-hilo .chat-main[b-n1gkyu1x23] { display: flex; flex: 1 1 auto; }
    .chat-conv-volver[b-n1gkyu1x23] { display: inline-flex; }
    .chat-conv-cab .chat-conv-minimizar[b-n1gkyu1x23] { display: none; }
}

/* ── Tamaño del texto de la conversación (ajustes): solo los mensajes, con la escala elegida ── */
.chat-main[b-n1gkyu1x23]  .msg-tpl-text { font-size: calc(13.5px * var(--chat-escala, 1)); }
.chat-main[b-n1gkyu1x23]  .msg-author-name { font-size: calc(11.5px * var(--chat-escala, 1)); }
.chat-main[b-n1gkyu1x23]  .msg-tpl-time { font-size: calc(10.5px * var(--chat-escala, 1)); }
.chat-main[b-n1gkyu1x23]  .chat-day-sep span { font-size: calc(11.5px * var(--chat-escala, 1)); }

/* ── Menú «⋯» de la conversación ── */
.chat-conv-cab[b-n1gkyu1x23] { position: relative; }
.chat-conv-options.activo[b-n1gkyu1x23] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }
.chat-menu-hilo[b-n1gkyu1x23] {
    position: absolute; top: calc(100% - 4px); right: 12px; z-index: 40; min-width: 250px; max-width: calc(100% - 24px);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--sh-3);
    padding: 6px; display: flex; flex-direction: column;
}
.chat-menu-hilo > button[b-n1gkyu1x23] {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent;
    border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-text); text-align: left; cursor: pointer;
}
.chat-menu-hilo > button .material-symbols-rounded[b-n1gkyu1x23] { font-size: 20px; color: var(--c-text-2); }
.chat-menu-hilo > button:hover[b-n1gkyu1x23] { background: var(--c-surface-2); }
.chat-menu-hilo > button.peligro[b-n1gkyu1x23], .chat-menu-hilo > button.peligro .material-symbols-rounded[b-n1gkyu1x23] { color: #b42318; }
.chat-menu-hilo > button.peligro:hover[b-n1gkyu1x23] { background: #fef3f2; }
.chat-menu-pregunta[b-n1gkyu1x23] { padding: 8px 8px 4px; display: flex; flex-direction: column; gap: 6px; }
.chat-menu-pregunta-tit[b-n1gkyu1x23] { font-weight: 750; font-size: 14px; color: var(--c-text); }
.chat-menu-pregunta-txt[b-n1gkyu1x23] { font-size: 12.5px; color: var(--c-text-2); line-height: 1.45; }
.chat-menu-pregunta-botones[b-n1gkyu1x23] { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.chat-menu-pregunta-botones button[b-n1gkyu1x23] {
    height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface);
    font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; color: var(--c-text);
}
.chat-menu-pregunta-botones button.confirmar[b-n1gkyu1x23] { background: #d92d20; border-color: #d92d20; color: #fff; }
.chat-menu-pregunta-botones button:disabled[b-n1gkyu1x23] { opacity: .6; cursor: default; }

/* ── Ajustes del chat (la rueda) ── */
.chat-panel-body[b-n1gkyu1x23] { position: relative; }
.chat-leftbar-btn.activo[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }
.chat-ajustes[b-n1gkyu1x23] {
    position: absolute; left: 68px; bottom: 12px; z-index: 40; width: 290px; max-width: calc(100% - 24px);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--sh-3);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.chat-ajustes-cab[b-n1gkyu1x23] { display: flex; align-items: center; justify-content: space-between; font-weight: 750; font-size: 14px; color: var(--c-text); }
.chat-ajustes-cerrar[b-n1gkyu1x23] { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--c-text-2); display: inline-flex; align-items: center; justify-content: center; }
.chat-ajustes-cerrar:hover[b-n1gkyu1x23] { background: var(--c-surface-2); }
.chat-ajustes-fila[b-n1gkyu1x23] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-ajustes-etiqueta[b-n1gkyu1x23] { font-size: 13px; font-weight: 600; color: var(--c-text); }
.chat-ajustes-tamano[b-n1gkyu1x23] { display: inline-flex; align-items: center; gap: 6px; }
.chat-ajustes-tamano button[b-n1gkyu1x23] {
    width: 36px; height: 32px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface);
    font: inherit; font-weight: 750; cursor: pointer; color: var(--c-text);
}
.chat-ajustes-tamano button:hover:not(:disabled)[b-n1gkyu1x23] { border-color: var(--c-accent); color: var(--c-accent); }
.chat-ajustes-tamano button:disabled[b-n1gkyu1x23] { opacity: .4; cursor: default; }
.chat-ajustes-valor[b-n1gkyu1x23] { min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-text); }
.chat-ajustes-muestra[b-n1gkyu1x23] {
    padding: 8px 10px; border-radius: 10px; background: var(--c-surface-2); color: var(--c-text);
    font-size: calc(13.5px * var(--chat-escala, 1)); line-height: 1.45;
}
.chat-ajustes-reset[b-n1gkyu1x23] { align-self: flex-start; border: none; background: transparent; color: var(--c-accent); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; padding: 0; }
.chat-ajustes-movil[b-n1gkyu1x23] {
    display: none; width: 34px; height: 34px; margin-left: auto; margin-right: 6px; border-radius: var(--r-pill); border: none;
    background: transparent; color: var(--c-text-2); cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 700px) {
    .chat-ajustes-movil[b-n1gkyu1x23] { display: inline-flex; }
    .chat-ajustes[b-n1gkyu1x23] { left: 12px; right: 12px; bottom: auto; top: 60px; width: auto; }
}

/* ── Mover el panel: se agarra por la cabecera (no en pantalla completa ni en pantallas estrechas) ── */
.chat-panel:not(.chat-pantalla) .chat-panel-header[b-n1gkyu1x23] { cursor: grab; user-select: none; }
.chat-panel.chat-moviendo[b-n1gkyu1x23] { transition: none; user-select: none; }
.chat-panel.chat-moviendo .chat-panel-header[b-n1gkyu1x23] { cursor: grabbing; }
@media (max-width: 700px) { .chat-panel .chat-panel-header[b-n1gkyu1x23] { cursor: default; } }

/* ── Estado personal: un punto sobre la foto (verde disponible, rojo ocupado, ámbar ausente) ── */
.chat-user-avatar[b-n1gkyu1x23], .chat-thread-avatar[b-n1gkyu1x23], .chat-conv-avatar[b-n1gkyu1x23] { position: relative; overflow: visible; }
.chat-estado-punto[b-n1gkyu1x23] {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--c-surface); box-sizing: content-box; background: var(--c-muted);
}
.chat-estado-punto.en-linea[b-n1gkyu1x23] { position: static; display: inline-block; width: 9px; height: 9px; border: none; margin-right: 6px; flex: 0 0 auto; }
.chat-estado-punto.est-disponible[b-n1gkyu1x23] { background: #22c55e; }
.chat-estado-punto.est-ocupado[b-n1gkyu1x23] { background: #ef4444; }
.chat-estado-punto.est-ausente[b-n1gkyu1x23] { background: #f59e0b; }

/* ── Ajustes: estado y fondo ── */
.chat-ajustes-bloque[b-n1gkyu1x23] { display: flex; flex-direction: column; gap: 7px; }
.chat-ajustes-opciones[b-n1gkyu1x23] { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-ajustes-opciones button[b-n1gkyu1x23] {
    flex: 1 1 0; min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 12.5px; font-weight: 650;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; white-space: nowrap;
}
.chat-ajustes-opciones button .material-symbols-rounded[b-n1gkyu1x23] { font-size: 17px; }
.chat-ajustes-opciones button:hover[b-n1gkyu1x23] { border-color: var(--c-accent); }
.chat-ajustes-opciones button.activo[b-n1gkyu1x23] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }
.chat-ajustes-opciones.compactas[b-n1gkyu1x23] { flex: 0 0 auto; }
.chat-ajustes-opciones.compactas button[b-n1gkyu1x23] { flex: 0 0 auto; padding: 0 10px; }
.chat-ajustes-nota[b-n1gkyu1x23] { font-size: 11.5px; line-height: 1.4; color: var(--c-text-2); }
.chat-ajustes[b-n1gkyu1x23] { width: 320px; }

/* ── Responder: la cita dentro del mensaje y la barra encima de la caja ── */
[b-n1gkyu1x23] .msg-cita {
    display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px; padding: 5px 9px;
    border-left: 3px solid var(--c-accent); border-radius: 6px; background: var(--c-accent-softer);
    max-width: 100%; min-width: 0;
}
[b-n1gkyu1x23] .msg-cita-autor { font-size: calc(11.5px * var(--chat-escala, 1)); font-weight: 750; color: var(--c-accent); }
[b-n1gkyu1x23] .msg-cita-texto {
    font-size: calc(12.5px * var(--chat-escala, 1)); color: var(--c-text-2);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chat-respondiendo[b-n1gkyu1x23] {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--c-border);
    background: var(--c-surface-2); color: var(--c-accent);
}
.chat-respondiendo-textos[b-n1gkyu1x23] {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 9px; border-left: 3px solid var(--c-accent);
}
.chat-respondiendo-autor[b-n1gkyu1x23] { font-size: 12px; font-weight: 750; }
.chat-respondiendo-texto[b-n1gkyu1x23] { font-size: 12.5px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-respondiendo-x[b-n1gkyu1x23] {
    width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--c-text-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-respondiendo-x:hover[b-n1gkyu1x23] { background: var(--c-surface-3); color: var(--c-text); }

/* ── Fondo oscuro (ajustes): mismos tokens con otros valores, y lo que Syncfusion pinta por su cuenta ── */
.chat-panel.chat-oscuro[b-n1gkyu1x23] {
    --c-accent: #60a5fa;
    --c-accent-strong: #3b82f6;
    --c-accent-soft: #1e2b47;
    --c-accent-softer: #19233a;
    --c-text: #e5e7eb;
    --c-text-2: #a3adbd;
    --c-muted: #6b7686;
    --c-surface: #161d29;
    --c-surface-2: #111722;
    --c-surface-3: #222c3b;
    --c-border: #2a3443;
    --c-border-2: #232c3a;
    --c-cab: #1b2331;
    --c-cab-borde: #2a3443;
    --c-danger-soft: #3a1f22;
    --sh-1: 0 1px 2px rgba(0,0,0,.35);
    --sh-2: 0 6px 16px rgba(0,0,0,.4);
    --sh-3: 0 18px 50px rgba(0,0,0,.55);
    color-scheme: dark;
}
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-chat-ui,
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-chat-ui .e-chat-content,
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-chat-ui .e-message-wrapper,
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-chat-ui .e-footer { background: var(--c-surface-2) !important; color: var(--c-text); }
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-message-group.e-left .msg-tpl { background: var(--c-surface); }
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .e-message-group.e-right .msg-tpl { background: var(--c-surface-3); }
.chat-panel.chat-oscuro[b-n1gkyu1x23]  .chat-day-sep span { background: var(--c-surface-3); color: var(--c-text-2); }
.chat-panel.chat-oscuro .chat-menu-hilo > button.peligro:hover[b-n1gkyu1x23] { background: var(--c-danger-soft); }

/* ── Fotos con el UserAvatar de la aplicación: la caja pone el sitio y el tamaño, la foto la pinta él ── */
.con-foto[b-n1gkyu1x23], [b-n1gkyu1x23] .con-foto { background: none !important; color: inherit; overflow: visible !important; }
[b-n1gkyu1x23] .msg-author-avatar.con-foto { box-shadow: none; }
[b-n1gkyu1x23] .msg-reader.con-foto { border: none; box-shadow: none; }
.chat-pick-estado[b-n1gkyu1x23] { margin-left: auto; font-size: 11.5px; font-weight: 650; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-2); }
.chat-pick-estado[b-n1gkyu1x23]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted); }
.chat-pick-estado.est-disponible[b-n1gkyu1x23]::before { background: #22c55e; }
.chat-pick-estado.est-ocupado[b-n1gkyu1x23]::before { background: #ef4444; }
.chat-pick-estado.est-ausente[b-n1gkyu1x23]::before { background: #f59e0b; }
/* _content/ErpPowergest/Presentation/Shared/Column/Columna.razor.rz.scp.css */
.column[b-3xac9v0fie] {
    background: #ffffff;
    width: 288px;
    min-width: 288px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    /* 8px a cada lado de las tarjetas. A la derecha solo 2px porque .cards-area reserva siempre los 6px
       de su barra de scroll (scrollbar-gutter): 2 + 6 = 8, simétrico con la izquierda. La cabecera y el
       pie, que no tienen esa barra, compensan los 6px con su propio padding. */
    padding: 12px 2px 12px 8px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    animation: columnIn-b-3xac9v0fie 0.34s ease;
}

/* Entrada: solo se anima la columna nueva (se usa @key en BoardDetail). */
@keyframes columnIn-b-3xac9v0fie {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Salida: colapsa el ancho y se desvanece antes de quitarla del DOM (borrado diferido). */
.column.saliendo[b-3xac9v0fie] {
    animation: columnOut-b-3xac9v0fie 0.36s ease forwards;
    pointer-events: none;
    overflow: hidden;
}

@keyframes columnOut-b-3xac9v0fie {
    from {
        opacity: 1;
        transform: scale(1);
        width: 288px;
        min-width: 288px;
        padding-left: 8px;
        padding-right: 2px;
    }

    to {
        opacity: 0;
        transform: scale(0.96);
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Sin cursor de arrastre: la cabecera sigue arrastrando la columna entera, pero el gesto que se
   insinúa es el del título (clic para renombrar), que es el que se usa a diario. */
.column-header[b-3xac9v0fie] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 10px 12px 4px;
    font-weight: 650;
    font-size: 0.9rem;
    color: #111827;
    /* Cabecera y pie NO se encogen: cuando la columna llega a su tope, el único que cede
       es el área de tarjetas, que es la que tiene el scroll. */
    flex-shrink: 0;
}

/* La columna que se está arrastrando: misma atenuación que una tarjeta al arrastrarla. */
.column.columna-arrastrada[b-3xac9v0fie] {
    opacity: 0.5;
    border: 2px dashed #2563eb;
}

/* El título, su cuadro de edición y el texto que lo mide comparten caja EXACTA: mismo alto, padding y
   borde (transparente en el título, que reserva el sitio del azul del cuadro). Sin esto, entrar en
   edición desplazaría la cabecera y con ella todas las tarjetas de la columna. El padding izquierdo se
   compensa con el margen negativo.

   Que el ::after entre aquí no es cosmético: es el que estira la celda, así que cualquier diferencia de
   padding, borde o interlineado con el textarea se traduce en un alto equivocado. */
.column-title[b-3xac9v0fie],
.column-title-input[b-3xac9v0fie],
.column-title-edit[b-3xac9v0fie]::after {
    box-sizing: border-box;
    line-height: 1.4;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.column-title[b-3xac9v0fie],
.column-title-edit[b-3xac9v0fie] {
    margin-left: -6px;
    margin-right: auto;
}

/* El nombre salta de línea en vez de cortarse: en 274 px de ancho caben unos 28 caracteres, y con
   nowrap cualquier nombre normal acababa en puntos suspensivos.

   Con tope de TRES líneas —unos 84 caracteres—, que cubre casi todo lo que admite el campo (100). El
   tope existe para que una columna con el nombre largo no se lleve media cabecera de más y arranque sus
   tarjetas mucho más abajo que sus vecinas. Pasado el tope sí se corta, y el nombre entero se ve en el
   title. */
.column-title[b-3xac9v0fie] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    /* Sin esto, una palabra sola más ancha que la columna (una URL, un nombre sin espacios) desbordaría
       en horizontal en lugar de partirse. */
    overflow-wrap: anywhere;
}

    /* Se renombra de un clic: se insinúa al pasar por encima. */
    .column-title.editable[b-3xac9v0fie] {
        cursor: text;
        transition: background 0.15s ease;
    }

        .column-title.editable:hover[b-3xac9v0fie] {
            background: #f1f5f9;
        }

/* Rejilla de una sola celda: el textarea y el texto de medida se superponen en ella. El textarea no
   sabe crecer solo —es una caja de alto fijo— así que el alto lo pone el ::after, que sí es texto de
   verdad, y el textarea se estira para llenar la celda. */
.column-title-edit[b-3xac9v0fie] {
    display: grid;
    flex: 1;
    min-width: 0;
}

    .column-title-edit[b-3xac9v0fie]::after,
    .column-title-edit > .column-title-input[b-3xac9v0fie] {
        grid-area: 1 / 1 / 2 / 2;
    }

    /* El espacio final mantiene el alto cuando la última línea acaba en un salto, y evita que la caja
       encoja de golpe al borrar la última letra de una línea. */
    .column-title-edit[b-3xac9v0fie]::after {
        content: attr(data-valor) " ";
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        visibility: hidden;
    }

/* Los controles de formulario no heredan la tipografía de la cabecera: hay que repetirla. El ::after sí
   la hereda, así que estos tres valores son justo los que lo igualan a él. */
.column-title-input[b-3xac9v0fie] {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    color: #111827;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    /* Sin resize el usuario podría estirarlo a mano y desalinear la cabecera; sin overflow oculto
       aparecería la barra vertical del textarea mientras el ::after aún no ha crecido. */
    resize: none;
    overflow: hidden;
}

/* Miembros plantados en la columna (autoservicio): avatares apilados, clicables. */
.column-miembros-wrapper[b-3xac9v0fie] {
    position: relative;
    margin: 0 6px;
    flex-shrink: 0;
}

.column-miembros[b-3xac9v0fie] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 2px;
    border-radius: 999px;
    cursor: pointer;
}

    .column-miembros:hover[b-3xac9v0fie] {
        background: #eef2ff;
    }

.column-miembros-backdrop[b-3xac9v0fie] {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: transparent;
}

.column-miembros-popover[b-3xac9v0fie] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    padding: 8px;
}

.column-miembros-popover-title[b-3xac9v0fie] {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.column-miembros-fila[b-3xac9v0fie] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
}

.column-miembros-nombre[b-3xac9v0fie] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.column-miembro-avatar[b-3xac9v0fie] {
    width: 20px;
    height: 20px;
    margin-left: -5px;
    border-radius: 50%;
    background: #4f46e5;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .column-miembro-avatar:first-child[b-3xac9v0fie] {
        margin-left: 0;
    }

    /* El propio usuario resaltado, para ver de un vistazo si estás en la columna. */
    .column-miembro-avatar.yo[b-3xac9v0fie] {
        background: #059669;
        box-shadow: 0 0 0 2px #a7f3d0;
    }

    .column-miembro-avatar.mas[b-3xac9v0fie] {
        background: #cbd5e1;
        color: #334155;
    }

.column-header-actions[b-3xac9v0fie] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.column-menu-wrapper[b-3xac9v0fie] {
    position: relative;
}

.column-dropdown[b-3xac9v0fie] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    min-width: 150px;
    z-index: 100;
    overflow: hidden;
    padding: 4px;
}

.column-dropdown-item[b-3xac9v0fie] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .column-dropdown-item .material-symbols-rounded[b-3xac9v0fie] {
        font-size: 18px;
        color: #9ca3af;
    }

    .column-dropdown-item.danger[b-3xac9v0fie] {
        color: #dc2626;
    }

        .column-dropdown-item.danger .material-symbols-rounded[b-3xac9v0fie] {
            color: #dc2626;
        }

    .column-dropdown-item:hover[b-3xac9v0fie] {
        background: #f3f4f6;
    }

        .column-dropdown-item.danger:hover[b-3xac9v0fie] {
            background: #fef2f2;
        }

.badge[b-3xac9v0fie] {
    background: #f3f4f6;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.btn-column-menu[b-3xac9v0fie] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 3px;
    border-radius: 7px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-column-menu .material-symbols-rounded[b-3xac9v0fie] {
        font-size: 19px;
    }

    .btn-column-menu:hover[b-3xac9v0fie] {
        background: #f3f4f6;
        color: #374151;
    }

/* ===== ÁREA DE TARJETAS ===== */
/* Es el ÚNICO hijo elástico de la columna: absorbe el alto sobrante y, cuando las tarjetas no caben,
   es el que se encoge (min-height:0) y saca el scroll. Sus hijos —tarjetas y huecos de drop— llevan
   flex-shrink:0: si pudieran encogerse, el navegador los aplastaría hasta hacerlos caber en vez de
   desbordar, y entonces ni se leería la tarjeta ni aparecería nunca la barra. */
.cards-area[b-3xac9v0fie] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Hueco de la barra reservado siempre: sin esto, las tarjetas se reajustan de ancho en el momento
       en que la columna pasa a tener scroll. */
    scrollbar-gutter: stable;
    /* Firefox no entiende ::-webkit-scrollbar; sin estas dos pinta la barra gruesa del sistema. */
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
    /* Colchón para que el borde/elevación de la tarjeta superior no se recorte al hacer hover dentro
       del área con scroll. Abajo NO lleva: esos píxeles quedaban por debajo de .cards-fade (que se
       pega al borde del scrollport) y por ahí asomaba el resto de la última tarjeta. */
    padding: 4px 2px 0;
    margin: 0 -2px;
    /* Contexto de apilamiento propio. Sin esto, el z-index de .cards-fade (5) no se queda dentro de la
       columna: sube hasta la raíz y compite con el resto de la aplicación, incluido el sidebar (z-index
       4). El resultado era que el degradado del final de la columna se pintaba ENCIMA del menú de
       perfil. Con isolate, los z-index de dentro solo se ordenan entre ellos. */
    isolation: isolate;
}

    .cards-area[b-3xac9v0fie]::-webkit-scrollbar {
        width: 6px;
    }

    .cards-area[b-3xac9v0fie]::-webkit-scrollbar-track {
        background: transparent;
    }

    .cards-area[b-3xac9v0fie]::-webkit-scrollbar-thumb {
        background-color: #e5e7eb;
        border-radius: 4px;
    }

        .cards-area[b-3xac9v0fie]::-webkit-scrollbar-thumb:hover {
            background-color: #cbd5e1;
        }

/* Aviso de "hay más tarjetas abajo".
   Va DENTRO del área con scroll y en `position:sticky`, no como fondo de .cards-area: las tarjetas son
   blancas y opacas, así que un degradado de fondo quedaría tapado por ellas y solo asomaría por las
   juntas. El margen negativo hace que no ocupe alto propio (se superpone al final de la última tarjeta
   visible) y `pointer-events:none` lo deja fuera del arrastre.

   Se apaga solo con `animation-timeline: scroll()`: el navegador liga el fotograma a la posición del
   scroll, sin JS ni escuchar eventos. La opacidad BASE es 0 a propósito: si el navegador no soporta
   animaciones ligadas al scroll —o si la columna no tiene desbordamiento y la línea de tiempo queda
   inactiva— no se aplican los fotogramas y el degradado sencillamente no se ve, que es justo lo que
   toca cuando no hay nada más abajo. */
.cards-fade[b-3xac9v0fie] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    /* Alto suficiente para tragarse una fila entera de la tarjeta (el chip de contacto mide ~20px):
       con una banda corta el degradado seguía casi transparente justo donde estaba el texto y se leía
       igual. Llega al color de la columna, opaco, al 55%, así que la mitad de abajo tapa del todo. Tiene
       que ser el MISMO color que .column: si no, se ve una banda de otro tono al pie. */
    height: 40px;
    margin-top: -40px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgba(241, 242, 244, 0), #f1f2f4 55%, #f1f2f4);
    animation: fundidoFinalScroll-b-3xac9v0fie linear both;
    animation-timeline: scroll(nearest block);
}

/* Encendido durante casi todo el recorrido; se apaga en el último tramo, al descubrirse el final. */
@keyframes fundidoFinalScroll-b-3xac9v0fie {
    0%, 85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Pie de la columna: queda anclado abajo, fuera del scroll de .cards-area. */
.column-footer[b-3xac9v0fie] {
    flex-shrink: 0;
    padding-top: 6px;
    /* El hueco de la barra de scroll que .cards-area reserva y el pie no tiene: así el botón de añadir
       acaba en el mismo borde que las tarjetas. */
    padding-right: 6px;
}

.btn-add-card[b-3xac9v0fie] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    /* El azul se propaga desde el centro: un gradiente radial que crece de tamaño (0 → cubre). */
    background-color: transparent;
    background-image: radial-gradient(circle at center, #eff6ff 0, #eff6ff 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 0%;
    border: 1px solid transparent;
    padding: 9px 10px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-size 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px;
}

    .btn-add-card .material-symbols-rounded[b-3xac9v0fie] {
        font-size: 18px;
        transition: transform 0.18s ease;
    }

    .btn-add-card:hover[b-3xac9v0fie] {
        background-size: 250% 250%;
        color: #2563eb;
        border-color: #bfdbfe;
        box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
    }

        .btn-add-card:hover .material-symbols-rounded[b-3xac9v0fie] {
            transform: rotate(90deg);
        }

    .btn-add-card:active[b-3xac9v0fie] {
        background-image: radial-gradient(circle at center, #dbeafe 0, #dbeafe 100%);
    }

.card-form[b-3xac9v0fie] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

    .card-form textarea[b-3xac9v0fie] {
        width: 100%;
        padding: 10px 12px;
        border-radius: 9px;
        border: 1px solid #d1d5db;
        font-size: 14px;
        color: #111827;
        outline: none;
        resize: none;
        font-family: inherit;
        box-sizing: border-box;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .card-form textarea:focus[b-3xac9v0fie] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }

/* ===== DRAG & DROP ===== */

/* Huecos donde soltar la tarjeta. Solo existen mientras se arrastra (los pinta el componente), uno entre
   cada dos tarjetas más el de arriba del todo y el del final, de modo que se puede dejar la tarjeta
   exactamente donde se quiera y no solo "en la columna".

   La altura es FIJA, encendido o apagado: si el hueco creciera al resaltarse, el propio crecimiento
   apartaría la tarjeta de debajo del puntero, el puntero saldría del hueco y la línea se pondría a
   parpadear. Lo que cambia al activarse es solo la línea de dentro. */
/* Hueco INACTIVO: footprint CERO (14px de zona de detección menos 7px de margen a cada lado). Solo es
   una zona para captar el puntero; no separa las tarjetas, así la columna no se desplaza al arrastrar. */
.drop-zone[b-3xac9v0fie] {
    height: 14px;
    margin: -7px 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    border-radius: 8px;
    /* Como las tarjetas: el hueco reserva su alto exacto y no cede ante el resto (ver .cards-area). */
    flex-shrink: 0;
}

.drop-zone-linea[b-3xac9v0fie] {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: transparent;
}

/* Hueco activo entre tarjetas: caja punteada del tamaño EXACTO de la tarjeta que se arrastra.
   Lo enciende arrastreTarjetas.js con `data-activa` —no con una clase, que Blazor reescribe al
   repintar— y el alto sale de la variable que ese mismo JS pone en la columna. */
.drop-zone[data-activa][b-3xac9v0fie] {
    margin: 6px 0;
    height: var(--alto-arrastrada, 44px);
    min-height: 44px;   /* respaldo si no se pudo medir la tarjeta */
    border: 2px dashed #2563eb;
    background: rgba(37, 99, 235, 0.06);
    border-radius: 10px;
    animation: dropPulse-b-3xac9v0fie 1.3s ease-in-out infinite alternate;
}

    .drop-zone[data-activa] .drop-zone-linea[b-3xac9v0fie] {
        display: none;
    }

/* Columna vacía: el hueco ocupa el tamaño de la tarjeta (altura por style inline). */
.drop-zone.vacia[b-3xac9v0fie] {
    margin: 0 0 8px;
    min-height: 60px;   /* respaldo si no se pudo medir la tarjeta */
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
}

    .drop-zone.vacia.activa[b-3xac9v0fie] {
        border-color: #2563eb;
        background: rgba(37, 99, 235, 0.06);
        animation: dropPulse-b-3xac9v0fie 1.3s ease-in-out infinite alternate;
    }

    .drop-zone.vacia .drop-zone-linea[b-3xac9v0fie] {
        display: none;
    }

/* Parpadeo muy suave del borde del hueco donde caerá la tarjeta. */
@keyframes dropPulse-b-3xac9v0fie {
    from {
        border-color: rgba(37, 99, 235, 0.30);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.00);
    }

    to {
        border-color: rgba(37, 99, 235, 0.95);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }
}

.column.drag-over[b-3xac9v0fie] {
    border: 1px solid #2563eb;
    background: #f5f8ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* ===== BOTONES FORM ===== */
.btn-confirm[b-3xac9v0fie] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

    .btn-confirm:hover[b-3xac9v0fie] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

.btn-cancel[b-3xac9v0fie] {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-cancel:hover[b-3xac9v0fie] {
        background: #f3f4f6;
        color: #111827;
    }
/* _content/ErpPowergest/Presentation/Shared/CompanyComponents/CompanyDropdown/CompanyDropdown.razor.rz.scp.css */
/*------------------------
    Seccion de empresas
-------------------------*/
/* Contenedor de la sección Mis Empresas */
.company-section[b-lp20w9vftd] {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    flex-direction: column;
    margin: 0px 20px 5px 20px;
}

/* Header horizontal: título a la izquierda, botón a la derecha */
.company-header[b-lp20w9vftd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Título */
.company-title[b-lp20w9vftd] {
    font-weight: 200;
    font-size: 16px;
    color: #666;
}

/* Botón desplegar/ocultar */
.toggle-company-list[b-lp20w9vftd] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #666;
    font-weight: bold;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

    .toggle-company-list:hover[b-lp20w9vftd] {
        background-color: rgba(0,0,0,0.05);
    }

    /* Rotación de la flecha al desplegar/ocultar */
    .toggle-company-list .material-symbols-rounded[b-lp20w9vftd] {
        display: inline-block;
        transition: transform 0.2s ease;
        transform: rotate(-90deg);
    }

    .toggle-company-list.open .material-symbols-rounded[b-lp20w9vftd] {
        transform: rotate(0deg);
    }

/* Lista de empresas */
.company-list[b-lp20w9vftd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

    /* Scroll por defecto casi invisible */
    .company-list[b-lp20w9vftd]::-webkit-scrollbar {
        width: 4px;
        background: transparent;
    }

    .company-list[b-lp20w9vftd]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    /* Cuando el usuario hace hover sobre la lista */
    .company-list:hover[b-lp20w9vftd]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2); /* visible al pasar el cursor */
    }

/* Para Firefox */
.company-list[b-lp20w9vftd] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    .company-list:not(:hover)[b-lp20w9vftd] {
        scrollbar-color: transparent transparent;
    }

/*--------------------------
    Agregar empresa
--------------------------  */
/* Boton de añadir empresa */
.company-add[b-lp20w9vftd] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    background-color: transparent;
    padding-bottom:4px;
}

    /* Icono + centrado */
    .company-add .add-icon[b-lp20w9vftd] {
        font-size: 20px;
        font-weight: bold;
        color: #666;
        background-color: #f2f5f9;
        border-radius: 6px;
        padding: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* Texto a la derecha del icono */
    .company-add .add-text[b-lp20w9vftd] {
        font-weight: 200;
        color: #666;
    }

    .company-add:hover .add-icon[b-lp20w9vftd] {
        background-color: #e0ebf5;
    }

/*------------------------
    ITEMS DE LA LISTA
------------------------*/
.company-item[b-lp20w9vftd] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    background-color: transparent;
    padding-bottom:4px;
}

    /* Icono + centrado */
    .company-item .add-icon[b-lp20w9vftd] {
        font-size: 20px;
        font-weight: bold;
        color: #666;
        background-color: #f2f5f9;
        border-radius: 6px;
        padding: 10px;
    }

    /* Texto a la derecha del icono */
    .company-item .add-text[b-lp20w9vftd] {
        font-weight: 200;
        color: #666;
    }

    .company-item:hover .add-icon[b-lp20w9vftd] {
        background-color: #e0ebf5;
    }

    .company-item .company-text[b-lp20w9vftd] {
        font-weight: 200;
        color: #666;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

.company-icon-wrapper[b-lp20w9vftd] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    overflow: hidden;
    flex-shrink: 0;
}

    /* Imagen */
    .company-icon-wrapper .company-icon[b-lp20w9vftd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease-in-out;
        display: block;
    }

    /* Overlay oscuro */
    .company-icon-wrapper[b-lp20w9vftd]::after {
        content: "";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background-color: rgba(0,0,0,0);
        transition: background-color 0.2s ease;
    }

/* Hover */
.company-item:hover .company-icon-wrapper[b-lp20w9vftd]::after {
    background-color: rgba(0,0,0,0.2); /* ajuste de opacidad */
}
/* _content/ErpPowergest/Presentation/Shared/CompanyComponents/CompanyList/CompanyList.razor.rz.scp.css */
/* Lista de empresas */
.company-list[b-lbqlwbesbc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    flex-grow: 1;
    min-height: 0;
    max-height:50vh;
    overflow-y: auto;
}

    /* Scroll por defecto casi invisible */
    .company-list[b-lbqlwbesbc]::-webkit-scrollbar {
        width: 4px;
        background: transparent;
    }

    .company-list[b-lbqlwbesbc]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0);
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    /* Cuando el usuario hace hover sobre la lista */
    .company-list:hover[b-lbqlwbesbc]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
    }

/* Para Firefox */
.company-list[b-lbqlwbesbc] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    .company-list:not(:hover)[b-lbqlwbesbc] {
        scrollbar-color: transparent transparent;
    }

/*------------------------
    ITEMS DE LA LISTA
------------------------*/
.company-item[b-lbqlwbesbc] {
    display: flex;
    align-items: center;
    gap: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    background-color: transparent;
    padding: 2px;
    transition: background-color 0.2s ease;
    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

    .company-item:hover[b-lbqlwbesbc] {
        background-color: #e0e0e0;
    }

    /* Icono + centrado */
    .company-item .add-icon[b-lbqlwbesbc] {
        font-size: 20px;
        font-weight: bold;
        color: #666;
        background-color: #f2f5f9;
        border-radius: 6px;
        padding: 10px;
    }

    /* Texto a la derecha del icono */
    .company-item .add-text[b-lbqlwbesbc] {
        font-weight: 200;
        color: #666;
    }

    .company-item:hover .add-icon[b-lbqlwbesbc] {
        background-color: #e0ebf5;
    }

    .company-item .company-text[b-lbqlwbesbc] {
        font-size:16px;
        font-weight: 300;
        color: #666;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

.company-icon-wrapper[b-lbqlwbesbc] {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    overflow: hidden;
    flex-shrink: 0;
}

    /* Imagen */
    .company-icon-wrapper .company-icon[b-lbqlwbesbc] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease-in-out;
        display: block;
    }

    /* Overlay oscuro */
    .company-icon-wrapper[b-lbqlwbesbc]::after {
        content: "";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background-color: rgba(0,0,0,0);
        transition: background-color 0.2s ease;
    }

/* Hover */
.company-item:hover .company-icon-wrapper[b-lbqlwbesbc]::after {
    background-color: rgba(0,0,0,0.1); /* ajuste de opacidad */
}

.modal-content[b-lbqlwbesbc] {
    display: flex;
    flex-direction: column;
    border:0px;
    gap: 16px; /* espacio entre company-list y modal-actions */
}


/* ---- BOTONES GENERALES ---- */
.modal-actions[b-lbqlwbesbc] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn[b-lbqlwbesbc] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    /* Efecto en hover */
    .btn:hover[b-lbqlwbesbc] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* Efecto al hacer click */
    .btn:active[b-lbqlwbesbc] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }


/* Primario (Crear - azul profesional) */
.btn-primary[b-lbqlwbesbc] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-primary:hover[b-lbqlwbesbc] {
        background: #f3f4f6;
    }

/* Secundario (Cancelar - gris con texto blanco) */
.btn-secondary[b-lbqlwbesbc] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-secondary:hover[b-lbqlwbesbc] {
        background: #4b5563;
    }
/* _content/ErpPowergest/Presentation/Shared/CompanyComponents/CompanySelectedDropdown/CompanySelectedDropdown.razor.rz.scp.css */
.company-container[b-f7dq8st1b0] {
    display: flex;
    position:relative;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    padding:5px 9px;
    border-radius:8px;
    user-select: none;
    cursor:pointer;
}

    .company-container:hover[b-f7dq8st1b0] {
        background-color: #e0e0e0;
    }

.text[b-f7dq8st1b0] {
    font-size: 14px;
    color:#666;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.arrow-icon[b-f7dq8st1b0] {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #999;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 350, 'GRAD' 0, 'opsz' 48;
}

/*======== DROPDOWN ==========*/
.dropdown-menu[b-f7dq8st1b0] {
    position: absolute;
    top: 100%;
    left: 10px;
    margin-top: 6px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    min-width: 150px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    padding:8px 0px;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.2,.8,.2,1);
}
    .dropdown-menu.open[b-f7dq8st1b0] {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .dropdown-menu a[b-f7dq8st1b0] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 8px 20px 8px 12px;
        color: #666;
        text-decoration: none;
        transition: background .2s ease;
    }


        .dropdown-menu a:hover[b-f7dq8st1b0] {
            background: #f0f0f0; /* hover suave pro */
        }

.dropdown-item[b-f7dq8st1b0] {
    display: flex;
    width:100%;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding: 0px 0px 0px 10px;
}

.icon[b-f7dq8st1b0] {
    font-size: 24px;
    line-height: 1;
    color: gray;
    padding-right: 5px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.dropdown-text[b-f7dq8st1b0] {
    font-size: 16px;
    font-weight: 200;
    line-height: 1;
    color: #666;
}

/*===== SUB DROPDOWN ======*/
/* Item con submenu */
.has-submenu[b-f7dq8st1b0] {
    position: relative;
}

/* Flecha derecha */
.submenu-arrow[b-f7dq8st1b0] {
    margin-left: auto;
    font-size: 20px;
    transition: transform .2s ease;
}

/* Submenu lateral.
   Sale por la DERECHA del menu (left:100%), fuera de la caja del padre: ningun ancestro puede
   llevar overflow oculto o desaparece (ver site.css, «DISENO MENU EMPRESA»). Sin separacion
   respecto al item: un hueco entre ambos dispara el mouseleave del item y el submenu parpadea. */
.submenu[b-f7dq8st1b0] {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.98);
    padding: 8px;
    border: 1px solid #e3eaf3;
    border-radius: 18px;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04);
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

    /* Estado abierto */
    .submenu.open[b-f7dq8st1b0] {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
    }

/* Se abre tambien al pasar el raton, y eso se hace AQUI, en CSS.
   El hover ya estuvo una vez y hubo que quitarlo, pero lo que fallaba no era el hover: era hacerlo con
   `mouseenter`/`mouseleave` de Blazor, que en Server son un viaje al servidor por cada movimiento del
   raton; quien iba en diagonal hacia el submenu salia del item antes de que llegara la respuesta y el
   `mouseleave` lo cerraba. Aqui no hay ida y vuelta: lo pinta el navegador, instantaneo.

   Solo dentro del menu ya desplegado. Mientras esta plegado lleva `pointer-events: none` y ni siquiera
   es blanco de hover, pero se escribe la condicion porque es la de verdad, no un efecto colateral.

   Y el clic SIGUE, sin volver al «abre / cierra» de entonces: con raton el hover ya lo tiene abierto,
   asi que alternar el estado no se ve; sin raton (dedo) no hay hover y el clic es el unico que abre.
   Un solo disparador efectivo por dispositivo. */
.dropdown-menu.open .has-submenu:hover > .submenu[b-f7dq8st1b0] {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Items: mismas medidas que los del menu principal (que site.css fija con !important para los
   enlaces), para que «Añadir empresa» y las empresas no se vean de dos tamaños distintos. */
.submenu-item[b-f7dq8st1b0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .submenu-item:hover[b-f7dq8st1b0] {
        background: #f1f3f5;
    }

.subtext[b-f7dq8st1b0] {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ventana estrecha: el submenú de empresas se abre HACIA ABAJO, bajo «Cambiar cuenta» y con el ancho
   del menú, en vez de a su derecha. A la derecha necesita unos 450 px desde el selector (224 del menú
   más 200 del submenú) y por debajo de 768 se salía de la pantalla: el menú abría, pero la lista de
   empresas quedaba fuera de la vista y no había forma de cambiar de cuenta.

   No tapa nada porque «Cambiar cuenta» es el último elemento del menú. Va pegado al item (sin
   margen) por la misma razón que el lateral: un hueco rompe el :hover al bajar hacia la lista.
   El corte es el mismo que usa la cabecera para su diseño móvil (MainHeader.razor.css). */
@media (max-width: 768px) {
    .submenu[b-f7dq8st1b0] {
        top: 100%;
        left: 0;
        right: 0;
        min-width: 0;
        max-height: min(320px, 50vh);
        transform: none;
    }

        .submenu.open[b-f7dq8st1b0],
        .dropdown-menu.open .has-submenu:hover > .submenu[b-f7dq8st1b0] {
            transform: none;
        }

    /* La flecha apunta hacia donde sale la lista. */
    .submenu-arrow[b-f7dq8st1b0] {
        transform: rotate(90deg);
    }
}

/* Add Company */
.add-company[b-f7dq8st1b0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
    border-top: 1px solid #e9ecef;
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* _content/ErpPowergest/Presentation/Shared/Dock/FloatingDock.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   DOCK FLOTANTE · un único punto de entrada, arrastrable.
   Escala de apilado (la referencia para los paneles hospedados):
     velo 9990 · paneles 9995 · dock 9999 · speed-dial 10000
   ═══════════════════════════════════════════════════════════ */

.dock-scrim[b-mb5tv5vnjk] {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: transparent;
}

.erp-dock-host[b-mb5tv5vnjk] {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;
}

/* ─── FAB ──────────────────────────────────────────────────── */
.erp-dock-fab[b-mb5tv5vnjk] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid #1d4ed8;
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    /* Arrastrable: el pointer no debe generar gestos de scroll ni selección. */
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

    .erp-dock-fab:hover[b-mb5tv5vnjk] {
        box-shadow: 0 20px 38px rgba(37, 99, 235, 0.42);
        transform: translateY(-2px);
    }

    .erp-dock-fab:active[b-mb5tv5vnjk] {
        transform: scale(0.97);
    }

    .erp-dock-fab:focus-visible[b-mb5tv5vnjk] {
        outline: 3px solid rgba(147, 197, 253, 0.85);
        outline-offset: 3px;
    }

.dock-fab-icon[b-mb5tv5vnjk] {
    font-size: 26px;
    transition: transform 0.18s ease;
}

/* Abierto: aspa clara sobre superficie blanca, y el arrastre queda inhibido. */
.erp-dock-host.dock-locked .erp-dock-fab[b-mb5tv5vnjk] {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    touch-action: auto;
}

.erp-dock-host.dock-locked .dock-fab-icon[b-mb5tv5vnjk] {
    transform: rotate(90deg);
}

.erp-dock-host.dock-dragging .erp-dock-fab[b-mb5tv5vnjk] {
    cursor: grabbing;
    transform: scale(1.06);
    box-shadow: 0 24px 44px rgba(37, 99, 235, 0.46);
}

/* ─── Badge de no leídos ───────────────────────────────────── */
.dock-badge[b-mb5tv5vnjk] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4);
}

.dock-item-badge[b-mb5tv5vnjk] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Speed-dial ───────────────────────────────────────────── */
/* Fuera del viewport hasta que el JS lo coloca junto al FAB. */
.dock-menu[b-mb5tv5vnjk] {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 236px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: radial-gradient(circle at top left, rgba(45, 140, 255, 0.22), transparent 42%), linear-gradient(180deg, #1f2a3d 0%, #172033 100%);
    box-shadow: 0 26px 54px rgba(15, 23, 42, 0.34), 0 8px 18px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000;
}

    .dock-menu.qa-ready[b-mb5tv5vnjk],
    .dock-menu.qa-opening[b-mb5tv5vnjk],
    .dock-menu.qa-closing[b-mb5tv5vnjk] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dock-menu.qa-open-up.qa-align-right[b-mb5tv5vnjk] { transform-origin: bottom right; }
    .dock-menu.qa-open-up.qa-align-left[b-mb5tv5vnjk] { transform-origin: bottom left; }
    .dock-menu.qa-open-down.qa-align-right[b-mb5tv5vnjk] { transform-origin: top right; }
    .dock-menu.qa-open-down.qa-align-left[b-mb5tv5vnjk] { transform-origin: top left; }

.dock-item[b-mb5tv5vnjk] {
    width: 100%;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .dock-item:hover[b-mb5tv5vnjk] {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(147, 197, 253, 0.32);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.20);
        transform: translateX(2px);
    }

    .dock-item:focus-visible[b-mb5tv5vnjk] {
        outline: 2px solid rgba(147, 197, 253, 0.9);
        outline-offset: 1px;
    }

    .dock-item:first-child[b-mb5tv5vnjk] {
        background: rgba(37, 99, 235, 0.24);
        border-color: rgba(147, 197, 253, 0.30);
    }

.dock-item-icon[b-mb5tv5vnjk] {
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 11px;
    background: rgba(239, 246, 255, 0.12);
    color: #bfdbfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}

    /* El SVG del asistente es blanco: se pinta con currentColor a través de una máscara,
       para que siga al color del resto de iconos (reposo y hover). */
    .dock-item-svg[b-mb5tv5vnjk] {
        width: 75%;
        height: 75%;
        background-color: currentColor;
        -webkit-mask-image: var(--dock-svg);
        mask-image: var(--dock-svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

.dock-item:hover .dock-item-icon[b-mb5tv5vnjk] {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
}

.dock-item-text[b-mb5tv5vnjk] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Animaciones ──────────────────────────────────────────── */
.dock-menu.qa-open-up.qa-opening[b-mb5tv5vnjk] { animation: dockPanelInUp-b-mb5tv5vnjk 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dock-menu.qa-open-down.qa-opening[b-mb5tv5vnjk] { animation: dockPanelInDown-b-mb5tv5vnjk 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dock-menu.qa-open-up.qa-closing[b-mb5tv5vnjk] { animation: dockPanelOutUp-b-mb5tv5vnjk 0.16s ease both; }
.dock-menu.qa-open-down.qa-closing[b-mb5tv5vnjk] { animation: dockPanelOutDown-b-mb5tv5vnjk 0.16s ease both; }

.dock-item.qa-item-ready[b-mb5tv5vnjk] {
    animation: dockItemIn-b-mb5tv5vnjk 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--qa-delay);
}

@keyframes dockPanelInUp-b-mb5tv5vnjk {
    from { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes dockPanelInDown-b-mb5tv5vnjk {
    from { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes dockPanelOutUp-b-mb5tv5vnjk {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.96); }
}

@keyframes dockPanelOutDown-b-mb5tv5vnjk {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

@keyframes dockItemIn-b-mb5tv5vnjk {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dock-menu.qa-opening[b-mb5tv5vnjk],
    .dock-menu.qa-closing[b-mb5tv5vnjk],
    .dock-item.qa-item-ready[b-mb5tv5vnjk] {
        animation: none;
    }

    .dock-item.qa-item-ready[b-mb5tv5vnjk] {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .erp-dock-host[b-mb5tv5vnjk] {
        right: 18px;
        bottom: 18px;
    }

    .dock-menu[b-mb5tv5vnjk] {
        width: 212px;
        border-radius: 19px;
    }

    .dock-item[b-mb5tv5vnjk] {
        min-height: 44px;
        font-size: 13px;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Dock/TareasDockPanel.razor.rz.scp.css */
/* Panel «Tareas» del dock (T10). Mismo cajón lateral que el de puesta en marcha, para que los dos
   paneles del dock se lean como la misma pieza. */

.tk-drawer[b-ps2eioluwg] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9995;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    padding: 16px;
    background: #fff;
    border-left: 1px solid #e6e6e6;
    box-shadow: -18px 0 45px rgba(0, 0, 0, .12);
    overflow-y: auto;
}

.tk-head[b-ps2eioluwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tk-close[b-ps2eioluwg] {
    background: none;
    border: none;
    font-size: 15px;
    color: #666;
    cursor: pointer;
}

.tk-loading[b-ps2eioluwg] {
    padding: 24px 0;
    font-size: 13px;
    color: #777;
}

/* Sin nada pendiente: no es un hueco, es una buena noticia. Se dice con el mismo tono verde que el
   widget de la home. */
.tk-hecho[b-ps2eioluwg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    font-size: 13px;
    color: #4a7a4a;
}

.tk-hecho-ico[b-ps2eioluwg] {
    font-size: 20px;
}

.tk-lista[b-ps2eioluwg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-fila[b-ps2eioluwg] {
    border: 1px solid #eceff3;
    border-radius: 10px;
}

/* Lo vencido o lo urgente se distingue por el borde y el color del icono, no por un fondo rojo:
   cinco filas en rojo dejan de avisar de nada. */
.tk-fila.urgente[b-ps2eioluwg] {
    border-color: #f0c9c0;
    background: #fdf6f4;
}

.tk-fila.urgente .tk-ico[b-ps2eioluwg] {
    color: #c0492c;
}

.tk-enlace[b-ps2eioluwg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.tk-ico[b-ps2eioluwg] {
    flex: 0 0 auto;
    font-size: 20px;
    color: #6b7684;
}

.tk-txt[b-ps2eioluwg] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.tk-titulo[b-ps2eioluwg] {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-detalle[b-ps2eioluwg] {
    margin-top: 1px;
    font-size: 11px;
    color: #7a828c;
}

.tk-ir[b-ps2eioluwg] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #b6bcc4;
}

.tk-pie[b-ps2eioluwg] {
    margin-top: 10px;
    font-size: 11px;
    color: #7a828c;
}

.tk-todas[b-ps2eioluwg] {
    margin-top: 14px;
    padding: 9px 12px;
    background: #2f6fed;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
/* _content/ErpPowergest/Presentation/Shared/DocumentosEnCurso/BarraDocumentosEnCurso.razor.rz.scp.css */
/* Barra de documentos en curso: fina, encima del contenido, en el azul claro de las barras de sección. */

.dec[b-p6dnatbasq] {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem 1rem;
    background: #eef4fb;
    border-bottom: 1px solid #c9dcf0;
    font-size: .8125rem;
    flex-wrap: wrap;
}

.dec-rotulo[b-p6dnatbasq] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #1f4e79;
    font-weight: 600;
    margin-right: .25rem;
}

.dec-rotulo .material-symbols-rounded[b-p6dnatbasq] {
    font-size: 1.125rem;
}

.dec-doc[b-p6dnatbasq] {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    max-width: 22rem;
    padding: .125rem .25rem .125rem .5rem;
    background: #fff;
    border: 1px solid #c9dcf0;
    border-radius: 999px;
}

.dec-actual[b-p6dnatbasq] {
    background: #1f4e79;
    border-color: #1f4e79;
}

.dec-actual .dec-ir[b-p6dnatbasq] {
    color: #fff;
}

.dec-ir[b-p6dnatbasq] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    color: #1f4e79;
    text-decoration: none;
}

.dec-ir:hover .dec-titulo[b-p6dnatbasq] {
    text-decoration: underline;
}

.dec-ir .material-symbols-rounded[b-p6dnatbasq] {
    font-size: 1rem;
}

.dec-titulo[b-p6dnatbasq] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dec-quitar[b-p6dnatbasq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5b6b7b;
    cursor: pointer;
}

.dec-quitar:hover[b-p6dnatbasq] {
    background: #fde8e8;
    color: #b42318;
}

.dec-quitar .material-symbols-rounded[b-p6dnatbasq] {
    font-size: 1rem;
}

.dec-pregunta[b-p6dnatbasq] {
    color: #7a271a;
    padding-right: .25rem;
}

.dec-si[b-p6dnatbasq],
.dec-no[b-p6dnatbasq] {
    padding: .125rem .625rem;
    border: 0;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.dec-si[b-p6dnatbasq] {
    background: #b42318;
    color: #fff;
}

.dec-no[b-p6dnatbasq] {
    background: #e7edf3;
    color: #1f4e79;
}
/* _content/ErpPowergest/Presentation/Shared/Dropdown/CierreExterior.razor.rz.scp.css */
/* El envoltorio no debe existir para la maquetación: sus hijos se colocan como si el div no
   estuviera (posicionamiento, flex y grid del padre siguen aplicándose a ellos). Sigue presente en
   el DOM, que es lo único que necesita `element.contains(...)`. */
.cierre-exterior[b-jjnvznlp5o] {
    display: contents;
}
/* _content/ErpPowergest/Presentation/Shared/Dropdown/CrmDropdown.razor.rz.scp.css */
/* ── Dropdown propio (reemplaza al <select> nativo para poder estilar las opciones) ── */

.crm-dd[b-n58rbpf28v] {
    position: relative;
    width: 100%;
    font-size: 13px;
}

/* Control cerrado */
.crm-dd-trigger[b-n58rbpf28v] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #1e293b;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .crm-dd-trigger:hover[b-n58rbpf28v] {
        border-color: #cbd5e1;
    }

    .crm-dd-trigger:disabled[b-n58rbpf28v] {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

.crm-dd.open .crm-dd-trigger[b-n58rbpf28v] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.crm-dd-lead[b-n58rbpf28v] {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s;
}

.crm-dd.open .crm-dd-lead[b-n58rbpf28v] {
    color: #3b82f6;
}

.crm-dd-value[b-n58rbpf28v] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

    .crm-dd-value.is-placeholder[b-n58rbpf28v] {
        color: #94a3b8;
        font-weight: 400;
    }

.crm-dd-chevron[b-n58rbpf28v] {
    font-size: 18px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.15s;
}

.crm-dd.open .crm-dd-chevron[b-n58rbpf28v] {
    transform: rotate(180deg);
    color: #3b82f6;
}

/* Panel de opciones */
.crm-dd-panel[b-n58rbpf28v] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1201;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16,24,40,0.14);
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
    animation: crmDdIn-b-n58rbpf28v 0.14s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Variante hacia arriba: el panel se ancla sobre el control (evita el recorte de un
   contenedor con overflow cuando el desplegable está al fondo del modal). */
.crm-dd-panel.up[b-n58rbpf28v] {
    top: auto;
    bottom: calc(100% + 4px);
    animation: crmDdInUp-b-n58rbpf28v 0.14s ease;
}

    .crm-dd-panel[b-n58rbpf28v]::-webkit-scrollbar {
        width: 6px;
    }

    .crm-dd-panel[b-n58rbpf28v]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

@keyframes crmDdIn-b-n58rbpf28v {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes crmDdInUp-b-n58rbpf28v {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-dd-option[b-n58rbpf28v] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    text-align: left;
    transition: background 0.12s ease;
}

    .crm-dd-option:hover[b-n58rbpf28v] {
        background: #f1f5f9;
    }

    .crm-dd-option.active[b-n58rbpf28v] {
        background: #eff6ff;
        color: #2563eb;
        font-weight: 600;
    }

.crm-dd-opt-icon[b-n58rbpf28v] {
    font-size: 17px;
    color: #64748b;
    flex-shrink: 0;
}

.crm-dd-option.active .crm-dd-opt-icon[b-n58rbpf28v] {
    color: #2563eb;
}

.crm-dd-opt-label[b-n58rbpf28v] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-dd-check[b-n58rbpf28v] {
    font-size: 17px;
    color: #2563eb;
    flex-shrink: 0;
}
/* _content/ErpPowergest/Presentation/Shared/Dropdown/FiltroAvatares.razor.rz.scp.css */
.filtro-avatares[b-1szod5sa71] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.filtro-avatar[b-1szod5sa71] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    /* Sin elegir, apagados: así los elegidos destacan sin necesidad de leer nada. */
    opacity: 0.55;
    filter: grayscale(0.35);
    transition: opacity 0.15s, filter 0.15s, border-color 0.15s, transform 0.12s;
}

    .filtro-avatar:hover[b-1szod5sa71] {
        opacity: 0.85;
        filter: none;
    }

.filtro-avatar.elegido[b-1szod5sa71] {
    opacity: 1;
    filter: none;
    border-color: #2563eb;
    transform: scale(1.04);
}

/* Marca de elegido: el color solo no basta para quien no lo distingue. */
.filtro-avatar-check[b-1szod5sa71] {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    border: 2px solid #ffffff;
}

.filtro-avatares-vacio[b-1szod5sa71] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

/* Misma paleta estable que las tarjetas y columnas del tablero. */
.avatar-c1[b-1szod5sa71] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.avatar-c2[b-1szod5sa71] { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.avatar-c3[b-1szod5sa71] { background: linear-gradient(135deg, #ec4899, #db2777); }
.avatar-c4[b-1szod5sa71] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar-c5[b-1szod5sa71] { background: linear-gradient(135deg, #10b981, #059669); }
.avatar-c6[b-1szod5sa71] { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.avatar-c7[b-1szod5sa71] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.avatar-c8[b-1szod5sa71] { background: linear-gradient(135deg, #6366f1, #4f46e5); }
/* _content/ErpPowergest/Presentation/Shared/Dropdown/FiltroBuscador.razor.rz.scp.css */
/* Campo de búsqueda: mismo lenguaje que CrmDropdown (alto 38, radio 8, anillo azul al enfocar). */
.fbus[b-5v2d6zdej8] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .fbus:focus-within[b-5v2d6zdej8] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
    }

.fbus-ico[b-5v2d6zdej8] {
    font-size: 17px;
    color: #94a3b8;
    flex-shrink: 0;
}

.fbus-input[b-5v2d6zdej8] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
}

    .fbus-input[b-5v2d6zdej8]::placeholder {
        color: #94a3b8;
    }

/* Resultados: en el flujo, no flotando — el panel de filtros ya es una capa. */
.fbus-lista[b-5v2d6zdej8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 8px;
}

.fbus-op[b-5v2d6zdej8] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: #334155;
    text-align: left;
    transition: background 0.12s;
}

    .fbus-op:hover[b-5v2d6zdej8] {
        background: #e8effb;
    }

.fbus-op-ico[b-5v2d6zdej8] {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

.fbus-op-txt[b-5v2d6zdej8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fbus-vacio[b-5v2d6zdej8] {
    padding: 7px 8px;
    font-size: 12.5px;
    color: #94a3b8;
}

/* Ya elegido: se ve lo aplicado, no un campo vacío que invita a buscar otra vez. */
.fbus-elegido[b-5v2d6zdej8] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 6px 0 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
}

.fbus-elegido-ico[b-5v2d6zdej8] {
    font-size: 17px;
    color: #2563eb;
    flex-shrink: 0;
}

.fbus-elegido-txt[b-5v2d6zdej8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fbus-elegido-quitar[b-5v2d6zdej8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #60a5fa;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .fbus-elegido-quitar:hover[b-5v2d6zdej8] {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .fbus-elegido-quitar .material-symbols-rounded[b-5v2d6zdej8] {
        font-size: 15px;
    }
/* _content/ErpPowergest/Presentation/Shared/Dropdown/FiltroFila.razor.rz.scp.css */
.filtro-fila[b-hgl83srtrb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .filtro-fila + .filtro-fila[b-hgl83srtrb] {
        margin-top: 12px;
    }

.filtro-fila-cab[b-hgl83srtrb] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.filtro-fila-lbl[b-hgl83srtrb] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

/* La nota se lee como un matiz, no compite con la etiqueta. */
.filtro-fila-nota[b-hgl83srtrb] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}
/* _content/ErpPowergest/Presentation/Shared/Dropdown/FiltrosCrm.razor.rz.scp.css */
/* Barra de filtros del CRM. Mismo lenguaje visual que CrmDropdown: alto 38, radio 8, marco #e2e8f0
   y anillo azul al abrir, para que conviva con los desplegables sin desentonar. */

.filtros-crm[b-nsthg48u7e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filtros-crm-wrap[b-nsthg48u7e] {
    position: relative;
    display: inline-flex;
}

.filtros-crm-btn[b-nsthg48u7e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

    .filtros-crm-btn:hover[b-nsthg48u7e] {
        border-color: #cbd5e1;
    }

    .filtros-crm-btn .material-symbols-rounded[b-nsthg48u7e] {
        font-size: 18px;
        color: #94a3b8;
    }

.filtros-crm-btn.abierto[b-nsthg48u7e] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

    .filtros-crm-btn.abierto .material-symbols-rounded[b-nsthg48u7e] {
        color: #3b82f6;
    }

/* Filtrando: el botón se distingue de un vistazo, no solo por el contador. */
.filtros-crm-btn.con-filtro[b-nsthg48u7e] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

    .filtros-crm-btn.con-filtro .material-symbols-rounded[b-nsthg48u7e] {
        color: #2563eb;
    }

.filtros-crm-contador[b-nsthg48u7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.filtros-crm-chevron[b-nsthg48u7e] {
    transition: transform 0.18s ease;
}

.filtros-crm-btn.abierto .filtros-crm-chevron[b-nsthg48u7e] {
    transform: rotate(180deg);
}

/* ── Panel ── */
.filtros-crm-panel[b-nsthg48u7e] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1201;
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16,24,40,0.14);
    animation: filtrosEntra-b-nsthg48u7e 0.14s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

@keyframes filtrosEntra-b-nsthg48u7e {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filtros-crm-pie[b-nsthg48u7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.filtros-crm-recuento[b-nsthg48u7e] {
    font-size: 12px;
    color: #94a3b8;
}

    /* Cuando se está ocultando algo, el dato deja de ser un detalle gris. */
    .filtros-crm-recuento.recortado[b-nsthg48u7e] {
        color: #1d4ed8;
    }

    .filtros-crm-recuento strong[b-nsthg48u7e] {
        font-weight: 700;
    }

.filtros-crm-limpiar[b-nsthg48u7e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .filtros-crm-limpiar:hover[b-nsthg48u7e] {
        background: #f1f5f9;
        color: #334155;
    }

    .filtros-crm-limpiar .material-symbols-rounded[b-nsthg48u7e] {
        font-size: 16px;
    }

/* _content/ErpPowergest/Presentation/Shared/Dropdowns/Dropdown.razor.rz.scp.css */
.dropdown[b-omnqi25v8s] {
    position: relative;
}

.dropdown .btn-custom[b-omnqi25v8s] {
    padding:5px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    box-shadow: none;
}

    .dropdown .btn-custom:hover[b-omnqi25v8s] {
        background-color: #e9ecef;
        border-color: #ced4da;
        color: #495057;
    }

    .dropdown .btn-custom:focus[b-omnqi25v8s],
    .dropdown .btn-custom:active[b-omnqi25v8s] {
        background-color: #e9ecef;
        border-color: #ced4da;
        color: #495057;
        box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15);
        outline: none;
    }

.dropdown-menu[b-omnqi25v8s] {
    right: 0;
    left: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

    .dropdown-menu.show[b-omnqi25v8s] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.dropdown-item[b-omnqi25v8s] {
    font-size: 0.875rem;
    color: #6c757d;
    transition: background-color 0.15s;
    border-radius: 0.25rem;
    margin: 0.1rem 0.25rem;
    padding: 0.4rem 0.75rem;
}

    .dropdown-item:hover[b-omnqi25v8s] {
        background-color: #f1f3f5;
        color: #343a40;
    }

/* Small */
.btn-custom-sm[b-omnqi25v8s] {
    font-size: 0.775rem;
    min-width: 6rem;
}

/* Medium (default) */
.btn-custom-md[b-omnqi25v8s] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-width: 10rem;
}

/* Large */
.btn-custom-lg[b-omnqi25v8s] {
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    min-width: 13rem;
}
/* _content/ErpPowergest/Presentation/Shared/Espacios/EspacioConmutador.razor.rz.scp.css */
/* Conmutador de espacio de trabajo (N4). El color del espacio activo llega por variables
   (--esp-acento / --esp-fondo) que fija el componente: es lo que hace VISIBLE el cambio de contexto. */

.espacio-container[b-awgck36fix] {
    position: relative;
    width: 100%;
    user-select: none;
}

/* Altura fija (40px) en los dos estados del sidebar: contraer no desplaza el menú de debajo.
   La insignia cae en el mismo eje vertical que los iconos del menú (1px de borde + 5px + 14px = 20px). */
.espacio-trigger[b-awgck36fix] {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 5px;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .espacio-trigger:hover[b-awgck36fix],
    .espacio-trigger.open[b-awgck36fix] {
        background: var(--esp-fondo);
        border-color: color-mix(in srgb, var(--esp-acento) 35%, #e7edf5);
    }

    .espacio-trigger:focus[b-awgck36fix] {
        outline: none;
    }

    .espacio-trigger:focus-visible[b-awgck36fix] {
        outline: 2px solid rgba(37, 99, 235, 0.35);
        outline-offset: -2px;
    }

.espacio-badge[b-awgck36fix] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--esp-acento);
    color: #ffffff;
}

.espacio-badge-ico[b-awgck36fix] {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.espacio-textos[b-awgck36fix] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.espacio-nombre[b-awgck36fix] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0f172a;
}

.espacio-sub[b-awgck36fix] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    color: #8b95a7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.espacio-chevron[b-awgck36fix] {
    margin-left: auto;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    transition: transform .18s ease;
}

.espacio-trigger.open .espacio-chevron[b-awgck36fix] {
    transform: rotate(180deg);
}

/* ---- sidebar contraído: solo la insignia, en una caja cuadrada de la misma altura ---- */
.espacio-container.collapsed .espacio-trigger[b-awgck36fix] {
    width: 40px;
    justify-content: center;
    padding: 0;
}

.espacio-container.collapsed .espacio-textos[b-awgck36fix],
.espacio-container.collapsed .espacio-chevron[b-awgck36fix] {
    display: none;
}

/* ---- aviso de primera vez ---- */
.espacio-aviso[b-awgck36fix] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 8px 8px 10px;
    border-radius: 12px;
    background: var(--esp-fondo);
    border: 1px dashed var(--esp-acento);
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
}

.espacio-aviso-ico[b-awgck36fix] {
    color: var(--esp-acento);
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

.espacio-aviso-texto[b-awgck36fix] {
    flex: 1 1 auto;
}

.espacio-aviso-cerrar[b-awgck36fix] {
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
}

    .espacio-aviso-cerrar .material-symbols-rounded[b-awgck36fix] {
        font-size: 18px;
    }

    .espacio-aviso-cerrar:hover[b-awgck36fix] {
        color: #0f172a;
    }

/* ---- desplegable ---- */
.espacio-menu[b-awgck36fix] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    width: 268px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.2,.8,.2,1);
}

    .espacio-menu.open[b-awgck36fix] {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

.espacio-container.collapsed .espacio-menu[b-awgck36fix] {
    left: calc(100% + 8px);
    top: 0;
    margin-top: 0;
}

.espacio-seccion[b-awgck36fix] {
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b95a7;
}

.espacio-separador[b-awgck36fix] {
    height: 1px;
    margin: 6px 4px;
    background: #e7edf5;
}

/* N10: pie «Gestionar espacios…» */
.espacio-gestionar[b-awgck36fix] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.espacio-gestionar .material-symbols-rounded[b-awgck36fix] { font-size: 18px; }
.espacio-gestionar:hover[b-awgck36fix] { background: #f1f5f9; color: #2563eb; }

.espacio-item[b-awgck36fix] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

    .espacio-item:hover[b-awgck36fix] {
        background: #f8fafc;
        color: #111827;
    }

    .espacio-item.activo[b-awgck36fix] {
        background: var(--item-fondo, #f1f5f9);
    }

.espacio-item-ico[b-awgck36fix] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--item-fondo, #f1f5f9);
    color: var(--item-acento, #64748b);
}

    .espacio-item-ico .material-symbols-rounded[b-awgck36fix] {
        font-size: 19px;
        line-height: 1;
    }

.espacio-item.activo .espacio-item-ico[b-awgck36fix] {
    background: var(--item-acento, #64748b);
    color: #ffffff;
}

.espacio-item-textos[b-awgck36fix] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.espacio-item-nombre[b-awgck36fix] {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.espacio-item-desc[b-awgck36fix] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #8b95a7;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.espacio-item-check[b-awgck36fix] {
    margin-left: auto;
    color: var(--item-acento, #64748b);
    font-size: 20px;
}

/* Escaparate: espacios no contratados, en gris y con «Añadir» */
.espacio-item-bloqueado[b-awgck36fix] {
    opacity: .72;
}

    .espacio-item-bloqueado .espacio-item-ico[b-awgck36fix] {
        background: #f1f5f9;
        color: #94a3b8;
    }

    .espacio-item-bloqueado .espacio-item-nombre[b-awgck36fix] {
        color: #64748b;
    }

.espacio-item-anadir[b-awgck36fix] {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.espacio-item-bloqueado:hover[b-awgck36fix] {
    opacity: 1;
}
/* _content/ErpPowergest/Presentation/Shared/Forms/AppButton.razor.rz.scp.css */
/* AppButton.razor.css - versión unificada */
.primary-btn[b-2r65gfpwzd] {
    width: 100%;
    padding: 0.8rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .primary-btn:hover:not(:disabled)[b-2r65gfpwzd] {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
    }

    .primary-btn:disabled[b-2r65gfpwzd] {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* _content/ErpPowergest/Presentation/Shared/Forms/AppInput.razor.rz.scp.css */
.field[b-4izklwjawh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

    .field label[b-4izklwjawh] {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
    }

    .field input[b-4izklwjawh] {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .field input:focus[b-4izklwjawh] {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
        }

        .field input[b-4izklwjawh]::placeholder {
            color: #9ca3af;
        }
/* _content/ErpPowergest/Presentation/Shared/Forms/Company/EditCompanyForm.razor.rz.scp.css */
.company-image-wrapper[b-bs2j4exo3e] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1.5rem auto;
}

.company-image[b-bs2j4exo3e] {
    width: 140px;
    height: 140px;
    border-radius: 15%;
    object-fit: cover;
    border: 3px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    /* Evitar seleccion de texto */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Boton de camara */
.camera-btn[b-bs2j4exo3e] {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;

    /* Evitar seleccion de texto */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .camera-btn:hover[b-bs2j4exo3e] {
        background: #f0f0f0;
    }

.icon[b-bs2j4exo3e] {
    font-size: 22px;
    color: #666;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 900, 'GRAD' 0, 'opsz' 48;
}

/* Contenedor de botones de accion */
.modal-actions[b-bs2j4exo3e] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.upload-error[b-bs2j4exo3e] {
    width: 100%;
    margin-bottom: 0.75rem;
    color: #c62828;
    font-size: 0.9rem;
    text-align: center;
}

/* ---- BOTONES GENERALES ---- */
.btn[b-bs2j4exo3e] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-bs2j4exo3e] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    .btn:active[b-bs2j4exo3e] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

/* Boton guardar */
.btn-accept[b-bs2j4exo3e] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-bs2j4exo3e] {
        background: #f3f4f6;
    }

/* Boton cancelar */
.btn-cancel[b-bs2j4exo3e] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-bs2j4exo3e] {
        background: #4b5563;
    }
/* _content/ErpPowergest/Presentation/Shared/Forms/Company/NewCompanyForm.razor.rz.scp.css */
.company-image-wrapper[b-dnf47qdlth] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1.5rem auto; /* Centrado + separación */
}

.company-image[b-dnf47qdlth] {
    width: 140px;
    height: 140px;
    border-radius: 24px;
    object-fit: cover;
    border: 3px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

/* Botón de cámara */
.camera-btn[b-dnf47qdlth] {
    position: absolute;
    right: -15px;
    bottom: -15px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

    .camera-btn:hover[b-dnf47qdlth] {
        background: #f0f0f0;
    }

/* Input */
.company-input[b-dnf47qdlth] {
    margin-bottom: 1.5rem;
}

/* Contenedor: alineación a la derecha */
.modal-actions[b-dnf47qdlth] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.upload-error[b-dnf47qdlth] {
    width:100%;
    margin-bottom:0.75rem;
    color: #c62828;
    font-size: 0.9rem;
    text-align:center;
}

/* ---- BOTONES GENERALES ---- */

.btn[b-dnf47qdlth] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align:center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    /* Efecto en hover */
    .btn:hover[b-dnf47qdlth] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* Efecto al hacer click */
    .btn:active[b-dnf47qdlth] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }


/* Primario (Crear - azul profesional) */
.btn-primary[b-dnf47qdlth] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-primary:hover[b-dnf47qdlth] {
        background: #f3f4f6;
    }

/* Secundario (Cancelar - gris con texto blanco) */
.btn-secondary[b-dnf47qdlth] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-secondary:hover[b-dnf47qdlth] {
        background: #4b5563;
    }
/* _content/ErpPowergest/Presentation/Shared/Forms/EditorTextoRico.razor.rz.scp.css */
/* Arrastrable solo en vertical, como el textarea de antes.

   El EnableResize del editor de Syncfusion no distingue ejes: da un tirador en diagonal que cambia
   ancho y alto. Se apaga y se usa el redimensionado nativo del navegador sobre el área de escritura,
   que sí acepta un solo eje. El marco exterior pasa a alto automático para que envuelva lo que mida
   el área en cada momento; si no, al estirar hacia abajo el texto se saldría de la caja. */

.editor-rico[b-86zum6xkwj]  .e-richtexteditor {
    height: auto !important;
    border-radius: 10px;
}

.editor-rico[b-86zum6xkwj]  .e-rte-content {
    min-height: 110px;
    overflow: auto;
    resize: vertical;
}

/* El clip de la barra. Es un <label> con el InputFile dentro, no un <button>: así abre el explorador
   de archivos sin JavaScript. Hereda el aspecto de la barra con `.e-btn .e-tbar-btn` de Syncfusion y
   aquí solo se corrige lo que un label no trae.

   `::deep` para el input porque el InputFile es un COMPONENTE hijo, y a lo que pinta un hijo no le
   llega el atributo de ámbito del padre: sin eso se ve el control nativo entero, con su «Elegir
   archivos» y su «Ningún archivo seleccionado» al lado. */

.editor-rico[b-86zum6xkwj]  .editor-rico-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.editor-rico[b-86zum6xkwj]  .editor-rico-clip input[type="file"] {
    display: none;
}

.editor-rico[b-86zum6xkwj]  .editor-rico-clip .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}
/* _content/ErpPowergest/Presentation/Shared/Forms/FormularioEsquema.razor.rz.scp.css */
/* Los datos de una orden, en vertical: rótulo, control y nota de ayuda debajo. Un campo por fila para
   que se lea como un cuestionario y no como una rejilla de cajas sin orden. */

.fe-form[b-sy9d87icov] { display: flex; flex-direction: column; gap: .85rem; max-width: 40rem; }

.fe-vacio[b-sy9d87icov] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.fe-field[b-sy9d87icov] { display: flex; flex-direction: column; gap: .28rem; }

.fe-label[b-sy9d87icov] { font-size: .8rem; font-weight: 600; color: #2b3a4a; display: flex; align-items: baseline; gap: .35rem; }
.fe-req[b-sy9d87icov] { color: #c22f39; }
.fe-opc[b-sy9d87icov] { font-size: .7rem; font-weight: 500; color: #8a97a3; text-transform: uppercase; letter-spacing: .04em; }

.fe-input[b-sy9d87icov] { border: 1px solid #cdd5df; border-radius: 8px; padding: .5rem .65rem; font-size: .9rem; background: #fff; color: #1f2933; font-family: inherit; width: 100%; box-sizing: border-box; }
.fe-input:focus[b-sy9d87icov] { outline: none; border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); }
.fe-input:disabled[b-sy9d87icov] { background: #f6f8fa; color: #61707d; }

.fe-num[b-sy9d87icov] { max-width: 12rem; text-align: right; font-variant-numeric: tabular-nums; }
.fe-fecha[b-sy9d87icov] { max-width: 14rem; }
.fe-select[b-sy9d87icov] { max-width: 20rem; }
.fe-json[b-sy9d87icov] { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; resize: vertical; }
.fe-texto-largo[b-sy9d87icov] { resize: vertical; min-height: 4.5rem; }

.fe-check-label[b-sy9d87icov] { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: #1f2933; cursor: pointer; }
.fe-check[b-sy9d87icov] { width: 1.1rem; height: 1.1rem; margin: 0; }

.fe-ayuda[b-sy9d87icov] { font-size: .8rem; color: #61707d; line-height: 1.45; }

/* Una lista de textos o números: una entrada por línea. */
.fe-lista[b-sy9d87icov] { resize: vertical; min-height: 5rem; }

/* Una lista de fichas (los artículos de crear_articulos, las líneas de un pedido): cada elemento en su
   tarjeta, con sus campos en rejilla que se reparte sola según el ancho (una columna en el móvil). */
.fe-fichas[b-sy9d87icov] { display: flex; flex-direction: column; gap: .6rem; }
.fe-ficha[b-sy9d87icov] { border: 1px solid #dfe5ec; border-radius: 10px; background: #fafbfd; padding: .6rem .75rem .75rem; }
.fe-ficha-cab[b-sy9d87icov] { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.fe-ficha-num[b-sy9d87icov] { font-size: .75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
.fe-ficha-quitar[b-sy9d87icov] { border: none; background: transparent; color: #64748b; width: 28px; height: 28px; border-radius: 7px;
                   display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fe-ficha-quitar:hover[b-sy9d87icov] { color: #ba1a1a; background: rgba(186, 26, 26, .1); }
.fe-ficha-quitar .material-symbols-rounded[b-sy9d87icov] { font-size: 18px; }
.fe-ficha-campos[b-sy9d87icov] { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .55rem .75rem; }
.fe-subfield[b-sy9d87icov] { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.fe-subfield.fe-field-check[b-sy9d87icov] { justify-content: flex-end; }
.fe-sublabel[b-sy9d87icov] { font-size: .74rem; }
.fe-subfield .fe-num[b-sy9d87icov], .fe-subfield .fe-select[b-sy9d87icov], .fe-subfield .fe-fecha[b-sy9d87icov] { max-width: none; }
.fe-subfield .fe-input[b-sy9d87icov] { padding: .42rem .55rem; font-size: .85rem; }
.fe-subayuda[b-sy9d87icov] { font-size: .7rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fe-ficha-anadir[b-sy9d87icov] { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; border: 1px dashed #b6c2d1;
                   background: #fff; color: #2b3a4a; border-radius: 8px; padding: .4rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.fe-ficha-anadir:hover[b-sy9d87icov] { border-color: #2f6fed; color: #2f6fed; }
.fe-ficha-anadir .material-symbols-rounded[b-sy9d87icov] { font-size: 18px; }
.fe-form:has(.fe-fichas)[b-sy9d87icov] { max-width: none; }
/* _content/ErpPowergest/Presentation/Shared/Forms/InputField.razor.rz.scp.css */
.input-wrapper[b-tw8h5qofil] {
    position: relative; /* importantísimo */
    width: 100%;
    align-content:center;
    padding-bottom:0.75rem;
}

    .input-wrapper .input[b-tw8h5qofil] {
        width: 100%;
        padding:1.1rem 0.9rem 0.7rem 0.9rem;
        border: 1px solid #cfcfcf;
        border-radius: 10px;
        font-size: 1rem;
        background: #fafafa;
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .input-wrapper .floating-label[b-tw8h5qofil] {
        position: absolute;
        left: 0.95rem;
        top: 1rem;
        font-size: 1rem;
        color: #9ca3af;
        pointer-events: none;
        transition: 0.2s ease all;
        background: #fafafa;
        z-index: 2;

        /* Evitar selección de texto */
        user-select: none;
        -webkit-user-select: none; /* Chrome, Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge antiguos */
    }

    .input-wrapper .input:focus + .floating-label[b-tw8h5qofil],
    .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-tw8h5qofil] {
        top: 0.2rem;
        font-size: 0.65rem;
        color: #888;
        background: #fff;
    }

    .input-wrapper .input:focus[b-tw8h5qofil] {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

/* Responsive por altura: alturas menores a 800px */
@media (max-height: 800px) {
    .input-wrapper[b-tw8h5qofil] {
        padding-bottom: 0.5rem;
    }

        .input-wrapper .input[b-tw8h5qofil] {
            padding: 0.85rem 0.7rem 0.5rem 0.7rem;
            font-size: 0.9rem;
            border-radius: 8px;
        }

        .input-wrapper .floating-label[b-tw8h5qofil] {
            top: 0.8rem;
            font-size: 0.85rem;
        }

        .input-wrapper .input:focus + .floating-label[b-tw8h5qofil],
        .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-tw8h5qofil] {
            top: 0.15rem;
            font-size: 0.6rem;
        }
}

/* Mas agresivo para alturas menores a 600px */
@media (max-height: 600px) {
    .input-wrapper[b-tw8h5qofil] {
        padding-bottom: 0.4rem;
    }

        .input-wrapper .input[b-tw8h5qofil] {
            padding: 0.7rem 0.6rem 0.4rem 0.6rem;
            font-size: 0.8rem;
            border-radius: 6px;
        }

        .input-wrapper .floating-label[b-tw8h5qofil] {
            top: 0.7rem;
            font-size: 0.8rem;
        }

        .input-wrapper .input:focus + .floating-label[b-tw8h5qofil],
        .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-tw8h5qofil] {
            top: 0.1rem;
            font-size: 0.55rem;
        }
}
/* _content/ErpPowergest/Presentation/Shared/Forms/InputFieldArticulos.razor.rz.scp.css */
    .input-wrapper[b-duob5d1bxp] {
        position: relative; /* importantísimo */
        width: 100%;
        align-content:center;
        padding-bottom:0.75rem;
    }

        .input-wrapper .input[b-duob5d1bxp] {
            width: 100%;
            padding:1.1rem 0.9rem 0.7rem 0.9rem;
            border: 1px solid #cfcfcf;
            border-radius: 10px;
            font-size: 1rem;
            background: #fafafa;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            
        }

        .input-wrapper .floating-label[b-duob5d1bxp] {
            position: absolute;
            left: 0.95rem;
            top: 1rem;
            font-size: 1rem;
            color: #9ca3af;
            pointer-events: none;
            transition: 0.2s ease all;
            background: #fafafa;
            z-index: 2;

            /* Evitar selección de texto */
            user-select: none;
            -webkit-user-select: none; /* Chrome, Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE/Edge antiguos */
        }

        .input-wrapper .input:focus + .floating-label[b-duob5d1bxp],
        .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-duob5d1bxp] {
            top: 0.2rem;
            font-size: 0.65rem;
            color: #888;
            background: #fff;
        }

        .input-wrapper .input:focus[b-duob5d1bxp] {
            outline: none;
            border-color: #3b82f6;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

    /* Responsive por altura: alturas menores a 800px */
    @media (max-height: 800px) {
        .input-wrapper[b-duob5d1bxp] {
            padding-bottom: 0.5rem;
        }

            .input-wrapper .input[b-duob5d1bxp] {
                padding: 0.85rem 0.7rem 0.5rem 0.7rem;
                font-size: 0.9rem;
                border-radius: 8px;
            }

            .input-wrapper .floating-label[b-duob5d1bxp] {
                top: 0.8rem;
                font-size: 0.85rem;
            }

            .input-wrapper .input:focus + .floating-label[b-duob5d1bxp],
            .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-duob5d1bxp] {
                top: 0.15rem;
                font-size: 0.6rem;
            }
    }

    /* Mas agresivo para alturas menores a 600px */
    @media (max-height: 600px) {
        .input-wrapper[b-duob5d1bxp] {
            padding-bottom: 0.4rem;
        }

            .input-wrapper .input[b-duob5d1bxp] {
                padding: 0.7rem 0.6rem 0.4rem 0.6rem;
                font-size: 0.8rem;
                border-radius: 6px;
            }

            .input-wrapper .floating-label[b-duob5d1bxp] {
                top: 0.7rem;
                font-size: 0.8rem;
            }

            .input-wrapper .input:focus + .floating-label[b-duob5d1bxp],
            .input-wrapper .input:not(:placeholder-shown) + .floating-label[b-duob5d1bxp] {
                top: 0.1rem;
                font-size: 0.55rem;
            }
}
/* Agrupa cada bloque */
.form-group[b-duob5d1bxp] {
    margin-bottom: 20px;
}

/* Filas horizontales */
.form-row[b-duob5d1bxp] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Cada campo dentro de la fila */
.form-field[b-duob5d1bxp] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

label[b-duob5d1bxp] {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

input[b-duob5d1bxp], textarea[b-duob5d1bxp] {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}

    input:focus[b-duob5d1bxp], textarea:focus[b-duob5d1bxp] {
        outline: none;
        border-color: #0078d7;
        box-shadow: 0 0 6px rgba(0,120,215,0.3);
    }

.checkbox-group[b-duob5d1bxp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

button[b-duob5d1bxp] {
    margin-top: 20px;
    padding: 12px;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 200px;
}

    button:hover[b-duob5d1bxp] {
        background-color: #005fa3;
    }

.section-title[b-duob5d1bxp] {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.expand-section[b-duob5d1bxp] {
    margin-top: 20px;
    padding: 15px;
    background: #f4f6f9;
    border-radius: 8px;
}

    .expand-section summary[b-duob5d1bxp] {
        cursor: pointer;
        font-weight: 600;
        font-size: 16px;
    }

.mt-15[b-duob5d1bxp] {
    margin-top: 15px;
}

.mt-20[b-duob5d1bxp] {
    margin-top: 20px;
    }
/* _content/ErpPowergest/Presentation/Shared/Forms/SearchBar.razor.rz.scp.css */
/* ----------------------
   Contenedor principal
   ------------------- */
.search-wrapper[b-5jundi9q4j] {
    position: relative;
    width: 100%;
    align-items:center;
}

/* ------------------
   Input principal 
------------------ */
.search-input[b-5jundi9q4j] {
    width: 100%;
    padding: 0.4rem 2.6rem 0.4rem 2.6rem;
    border: 1px solid #cfcfcf;
    border-radius: 12px;
    font-size: 1rem;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

    /* Estado focus del input */
    .search-input:focus[b-5jundi9q4j] {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

/* -------------------
   Etiqueta flotante
-------------------- */
.floating-label[b-5jundi9q4j] {
    position: absolute;
    left: 2.6rem;
    top: 1rem;
    font-size: 1rem;
    color: #9ca3af;
    pointer-events: none;
    transition: 0.2s ease all;
    background: #fafafa;
    z-index: 2;
}

/* Estado activo de la etiqueta flotante */
.search-input:focus + .floating-label[b-5jundi9q4j],
.search-input:not(:placeholder-shown) + .floating-label[b-5jundi9q4j] {
    top: 0.2rem;
    font-size: 0.65rem;
    color: #888;
    background: #fff;
}

/* -------------------------
   Estilo iconos
------------------------- */
.icon[b-5jundi9q4j] {
    font-size: 25px;
    color: gray;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.search-icon[b-5jundi9q4j] {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-45%);
    pointer-events: none;
    
    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

.clear-btn[b-5jundi9q4j] {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-40%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.2rem;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

    /* Estado hover del boton limpiar */
    .clear-btn:hover .icon[b-5jundi9q4j] {
        color: #374151;
    }
/* _content/ErpPowergest/Presentation/Shared/Forms/SelectorHerramienta.razor.rz.scp.css */
/* Selector de herramienta: árbol a la izquierda, ficha de la elegida a la derecha. En pantallas
   estrechas se apilan. Mismo vocabulario visual que las pantallas de tareas (radios, grises, azul). */

.sh[b-amhp8kqlsl] { display: flex; gap: 1rem; border: 1px solid #e3e8ee; border-radius: 10px; background: #fff; overflow: hidden; }
.sh-arbol-col[b-amhp8kqlsl] { flex: 0 0 22rem; max-width: 100%; display: flex; flex-direction: column; border-right: 1px solid #e3e8ee; background: #fafbfc; }
.sh-ficha[b-amhp8kqlsl] { flex: 1 1 14rem; min-width: 0; padding: .9rem 1rem; }

@media (max-width: 700px) {
    .sh[b-amhp8kqlsl] { flex-direction: column; }
    .sh-arbol-col[b-amhp8kqlsl] { flex-basis: auto; border-right: none; border-bottom: 1px solid #e3e8ee; }
}

.sh-buscar[b-amhp8kqlsl] { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-bottom: 1px solid #e3e8ee; background: #fff; }
.sh-buscar-ico[b-amhp8kqlsl] { font-size: 1.1rem; color: #8a97a3; }
.sh-buscar-input[b-amhp8kqlsl] { flex: 1; border: none; outline: none; font-size: .88rem; background: transparent; color: #1f2933; min-width: 0; }

.sh-arbol[b-amhp8kqlsl] { max-height: 19rem; overflow-y: auto; padding: .35rem 0; }

.sh-grupo-cab[b-amhp8kqlsl] { display: flex; align-items: center; gap: .35rem; width: 100%; background: none; border: none; padding: .38rem .6rem; font-size: .86rem; font-weight: 600; color: #2b3a4a; cursor: pointer; text-align: left; }
.sh-grupo-cab:hover[b-amhp8kqlsl] { background: #f0f4f9; }
.sh-grupo-flecha[b-amhp8kqlsl] { font-size: 1.1rem; color: #8a97a3; }
.sh-grupo-ico[b-amhp8kqlsl] { font-size: 1.15rem; color: #2f6fed; }
.sh-grupo-txt[b-amhp8kqlsl] { flex: 1; }
.sh-grupo-n[b-amhp8kqlsl] { font-size: .72rem; color: #8a97a3; background: #eef1f4; border-radius: 999px; padding: 0 .45rem; }

.sh-rama[b-amhp8kqlsl] { border-left: 1px solid #e3e8ee; margin-left: 1.15rem; }

.sh-hoja[b-amhp8kqlsl] { display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: none; padding: .32rem .6rem .32rem .8rem; font-size: .86rem; color: #1f2933; cursor: pointer; text-align: left; border-radius: 0; }
.sh-hoja:hover:not(:disabled)[b-amhp8kqlsl] { background: #f0f4f9; }
.sh-hoja:disabled[b-amhp8kqlsl] { cursor: default; }
.sh-hoja.sh-sel[b-amhp8kqlsl], .sh-hoja.sh-sel:hover[b-amhp8kqlsl] { background: #e8f0fe; color: #1d4ed8; font-weight: 600; }
.sh-hoja-nada[b-amhp8kqlsl] { color: #61707d; margin-bottom: .2rem; padding-left: .6rem; }
.sh-hoja-ico[b-amhp8kqlsl] { font-size: 1.05rem; }
.sh-hoja-txt[b-amhp8kqlsl] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sh-tipo-orden[b-amhp8kqlsl] { color: #2f6fed; }
.sh-tipo-lectura[b-amhp8kqlsl] { color: #61707d; }
.sh-tipo-libre[b-amhp8kqlsl] { color: #a855f7; }

.sh-vacio[b-amhp8kqlsl] { padding: .8rem; color: #8a97a3; font-size: .84rem; font-style: italic; }

/* La ficha de la elegida */
.sh-ficha-cab[b-amhp8kqlsl] { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.sh-ficha-ico[b-amhp8kqlsl] { font-size: 1.6rem; margin-top: .1rem; }
.sh-ficha-titulo[b-amhp8kqlsl] { font-size: 1.02rem; font-weight: 700; color: #1f2933; }
.sh-ficha-sub[b-amhp8kqlsl] { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.sh-badge[b-amhp8kqlsl] { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #eef1f4; color: #61707d; }
.sh-badge-orden[b-amhp8kqlsl] { background: #e3ecfd; color: #1d4ed8; }
.sh-badge-lectura[b-amhp8kqlsl] { background: #eef1f4; color: #61707d; }
.sh-badge-libre[b-amhp8kqlsl] { background: #f3e8ff; color: #7e22ce; }
.sh-ficha-txt[b-amhp8kqlsl] { margin: .4rem 0 .6rem; font-size: .88rem; line-height: 1.5; color: #2b3a4a; }
.sh-ficha-ej-cab[b-amhp8kqlsl] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 600; margin-top: .5rem; }
.sh-ficha-ej[b-amhp8kqlsl] { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: #61707d; font-style: italic; line-height: 1.5; }
.sh-ficha-tec[b-amhp8kqlsl] { margin-top: .8rem; font-size: .74rem; color: #a3adb8; font-family: ui-monospace, Consolas, monospace; }
.sh-ficha-nada[b-amhp8kqlsl] { display: flex; align-items: center; gap: .6rem; color: #8a97a3; font-size: .86rem; padding: .6rem 0; }
.sh-ficha-nada .material-symbols-rounded[b-amhp8kqlsl] { font-size: 1.6rem; }
/* _content/ErpPowergest/Presentation/Shared/Forms/Usuario/EditPerfilForm.razor.rz.scp.css */
.company-image-wrapper[b-0yb4lqt7fn] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1.5rem auto; /* Centrado + separación */
}

.company-image[b-0yb4lqt7fn] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

/* Botón de cámara */
.camera-btn[b-0yb4lqt7fn] {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;

    /* Evitar selección de texto */
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antiguos */
}

    .camera-btn:hover[b-0yb4lqt7fn] {
        background: #f0f0f0;
    }

.icon[b-0yb4lqt7fn] {
    font-size: 22px;
    color: #666;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 900, 'GRAD' 0, 'opsz' 48;
}

/* Input */
.company-input[b-0yb4lqt7fn] {
    margin-bottom: 1.5rem;
}

/* Contenedor: alineación a la derecha */
.modal-actions[b-0yb4lqt7fn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.upload-error[b-0yb4lqt7fn] {
    width:100%;
    margin-bottom:0.75rem;
    color: #c62828;
    font-size: 0.9rem;
    text-align:center;
}

/* ---- BOTONES GENERALES ---- */

.btn[b-0yb4lqt7fn] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align:center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    /* Efecto en hover */
    .btn:hover[b-0yb4lqt7fn] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* Efecto al hacer click */
    .btn:active[b-0yb4lqt7fn] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }


/* Primario (Crear - azul profesional) */
.btn-accept[b-0yb4lqt7fn] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-0yb4lqt7fn] {
        background: #f3f4f6;
    }

/* Secundario (Cancelar - gris con texto blanco) */
.btn-cancel[b-0yb4lqt7fn] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-0yb4lqt7fn] {
        background: #4b5563;
    }
/* _content/ErpPowergest/Presentation/Shared/Guia/GuiaInteractiva.razor.rz.scp.css */
/* Guía «hazlo tú». El velo NO intercepta el ratón: la aplicación sigue usándose por debajo.
   Solo la tarjeta recibe clics. */

/* GI0: por encima de los modales de las fichas (z-index 99999 en los de Artículos): el guion abre un
   modal y tiene que seguir señalando y bloqueando DENTRO de él. Antes, a 1400, el modal tapaba la guía. */
.gu-capa[b-65fijthvtx] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
}

.gu-svg[b-65fijthvtx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Aro alrededor de lo señalado. La transición es lo que hace que el foco «viaje» de un paso al
   siguiente en vez de saltar, y es la mitad de la sensación de fluidez. */
.gu-foco[b-65fijthvtx] {
    position: absolute;
    border: 2px solid #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .18);
    pointer-events: none;
    transition: left .28s cubic-bezier(.4, 0, .2, 1),
                top .28s cubic-bezier(.4, 0, .2, 1),
                width .28s cubic-bezier(.4, 0, .2, 1),
                height .28s cubic-bezier(.4, 0, .2, 1);
}

/* Cuando toca pulsar, el aro late: dice «aquí» sin necesidad de leer nada. */
.gu-foco.pulsa[b-65fijthvtx] {
    animation: gu-latido-b-65fijthvtx 1.6s ease-in-out infinite;
}

@keyframes gu-latido-b-65fijthvtx {
    0%, 100% { box-shadow: 0 0 0 4px rgba(15, 118, 110, .18); }
    50%      { box-shadow: 0 0 0 9px rgba(15, 118, 110, .10); }
}

.gu-tarjeta[b-65fijthvtx] {
    position: fixed;
    z-index: 100001;

    /* ===== Que la tarjeta NO pueda salirse de la ventana =====

       El sitio lo calcula el componente y llega en `--gu-x` / `--gu-y`, pero quien lo ACOTA es el
       navegador, aquí, con las medidas de la ventana de verdad. Se hace así porque el cálculo trabaja
       con el tamaño que la tarjeta tenía al medirla, y entre medias crece: un paso con captura pasa de
       320 a 640 o más cuando la imagen carga, y con el sitio ya escrito se quedaba desbordando por la
       derecha. Con `clamp` eso deja de importar: el valor calculado es una PROPUESTA y el borde manda.

       `clamp(MIN, valor, MAX)` con MAX menor que MIN devuelve MIN, así que en una ventana más pequeña
       que la tarjeta se pega al borde de arriba y de la izquierda, que es lo único razonable.

       Las medidas de la propia tarjeta llegan también en variables porque el CSS no puede leerlas de sí
       mismo; el componente las manda ya medidas. */
    --gu-ancho: 320px;
    --gu-alto: 190px;

    width: var(--gu-ancho);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    box-sizing: border-box;

    /* El sitio propuesto, nunca antes del borde. */
    left: max(12px, var(--gu-x, 12px));
    top: max(12px, var(--gu-y, 12px));

    /* Y el tirón de vuelta cuando se pasa por el otro lado. El `100%` de un `translate` es el tamaño DE
       LA PROPIA TARJETA, que es justo lo que ni el cálculo ni las variables saben a tiempo: la captura
       carga después y la tarjeta crece. Medido en el navegador, se salía 29 px por abajo con el tope
       anterior, que usaba el alto de antes de crecer. Así el desbordamiento lo resuelve el navegador con
       el tamaño de ese instante, y deja de importar cuándo crece. */
    transform: translate(
        min(0px, calc(100vw - 12px - max(12px, var(--gu-x, 12px)) - 100%)),
        min(0px, calc(100vh - 12px - max(12px, var(--gu-y, 12px)) - 100%)));

    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    box-shadow: 0 18px 44px -12px rgba(16, 24, 40, .34);
    padding: 16px 18px;
    transition: left .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1),
                transform .28s cubic-bezier(.4, 0, .2, 1);
}

    .gu-tarjeta.centrada[b-65fijthvtx] {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Ventana demasiado baja para lo que hay que señalar: la tarjeta no cabe al lado y tapa parte.
       Se le da aspecto de panel apoyado —borde marcado y sombra que sube— para que se lea como parte
       de la guía y no como una tarjeta caída encima del contenido por error. */
    .gu-tarjeta.anclada[b-65fijthvtx] {
        border-color: #99f6e4;
        box-shadow: 0 -10px 34px -6px rgba(16, 24, 40, .3), 0 0 0 1px rgba(15, 118, 110, .12);
    }

/* Y si además la ventana es MUY baja, el texto largo se desplaza dentro de la tarjeta en vez de
   estirarla hasta sacar los botones de la pantalla: quedarse sin «Siguiente» deja la guía muerta. */
.gu-contenido[b-65fijthvtx] {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.gu-paso[b-65fijthvtx] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0f766e;
    margin-bottom: 6px;
}

.gu-titulo[b-65fijthvtx] {
    font-size: 16px;
    font-weight: 750;
    color: #0f172a;
    margin-bottom: 6px;
    letter-spacing: -.01em;
}

.gu-texto[b-65fijthvtx] {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}

/* El consejo, en ámbar pastel y no en el verde de las opciones: cuando pista y respuestas iban del
   mismo color, en el índice de operaciones se leían como un solo bloque de botones (mirada del
   2026-09-13). El ámbar es el color de una nota al margen: se ve que es texto, no algo que pulsar. */
.gu-pista[b-65fijthvtx] {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fdf6e7;
    border: 1px solid #f5e6c4;
    border-radius: 9px;
    font-size: 12.5px;
    color: #8a5a1b;
}

/* =========================
   La captura del paso (recorridos del manual)

   La tarjeta con imagen es más ancha: el ancho lo pone el componente en línea, con el tamaño real de la
   captura. Aquí solo el marco, que la separa del fondo claro —una captura clara se funde con la tarjeta
   y parece que falta algo— y el gesto de que se puede ampliar.
========================= */
.gu-img[b-65fijthvtx] {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .gu-img:hover[b-65fijthvtx] {
        border-color: #99f6e4;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    }

    /* Centrada si es más estrecha que la tarjeta: estirarla la dejaría borrosa. El tope de alto es la red
       por si la ventana es más baja de lo que se midió: el texto y los botones siguen entrando. */
    .gu-img img[b-65fijthvtx] {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        max-height: calc(100vh - 260px);
        object-fit: contain;
    }

/* El visor: la captura a tamaño legible, por encima de la tarjeta. Un clic en cualquier sitio vuelve al
   paso; la guía sigue viva por debajo. */
.gu-visor[b-65fijthvtx] {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(15, 23, 42, .82);
    cursor: zoom-out;
}

    .gu-visor img[b-65fijthvtx] {
        max-width: 92vw;
        max-height: 84vh;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5);
    }

.gu-visor-pie[b-65fijthvtx] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .86);
}

.gu-acciones[b-65fijthvtx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.gu-salir[b-65fijthvtx] {
    background: none;
    border: none;
    color: #8493a8;
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 2px;
}

    .gu-salir:hover[b-65fijthvtx] {
        color: #0f172a;
    }

.gu-siguiente[b-65fijthvtx] {
    background: #0f766e;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .gu-siguiente:hover[b-65fijthvtx] {
        background: #0b5f59;
    }

/* =========================
   Las respuestas de un paso que pregunta

   Pastillas que se envuelven, no una lista apilada. Los oficios de hoy son tres, pero mañana pueden ser
   más y la tarjeta NO puede crecer a lo alto: es lo que la echa fuera de la pantalla en una ventana
   baja. Envolviendo, dos opciones caben en una línea y seis en tres, y con dos no se ve vacío.
========================= */
.gu-opciones[b-65fijthvtx] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.gu-opcion[b-65fijthvtx] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 13px;
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .gu-opcion:hover[b-65fijthvtx] {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

/* «Te toca a ti»: ocupa el sitio del botón de avanzar, para que se vea que ahí no hay nada que pulsar. */
.gu-espera[b-65fijthvtx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f766e;
}

.gu-espera-ico[b-65fijthvtx] {
    font-size: 17px;
}

/* Botón de seguir apagado: el paso exige rellenar algo antes. Se deja VISIBLE y no se oculta para que
   se entienda que el camino sigue por ahí en cuanto se escriba. */
.gu-siguiente:disabled[b-65fijthvtx] {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Entrada del contenido al cambiar de paso. Muy corta y muy corta de recorrido a propósito: lo que
   tiene que parecer es que la tarjeta se ha ACTUALIZADO mientras viajaba, no que ha aparecido otra. */
.gu-contenido[b-65fijthvtx] {
    animation: gu-entrar-b-65fijthvtx .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes gu-entrar-b-65fijthvtx {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Volver atrás es secundario: no compite con la acción principal ni con «Salir». */
.gu-atras[b-65fijthvtx] {
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
    margin-right: 8px;
}

    .gu-atras:hover[b-65fijthvtx] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

/* Con «Atrás» en medio, el reparto ya no es «uno a cada lado»: Salir se queda a la izquierda y el
   resto se agrupa a la derecha. */
.gu-acciones[b-65fijthvtx] {
    justify-content: flex-start;
}

.gu-siguiente[b-65fijthvtx],
.gu-espera[b-65fijthvtx] {
    margin-left: auto;
}

.gu-atras + .gu-siguiente[b-65fijthvtx],
.gu-atras + .gu-espera[b-65fijthvtx] {
    margin-left: 0;
}

/* Persianas que bloquean todo salvo lo señalado. Invisibles: lo que se ve es el velo del SVG, esto
   solo intercepta. Separar «lo que se ve» de «lo que bloquea» permite que el velo tenga su recorte
   redondeado y que el bloqueo sea exacto al píxel. */
/* Las persianas que tapan lo que no se señala. Bloquean el CLIC, que es de lo que protegen: que el
   usuario pulse algo que descarrile el recorrido.

   Lo que NO bloquean es la RUEDA. Un paso que señala una lista larga —el resumen de la puesta en
   marcha ocupa tres pantallas— quedaba ilegible: no se podía subir ni bajar para ver lo que se estaba
   explicando. Y desplazarse no descarrila nada; el ancla se sigue midiendo y la tarjeta se recoloca. */
.gu-bloqueo[b-65fijthvtx] {
    position: fixed;
    z-index: 100000;
    background: transparent;
    touch-action: pan-x pan-y;
}

/* =========================
   GI0: modo «mira»

   El actor pulsa y teclea por el usuario. Lo que se ve distinto: el aro no late (no toca pulsar) y en
   el pie hay pausa y «Ahora tú». Sin banda de «modo ensayo»: despista a quien aprende, y la garantía no
   es una banda, es que no se pulsa nada que persista.
========================= */
.gu-modo[b-65fijthvtx] {
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
    margin-right: 8px;
}

    .gu-modo:hover[b-65fijthvtx] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.gu-modo + .gu-siguiente[b-65fijthvtx],
.gu-modo + .gu-espera[b-65fijthvtx],
.gu-modo + .gu-atras[b-65fijthvtx] {
    margin-left: 0;
}

/* El aro mientras el actor trabaja: fijo y algo más marcado, para que se vea DÓNDE está pasando. */
.gu-foco.actua[b-65fijthvtx] {
    border-color: #0f766e;
    box-shadow: 0 0 0 5px rgba(15, 118, 110, .22);
}

/* =========================
   La pantalla es del usuario («ahora tú» en un guion)

   Sin persianas, y el velo casi quitado: una pantalla oscura se lee como bloqueada aunque no lo esté,
   y eso fue lo primero que se vio con ojos de usuario. Queda un tinte para que el aro siga destacando.
========================= */
.gu-capa.libre .gu-velo[b-65fijthvtx] {
    fill: rgba(15, 23, 42, .14);
}

/* =========================
   El pie de un guion: el de un vídeo

   Atrás, pausa/reproducir, adelante como iconos, en el mismo sitio en los dos modos. Lo que cambia
   con el modo es lo de la derecha («Ahora tú» / «Te toca a ti» / «Siguiente»), que es lo que dice
   quién conduce.
========================= */
.gu-transporte[b-65fijthvtx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.gu-ico[b-65fijthvtx] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
}

    .gu-ico .material-symbols-rounded[b-65fijthvtx] {
        font-size: 20px;
    }

    .gu-ico:hover:not(:disabled)[b-65fijthvtx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .gu-ico:disabled[b-65fijthvtx] {
        opacity: .35;
        cursor: default;
    }

/* Lo que tiene que hacer el usuario, con su rótulo. Va en el cuerpo y no en el pie: en el pie se
   leía como un botón. */
.gu-turno[b-65fijthvtx] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f0fdfa;
    border: 1px dashed #99f6e4;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f766e;
    line-height: 1.4;
}

/* Con el transporte delante, lo de la derecha ya no necesita empujarse solo. */
.gu-transporte ~ .gu-modo[b-65fijthvtx],
.gu-transporte ~ .gu-siguiente[b-65fijthvtx],
.gu-transporte ~ .gu-espera[b-65fijthvtx] {
    margin-left: 8px;
    margin-right: 0;
}
/* _content/ErpPowergest/Presentation/Shared/Header/Boardheader.razor.rz.scp.css */
/* ===== HEADER ===== */
.board-header[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

/* ===== CABECERA SOBRE UN FONDO =====
   Con fondo, la cabecera es una franja de lado a lado con un velo semitransparente encima del propio
   fondo (--velo-cabecera, calculado en Application por contraste WCAG): sobre un degradado azul queda
   un azul más oscuro, sobre una foto, la foto oscurecida. Todo lo que va dentro pasa al tono contrario
   del velo, y los botones dejan de ser cajas blancas para ser translúcidos, como la franja.
   Sin backdrop-filter a propósito: crearía un contexto de apilamiento y las columnas, que vienen
   después, taparían los desplegables de la cabecera. */
.board-header.tematizada[b-9h7m9shyo0] {
    margin-bottom: 14px;
    padding: 10px 16px;
    background: var(--velo-cabecera);
    transition: background 0.25s ease;
}

.board-header.tema-oscuro[b-9h7m9shyo0] {
    --tema-texto: #ffffff;
    --tema-texto-suave: rgba(255, 255, 255, 0.78);
    --tema-control: rgba(255, 255, 255, 0.16);
    --tema-control-hover: rgba(255, 255, 255, 0.28);
    --tema-control-borde: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.board-header.tema-claro[b-9h7m9shyo0] {
    --tema-texto: #172b4d;
    --tema-texto-suave: #44546f;
    --tema-control: rgba(255, 255, 255, 0.6);
    --tema-control-hover: rgba(255, 255, 255, 0.88);
    --tema-control-borde: rgba(9, 30, 66, 0.14);
    box-shadow: inset 0 -1px 0 rgba(9, 30, 66, 0.08);
}

    .board-header.tematizada .board-info h2[b-9h7m9shyo0] {
        color: var(--tema-texto);
    }

        .board-header.tematizada .board-info h2.editable:hover[b-9h7m9shyo0] {
            background: var(--tema-control);
        }

    .board-header.tematizada .owner-tag[b-9h7m9shyo0] {
        color: var(--tema-texto-suave);
    }

    /* Los botones de la barra leen sus colores de variables (css/botones.css): se cambian aquí, en el
       propio botón, para que no se hereden a los desplegables que cuelgan de la cabecera. */
    .board-header.tematizada .btn-barra[b-9h7m9shyo0],
    .board-header.tematizada .btn-barra--crear[b-9h7m9shyo0] {
        --cb-f: var(--tema-control);
        --cb-b: var(--tema-control-borde);
        --cb-t: var(--tema-texto);
        --cb-i: var(--tema-texto);
        --cb-hf: var(--tema-control-hover);
        --cb-hb: var(--tema-control-borde);
        --cb-ht: var(--tema-texto);
        box-shadow: none;
    }

    .board-header.tematizada .btn-back[b-9h7m9shyo0] {
        background: var(--tema-control);
        border-color: var(--tema-control-borde);
        color: var(--tema-texto) !important;
    }

        .board-header.tematizada .btn-back:hover[b-9h7m9shyo0] {
            background: var(--tema-control-hover);
            border-color: var(--tema-control-borde);
        }

    .board-header.tematizada .miembros-btn:hover[b-9h7m9shyo0],
    .board-header.tematizada .miembros-btn.open[b-9h7m9shyo0] {
        background: var(--tema-control);
    }

    .board-header.tematizada .board-actions[b-9h7m9shyo0]  .filtro-boton {
        background: var(--tema-control);
        border-color: var(--tema-control-borde);
        color: var(--tema-texto);
        box-shadow: none;
    }

        .board-header.tematizada .board-actions[b-9h7m9shyo0]  .filtro-boton:hover,
        .board-header.tematizada .board-actions[b-9h7m9shyo0]  .filtro-boton.abierto {
            background: var(--tema-control-hover);
            border-color: var(--tema-control-borde);
            color: var(--tema-texto);
        }

/* El título y su input comparten caja EXACTA: mismo alto, tipografía, padding y borde. Por eso el h2
   lleva un borde transparente (reserva el sitio del azul del input) y ambos fijan line-height: si se
   deja el que trae cada uno de fábrica, al entrar en edición la cabecera pega un salto. El padding
   izquierdo se compensa con el margen negativo, así el título sigue alineado con "Propietario:". */
.board-info h2[b-9h7m9shyo0],
.board-title-input[b-9h7m9shyo0] {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 1px 6px;
    margin: 0 0 0 -6px;
    border: 1px solid transparent;
    border-radius: 7px;
}

    /* El título se puede renombrar de un clic: se insinúa al pasar por encima. */
    .board-info h2.editable[b-9h7m9shyo0] {
        cursor: text;
        transition: background 0.15s ease;
    }

        .board-info h2.editable:hover[b-9h7m9shyo0] {
            background: #f1f5f9;
        }

.board-title-input[b-9h7m9shyo0] {
    font-family: inherit;
    width: 100%;
    min-width: 220px;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.owner-tag[b-9h7m9shyo0] {
    font-size: 12px;
    color: #6b7280;
}

.board-actions[b-9h7m9shyo0] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* El botón «Filtros» llega de la página (AccionesExtra) y es un componente compartido con el panel del CRM:
   aquí, en la cabecera del tablero, se viste como los demás botones de la barra (btn-barra). */
.board-header .board-actions[b-9h7m9shyo0]  .filtro-boton {
    height: 48px;
    box-sizing: border-box;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border-color: var(--cb-neutro-borde, #d0d7de);
    box-shadow: var(--cb-sombra, none);
    color: var(--cb-neutro-texto, #374151);
    font-size: 11px;
}

    .board-header .board-actions[b-9h7m9shyo0]  .filtro-boton:hover,
    .board-header .board-actions[b-9h7m9shyo0]  .filtro-boton.abierto {
        background: var(--cb-neutro-hover-fondo, #f6f8fa);
        border-color: var(--cb-neutro-hover-borde, #afb8c1);
        color: var(--cb-neutro-hover-texto, #111827);
    }

    .board-header .board-actions[b-9h7m9shyo0]  .filtro-boton > .material-symbols-rounded:first-child { font-size: 20px; }

/* El nombre del tablero en su botón: corto, con puntos suspensivos si no cabe. */
.board-actions .board-switcher-name[b-9h7m9shyo0] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ===== AVATARS ===== */
.member-avatars[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    /* Sin gap: el solapamiento se hace con margen negativo por avatar (ver .avatar + .avatar). */
    gap: 0;
}

/* ===== PANEL DE MIEMBROS ===== */
.miembros-wrapper[b-9h7m9shyo0] {
    position: relative;
}

/* Los avatares son el botón. Al pasar el ratón se enciende una pastilla detrás del grupo: dice que se
   puede pinchar sin mover ni un píxel, que es justo lo que hacía mal el efecto de antes. El colchón se
   compensa con el margen negativo, así la pastilla cabe sin empujar la cabecera. Se queda encendida
   mientras el panel está abierto, para saber de dónde ha salido. */
.miembros-btn[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: none;
    padding: 6px;
    margin: -6px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .miembros-btn:hover[b-9h7m9shyo0],
    .miembros-btn.open[b-9h7m9shyo0] {
        background: #e0e7ff;
    }

    /* Los que de verdad acusan el hover son los avatares: tapan el botón entero y del fondo apenas asoma
       un borde, así que teñirlo a él solo no se ve. Oscurecerlos a ellos sí, y no mueve nada. Un solo
       escalón desde el azul base: es el mismo tono de hover que usan los botones azules del CRM. */
    .miembros-btn:hover .avatar[b-9h7m9shyo0],
    .miembros-btn.open .avatar[b-9h7m9shyo0] {
        background: #1d4ed8;
    }

/* Capa invisible para cerrar al hacer clic en cualquier sitio. Por debajo del panel, y por debajo
   también del backdrop del CrmDropdown (1200): con un rol desplegado, el primer clic fuera cierra solo
   el desplegable y deja el panel abierto. */
.miembros-backdrop[b-9h7m9shyo0] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* Cuelga hacia la IZQUIERDA: los avatares viven en la mitad derecha de la cabecera, así que anclado a
   la izquierda el panel se sale de la pantalla. */
.miembros-dropdown[b-9h7m9shyo0] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 340px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    padding: 8px;
}

.miembros-title[b-9h7m9shyo0] {
    margin: 4px 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

.miembro-fila[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
}

    .miembro-fila:hover[b-9h7m9shyo0] {
        background: #f9fafb;
    }

    /* Dentro del panel los avatares son una lista, no una pila: aquí no se solapan. */
    .miembro-fila .avatar[b-9h7m9shyo0] {
        width: 30px;
        height: 30px;
        margin-left: 0;
    }

.miembro-datos[b-9h7m9shyo0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.miembro-nombre[b-9h7m9shyo0] {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.miembro-email[b-9h7m9shyo0] {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rol que no se puede tocar: el del propietario, y el que ve quien no es administrador. */
.miembro-rol-fijo[b-9h7m9shyo0] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.miembro-rol-dd[b-9h7m9shyo0] {
    width: 138px;
    flex-shrink: 0;
}

/* ::deep para alcanzar dentro del CrmDropdown: su CSS tiene su propio ámbito y desde aquí no se llega.
   Viene con alto de campo de formulario (38px), que en una fila de lista abulta demasiado. */
.miembro-rol-dd[b-9h7m9shyo0]  .crm-dd-trigger {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
}

.miembro-expulsar[b-9h7m9shyo0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 4px;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .miembro-expulsar .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 18px;
    }

    .miembro-expulsar:hover[b-9h7m9shyo0] {
        background: #fef2f2;
        color: #dc2626;
    }

/* Expulsar no tiene vuelta atrás (habría que reinvitar), y el botón está a un clic de un desplegable:
   se pregunta antes, en la propia fila. */
.miembro-confirmar[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.miembro-confirmar-texto[b-9h7m9shyo0] {
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
}

.miembro-confirmar-si[b-9h7m9shyo0],
.miembro-confirmar-no[b-9h7m9shyo0] {
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 7px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.miembro-confirmar-si[b-9h7m9shyo0] {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
}

    .miembro-confirmar-si:hover[b-9h7m9shyo0] {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #b91c1c;
    }

.miembro-confirmar-no[b-9h7m9shyo0] {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
}

    .miembro-confirmar-no:hover[b-9h7m9shyo0] {
        background: #f3f4f6;
        color: #111827;
    }

.avatar[b-9h7m9shyo0] {
    width: 34px;
    height: 34px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16,24,40,0.12);
    border: 2px solid white;
    position: relative;
    flex-shrink: 0;
    /* Solo el color: las transiciones de margen y transform son las que hacían bailar al grupo. */
    transition: background 0.15s ease;
}

/* Apilados y quietos, como los de la cabecera de la columna: antes se separaban al pasar el ratón y el
   de debajo del cursor se elevaba, así que el grupo se movía justo cuando ibas a pulsarlo. Ahora que
   abren el panel de miembros, el sitio donde apuntas tiene que ser el sitio donde clicas. */
.avatar + .avatar[b-9h7m9shyo0] {
    margin-left: -12px;
}

/* ===== BOTONES ===== */
/* Todos los botones de la cabecera comparten la MISMA altura (38px, la del grupo de avatares) y
   box-sizing: border-box, así que quedan alineados verticalmente en una sola línea sin importar
   qué padding/icono lleve cada uno dentro. */
.btn-back[b-9h7m9shyo0],
.btn-primary[b-9h7m9shyo0],
.btn-secondary[b-9h7m9shyo0],
.board-switcher-btn[b-9h7m9shyo0] {
    height: 38px;
    box-sizing: border-box;
}

.btn-back[b-9h7m9shyo0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-decoration: none !important;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .btn-back:hover[b-9h7m9shyo0] {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }

    .btn-back .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 19px;
    }

.btn-primary[b-9h7m9shyo0],
.btn-secondary[b-9h7m9shyo0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Misma caja que el selector de tablero (.board-switcher-btn): mismo alto (38px, arriba) y mismo
       padding horizontal, así Invitar y el selector se ven idénticos de tamaño y no rompen la línea de
       la cabecera. El borde transparente reserva el píxel del borde para igualar el ancho con los
       botones que sí lo llevan (selector y "más opciones"). */
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Color y hover: .btn-azul-crm (app.css). El tamaño lo hereda de .btn. */
.btn-primary[b-9h7m9shyo0] {
    color: white;
}

.btn-secondary[b-9h7m9shyo0] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

    /* «btn-secondary» es TAMBIÉN una clase de Bootstrap, que está cargado: su `:focus` pinta el botón
       gris oscuro y deja un halo de 4px (`box-shadow: 0 0 0 .25rem rgba(130,138,145,.5)`) que se queda
       puesto tras hacer clic — el «borde alrededor» que parecía que el botón seguía pulsado. Se anula
       aquí, donde el selector con ámbito gana por especificidad.
       ORDEN IMPORTANTE: esta regla va ANTES que la de :hover. Al empatar en especificidad manda la
       última, y si fuera al revés el botón perdería el hover justo después de pulsarlo. */
    .btn-secondary:focus[b-9h7m9shyo0],
    .btn-secondary:active[b-9h7m9shyo0] {
        background: #ffffff;
        border-color: #e5e7eb;
        color: #374151;
        box-shadow: none;
        outline: none;
    }

    /* Hover IDÉNTICO al del selector de tablero de al lado (.board-switcher-btn:hover): mismo fondo y
       mismo borde. Antes llevaba además `transform: translateY(-1px)` y el botón daba un saltito que
       su vecino no daba — eran dos gestos distintos para dos botones pegados. */
    .btn-secondary:hover[b-9h7m9shyo0],
    .btn-secondary:focus:hover[b-9h7m9shyo0] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    /* El foco por TECLADO sí se ve: quitarlo del todo dejaría a quien navega con el tabulador sin
       saber dónde está. Con ratón, `:focus-visible` no se activa, así que no reaparece el halo. */
    .btn-secondary:focus-visible[b-9h7m9shyo0] {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

    .btn-secondary .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 19px;
    }

.btn-delete[b-9h7m9shyo0] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .btn-delete:hover[b-9h7m9shyo0] {
        background: #ffebe6;
        color: #0f172a;
    }

.btn-icon[b-9h7m9shyo0] {
    /* 16px como el chevron del selector de tablero: así ambos botones tienen la misma altura de línea
       y, con el mismo padding, la misma altura total. */
    font-size: 16px;
}

/* ===== MÁS OPCIONES ===== */
.mas-opciones-wrapper[b-9h7m9shyo0] {
    position: relative;
    display: inline-block;
}

/* El menú y el panel del fondo cuelgan de la misma capa, uno al lado del otro: el panel crece hacia la
   izquierda porque el botón está pegado al borde derecho de la pantalla. */
.mas-opciones-capa[b-9h7m9shyo0] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mas-opciones-dropdown[b-9h7m9shyo0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* En pantallas estrechas no caben los dos de lado: el panel pasa debajo del menú. */
@media (max-width: 640px) {
    .mas-opciones-capa[b-9h7m9shyo0] {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
}

/* Mini muestra del fondo actual, al final de su opción. Sin fondo, un cuadro punteado. */
.fondo-actual[b-9h7m9shyo0] {
    margin-left: auto;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background-clip: padding-box;
}

    .fondo-actual.vacio[b-9h7m9shyo0] {
        border: 1px dashed #cbd5e1;
        background: #ffffff;
    }

.mas-opciones-item.activo[b-9h7m9shyo0] {
    background: #f1f5f9;
    color: #0f172a;
}

.mas-opciones-item[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .mas-opciones-item:last-child[b-9h7m9shyo0] {
        border-bottom: none;
    }

    .mas-opciones-item:hover[b-9h7m9shyo0] {
        background: #f1f5f9;
        color: #1e293b;
    }

    .mas-opciones-item .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 18px;
        color: #6b7280;
    }

.sub-panel[b-9h7m9shyo0] {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== ETIQUETAS ===== */
.etiquetas-dropdown-title[b-9h7m9shyo0] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.etiquetas-empty[b-9h7m9shyo0] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
    padding: 8px 0;
}

.etiquetas-lista[b-9h7m9shyo0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.etiqueta-fila[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

    .etiqueta-fila:hover[b-9h7m9shyo0] {
        background: #f8fafc;
    }

.etiqueta-color-dot[b-9h7m9shyo0] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.etiqueta-nombre[b-9h7m9shyo0] {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.btn-editar-etiqueta[b-9h7m9shyo0] {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}

.etiqueta-fila:hover .btn-editar-etiqueta[b-9h7m9shyo0] {
    opacity: 1;
    pointer-events: auto;
}

.btn-editar-etiqueta:hover[b-9h7m9shyo0] {
    background: #e2e8f0;
}

    .btn-editar-etiqueta .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 15px;
        color: #64748b;
    }

.btn-crear-etiqueta[b-9h7m9shyo0] {
    width: 100%;
    padding: 8px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-weight: 500;
}

    .btn-crear-etiqueta:hover[b-9h7m9shyo0] {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #94a3b8;
    }

.etiqueta-form-header[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-volver[b-9h7m9shyo0] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

    .btn-volver:hover[b-9h7m9shyo0] {
        background: #f1f5f9;
        color: #1e293b;
    }

.etiqueta-color-label[b-9h7m9shyo0] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.color-picker-grid[b-9h7m9shyo0] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.color-swatch[b-9h7m9shyo0] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

    .color-swatch:hover[b-9h7m9shyo0] {
        transform: scale(1.15);
        border-color: #1e293b;
    }

    .color-swatch.selected[b-9h7m9shyo0] {
        border-color: #1e293b;
        transform: scale(1.15);
        box-shadow: 0 0 0 2px white, 0 0 0 4px #1e293b;
    }

.etiqueta-preview[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.form-actions[b-9h7m9shyo0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.checklist-input[b-9h7m9shyo0] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .checklist-input:focus[b-9h7m9shyo0] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }

/* ===== INVITAR ===== */
.invitar-wrapper[b-9h7m9shyo0] {
    position: relative;
    display: inline-block;
    /* Va dentro de .member-avatars (gap:0), así que se separa del grupo apilado a mano. */
    margin-left: 12px;
}

.invitar-dropdown[b-9h7m9shyo0] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(9,30,66,0.15);
    min-width: 220px;
    padding: 8px;
    z-index: 200;
}

.invitar-rol-toggle[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid #ebecf0;
    margin-bottom: 4px;
}

.invitar-rol-label[b-9h7m9shyo0] {
    font-size: 0.85rem;
    color: #a5adba;
    font-weight: 500;
    transition: color 0.2s;
}

    .invitar-rol-label.activo[b-9h7m9shyo0] {
        color: #172b4d;
        font-weight: 600;
    }

.toggle-switch[b-9h7m9shyo0] {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    padding: 0;
    background: #dfe1e6;
}

    .toggle-switch.on[b-9h7m9shyo0] {
        background: #0052cc;
    }

.toggle-knob[b-9h7m9shyo0] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
    display: block;
}

.toggle-switch.on .toggle-knob[b-9h7m9shyo0] {
    transform: translateX(16px);
}

/* Rótulo de los dos bloques del desplegable («De mi empresa» / «De fuera»). Es lo que explica sin
   una línea de ayuda cuándo usar cada vía: a los de tu empresa los eliges, a los de fuera los
   invitas. */
.invitar-grupo[b-9h7m9shyo0] {
    margin: 8px 0 2px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8993a4;
}

.invitar-grupo:first-of-type[b-9h7m9shyo0] {
    margin-top: 2px;
}

.invitar-item[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #172b4d;
    text-align: left;
    transition: background 0.15s;
}

    .invitar-item:hover[b-9h7m9shyo0] {
        background: #f4f5f7;
    }

    .invitar-item .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 16px;
        color: #3b82f6;
    }

.invitar-copiado[b-9h7m9shyo0] {
    color: #00875a;
    font-weight: 500;
    cursor: default;
}

    .invitar-copiado .material-symbols-rounded[b-9h7m9shyo0] {
        color: #00875a;
    }

.invitar-correo-form[b-9h7m9shyo0] {
    padding: 8px 4px 4px 4px;
    border-top: 1px solid #ebecf0;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invitar-correo-header[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-volver-correo[b-9h7m9shyo0] {
    background: transparent;
    border: none;
    color: #6b778c;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

    .btn-volver-correo:hover[b-9h7m9shyo0] {
        background: #ebecf0;
    }

.invitar-correo-title[b-9h7m9shyo0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #172b4d;
}

.invitar-correo-input[b-9h7m9shyo0] {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #dfe1e6;
    border-radius: 4px;
    font-size: 0.88rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

    .invitar-correo-input:focus[b-9h7m9shyo0] {
        border-color: #4c9aff;
        outline: none;
    }

.invitar-resetear[b-9h7m9shyo0] {
    border-top: 1px solid #ebecf0;
    margin-top: 4px;
    padding-top: 8px;
    font-size: 0.85rem;
}

    .invitar-resetear:hover[b-9h7m9shyo0] {
        color: #172b4d;
        background: #ffebe6;
    }

/* ===== SELECTOR DE TABLERO ===== */
.board-switcher[b-9h7m9shyo0] {
    position: relative;
    display: inline-block;
}

.board-switcher-btn[b-9h7m9shyo0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 220px;
    padding: 0 8px 0 14px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .board-switcher-btn:hover[b-9h7m9shyo0],
    .board-switcher-btn.open[b-9h7m9shyo0] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

.board-switcher-name[b-9h7m9shyo0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-switcher-btn .chevron[b-9h7m9shyo0] {
    font-size: 16px;
    color: #6b7280;
    transition: transform 0.15s ease;
}

.board-switcher-btn.open .chevron[b-9h7m9shyo0] {
    transform: rotate(180deg);
}

.board-switcher-dropdown[b-9h7m9shyo0] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    max-width: min(260px, 80vw);
    max-height: 60vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
    padding: 6px;
    z-index: 400;
    animation: switcherFade-b-9h7m9shyo0 0.15s ease-out;
}

.board-switcher-actual[b-9h7m9shyo0] {
    padding: 8px 12px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.board-switcher-lista[b-9h7m9shyo0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid #f0f1f3;
    padding-top: 4px;
    margin-top: 2px;
}

.board-switcher-item[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

    .board-switcher-item:hover[b-9h7m9shyo0] {
        background: #f3f4f6;
    }

.board-switcher-dot[b-9h7m9shyo0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

.board-switcher-item-name[b-9h7m9shyo0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-switcher-nuevo[b-9h7m9shyo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    margin-top: 4px;
    border-top: 1px solid #f0f1f3;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease;
}

    .board-switcher-nuevo:hover[b-9h7m9shyo0] {
        background: #eff4ff;
    }

    .board-switcher-nuevo .material-symbols-rounded[b-9h7m9shyo0] {
        font-size: 18px;
    }

@keyframes switcherFade-b-9h7m9shyo0 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/ErpPowergest/Presentation/Shared/Header/FondoTableroSelector.razor.rz.scp.css */
/* ===== FONDO DE PANTALLA DEL TABLERO =====
   Panel aparte, a la izquierda del menú de Opciones. Muestras cuadradas de dos en dos: lo bastante
   grandes para juzgar un degradado, y una columna de dos que cabe al lado del menú sin taparlo. */

.fondo-panel[b-jnroisarm8] {
    width: 212px;
    max-height: min(560px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: fondo-entra-b-jnroisarm8 0.14s ease-out;
}

@keyframes fondo-entra-b-jnroisarm8 {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: none; }
}

.fondo-cabecera[b-jnroisarm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 8px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.fondo-titulo[b-jnroisarm8] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.fondo-cerrar[b-jnroisarm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .fondo-cerrar:hover[b-jnroisarm8] {
        background: #f1f5f9;
        color: #334155;
    }

    .fondo-cerrar .material-symbols-rounded[b-jnroisarm8] {
        font-size: 18px;
    }

/* Solo el cuerpo se desplaza: la cabecera con su «cerrar» queda siempre a la vista. */
.fondo-cuerpo[b-jnroisarm8] {
    padding: 12px 14px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fondo-seccion[b-jnroisarm8] {
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fondo-rejilla[b-jnroisarm8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* ===== MUESTRA ===== */

.fondo-item[b-jnroisarm8] {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #f8fafc;
    background-clip: padding-box;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

    .fondo-item:hover:not(:disabled)[b-jnroisarm8] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
    }

    .fondo-item:focus-visible[b-jnroisarm8],
    .fondo-item:focus-within[b-jnroisarm8] {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #93c5fd;
    }

    /* El elegido: doble anillo (blanco + azul) para que se lea igual sobre un degradado claro que oscuro. */
    .fondo-item.seleccionado[b-jnroisarm8] {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
    }

    .fondo-item:disabled[b-jnroisarm8],
    .fondo-item.ocupado[b-jnroisarm8] {
        cursor: progress;
        opacity: 0.7;
    }

    .fondo-item .material-symbols-rounded[b-jnroisarm8] {
        font-size: 22px;
    }

.fondo-item-texto[b-jnroisarm8] {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.fondo-ninguno[b-jnroisarm8] {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #ffffff;
}

.fondo-subir[b-jnroisarm8] {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #ffffff;
}

    /* Con imagen puesta, la muestra ES la imagen; el rótulo va sobre un velo para leerse encima de cualquier foto. */
    .fondo-subir.con-imagen[b-jnroisarm8] {
        border-style: solid;
        color: #ffffff;
    }

        .fondo-subir.con-imagen[b-jnroisarm8]::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: rgba(15, 23, 42, 0.38);
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .fondo-subir.con-imagen:hover[b-jnroisarm8]::before,
        .fondo-subir.con-imagen:focus-within[b-jnroisarm8]::before,
        .fondo-subir.con-imagen.ocupado[b-jnroisarm8]::before {
            opacity: 1;
        }

        .fondo-subir.con-imagen.ocupado > .fondo-item-texto[b-jnroisarm8],
        .fondo-subir.con-imagen.ocupado > .fondo-spinner[b-jnroisarm8] {
            position: relative;
            opacity: 1;
        }

        .fondo-subir.con-imagen > .material-symbols-rounded[b-jnroisarm8],
        .fondo-subir.con-imagen > .fondo-item-texto[b-jnroisarm8] {
            position: relative;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .fondo-subir.con-imagen:hover > .material-symbols-rounded[b-jnroisarm8],
        .fondo-subir.con-imagen:hover > .fondo-item-texto[b-jnroisarm8],
        .fondo-subir.con-imagen:focus-within > .material-symbols-rounded[b-jnroisarm8],
        .fondo-subir.con-imagen:focus-within > .fondo-item-texto[b-jnroisarm8] {
            opacity: 1;
        }

/* El <input type="file"> cubre la muestra entera, invisible: recibe el clic y el foco del teclado. */
.fondo-subir[b-jnroisarm8]  .fondo-archivo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

    .fondo-subir[b-jnroisarm8]  .fondo-archivo:disabled {
        cursor: progress;
    }

.fondo-check[b-jnroisarm8] {
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.fondo-spinner[b-jnroisarm8] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: fondo-gira-b-jnroisarm8 0.8s linear infinite;
}

@keyframes fondo-gira-b-jnroisarm8 {
    to { transform: rotate(360deg); }
}

.fondo-error[b-jnroisarm8] {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .fondo-panel[b-jnroisarm8],
    .fondo-spinner[b-jnroisarm8] {
        animation: none;
    }

    .fondo-item[b-jnroisarm8] {
        transition: none;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Kpi/KpiCard.razor.rz.scp.css */
/* =========================
   KPI CARD
========================= */

.kpi-card[b-8mzul5x8v5] {
    background: #ffffff;
    border-radius: 16px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
}

/* ===== TOP ===== */

.kpi-top[b-8mzul5x8v5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kpi-icon-wrapper[b-8mzul5x8v5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    background: color-mix(in srgb, var(--kpi-color) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon[b-8mzul5x8v5] {
    user-select:none;
    color: var(--kpi-color);
    font-size: 24px;
    font-variation-settings: 'wght' 500;
}

.kpi-titles[b-8mzul5x8v5] {
    display: flex;
    flex-direction: column;
}

.kpi-title[b-8mzul5x8v5] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.kpi-subtitle[b-8mzul5x8v5] {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* ===== VALUE ===== */

.kpi-main[b-8mzul5x8v5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.kpi-value[b-8mzul5x8v5] {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.5px;
}

/* ===== TREND ===== */

.kpi-trend[b-8mzul5x8v5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
}

.trend-up[b-8mzul5x8v5] {
    background: rgba(22,163,74,0.1);
    color: #16a34a;
}

.trend-down[b-8mzul5x8v5] {
    background: rgba(220,38,38,0.1);
    color: #dc2626;
}

.trend-neutral[b-8mzul5x8v5] {
    background: rgba(100,116,139,0.1);
    color: #64748b;
}

.kpi-trend-icon[b-8mzul5x8v5] {
    font-size: 18px;
}

/* ===== TARGET ===== */

.kpi-target[b-8mzul5x8v5] {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ===== RESPONSIVE MOVIL ======*/
@media (max-width: 640px) {

    .kpi-card[b-8mzul5x8v5] {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .kpi-top[b-8mzul5x8v5] {
        gap: 0.6rem;
    }

    .kpi-icon-wrapper[b-8mzul5x8v5] {
        width: 34px;
        height: 34px;
    }

    .kpi-icon[b-8mzul5x8v5] {
        font-size: 20px;
    }

    .kpi-title[b-8mzul5x8v5] {
        font-size: 0.65rem;
    }

    .kpi-subtitle[b-8mzul5x8v5] {
        font-size: 0.65rem;
    }

    .kpi-main[b-8mzul5x8v5] {
        align-items: flex-start;
        gap: 0.4rem;
    }

    .kpi-value[b-8mzul5x8v5] {
        font-size: 1.6rem;
    }

    .kpi-trend[b-8mzul5x8v5] {
        font-size: 0.8rem;
        padding: 3px 8px;
    }

    .kpi-trend-icon[b-8mzul5x8v5] {
        font-size: 16px;
    }
}

/* ===== RESPONSIVE TABLET ======*/
@media (min-width: 641px) and (max-width: 1024px) {

    .kpi-card[b-8mzul5x8v5] {
        padding: 1rem;
    }

    .kpi-icon-wrapper[b-8mzul5x8v5] {
        width: 44px;
        height: 44px;
    }

    .kpi-icon[b-8mzul5x8v5] {
        font-size: 22px;
    }

    .kpi-value[b-8mzul5x8v5] {
        font-size: 1.8rem;
    }
}


/* ===== RESPONSIVE DESKTOP ======*/
@media (min-width: 1400px) {

    .kpi-card[b-8mzul5x8v5] {
        padding: 1.25rem;
    }

    .kpi-value[b-8mzul5x8v5] {
        font-size: 2.2rem;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Kpi/Sparkline.razor.rz.scp.css */
.sparkline[b-u5uaq6hk2m] {
    opacity: 0.8;
}

    .sparkline:hover[b-u5uaq6hk2m] {
        opacity: 1;
    }
/* _content/ErpPowergest/Presentation/Shared/Modal/ConfirmarBorrado.razor.rz.scp.css */
/* Confirmación de borrado del CRM. Toma la forma del modal de «abandonar tablero» (icono de aviso +
   título en pregunta), que era el más claro de los que había. */

.cb-overlay[b-abbapz48at] {
    position: fixed;
    inset: 0;
    z-index: 3000;   /* por encima del modal de tarjeta, que ya vive alto */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    animation: cbFundido-b-abbapz48at 0.12s ease;
}

.cb-modal[b-abbapz48at] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 64px -12px rgba(16, 24, 40, 0.32);
    overflow: hidden;
    animation: cbEntrada-b-abbapz48at 0.14s ease;
}

@keyframes cbFundido-b-abbapz48at {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cbEntrada-b-abbapz48at {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cb-head[b-abbapz48at] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 0;
}

.cb-icono[b-abbapz48at] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    flex-shrink: 0;
}

    .cb-icono .material-symbols-rounded[b-abbapz48at] {
        font-size: 20px;
    }

.cb-titulo[b-abbapz48at] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.cb-cuerpo[b-abbapz48at] {
    padding: 12px 20px 18px 68px;   /* alineado con el título, no con el icono */
}

.cb-texto[b-abbapz48at] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}

    .cb-texto strong[b-abbapz48at] {
        color: #0f172a;
        font-weight: 600;
    }

.cb-pie[b-abbapz48at] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
}

.cb-btn[b-abbapz48at] {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .cb-btn:disabled[b-abbapz48at] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.cb-btn-cancelar[b-abbapz48at] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

    .cb-btn-cancelar:hover:not(:disabled)[b-abbapz48at] {
        background: #f8fafc;
        border-color: #94a3b8;
    }

/* Rojo: la acción destructiva se distingue a simple vista de la de escape. */
.cb-btn-eliminar[b-abbapz48at] {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #ffffff;
}

    .cb-btn-eliminar:hover:not(:disabled)[b-abbapz48at] {
        background: #b91c1c;
        border-color: #b91c1c;
    }
/* _content/ErpPowergest/Presentation/Shared/Modal/ConfirmDialog.razor.rz.scp.css */
/* Contenedor: alineación a la derecha */

.modal-actions[b-ts677qqpeo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-message[b-ts677qqpeo] {
    width: 100%;
    margin-bottom: 0.75rem;
    color: #111827;
    font-size: 0.95rem;
    text-align: justify;
}

/* ---- BOTONES GENERALES ---- */

.btn[b-ts677qqpeo] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
    /* Efecto en hover */

    .btn:hover[b-ts677qqpeo] {
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }
    /* Efecto al hacer click */

    .btn:active[b-ts677qqpeo] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
/* Primario (Crear - azul profesional) */

.btn-primary[b-ts677qqpeo] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-primary:hover[b-ts677qqpeo] {
        background: #f3f4f6;
    }
/* Secundario (Cancelar - gris con texto blanco) */

.btn-secondary[b-ts677qqpeo] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-secondary:hover[b-ts677qqpeo] {
        background: #4b5563;
    }
/* _content/ErpPowergest/Presentation/Shared/Modal/Modal.razor.rz.scp.css */
/* Fondo oscuro con blur y fade */
.modal-overlay[b-6p0tk9mwjo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .25s ease;
    z-index: 999999 !important;
}

    .modal-overlay.visible[b-6p0tk9mwjo] {
        opacity: 1;
        pointer-events: auto;
    }

    .modal-overlay.hidden[b-6p0tk9mwjo] {
        opacity: 0;
        pointer-events: none;
    }

.modal-container.closing[b-6p0tk9mwjo] {
    transform: translateY(15px) scale(.97);
    opacity: 0;
}

/* Contenedor del modal
   Tres piezas en columna: cabecera y pie con su alto natural, cuerpo elástico en medio. El `max-height`
   es lo que evita que un diálogo alto se salga de la ventana —el overlay no se desplaza, así que lo
   que sobresale quedaría cortado y fuera de alcance—; al toparse con él, el que cede es el cuerpo. */
.modal-container[b-6p0tk9mwjo] {
    background: #ffffff;
    border-radius: 14px;
    padding: 0.5rem;
    width: 480px;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15), 0px 8px 32px rgba(0,0,0,0.08);
    transform: translateY(15px) scale(.97);
    opacity: 0;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La cabecera y el pie no se comprimen ni se desplazan: son el marco del diálogo. */
.modal-header[b-6p0tk9mwjo],
.modal-footer[b-6p0tk9mwjo] {
    flex: 0 0 auto;
}

/* Zona de acciones, con el MISMO aspecto que la de los modales que pintan su propio marco
   (.art-modal-actions y compañía): línea que la separa del cuerpo, botones a 24px del borde y aire
   debajo. Se define AQUÍ y no en cada modal para que sea una sola pieza: quien usa <Footer> solo pone
   los botones dentro.

   El margen negativo compensa el `padding: 0.5rem` de la tarjeta. Sin él la línea se quedaría corta por
   los dos lados —el «escalón» que se ve cuando el pie no llega a los bordes— en vez de cruzar el diálogo
   entero, y el fondo del pie dejaría una franja blanca por debajo. */
.modal-footer[b-6p0tk9mwjo] {
    display: flex;
    margin: 0 -0.5rem -0.5rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

    /* Lo que se meta en el pie ocupa TODO su ancho. Sin esto, el contenido se encoge a su tamaño natural
       y deja un hueco muerto a un lado —los botones no llegan a los bordes y en pantalla estrecha no se
       reparten la línea—.

       Va con `::deep` porque el pie lo rellena QUIEN USA el modal (<Footer>): ese markup pertenece al otro
       componente y lleva su marca de aislamiento, no la de este. Sin `::deep`, la regla no lo alcanzaría. */
    .modal-footer[b-6p0tk9mwjo] >  * {
        flex: 1 1 auto;
        min-width: 0;
    }

.modal-overlay.visible .modal-container[b-6p0tk9mwjo] {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Animación sutil de entrada */
.scale-in[b-6p0tk9mwjo] {
    animation: scaleIn-b-6p0tk9mwjo .25s ease forwards;
}

@keyframes scaleIn-b-6p0tk9mwjo {
    from {
        transform: scale(.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* VARIANTE «modal-full»: a pantalla completa en ventanas muy estrechas.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Por debajo de este ancho, una tarjeta centrada con esquinas redondeadas y márgenes deja de tener
   sentido: el `max-width: 92vw` ya la pega a los bordes, y lo único que aportan el redondeo y el
   hueco es recortar espacio útil al formulario. Se ocupa la ventana entera, como una pantalla más.

   El reparto de alto (cabecera y pie fijos, cuerpo elástico) ya es el de cualquier diálogo: aquí solo
   se sustituye el tope del 90% de la ventana por la ventana entera.

   Es opt-in (Modal.CssClass="modal-full"), no el comportamiento por defecto: hay diálogos —una
   confirmación de dos líneas— a los que ocupar toda la pantalla les sienta mal. */
@media (max-width: 560px) {
    .modal-overlay.modal-full .modal-container[b-6p0tk9mwjo] {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* Header */
.modal-header[b-6p0tk9mwjo] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 0px;
}

.modal-title[b-6p0tk9mwjo] {
    margin: 0;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #222;
}

/* El aspa (opcional, MostrarCerrar): pegada a la derecha del título, del tamaño de un objetivo
   pulsable y sin caja hasta que el puntero está encima. Gris como el resto de la cabecera: cerrar no
   es una acción destacada, es la salida. */
.modal-close[b-6p0tk9mwjo] {
    flex: 0 0 auto;
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

    .modal-close:hover[b-6p0tk9mwjo] {
        background: #f3f4f6;
        color: #24292f;
    }

    .modal-close:focus-visible[b-6p0tk9mwjo] {
        outline: 2px solid #bfdbfe;
        outline-offset: -2px;
    }

    .modal-close .material-symbols-rounded[b-6p0tk9mwjo] {
        font-size: 20px;
        line-height: 1;
        user-select: none;
    }

/* Contenido: la ÚNICA pieza que se desplaza cuando el diálogo no cabe. `min-height: 0` es lo que le
   permite encogerse por debajo de su contenido; sin él seguiría empujando la tarjeta hacia abajo y
   arrastraría el pie fuera de la pantalla. */
.modal-body[b-6p0tk9mwjo] {
    color: #333;
    font-size: .95rem;
    padding-top: 0px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalActividad.razor.rz.scp.css */
.modal-overlay[b-j4h36kdyti] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-container[b-j4h36kdyti] {
    background: #ffffff;
    border-radius: 14px;
    width: 820px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

.modal-header[b-j4h36kdyti] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title-section[b-j4h36kdyti] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.modal-card-icon[b-j4h36kdyti] {
    font-size: 22px;
    margin-top: 2px;
}

.modal-title[b-j4h36kdyti] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

.modal-subtitle[b-j4h36kdyti] {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-top: 4px;
}

.modal-body[b-j4h36kdyti] {
    display: flex;
    gap: 24px;
    padding: 24px;
    flex: 1;
}

.modal-main[b-j4h36kdyti] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn-close[b-j4h36kdyti] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 1;
}

    .btn-close:hover[b-j4h36kdyti] {
        background: #f1f5f9;
        color: #0f172a;
    }

.activity-list[b-j4h36kdyti] {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
    padding-left: 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .activity-list[b-j4h36kdyti]::-webkit-scrollbar {
        width: 5px;
    }

    .activity-list[b-j4h36kdyti]::-webkit-scrollbar-track {
        background: transparent;
    }

    .activity-list[b-j4h36kdyti]::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 10px;
    }

        .activity-list[b-j4h36kdyti]::-webkit-scrollbar-thumb:hover {
            background-color: #93c5fd;
        }

.activity-item[b-j4h36kdyti] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

    .activity-item:not(:last-child)[b-j4h36kdyti]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 42px;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #e2e8f0, #cbd5e1);
        z-index: 0;
    }

.activity-dot[b-j4h36kdyti] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    box-shadow: 0 0 0 3px #eff6ff;
    z-index: 2;
}

.activity-content[b-j4h36kdyti] {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    transition: background 0.15s ease;
}

    .activity-content:hover[b-j4h36kdyti] {
        background: #f1f5f9;
    }

.activity-meta[b-j4h36kdyti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

.activity-author[b-j4h36kdyti] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.activity-date[b-j4h36kdyti] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.activity-action[b-j4h36kdyti] {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.activity-empty[b-j4h36kdyti] {
    text-align: center;
    padding: 40px 0;
    color: #94a3b8;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.activity-empty-icon[b-j4h36kdyti] {
    font-size: 36px;
    opacity: 0.4;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalAnadirMiembros.razor.rz.scp.css */
/* Elegir a la gente de la empresa para meterla en el tablero. El chasis (overlay, cabecera, cuerpo y
   pie) lo pone Modal.razor: aquí solo va lo de dentro. */

.anadir-miembros[b-vxo3qor2dk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Rol de la tanda ───────────────────────────────────────────────────────────────────────── */

/* Mismo interruptor que el del desplegable de Invitar, para que se lea como lo mismo: con qué rol
   entra quien estás metiendo. */
.am-rol[b-vxo3qor2dk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 9px;
    background: #f8fafc;
}

.am-rol-etiqueta[b-vxo3qor2dk] {
    font-size: 12.5px;
    color: var(--erp-muted, #64748b);
}

.am-rol-etiqueta.activo[b-vxo3qor2dk] {
    color: #1e293b;
    font-weight: 600;
}

.am-toggle[b-vxo3qor2dk] {
    position: relative;
    width: 38px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .15s ease;
}

.am-toggle.on[b-vxo3qor2dk] {
    background: var(--crm-azul, #2563eb);
}

.am-toggle-bola[b-vxo3qor2dk] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.am-toggle.on .am-toggle-bola[b-vxo3qor2dk] {
    transform: translateX(18px);
}

/* ── Buscador ──────────────────────────────────────────────────────────────────────────────── */

.am-buscar[b-vxo3qor2dk] {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
}

.am-buscar:focus[b-vxo3qor2dk] {
    outline: none;
    border-color: var(--crm-azul, #2563eb);
}

/* ── Lo elegido ────────────────────────────────────────────────────────────────────────────── */

/* Los chips arriba y no solo el check en su fila: con la lista desplazada, lo elegido se iría de la
   vista y no habría forma de saber a cuántos vas a meter sin volver a recorrerla. */
.am-elegidos[b-vxo3qor2dk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-elegidos-titulo[b-vxo3qor2dk] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--erp-muted, #64748b);
}

.am-chips[b-vxo3qor2dk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.am-chip[b-vxo3qor2dk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px 3px 10px;
    border: 1px solid #c7d7f5;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
}

.am-chip-x[b-vxo3qor2dk] {
    border: none;
    background: transparent;
    color: #1d4ed8;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 50%;
    cursor: pointer;
}

.am-chip-x:hover[b-vxo3qor2dk] {
    background: #dbeafe;
}

/* ── La lista ──────────────────────────────────────────────────────────────────────────────── */

/* Alto tope y desplazamiento: una empresa de cuarenta personas no puede empujar el pie del diálogo
   fuera de la pantalla. */
.am-lista[b-vxo3qor2dk] {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 9px;
    background: var(--erp-surface, #fff);
}

.am-fila[b-vxo3qor2dk] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #eef2f6;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.am-fila:last-child[b-vxo3qor2dk] {
    border-bottom: none;
}

.am-fila:hover:not(:disabled)[b-vxo3qor2dk] {
    background: #f8fafc;
}

.am-fila.elegida[b-vxo3qor2dk] {
    background: #eff6ff;
}

/* Quien ya está se ve, pero apagado y sin poder pulsarse: esconderlo dejaría sin respuesta a «¿y
   Luis?», que tiene dos causas posibles y salidas distintas. */
.am-fila.ya-esta[b-vxo3qor2dk] {
    cursor: default;
    opacity: .5;
}

.am-avatar[b-vxo3qor2dk] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
}

.am-datos[b-vxo3qor2dk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.am-nombre[b-vxo3qor2dk] {
    font-size: 13px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-correo[b-vxo3qor2dk] {
    font-size: 11.5px;
    color: var(--erp-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-check[b-vxo3qor2dk] {
    flex: none;
    font-size: 19px;
    color: var(--crm-azul, #2563eb);
}

.am-sin-coincidencias[b-vxo3qor2dk],
.am-cargando[b-vxo3qor2dk] {
    margin: 0;
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--erp-muted, #64748b);
}

.am-nota[b-vxo3qor2dk] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #94a3b8;
}

/* ── Los dos huecos ────────────────────────────────────────────────────────────────────────── */

/* Ninguno es una lista vacía y muda: los dos nombran las vías que SÍ sirven en ese caso. */
.am-vacio[b-vxo3qor2dk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #fcfcfd;
}

.am-vacio .material-symbols-rounded[b-vxo3qor2dk] {
    font-size: 30px;
    color: #94a3b8;
}

.am-vacio-titulo[b-vxo3qor2dk] {
    margin: 4px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
}

.am-vacio-texto[b-vxo3qor2dk] {
    margin: 0;
    max-width: 44ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--erp-muted, #64748b);
}

.am-error[b-vxo3qor2dk] {
    padding: 8px 11px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fffbfb;
    color: #b91c1c;
    font-size: 12.5px;
    line-height: 1.5;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalAutomatizaciones.razor.rz.scp.css */
/* ===== OVERLAY Y CONTENEDOR ===== */
.modal-automatizaciones-overlay[b-bx3tf93a5y] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-automatizaciones-container[b-bx3tf93a5y] {
    background: #ffffff;
    border-radius: 14px;
    /* 640 y no 560: la rejilla de opciones necesita dos columnas de ~190px para que el catálogo
       se vea entero sin scroll. Con 560 caían a una sola y volvía a ser una lista larga. */
    width: 640px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    /* Explícito, y no por omisión: al declarar overflow-y, el eje X se computa a `auto`, así que la
       animación de los pasos —que entran desde 32px fuera— sacaba una barra horizontal medio segundo
       en cada salto. Aquí no hay nada más ancho que el modal, así que recortar no pierde nada. */
    overflow-x: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.modal-automatizaciones-header[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}

.modal-automatizaciones-title[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .modal-automatizaciones-title .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 22px;
        color: #f59e0b;
    }

    .modal-automatizaciones-title h2[b-bx3tf93a5y] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e293b;
    }

    .modal-automatizaciones-title .subtitle[b-bx3tf93a5y] {
        font-size: 12px;
        color: #64748b;
        display: block;
        margin-top: 2px;
    }

/* ===== BOTÓN CERRAR ===== */
.btn-close[b-bx3tf93a5y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: #6b7280;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

    .btn-close .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 20px;
        color: #6b7280;
    }

    .btn-close:hover[b-bx3tf93a5y] {
        background: #f3f4f6;
        color: #111827;
    }

        .btn-close:hover .material-symbols-rounded[b-bx3tf93a5y] {
            color: #111827;
        }

/* ===== PESTAÑAS ===== */
.automatizaciones-tabs[b-bx3tf93a5y] {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
    gap: 4px;
}

.automatizacion-tab[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

    .automatizacion-tab:hover[b-bx3tf93a5y] {
        color: #1e293b;
    }

    .automatizacion-tab.active[b-bx3tf93a5y] {
        color: #3b82f6;
        border-bottom-color: #3b82f6;
        font-weight: 600;
    }

.tab-badge[b-bx3tf93a5y] {
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}

.automatizacion-tab.active .tab-badge[b-bx3tf93a5y] {
    background: #dbeafe;
    color: #2563eb;
}

/* ===== BODY ===== */
.modal-automatizaciones-body[b-bx3tf93a5y] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== ESTADO VACÍO ===== */
.automatizaciones-empty[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #94a3b8;
    text-align: center;
}

    .automatizaciones-empty .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 40px;
        color: #cbd5e1;
    }

    .automatizaciones-empty p[b-bx3tf93a5y] {
        margin: 0;
        font-size: 14px;
    }

/* ===== LISTA EXISTENTES ===== */
.automatizaciones-lista[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.automatizacion-item[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: opacity 0.2s ease;
}

    .automatizacion-item.inactiva[b-bx3tf93a5y] {
        opacity: 0.45;
    }

/* La regla se lee como una frase, en UNA línea: icono del disparador, oración, estado y mandos.
   Antes eran dos filas ("Si…" / "Entonces…") con etiquetas en versalitas y chips de color; con
   pocas reglas se veía bien, pero cada regla ocupaba el triple y la lista dejaba de escanearse. */
.auto-ico[b-bx3tf93a5y] {
    font-size: 18px;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Dos renglones, «Si…» arriba y «entonces…» abajo. En una sola línea las reglas largas —las que
   llevan valor en los dos lados— envolvían por donde caía y costaba ver dónde acababa una mitad y
   empezaba la otra. */
.auto-frase[b-bx3tf93a5y] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
}

.fr-linea[b-bx3tf93a5y] {
    max-width: 100%;
}

    /* Ancho fijo para que las dos frases arranquen a la misma altura y se lean como una columna. */
    .fr-linea .nx[b-bx3tf93a5y] {
        display: inline-block;
        min-width: 54px;
    }

    /* El valor concreto (columna, etiqueta, miembro, estado) es lo único que cambia entre dos
       reglas del mismo tipo: es lo que va destacado, no la palabra "Si". */
    .auto-frase b[b-bx3tf93a5y] {
        font-weight: 650;
        color: #0f172a;
    }

    .auto-frase .nx[b-bx3tf93a5y] {
        color: #9ca3af;
        font-size: 11.5px;
    }

/* Las dos mitades de la frase se editan por separado. Se pinta como texto, no como botón: la lista
   tiene que seguir leyéndose como una frase, y solo al pasar por encima aparece que es pulsable. */
.fr-parte[b-bx3tf93a5y] {
    /* Ajustado al texto y no a la fila entera: el resaltado señala la frase que se va a editar, no
       el hueco que queda a su derecha. */
    width: fit-content;
    padding: 2px 5px;
    margin-left: -5px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .fr-parte:hover[b-bx3tf93a5y] {
        background: #eff6ff;
        box-shadow: inset 0 -1px 0 #93c5fd;
    }

    .fr-parte:focus-visible[b-bx3tf93a5y] {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
    }

/* Editando: el modal deja claro sobre qué está trabajando. */
.auto-editando[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

    .auto-editando .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 17px;
    }

.auto-estado[b-bx3tf93a5y] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: 11.5px;
    font-weight: 600;
    color: #16a34a;
}

/* Debajo del estado y en gris: es un dato de diagnóstico, no compite con «Activa». */
.auto-rastro[b-bx3tf93a5y] {
    font-size: 10.5px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

    /* Una regla que nunca ha hecho nada es lo que hay que mirar: se marca, sin gritar. */
    .auto-rastro.nunca[b-bx3tf93a5y] {
        color: #d97706;
    }

/* Aviso de encadenado. Informa, no impide: el que bloquea de verdad es el servidor. */
.auto-encadena[b-bx3tf93a5y] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 12px;
    line-height: 1.45;
}

    .auto-encadena .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 17px;
        flex-shrink: 0;
    }

.automatizacion-item.inactiva .auto-estado[b-bx3tf93a5y] {
    color: #94a3b8;
}

/* Aviso bajo un selector: la acción no hace nada si falta el dato (contacto, etiqueta…). */
.automatizacion-nota[b-bx3tf93a5y] {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.automatizacion-item-acciones[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.btn-toggle-automatizacion[b-bx3tf93a5y],
.btn-eliminar-automatizacion[b-bx3tf93a5y] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: #94a3b8;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-toggle-automatizacion:hover[b-bx3tf93a5y],
    .btn-eliminar-automatizacion:hover[b-bx3tf93a5y] {
        background: #e2e8f0;
        color: #334155;
    }

    .btn-toggle-automatizacion.activa[b-bx3tf93a5y] {
        color: #22c55e;
    }

        .btn-toggle-automatizacion.activa:hover[b-bx3tf93a5y] {
            color: #16a34a;
        }

    .btn-toggle-automatizacion .material-symbols-rounded[b-bx3tf93a5y],
    .btn-eliminar-automatizacion .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 20px;
    }

.disabled-observador[b-bx3tf93a5y] {
    cursor: not-allowed !important;
    pointer-events: none;
}

    .disabled-observador:hover[b-bx3tf93a5y] {
        background: none !important;
        color: inherit !important;
    }

/* ===== FORMULARIO CREAR =====
   Antes era una escalera vertical: un botón "Elegir trigger" que desplegaba la lista completa, una
   flecha, otro botón, otra lista. Con 5 disparadores y 9 acciones ya obligaba a hacer scroll, y el
   catálogo va a crecer. Ahora: borrador arriba (la frase que se está montando), dos pasos, y en cada
   uno un filtro por familia sobre una rejilla de opciones que se ven todas a la vez. */
.auto-crear[b-bx3tf93a5y] {
    gap: 16px;
}

/* Borrador: el ÚNICO sitio donde aparecen SI y ENTONCES en versalitas. Puestas también sobre cada
   opción de la rejilla, repetían la misma palabra veinte veces y no explicaban nada. */
.auto-borrador[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

.bo-linea[b-bx3tf93a5y] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.bo-tag[b-bx3tf93a5y] {
    flex-shrink: 0;
    width: 66px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #64748b;
}

.bo-texto[b-bx3tf93a5y] {
    color: #1e293b;
}

    .bo-texto b[b-bx3tf93a5y] {
        font-weight: 650;
        color: #0f172a;
    }

.bo-vacio[b-bx3tf93a5y] {
    color: #94a3b8;
    font-style: italic;
}

/* Paso. Solo hay uno en pantalla; se entra por el lado del que se viene para que el salto se lea
   como un avance o una vuelta, y no como un parpadeo del modal. */
.auto-paso[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    /* Entran las PIEZAS del paso escalonadas, no el bloque entero de una vez. Animar el contenedor
       con un desplazamiento discreto pasaba desapercibido: al ser una sola cosa moviéndose 16px en
       0,18s, el ojo no llega a leer de qué lado viene. En cascada sí se percibe la dirección, que es
       lo único que la animación tiene que comunicar: si avanzas o si vuelves. */
    .auto-paso.entra-dcha > *[b-bx3tf93a5y],
    .auto-paso.entra-izda > *[b-bx3tf93a5y] {
        animation-duration: 0.34s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        /* both: el fotograma inicial se aplica ya durante el retardo. Sin esto, las piezas con delay
           se ven un instante en su sitio y luego saltan al principio de la animación. */
        animation-fill-mode: both;
    }

    .auto-paso.entra-dcha > *[b-bx3tf93a5y] {
        animation-name: autoEntraDcha-b-bx3tf93a5y;
    }

    .auto-paso.entra-izda > *[b-bx3tf93a5y] {
        animation-name: autoEntraIzda-b-bx3tf93a5y;
    }

        .auto-paso.entra-dcha > *:nth-child(2)[b-bx3tf93a5y],
        .auto-paso.entra-izda > *:nth-child(2)[b-bx3tf93a5y] {
            animation-delay: 0.05s;
        }

        .auto-paso.entra-dcha > *:nth-child(3)[b-bx3tf93a5y],
        .auto-paso.entra-izda > *:nth-child(3)[b-bx3tf93a5y] {
            animation-delay: 0.1s;
        }

        .auto-paso.entra-dcha > *:nth-child(n+4)[b-bx3tf93a5y],
        .auto-paso.entra-izda > *:nth-child(n+4)[b-bx3tf93a5y] {
            animation-delay: 0.15s;
        }

/* Con `to` explícito, y no solo `from`: junto a `fill-mode: both`, un keyframe suelto al 0% deja al
   navegador decidiendo cuál es el fotograma final, y hay navegadores que se quedan con el único que
   hay — es decir, con el elemento transparente y desplazado fuera. */
@keyframes autoEntraDcha-b-bx3tf93a5y {
    from {
        opacity: 0;
        transform: translateX(32px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes autoEntraIzda-b-bx3tf93a5y {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auto-paso.entra-dcha > *[b-bx3tf93a5y],
    .auto-paso.entra-izda > *[b-bx3tf93a5y] {
        animation: none;
    }
}

/* Barra de navegación entre pasos */
.auto-nav[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.btn-paso[b-bx3tf93a5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #3b82f6;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

    .btn-paso:hover:not(:disabled)[b-bx3tf93a5y] {
        background: #2563eb;
    }

    /* Deshabilitado y visible: dice que hay un paso 2, no lo esconde. */
    .btn-paso:disabled[b-bx3tf93a5y] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
    }

    .btn-paso .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 17px;
    }

    /* "Atrás" no compite con "Crear automatización": es la salida, no la acción. */
    .btn-paso.fantasma[b-bx3tf93a5y] {
        margin-right: auto;
        background: transparent;
        color: #64748b;
        font-weight: 500;
    }

        .btn-paso.fantasma:hover[b-bx3tf93a5y] {
            background: #f1f5f9;
            color: #1e293b;
        }

.paso-cab[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paso-num[b-bx3tf93a5y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.paso-titulo[b-bx3tf93a5y] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* Filtros por familia. El contador dice cuántas hay antes de pulsar: sin él, filtrar es a ciegas. */
.auto-filtros[b-bx3tf93a5y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.auto-pill[b-bx3tf93a5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .auto-pill:hover[b-bx3tf93a5y] {
        background: #f1f5f9;
    }

    .auto-pill.on[b-bx3tf93a5y] {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
        font-weight: 600;
    }

.pill-cnt[b-bx3tf93a5y] {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
}

.auto-pill.on .pill-cnt[b-bx3tf93a5y] {
    color: #3b82f6;
}

/* Rejilla de opciones */
.auto-rejilla[b-bx3tf93a5y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.auto-opcion[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .auto-opcion:hover[b-bx3tf93a5y] {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    .auto-opcion.sel[b-bx3tf93a5y] {
        border-color: #3b82f6;
        background: #eff6ff;
    }

.op-ico[b-bx3tf93a5y] {
    font-size: 19px;
    color: #3b82f6;
    margin-bottom: 2px;
}

.op-nombre[b-bx3tf93a5y] {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.op-ayuda[b-bx3tf93a5y] {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
}

/* Configuración de la opción elegida: cuelga del paso, no es un paso aparte. */
.auto-cfg[b-bx3tf93a5y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.cfg-label[b-bx3tf93a5y] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

/* Los valores van a la vista, en fila: elegir columna era «botón → se despliega la lista → clic»,
   tres pasos para lo que son dos columnas. El tope de altura es lo que hace que esto valga también
   con veinte etiquetas: la fila envuelve y, pasadas tres líneas, scrollea dentro de su recuadro en
   vez de estirar el modal hacia abajo. */
.cfg-chips[b-bx3tf93a5y] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 108px;
    overflow-y: auto;
}

/* Texto fijo de la regla (nota, título del seguimiento). No es un chip: aquí se escribe. */
.cfg-texto[b-bx3tf93a5y] {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
    font-family: inherit;
}

    .cfg-texto:focus[b-bx3tf93a5y] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .cfg-texto[b-bx3tf93a5y]::placeholder {
        color: #94a3b8;
    }

/* ML10: la casilla «con una plantilla del mailing», encima de los campos del correo. */
.cfg-mailing[b-bx3tf93a5y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
}

    .cfg-mailing input[b-bx3tf93a5y] {
        width: 16px;
        height: 16px;
        accent-color: #3b82f6;
    }

/* Pastillas que insertan los huecos. Sin borde: son una ayuda de escritura, no un control más del
   formulario, y con recuadro competían visualmente con los chips de valor que tienen justo debajo.
   El «+» va como pseudo-elemento para que sea parte de la palabra y no un icono que ocupa su sitio. */
.cfg-huecos[b-bx3tf93a5y] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: -4px;
}

.cfg-huecos-et[b-bx3tf93a5y] {
    margin-right: 2px;
    font-size: 11px;
    color: #94a3b8;
}

.cfg-hueco[b-bx3tf93a5y] {
    padding: 2px 8px;
    border: none;
    border-radius: 5px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cfg-hueco[b-bx3tf93a5y]::before {
        content: "+ ";
        color: #94a3b8;
    }

    .cfg-hueco:hover[b-bx3tf93a5y] {
        background: #dbeafe;
        color: #1d4ed8;
    }

        .cfg-hueco:hover[b-bx3tf93a5y]::before {
            color: #3b82f6;
        }

/* Cómo quedará de verdad. Es lo que quita la duda de si el hueco está bien escrito. */
.cfg-preview[b-bx3tf93a5y] {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

    .cfg-preview b[b-bx3tf93a5y] {
        color: #475569;
        font-weight: 600;
    }

/* Sin icono: dentro de un grupo todos llevaban EL MISMO —cinco calendarios seguidos para cinco
   plazos—, así que no distinguían nada y ensanchaban la fila hasta obligarla a envolver. El punto de
   color de las etiquetas sí se queda: ese sí dice cuál es cuál. */
.cfg-chip[b-bx3tf93a5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .cfg-chip:hover[b-bx3tf93a5y] {
        border-color: #cbd5e1;
        background: #f1f5f9;
    }

    .cfg-chip.sel[b-bx3tf93a5y] {
        border-color: #3b82f6;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 600;
    }

    .cfg-chip .material-symbols-rounded[b-bx3tf93a5y] {
        font-size: 16px;
        color: #64748b;
    }

    .cfg-chip.sel .material-symbols-rounded[b-bx3tf93a5y] {
        color: #3b82f6;
    }

    .cfg-chip .etiqueta-color-dot[b-bx3tf93a5y] {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        flex-shrink: 0;
    }


/* Qué le falta a la regla, junto al botón apagado. */
.auto-falta[b-bx3tf93a5y] {
    margin-right: auto;
    font-size: 12px;
    color: #94a3b8;
}

/* ===== ERROR =====
   Con fondo y borde, como el resto de avisos de la casa. Como texto rojo suelto se leía igual que una
   nota informativa: el usuario no sabía si la regla se había creado o no. Un rechazo tiene que
   parecer un rechazo. */
.automatizacion-error[b-bx3tf93a5y] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12.5px;
    line-height: 1.45;
}

    .automatizacion-error[b-bx3tf93a5y]::before {
        content: "error";
        font-family: "Material Symbols Rounded";
        font-size: 17px;
        line-height: 1.2;
        flex-shrink: 0;
    }

/* ===== ETIQUETA COLOR DOT (usada en listas de etiquetas) ===== */
.etiqueta-color-dot[b-bx3tf93a5y] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalEstrategiaTablero.razor.rz.scp.css */
.modal-overlay[b-k2e1qj1ojz] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.est-modal[b-k2e1qj1ojz] {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.est-header[b-k2e1qj1ojz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f1f3;
}

.est-title[b-k2e1qj1ojz] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.est-subtitle[b-k2e1qj1ojz] {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.est-close[b-k2e1qj1ojz] {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    padding: 2px;
    border-radius: 6px;
}

    .est-close:hover[b-k2e1qj1ojz] {
        background: #f1f5f9;
        color: #334155;
    }

.est-body[b-k2e1qj1ojz] {
    padding: 16px 20px;
    overflow-y: auto;
}

.est-bloqueado[b-k2e1qj1ojz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
    font-size: 12px;
    color: #92400e;
}

    .est-bloqueado .material-symbols-rounded[b-k2e1qj1ojz] {
        font-size: 17px;
    }

.est-opciones[b-k2e1qj1ojz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.est-opcion[b-k2e1qj1ojz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .est-opcion:hover[b-k2e1qj1ojz] {
        border-color: #c7d2fe;
    }

    .est-opcion.activa[b-k2e1qj1ojz] {
        border-color: #4f46e5;
        background: #eef2ff;
    }

    .est-opcion.deshabilitada[b-k2e1qj1ojz] {
        cursor: default;
        opacity: 0.7;
    }

    .est-opcion input[b-k2e1qj1ojz] {
        margin-top: 2px;
        accent-color: #4f46e5;
    }

.est-opcion-texto[b-k2e1qj1ojz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.est-opcion-titulo[b-k2e1qj1ojz] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.est-opcion-desc[b-k2e1qj1ojz] {
    font-size: 12px;
    color: #64748b;
}

.est-footer[b-k2e1qj1ojz] {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #f0f1f3;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalPlantillasCheckList.razor.rz.scp.css */
/* Mantenimiento de las plantillas de checklist. El chasis lo pone Modal.razor; aquí, lo de dentro.
   Dos columnas: la lista y las tareas de la elegida. */

.plc[b-dt07l63cza] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    min-width: 0;
    min-height: 300px;
}

/* En pantalla estrecha se apilan: dos columnas de 110 px no son dos columnas. */
@media (max-width: 720px) {
    .plc[b-dt07l63cza] {
        grid-template-columns: 1fr;
    }
}

.plc-error[b-dt07l63cza] {
    grid-column: 1 / -1;
    padding: 8px 11px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fffbfb;
    color: #b91c1c;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ── Columna izquierda ─────────────────────────────────────────────────────────────────────── */

.plc-lista[b-dt07l63cza] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: 12px;
    border-right: 1px solid var(--erp-border, #e2e8f0);
}

@media (max-width: 720px) {
    .plc-lista[b-dt07l63cza] {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--erp-border, #e2e8f0);
        padding-bottom: 12px;
    }
}

.plc-fila[b-dt07l63cza] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.plc-fila:hover[b-dt07l63cza] {
    background: #f8fafc;
}

.plc-fila.elegida[b-dt07l63cza] {
    background: #eff6ff;
}

.plc-fila-nombre[b-dt07l63cza] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuántas tareas lleva: es lo que distingue una plantilla a medias de una lista de verdad, y se
   mira antes de elegirla. */
.plc-fila-cuenta[b-dt07l63cza] {
    flex: none;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.plc-fila.elegida .plc-fila-cuenta[b-dt07l63cza] {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ── Columna derecha ───────────────────────────────────────────────────────────────────────── */

.plc-detalle[b-dt07l63cza] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.plc-detalle-cab[b-dt07l63cza] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.plc-titulo[b-dt07l63cza] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #1e293b;
}

.editable[b-dt07l63cza] {
    cursor: text;
    border-radius: 5px;
    padding: 1px 3px;
    margin: -1px -3px;
}

.editable:hover[b-dt07l63cza] {
    background: #f1f5f9;
    box-shadow: inset 0 -1px 0 #cbd5e1;
}

.plc-borrar[b-dt07l63cza] {
    flex: none;
    display: inline-flex;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.plc-borrar:hover[b-dt07l63cza] {
    background: #fef2f2;
    color: var(--erp-danger, #dc2626);
}

.plc-borrar .material-symbols-rounded[b-dt07l63cza] {
    font-size: 18px;
}

/* Rojo en el texto y el borde, relleno solo al pasar por encima: mismo criterio que el resto del
   módulo. Y dice lo que NO pasa al borrar, que es la pregunta de verdad. */
.plc-borrar-duda[b-dt07l63cza] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fffbfb;
    color: #7f1d1d;
    font-size: 12.5px;
    line-height: 1.45;
}

.plc-si[b-dt07l63cza],
.plc-no[b-dt07l63cza] {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.plc-si[b-dt07l63cza] {
    background: #fff;
    border-color: #fecaca;
    color: #b91c1c;
}

.plc-si:hover[b-dt07l63cza] {
    background: var(--erp-danger, #dc2626);
    border-color: var(--erp-danger, #dc2626);
    color: #fff;
}

.plc-no[b-dt07l63cza] {
    background: #fff;
    border-color: var(--erp-border, #e2e8f0);
    color: #475569;
}

.plc-no:hover[b-dt07l63cza] {
    background: #f1f5f9;
}

/* ── Las tareas ────────────────────────────────────────────────────────────────────────────── */

.plc-tareas[b-dt07l63cza] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}

.plc-tarea[b-dt07l63cza] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 7px;
}

.plc-tarea:hover[b-dt07l63cza] {
    background: #f8fafc;
}

/* Las flechas en columna y pegadas a su tarea, como en el bloque de archivos de la tarjeta: así no
   se llevan alto, que es lo que un diálogo de dos columnas no tiene de sobra. */
.plc-flechas[b-dt07l63cza] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.plc-flecha[b-dt07l63cza] {
    display: inline-flex;
    padding: 0;
    width: 18px;
    height: 12px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.plc-flecha:hover:not(:disabled)[b-dt07l63cza] {
    color: var(--crm-azul, #2563eb);
}

.plc-flecha:disabled[b-dt07l63cza] {
    opacity: .3;
    cursor: default;
}

.plc-flecha .material-symbols-rounded[b-dt07l63cza] {
    font-size: 16px;
}

.plc-tarea-texto[b-dt07l63cza] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.4;
}

.plc-quitar[b-dt07l63cza] {
    flex: none;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.plc-tarea:hover .plc-quitar[b-dt07l63cza] {
    color: #94a3b8;
}

.plc-quitar:hover[b-dt07l63cza] {
    background: #fef2f2;
    color: var(--erp-danger, #dc2626);
}

/* ── Formularios y textos sueltos ──────────────────────────────────────────────────────────── */

.plc-nueva[b-dt07l63cza] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 6px 9px;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-size: 12.5px;
    cursor: pointer;
}

.plc-nueva:hover[b-dt07l63cza] {
    border-color: var(--crm-azul, #2563eb);
    color: var(--crm-azul, #2563eb);
    background: #f8fafc;
}

.plc-nueva .material-symbols-rounded[b-dt07l63cza] {
    font-size: 16px;
}

.plc-form[b-dt07l63cza] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.plc-form-botones[b-dt07l63cza] {
    display: flex;
    gap: 6px;
}

.plc-input[b-dt07l63cza] {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 7px;
    font-size: 13px;
    color: #1e293b;
}

.plc-input:focus[b-dt07l63cza] {
    outline: none;
    border-color: var(--crm-azul, #2563eb);
}

.plc-input-tarea[b-dt07l63cza] {
    flex: 1 1 auto;
    min-width: 0;
}

.plc-nota[b-dt07l63cza] {
    margin: 0;
    padding: 6px 2px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--erp-muted, #64748b);
}
/* _content/ErpPowergest/Presentation/Shared/Modal/ModalTarjeta.razor.rz.scp.css */
.modal-overlay[b-592frhbpjc] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    padding: 20px;
}

/* ===== Por qué no se puede cambiar (observador, o un perfil que solo consulta) ===== */
.mt-solo-lectura[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
}

    .mt-solo-lectura .material-symbols-rounded[b-592frhbpjc] {
        font-size: 18px;
        color: #64748b;
    }

/* ===== Convertir en cliente al ganar: dentro de la ficha, no en una ventana encima ===== */
.mt-conversion[b-592frhbpjc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
    color: #14532d;
}

.mt-conversion-icono[b-592frhbpjc] {
    font-size: 22px;
    color: #16a34a;
}

.mt-conversion-cuerpo[b-592frhbpjc] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.45;
}

.mt-conversion-error[b-592frhbpjc] {
    color: #b91c1c;
    font-weight: 600;
}

.mt-conversion-botones[b-592frhbpjc] {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

    .mt-conversion-botones button[b-592frhbpjc] {
        padding: 7px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .mt-conversion-botones button:disabled[b-592frhbpjc] {
        opacity: 0.6;
        cursor: default;
    }

.mt-conversion-no[b-592frhbpjc] {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
}

.mt-conversion-si[b-592frhbpjc] {
    border: 1px solid #16a34a;
    background: #16a34a;
    color: #ffffff;
}

@media (max-width: 640px) {
    .mt-conversion[b-592frhbpjc] {
        flex-direction: column;
    }
}

.modal-container[b-592frhbpjc] {
    background: #ffffff;
    border-radius: 16px;
    width: 820px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.modal-header[b-592frhbpjc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f1f3;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 5;
    border-radius: 16px 16px 0 0;
}

.modal-title-section[b-592frhbpjc] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.modal-card-icon[b-592frhbpjc] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #eff4ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .modal-card-icon .material-symbols-rounded[b-592frhbpjc] {
        font-size: 23px;
    }

/* El título leído, el que se edita y la copia invisible que le marca el alto comparten caja EXACTA:
   tipografía, interlineado, relleno, borde (transparente en el h2, que así reserva el sitio del azul
   del campo) y por dónde parte una palabra larga. De eso depende que pulsar para renombrar no mueva
   NADA: ni el título de sitio, ni la fecha de vencimiento de debajo. El relleno de la izquierda se
   compensa con el margen negativo de más abajo. */
.modal-title[b-592frhbpjc],
.modal-title-input[b-592frhbpjc],
.modal-title-editor[b-592frhbpjc]::after {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.015em;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    word-break: break-word;
}

/* El tirón de 6px a la izquierda va en el h2 y en el CONTENEDOR del editor, no en el área: así los dos
   ocupan exactamente el mismo ancho y el texto parte por donde partía. Puesto en el área, el campo
   quedaría 6px más estrecho que el título y una palabra podría saltar de línea al pulsar. */
.modal-title[b-592frhbpjc],
.modal-title-editor[b-592frhbpjc] {
    margin: 0 0 0 -6px;
}

    /* Se renombra de un clic: se insinúa al pasar por encima. */
    .modal-title.editable[b-592frhbpjc] {
        cursor: text;
        transition: background 0.15s ease;
    }

        .modal-title.editable:hover[b-592frhbpjc] {
            background: #f1f5f9;
        }

/* El alto del área lo pone una copia invisible del texto, en la MISMA celda de la rejilla: la copia
   ocupa lo que ocuparía el título ya escrito, y el área se estira hasta ahí. Así al abrir la edición
   el campo nace con el alto exacto del h2 —no se encoge a un renglón, que es lo que hacía un `input`,
   que no parte líneas— y al escribir crece sola. El valor de la copia es el mismo que ya está
   enlazado en cada tecla, así que esto no necesita JavaScript ni medir alturas. */
.modal-title-editor[b-592frhbpjc] {
    display: grid;
    /* Sin ancho propio: como bloque ocupa lo mismo que el h2 al que sustituye. Fijarle un 100 % lo
       dejaría 6px más estrecho (el margen negativo) y el texto partiría por otro sitio. */
    min-width: 260px;
}

    .modal-title-editor[b-592frhbpjc]::after {
        /* El espacio final evita que el área se quede corta mientras se escribe la última palabra. */
        content: attr(data-replicated-value) " ";
        white-space: pre-wrap;
        visibility: hidden;
    }

    .modal-title-editor[b-592frhbpjc]::after,
    .modal-title-input[b-592frhbpjc] {
        grid-area: 1 / 1 / 2 / 2;
    }

.modal-title-input[b-592frhbpjc] {
    font-family: inherit;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    /* Ni barra de desplazamiento ni tirador: el alto lo manda el texto, no el usuario. */
    resize: none;
    overflow: hidden;
}

.modal-subtitle-row[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.modal-subtitle[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

    .modal-subtitle .material-symbols-rounded[b-592frhbpjc] {
        font-size: 15px;
    }

/* Fecha de vencimiento editable: mismo aspecto que el subtítulo, con pista de edición al hover. */
.modal-subtitle-editable[b-592frhbpjc] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 2px 7px;
    margin: -2px -7px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .modal-subtitle-editable:hover[b-592frhbpjc] {
        background: #f4f6fb;
        border-color: #e2e8f0;
        color: #2563eb;
    }

    .modal-subtitle-editable .material-symbols-rounded[b-592frhbpjc] {
        font-size: 15px;
    }

    .modal-subtitle-editable .edit-hint[b-592frhbpjc] {
        font-size: 14px;
        opacity: 0;
        color: #2563eb;
        transition: opacity 0.15s ease;
    }

    .modal-subtitle-editable:hover .edit-hint[b-592frhbpjc] {
        opacity: 1;
    }

/* Editor inline: el selector ocupa el hueco de la fecha, sin desplazar el resto de la cabecera. */
.fecha-editor[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .fecha-editor .fecha-picker[b-592frhbpjc] {
        max-width: 150px;
    }

    /* El input del selector hereda el mismo 12px que la fecha en reposo: sin salto de tamaño al editar. */
    .fecha-editor[b-592frhbpjc]  .e-input,
    .fecha-editor[b-592frhbpjc]  .e-datepicker .e-input {
        font-size: 12px;
    }

.fecha-cancel[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .fecha-cancel:hover[b-592frhbpjc] {
        background: #fee2e2;
        color: #dc2626;
    }

    .fecha-cancel .material-symbols-rounded[b-592frhbpjc] {
        font-size: 17px;
    }

.badge-overdue[b-592frhbpjc] {
    background: #fef2f2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ===== Selector de responsable (sidebar del modal) ===== */
.responsable-selector[b-592frhbpjc] {
    position: relative;
    width: 100%;
}

.responsable-actual[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    color: #1e293b;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .responsable-actual:hover[b-592frhbpjc] {
        border-color: #c7d2fe;
        background: #f8faff;
    }

.avatar-responsable-sm[b-592frhbpjc] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: #4f46e5;
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #4f46e5;
}

.responsable-nombre[b-592frhbpjc] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.responsable-vacio[b-592frhbpjc] {
    font-size: 13px;
    color: #94a3b8;
}

.responsable-chevron[b-592frhbpjc] {
    font-size: 18px;
    color: #94a3b8;
    margin-left: auto;
}

.responsable-dropdown[b-592frhbpjc] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 5px;
    max-height: 240px;
    overflow-y: auto;
}

.responsable-opcion[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
}

    .responsable-opcion:hover[b-592frhbpjc] {
        background: #f1f5f9;
    }

    .responsable-opcion .check-selected[b-592frhbpjc] {
        margin-left: auto;
        font-size: 17px;
        color: #4f46e5;
    }

.responsable-quitar[b-592frhbpjc] {
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: none;
    border-top: 1px solid #f1f5f9;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 0 0 7px 7px;
}

    .responsable-quitar:hover[b-592frhbpjc] {
        background: #fef2f2;
    }

.responsable-vacio-lista[b-592frhbpjc] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    padding: 6px 8px;
}

.modal-header-actions[b-592frhbpjc] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.btn-delete[b-592frhbpjc] {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
}

    /* El rojo macizo es el énfasis de un "sí, bórralo": este botón solo abre la acción, no la confirma. */
    .btn-delete:hover[b-592frhbpjc] {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #b91c1c;
    }

.btn-close[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    margin-left: 4px;
}

    /* Raya separadora: "Añadir" y "Eliminar" actúan sobre la tarjeta, la ✕ solo descarta el modal. Con
       :not(:first-child) porque al observador se le ocultan las otras dos y la raya quedaría suelta. */
    .btn-close:not(:first-child)[b-592frhbpjc]::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: #e5e7eb;
    }

    .btn-close .material-symbols-rounded[b-592frhbpjc] {
        font-size: 20px;
    }

    .btn-close:hover[b-592frhbpjc] {
        background: #f3f4f6;
        color: #111827;
    }

/* ===== BODY ===== */
.modal-body[b-592frhbpjc] {
    display: flex;
    gap: 24px;
    padding: 24px;
    flex: 1;
}

.modal-main[b-592frhbpjc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.modal-section[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-label[b-592frhbpjc] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}

.empty-text[b-592frhbpjc] {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* ===== ETIQUETAS EN MODAL ===== */
/* El gap es de 10px, no de 8: la "x" de quitar se monta 6px fuera de su etiqueta y con menos hueco
   pisaría a la etiqueta vecina (y a la de la fila de arriba al saltar de línea). */
.labels-row[b-592frhbpjc] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .labels-row .label-pill[b-592frhbpjc] {
        position: relative; /* ancla de la "x" */
        width: auto;
        height: auto;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: white;
    }

/* Mini "x" en la esquina, solo al pasar por encima de SU etiqueta. En blanco sobre el borde para que se
   lea sea cual sea el color de la etiqueta, que lo elige el usuario y puede ser cualquiera. */
.label-pill-quitar[b-592frhbpjc] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

    .label-pill-quitar .material-symbols-rounded[b-592frhbpjc] {
        font-size: 12px;
    }

.labels-row .label-pill:hover .label-pill-quitar[b-592frhbpjc] {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Aquí el rojo macizo sí toca: a diferencia del botón "Eliminar" de la cabecera, este no abre nada,
   quita la etiqueta en el mismo clic. */
.label-pill-quitar:hover[b-592frhbpjc] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ===== BADGES ESTADO ===== */
.badge-done[b-592frhbpjc] {
    background: #dcfce7;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}

.badge-pending[b-592frhbpjc] {
    background: #fef9c3;
    color: #ca8a04;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}

/* ===== MENÚ AÑADIR ===== */
/* "Añadir" y "Eliminar" son pareja: las dos acciones que operan sobre la tarjeta. Misma caja, mismo
   peso y misma manera de responder al ratón (el tinte se hace más intenso); solo cambia el color, que
   es lo único que las distingue. Van etiquetadas porque ninguna de las dos se adivina por su icono. */
.btn-anadir[b-592frhbpjc],
.btn-delete[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .btn-anadir .material-symbols-rounded[b-592frhbpjc],
    .btn-delete .material-symbols-rounded[b-592frhbpjc] {
        font-size: 16px;
    }

.btn-anadir[b-592frhbpjc] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

    .btn-anadir:hover[b-592frhbpjc] {
        background: #dbeafe;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

.menu-anadir-wrapper[b-592frhbpjc] {
    position: relative;
    display: inline-block;
}

/* Cuelgan hacia la IZQUIERDA. El botón está pegado al borde derecho del modal y el contenedor recorta
   (overflow-y: auto obliga al eje x a recortar también): alineados a la izquierda se saldrían. */
.menu-anadir-dropdown[b-592frhbpjc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    min-width: 180px;
    z-index: 200;
    padding: 5px;
}

.menu-anadir-item[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

    .menu-anadir-item .material-symbols-rounded[b-592frhbpjc] {
        font-size: 18px;
        color: #6b7280;
    }

    .menu-anadir-item:hover[b-592frhbpjc] {
        background: #f3f4f6;
        color: #111827;
    }

/* ===== PANEL FLOTANTE (checklist / etiquetas / cliente) ===== */
/* Alineado a la derecha por lo mismo que el desplegable: cuelga del botón "+" de la cabecera. */
.checklist-form[b-592frhbpjc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 270px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    z-index: 200;
}

.checklist-form-title[b-592frhbpjc] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.checklist-input[b-592frhbpjc] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    color: #111827;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .checklist-input:focus[b-592frhbpjc] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.etiquetas-lista[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.etiqueta-fila[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
    cursor: pointer;
}

    .etiqueta-fila:hover[b-592frhbpjc] {
        background: #f3f4f6;
    }

.etiqueta-color-dot[b-592frhbpjc] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.etiqueta-nombre[b-592frhbpjc] {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.check-selected[b-592frhbpjc] {
    margin-left: auto;
    color: #16a34a;
    font-size: 18px;
}

.btn-crear-etiqueta[b-592frhbpjc] {
    width: 100%;
    padding: 9px;
    background: #f3f4f6;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    font-weight: 600;
}

    .btn-crear-etiqueta:hover[b-592frhbpjc] {
        background: #e5e7eb;
        color: #111827;
        border-color: #9ca3af;
    }

.etiqueta-form-header[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-volver[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-volver .material-symbols-rounded[b-592frhbpjc] {
        font-size: 16px;
    }

    .btn-volver:hover[b-592frhbpjc] {
        background: #f3f4f6;
        color: #111827;
    }

.etiqueta-color-label[b-592frhbpjc] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.color-picker-grid[b-592frhbpjc] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.color-swatch[b-592frhbpjc] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    outline: none;
}

    .color-swatch:hover[b-592frhbpjc] {
        transform: scale(1.15);
        border-color: #111827;
    }

    .color-swatch.selected[b-592frhbpjc] {
        border-color: #111827;
        transform: scale(1.15);
        box-shadow: 0 0 0 2px white, 0 0 0 4px #111827;
    }

.etiqueta-preview[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

/* ===== DESCRIPCIÓN / COMENTARIO ===== */
.comment-form[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-input[b-592frhbpjc] {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    color: #111827;
    outline: none;
    resize: vertical;
    min-height: 44px;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .comment-input:focus[b-592frhbpjc] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .comment-input[b-592frhbpjc]::placeholder {
        color: #9ca3af;
    }

.descripcion-readonly[b-592frhbpjc] {
    font-size: 13px;
    color: #374151;
    margin: 0;
    line-height: 1.6;
}

/* Hueco cerrado de descripción/comentario: es la misma caja que el textarea de antes, pero pintando
   el HTML guardado. Al pincharlo se cambia por el editor rico, así que se comporta como un campo. */
.texto-rico-vista[b-592frhbpjc] {
    cursor: text;
    overflow-wrap: anywhere;
}

    .texto-rico-vista:focus[b-592frhbpjc] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.texto-rico-placeholder[b-592frhbpjc] {
    color: #9ca3af;
}

/* El HTML del editor trae sus propios <p>/<ul>: se apoyan en la caja, no la desmontan. */
.texto-rico-vista > :first-child[b-592frhbpjc],
.descripcion-readonly > :first-child[b-592frhbpjc],
.comment-text > :first-child[b-592frhbpjc] {
    margin-top: 0;
}

.texto-rico-vista > :last-child[b-592frhbpjc],
.descripcion-readonly > :last-child[b-592frhbpjc],
.comment-text > :last-child[b-592frhbpjc] {
    margin-bottom: 0;
}

/* Una foto grande no debe empujar el ancho del modal. */
.texto-rico-vista img[b-592frhbpjc],
.descripcion-readonly img[b-592frhbpjc],
.comment-text img[b-592frhbpjc] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.texto-rico-vista ul[b-592frhbpjc],
.texto-rico-vista ol[b-592frhbpjc],
.descripcion-readonly ul[b-592frhbpjc],
.descripcion-readonly ol[b-592frhbpjc],
.comment-text ul[b-592frhbpjc],
.comment-text ol[b-592frhbpjc] {
    margin: 4px 0;
    padding-left: 20px;
}

/* ===== CHECKLIST ===== */
.checklist-group[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.checklist-head[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #eef0f3;
}

/* El nombre y su input comparten caja: mismo alto y mismo borde (transparente en el span), para que la
   cabecera de la checklist no dé un salto al entrar en edición. */
.checklist-name[b-592frhbpjc],
.checklist-name-input[b-592frhbpjc] {
    font-size: 13px;
    font-weight: 650;
    color: #111827;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 1px 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.checklist-name[b-592frhbpjc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .checklist-name.editable[b-592frhbpjc] {
        cursor: text;
        transition: background 0.15s ease;
    }

        .checklist-name.editable:hover[b-592frhbpjc] {
            background: #eef0f3;
        }

.checklist-name-input[b-592frhbpjc] {
    font-family: inherit;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.checklist-count[b-592frhbpjc] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #eef0f3;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.checklist-progress[b-592frhbpjc] {
    height: 5px;
    background: #eef0f3;
    overflow: hidden;
}

.checklist-progress-bar[b-592frhbpjc] {
    height: 100%;
    background: #2563eb;
    border-radius: 0 999px 999px 0;
    transition: width 0.3s ease, background 0.2s ease;
}

    .checklist-progress-bar.full[b-592frhbpjc] {
        background: #16a34a;
    }

.checklist-item[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    padding: 9px 14px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

    .checklist-item:last-of-type[b-592frhbpjc] {
        border-bottom: none;
    }

    .checklist-item:hover[b-592frhbpjc] {
        background: #f9fafb;
    }

.readonly-observador[b-592frhbpjc],
.checkbox-item[b-592frhbpjc] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.readonly-observador[b-592frhbpjc] {
    cursor: default;
    pointer-events: none;
}

.checkbox-item[b-592frhbpjc] {
    cursor: pointer;
}

    .checkbox-item:checked[b-592frhbpjc] {
        background: #16a34a;
        border-color: #16a34a;
    }

        .checkbox-item:checked[b-592frhbpjc]::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 5px;
            height: 9px;
            border: 2px solid white;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

/* El texto del item y su input comparten caja, igual que el nombre de la checklist: la fila no se
   mueve al entrar en edición. Sin color aquí a propósito: lo pone .checklist-item, y así .item-done
   (una sola clase) puede seguir ganando y pintar de gris lo ya hecho. */
.item-nombre[b-592frhbpjc],
.checklist-item-input[b-592frhbpjc] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    padding: 1px 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.item-nombre.editable[b-592frhbpjc] {
    cursor: text;
    transition: background 0.15s ease;
}

    .item-nombre.editable:hover[b-592frhbpjc] {
        background: #f3f4f6;
    }

.checklist-item-input[b-592frhbpjc] {
    font-family: inherit;
    color: #111827;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.item-done[b-592frhbpjc] {
    text-decoration: line-through;
    color: #9ca3af;
    flex: 1;
}

.checklist-item > span:not(.material-symbols-rounded)[b-592frhbpjc] {
    flex: 1;
}

.btn-delete-checklist[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 7px;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-delete-checklist .material-symbols-rounded[b-592frhbpjc] {
        font-size: 17px;
    }

    .btn-delete-checklist:hover[b-592frhbpjc] {
        background: #fef2f2;
        color: #dc2626;
    }

.btn-delete-item[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    pointer-events: none;
}

    .btn-delete-item .material-symbols-rounded[b-592frhbpjc] {
        font-size: 17px;
    }

.checklist-item:hover .btn-delete-item[b-592frhbpjc] {
    opacity: 1;
    pointer-events: auto;
}

.btn-delete-item:hover[b-592frhbpjc] {
    background: #fef2f2;
    color: #dc2626;
}

.btn-add-item[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .btn-add-item .material-symbols-rounded[b-592frhbpjc] {
        font-size: 18px;
    }

    .btn-add-item:hover[b-592frhbpjc] {
        background: #f9fafb;
        color: #111827;
    }

.checklist-item-form[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
}

/* ===== COMENTARIOS ===== */
.comments-list[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .comments-list[b-592frhbpjc]::-webkit-scrollbar {
        width: 5px;
    }

    .comments-list[b-592frhbpjc]::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 10px;
    }

.comment-item[b-592frhbpjc] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.comment-avatar[b-592frhbpjc] {
    width: 34px;
    height: 34px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.comment-content[b-592frhbpjc] {
    flex: 1;
    min-width: 0;
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef0f3;
}

.comment-meta[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.comment-author[b-592frhbpjc] {
    font-size: 13px;
    font-weight: 650;
    color: #111827;
}

.comment-date[b-592frhbpjc] {
    font-size: 11px;
    color: #9ca3af;
}

/* Sello discreto: no compite con el nombre ni con la fecha, solo está ahí para quien lo busque. */
.comment-editado[b-592frhbpjc] {
    font-size: 11px;
    font-style: italic;
    color: #9ca3af;
}

/* Editar y borrar mi propio comentario: discretos, aparecen al pasar por encima del comentario (mismo
   gesto que el lápiz de las etiquetas del tablero). Solo se pintan en los comentarios propios. */
.comment-acciones[b-592frhbpjc] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.comment-item:hover .comment-acciones[b-592frhbpjc] {
    opacity: 1;
    pointer-events: auto;
}

.comment-accion[b-592frhbpjc] {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 2px 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .comment-accion .material-symbols-rounded[b-592frhbpjc] {
        font-size: 15px;
    }

    .comment-accion:hover[b-592frhbpjc] {
        background: #eef2ff;
        color: #4f46e5;
    }

    /* El borrado es definitivo y sin confirmación: que al menos se vea de qué color viene. */
    .comment-accion.borrar:hover[b-592frhbpjc] {
        background: #fef2f2;
        color: #dc2626;
    }

.comment-text[b-592frhbpjc] {
    font-size: 13px;
    color: #374151;
    margin: 0;
    line-height: 1.55;
    word-break: break-word;
}

/* ===== SIDEBAR ===== */
.modal-sidebar[b-592frhbpjc] {
    width: 190px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    align-self: flex-start;
}

.sidebar-item[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-label[b-592frhbpjc] {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cliente y contacto asignados: enlazan a su ficha. El azul se reserva a lo que NAVEGA fuera del
   modal; lo que se edita aquí dentro (título, fecha, responsable, etiquetas) se descubre al pasar el
   ratón y no se pinta de azul, para que el azul siga queriendo decir algo. */
.sidebar-link[b-592frhbpjc] {
    display: inline-block;
    font-size: 13px;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

    .sidebar-link:hover[b-592frhbpjc] {
        text-decoration: underline;
    }

    .sidebar-item > span:not(.sidebar-label):not([class*="badge"])[b-592frhbpjc] {
        font-size: 13px;
        color: #374151;
        font-weight: 500;
    }

/* ===== PREDICCIÓN DE CIERRE: EL PORQUÉ DEL NÚMERO =====
   El desglose se leía como un volcado del cálculo: cuatro frases técnicas con un «(+4.5)» que nadie
   podía interpretar. Aquí cada señal se presenta como lo que aporta SOBRE SU TOPE, que es lo que
   permite ver de un vistazo cuál está hundiendo la probabilidad. */
.pred-cifra[b-592frhbpjc] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

    .pred-cifra small[b-592frhbpjc] {
        font-size: 11px;
        font-weight: 500;
        color: #9ca3af;
    }

.pred-para-que[b-592frhbpjc] {
    font-size: 11px !important;
    line-height: 1.45;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.pred-toggle[b-592frhbpjc] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

    .pred-toggle:hover[b-592frhbpjc] {
        color: #2563eb;
    }

    .pred-toggle .material-symbols-rounded[b-592frhbpjc] {
        font-size: 16px;
    }

.pred-factores[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.pred-factor[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pred-factor-cab[b-592frhbpjc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pred-factor-nombre[b-592frhbpjc] {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.pred-factor-puntos[b-592frhbpjc] {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    /* Cifras de ancho fijo: los pares «4,5 / 45» de cada fila quedan alineados entre sí. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pred-barra[b-592frhbpjc] {
    height: 5px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.pred-barra-relleno[b-592frhbpjc] {
    height: 100%;
    border-radius: 999px;
    background: #2563eb;
    transition: width 0.25s ease;
}

/* Separado por una línea: es el cierre de la cuenta, no una señal más. */
.pred-total[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

    .pred-total .pred-factor-nombre[b-592frhbpjc],
    .pred-total .pred-factor-puntos[b-592frhbpjc] {
        color: #111827 !important;
        font-weight: 700 !important;
    }

.pred-factor-detalle[b-592frhbpjc] {
    font-size: 11px !important;
    line-height: 1.45;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* ===== FORM ACTIONS ===== */
.form-actions[b-592frhbpjc] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* SCROLLBAR */
.modal-container[b-592frhbpjc]::-webkit-scrollbar {
    width: 8px;
}

.modal-container[b-592frhbpjc]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-container[b-592frhbpjc]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}

    .modal-container[b-592frhbpjc]::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.45);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
    .modal-body[b-592frhbpjc] {
        flex-direction: column;
    }

    .modal-sidebar[b-592frhbpjc] {
        width: 100%;
        min-width: 0;
    }
}

/* ── Creada: fecha + autor ────────────────────────────────────────────────────────────────────── */

/* Autor y fecha en DOS LÍNEAS, la persona arriba.

   No caben en una: la columna del lateral mide 190 px, y tras la fecha y el avatar quedan unos 45
   para el nombre —salía «Devel…»—. Un nombre recortado a cuatro letras no identifica a nadie, que es
   lo único que este bloque tiene que hacer. En su línea dispone del ancho entero.

   La persona va arriba porque el rótulo dice «Creada por»: lo que viene detrás de esa frase es el
   por quién, y la fecha se lee después sin necesidad de etiqueta propia. */
.creada-valor[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Sin separador: el salto de línea ya separa, y un punto suelto al empezar la línea se lee mal.
   `max-width` para que el nombre se recorte dentro de la columna y no la empuje. */
.creada-por[b-592frhbpjc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

/* 20 px frente a los 24 del responsable: se reconoce como la misma familia y a la vez dice que esto
   no es el mismo tipo de dato. El gris en vez del índigo remata la diferencia. */
.avatar-autor-xs[b-592frhbpjc] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #9ca3af;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    text-transform: uppercase;
    line-height: 1;
}

/* Manda la persona: el rótulo dice «Creada por», así que es lo que se viene a leer. */
.autor-nombre[b-592frhbpjc] {
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Y la fecha queda de apoyo, debajo y más apagada. */
.creada-fecha[b-592frhbpjc] {
    font-size: 12px;
    color: #9ca3af;
}

/* Sin autor no hay nada que apoyar: la fecha vuelve a ser el dato principal, como era antes. */
.creada-fecha-sola[b-592frhbpjc] {
    font-size: 13px;
    color: #1e293b;
}

/* Rastro del archivo que trajo un comentario. Una línea y no el recuadro entero: el archivo está
   arriba, en la lista de la tarjeta, y repetirlo en cada comentario engordaba el hilo sin añadir
   nada. Aquí solo hace falta entender de qué habla el comentario. */
.comment-adjuntos[b-592frhbpjc] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--erp-muted, #64748b);
}

.comment-adjuntos .material-symbols-rounded[b-592frhbpjc] {
    font-size: 15px;
    position: relative;
    top: 2px;
}

.comment-adjunto-nombre[b-592frhbpjc] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--erp-primary, #2563eb);
    cursor: pointer;
}

.comment-adjunto-nombre:hover[b-592frhbpjc] {
    text-decoration: underline;
}

/* Marco de la descripción cuando lleva archivos: el borde pasa de la caja de texto al marco, para
   que texto y franja se lean como un solo recuadro y no como dos cosas pegadas. */
.descripcion-marco.con-franja[b-592frhbpjc] {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.descripcion-marco.con-franja:focus-within[b-592frhbpjc] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Dentro del marco, la caja de texto ya no pone borde ni sombra: los pone el marco. */
.descripcion-marco.con-franja > .comment-input[b-592frhbpjc] {
    border: none;
    border-radius: 0;
}

    .descripcion-marco.con-franja > .comment-input:focus[b-592frhbpjc] {
        box-shadow: none;
    }

/* El editor dentro del marco de la descripción: el borde lo pone el marco, no él. Sin esto se ven
   dos bordes, uno dentro de otro.

   `::deep` porque lo que lleva el borde lo pinta Syncfusion dentro del componente del editor, y a lo
   que pinta un hijo no le llega el atributo de ámbito del padre. */
.descripcion-marco.con-franja[b-592frhbpjc]  .e-richtexteditor {
    border: none !important;
    border-radius: 0 !important;
}

/* ── Plantillas de checklist ───────────────────────────────────────────────────────────────── */

/* El bloque entero NO se pinta sin plantillas guardadas (lo decide el .razor): el formulario queda
   como era y quien no las use no se entera de que existen. */

.plant-separador[b-592frhbpjc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    font-size: 11.5px;
    color: #94a3b8;
}

.plant-separador[b-592frhbpjc]::before,
.plant-separador[b-592frhbpjc]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e2e8f0;
}

.plant-lista[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 132px;
    overflow-y: auto;
}

.plant-opcion[b-592frhbpjc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 7px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.plant-opcion:hover[b-592frhbpjc] {
    border-color: #c7d7f5;
    background: #f8fafc;
}

.plant-opcion.elegida[b-592frhbpjc] {
    border-color: var(--crm-azul, #2563eb);
    background: #eff6ff;
}

.plant-opcion-nombre[b-592frhbpjc] {
    min-width: 0;
    font-size: 12.5px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plant-opcion-cuenta[b-592frhbpjc] {
    flex: none;
    font-size: 11px;
    color: var(--erp-muted, #64748b);
}

/* Lo que se va a meter, ANTES de meterlo: es la mitad del valor del bloque. */
.plant-previa[b-592frhbpjc] {
    margin: 7px 0 0;
    padding: 8px 10px 8px 26px;
    border-radius: 7px;
    background: #f8fafc;
    max-height: 120px;
    overflow-y: auto;
}

.plant-previa li[b-592frhbpjc] {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

/* ── Guardar una checklist como plantilla ──────────────────────────────────────────────────── */

.btn-guardar-plantilla[b-592frhbpjc] {
    display: inline-flex;
    padding: 3px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
}

.checklist-head:hover .btn-guardar-plantilla[b-592frhbpjc] {
    color: #94a3b8;
}

.btn-guardar-plantilla:hover[b-592frhbpjc] {
    background: #eff6ff;
    color: var(--crm-azul, #2563eb);
}

.btn-guardar-plantilla .material-symbols-rounded[b-592frhbpjc] {
    font-size: 17px;
}

.guardar-plantilla[b-592frhbpjc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 6px 0 2px;
    padding: 9px 11px;
    border: 1px solid #c7d7f5;
    border-radius: 8px;
    background: #f8fbff;
}

.guardar-plantilla-texto[b-592frhbpjc] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}
/* _content/ErpPowergest/Presentation/Shared/Modal/VentanaFlotante.razor.rz.scp.css */
/* Ventana flotante grande: el fondo atenúa la lista y la ventana ocupa casi todo el navegador. */

.vf-fondo[b-0jx62rvobb] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    box-sizing: border-box;
}

.vf-ventana[b-0jx62rvobb] {
    position: relative;
    width: min(1440px, 96vw);
    height: 94vh;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* El contenido (una pantalla entera) se desplaza por dentro; la «×» se queda fija en la esquina. */
.vf-contenido[b-0jx62rvobb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.vf-cerrar[b-0jx62rvobb] {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

    .vf-cerrar:hover[b-0jx62rvobb] {
        background: #f3f4f6;
    }

    .vf-cerrar .material-symbols-rounded[b-0jx62rvobb] {
        font-size: 20px;
    }

@media (max-width: 640px) {
    .vf-fondo[b-0jx62rvobb] {
        padding: 0;
    }

    .vf-ventana[b-0jx62rvobb] {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Navegacion/VolverAlOrigen.razor.rz.scp.css */
.volver-chip[b-80cuuj209i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 5px 12px 5px 8px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #f8fbff;
    color: #1e40af;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

    .volver-chip:hover[b-80cuuj209i] {
        background: #eef4ff;
        border-color: #93c5fd;
    }

.volver-ico[b-80cuuj209i] {
    font-size: 18px;
    line-height: 1;
}

.volver-texto[b-80cuuj209i] {
    white-space: nowrap;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== VARIANTE «BOTÓN DE CABECERA» =====
   Para las pantallas que sientan la vuelta a la izquierda del título en vez de encima de todo.
   Copia las medidas del botón plano del CommandBar (.command-bar.cmdbar-plain .command-bar__btn:
   48px de alto, radio pequeño) y el color del botón neutro de css/botones.css, para que la cabecera
   se lea como una sola fila de comandos. El texto se va al tooltip: el destino se dice, no se pinta. */
.volver-chip.volver-boton[b-80cuuj209i] {
    box-sizing: border-box;
    /* Ancla del rótulo, que se saca del flujo más abajo para dejar solo el icono. */
    position: relative;
    height: 48px;
    min-width: 40px;
    margin: 0;
    padding: 6px;
    justify-content: center;
    border: 1px solid var(--cb-neutro-borde, #d0d7de);
    border-radius: var(--cf-r-sm, 8px);
    background: var(--cb-neutro-fondo, #ffffff);
    color: var(--cb-neutro-texto, #374151);
    box-shadow: var(--cb-sombra, none);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .volver-chip.volver-boton:hover[b-80cuuj209i] {
        background: var(--cb-neutro-hover-fondo, #f6f8fa);
        border-color: var(--cb-neutro-hover-borde, #afb8c1);
        color: var(--cb-neutro-hover-texto, #111827);
    }

    /* El rótulo vive en el title/aria-label del enlace: se conserva en el DOM para los lectores de
       pantalla que no anuncian aria-label, pero no ocupa sitio. */
    .volver-chip.volver-boton .volver-texto[b-80cuuj209i] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Mismo tamaño y grosor que los iconos del CommandBar. */
    .volver-chip.volver-boton .volver-ico[b-80cuuj209i] {
        font-size: 20px;
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }
/* _content/ErpPowergest/Presentation/Shared/Onboarding/AvisoRecorridoCrm.razor.rz.scp.css */
/* Cae desde debajo de la barra superior, como un mensaje que llega. No ocupa sitio en el flujo: la
   pantalla de detrás no se mueve, porque moverla al aparecer y al irse es lo que hace que un aviso se
   sienta una interrupción y no un recado. */
.ar-aviso[b-o60dsp22mt] {
    position: fixed;
    /* Justo DEBAJO de la barra superior, que mide 64px: cae como un mensaje que llega, sin taparla.
       Estuvo a 12px y a z-index 1300, o sea detrás de la barra (que va a 3000): se pintaba en todas las
       pantallas y no se veía en ninguna. */
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3100;
    width: min(560px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 12px;
    box-shadow: 0 18px 44px -12px rgba(16, 24, 40, .28);
    overflow: hidden;
    animation: ar-entrar-b-o60dsp22mt .28s cubic-bezier(.4, 0, .2, 1);
}

    .ar-aviso.saliendo[b-o60dsp22mt] {
        animation: ar-salir-b-o60dsp22mt .22s cubic-bezier(.4, 0, .2, 1) forwards;
    }

@keyframes ar-entrar-b-o60dsp22mt {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ar-salir-b-o60dsp22mt {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -14px); }
}

/* El tiempo que queda, en la línea de arriba. Se ve cuánto falta sin tener que leer un número, y sobre
   todo se ve que el aviso SE VA A IR: sin ella, desaparecer de golpe parece un fallo. */
.ar-tiempo[b-o60dsp22mt] {
    height: 3px;
    background: #2563eb;
    transform-origin: left;
    animation-name: ar-consumir-b-o60dsp22mt;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes ar-consumir-b-o60dsp22mt {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.ar-cuerpo[b-o60dsp22mt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.ar-icono[b-o60dsp22mt] {
    font-size: 22px;
    color: #2563eb;
    flex: 0 0 auto;
}

.ar-texto[b-o60dsp22mt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.ar-titulo[b-o60dsp22mt] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.ar-sub[b-o60dsp22mt] {
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

.ar-empezar[b-o60dsp22mt] {
    flex: 0 0 auto;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
}

    .ar-empezar:hover[b-o60dsp22mt] {
        background: #1d4ed8;
    }

.ar-cerrar[b-o60dsp22mt] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
}

    .ar-cerrar:hover[b-o60dsp22mt] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .ar-cerrar .material-symbols-rounded[b-o60dsp22mt] {
        font-size: 18px;
    }
/* _content/ErpPowergest/Presentation/Shared/Onboarding/BienvenidaOnboarding.razor.rz.scp.css */
/*
    La ventana de bienvenida. Lo que se busca es que se lea como una puerta y no como una tarea: aire,
    una sola cosa que hacer y un modo fácil de salir. Por eso el botón de cerrar está a la vista desde el
    primer segundo (una bienvenida de la que no se sabe salir enseña, en el primer segundo, que este
    programa atrapa) y el «prefiero verlo luego» es un botón de verdad y no una letra pequeña.

    Los colores son los de la marca (el azul del producto), sin degradados de más: un panel limpio se lee
    como parte del programa; uno decorado, como un anuncio.
*/

.bv-velo[b-35pxwssmcw] {
    position: fixed;
    inset: 0;
    z-index: 9994;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    animation: bv-aparece-b-35pxwssmcw .18s ease-out;
}

.bv-ventana[b-35pxwssmcw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Por encima de la barra lateral de la puesta en marcha, que está en 9995 y se pinta después: con
       el mismo nivel ganaba ella y tapaba la tarjeta justo en el paso que la enseña. Y por DEBAJO del
       dock (9999), porque el botón y su menú son lo que se está señalando. */
    z-index: 9997;

    /* Acotada contra la ventana, como cualquier panel que pueda crecer con el texto. */
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 28px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 70px -18px rgba(16, 24, 40, .45);
    text-align: center;
    animation: bv-entra-b-35pxwssmcw .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes bv-aparece-b-35pxwssmcw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Entra subiendo un poco: el movimiento hacia arriba se lee como «se abre», y hacia abajo como «se te
   viene encima». Son 8 píxeles, lo justo para que se note sin marear. */
@keyframes bv-entra-b-35pxwssmcw {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.bv-x[b-35pxwssmcw] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    padding: 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .bv-x:hover[b-35pxwssmcw] {
        background: #f1f5f9;
        color: #0f172a;
    }

.bv-cabecera[b-35pxwssmcw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* El emblema, en un círculo con el azul del producto muy rebajado: da la nota de color sin gritar. */
.bv-emblema[b-35pxwssmcw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3d5afe;
    font-size: 26px;
}

.bv-titulo[b-35pxwssmcw] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0f172a;
}


/* ── El cuerpo: dos párrafos por pantalla, nunca más ────────────────────────────────────────────
   Una bienvenida se lee de pie, con el abrigo puesto. El segundo párrafo va en gris: lo que hay que
   entender está en el primero, y el segundo es el detalle que se lee si apetece. */
.bv-cuerpo[b-35pxwssmcw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

    .bv-cuerpo p[b-35pxwssmcw] {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: #334155;
    }

    .bv-cuerpo .bv-suave[b-35pxwssmcw] {
        font-size: 13px;
        color: #64748b;
    }

.bv-acciones[b-35pxwssmcw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.bv-siguiente[b-35pxwssmcw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: #3d5afe;
    color: #fff;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .bv-siguiente:hover[b-35pxwssmcw] {
        background: #2f49e0;
        box-shadow: 0 10px 24px -10px rgba(61, 90, 254, .8);
        transform: translateY(-1px);
    }

    .bv-siguiente .material-symbols-rounded[b-35pxwssmcw] {
        font-size: 19px;
    }

/* La segunda salida cuando hay dos caminos. Va en el mismo azul pero hueca: son dos opciones IGUALES
   —empezar por clientes o por productos da lo mismo— y pintar la segunda en gris diría que es la de
   segunda. Lo que la separa de «Ahora no», que sí es otra cosa, es que esto sigue siendo un botón. */
.bv-otra[b-35pxwssmcw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1.5px solid #c7d2fe;
    border-radius: 12px;
    background: #fff;
    color: #3d5afe;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .bv-otra:hover[b-35pxwssmcw] {
        background: #eef2ff;
        border-color: #3d5afe;
    }

    .bv-otra .material-symbols-rounded[b-35pxwssmcw] {
        font-size: 19px;
    }

.bv-luego[b-35pxwssmcw] {
    padding: 6px;
    border: none;
    background: none;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
}

    .bv-luego:hover[b-35pxwssmcw] {
        color: #0f172a;
        text-decoration: underline;
    }

/* Los puntos: cuántas pantallas quedan. Sin esto, «Siguiente» no dice si queda una o siete. */
.bv-puntos[b-35pxwssmcw] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}

.bv-punto[b-35pxwssmcw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background .2s ease, width .2s ease;
}

    .bv-punto.hecho[b-35pxwssmcw] { background: #c7d2fe; }

    .bv-punto.activo[b-35pxwssmcw] {
        width: 18px;
        border-radius: 3px;
        background: #3d5afe;
    }

/* ── El paso que señala el botón flotante ───────────────────────────────────────────────────────

   El velo se aclara: lo que se está enseñando está DEBAJO, y un velo al 50% lo convierte en una
   mancha. Y la tarjeta se va al sitio que le calcula ColocacionGuia, junto al botón. */
.bv-velo-claro[b-35pxwssmcw] {
    background: rgba(15, 23, 42, .28);
    backdrop-filter: none;
}

/* ===== Que la tarjeta NO pueda salirse de la pantalla =====

   Lo pidió el usuario con todas las letras («no quiero que la tarjeta salga de la pantalla, nunca») y la
   regla es la MISMA que la de la tarjeta de las guías (ver `GuiaInteractiva.razor.css`, FUN-596), porque
   el problema es el mismo y allí ya se intentó tres veces arreglarlo en el cálculo.

   Quien acota es el NAVEGADOR, no el cálculo: `--bv-x` / `--bv-y` son una PROPUESTA y el borde manda. El
   cálculo trabaja con el tamaño que la tarjeta tenía al medirla y el texto de cada paso la hace más alta
   o más baja; con el sitio ya escrito, se quedaba asomando.

   El `100%` de un `translate` es el tamaño DE LA PROPIA TARJETA en ese instante, que es justo lo que ni
   el cálculo ni las variables pueden saber a tiempo. Por eso el tirón de vuelta va ahí y no en `left`,
   donde `100%` sería el ancho de la ventana. */
.bv-ventana-junto[b-35pxwssmcw] {
    width: min(380px, calc(100vw - 32px));

    /* El sitio propuesto, nunca antes del borde. */
    left: max(16px, var(--bv-x, 16px));
    top: max(16px, var(--bv-y, 16px));

    /* Y el tirón de vuelta cuando se pasa por el otro lado. */
    transform: translate(
        min(0px, calc(100vw - 16px - max(16px, var(--bv-x, 16px)) - 100%)),
        min(0px, calc(100vh - 16px - max(16px, var(--bv-y, 16px)) - 100%)));

    /* Al colocarse se mide de verdad y se corrige: con la transición el ajuste se lee como un
       movimiento y no como un salto. */
    transition: left .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1),
                transform .28s cubic-bezier(.4, 0, .2, 1);

    /* La entrada solo funde: animar el `transform` aquí pisaría el tope de arriba. */
    animation: bv-aparece-b-35pxwssmcw .22s ease-out;
}

/* El aro del botón. Late despacio: lo justo para que la vista vaya ahí sin que parezca una alarma.
   No intercepta el ratón —`pointer-events: none`— porque el botón de debajo tiene que seguir siendo
   pulsable: la bienvenida enseña, no secuestra. */
.bv-aro[b-35pxwssmcw] {
    position: fixed;
    /* Entre el velo (9994) y la tarjeta: el aro tiene que verse por encima del velo y de la barra. */
    z-index: 9996;
    border-radius: 50%;
    border: 3px solid #3d5afe;
    box-shadow: 0 0 0 6px rgba(61, 90, 254, .22);
    pointer-events: none;
    animation: bv-late-b-35pxwssmcw 1.8s ease-in-out infinite;
}

@keyframes bv-late-b-35pxwssmcw {
    0%, 100% { box-shadow: 0 0 0 6px rgba(61, 90, 254, .22); }
    50%      { box-shadow: 0 0 0 12px rgba(61, 90, 254, .10); }
}


/* La despedida de quien dijo que no. Aviso de esquina, no ventana: cerrar una ventana para que salga
   otra es justo lo que estamos quitando. Va abajo a la izquierda porque abajo a la derecha está el
   botón flotante del que habla, y taparlo mientras se señala sería un chiste. */
.bv-nota[b-35pxwssmcw] {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 2400;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(380px, calc(100vw - 36px));
    padding: 12px 12px 12px 14px;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px -16px rgba(15, 23, 42, .38);
    animation: bv-nota-entra-b-35pxwssmcw .22s ease-out;
}

    .bv-nota > .material-symbols-rounded[b-35pxwssmcw] {
        flex: none;
        margin-top: 1px;
        font-size: 20px;
        color: #3d5afe;
    }

.bv-nota-txt[b-35pxwssmcw] {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.55;
    color: #334155;
}

.bv-nota-x[b-35pxwssmcw] {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #94a3b8;
    cursor: pointer;
}

    .bv-nota-x:hover[b-35pxwssmcw] {
        background: #f1f5f9;
        color: #0f172a;
    }

    .bv-nota-x .material-symbols-rounded[b-35pxwssmcw] {
        font-size: 16px;
    }

@keyframes bv-nota-entra-b-35pxwssmcw {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}
/* _content/ErpPowergest/Presentation/Shared/Onboarding/ChecklistOnboardingPanel.razor.rz.scp.css */

/* ===== La ventana emergente de bienvenida =====
   El mismo contenido que el cajón, en medio de la pantalla y con velo detrás: es lo primero que ve
   quien entra por primera vez, y ahí un panel pegado a un lado se confunde con un aviso que se puede
   ignorar. El velo cierra al pulsarlo (nadie debe quedarse atrapado en su propia bienvenida).
   Alto acotado contra la ventana y desplazamiento dentro, que el camino crece con cada guía nueva. */
.ob-velo[b-6uz56nxnwi] {
    position: fixed;
    inset: 0;
    z-index: 9994;
    background: rgba(15, 23, 42, .45);
}

.ob-modal[b-6uz56nxnwi] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9995;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .35);
    overflow-y: auto;
}

.ob-drawer[b-6uz56nxnwi] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9995;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    padding: 16px;
    background: #fff;
    border-left: 1px solid #e6e6e6;
    box-shadow: -18px 0 45px rgba(0, 0, 0, .12);
    overflow-y: auto;
}

.ob-head[b-6uz56nxnwi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ob-close[b-6uz56nxnwi] {
    background: none;
    border: none;
    font-size: 15px;
    color: #666;
    cursor: pointer;
}

.ob-loading[b-6uz56nxnwi] {
    padding: 24px 0;
    font-size: 13px;
    color: #777;
}

.ob-progress[b-6uz56nxnwi] {
    height: 8px;
    background: #eef1f5;
    border-radius: 999px;
    overflow: hidden;
}

.ob-bar[b-6uz56nxnwi] {
    height: 100%;
    background: #2f6fed;
    border-radius: 999px;
    transition: width .3s ease;
}

.ob-resumen[b-6uz56nxnwi] {
    margin-bottom: 18px;
}

.ob-resumen-txt[b-6uz56nxnwi] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.ob-resumen-sub[b-6uz56nxnwi] {
    margin: 2px 0 10px;
    font-size: 12px;
    color: #777;
}

.ob-tasks[b-6uz56nxnwi] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Un bloque por módulo. Lo que arregla es lo que se veía antes: siete tarjetas seguidas e iguales, sin
   nada que dijera cuál era del CRM y cuál del ERP. Quien solo tiene CRM veía dos que no le tocaban. */
.ob-grupo-cab[b-6uz56nxnwi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ob-grupo-tit[b-6uz56nxnwi] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #4a5568;
}

.ob-grupo-num[b-6uz56nxnwi] {
    font-size: 11px;
    font-weight: 800;
    color: #9aa3ad;
}

.ob-grupo-nota[b-6uz56nxnwi] {
    margin: 2px 0 10px;
    font-size: 11.5px;
    color: #8d949c;
}

/* El recorrido se pinta como un CAMINO y no como una lista, porque eso es lo que es: empezar por la
   cuarta no lleva a ninguna parte. Las bolitas van unidas por una línea vertical, que es un
   pseudo-elemento de cada paso menos el último. */
.ob-camino[b-6uz56nxnwi] {
    display: flex;
    flex-direction: column;
}

.ob-paso[b-6uz56nxnwi] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

    .ob-paso:not(:last-child)[b-6uz56nxnwi]::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 30px;
        bottom: -2px;
        width: 2px;
        background: #e7eaee;
    }

    .ob-paso.hecho:not(:last-child)[b-6uz56nxnwi]::before {
        background: #cfe8d9;
    }

.ob-bolita[b-6uz56nxnwi] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: 12px;
    font-weight: 800;
    color: #98a1ab;
    background: #fff;
    border: 2px solid #e2e6ea;
    border-radius: 50%;
}

    .ob-bolita .material-symbols-rounded[b-6uz56nxnwi] {
        font-size: 16px;
    }

.ob-paso.hecho .ob-bolita[b-6uz56nxnwi] {
    color: #fff;
    background: #2fa564;
    border-color: #2fa564;
}

.ob-paso.ahora .ob-bolita[b-6uz56nxnwi] {
    color: #fff;
    background: #2f6fed;
    border-color: #2f6fed;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .14);
}

.ob-paso-cuerpo[b-6uz56nxnwi] {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 3px;
}

.ob-paso-tit[b-6uz56nxnwi] {
    font-size: 13px;
    font-weight: 700;
}

.ob-paso-sub[b-6uz56nxnwi] {
    font-size: 12px;
    color: #8b9199;
}

/* Las que aún no tocan se atenúan: siguen a la vista (se ve lo que viene) pero no compiten con la que
   toca ahora. Las hechas pierden el subtítulo: ya no hay que decidir nada sobre ellas. */
.ob-paso.luego .ob-paso-tit[b-6uz56nxnwi],
.ob-paso.luego .ob-paso-sub[b-6uz56nxnwi] {
    color: #a9b0b8;
}

.ob-paso.hecho .ob-paso-tit[b-6uz56nxnwi] {
    color: #6b7480;
}

.ob-paso.hecho .ob-paso-sub[b-6uz56nxnwi] {
    display: none;
}

/* UN SOLO botón en todo el bloque, el de la que toca. Con uno por tarea, las cinco pedían lo mismo y
   ninguna decía por dónde empezar. */
.ob-paso-btn[b-6uz56nxnwi] {
    flex: 0 0 auto;
    align-self: center;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #2f6fed;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

    .ob-paso-btn:hover[b-6uz56nxnwi] {
        background: #2a63d4;
    }

.ob-paso-rep[b-6uz56nxnwi] {
    flex: 0 0 auto;
    align-self: center;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #9aa3ad;
    background: none;
    border: none;
    cursor: pointer;
}

    .ob-paso-rep:hover[b-6uz56nxnwi] {
        color: #2f6fed;
    }

/* Las sueltas conservan la tarjeta de siempre: sin orden entre ellas, cada una con su botón. */
.ob-suelta[b-6uz56nxnwi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
}

    .ob-suelta.done[b-6uz56nxnwi] {
        background: #f6faf7;
        border-color: #d8ebdd;
    }

.ob-check[b-6uz56nxnwi] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #fff;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
}

    .ob-check.done[b-6uz56nxnwi] {
        background: #2fa564;
        border-color: #2fa564;
    }

.ob-task-body[b-6uz56nxnwi] {
    flex: 1 1 auto;
    min-width: 0;
}

.ob-task-title[b-6uz56nxnwi] {
    font-size: 13px;
    font-weight: 700;
}

.ob-task-sub[b-6uz56nxnwi] {
    font-size: 12px;
    color: #777;
}

.ob-task-btn[b-6uz56nxnwi] {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #2f6fed;
    background: #fff;
    border: 1px solid #dfe6f5;
    border-radius: 10px;
    cursor: pointer;
}

    .ob-task-btn:hover[b-6uz56nxnwi] {
        background: #f3f7ff;
    }

/* Datos de ejemplo: bloque aparte, bajo las tareas. No es una tarea que completar —no lleva marca de
   hecho ni cuenta para el progreso—, es una acción disponible mientras haya algo que quitar. */
.ob-ejemplo[b-6uz56nxnwi] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #dfe4ea;
}

    .ob-ejemplo .ob-task-btn[b-6uz56nxnwi] {
        margin-top: 10px;
    }

/* El remate del recorrido. Sin él, terminado el camino el bloque se queda mudo: cinco marcas verdes y
   ningún botón encendido, que se lee más como «se ha roto» que como «ya está». */
.ob-fin[b-6uz56nxnwi] {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: #2b6a46;
    background: #f2f9f5;
    border: 1px solid #d8ebdd;
    border-radius: 10px;
}

/* Lo que le falta a una tarjeta empezada. En el azul del producto y no en gris: no es un detalle de
   apoyo como el subtítulo, es el motivo por el que el botón dice «Seguir» en vez de «Empezar». */
.ob-task-medias[b-6uz56nxnwi] {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #3d5afe;
}

/* ── Lo que le falta a una tarjeta para poder hacerse ────────────────────────────────────────────
   Va dentro de la tarjeta, como la marca de «te falta 1 de 2», y no en una ventana: es información
   SOBRE esa tarjeta y sacarla de ahí obligaría a decir de cuál se habla.

   En ámbar y no en rojo: no es un error, es que todavía no toca. El rojo diría que algo se ha roto. */
.ob-faltan[b-6uz56nxnwi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -4px 0 12px 34px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
}

.ob-faltan-txt[b-6uz56nxnwi] {
    font-size: 12.5px;
    line-height: 1.5;
    color: #78350f;
}

.ob-faltan-btn[b-6uz56nxnwi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #3d5afe;
    border-radius: 8px;
    background: #fff;
    color: #3d5afe;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .ob-faltan-btn:hover[b-6uz56nxnwi] { background: #eef2ff; }

    .ob-faltan-btn .material-symbols-rounded[b-6uz56nxnwi] { font-size: 18px; }

.ob-faltan-no[b-6uz56nxnwi] {
    align-self: center;
    padding: 2px 6px;
    border: none;
    background: none;
    color: #92400e;
    font-size: 12px;
    cursor: pointer;
}

    .ob-faltan-no:hover[b-6uz56nxnwi] { text-decoration: underline; }
/* _content/ErpPowergest/Presentation/Shared/Onboarding/SiguienteGuia.razor.rz.scp.css */
/* El eslabón entre guías. Se pinta por encima de la guía (1401) porque aparece cuando esa ya ha
   terminado y ya no hay nada suyo que pueda estorbar. */
.sg-capa[b-pcbhkl4eb8] {
    position: fixed;
    inset: 0;
    z-index: 1450;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .5);
}

.sg-tarjeta[b-pcbhkl4eb8] {
    width: min(400px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px -12px rgba(16, 24, 40, .34);
    padding: 22px 24px 18px;
}

/* Lo primero que se lee es que lo anterior está HECHO. Es lo que convierte el mensaje en un avance y
   no en otra cosa que hacer. */
.sg-hecho[b-pcbhkl4eb8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0f766e;
    margin-bottom: 10px;
}

    .sg-hecho .material-symbols-rounded[b-pcbhkl4eb8] {
        font-size: 18px;
    }

.sg-titulo[b-pcbhkl4eb8] {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.sg-texto[b-pcbhkl4eb8] {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

.sg-acciones[b-pcbhkl4eb8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sg-salir[b-pcbhkl4eb8] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
}

    .sg-salir:hover[b-pcbhkl4eb8] {
        background: #f1f5f9;
        color: #0f172a;
    }

.sg-continuar[b-pcbhkl4eb8] {
    background: #0f766e;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 8px;
}

    .sg-continuar:hover[b-pcbhkl4eb8] {
        background: #115e56;
    }

/* La espera del botón, contada encima de él. Dentro del rótulo se lee como parte del botón y parece que
   está roto; aquí se lee como lo que es, y dice por qué está apagado en vez de dejarlo adivinar. */
.sg-cuenta[b-pcbhkl4eb8] {
    font-size: 12px;
    color: #94a3b8;
    text-align: right;
    margin-bottom: 6px;
}

.sg-continuar:disabled[b-pcbhkl4eb8] {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: default;
}

/* El «te recomiendo seguir con» que va encima del título de la sugerida. Pequeño y en gris: lo que
   tiene que leerse es el TÍTULO de la guía, no la frase que lo presenta. */
.sg-recomiendo[b-pcbhkl4eb8] {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #64748b;
}
/* _content/ErpPowergest/Presentation/Shared/Onboarding/TutorialInteractivo.razor.rz.scp.css */
/* El overlay del tutorial va por encima de TODO, incluidos los modales de Syncfusion y el dock. */
.ti-overlay[b-gffvmxxoto] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    cursor: default;
}

.ti-svg[b-gffvmxxoto] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Solo decorativo: el recorte real lo hace la máscara del SVG. */
.ti-highlight[b-gffvmxxoto] {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 2px rgba(47, 111, 237, .35), 0 12px 35px rgba(0, 0, 0, .35);
    background: rgba(255, 255, 255, .02);
    pointer-events: none;
}

.ti-card[b-gffvmxxoto] {
    position: absolute;
    width: 340px; /* el ancho real lo pone el componente en línea: 340 sin imagen; con ella, el de la imagen a tamaño real (mínimo 640) */
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
    padding: 12px;
    cursor: default;
}

/* Hasta que el componente la ha medido y colocado con su tamaño real. Invisible pero PINTADA: si fuera
   display:none no habría nada que medir. */
.ti-card--midiendo[b-gffvmxxoto] {
    visibility: hidden;
}

.ti-title[b-gffvmxxoto] {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 6px;
}

.ti-text[b-gffvmxxoto] {
    font-size: 13px;
    color: #333;
    line-height: 1.35;
    white-space: pre-line;
}

.ti-hint[b-gffvmxxoto] {
    margin-top: 8px;
    padding: 8px;
    font-size: 12px;
    color: #666;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 10px;
}

/* CR0: la miniatura. Ocupa el ancho de la tarjeta y se amplía al pulsar; el borde la separa del fondo
   claro y evita que una captura clara se funda con la tarjeta. */
.ti-img[b-gffvmxxoto] {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
}

    /* Al tamaño que tiene en pantalla (el componente pone el ancho en línea en cuanto la mide; hasta
       entonces llena la tarjeta), centrada si es más estrecha que la tarjeta. El tope de alto es la red
       por si la ventana es más baja de lo que se midió: el texto y los botones siguen entrando. */
    .ti-img img[b-gffvmxxoto] {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        max-height: calc(100vh - 240px);
        object-fit: contain;
    }

/* El visor: la imagen a tamaño legible, encima de la tarjeta, y un clic en cualquier sitio la cierra. */
.ti-visor[b-gffvmxxoto] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, .78);
    cursor: zoom-out;
}

    .ti-visor img[b-gffvmxxoto] {
        max-width: 92vw;
        max-height: 84vh;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
    }

.ti-visor-pie[b-gffvmxxoto] {
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

.ti-actions[b-gffvmxxoto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.ti-step[b-gffvmxxoto] {
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.ti-btn[b-gffvmxxoto] {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    cursor: pointer;
}

    .ti-btn:disabled[b-gffvmxxoto] {
        opacity: .55;
        cursor: default;
    }

.ti-primary[b-gffvmxxoto] {
    background: #2f6fed;
    border-color: #2f6fed;
    color: #fff;
}
/* _content/ErpPowergest/Presentation/Shared/Profile/ProfileDropdown.razor.rz.scp.css */
.user-menu-wrapper[b-fphdhzbcw3] {
    position: relative;
    cursor:pointer;
}

/* N15: disparador de la esquina de la cabecera — solo el avatar */
.user-menu-trigger[b-fphdhzbcw3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 50%;
    transition: background .15s ease;
}

    .user-menu-trigger:hover[b-fphdhzbcw3] {
        background-color: #e6f0ff;
    }

.text[b-fphdhzbcw3] {
    font-size: 16px;
    font-weight: 200;
    line-height:1;
    color:#666;
}

.dropdown-text[b-fphdhzbcw3] {
    font-size: 16px;
    font-weight: 200;
    line-height:1;
    color:#666;
}

/*------------------------
    DESPLEGABLE
------------------------*/

.dropdown-menu[b-fphdhzbcw3] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    padding: 6px 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.20);
    display: flex;
    flex-direction: column;
    min-width: 230px;
    z-index: 1000;
}

/* Cabecera del desplegable: usuario actual */
.dropdown-menu a.account-item[b-fphdhzbcw3] {
    padding: 6px 16px 6px 10px;
    gap: 0.6rem;
}

.account-texts[b-fphdhzbcw3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.account-name[b-fphdhzbcw3] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-email[b-fphdhzbcw3] {
    font-size: 11px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.dropdown-divider[b-fphdhzbcw3] {
    height: 1px;
    background: #eef0f3;
    margin: 6px 0;
}

    .dropdown-menu a[b-fphdhzbcw3] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 8px 50px 8px 12px;
        color: #666;
        text-decoration: none;
        transition: background .2s ease;
    }


        .dropdown-menu a:hover[b-fphdhzbcw3] {
            background: #f0f0f0; /* hover suave pro */
        }

.dropdown-item[b-fphdhzbcw3] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding: 0px 0px 0px 10px;
}

.icon[b-fphdhzbcw3] {
    font-size: 24px;
    line-height:1;
    color: gray;
    padding-right:5px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.logout-item .icon[b-fphdhzbcw3],
.logout-item .dropdown-text[b-fphdhzbcw3] {
    color: #e53935 !important;
}


/* _content/ErpPowergest/Presentation/Shared/QuickActions/QuickActionsPanel.razor.rz.scp.css */
/* Panel de acciones rápidas. El FAB que antes vivía aquí es ahora FloatingDock;
   este componente solo pinta el panel, y el dock lo ancla al botón. */
.quick-actions-panel[b-92m4hdz5n4] {
    --qa-blue: #2563eb;
    --qa-blue-dark: #1d4ed8;
    --qa-blue-bright: #2d8cff;
    --qa-panel-border: rgba(255, 255, 255, 0.12);
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 292px;
    padding: 12px;
    border: 1px solid var(--qa-panel-border);
    border-radius: 22px;
    background: radial-gradient(circle at top left, rgba(45, 140, 255, 0.22), transparent 42%), linear-gradient(180deg, #1f2a3d 0%, #172033 100%);
    box-shadow: 0 26px 54px rgba(15, 23, 42, 0.34), 0 8px 18px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000;
}

    .quick-actions-panel.qa-ready[b-92m4hdz5n4],
    .quick-actions-panel.qa-opening[b-92m4hdz5n4],
    .quick-actions-panel.qa-closing[b-92m4hdz5n4] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .quick-actions-panel.qa-open-up.qa-align-right[b-92m4hdz5n4] {
        transform-origin: bottom right;
    }

    .quick-actions-panel.qa-open-up.qa-align-left[b-92m4hdz5n4] {
        transform-origin: bottom left;
    }

    .quick-actions-panel.qa-open-down.qa-align-right[b-92m4hdz5n4] {
        transform-origin: top right;
    }

    .quick-actions-panel.qa-open-down.qa-align-left[b-92m4hdz5n4] {
        transform-origin: top left;
    }

/* Cabecera */
.quick-actions-header[b-92m4hdz5n4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 7px 13px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.quick-actions-title[b-92m4hdz5n4] {
    font-size: 15px;
    line-height: 1.15;
    font-weight: 850;
    color: #ffffff;
}

.quick-actions-subtitle[b-92m4hdz5n4] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 650;
    color: #b8c4d6;
}

.quick-actions-close[b-92m4hdz5n4] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .quick-actions-close span[b-92m4hdz5n4] {
        font-size: 21px;
    }

    .quick-actions-close:hover[b-92m4hdz5n4] {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.22);
    }

.quick-actions-list[b-92m4hdz5n4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overscroll-behavior: contain;
}

.quick-action-card[b-92m4hdz5n4] {
    width: 100%;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .quick-action-card:hover[b-92m4hdz5n4] {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(147, 197, 253, 0.32);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.20);
        transform: translateX(2px);
    }

.quick-action-icon[b-92m4hdz5n4] {
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 11px;
    background: rgba(239, 246, 255, 0.12);
    color: #bfdbfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.quick-action-card:hover .quick-action-icon[b-92m4hdz5n4] {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
}

.quick-action-text[b-92m4hdz5n4] {
    flex: 1 1 auto;
    min-width: 0;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-action-card:first-child[b-92m4hdz5n4] {
    background: rgba(37, 99, 235, 0.24);
    border-color: rgba(147, 197, 253, 0.30);
}

/* Animaciones */
.quick-actions-panel.qa-open-up.qa-opening[b-92m4hdz5n4] {
    animation: qaPanelInUp-b-92m4hdz5n4 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quick-actions-panel.qa-open-down.qa-opening[b-92m4hdz5n4] {
    animation: qaPanelInDown-b-92m4hdz5n4 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quick-actions-panel.qa-open-up.qa-closing[b-92m4hdz5n4] {
    animation: qaPanelOutUp-b-92m4hdz5n4 0.16s ease both;
}

.quick-actions-panel.qa-open-down.qa-closing[b-92m4hdz5n4] {
    animation: qaPanelOutDown-b-92m4hdz5n4 0.16s ease both;
}

.quick-action-card.qa-item-ready[b-92m4hdz5n4] {
    animation: qaItemIn-b-92m4hdz5n4 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--qa-delay);
}

@keyframes qaPanelInUp-b-92m4hdz5n4 {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes qaPanelInDown-b-92m4hdz5n4 {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes qaPanelOutUp-b-92m4hdz5n4 {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
}

@keyframes qaPanelOutDown-b-92m4hdz5n4 {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
}

@keyframes qaItemIn-b-92m4hdz5n4 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-actions-panel.qa-opening[b-92m4hdz5n4],
    .quick-actions-panel.qa-closing[b-92m4hdz5n4],
    .quick-action-card.qa-item-ready[b-92m4hdz5n4] {
        animation: none;
    }

    .quick-action-card.qa-item-ready[b-92m4hdz5n4] {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .quick-actions-panel[b-92m4hdz5n4] {
        width: 250px;
        border-radius: 19px;
    }

    .quick-action-card[b-92m4hdz5n4] {
        min-height: 44px;
        font-size: 13px;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Seguridad/AvisoCopiaPruebas.razor.rz.scp.css */
/* Franja de copia de pruebas. Misma forma que la de solo lectura (su hoja se copia porque el CSS va por
   componente) y otro color: violeta, que no se confunde ni con un aviso (ámbar) ni con una avería (rojo).
   Lo que tiene que decir es «esto no es el original», en todas las pantallas. */

.asl[b-hk7n7ydw1t] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    font-size: .875rem;
    flex-wrap: wrap;
}

.asl-copia[b-hk7n7ydw1t] {
    background: #f3e8ff;
    border-bottom: 1px solid #d8b4fe;
    color: #581c87;
}

.asl-ico[b-hk7n7ydw1t] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.asl-texto[b-hk7n7ydw1t] {
    flex: 1 1 18rem;
    line-height: 1.4;
}
/* _content/ErpPowergest/Presentation/Shared/Seguridad/AvisoSoloLectura.razor.rz.scp.css */
/* Franja de solo lectura. Ámbar y no rojo a propósito: el cliente no ha hecho nada mal ni hay
   ningún fallo — se le ha acabado la prueba. El rojo lo leería como avería. */

.asl[b-n8xt8t3lzh] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    color: #6d4c00;
    font-size: .875rem;
    flex-wrap: wrap;
}

/* En gracia todavía se puede trabajar, así que el aviso pesa menos: mismo sitio, menos contraste.
   Un aviso igual de fuerte que el del corte enseñaría a ignorarlo justo antes de que importe. */
.asl-gracia[b-n8xt8t3lzh] {
    background: #fffdf5;
    border-bottom-color: #ffe9a8;
}

.asl-ico[b-n8xt8t3lzh] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.asl-texto[b-n8xt8t3lzh] {
    flex: 1 1 18rem;
    line-height: 1.4;
}

.asl-btn[b-n8xt8t3lzh] {
    flex-shrink: 0;
    padding: .375rem .875rem;
    border: 0;
    border-radius: 999px;
    background: #6d4c00;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.asl-btn:hover[b-n8xt8t3lzh] {
    background: #513800;
}
/* _content/ErpPowergest/Presentation/Shared/Seguridad/PrestacionNoContratada.razor.rz.scp.css */
/* Ficha de una prestación que el cliente no tiene contratada.

   Deliberadamente NO se parece a un aviso de error: ni rojo, ni ámbar, ni icono de prohibido. Es una
   ficha de producto, porque eso es lo que es — el cliente no ha hecho nada mal, ha encontrado algo. */

.pnc[b-5alj9n9su4] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.pnc-tarjeta[b-5alj9n9su4] {
    max-width: 34rem;
    width: 100%;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    text-align: center;
}

.pnc-ico[b-5alj9n9su4] {
    font-size: 2.5rem;
    color: #6366f1;
}

.pnc-antetitulo[b-5alj9n9su4] {
    margin: .75rem 0 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b7280;
}

.pnc-titulo[b-5alj9n9su4] {
    margin: .25rem 0 .5rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #111827;
}

.pnc-resumen[b-5alj9n9su4] {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #374151;
}

/* Los puntos van alineados a la izquierda aunque la tarjeta esté centrada: una lista centrada se lee
   mucho peor, y aquí es lo que de verdad cuenta qué se lleva. */
.pnc-puntos[b-5alj9n9su4] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.pnc-puntos li[b-5alj9n9su4] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .375rem 0;
    font-size: .9375rem;
    line-height: 1.45;
    color: #374151;
}

.pnc-puntos .material-symbols-rounded[b-5alj9n9su4] {
    font-size: 1.125rem;
    color: #059669;
    flex-shrink: 0;
    margin-top: .1rem;
}

.pnc-plan[b-5alj9n9su4] {
    margin: 0 0 1.5rem;
    padding: .625rem 1rem;
    border-radius: 10px;
    background: #eef2ff;
    font-size: .9375rem;
    color: #3730a3;
}

.pnc-acciones[b-5alj9n9su4] {
    display: flex;
    gap: .625rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pnc-btn[b-5alj9n9su4] {
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 650;
    cursor: pointer;
}

.pnc-btn-primary[b-5alj9n9su4] {
    background: #4f46e5;
    color: #fff;
}

.pnc-btn-primary:hover[b-5alj9n9su4] {
    background: #4338ca;
}

/* La salida tiene el mismo peso visual que un enlace, no que un botón secundario: está ahí para quien
   entró por curiosidad, y no debe competir con la acción principal ni parecer un rechazo. */
.pnc-btn-suave[b-5alj9n9su4] {
    background: transparent;
    color: #6b7280;
}

.pnc-btn-suave:hover[b-5alj9n9su4] {
    color: #374151;
    background: #f3f4f6;
}

.pnc-nota[b-5alj9n9su4] {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: #9ca3af;
}
/* _content/ErpPowergest/Presentation/Shared/Seguridad/RequiereEmpresa.razor.rz.scp.css */
/* Mismo lenguaje visual que .seccion-error de MainLayout: el usuario ya conoce esta forma de
   "aquí no hay nada que hacer todavía", y un aviso con otro aspecto parecería un error del sistema. */

.re-sin-empresa[b-noswdtcg7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 48px 24px;
    color: #475569;
}

.re-sin-empresa-ico[b-noswdtcg7u] {
    font-size: 48px;
    color: #94a3b8;
}

.re-sin-empresa h2[b-noswdtcg7u] {
    margin: 0;
    font-size: 1.25rem;
    color: #334155;
}

.re-sin-empresa p[b-noswdtcg7u] {
    margin: 0;
    max-width: 460px;
}

.re-sin-empresa-nota[b-noswdtcg7u] {
    font-size: .875rem;
    color: #64748b;
}
/* _content/ErpPowergest/Presentation/Shared/Seguridad/RequierePermisoRuta.razor.rz.scp.css */
.prm-denegado[b-ujb291i3oz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 50vh;
    text-align: center;
    color: var(--text-secondary, #5f6368);
    padding: 2rem;
}

.prm-denegado-ico[b-ujb291i3oz] {
    font-size: 3rem;
    color: var(--text-tertiary, #9aa0a6);
}

.prm-denegado h2[b-ujb291i3oz] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary, #202124);
}

.prm-denegado p[b-ujb291i3oz] {
    margin: 0;
    max-width: 42ch;
}
/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/AppearanceSettings.razor.rz.scp.css */
.ap-root[b-thnhmvuxsn] {
    --ap-surface: #ffffff;
    --ap-border: #edf2f7;
    --ap-text: #0f172a;
    --ap-muted: #64748b;
    --ap-primary: #2563eb;
    --ap-primary-dark: #1d4ed8;
    --ap-primary-soft: #eff6ff;
    --ap-success: #16a34a;
    --ap-line: #dbe3ee;
    --ap-control-h: 36px;
    --ap-control-radius: 8px;
    --ap-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--ap-text);
    container-type: inline-size;
    container-name: ap-root;
}

/* =========================
   Acciones en la cabecera del modal
========================= */
.ap-root.ap-actions-slot[b-thnhmvuxsn] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
    container-type: normal;
}

.ap-msg[b-thnhmvuxsn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ap-success);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

    .ap-msg .material-symbols-rounded[b-thnhmvuxsn] {
        font-size: 18px;
    }

/* Los iconos son decorativos: nunca se seleccionan con el ratón */
.ap-root[b-thnhmvuxsn]  .material-symbols-rounded,
.ap-root[b-thnhmvuxsn]  .material-symbols-outlined,
.ap-root[b-thnhmvuxsn]  .e-icons {
    user-select: none;
    -webkit-user-select: none;
}

/* =========================
   Botones Syncfusion (mismo estilo que los botones de Notificaciones)
========================= */
.ap-root[b-thnhmvuxsn]  .e-btn.ap-btn,
.ap-root[b-thnhmvuxsn]  button.ap-btn {
    width: auto !important;
    min-width: 0 !important;
    height: clamp(30px, 4.4vw, 34px) !important;
    border-radius: 8px !important;
    border: 1px solid #c1c6d7 !important;
    background: transparent !important;
    color: #414754 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 0.9vw, 8px) !important;
    padding: 0 clamp(12px, 1.8vw, 16px) !important;
    font-family: inherit !important;
    font-size: clamp(12px, 1.4vw, 13px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

    .ap-root[b-thnhmvuxsn]  .e-btn.ap-btn:hover,
    .ap-root[b-thnhmvuxsn]  button.ap-btn:hover {
        background: rgba(211, 228, 254, 0.4) !important;
        border-color: #a9b3cc !important;
        color: #0b1c30 !important;
    }

    .ap-root[b-thnhmvuxsn]  .e-btn.ap-btn .e-btn-content,
    .ap-root[b-thnhmvuxsn]  button.ap-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(6px, 0.9vw, 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        line-height: 1 !important;
    }

.ap-btn-ico[b-thnhmvuxsn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0;
    height: 1em;
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1;
}

.ap-btn-label[b-thnhmvuxsn] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1em;
    line-height: 1;
    white-space: nowrap;
}

/* =========================
   Contenido (scroll)
========================= */
.ap-content[b-thnhmvuxsn] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    overscroll-behavior: contain;
}

    .ap-content[b-thnhmvuxsn]::-webkit-scrollbar {
        width: 6px;
    }

    .ap-content[b-thnhmvuxsn]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .ap-content[b-thnhmvuxsn]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* =========================
   Apartados (planos, unificados con los tabs de Gestión)

   Sin caja: nada de borde/sombra/radio/padding. Cada apartado se separa del siguiente por el
   espacio vertical del contenedor y se encabeza con un título subrayado por una fina línea gris.
========================= */
.ap-card[b-thnhmvuxsn] {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.ap-card-head[b-thnhmvuxsn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ecf2;
}

.ap-card-ico[b-thnhmvuxsn] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--ap-primary);
    background: var(--ap-primary-soft);
    font-size: 20px;
}

.ap-card-title[b-thnhmvuxsn] {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 850;
}

/* =========================
   Selector de tema
========================= */
.ap-theme-grid[b-thnhmvuxsn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.ap-theme-option[b-thnhmvuxsn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 2px solid var(--ap-border);
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
    text-align: left;
}

    .ap-theme-option:hover[b-thnhmvuxsn] {
        border-color: #cbd5e1;
    }

    .ap-theme-option.selected[b-thnhmvuxsn] {
        border-color: var(--ap-primary);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    }

.ap-theme-preview[b-thnhmvuxsn] {
    height: 64px;
    border-radius: 10px;
    border: 1px solid var(--ap-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    overflow: hidden;
}

    .ap-theme-preview.preview-light[b-thnhmvuxsn] {
        background: #f8fafc;
    }

    .ap-theme-preview.preview-dark[b-thnhmvuxsn] {
        background: #0f172a;
        border-color: #1e293b;
    }

    .ap-theme-preview.preview-system[b-thnhmvuxsn] {
        background: linear-gradient(120deg, #f8fafc 0 50%, #0f172a 50% 100%);
    }

.ap-theme-bar[b-thnhmvuxsn] {
    height: 8px;
    width: 80%;
    border-radius: 999px;
    background: #cbd5e1;
}

    .ap-theme-bar.short[b-thnhmvuxsn] {
        width: 50%;
    }

.preview-dark .ap-theme-bar[b-thnhmvuxsn] {
    background: #475569;
}

.preview-system .ap-theme-bar[b-thnhmvuxsn] {
    background: linear-gradient(90deg, #cbd5e1 0 50%, #475569 50% 100%);
}

.ap-theme-foot[b-thnhmvuxsn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ap-theme-ico[b-thnhmvuxsn] {
    font-size: 18px;
    color: var(--ap-muted);
}

.ap-theme-label[b-thnhmvuxsn] {
    font-size: 13px;
    font-weight: 750;
    color: var(--ap-text);
    flex: 1 1 auto;
}

.ap-theme-check[b-thnhmvuxsn] {
    font-size: 18px;
    color: var(--ap-primary);
    opacity: 0;
    transition: opacity .15s ease;
}

.ap-theme-option.selected .ap-theme-check[b-thnhmvuxsn] {
    opacity: 1;
}

/* =========================
   Muestrario de color
========================= */
.ap-swatches[b-thnhmvuxsn] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Holgura suficiente para el anillo de 4px de la muestra seleccionada: si no, el borde
       izquierdo se corta contra el overflow-x del contenido del tab. */
    padding: 6px;
}

.ap-swatch[b-thnhmvuxsn] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: var(--sw);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px var(--ap-border);
    transition: box-shadow .15s ease;
    padding: 0;
}

    .ap-swatch .material-symbols-rounded[b-thnhmvuxsn] {
        font-size: 18px;
        color: #ffffff;
        opacity: 0;
        transition: opacity .15s ease;
    }

    .ap-swatch.selected[b-thnhmvuxsn] {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--sw);
    }

        .ap-swatch.selected .material-symbols-rounded[b-thnhmvuxsn] {
            opacity: 1;
        }

/* =========================
   Campos
========================= */
.ap-grid[b-thnhmvuxsn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 16px;
}

.ap-field[b-thnhmvuxsn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .ap-field label[b-thnhmvuxsn] {
        color: #475569;
        font-size: 12.5px;
        font-weight: 750;
    }

    .ap-field[b-thnhmvuxsn]  .e-control-wrapper,
    .ap-field[b-thnhmvuxsn]  .e-input-group,
    .ap-field[b-thnhmvuxsn]  .e-control,
    .ap-field[b-thnhmvuxsn]  input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

/* =========================
   Controles Syncfusion (mismo lenguaje redondeado que la ficha de factura)
========================= */
.ap-field[b-thnhmvuxsn]  .e-input-group,
.ap-field[b-thnhmvuxsn]  .e-input-group.e-control-wrapper {
    height: var(--ap-control-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--ap-line) !important;
    border-radius: var(--ap-control-radius) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    padding-inline: 6px 4px !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    /* Los temas de Syncfusion pintan la línea inferior con pseudoelementos */
    .ap-field[b-thnhmvuxsn]  .e-input-group::before,
    .ap-field[b-thnhmvuxsn]  .e-input-group::after {
        display: none !important;
    }

    .ap-field[b-thnhmvuxsn]  .e-input-group:hover:not(.e-input-focus) {
        border-color: #cbd5e1 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
    }

    .ap-field[b-thnhmvuxsn]  .e-input-group.e-input-focus {
        border-color: var(--ap-primary) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
    }

    /* El input interior no pinta caja: la caja es el grupo */
    .ap-field[b-thnhmvuxsn]  .e-input-group input.e-input,
    .ap-field[b-thnhmvuxsn]  .e-input-group .e-input {
        height: 100% !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 8px !important;
        color: var(--ap-text) !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 650 !important;
    }

        .ap-field[b-thnhmvuxsn]  .e-input-group input.e-input::placeholder {
            color: #94a3b8 !important;
            font-weight: 600 !important;
        }

/* Flecha del desplegable */
.ap-field[b-thnhmvuxsn]  .e-input-group .e-input-group-icon {
    border: 0 !important;
    border-radius: 999rem !important;
    background: transparent !important;
    color: var(--ap-muted) !important;
    margin: 0 !important;
    transition: background .16s ease, color .16s ease;
}

    .ap-field[b-thnhmvuxsn]  .e-input-group .e-input-group-icon:hover,
    .ap-field[b-thnhmvuxsn]  .e-input-group .e-input-group-icon:active {
        background: var(--ap-primary-soft) !important;
        color: var(--ap-primary) !important;
    }

.ap-field[b-thnhmvuxsn]  .e-input-group.e-input-focus .e-input-group-icon {
    color: var(--ap-primary) !important;
}

/* =========================
   Switches
========================= */
.ap-switches[b-thnhmvuxsn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ap-switch-row[b-thnhmvuxsn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ap-border);
    border-radius: 14px;
    background: #f8fafc;
    transition: border-color .15s ease, background-color .15s ease;
}

    .ap-switch-row:hover[b-thnhmvuxsn] {
        border-color: #cbd5e1;
        background: #f4f7fb;
    }

.ap-switch-text[b-thnhmvuxsn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ap-switch-name[b-thnhmvuxsn] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ap-text);
}

.ap-switch-desc[b-thnhmvuxsn] {
    font-size: 12px;
    color: var(--ap-muted);
}

/* =========================
   Responsive por ancho del panel
========================= */
@container ap-root (max-width: 760px) {
    .ap-grid[b-thnhmvuxsn] {
        grid-template-columns: 1fr;
    }
}

/* El botón de la cabecera nunca colapsa a icono: solo se oculta el mensaje si falta sitio */
@media (max-width: 768px) {
    .ap-actions-slot .ap-msg[b-thnhmvuxsn] {
        display: none;
    }
}

@container ap-root (max-width: 420px) {
    .ap-theme-grid[b-thnhmvuxsn] {
        grid-template-columns: 1fr 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/BajaCuentaDialogo.razor.rz.scp.css */
/* Contenido del diálogo de baja. El marco (velo, caja, cabecera y pie) lo pone el Modal compartido;
   aquí solo va lo de dentro. */

.bc-intro[b-yz8gva6l6z] {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #111827);
}

.bc-nota[b-yz8gva6l6z] {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary, #6B7280);
}

/* Nota del correo de confirmación, bajo el aviso. Va separada y en tono secundario porque no es una
   consecuencia más: dice qué hace el botón de al lado. */
.bc-nota-correo[b-yz8gva6l6z] {
    margin-top: 14px;
}

    .bc-nota-correo strong[b-yz8gva6l6z] {
        color: var(--text-primary, #111827);
    }

/* ── Avisos ────────────────────────────────────────────────────────────────────────────────── */

.bc-aviso[b-yz8gva6l6z] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
}

    .bc-aviso p[b-yz8gva6l6z] {
        margin: 6px 0 0;
    }

/* Rojo: es lo que se va a destruir. Es el único bloque del paso, así que carga solo el peso de lo
   irreversible. */
.bc-aviso-peligro[b-yz8gva6l6z] {
    border-left: 4px solid #DC2626;
    background-color: #FEF2F2;
    color: #7F1D1D;
}

    .bc-aviso-peligro .material-symbols-rounded[b-yz8gva6l6z] {
        color: #DC2626;
    }

    .bc-aviso-peligro strong[b-yz8gva6l6z] {
        font-size: 14px;
        color: #7F1D1D;
    }

.bc-aviso-error[b-yz8gva6l6z] {
    margin-top: 12px;
    border-left: 4px solid #DC2626;
    background-color: #FEF2F2;
    color: #7F1D1D;
}

    .bc-aviso-error .material-symbols-rounded[b-yz8gva6l6z] {
        color: #DC2626;
    }

/* ── Confirmación ──────────────────────────────────────────────────────────────────────────── */

.bc-input[b-yz8gva6l6z] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--input-bg, #FFFFFF);
    color: var(--text-primary, #111827);
}

    .bc-input:focus[b-yz8gva6l6z] {
        outline: none;
        border-color: #DC2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
    }

/* Caja del código: ancha, centrada y separada, para que los cinco dígitos se lean de uno en uno al
   copiarlos del correo. Monoespaciada porque con la de texto los dígitos bailan de anchura. */
.bc-codigo[b-yz8gva6l6z] {
    text-align: center;
    font-family: "Courier New", Courier, monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 12px;
    /* Compensa el hueco que letter-spacing deja SIEMPRE a la derecha del último dígito: sin esto el
       número se ve descentrado y no hay forma de saber por qué. */
    text-indent: 12px;
    padding: 14px 12px;
}

/* Un botón que parece enlace. Es <button> y no <a> a propósito: dispara una acción, no navega, y un
   ancla sin destino deja fuera a quien va por teclado. */
.bc-enlace[b-yz8gva6l6z] {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    cursor: pointer;
    text-decoration: underline;
}

    .bc-enlace:disabled[b-yz8gva6l6z] {
        color: var(--text-secondary, #6B7280);
        cursor: default;
    }

/* ── Botones del pie ───────────────────────────────────────────────────────────────────────── */

.bc-btn[b-yz8gva6l6z] {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .bc-btn:disabled[b-yz8gva6l6z] {
        opacity: .5;
        cursor: default;
    }

.bc-btn-secundario[b-yz8gva6l6z] {
    border: 1px solid var(--border-color, #D1D5DB);
    background-color: transparent;
    color: var(--text-primary, #374151);
}

    .bc-btn-secundario:hover:not(:disabled)[b-yz8gva6l6z] {
        background-color: #F3F4F6;
    }

/* Aquí el botón destructivo SÍ va relleno: ya no abre nada, es la acción. */
.bc-btn-peligro[b-yz8gva6l6z] {
    border: 1px solid #DC2626;
    background-color: #DC2626;
    color: #FFFFFF;
}

    .bc-btn-peligro:hover:not(:disabled)[b-yz8gva6l6z] {
        background-color: #B91C1C;
        border-color: #B91C1C;
    }
/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/CuentaSettings.razor.rz.scp.css */
/* Sección «Cuenta» de Ajustes.

   Sigue la forma de Apariencia —secciones sin caja, con la cabecera subrayada— para que no parezca
   una pantalla traída de otro sitio. La ÚNICA que rompe ese patrón es la zona de peligro, y lo hace a
   propósito: es la excepción que separa lo que no se deshace de lo que sí. */

/* Ocupa el ancho del panel, como el resto de secciones (.ap-root). El scroll lo lleva
   `.settings-content`, que ya es el contenedor desplazable: ponerlo también aquí daría dos barras
   anidadas. */
.cu-root[b-48in66c5kg] {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.cu-content[b-48in66c5kg] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 4px 0 24px;
    width: 100%;
}

/* ── Sección ───────────────────────────────────────────────────────────────────────────────── */

.cu-card-head[b-48in66c5kg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ecf2;
}

.cu-card-ico[b-48in66c5kg] {
    font-size: 20px;
    color: var(--settings-muted, #64748b);
}

.cu-card-title[b-48in66c5kg] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

/* ── Datos de la cuenta ────────────────────────────────────────────────────────────────────── */

.cu-datos[b-48in66c5kg] {
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cu-dato[b-48in66c5kg] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

    .cu-dato dt[b-48in66c5kg] {
        flex: 0 0 92px;
        font-size: 13px;
        color: var(--text-secondary, #6B7280);
    }

    .cu-dato dd[b-48in66c5kg] {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary, #111827);
        word-break: break-all;
    }

.cu-nota[b-48in66c5kg] {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary, #6B7280);
}

/* ── Zona de peligro ───────────────────────────────────────────────────────────────────────── */

/* La ÚNICA sección con caja. Rojo en el borde y en el icono, no en el fondo: teñirla entera gritaría
   desde que se abre Ajustes, y lo que tiene que llamar la atención es el botón, no la sección. */
.cu-card-peligro[b-48in66c5kg] {
    border: 1px solid #FCA5A5;
    border-radius: 12px;
    padding: 16px 18px;
}

    /* Dentro de la caja la cabecera ya está delimitada; el subrayado sobra. */
    .cu-card-peligro .cu-card-head[b-48in66c5kg] {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

.cu-ico-peligro[b-48in66c5kg] {
    color: #DC2626;
}

.cu-peligro-fila[b-48in66c5kg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cu-peligro-texto[b-48in66c5kg] {
    flex: 1 1 auto;
    min-width: 0;
}

.cu-peligro-titulo[b-48in66c5kg] {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

/* Contorno y no relleno: el botón que de verdad borra está dos pasos más adelante, y llenarlo aquí
   igualaría visualmente «abrir un diálogo» con «eliminar la cuenta». */
.cu-btn-peligro[b-48in66c5kg] {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid #DC2626;
    border-radius: 8px;
    background-color: transparent;
    color: #DC2626;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .cu-btn-peligro:hover:not(:disabled)[b-48in66c5kg] {
        background-color: #DC2626;
        color: #FFFFFF;
    }

    .cu-btn-peligro:disabled[b-48in66c5kg] {
        opacity: .5;
        cursor: default;
    }

@media (max-width: 560px) {
    .cu-peligro-fila[b-48in66c5kg] {
        flex-direction: column;
        align-items: stretch;
    }

    .cu-btn-peligro[b-48in66c5kg] {
        width: 100%;
    }
}

/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/PreferencesSettings.razor.rz.scp.css */
.pref-root[b-bg203wqegl] {
    --pref-surface: #ffffff;
    --pref-border: #edf2f7;
    --pref-text: #0f172a;
    --pref-muted: #64748b;
    --pref-primary: #2563eb;
    --pref-primary-dark: #1d4ed8;
    --pref-primary-soft: #eff6ff;
    --pref-success: #16a34a;
    --pref-line: #dbe3ee;
    --pref-control-h: 36px;
    --pref-control-radius: 8px;
    --pref-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--pref-text);
    container-type: inline-size;
    container-name: pref-root;
}

/* =========================
   Acciones en la cabecera del modal
========================= */
.pref-root.pref-actions-slot[b-bg203wqegl] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
    container-type: normal;
}

.pref-msg[b-bg203wqegl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pref-success);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

    .pref-msg .material-symbols-rounded[b-bg203wqegl] {
        font-size: 18px;
    }

/* Los iconos son decorativos: nunca se seleccionan con el ratón */
.pref-root[b-bg203wqegl]  .material-symbols-rounded,
.pref-root[b-bg203wqegl]  .material-symbols-outlined,
.pref-root[b-bg203wqegl]  .e-icons {
    user-select: none;
    -webkit-user-select: none;
}

/* =========================
   Botones Syncfusion (mismo estilo que los botones de Notificaciones)
========================= */
.pref-root[b-bg203wqegl]  .e-btn.pref-btn,
.pref-root[b-bg203wqegl]  button.pref-btn {
    width: auto !important;
    min-width: 0 !important;
    height: clamp(30px, 4.4vw, 34px) !important;
    border-radius: 8px !important;
    border: 1px solid #c1c6d7 !important;
    background: transparent !important;
    color: #414754 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 0.9vw, 8px) !important;
    padding: 0 clamp(12px, 1.8vw, 16px) !important;
    font-family: inherit !important;
    font-size: clamp(12px, 1.4vw, 13px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

    .pref-root[b-bg203wqegl]  .e-btn.pref-btn:hover,
    .pref-root[b-bg203wqegl]  button.pref-btn:hover {
        background: rgba(211, 228, 254, 0.4) !important;
        border-color: #a9b3cc !important;
        color: #0b1c30 !important;
    }

    .pref-root[b-bg203wqegl]  .e-btn.pref-btn .e-btn-content,
    .pref-root[b-bg203wqegl]  button.pref-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(6px, 0.9vw, 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        line-height: 1 !important;
    }

.pref-btn-ico[b-bg203wqegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0;
    height: 1em;
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1;
}

.pref-btn-label[b-bg203wqegl] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1em;
    line-height: 1;
    white-space: nowrap;
}

/* =========================
   Contenido (scroll)
========================= */
.pref-content[b-bg203wqegl] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    overscroll-behavior: contain;
}

    .pref-content[b-bg203wqegl]::-webkit-scrollbar {
        width: 6px;
    }

    .pref-content[b-bg203wqegl]::-webkit-scrollbar-track {
        background: transparent;
    }

    .pref-content[b-bg203wqegl]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .pref-content[b-bg203wqegl]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* =========================
   Apartados (planos, unificados con los tabs de Gestión)

   Sin caja: nada de borde/sombra/radio/padding. Cada apartado se separa del siguiente por el
   espacio vertical del contenedor y se encabeza con un título subrayado por una fina línea gris.
========================= */
.pref-card[b-bg203wqegl] {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.pref-card-head[b-bg203wqegl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ecf2;
}

.pref-card-ico[b-bg203wqegl] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--pref-primary);
    background: var(--pref-primary-soft);
    font-size: 20px;
}

.pref-card-title[b-bg203wqegl] {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 850;
}

/* =========================
   Campos
========================= */
.pref-grid[b-bg203wqegl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 16px;
}

.pref-field[b-bg203wqegl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .pref-field label[b-bg203wqegl] {
        color: #475569;
        font-size: 12.5px;
        font-weight: 750;
    }

    .pref-field[b-bg203wqegl]  .e-control-wrapper,
    .pref-field[b-bg203wqegl]  .e-input-group,
    .pref-field[b-bg203wqegl]  .e-control,
    .pref-field[b-bg203wqegl]  input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

/* =========================
   Controles Syncfusion (mismo lenguaje redondeado que la ficha de factura)
========================= */
.pref-field[b-bg203wqegl]  .e-input-group,
.pref-field[b-bg203wqegl]  .e-input-group.e-control-wrapper {
    height: var(--pref-control-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--pref-line) !important;
    border-radius: var(--pref-control-radius) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    padding-inline: 6px 4px !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    /* Los temas de Syncfusion pintan la línea inferior con pseudoelementos */
    .pref-field[b-bg203wqegl]  .e-input-group::before,
    .pref-field[b-bg203wqegl]  .e-input-group::after {
        display: none !important;
    }

    .pref-field[b-bg203wqegl]  .e-input-group:hover:not(.e-input-focus) {
        border-color: #cbd5e1 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
    }

    .pref-field[b-bg203wqegl]  .e-input-group.e-input-focus {
        border-color: var(--pref-primary) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
    }

    /* El input interior no pinta caja: la caja es el grupo */
    .pref-field[b-bg203wqegl]  .e-input-group input.e-input,
    .pref-field[b-bg203wqegl]  .e-input-group .e-input {
        height: 100% !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 8px !important;
        color: var(--pref-text) !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 650 !important;
    }

        .pref-field[b-bg203wqegl]  .e-input-group input.e-input::placeholder {
            color: #94a3b8 !important;
            font-weight: 600 !important;
        }

/* Flecha del desplegable y botones del numérico */
.pref-field[b-bg203wqegl]  .e-input-group .e-input-group-icon {
    border: 0 !important;
    border-radius: 999rem !important;
    background: transparent !important;
    color: var(--pref-muted) !important;
    margin: 0 !important;
    transition: background .16s ease, color .16s ease;
}

    .pref-field[b-bg203wqegl]  .e-input-group .e-input-group-icon:hover,
    .pref-field[b-bg203wqegl]  .e-input-group .e-input-group-icon:active {
        background: var(--pref-primary-soft) !important;
        color: var(--pref-primary) !important;
    }

.pref-field[b-bg203wqegl]  .e-input-group.e-input-focus .e-input-group-icon {
    color: var(--pref-primary) !important;
}

/* =========================
   Switches
========================= */
.pref-switches[b-bg203wqegl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.pref-switch-row[b-bg203wqegl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pref-border);
    border-radius: 14px;
    background: #f8fafc;
    transition: border-color .15s ease, background-color .15s ease;
}

    .pref-switch-row:hover[b-bg203wqegl] {
        border-color: #cbd5e1;
        background: #f4f7fb;
    }

.pref-switch-text[b-bg203wqegl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pref-switch-name[b-bg203wqegl] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pref-text);
}

.pref-switch-desc[b-bg203wqegl] {
    font-size: 12px;
    color: var(--pref-muted);
}

/* =========================
   Responsive por ancho del panel
========================= */
@container pref-root (max-width: 760px) {
    .pref-grid[b-bg203wqegl] {
        grid-template-columns: 1fr;
    }
}

/* El botón de la cabecera nunca colapsa a icono: solo se oculta el mensaje si falta sitio */
@media (max-width: 768px) {
    .pref-actions-slot .pref-msg[b-bg203wqegl] {
        display: none;
    }
}

@container pref-root (max-width: 420px) {
    .pref-card-head[b-bg203wqegl] {
        margin-bottom: 12px;
    }
}

/* =========================
   En qué trabajo (CRM)

   Botones que conmutan, no casillas: el área de clic es la tarjeta entera. Es el mismo control que la
   pregunta del primer arranque, y verlo igual en los dos sitios es lo que hace entender que se está
   cambiando lo mismo que se respondió aquel día.
========================= */
.pref-dedicaciones[b-bg203wqegl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@container pref-root (max-width: 760px) {
    .pref-dedicaciones[b-bg203wqegl] {
        grid-template-columns: 1fr;
    }
}

.pref-dedicacion[b-bg203wqegl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .pref-dedicacion:hover[b-bg203wqegl] {
        border-color: #0f766e;
        background: #f0fdfa;
    }

    /* Marcado: borde y fondo, no solo el tic. Con varios marcados hay que ver cuántos llevas de un
       vistazo, sin ir leyendo iconos uno a uno. */
    .pref-dedicacion.marcado[b-bg203wqegl] {
        border-color: #0f766e;
        background: #f0fdfa;
        box-shadow: inset 0 0 0 1px #0f766e;
    }

.pref-dedicacion-titulo[b-bg203wqegl] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.pref-dedicacion-tic[b-bg203wqegl] {
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
}

.pref-dedicacion.marcado .pref-dedicacion-tic[b-bg203wqegl] {
    color: #0f766e;
}

.pref-dedicacion-desc[b-bg203wqegl] {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

/* N11: el espacio de trabajo impone el idioma; la preferencia propia queda apagada pero editable */
.pref-impuesto[b-bg203wqegl] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 13px;
    line-height: 1.45;
}

    .pref-impuesto .material-symbols-rounded[b-bg203wqegl] {
        font-size: 20px;
        flex-shrink: 0;
    }

.pref-dedicacion.apagado[b-bg203wqegl] {
    opacity: .6;
}
/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/SettingsModal.razor.rz.scp.css */
/* =========================
   Overlay del modal
========================= */

.settings-overlay[b-39eolg7n6y] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(3px);
    z-index: 1000;
}

/* =========================
   Layout principal
========================= */

.settings-modal[b-39eolg7n6y] {
    --settings-blue: #2563eb;
    --settings-blue-dark: #1d4ed8;
    --settings-blue-light: #2d8cff;
    --settings-blue-soft: #eff6ff;
    --settings-text: #172033;
    --settings-muted: #64748b;
    --settings-border: #e7edf5;
    --settings-hover: #f8fafc;
    display: flex;
    width: min(1320px, 96vw);
    height: min(820px, 88vh);
    min-height: 420px;
    background-color: var(--surface-bg, #ffffff);
    border: 1px solid rgba(231, 237, 245, 0.86);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================
   Sidebar izquierda
========================= */

.settings-sidebar[b-39eolg7n6y] {
    width: 220px;
    max-width: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-right: 1px solid var(--settings-border);
    overflow: hidden;
    transition: width 0.24s ease, max-width 0.24s ease;
    user-select: none;
}

    .settings-sidebar.collapsed[b-39eolg7n6y] {
        width: 76px;
        max-width: 76px;
    }

/* =========================
   Botones superiores
========================= */

.sidebar-topbar[b-39eolg7n6y] {
    min-height: 72px;
    padding: 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--settings-border);
    background: #ffffff;
    flex: 0 0 auto;
}

.sidebar-action[b-39eolg7n6y] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    border: 0;
    background: transparent;
    color: var(--settings-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

    .sidebar-action:hover[b-39eolg7n6y] {
        background: #eef2f7;
        color: var(--settings-blue);
    }

    .sidebar-action:focus[b-39eolg7n6y] {
        outline: none;
    }

    .sidebar-action:focus-visible[b-39eolg7n6y] {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }

    .sidebar-action .icon[b-39eolg7n6y] {
        font-size: 24px;
        line-height: 1;
        color: inherit;
        user-select: none;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

.sidebar-close:hover[b-39eolg7n6y] {
    color: #ef4444;
    background: #fef2f2;
}

.settings-sidebar.collapsed .sidebar-topbar[b-39eolg7n6y] {
    min-height: 104px;
    padding: 12px 8px;
    flex-direction: column;
    justify-content: center;
}

.settings-sidebar.collapsed .sidebar-action[b-39eolg7n6y] {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

/* =========================
   Lista del sidebar
========================= */

.sidebar-buttons[b-39eolg7n6y] {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    overscroll-behavior: contain;
}

    .sidebar-buttons[b-39eolg7n6y]::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-buttons[b-39eolg7n6y]::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-buttons[b-39eolg7n6y]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .sidebar-buttons[b-39eolg7n6y]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.sidebar-group[b-39eolg7n6y] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-group-title[b-39eolg7n6y] {
    padding: 0 8px 3px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.settings-sidebar.collapsed .sidebar-buttons[b-39eolg7n6y] {
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    gap: 10px;
}

.settings-sidebar.collapsed .sidebar-group[b-39eolg7n6y] {
    width: 100%;
    align-items: center;
}

.settings-sidebar.collapsed .sidebar-group-title[b-39eolg7n6y] {
    display: none;
}

/* =========================
   Botones de navegación
========================= */

.sidebar-item[b-39eolg7n6y] {
    width: 100%;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #263449;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .sidebar-item:hover[b-39eolg7n6y] {
        background: var(--settings-hover);
        border-color: #eef2f7;
        color: #1f2937;
    }

    .sidebar-item:focus[b-39eolg7n6y] {
        outline: none;
    }

    .sidebar-item:focus-visible[b-39eolg7n6y] {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }

    .sidebar-item.active[b-39eolg7n6y] {
        background: linear-gradient(135deg, var(--settings-blue-light) 0%, var(--settings-blue) 55%, var(--settings-blue-dark) 100%);
        color: #ffffff;
        border-color: transparent;
    }

.sidebar-icon[b-39eolg7n6y] {
    width: 25px;
    height: 25px;
    min-width: 25px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-item.active .sidebar-icon[b-39eolg7n6y] {
    background: rgba(255, 255, 255, 0.15);
}

.sidebar-label[b-39eolg7n6y] {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-sidebar.collapsed .sidebar-item[b-39eolg7n6y] {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.settings-sidebar.collapsed .sidebar-label[b-39eolg7n6y] {
    display: none;
}

/* =========================
   Pestañas (solo móvil)
========================= */

/* El <div class="tabbar"> lo pinta ScrollableTabs: hace falta ::deep para alcanzarlo.
   La barra (rail, scroll y flechas) la aporta el componente; aquí solo se estilan los botones,
   que conservan este CSS por viajar en el ChildContent. Mismo rail que la ficha de cliente. */
.settings-sidebar[b-39eolg7n6y]  .settings-tabs {
    display: none;
}

.settings-tab[b-39eolg7n6y] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;        /* el subrayado solapa el rail de 1px */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

    .settings-tab:hover[b-39eolg7n6y] {
        color: #334155;
    }

    .settings-tab.active[b-39eolg7n6y] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;   /* subrayado azul de la activa */
        font-weight: 800;
    }

    .settings-tab:focus[b-39eolg7n6y] {
        outline: none;
    }

    .settings-tab:focus-visible[b-39eolg7n6y] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

/* =========================
   Panel derecho
========================= */

.settings-panel[b-39eolg7n6y] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--panel-bg, #ffffff);
    overflow: hidden;
}

.settings-header[b-39eolg7n6y] {
    flex: 0 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 26px 14px;
    border-bottom: 1px solid var(--settings-border);
    background: rgba(255, 255, 255, 0.96);
}

.settings-title[b-39eolg7n6y] {
    margin: 0;
    min-width: 0;
    color: var(--settings-text);
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 850;
}

.settings-header-actions[b-39eolg7n6y] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.settings-content[b-39eolg7n6y] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 22px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
}

    .settings-content[b-39eolg7n6y]::-webkit-scrollbar,
    .settings-panel[b-39eolg7n6y]::-webkit-scrollbar {
        width: 8px;
    }

    .settings-content[b-39eolg7n6y]::-webkit-scrollbar-track,
    .settings-panel[b-39eolg7n6y]::-webkit-scrollbar-track {
        background: transparent;
    }

    .settings-content[b-39eolg7n6y]::-webkit-scrollbar-thumb,
    .settings-panel[b-39eolg7n6y]::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.65);
        border-radius: 999px;
    }

        .settings-content[b-39eolg7n6y]::-webkit-scrollbar-thumb:hover,
        .settings-panel[b-39eolg7n6y]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(100, 116, 139, 0.75);
        }

/* =========================
   Acciones de cabecera (Gestión)
========================= */

.settings-actions[b-39eolg7n6y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mismo botón que el «Guardar» de Preferencias (.pref-btn). El <button> lo pinta SfButton y no
   lleva el scope de este componente: hace falta ::deep, y !important para ganar al tema Syncfusion. */
.settings-actions[b-39eolg7n6y]  .e-btn.settings-btn,
.settings-actions[b-39eolg7n6y]  button.settings-btn {
    width: auto !important;
    min-width: 0 !important;
    height: clamp(30px, 4.4vw, 34px) !important;
    border-radius: 8px !important;
    border: 1px solid #c1c6d7 !important;
    background: transparent !important;
    color: #414754 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 0.9vw, 8px) !important;
    padding: 0 clamp(12px, 1.8vw, 16px) !important;
    font-family: inherit !important;
    font-size: clamp(12px, 1.4vw, 13px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

    .settings-actions[b-39eolg7n6y]  .e-btn.settings-btn:hover,
    .settings-actions[b-39eolg7n6y]  button.settings-btn:hover {
        background: rgba(211, 228, 254, 0.4) !important;
        border-color: #a9b3cc !important;
        color: #0b1c30 !important;
    }

    .settings-actions[b-39eolg7n6y]  .e-btn.settings-btn .e-btn-content,
    .settings-actions[b-39eolg7n6y]  button.settings-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(6px, 0.9vw, 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        line-height: 1 !important;
    }

    .settings-actions[b-39eolg7n6y]  .e-btn.settings-btn .e-ripple-element {
        display: none !important;
    }

.settings-btn-ico[b-39eolg7n6y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0;
    height: 1em;
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1;
    user-select: none;
}

.settings-btn-label[b-39eolg7n6y] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1em;
    line-height: 1;
    white-space: nowrap;
}

/* =========================
   Confirmación de restauración (modal destructivo)

   Vive dentro del <Modal> compartido: aquí solo el contenido (icono de aviso, texto y botones).
   Los elementos se declaran en este componente, así que el scope los alcanza sin ::deep.
========================= */

.settings-confirm[b-39eolg7n6y] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 4px 8px;
}

.settings-confirm-icon[b-39eolg7n6y] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    color: #dc2626;
}

    .settings-confirm-icon .material-symbols-rounded[b-39eolg7n6y] {
        font-size: 26px;
        line-height: 1;
        user-select: none;
    }

.settings-confirm-text[b-39eolg7n6y] {
    color: #334155;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.5;
}

.settings-confirm-actions[b-39eolg7n6y] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.settings-confirm-btn[b-39eolg7n6y] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    border: 1px solid #c1c6d7;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 16px;
    color: #414754;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

    .settings-confirm-btn:hover:not(:disabled)[b-39eolg7n6y] {
        background: var(--settings-hover);
        border-color: #a9b3cc;
        color: #0b1c30;
    }

    .settings-confirm-btn:disabled[b-39eolg7n6y] {
        opacity: 0.6;
        cursor: default;
    }

    .settings-confirm-btn .material-symbols-rounded[b-39eolg7n6y] {
        font-size: 18px;
        line-height: 1;
        user-select: none;
    }

.settings-confirm-btn-danger[b-39eolg7n6y] {
    border-color: transparent;
    background: #dc2626;
    color: #ffffff;
}

    .settings-confirm-btn-danger:hover:not(:disabled)[b-39eolg7n6y] {
        background: #b91c1c;
        border-color: transparent;
        color: #ffffff;
    }

.settings-confirm-spin[b-39eolg7n6y] {
    animation: settings-confirm-spin-b-39eolg7n6y 0.9s linear infinite;
}

@keyframes settings-confirm-spin-b-39eolg7n6y {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Secciones de Gestión (parámetros del ERP)

   Las 12 secciones (Presentation/Configuration/Configuration/Sections) se pintan siempre dentro de
   .settings-content, así que sus estilos viven aquí, tras ::deep: quedan acotados al modal (nada
   se filtra al CSS global) y las secciones se ahorran una hoja por componente.

   A diferencia de la antigua página, el alto lo lleva el panel del modal: las tarjetas crecen con su
   contenido y el scroll es único (.settings-content). Sin rejillas de alto fijo ni scroll por tarjeta.
========================= */

/* Un apartado por fila: se apilan en columna y ocupan el ancho del panel. Sin tarjetas ni bordes
   anidados; cada apartado se separa del siguiente por el espacio vertical. Los campos de dentro
   siguen repartiéndose en varias columnas (.configuracion-form-grid). */
.settings-content[b-39eolg7n6y]  .configuracion-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 26px;
}

.settings-content[b-39eolg7n6y]  .card-panel {
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Cabecera del apartado: el título, con una fina línea gris debajo que lo separa de los campos. */
.settings-content[b-39eolg7n6y]  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ecf2;
}

.settings-content[b-39eolg7n6y]  .section-title {
    margin-bottom: 10px;
    color: #1f2937;
    font-size: 15px;
    font-weight: 850;
}

.settings-content[b-39eolg7n6y]  .section-title.no-margin {
    margin-bottom: 0;
}

/* Nota explicativa de un panel de ajustes: aclara cómo se interpreta un valor (p. ej. que la longitud
   de un código son sus DÍGITOS y el prefijo de letras no cuenta). Va antes de la rejilla de campos. */
.settings-content[b-39eolg7n6y]  .configuracion-hint {
    margin: 0 0 10px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

    .settings-content[b-39eolg7n6y]  .configuracion-hint code {
        padding: 1px 4px;
        border-radius: 4px;
        background: #eef2f7;
        color: #374151;
        font-size: 11px;
    }

/* Campos */

.settings-content[b-39eolg7n6y]  .configuracion-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.settings-content[b-39eolg7n6y]  .configuracion-form-grid-single {
    grid-template-columns: 1fr;
}

.settings-content[b-39eolg7n6y]  .configuracion-form-grid-thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-content[b-39eolg7n6y]  .configuracion-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-content[b-39eolg7n6y]  .configuracion-field-span-2 {
    grid-column: span 2;
}

/* Ayuda bajo un campo (PC5): explica qué va a pasar con lo que se acaba de teclear. La usan las
   cuentas por defecto para enseñar la subcuenta a la que se apuntará de verdad, que sin esto solo
   se descubría emitiendo. La variante -error es para cuando el valor no sirve para apuntar. */
.settings-content[b-39eolg7n6y]  .configuracion-ayuda {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.settings-content[b-39eolg7n6y]  .configuracion-ayuda-error {
    color: #b91c1c;
    font-weight: 700;
}

/* Aviso dentro de un apartado de configuración: un cambio que tiene consecuencias que no se ven
   hasta más tarde (cambiar los dígitos de las cuentas con un plan ya cargado). */
.settings-content[b-39eolg7n6y]  .configuracion-aviso {
    margin-top: 10px;
    padding: 9px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    color: #854d0e;
    font-size: 12px;
    line-height: 1.4;
}

/* RC2: aviso de longitud de código cambiada, con la previsión de la regeneración y su confirmación. */
.settings-content[b-39eolg7n6y]  .longitudes-tabla {
    width: 100%;
    margin: 8px 0 4px;
    border-collapse: collapse;
    font-size: 12px;
}

.settings-content[b-39eolg7n6y]  .longitudes-tabla th,
.settings-content[b-39eolg7n6y]  .longitudes-tabla td {
    padding: 3px 6px;
    border-bottom: 1px solid #fcd34d;
    text-align: left;
}

.settings-content[b-39eolg7n6y]  .longitudes-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.settings-content[b-39eolg7n6y]  .longitudes-boton {
    padding: 5px 12px;
    border: 1px solid #d97706;
    border-radius: 8px;
    background: #ffffff;
    color: #92400e;
    font-weight: 700;
    cursor: pointer;
}

.settings-content[b-39eolg7n6y]  .longitudes-boton-si {
    background: #d97706;
    color: #ffffff;
}

.settings-content[b-39eolg7n6y]  .longitudes-boton:disabled {
    opacity: .6;
    cursor: default;
}

.settings-content[b-39eolg7n6y]  .longitudes-nota {
    margin-top: 4px;
    font-size: 11px;
}

.settings-content[b-39eolg7n6y]  .longitudes-conflicto {
    margin-top: 6px;
    color: #b91c1c;
    font-weight: 700;
}

.settings-content[b-39eolg7n6y]  .longitudes-hecho {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.settings-content[b-39eolg7n6y]  .configuracion-field label {
    color: #4b5563;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-content[b-39eolg7n6y]  .configuracion-input {
    width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    color: #1f2937;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .settings-content[b-39eolg7n6y]  .configuracion-input:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

/* Casillas */

.settings-content[b-39eolg7n6y]  .configuracion-check-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.settings-content[b-39eolg7n6y]  .configuracion-check-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px 12px;
    margin-top: 16px;
}

.settings-content[b-39eolg7n6y]  .configuracion-check-grid-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 16px;
}

.settings-content[b-39eolg7n6y]  .configuracion-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 12px;
    font-weight: 650;
}

    .settings-content[b-39eolg7n6y]  .configuracion-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        accent-color: var(--settings-blue);
    }

.settings-content[b-39eolg7n6y]  .configuracion-check-inline {
    margin: 0;
    white-space: nowrap;
}

/* Directorios: rejilla de 6 columnas (cada campo ocupa 2) */

.settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios .configuracion-field {
        grid-column: span 3;
    }

    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios .configuracion-field-third {
        grid-column: span 2;
    }

.settings-content[b-39eolg7n6y]  .casilla-directorios {
    justify-content: center;
}

.settings-content[b-39eolg7n6y]  .configuracion-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.settings-content[b-39eolg7n6y]  .e-btn.configuracion-action-btn {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    padding: 0 14px !important;
    color: #374151 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

    .settings-content[b-39eolg7n6y]  .e-btn.configuracion-action-btn:hover {
        background: var(--settings-hover) !important;
        border-color: #cbd5e1 !important;
    }

    .settings-content[b-39eolg7n6y]  .e-btn.configuracion-action-btn .e-ripple-element {
        display: none !important;
    }

/* Campos personalizables */

.settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-clientes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-facturas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================
   Responsive tablet
========================= */

@media (max-width: 1024px) {
    .settings-overlay[b-39eolg7n6y] {
        padding: 18px;
    }

    .settings-modal[b-39eolg7n6y] {
        width: min(1180px, 96vw);
        height: min(820px, 88vh);
    }

    .settings-sidebar:not(.collapsed)[b-39eolg7n6y] {
        width: 210px;
        max-width: 210px;
    }

    .settings-header[b-39eolg7n6y] {
        padding-inline: 22px;
    }

    .settings-content[b-39eolg7n6y] {
        padding-inline: 22px;
    }

    /* Las rejillas densas de las secciones de Gestión pierden columnas antes que el resto */
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-thirds,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-facturas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-clientes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios .configuracion-field,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios .configuracion-field-third {
        grid-column: auto;
    }
}

/* =========================
   Responsive móvil
========================= */

@media (max-width: 768px) {
    .settings-overlay[b-39eolg7n6y] {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .settings-modal[b-39eolg7n6y] {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        min-height: 0;
        border-radius: 0;
        border: 0;
        flex-direction: column;
    }

    .settings-sidebar[b-39eolg7n6y],
    .settings-sidebar.collapsed[b-39eolg7n6y],
    .settings-sidebar:not(.collapsed)[b-39eolg7n6y] {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 0;   /* el rail de las pestañas hace de separador */
    }

        .sidebar-topbar[b-39eolg7n6y],
        .settings-sidebar.collapsed .sidebar-topbar[b-39eolg7n6y] {
            min-height: 56px;
            height: 56px;
            padding: 8px 12px;
            flex-direction: row;
            justify-content: space-between;
        }

    .sidebar-toggle[b-39eolg7n6y] {
        display: none;
    }

    .sidebar-action[b-39eolg7n6y],
    .settings-sidebar.collapsed .sidebar-action[b-39eolg7n6y] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 13px;
    }

    /* La navegación vertical deja paso a las pestañas con nombre */
    .sidebar-buttons[b-39eolg7n6y],
    .settings-sidebar.collapsed .sidebar-buttons[b-39eolg7n6y] {
        display: none;
    }

    .settings-sidebar[b-39eolg7n6y]  .settings-tabs {
        display: flex;
        flex: 0 0 auto;
        padding: 0 12px;
    }

    .settings-panel[b-39eolg7n6y] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .settings-header[b-39eolg7n6y] {
        min-height: 62px;
        padding: 14px 16px 12px;
    }

    .settings-title[b-39eolg7n6y] {
        font-size: 1.15rem;
    }

    .settings-content[b-39eolg7n6y] {
        padding: 16px;
    }

    /* Una sola columna: campos y casillas se apilan (las tarjetas ya van una por fila) */
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid,
    .settings-content[b-39eolg7n6y]  .configuracion-check-grid-two,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-directorios,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-thirds,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-clientes,
    .settings-content[b-39eolg7n6y]  .configuracion-form-grid-personalizado-facturas {
        grid-template-columns: 1fr;
    }

    .settings-content[b-39eolg7n6y]  .configuracion-field-span-2 {
        grid-column: auto;
    }
}

/* =========================
   Pantallas muy pequeñas
========================= */

@media (max-width: 420px) {
    .settings-header[b-39eolg7n6y] {
        min-height: 58px;
        padding-inline: 14px;
    }

    .settings-content[b-39eolg7n6y] {
        padding: 14px;
    }

    .settings-sidebar[b-39eolg7n6y]  .settings-tabs {
        padding-inline: 10px;
    }
}

/* =========================
   Accesibilidad: reducir movimiento
========================= */

@media (prefers-reduced-motion: reduce) {
    .settings-sidebar[b-39eolg7n6y],
    .settings-sidebar *[b-39eolg7n6y],
    .settings-modal[b-39eolg7n6y],
    .settings-modal *[b-39eolg7n6y] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Settings/Pages/UsuariosRolesView.razor.rz.scp.css */
/* Gestión de roles y permisos (Permisos F8). Estilo sobrio y ligero, coherente con el resto de la
   configuración: bordes finos, radios moderados, sin sombras flotantes ni dependencias de Syncfusion. */

/* Los diálogos (`<Modal>`) se pintan FUERA de .urv-root, así que sin esto se quedaban sin paleta:
   `var(--urv-primary)` sin valor deja el botón de guardar con fondo transparente y letra blanca (o sea,
   invisible sobre blanco hasta pasar el ratón, que usa un azul literal) y `border: 1px solid var(...)`
   se vuelve una declaración inválida entera, dejando el campo de texto sin borde hasta enfocarlo. Lo
   encontró el usuario al crear un rol: escribía el nombre a ciegas y no veía dónde guardar. */
.urv-root[b-pheldqpt6t],
.urv-dlg[b-pheldqpt6t] {
    --urv-surface: #ffffff;
    --urv-soft: #f8fafc;
    --urv-border: #e8ecf2;
    --urv-border-strong: #d7dee8;
    --urv-text: #0f172a;
    --urv-muted: #64748b;
    --urv-primary: #2563eb;
    --urv-primary-soft: #eff6ff;
    --urv-danger: #dc2626;
    --urv-warn-soft: #fffbeb;
    --urv-warn-border: #fde68a;
    color: var(--urv-text);
}

/* La paleta va arriba y la COLOCACIÓN aquí: el diálogo no puede heredar el alto y el recorte de la
   pantalla, que es la que ocupa el panel entero. */
.urv-root[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Los iconos son decorativos */
.urv-root .material-symbols-rounded[b-pheldqpt6t] {
    user-select: none;
    -webkit-user-select: none;
}

/* =========================
   Estados de la vista
========================= */

.urv-cargando[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    color: var(--urv-muted);
    font-size: 13px;
}

.urv-spin[b-pheldqpt6t] {
    animation: urv-rotar-b-pheldqpt6t 1.1s linear infinite;
}

@keyframes urv-rotar-b-pheldqpt6t {
    to {
        transform: rotate(360deg);
    }
}

.urv-denegado[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    max-width: 520px;
    margin: auto;
    padding: 28px;
    border: 1px solid var(--urv-border);
    border-radius: 14px;
    background: var(--urv-soft);
    text-align: center;
}

.urv-denegado-ico[b-pheldqpt6t] {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--urv-primary-soft);
    color: var(--urv-primary);
    font-size: 26px;
}

.urv-denegado h2[b-pheldqpt6t] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.urv-denegado p[b-pheldqpt6t] {
    margin: 0;
    color: var(--urv-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================
   Banner «ver como»
========================= */

.urv-vercomo[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid var(--urv-warn-border);
    border-radius: 10px;
    background: var(--urv-warn-soft);
    font-size: 13px;
}

.urv-vercomo .material-symbols-rounded[b-pheldqpt6t] {
    color: #b45309;
    font-size: 19px;
}

.urv-vercomo-txt[b-pheldqpt6t] {
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================
   Pestañas
========================= */

.urv-tabs[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--urv-border);
    border-radius: 12px;
    background: var(--urv-soft);
    overflow-x: auto;
}

.urv-tab[b-pheldqpt6t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
    height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.urv-tab:hover[b-pheldqpt6t] {
    background: rgba(211, 228, 254, .45);
    color: #0b1c30;
}

.urv-tab-activa[b-pheldqpt6t] {
    border-color: var(--urv-border);
    background: var(--urv-surface);
    color: var(--urv-primary);
}

.urv-tab-ico[b-pheldqpt6t] {
    font-size: 17px;
}

/* =========================
   Cuerpo y columnas
========================= */

.urv-body[b-pheldqpt6t] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.urv-split[b-pheldqpt6t] {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 14px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.urv-col[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--urv-border);
    border-radius: 12px;
    background: var(--urv-surface);
    overflow: hidden;
}

.urv-col-wide[b-pheldqpt6t] {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.urv-col-head[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--urv-border);
}

.urv-col-head-sub[b-pheldqpt6t] {
    margin-top: 6px;
}

.urv-col-head h4[b-pheldqpt6t] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
    font-weight: 800;
    color: #1f2937;
}

.urv-col-ico[b-pheldqpt6t] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--urv-primary-soft);
    color: var(--urv-primary);
    font-size: 18px;
}

.urv-spacer[b-pheldqpt6t] {
    flex: 1 1 auto;
}

/* =========================
   Listas de selección
========================= */

.urv-list[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    /* Suelo: por debajo de esto la lista mostraba un único elemento y encima recortado. */
    min-height: 96px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
}

.urv-list-eq[b-pheldqpt6t] {
    max-height: 100%;
}

.urv-item[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.urv-item:hover[b-pheldqpt6t] {
    background: var(--urv-soft);
    border-color: var(--urv-border);
}

.urv-item-activo[b-pheldqpt6t] {
    border-color: #bfdbfe;
    background: var(--urv-primary-soft);
    color: var(--urv-primary);
}

.urv-item-persona[b-pheldqpt6t] {
    align-items: center;
}

.urv-item-ico[b-pheldqpt6t] {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--urv-muted);
}

.urv-item-activo .urv-item-ico[b-pheldqpt6t] {
    color: var(--urv-primary);
}

.urv-persona-datos[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.urv-item-txt[b-pheldqpt6t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urv-item-sub[b-pheldqpt6t] {
    color: var(--urv-muted);
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urv-col-actions[b-pheldqpt6t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 0 0 auto;
    padding-top: 10px;
    border-top: 1px solid var(--urv-border);
}

/* =========================
   Botones
========================= */

.urv-btn[b-pheldqpt6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--urv-border-strong);
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.urv-btn .material-symbols-rounded[b-pheldqpt6t] {
    font-size: 16px;
}

.urv-btn:hover:not(:disabled)[b-pheldqpt6t] {
    background: rgba(211, 228, 254, .4);
    border-color: #a9b3cc;
    color: #0b1c30;
}

.urv-btn:disabled[b-pheldqpt6t] {
    opacity: .5;
    cursor: not-allowed;
}

.urv-btn-primary[b-pheldqpt6t] {
    border-color: var(--urv-primary);
    background: var(--urv-primary);
    color: #fff;
}

.urv-btn-primary:hover:not(:disabled)[b-pheldqpt6t] {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.urv-btn-danger[b-pheldqpt6t] {
    border-color: #fecaca;
    color: var(--urv-danger);
}

.urv-btn-danger:hover:not(:disabled)[b-pheldqpt6t] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.urv-btn-ghost[b-pheldqpt6t] {
    border-color: #fcd34d;
    background: #fff;
}

.urv-x[b-pheldqpt6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--urv-muted);
    cursor: pointer;
}

.urv-x:hover[b-pheldqpt6t] {
    background: #fef2f2;
    color: var(--urv-danger);
}

.urv-x .material-symbols-rounded[b-pheldqpt6t] {
    font-size: 16px;
}

/* =========================
   Bloques de formulario
========================= */

.urv-bloque[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px;
    border: 1px solid var(--urv-border);
    border-radius: 10px;
    background: var(--urv-soft);
}

.urv-label[b-pheldqpt6t] {
    color: #475569;
    font-size: 12.5px;
    font-weight: 750;
}

.urv-hint[b-pheldqpt6t] {
    margin: 0;
    color: var(--urv-muted);
    font-size: 12px;
    line-height: 1.45;
}

.urv-input[b-pheldqpt6t],
.urv-select[b-pheldqpt6t] {
    width: 100%;
    max-width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--urv-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--urv-text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.urv-input:focus[b-pheldqpt6t],
.urv-select:focus[b-pheldqpt6t],
.urv-nivel:focus[b-pheldqpt6t] {
    outline: 2px solid #bfdbfe;
    outline-offset: -1px;
    border-color: var(--urv-primary);
}

.urv-select-add[b-pheldqpt6t] {
    max-width: 260px;
    margin-top: 4px;
}

.urv-chips[b-pheldqpt6t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.urv-chip[b-pheldqpt6t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: var(--urv-primary-soft);
    color: #1d4ed8;
    font-size: 12.5px;
    font-weight: 700;
}

.urv-chip-row[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--urv-border);
    border-radius: 9px;
    background: var(--urv-soft);
    font-size: 13px;
    font-weight: 650;
    color: #334155;
}

.urv-add[b-pheldqpt6t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    flex: 0 0 auto;
    align-items: center;
}

/* =========================
   Avisos y vacíos
========================= */

.urv-aviso[b-pheldqpt6t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--urv-warn-border);
    border-radius: 10px;
    background: var(--urv-warn-soft);
    color: #78350f;
    font-size: 12.5px;
    line-height: 1.45;
}

.urv-aviso .material-symbols-rounded[b-pheldqpt6t] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #b45309;
}

.urv-vacio[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 140px;
    color: var(--urv-muted);
    text-align: center;
}

.urv-vacio .material-symbols-rounded[b-pheldqpt6t] {
    color: #94a3b8;
    font-size: 38px;
}

.urv-vacio p[b-pheldqpt6t] {
    margin: 0;
    max-width: 380px;
    font-size: 13px;
}

.urv-vacio-min[b-pheldqpt6t] {
    margin: 0;
    padding: 6px 2px;
    color: var(--urv-muted);
    font-size: 12.5px;
}

/* =========================
   Árbol de opciones
========================= */

.urv-arbol[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

/* flex-shrink: 0 es obligatorio. El árbol es un flex column dentro de un contenedor con altura
   limitada: sin esto los módulos se encogen por debajo de su contenido y, como recortan
   (overflow: hidden), sus filas salían partidas por la mitad. Quien scrollea es .urv-col-wide. */
.urv-modulo[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: 1px solid var(--urv-border);
    border-radius: 10px;
    overflow: hidden;
}

.urv-fila[b-pheldqpt6t] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 6px 10px;
    border-top: 1px solid var(--urv-border);
    background: #fff;
}

.urv-fila:first-child[b-pheldqpt6t] {
    border-top: none;
}

.urv-fila-modulo[b-pheldqpt6t] {
    background: var(--urv-soft);
    font-weight: 800;
    color: #1f2937;
}

.urv-fila-hoja[b-pheldqpt6t] {
    padding-left: 26px;
    font-weight: 600;
    color: #334155;
}

.urv-fila-campo[b-pheldqpt6t] {
    padding-left: 26px;
    font-weight: 600;
    color: #4b5563;
    background: #fcfdff;
}

.urv-fila-ico[b-pheldqpt6t] {
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--urv-muted);
}

.urv-fila-modulo .urv-fila-ico[b-pheldqpt6t] {
    color: var(--urv-primary);
}

.urv-fila-campo .urv-fila-ico[b-pheldqpt6t] {
    color: #a855f7;
}

.urv-fila-txt[b-pheldqpt6t] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.urv-efectivo[b-pheldqpt6t] {
    flex: 0 0 auto;
    color: var(--urv-muted);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.urv-efectivo-propio[b-pheldqpt6t] {
    color: #1d4ed8;
    font-weight: 750;
}

.urv-badge[b-pheldqpt6t] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: var(--urv-primary-soft);
    color: #1d4ed8;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.urv-nivel[b-pheldqpt6t] {
    flex: 0 0 auto;
    width: 200px;
    max-width: 45%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--urv-border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--urv-text);
    font: inherit;
    font-size: 13.5px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Heredado: el valor no es propio de esta opción, se pinta atenuado (pero legible) */
.urv-nivel-heredado[b-pheldqpt6t] {
    color: #475569;
    background: var(--urv-soft);
    font-style: italic;
}

/* Bloqueado (el rol de administrador no se puede recortar): se sigue leyendo qué dice cada
   opción. Con opacity .55 el texto quedaba tan lavado que no se distinguía el nivel. */
.urv-nivel:disabled[b-pheldqpt6t] {
    opacity: .9;
    cursor: not-allowed;
}

/* =========================
   Equipos
========================= */

.urv-eq-layout[b-pheldqpt6t] {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.urv-eq-detalle[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.urv-checklist[b-pheldqpt6t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.urv-check[b-pheldqpt6t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--urv-border);
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    color: #334155;
    cursor: pointer;
}

.urv-check:hover[b-pheldqpt6t] {
    border-color: var(--urv-border-strong);
    background: var(--urv-soft);
}

.urv-check input[b-pheldqpt6t] {
    accent-color: var(--urv-primary);
    cursor: pointer;
}

.urv-eq-actions[b-pheldqpt6t] {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid var(--urv-border);
}

/* =========================
   Cuadros de diálogo
========================= */

.urv-dlg[b-pheldqpt6t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 280px;
}

.urv-dlg-txt[b-pheldqpt6t] {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.urv-dlg-actions[b-pheldqpt6t] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* =========================
   Barras de scroll finas
========================= */

.urv-col-wide[b-pheldqpt6t]::-webkit-scrollbar,
.urv-list[b-pheldqpt6t]::-webkit-scrollbar,
.urv-checklist[b-pheldqpt6t]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.urv-col-wide[b-pheldqpt6t]::-webkit-scrollbar-track,
.urv-list[b-pheldqpt6t]::-webkit-scrollbar-track,
.urv-checklist[b-pheldqpt6t]::-webkit-scrollbar-track {
    background: transparent;
}

.urv-col-wide[b-pheldqpt6t]::-webkit-scrollbar-thumb,
.urv-list[b-pheldqpt6t]::-webkit-scrollbar-thumb,
.urv-checklist[b-pheldqpt6t]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.urv-col-wide[b-pheldqpt6t]::-webkit-scrollbar-thumb:hover,
.urv-list[b-pheldqpt6t]::-webkit-scrollbar-thumb:hover,
.urv-checklist[b-pheldqpt6t]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1180px) {
    .urv-split[b-pheldqpt6t] {
        grid-template-columns: minmax(210px, 265px) minmax(0, 1fr);
    }

    .urv-nivel[b-pheldqpt6t] {
        width: 165px;
    }
}

@media (max-width: 980px) {
    /* Apilado (el modal de ajustes cae aquí): con 150px la lista de arriba se quedaba en un solo
       elemento, medio tapado por el borde. Con 230px entran tres o cuatro y sigue habiendo scroll. */
    .urv-split[b-pheldqpt6t] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(265px, 36%) minmax(0, 1fr);
    }

    .urv-eq-layout[b-pheldqpt6t] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(140px, 34%) minmax(0, 1fr);
    }

    .urv-col[b-pheldqpt6t] {
        overflow-y: auto;
    }
}

@media (max-width: 700px) {
    .urv-fila[b-pheldqpt6t] {
        flex-wrap: wrap;
        padding: 8px 10px;
    }

    .urv-fila-txt[b-pheldqpt6t] {
        flex: 1 1 100%;
    }

    .urv-nivel[b-pheldqpt6t] {
        width: 100%;
        max-width: 100%;
    }

    .urv-col-actions[b-pheldqpt6t] {
        grid-template-columns: 1fr;
    }

    .urv-add[b-pheldqpt6t] {
        grid-template-columns: 1fr;
    }

    .urv-checklist[b-pheldqpt6t] {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Accesibilidad
========================= */

@media (prefers-reduced-motion: reduce) {
    .urv-root[b-pheldqpt6t],
    .urv-root *[b-pheldqpt6t] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Sidebars/MembersSidebarActions/MembersSidebarActions.razor.rz.scp.css */
/* =============================
   MembersSidebarActions
   Estilo alineado con ProfileDropdown: plano, gris, hover suave
   y sin animaciones de desplazamiento (translate).
============================= */

.members-sidebar-actions[b-3c60nzi2lx] {
    --actions-text: #666;
    --actions-muted: gray;
    --actions-hover: #f0f0f0;
    --actions-danger: #e53935;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 12px;
    color: var(--actions-text);
    user-select: none;
    -webkit-user-select: none;
}

    .members-sidebar-actions *[b-3c60nzi2lx],
    .members-sidebar-actions *[b-3c60nzi2lx]::before,
    .members-sidebar-actions *[b-3c60nzi2lx]::after {
        box-sizing: border-box;
    }

button[b-3c60nzi2lx],
a[b-3c60nzi2lx] {
    font-family: inherit;
}

/* =============================
   Botones principales
============================= */

.action-btn[b-3c60nzi2lx] {
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--actions-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}

    .action-btn:hover[b-3c60nzi2lx] {
        background: var(--actions-hover);
    }

    .action-btn:focus[b-3c60nzi2lx] {
        outline: none;
    }

    .action-btn.leave[b-3c60nzi2lx] {
        color: var(--actions-danger);
    }

.action-icon-wrap[b-3c60nzi2lx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.action-btn .icon[b-3c60nzi2lx] {
    font-size: 24px;
    line-height: 1;
    color: var(--actions-muted);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.action-btn.leave .icon[b-3c60nzi2lx] {
    color: var(--actions-danger);
}

.action-btn .text[b-3c60nzi2lx] {
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-chevron[b-3c60nzi2lx] {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--actions-muted);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease;
}

.action-btn.invite.open .action-chevron[b-3c60nzi2lx] {
    transform: rotate(180deg);
}

/* =============================
   Dropdown
============================= */

.dropdown-menu[b-3c60nzi2lx] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 6px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

.dropdown-header[b-3c60nzi2lx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px;
    border-bottom: 1px solid #eef0f3;
}

.dropdown-avatar[b-3c60nzi2lx] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .dropdown-avatar[b-3c60nzi2lx]  * {
        max-width: 100%;
    }

.dropdown-header-content[b-3c60nzi2lx] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-kicker[b-3c60nzi2lx] {
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.group-link[b-3c60nzi2lx] {
    width: 100%;
    color: #555;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dropdown-actions[b-3c60nzi2lx] {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.dropdown-item[b-3c60nzi2lx] {
    width: 100%;
    border: none;
    background: transparent;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s ease;
}

    .dropdown-item:hover[b-3c60nzi2lx] {
        background: #f0f0f0;
    }

    .dropdown-item:focus[b-3c60nzi2lx] {
        outline: none;
    }

    .dropdown-item .icon[b-3c60nzi2lx] {
        font-size: 24px;
        line-height: 1;
        color: var(--actions-muted);
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    }

.dropdown-text[b-3c60nzi2lx] {
    min-width: 0;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item.danger[b-3c60nzi2lx],
.logout-item[b-3c60nzi2lx] {
    color: var(--actions-danger);
}

    .dropdown-item.danger .icon[b-3c60nzi2lx],
    .logout-item .icon[b-3c60nzi2lx],
    .logout-item .dropdown-text[b-3c60nzi2lx] {
        color: var(--actions-danger) !important;
    }

@media (prefers-reduced-motion: reduce) {
    .members-sidebar-actions *[b-3c60nzi2lx],
    .members-sidebar-actions *[b-3c60nzi2lx]::before,
    .members-sidebar-actions *[b-3c60nzi2lx]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Sidebars/SettingsSidebar/CompanySettingsHeader.razor.rz.scp.css */
/* -----------------------------
   Cabecera de ajustes de empresa
------------------------------ */
.company-settings-header[b-abgx6cwpj5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 16px;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Nombre de la empresa */
.company-name[b-abgx6cwpj5] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
}

/* Fecha de creacion */
.company-date[b-abgx6cwpj5] {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}
/* _content/ErpPowergest/Presentation/Shared/Sidebars/SettingsSidebar/SettingsActionList.razor.rz.scp.css */
/* -----------------------------
   Lista de acciones de ajustes
------------------------------ */
.settings-action-list[b-oxyyfpo0p4] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

/* Boton de accion individual */
.action-item[b-oxyyfpo0p4] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #555;
    transition: background-color 0.15s ease;

    /* Evitar seleccion de texto */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .action-item:hover[b-oxyyfpo0p4] {
        background-color: #f3f4f6;
    }

    /* Icono principal */
    .action-item .icon[b-oxyyfpo0p4] {
        font-size: 20px;
        line-height: 1;
        color: #666;
    }

    /* Texto del boton */
    .action-item .label[b-oxyyfpo0p4] {
        flex: 1;
        font-weight: 500;
    }

    /* Flecha indicadora de navegacion */
    .action-item .chevron[b-oxyyfpo0p4] {
        font-size: 18px;
        color: #bbb;
        line-height: 1;
    }

    .action-item:hover .chevron[b-oxyyfpo0p4] {
        color: #888;
    }
/* _content/ErpPowergest/Presentation/Shared/Toasts/Toast.razor.rz.scp.css */
.toast-container[b-q6mi7ky6mi] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.toast[b-q6mi7ky6mi] {
    /* El contenedor es `pointer-events: none` para no comerse los clics de la pagina, y eso lo
       heredan los hijos: sin devolverlo aqui, la « x » de cerrar el aviso no funciona nunca. */
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-width: 280px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    animation: slide-in-b-q6mi7ky6mi .25s ease;
}

    .toast .icon[b-q6mi7ky6mi] {
        font-size: 22px;
        line-height: 1;
    }

    .toast .message[b-q6mi7ky6mi] {
        font-size: 14px;
        color: #333;
    }

    .toast .close[b-q6mi7ky6mi] {
        background: none;
        border: none;
        cursor: pointer;
        margin-left: auto;
        opacity: .6;
        line-height:1;
    }

    .toast.success[b-q6mi7ky6mi] {
        border-left: 4px solid #2e7d32;
    }

    .toast.error[b-q6mi7ky6mi] {
        border-left: 4px solid #d32f2f;
    }

    .toast.warning[b-q6mi7ky6mi] {
        border-left: 4px solid #ed6c02;
    }

    .toast.info[b-q6mi7ky6mi] {
        border-left: 4px solid #0288d1;
    }

@keyframes slide-in-b-q6mi7ky6mi {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Toasts/ToastHost.razor.rz.scp.css */
.toast-container[b-ldt0bfjdm0] {
    position: fixed;
    /* 96px y no 24px: a 24px la tira de avisos cae JUSTO encima de la botonera del pie (`.dg-barra`
       del diario y sus equivalentes), y mientras dura el aviso —hasta 12 s en los de error— el
       clic del usuario no llega al boton. El boton se ve, se ve habilitado, y no responde. */
    bottom: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    /* z-index máximo para quedar siempre por encima de todo (modales, SelectorEntidad, header…).
       El ToastHost se monta a nivel raíz del MainLayout, tras el resto del contenido, así que con
       el z-index máximo gana el orden de pintado a cualquier modal anidado en la página. */
    z-index: 2147483647;
    pointer-events: none;
}
/* _content/ErpPowergest/Presentation/Shared/UserComponents/InviteUser/InviteUserHeader.razor.rz.scp.css */
/* --------------------
   Contenedor principal
----------------------*/
.invite-user-header[b-d99d10njxl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.search-container[b-d99d10njxl] {
    flex: 1;
}

/* --------------------
   Boton de invitar
----------------------*/
.invite-btn[b-d99d10njxl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid #cfcfcf;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

    /* Estado hover del boton */
    .invite-btn:hover[b-d99d10njxl] {
        background: #e0e0e0;
        box-shadow: 0 0 0 1px rgba(59,130,246,.15);
    }

    /* Estado active del boton */
    .invite-btn:active[b-d99d10njxl] {
        transform: scale(0.97);
    }
/* _content/ErpPowergest/Presentation/Shared/UserComponents/UsersAvatars/CompanyUsers.razor.rz.scp.css */
.company-users[b-3nd6k87kl4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, sans-serif;
    padding: 4px 8px;
    border-radius: 20px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .company-users:hover[b-3nd6k87kl4] {
        background-color: #e0e0e0;
    }

.avatars[b-3nd6k87kl4] {
    display: flex;
    position: relative;
}

.avatar[b-3nd6k87kl4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    object-fit: cover;
    position: relative;
    z-index: 1;
}

    .avatar:nth-child(2)[b-3nd6k87kl4] {
        margin-left: -10px;
        z-index: 2;
    }

    .avatar:nth-child(3)[b-3nd6k87kl4] {
        margin-left: -10px;
        z-index: 3;
    }

.employee-count[b-3nd6k87kl4] {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

/*----------------------
    LOADING STATES
----------------------*/
.count-skeleton[b-3nd6k87kl4] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shine-b-3nd6k87kl4 1.5s infinite;
    border-radius: 4px;
}

@keyframes shine-b-3nd6k87kl4 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
/* _content/ErpPowergest/Presentation/Shared/UserComponents/UsersList/MembersList.razor.rz.scp.css */
.company-members-list[b-fqkc51herd] {
    --members-blue: #2563eb;
    --members-blue-dark: #1d4ed8;
    --members-blue-soft: #eff6ff;
    --members-text: #172033;
    --members-muted: #64748b;
    --members-border: #e7edf5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 14px;
    min-width: 0;
    box-sizing: border-box;
}

    .company-members-list *[b-fqkc51herd],
    .company-members-list *[b-fqkc51herd]::before,
    .company-members-list *[b-fqkc51herd]::after {
        box-sizing: border-box;
    }

/* =============================
   Tarjeta de miembro
============================= */

.member-card[b-fqkc51herd] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d9e6fb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .member-card:hover[b-fqkc51herd],
    .member-card:focus-within[b-fqkc51herd] {
        border-color: #bfd6ff;
        box-shadow: 0 16px 32px rgba(37, 99, 235, 0.085);
    }

.member-main[b-fqkc51herd] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.member-avatar-wrap[b-fqkc51herd] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .member-avatar-wrap[b-fqkc51herd]  img,
    .member-avatar-wrap[b-fqkc51herd]  .avatar,
    .member-avatar-wrap[b-fqkc51herd]  .user-avatar,
    .member-avatar-wrap[b-fqkc51herd]  [class*="avatar"],
    .member-avatar-wrap[b-fqkc51herd]  [class*="Avatar"] {
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    }

.member-info[b-fqkc51herd] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.member-name-row[b-fqkc51herd] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.display-name[b-fqkc51herd],
.username[b-fqkc51herd] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.display-name[b-fqkc51herd] {
    color: var(--members-text);
    font-size: 14px;
    line-height: 1.15;
    font-weight: 850;
}

.username[b-fqkc51herd] {
    color: var(--members-muted);
    font-size: 12px;
    line-height: 1.15;
    font-weight: 650;
}

/* =============================
   Fila de rol
============================= */

.member-role-row[b-fqkc51herd] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}

.member-role-label[b-fqkc51herd] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8b95a7;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.member-role-icon[b-fqkc51herd] {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--members-blue-soft);
    color: var(--members-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

/* =============================
   Dropdown de rol
============================= */

.members-role-dropdown[b-fqkc51herd] {
    position: relative;
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

.role-trigger[b-fqkc51herd] {
    min-width: 150px;
    max-width: 170px;
    min-height: 36px;
    height: 36px;
    border: 1px solid #bfd6ff;
    border-radius: 14px;
    background: #eff6ff;
    color: var(--members-text);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    cursor: pointer;
    font: inherit;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .role-trigger:hover[b-fqkc51herd] {
        background: #e7f0ff;
        border-color: #9fc2ff;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
    }

.role-trigger-main[b-fqkc51herd] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.role-trigger-text[b-fqkc51herd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
}

.role-chevron[b-fqkc51herd] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #4b5563;
}

    .role-trigger:focus[b-fqkc51herd] {
        outline: none;
    }

    .role-trigger:focus-visible[b-fqkc51herd] {
        outline: 3px solid rgba(37, 99, 235, 0.16);
        outline-offset: 2px;
    }



/* =============================
   Menú abierto
============================= */

.role-menu[b-fqkc51herd] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    max-width: 230px;
    padding: 8px;
    border: 1px solid #e3eaf3;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);
    z-index: 3000;
}

.role-option[b-fqkc51herd] {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #334155;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

    .role-option:hover[b-fqkc51herd] {
        background: #f8fafc;
        color: #111827;
    }

    .role-option.selected[b-fqkc51herd] {
        background: #eff6ff;
        color: #1d4ed8;
    }

.role-option-text[b-fqkc51herd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.role-check[b-fqkc51herd] {
    font-size: 18px;
    color: #2563eb;
}

/* =============================
   Iconos de rol
============================= */

.role-badge-icon[b-fqkc51herd],
.role-option-icon[b-fqkc51herd],
.readonly-role-icon[b-fqkc51herd] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
}

.role-admin[b-fqkc51herd] {
    background: #dbeafe;
    color: #2563eb;
}

.role-employee[b-fqkc51herd] {
    background: #dcfce7;
    color: #16a34a;
}

.role-guest[b-fqkc51herd] {
    background: #f3e8ff;
    color: #9333ea;
}

.role-custom[b-fqkc51herd] {
    background: #f1f5f9;
    color: #475569;
}

/* Rol solo lectura */
.member-rol[b-fqkc51herd] {
    max-width: 180px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #ffffff;
    color: var(--members-blue-dark);
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sin miembros */
.no-members[b-fqkc51herd] {
    margin: 8px 4px;
    min-height: 76px;
    border: 1px dashed #dbe3ee;
    border-radius: 16px;
    background: #fbfdff;
    color: var(--members-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 520px) {
    .company-members-list[b-fqkc51herd] {
        padding-left: 0;
        padding-right: 0;
    }

    .member-role-row[b-fqkc51herd] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .members-role-dropdown[b-fqkc51herd] {
        justify-content: stretch;
    }

    .role-trigger[b-fqkc51herd] {
        width: 100%;
        max-width: none;
    }

    .member-rol[b-fqkc51herd] {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .role-menu[b-fqkc51herd] {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .company-members-list *[b-fqkc51herd],
    .company-members-list *[b-fqkc51herd]::before,
    .company-members-list *[b-fqkc51herd]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Sistema/Components/DatosPalabrasClaveOperador.razor.rz.scp.css */
/* Sección «Datos de palabras clave» de la pantalla del operador: los mismos valores que las secciones de
   ProveedorIaPage (tarjeta blanca, borde #e5e7eb, radio 12, azul #2563eb). */
.pdc-seccion[b-bc7ccci3il] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.pdc-titulo[b-bc7ccci3il] { font-size: .95rem; font-weight: 700; color: #111827; margin: 0; }
.pdc-subtitulo[b-bc7ccci3il] { font-size: .82rem; font-weight: 600; color: #374151; margin-top: 6px; }
.pdc-ayuda[b-bc7ccci3il] { margin: 0; color: #6b7280; font-size: .84rem; line-height: 1.55; max-width: 105ch; }

/* Un solo punto (D10): las tres partes de la sección (coste para el cliente, proveedor de pago, Planificador) separadas
   por una raya, no en tarjetas aparte. */
.pdc-bloque[b-bc7ccci3il] { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.pdc-bloque-titulo[b-bc7ccci3il] { font-size: .88rem; font-weight: 700; color: #111827; margin: 0; }
.pdc-ejemplo[b-bc7ccci3il] {
    background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 9px 12px; font-size: .86rem; line-height: 1.5;
}

.pdc-rejilla[b-bc7ccci3il] { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.pdc-campo[b-bc7ccci3il] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdc-campo > label[b-bc7ccci3il] { font-size: .78rem; font-weight: 600; color: #6b7280; }

.pdc-input[b-bc7ccci3il] {
    padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 8px;
    font-family: inherit; font-size: .86rem; color: #111827; background: #fff; min-width: 220px;
}
.pdc-input:focus[b-bc7ccci3il] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pdc-input:disabled[b-bc7ccci3il] { background: #f9fafb; color: #9ca3af; }
.pdc-corto[b-bc7ccci3il] { min-width: 0; width: 8rem; }

.pdc-interruptor[b-bc7ccci3il] { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: #111827; min-height: 34px; }

.pdc-acciones[b-bc7ccci3il] { display: flex; gap: 8px; flex-wrap: wrap; }
.pdc-boton[b-bc7ccci3il] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    font-family: inherit; font-size: .83rem; font-weight: 600; cursor: pointer;
}
.pdc-boton:hover:not(:disabled)[b-bc7ccci3il] { background: #f3f4f6; }
.pdc-boton:disabled[b-bc7ccci3il] { opacity: .55; cursor: default; }
.pdc-primario[b-bc7ccci3il] { background: #2563eb; border-color: #2563eb; color: #fff; }
.pdc-primario:hover:not(:disabled)[b-bc7ccci3il] { background: #1d4ed8; }

.pdc-error[b-bc7ccci3il] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 13px; font-size: .88rem; }
.pdc-ok[b-bc7ccci3il] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 10px; padding: 10px 13px; font-size: .88rem; }

@media (max-width: 640px) {
    .pdc-input[b-bc7ccci3il] { min-width: 0; width: 100%; }
    .pdc-campo[b-bc7ccci3il] { width: 100%; }
}
/* _content/ErpPowergest/Presentation/Sistema/Components/DuplicadoClientePanel.razor.rz.scp.css */
/* Plan DP: mismo marco que «Mover a otra instalación» (su hoja se copia porque el CSS va por componente):
   también crea bases y mueve datos de un cliente, y no puede leerse como un campo más de la ficha. */
.mz[b-u26emfdd6u] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.mz-titulo[b-u26emfdd6u] {
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.mz-fila[b-u26emfdd6u] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mz-fila label[b-u26emfdd6u] { font-size: .75rem; color: #6b7280; }
.mz-fila select[b-u26emfdd6u] { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: .9rem; }

.mz-ruta[b-u26emfdd6u] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: #374151; }
.mz-flecha[b-u26emfdd6u] { color: #9ca3af; }

/* Los pasos van numerados y en línea: el orden importa y saltarse uno no es una opción. */
.mz-pasos[b-u26emfdd6u] { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.mz-btn[b-u26emfdd6u] {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    background: #fff; border: 1px solid #d1d5db; color: #374151;
}
.mz-btn:hover:not(:disabled)[b-u26emfdd6u] { background: #f3f4f6; }
.mz-btn:disabled[b-u26emfdd6u] { opacity: .55; cursor: default; }
.mz-btn-primario[b-u26emfdd6u] { background: #2563eb; border-color: #2563eb; color: #fff; }
.mz-btn-primario:hover:not(:disabled)[b-u26emfdd6u] { background: #1d4ed8; }
.mz-btn-peligro[b-u26emfdd6u] { background: #dc2626; border-color: #dc2626; color: #fff; }
.mz-btn-peligro:hover:not(:disabled)[b-u26emfdd6u] { background: #b91c1c; }

.mz-hint[b-u26emfdd6u] { font-size: .78rem; color: #6b7280; margin-top: 4px; }
.mz-aviso[b-u26emfdd6u] { color: #b45309; }

.mz-resultado[b-u26emfdd6u] {
    margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: .85rem; line-height: 1.5;
}
.mz-resultado-mal[b-u26emfdd6u] { border-color: #fca5a5; }
.mz-resultado code[b-u26emfdd6u] { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; word-break: break-all; }

.mz-bloque[b-u26emfdd6u] { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.mz-bloque ul[b-u26emfdd6u] { margin: 4px 0 0 18px; padding: 0; }

.mz-lista[b-u26emfdd6u] { margin: 4px 0 8px 18px; padding: 0; font-size: .85rem; color: #374151; }
/* _content/ErpPowergest/Presentation/Sistema/Components/MudanzaClientePanel.razor.rz.scp.css */
/* TC5: se enmarca porque es la acción de la ficha que MUEVE DATOS de un cliente, y leerla como un campo
   más del formulario es justo lo que no debe pasar (mismo criterio que el traslado de T4). */
.mz[b-0dmfrhwr80] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.mz-titulo[b-0dmfrhwr80] {
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.mz-fila[b-0dmfrhwr80] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mz-fila label[b-0dmfrhwr80] { font-size: .75rem; color: #6b7280; }
.mz-fila select[b-0dmfrhwr80] { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: .9rem; }

.mz-ruta[b-0dmfrhwr80] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: #374151; }
.mz-flecha[b-0dmfrhwr80] { color: #9ca3af; }

/* Los pasos van numerados y en línea: el orden importa y saltarse uno no es una opción. */
.mz-pasos[b-0dmfrhwr80] { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.mz-btn[b-0dmfrhwr80] {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    background: #fff; border: 1px solid #d1d5db; color: #374151;
}
.mz-btn:hover:not(:disabled)[b-0dmfrhwr80] { background: #f3f4f6; }
.mz-btn:disabled[b-0dmfrhwr80] { opacity: .55; cursor: default; }
.mz-btn-primario[b-0dmfrhwr80] { background: #2563eb; border-color: #2563eb; color: #fff; }
.mz-btn-primario:hover:not(:disabled)[b-0dmfrhwr80] { background: #1d4ed8; }
.mz-btn-peligro[b-0dmfrhwr80] { background: #dc2626; border-color: #dc2626; color: #fff; }
.mz-btn-peligro:hover:not(:disabled)[b-0dmfrhwr80] { background: #b91c1c; }

.mz-hint[b-0dmfrhwr80] { font-size: .78rem; color: #6b7280; margin-top: 4px; }
.mz-aviso[b-0dmfrhwr80] { color: #b45309; }

.mz-resultado[b-0dmfrhwr80] {
    margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: .85rem; line-height: 1.5;
}
.mz-resultado-mal[b-0dmfrhwr80] { border-color: #fca5a5; }
.mz-resultado code[b-0dmfrhwr80] { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; word-break: break-all; }

.mz-bloque[b-0dmfrhwr80] { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.mz-bloque ul[b-0dmfrhwr80] { margin: 4px 0 0 18px; padding: 0; }
/* _content/ErpPowergest/Presentation/Sistema/Components/PanelIncidenciasIa.razor.rz.scp.css */
/* IN0 — panel de averías del servicio de IA. Rojo sobrio, no alarmista: lo lee un técnico que ya sabe
   que algo va mal, y el trabajo del panel es decir QUÉ y QUÉ HACER, no gritar. */

.inc-panel[b-p40hmkziwy] {
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}

.inc-cabecera[b-p40hmkziwy] { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.inc-ico-alarma[b-p40hmkziwy] { color: #dc2626; font-size: 22px; }
.inc-titulo[b-p40hmkziwy] { font-weight: 600; color: #7f1d1d; }

.inc-lista[b-p40hmkziwy] { display: flex; flex-direction: column; gap: .6rem; }

.inc-fila[b-p40hmkziwy] {
    display: flex; gap: .7rem; align-items: flex-start;
    background: #fff; border: 1px solid #fee2e2; border-radius: 8px;
    padding: .6rem .75rem;
}

/* La etiqueta dice de un vistazo QUÉ clase de avería es, que es lo que decide qué hay que hacer:
   recargar una cuenta no se parece en nada a cambiar un identificador de modelo. */
.inc-etiqueta[b-p40hmkziwy] {
    flex: 0 0 auto; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; padding: .2rem .45rem; border-radius: 5px; white-space: nowrap;
}
.inc-saldo[b-p40hmkziwy] { background: #fef3c7; color: #92400e; }
.inc-modelo-ko[b-p40hmkziwy] { background: #ede9fe; color: #5b21b6; }
.inc-clave[b-p40hmkziwy] { background: #fee2e2; color: #991b1b; }
.inc-otro[b-p40hmkziwy] { background: #f3f4f6; color: #374151; }

.inc-cuerpo[b-p40hmkziwy] { flex: 1 1 auto; min-width: 0; }
.inc-linea1[b-p40hmkziwy] { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; color: #111827; }
.inc-modelo[b-p40hmkziwy] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: #4b5563; }
.inc-http[b-p40hmkziwy] { font-size: .75rem; color: #9ca3af; }

.inc-que[b-p40hmkziwy] { color: #374151; font-size: .86rem; margin-top: .25rem; line-height: 1.45; white-space: pre-line; }

.inc-detalle[b-p40hmkziwy] { margin-top: .4rem; }
.inc-detalle summary[b-p40hmkziwy] { cursor: pointer; font-size: .78rem; color: #6b7280; }
/* El detalle del proveedor puede ser un JSON largo: se deja romper y con scroll propio, para que no
   estire la fila ni empuje el botón de resolver fuera de la vista. */
.inc-detalle pre[b-p40hmkziwy] {
    margin: .35rem 0 0; padding: .45rem .6rem; background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 6px; font-size: .74rem; color: #4b5563;
    white-space: pre-wrap; word-break: break-word; max-height: 9rem; overflow: auto;
}

.inc-meta[b-p40hmkziwy] { margin-top: .35rem; font-size: .76rem; color: #9ca3af; }

.inc-resolver[b-p40hmkziwy] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid #bbf7d0; border-radius: 8px; background: #fff; color: #047857; cursor: pointer;
}
.inc-resolver:hover:not(:disabled)[b-p40hmkziwy] { background: #f0fdf4; }
.inc-resolver:disabled[b-p40hmkziwy] { opacity: .45; cursor: default; }
.inc-resolver .material-symbols-rounded[b-p40hmkziwy] {
    font-size: 18px; line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* _content/ErpPowergest/Presentation/Sistema/Components/VigiaServidores.razor.rz.scp.css */
.vig-seccion[b-yxe27nxuep] { margin-bottom: 1.6rem; }
.vig-seccion h2[b-yxe27nxuep] { font-size: 1rem; margin: 0 0 .25rem; color: #374151; }
.vig-sub[b-yxe27nxuep] { color: #6b7280; font-size: .8rem; margin-bottom: .6rem; line-height: 1.45; }
.vig-vacio[b-yxe27nxuep] { color: #6b7280; padding: .5rem 0; font-size: .85rem; }

.vig-nodos[b-yxe27nxuep] { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: .75rem; }
.vig-nodo[b-yxe27nxuep] { border: 1px solid #e5e7eb; border-left: 4px solid #16a34a; border-radius: 10px; padding: .8rem 1rem; background: #fff; }
.vig-atencion[b-yxe27nxuep] { border-left-color: #f59e0b; background: #fffdf5; }
.vig-problema[b-yxe27nxuep] { border-left-color: #dc2626; background: #fff5f5; }
.vig-sin-noticias[b-yxe27nxuep] { border-left-color: #6b7280; background: #f3f4f6; }

.vig-cabecera[b-yxe27nxuep] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.vig-nombre[b-yxe27nxuep] { font-weight: 600; color: #111827; }
.vig-estado[b-yxe27nxuep] { font-size: .78rem; font-weight: 600; color: #374151; }
.vig-hace[b-yxe27nxuep] { margin-left: auto; color: #6b7280; font-size: .76rem; }

.vig-hallazgos[b-yxe27nxuep] { list-style: none; margin: .3rem 0 .4rem; padding: 0; font-size: .82rem; line-height: 1.45; }
.vig-hallazgos li[b-yxe27nxuep] { padding: .25rem 0; border-bottom: 1px solid #f3f4f6; }
.vig-hallazgos li:last-child[b-yxe27nxuep] { border-bottom: none; }
.vig-etq[b-yxe27nxuep] { display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; font-weight: 600; margin-right: .3rem; }
.vig-critico .vig-etq[b-yxe27nxuep] { background: #fee2e2; color: #991b1b; }
.vig-aviso .vig-etq[b-yxe27nxuep] { background: #fef3c7; color: #92400e; }
.vig-desde[b-yxe27nxuep] { color: #9ca3af; font-size: .74rem; margin-left: .3rem; }

.vig-medidas summary[b-yxe27nxuep] { cursor: pointer; color: #2563eb; font-size: .78rem; margin-top: .2rem; }
.vig-maquina[b-yxe27nxuep] { margin-top: .45rem; font-size: .78rem; color: #374151; }
.vig-maquina-nombre[b-yxe27nxuep] { font-weight: 600; margin-bottom: .1rem; }
.vig-medida[b-yxe27nxuep] { display: inline-block; margin: 0 .8rem .1rem 0; color: #4b5563; }

.vig-enlace[b-yxe27nxuep] { font-size: .78rem; font-weight: 500; margin-left: .6rem; color: #2563eb; text-decoration: none; }
.vig-enlace:hover[b-yxe27nxuep] { text-decoration: underline; }

/* Cuadro de indicadores: una fila por máquina, una columna por indicador. Lo primero que se mira. */
.vig-cuadro-marco[b-yxe27nxuep] { overflow-x: auto; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.vig-cuadro[b-yxe27nxuep] { width: 100%; border-collapse: collapse; font-size: .82rem; }
.vig-cuadro th[b-yxe27nxuep] { text-align: left; font-weight: 600; color: #6b7280; font-size: .74rem; text-transform: uppercase;
                 letter-spacing: .03em; padding: .5rem .7rem; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.vig-cuadro td[b-yxe27nxuep] { padding: .45rem .7rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.vig-cuadro tr:last-child td[b-yxe27nxuep] { border-bottom: none; }
.vig-fila-nodo td[b-yxe27nxuep] { background: #f9fafb; border-top: 2px solid #e5e7eb; }
.vig-fila-nodo .vig-cuadro-nombre[b-yxe27nxuep] { font-weight: 700; }
.vig-fila-ct .vig-cuadro-nombre[b-yxe27nxuep] { padding-left: 1.4rem; }
.vig-fila-vieja[b-yxe27nxuep] { opacity: .5; }
.vig-cuadro-nombre[b-yxe27nxuep] { white-space: nowrap; color: #111827; font-weight: 600; }
.vig-cuadro-tipo[b-yxe27nxuep] { display: block; font-weight: 400; font-size: .7rem; color: #9ca3af; }

.vig-celda[b-yxe27nxuep] { min-width: 92px; }
.vig-celda-valor[b-yxe27nxuep] { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.vig-celda-detalle[b-yxe27nxuep] { display: block; font-size: .7rem; color: #9ca3af; white-space: nowrap; }
.vig-celda-sin[b-yxe27nxuep] { color: #d1d5db; }
.vig-barra[b-yxe27nxuep] { display: block; height: 4px; border-radius: 2px; background: #f3f4f6; margin: .15rem 0; overflow: hidden; }
.vig-barra > span[b-yxe27nxuep] { display: block; height: 100%; border-radius: 2px; max-width: 100%; }
.vig-celda-bien .vig-celda-valor[b-yxe27nxuep] { color: #15803d; }
.vig-celda-bien .vig-barra > span[b-yxe27nxuep] { background: #22c55e; }
.vig-celda-aviso[b-yxe27nxuep] { background: #fffbeb; }
.vig-celda-aviso .vig-celda-valor[b-yxe27nxuep] { color: #b45309; }
.vig-celda-aviso .vig-barra > span[b-yxe27nxuep] { background: #f59e0b; }
.vig-celda-critico[b-yxe27nxuep] { background: #fef2f2; }
.vig-celda-critico .vig-celda-valor[b-yxe27nxuep] { color: #b91c1c; }
.vig-celda-critico .vig-barra > span[b-yxe27nxuep] { background: #dc2626; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/AltasComercialesPage.razor.rz.scp.css */
.ac-page[b-xvd2vtoq23] {
    padding: 0;   /* como Clientes: el borde lo pone .main-body */
}

.ac-header[b-xvd2vtoq23] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 9px;
}

.ac-header-text[b-xvd2vtoq23] { flex: 1 1 auto; min-width: 0; }
/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.ac-header-actions[b-xvd2vtoq23] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.ac-title[b-xvd2vtoq23] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.ac-subtitle[b-xvd2vtoq23] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
    max-width: 62ch;
}

.ac-btn[b-xvd2vtoq23] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.ac-btn:hover[b-xvd2vtoq23] { background: #f9fafb; }
.ac-btn:disabled[b-xvd2vtoq23] { opacity: .5; cursor: default; }
.ac-btn .material-symbols-rounded[b-xvd2vtoq23] { font-size: 18px; }
.ac-btn-sm[b-xvd2vtoq23] { padding: 4px 10px; font-size: .85rem; }

.ac-card[b-xvd2vtoq23] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.ac-seccion[b-xvd2vtoq23] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    background: #fcfcfd;
}

/* Título de sección con una acción a la derecha. El borde y el fondo pasan a la fila: si los
   conservara el h2, la línea se cortaría justo debajo del texto y el botón quedaría flotando. */
.ac-seccion-fila[b-xvd2vtoq23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-right: 16px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    background: #fcfcfd;
}

.ac-seccion-fila .ac-seccion[b-xvd2vtoq23] {
    border-bottom: none;
    background: none;
}

.ac-empty[b-xvd2vtoq23] {
    padding: 28px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.ac-denied[b-xvd2vtoq23] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    justify-content: center;
}

.ac-denied .material-symbols-rounded[b-xvd2vtoq23] { font-size: 28px; color: #9ca3af; }
.ac-denied-title[b-xvd2vtoq23] { font-weight: 600; }

.ac-table[b-xvd2vtoq23] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.ac-table th[b-xvd2vtoq23],
.ac-table td[b-xvd2vtoq23] {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    vertical-align: top;
}

.ac-table th[b-xvd2vtoq23] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.ac-table tbody tr:hover[b-xvd2vtoq23] { background: #fafafa; }

.ac-error[b-xvd2vtoq23] {
    color: #991b1b;
    max-width: 380px;
    word-break: break-word;
}

.ac-input[b-xvd2vtoq23] {
    padding: 6px 9px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 7px;
    font-size: .86rem;
    width: 100%;
    max-width: 260px;
}

.ac-input:focus[b-xvd2vtoq23] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.ac-input:disabled[b-xvd2vtoq23] { background: #f9fafb; }
.ac-input-sm[b-xvd2vtoq23] { max-width: 130px; }

.ac-alta-fila[b-xvd2vtoq23] { display: flex; gap: 6px; align-items: center; }

/* Lo que concede un producto: son claves separadas por comas y pueden ser muchas. */
.ac-claves[b-xvd2vtoq23] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    color: #374151;
    max-width: 420px;
    word-break: break-word;
}

.ac-tag[b-xvd2vtoq23] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: .72rem;
    font-weight: 600;
}

.ac-nota[b-xvd2vtoq23] {
    padding: 10px 16px 14px;
    color: var(--text-muted, #6b7280);
    font-size: .85rem;
    max-width: 78ch;
}

.ac-aviso[b-xvd2vtoq23] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: #fffbeb;
    color: #78350f;
    font-size: .88rem;
}

.ac-aviso .material-symbols-rounded[b-xvd2vtoq23] { font-size: 20px; color: #d97706; }

.ac-ok[b-xvd2vtoq23] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: #166534;
    font-size: .9rem;
}

.ac-ok .material-symbols-rounded[b-xvd2vtoq23] { font-size: 20px; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/AuditoriaPage.razor.rz.scp.css */
/* Todo el alto de la pantalla: columna flex con el suelo en la pantalla; la tabla, la última, se queda
   con el alto que sobra (o crece si no cabe). */
.au-page[b-plugbxrjqb] {
    padding: 0;   /* como Clientes: el borde lo pone .main-body */
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Sin `flex-wrap`, como en Técnicos: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.au-header[b-plugbxrjqb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 9px;
}

.au-header-text[b-plugbxrjqb] {
    flex: 1 1 auto;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.au-header-actions[b-plugbxrjqb] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.au-title[b-plugbxrjqb] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.au-subtitle[b-plugbxrjqb] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
}

.au-card[b-plugbxrjqb] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.au-empty[b-plugbxrjqb] {
    padding: 28px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.au-denied[b-plugbxrjqb] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    justify-content: center;
}

.au-denied .material-symbols-rounded[b-plugbxrjqb] { font-size: 28px; color: #9ca3af; }
.au-denied-title[b-plugbxrjqb] { font-weight: 600; }

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella). */
.au-tabla[b-plugbxrjqb] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.au-page[b-plugbxrjqb]  .tp-panel { min-height: auto; }

.au-detalle[b-plugbxrjqb] {
    display: inline-block;
    color: #6b7280;
    max-width: 320px;
    word-break: break-word;
}

.au-badge[b-plugbxrjqb] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}

.au-badge-ok[b-plugbxrjqb] { background: #dcfce7; color: #166534; }
.au-badge-ko[b-plugbxrjqb] { background: #fee2e2; color: #991b1b; }

.au-tag[b-plugbxrjqb] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
}

.au-tag-datos[b-plugbxrjqb] { background: #fef3c7; color: #92400e; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/AutorizacionesAeatPage.razor.rz.scp.css */
.aa-gate[b-clqddnwfki] {
    padding: 24px;
    color: var(--texto-secundario, #555);
}

.aa-page[b-clqddnwfki] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aa-page h1[b-clqddnwfki] {
    font-size: 1.35rem;
    margin: 0;
}

.aa-nota[b-clqddnwfki] {
    color: var(--texto-secundario, #555);
    margin: 0 0 8px;
}

.aa-aviso[b-clqddnwfki] {
    background: #fef2f2;
    color: #991b1b;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.aa-mensaje[b-clqddnwfki] {
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.aa-tarjeta[b-clqddnwfki] {
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 10px;
    padding: 16px;
}

.aa-tarjeta h2[b-clqddnwfki] {
    font-size: 1.05rem;
    margin: 0 0 10px;
}

.aa-cabecera[b-clqddnwfki] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.aa-acciones[b-clqddnwfki] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aa-btn[b-clqddnwfki] {
    border: 1px solid var(--borde, #ccc);
    background: var(--superficie, #fff);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.aa-btn:disabled[b-clqddnwfki] { opacity: .55; cursor: default; }

.aa-btn-primario[b-clqddnwfki] {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.aa-tabla[b-clqddnwfki] {
    width: 100%;
    border-collapse: collapse;
}

.aa-tabla th[b-clqddnwfki],
.aa-tabla td[b-clqddnwfki] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--borde, #eee);
    vertical-align: top;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/BorrarCuentaPage.razor.rz.scp.css */
/* Estilos propios de la pantalla de borrar cuentas.
   Sin ::deep y sin depender de reglas globales: el CSS scoped de una página copiada que no trae su
   .razor.css es exactamente el motivo por el que otras pantallas «salieron sin estilo». */

.bc-page[b-k8cy29gqn3] {
    padding: 1.5rem;
    max-width: 62rem;
    margin: 0 auto;
}

.bc-header[b-k8cy29gqn3] {
    margin-bottom: 1.25rem;
}

.bc-title[b-k8cy29gqn3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.bc-subtitle[b-k8cy29gqn3] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
}

.bc-card[b-k8cy29gqn3] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Acceso denegado: se distingue del resto porque es lo único que se ve sin elevación. */
.bc-denied[b-k8cy29gqn3] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border-color: var(--warning-border, #fcd34d);
    background: var(--warning-bg, #fffbeb);
}

.bc-denied-title[b-k8cy29gqn3] {
    font-weight: 600;
    margin-bottom: .25rem;
}

.bc-denied .bc-btn-primary[b-k8cy29gqn3] {
    margin-top: .75rem;
}

/* La comparativa con «dar de baja» va arriba del todo y en azul, no en rojo: no es una alarma, es
   lo que hay que leer ANTES de buscar a nadie para no equivocarse de operación. */
.bc-aviso[b-k8cy29gqn3] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--info-bg, #eff6ff);
    border-color: var(--info-border, #bfdbfe);
}

.bc-aviso-titulo[b-k8cy29gqn3] {
    font-weight: 600;
    margin-bottom: .5rem;
}

.bc-comparativa[b-k8cy29gqn3] {
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.bc-comparativa th[b-k8cy29gqn3],
.bc-comparativa td[b-k8cy29gqn3] {
    text-align: left;
    padding: .25rem .75rem .25rem 0;
    vertical-align: top;
}

.bc-comparativa th[b-k8cy29gqn3] {
    font-weight: 600;
}

.bc-comparativa td:first-child[b-k8cy29gqn3] {
    color: var(--text-muted, #6b7280);
}

.bc-aviso-pie[b-k8cy29gqn3] {
    font-size: .85rem;
    color: var(--text-muted, #4b5563);
}

.bc-buscador[b-k8cy29gqn3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
}

.bc-buscador input[b-k8cy29gqn3] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
}

.bc-tabla[b-k8cy29gqn3] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.bc-tabla th[b-k8cy29gqn3],
.bc-tabla td[b-k8cy29gqn3] {
    text-align: left;
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.bc-tabla th[b-k8cy29gqn3] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.bc-acciones[b-k8cy29gqn3] {
    text-align: right;
    white-space: nowrap;
}

.bc-empty[b-k8cy29gqn3] {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.bc-form-title[b-k8cy29gqn3] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.bc-correo[b-k8cy29gqn3] {
    color: var(--text-muted, #6b7280);
    font-size: .875rem;
    margin-bottom: .875rem;
}

/* Alcance: qué empresas se van. Cada bloque es una consecuencia distinta y se leen por separado. */
.bc-alcance-bloque[b-k8cy29gqn3] {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    padding: .625rem .75rem;
    margin-bottom: .625rem;
}

/* Que una empresa ENTERA desaparezca es lo más grave que puede salir de aquí, y tiene que verse
   distinto de «deja de tener acceso». */
.bc-alcance-grave[b-k8cy29gqn3] {
    border-color: var(--danger-border, #fecaca);
    background: var(--danger-bg, #fff7f7);
}

.bc-alcance-titulo[b-k8cy29gqn3] {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .375rem;
}

.bc-alcance-nota[b-k8cy29gqn3] {
    font-size: .82rem;
    color: var(--text-muted, #6b7280);
    margin-top: .375rem;
}

.bc-lista[b-k8cy29gqn3] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .875rem;
}

/* Lo que sobrevive al borrado. Ni alarma ni adorno: es la respuesta que hay que darle al interesado
   cuando pregunte qué queda de él. */
.bc-conserva[b-k8cy29gqn3] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    background: var(--surface-muted, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    padding: .625rem .75rem;
    margin: .875rem 0;
    font-size: .85rem;
}

.bc-peligro[b-k8cy29gqn3] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    background: var(--danger-bg, #fff7f7);
    border: 1px solid var(--danger-border, #fecaca);
    border-radius: .375rem;
    padding: .625rem .75rem;
    margin-bottom: .875rem;
    font-size: .875rem;
    color: var(--danger-text, #7f1d1d);
}

.bc-campo[b-k8cy29gqn3] {
    display: block;
    margin-bottom: .75rem;
}

.bc-campo span[b-k8cy29gqn3] {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.bc-campo input[b-k8cy29gqn3] {
    width: 100%;
    max-width: 22rem;
    padding: .5rem .625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    font-size: .95rem;
}

.bc-form-acciones[b-k8cy29gqn3] {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.bc-btn[b-k8cy29gqn3] {
    padding: .5rem .875rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    background: var(--surface, #fff);
    font-size: .875rem;
    cursor: pointer;
}

.bc-btn:hover:not(:disabled)[b-k8cy29gqn3] {
    background: var(--surface-hover, #f9fafb);
}

.bc-btn:disabled[b-k8cy29gqn3] {
    opacity: .55;
    cursor: not-allowed;
}

.bc-btn-primary[b-k8cy29gqn3] {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}

.bc-btn-primary:hover:not(:disabled)[b-k8cy29gqn3] {
    background: var(--primary-hover, #1d4ed8);
}

.bc-btn-peligro[b-k8cy29gqn3] {
    background: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
    color: #fff;
}

.bc-btn-peligro:hover:not(:disabled)[b-k8cy29gqn3] {
    background: var(--danger-hover, #b91c1c);
}

/* Lo borrado, tabla a tabla. Va plegado: el total basta casi siempre, y el detalle existe para
   quien tiene que responder por escrito QUÉ se borró. */
.bc-hecho[b-k8cy29gqn3] {
    border-color: var(--success-border, #bbf7d0);
    background: var(--success-bg, #f0fdf4);
}

.bc-detalle[b-k8cy29gqn3] {
    margin-top: .75rem;
    font-size: .875rem;
}

.bc-detalle summary[b-k8cy29gqn3] {
    cursor: pointer;
    color: var(--text-muted, #6b7280);
}

.bc-detalle .bc-tabla[b-k8cy29gqn3] {
    margin-top: .5rem;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/CartaPorteGratuitaPage.razor.rz.scp.css */
.cg-gate[b-sofoc4f54v] { padding: 2rem; color: #555766; }

.cg-page[b-sofoc4f54v] {
    max-width: 960px;
    padding: 1rem;
    color: #1a1b22;
}

.cg-page h1[b-sofoc4f54v] { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; }
.cg-intro[b-sofoc4f54v] { margin: 0 0 1rem; color: #555766; line-height: 1.5; }
.cg-total[b-sofoc4f54v] { font-weight: 600; }

.cg-aviso[b-sofoc4f54v] {
    padding: .55rem .75rem;
    border: 1px solid #fde68a;
    border-radius: .5rem;
    background: #fffbeb;
    color: #92400e;
}

.cg-tabla-scroll[b-sofoc4f54v] {
    max-height: 32rem;
    overflow: auto;
    border: 1px solid #e4e5ec;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.cg-tabla[b-sofoc4f54v] { width: 100%; border-collapse: collapse; font-size: .9rem; }

.cg-tabla th[b-sofoc4f54v] {
    position: sticky;
    top: 0;
    background: #eef3fd;
    color: #00288e;
    text-align: right;
    padding: .5rem .75rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cg-tabla td[b-sofoc4f54v] { text-align: right; padding: .45rem .75rem; border-top: 1px solid #f0f3f7; font-variant-numeric: tabular-nums; }
.cg-tabla th:first-child[b-sofoc4f54v], .cg-tabla td:first-child[b-sofoc4f54v] { text-align: left; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/CertificadoPresentadorPage.razor.rz.scp.css */
.cert-page[b-zwixw7hpt8] {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cert-barra[b-zwixw7hpt8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cert-barra h1[b-zwixw7hpt8] {
    font-size: 1.35rem;
    margin: 0;
}

.cert-intro[b-zwixw7hpt8],
.cert-nota[b-zwixw7hpt8] {
    color: var(--texto-secundario, #555);
    margin: 0 0 8px;
}

.cert-tarjeta[b-zwixw7hpt8] {
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 10px;
    padding: 16px;
}

.cert-tarjeta h2[b-zwixw7hpt8] {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

.cert-activo[b-zwixw7hpt8] {
    border-left: 6px solid #16a34a;
    padding-left: 12px;
}

.cert-activo.cert-ambar[b-zwixw7hpt8] { border-left-color: #d97706; }
.cert-activo.cert-rojo[b-zwixw7hpt8] { border-left-color: #dc2626; }

.cert-dias[b-zwixw7hpt8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.cert-dias strong[b-zwixw7hpt8] { font-size: 1.2rem; }

.cert-datos[b-zwixw7hpt8] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 8px;
}

.cert-datos dt[b-zwixw7hpt8] { color: var(--texto-secundario, #555); }
.cert-datos dd[b-zwixw7hpt8] { margin: 0; overflow-wrap: anywhere; }

.cert-rojo-texto[b-zwixw7hpt8] { color: #b91c1c; }

.cert-aviso[b-zwixw7hpt8] {
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
}

.cert-aviso-informacion[b-zwixw7hpt8] { background: #eff6ff; color: #1e3a8a; }
.cert-aviso-aviso[b-zwixw7hpt8] { background: #fffbeb; color: #92400e; }
.cert-aviso-riesgo[b-zwixw7hpt8] { background: #fef2f2; color: #991b1b; }

.cert-check[b-zwixw7hpt8] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0;
}

.cert-subida[b-zwixw7hpt8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cert-subida input[type=password][b-zwixw7hpt8] {
    min-width: 220px;
    padding: 6px 8px;
}

.cert-acciones[b-zwixw7hpt8] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cert-btn[b-zwixw7hpt8] {
    border: 1px solid var(--borde, #ccc);
    background: var(--superficie, #fff);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

.cert-btn:disabled[b-zwixw7hpt8] { opacity: .55; cursor: default; }

.cert-btn-primario[b-zwixw7hpt8] {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.cert-tabla[b-zwixw7hpt8] {
    width: 100%;
    border-collapse: collapse;
}

.cert-tabla th[b-zwixw7hpt8],
.cert-tabla td[b-zwixw7hpt8] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--borde, #eee);
}

.cp-gate[b-zwixw7hpt8] {
    padding: 24px;
    color: var(--texto-secundario, #555);
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/ComandosPage.razor.rz.scp.css */
/* Todo el alto de la pantalla: columna flex con el suelo en la pantalla; los paneles se quedan con el
   alto que sobra. */
.cm-page[b-p79dy1dx5l] { padding: 0; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }

.cm-header[b-p79dy1dx5l] { margin-bottom: 9px; }
.cm-title[b-p79dy1dx5l] { font-size: 1.35rem; font-weight: 600; margin: 0; }
.cm-subtitle[b-p79dy1dx5l] { color: #6b7280; font-size: .9rem; margin-top: 2px; }

/* La lista es una tabla de tres columnas: necesita más ancho que la antigua columna fija de 360px. */
/* Los dos paneles se estiran a todo el alto (stretch); la tabla rellena el suyo. */
.cm-main[b-p79dy1dx5l] { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .cm-main[b-p79dy1dx5l] { grid-template-columns: 1fr; } }

.cm-card[b-p79dy1dx5l] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.cm-empty[b-p79dy1dx5l] { padding: 28px; text-align: center; color: #6b7280; }
.cm-denied[b-p79dy1dx5l] { display: flex; align-items: center; gap: 12px; justify-content: center; }
.cm-denied .material-symbols-rounded[b-p79dy1dx5l] { font-size: 28px; color: #9ca3af; }
.cm-denied-title[b-p79dy1dx5l] { font-weight: 600; }

.cm-list[b-p79dy1dx5l] { padding: 12px; display: flex; flex-direction: column; min-width: 0; }
.cm-section-title[b-p79dy1dx5l] { font-weight: 600; color: #374151; padding: 4px 6px 10px; }

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella). */
.cm-tabla[b-p79dy1dx5l] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cm-page[b-p79dy1dx5l]  .tp-panel { min-height: auto; }

/* Acción seleccionada: la fila la pinta TablaPaginada, de ahí el ::deep. */
.cm-tabla[b-p79dy1dx5l]  tr.cm-fila-sel > td { background: #eff6ff; }
.cm-tabla[b-p79dy1dx5l]  tr.cm-fila-sel > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }

.cm-item-texts[b-p79dy1dx5l] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-item-name[b-p79dy1dx5l] { font-weight: 600; font-size: .92rem; }
.cm-item-desc[b-p79dy1dx5l] { color: #6b7280; font-size: .8rem; }

.cm-tag[b-p79dy1dx5l] { white-space: nowrap; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: #374151; }
.cm-tag-datos[b-p79dy1dx5l] { background: #fef3c7; color: #92400e; }

.cm-detail[b-p79dy1dx5l] { padding: 18px; }
.cm-detail-head[b-p79dy1dx5l] { display: flex; align-items: center; gap: 10px; }
.cm-detail-title[b-p79dy1dx5l] { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cm-detail-desc[b-p79dy1dx5l] { color: #6b7280; font-size: .9rem; margin: 6px 0 16px; }

.cm-fields[b-p79dy1dx5l] { display: flex; flex-direction: column; gap: 14px; }
.cm-field[b-p79dy1dx5l] { display: flex; flex-direction: column; gap: 6px; }
.cm-field label[b-p79dy1dx5l] { font-size: .8rem; font-weight: 600; color: #374151; }
.cm-ctx[b-p79dy1dx5l] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cm-input[b-p79dy1dx5l] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }
.cm-input:focus[b-p79dy1dx5l] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.cm-textarea[b-p79dy1dx5l] { padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; resize: vertical; }
.cm-textarea:focus[b-p79dy1dx5l] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.cm-actions[b-p79dy1dx5l] { margin-top: 16px; }
.cm-btn[b-p79dy1dx5l] { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.cm-btn:disabled[b-p79dy1dx5l] { opacity: .55; cursor: default; }
.cm-btn-primary[b-p79dy1dx5l] { background: #2563eb; color: #fff; }
.cm-btn-primary:hover:not(:disabled)[b-p79dy1dx5l] { background: #1d4ed8; }

.cm-result[b-p79dy1dx5l] { margin-top: 16px; border-radius: 10px; padding: 12px 14px; border: 1px solid; }
.cm-result.ok[b-p79dy1dx5l] { background: #ecfdf5; border-color: #a7f3d0; }
.cm-result.ko[b-p79dy1dx5l] { background: #fef2f2; border-color: #fecaca; }
.cm-result-head[b-p79dy1dx5l] { font-weight: 700; font-size: .82rem; margin-bottom: 6px; }
.cm-result.ok .cm-result-head[b-p79dy1dx5l] { color: #166534; }
.cm-result.ko .cm-result-head[b-p79dy1dx5l] { color: #991b1b; }
.cm-result-msg[b-p79dy1dx5l] { font-size: .9rem; color: #374151; }
.cm-result-out[b-p79dy1dx5l] { margin: 8px 0 0; padding: 10px; background: #0f172a; color: #e2e8f0; border-radius: 8px; font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/ConexionesPage.razor.rz.scp.css */
/* Calca la hoja de EsquemaPage: el área Sistema comparte lenguaje visual. */

.cnx-page[b-zxablk79ku] {
    padding: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.cnx-header[b-zxablk79ku] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cnx-title[b-zxablk79ku] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.cnx-subtitle[b-zxablk79ku] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
    max-width: 70ch;
}

.cnx-acciones[b-zxablk79ku] {
    display: flex;
    gap: 8px;
}

.cnx-btn[b-zxablk79ku] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.cnx-btn:hover:not(:disabled)[b-zxablk79ku] { background: #f9fafb; }
.cnx-btn:disabled[b-zxablk79ku] { opacity: .5; cursor: not-allowed; }
.cnx-btn .material-symbols-rounded[b-zxablk79ku] { font-size: 18px; }

.cnx-btn-primario[b-zxablk79ku] {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

.cnx-btn-primario:hover:not(:disabled)[b-zxablk79ku] { background: #1a5fd0; }

.cnx-card[b-zxablk79ku] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.cnx-empty[b-zxablk79ku] {
    color: var(--text-muted, #6b7280);
    text-align: center;
}

.cnx-denied[b-zxablk79ku],
.cnx-nota[b-zxablk79ku] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cnx-denied-title[b-zxablk79ku] {
    font-weight: 600;
    margin-bottom: 2px;
}

.cnx-nota[b-zxablk79ku] {
    background: #f0f7ff;
    border-color: #bfdbfe;
    font-size: .9rem;
    line-height: 1.5;
}

.cnx-nota code[b-zxablk79ku],
.cnx-empty code[b-zxablk79ku] {
    background: rgba(0, 0, 0, .06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
}

/* ── Tabla ─────────────────────────────────────────────────────────────────── */

.cnx-tabla[b-zxablk79ku] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.cnx-tabla th[b-zxablk79ku] {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 8px 10px;
    white-space: nowrap;
}

.cnx-tabla td[b-zxablk79ku] {
    padding: 10px;
    border-bottom: 1px solid var(--border-soft, #f3f4f6);
    vertical-align: middle;
}

.cnx-tabla tr:last-child td[b-zxablk79ku] { border-bottom: none; }

/* Una conexión desactivada se resuelve como si no existiera: se ve apagada a propósito, para que
   no se confunda con una activa que simplemente no tiene clientes todavía. */
.cnx-inactiva td[b-zxablk79ku] { opacity: .55; }

.cnx-fila-acciones[b-zxablk79ku] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.cnx-btn-mini[b-zxablk79ku] {
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.cnx-btn-mini:hover:not(:disabled)[b-zxablk79ku] { background: #f9fafb; }
.cnx-btn-mini:disabled[b-zxablk79ku] { opacity: .4; cursor: not-allowed; }
.cnx-btn-mini .material-symbols-rounded[b-zxablk79ku] { font-size: 18px; }

.cnx-btn-peligro:hover:not(:disabled)[b-zxablk79ku] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.cnx-badge[b-zxablk79ku] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    background: #eef2ff;
    color: #3730a3;
}

.cnx-badge-ok[b-zxablk79ku] { background: #ecfdf5; color: #065f46; }
.cnx-badge-off[b-zxablk79ku] { background: #f3f4f6; color: #6b7280; }
.cnx-badge-libre[b-zxablk79ku] { background: #f3f4f6; color: #6b7280; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */

.cnx-modal-fondo[b-zxablk79ku] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.cnx-modal[b-zxablk79ku] {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.cnx-modal-title[b-zxablk79ku] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.cnx-field[b-zxablk79ku] {
    margin-bottom: 14px;
    flex: 1;
}

.cnx-field-fila[b-zxablk79ku] {
    display: flex;
    gap: 12px;
}

.cnx-field-corto[b-zxablk79ku] { max-width: 120px; }

.cnx-field label[b-zxablk79ku] {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.cnx-field input[b-zxablk79ku] {
    width: 100%;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .9rem;
}

.cnx-hint[b-zxablk79ku] {
    color: var(--text-muted, #6b7280);
    font-size: .8rem;
    margin-top: 4px;
    line-height: 1.4;
}

.cnx-hint code[b-zxablk79ku] {
    background: rgba(0, 0, 0, .06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Cuando la instalación no puede crear bases: se explica por qué, en vez de dejar un botón que
   fallaría. Enmarcado para que no se lea como una nota más del formulario. */
.cnx-hint-apagado[b-zxablk79ku] {
    background: #f9fafb;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.cnx-field-check label[b-zxablk79ku] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.cnx-field-check input[type="checkbox"][b-zxablk79ku] {
    width: auto;
    margin: 0;
}

.cnx-modal-acciones[b-zxablk79ku] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/CopiasEmpresaPage.razor.rz.scp.css */
.cpe-page[b-1f5j3z6sxp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    max-width: 1100px;
}

.cpe-header[b-1f5j3z6sxp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cpe-title[b-1f5j3z6sxp] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.cpe-subtitle[b-1f5j3z6sxp] {
    margin-top: 4px;
    color: var(--texto-secundario, #64748b);
    font-size: 0.9rem;
    max-width: 720px;
}

.cpe-card[b-1f5j3z6sxp] {
    background: var(--fondo-tarjeta, #fff);
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
}

.cpe-vacio[b-1f5j3z6sxp],
.cpe-nota[b-1f5j3z6sxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-secundario, #64748b);
}

.cpe-nota[b-1f5j3z6sxp] {
    font-size: 0.85rem;
}

.cpe-filtros[b-1f5j3z6sxp] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cpe-buscar[b-1f5j3z6sxp] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 260px;
}

.cpe-input[b-1f5j3z6sxp] {
    height: 34px;
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px;
}

.cpe-check[b-1f5j3z6sxp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.cpe-grupo[b-1f5j3z6sxp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpe-grupo-cabeza[b-1f5j3z6sxp] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
}

.cpe-grupo-titulo[b-1f5j3z6sxp] {
    font-weight: 600;
}

.cpe-grupo-resumen[b-1f5j3z6sxp] {
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.cpe-fila[b-1f5j3z6sxp] {
    border-left: 4px solid #2563eb;
}

.cpe-borrada[b-1f5j3z6sxp] {
    border-left-color: #94a3b8;
    opacity: 0.75;
}

.cpe-fila-cabeza[b-1f5j3z6sxp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.cpe-fila-titulo[b-1f5j3z6sxp] {
    display: flex;
    flex-direction: column;
}

.cpe-cuando[b-1f5j3z6sxp] {
    font-weight: 600;
}

.cpe-origen[b-1f5j3z6sxp],
.cpe-tamano[b-1f5j3z6sxp] {
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.cpe-motivo[b-1f5j3z6sxp] {
    margin-top: 6px;
    font-size: 0.85rem;
}

.cpe-aviso[b-1f5j3z6sxp] {
    margin-top: 8px;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
}

.cpe-tablas[b-1f5j3z6sxp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 0.8rem;
}

.cpe-fila-pie[b-1f5j3z6sxp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.cpe-hueco[b-1f5j3z6sxp] {
    flex: 1;
}

.cpe-btn[b-1f5j3z6sxp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px;
    background: var(--fondo-tarjeta, #fff);
    cursor: pointer;
    font-size: 0.8rem;
}

.cpe-btn .material-symbols-rounded[b-1f5j3z6sxp] {
    font-size: 18px;
}

.cpe-btn-peligro[b-1f5j3z6sxp] {
    color: #b91c1c;
    border-color: #fecaca;
}

.cpe-btn:disabled[b-1f5j3z6sxp] {
    opacity: 0.5;
    cursor: default;
}

.cpe-modal[b-1f5j3z6sxp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(460px, 80vw);
}

.cpe-campo[b-1f5j3z6sxp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cpe-modal-botones[b-1f5j3z6sxp] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .cpe-page[b-1f5j3z6sxp] {
        padding: 14px 16px;
    }

    .cpe-header[b-1f5j3z6sxp] {
        flex-direction: column;
    }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/CopiasSeguridadPage.razor.rz.scp.css */
/* Estilo de la familia «pantallas nuevas» (/ejercicios, /tipos-retencion, /percepciones): HTML
   nativo, sin Syncfusion, con CSS aislado y prefijo propio. La hoja está duplicada a propósito,
   como en el resto de la familia: hoy no existe una hoja común y factorizarla desde aquí sería un
   refactor transversal ajeno a esta pantalla. */

.copias-page[b-f9puwy4xr6],
.copias-page *[b-f9puwy4xr6],
.copias-page *[b-f9puwy4xr6]::before,
.copias-page *[b-f9puwy4xr6]::after {
    box-sizing: border-box;
}

.copias-page[b-f9puwy4xr6] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* Con el aviso de reinicio visible aparece una tercera fila, que no debe robar alto al contenido. */
.copias-page:has(.cp-reinicio)[b-f9puwy4xr6] {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

/* HEADER */

.cp-header[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

.cp-header-text[b-f9puwy4xr6] {
    min-width: 0;
    flex: 0 0 auto;
}

.cp-header.command-bar-host-collapsed .cp-header-text[b-f9puwy4xr6] {
    flex: 1 1 auto;
}

.cp-title[b-f9puwy4xr6] {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    overflow-wrap: break-word;
}

.cp-subtitle[b-f9puwy4xr6] {
    margin-top: 4px;
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.cp-header-actions[b-f9puwy4xr6] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* CARD BASE */

.cp-card[b-f9puwy4xr6] {
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cp-empty[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.cp-section-title[b-f9puwy4xr6] {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

/* ACCESO DENEGADO */

.cp-denied[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

    .cp-denied .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 26px;
        color: #9ca3af;
        flex: 0 0 auto;
    }

.cp-denied-title[b-f9puwy4xr6] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 2px;
}

/* AVISO DE REINICIO: es la consecuencia más importante de la pantalla, así que no es un toast
   —que desaparece— sino una tarjeta que se queda. */

.cp-reinicio[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.45;
}

    .cp-reinicio .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 24px;
        color: #d97706;
        flex: 0 0 auto;
    }

.cp-reinicio-title[b-f9puwy4xr6] {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 2px;
}

/* SALUD DE LAS COPIAS (CP1): antes, una instalación sin copia programada se veía igual que una
   protegida. El color es lo que se lee primero, así que lo lleva el estado y no el adorno. */

.cp-salud[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.cp-salud-texto[b-f9puwy4xr6] {
    min-width: 0;
}

.cp-salud-title[b-f9puwy4xr6] {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 3px;
}

.cp-salud-datos[b-f9puwy4xr6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: .85;
}

.cp-salud-aviso[b-f9puwy4xr6] {
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid currentColor;
    opacity: .9;
}

.cp-salud-ico[b-f9puwy4xr6] {
    font-size: 26px;
    flex: 0 0 auto;
}

.cp-salud-ok[b-f9puwy4xr6] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

    .cp-salud-ok .cp-salud-ico[b-f9puwy4xr6] {
        color: #16a34a;
    }

/* Amarillo y no rojo: hay copias, pero nadie garantiza que siga habiéndolas mañana. */
.cp-salud-flojo[b-f9puwy4xr6] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

    .cp-salud-flojo .cp-salud-ico[b-f9puwy4xr6] {
        color: #d97706;
    }

/* Rojo: no hay copias, o no se sabe si las hay. Es el único estado que exige actuar hoy. */
.cp-salud-mal[b-f9puwy4xr6] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

    .cp-salud-mal .cp-salud-ico[b-f9puwy4xr6] {
        color: #dc2626;
    }

/* PROGRAMACIÓN (CP2): vive dentro de la tarjeta de salud a propósito. La hora y «¿estamos
   protegidos?» son la misma pregunta, y separarlas obligaría a mirar en dos sitios. */

.cp-prog[b-f9puwy4xr6] {
    margin-top: 8px;
}

.cp-prog-fijada[b-f9puwy4xr6] {
    opacity: .85;
    font-size: 12px;
}

    .cp-prog-fijada code[b-f9puwy4xr6] {
        font-size: 11.5px;
        padding: 1px 4px;
        border-radius: 3px;
        background: rgba(0, 0, 0, .06);
    }

.cp-prog-btn[b-f9puwy4xr6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .cp-prog-btn .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 18px;
    }

.cp-prog-form[b-f9puwy4xr6] {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(0, 0, 0, .08);
}

.cp-prog-check[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
}

.cp-prog-campos[b-f9puwy4xr6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

    .cp-prog-campos .cp-field[b-f9puwy4xr6] {
        flex: 1 1 180px;
        min-width: 0;
    }

.cp-prog-error[b-f9puwy4xr6] {
    margin-top: 8px;
    color: #991b1b;
    font-size: 12px;
}

/* COPIA EN CURSO (CP0): un volcado grande tarda minutos y antes no se veía en ninguna parte —ni al
   recargar, ni desde otra pestaña, ni cuando lo lanzaba el worker nocturno—. */

.cp-encurso[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.45;
}

    .cp-encurso .cp-encurso-ico[b-f9puwy4xr6] {
        font-size: 24px;
        color: #2563eb;
        flex: 0 0 auto;
        animation: cp-girar-b-f9puwy4xr6 1.4s linear infinite;
    }

.cp-encurso-title[b-f9puwy4xr6] {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 2px;
}

/* El icono gira para que se distinga de un aviso estático: es lo que dice «esto sigue vivo». */
@keyframes cp-girar-b-f9puwy4xr6 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-encurso .cp-encurso-ico[b-f9puwy4xr6] {
        animation: none;
    }
}

/* PARTE DE LA ÚLTIMA COPIA: se enseña un rato tras terminar, para no obligar a buscar en la lista
   si salió bien. Pasados unos minutos deja de ser noticia y desaparece. */

.cp-parte-ok[b-f9puwy4xr6],
.cp-parte-mal[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.cp-parte-ok[b-f9puwy4xr6] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

    .cp-parte-ok .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 24px;
        color: #16a34a;
        flex: 0 0 auto;
    }

.cp-parte-mal[b-f9puwy4xr6] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

    .cp-parte-mal .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 24px;
        color: #dc2626;
        flex: 0 0 auto;
    }

/* MAIN GRID */

.cp-main[b-f9puwy4xr6] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

/* LISTA */

.cp-list-panel[b-f9puwy4xr6] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.cp-list-head[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-search[b-f9puwy4xr6] {
    position: relative;
    display: flex;
    align-items: center;
}

.cp-search-icon[b-f9puwy4xr6] {
    position: absolute;
    left: 9px;
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.cp-search-input[b-f9puwy4xr6] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    color: #1f2937;
    background: #f9fafb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .cp-search-input:focus[b-f9puwy4xr6] {
        outline: none;
        background: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

.cp-list[b-f9puwy4xr6] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cp-list[b-f9puwy4xr6]::-webkit-scrollbar {
        width: 6px;
    }

    .cp-list[b-f9puwy4xr6]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.cp-list-empty[b-f9puwy4xr6] {
    color: #9ca3af;
    font-size: 12.5px;
    padding: 12px 4px;
}

.cp-card-item[b-f9puwy4xr6] {
    width: 100%;
    min-height: 70px;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cp-card-item:hover[b-f9puwy4xr6] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .cp-card-item.active[b-f9puwy4xr6] {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }

.cp-card-item-main[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cp-card-ico[b-f9puwy4xr6] {
    font-size: 26px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 11px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cp-card-item-texts[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-card-item-name[b-f9puwy4xr6] {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-card-item-desc[b-f9puwy4xr6] {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.25;
}

.cp-card-item-side[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

/* BADGES */

.cp-badge[b-f9puwy4xr6] {
    font-size: 10.5px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.cp-badge-manual[b-f9puwy4xr6] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.cp-badge-auto[b-f9puwy4xr6] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* Copias que tomó el sistema para protegerse (antes de migrar o de restaurar). */
.cp-badge-sistema[b-f9puwy4xr6] {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

/* Fichero cuyo nombre no reconocemos: ni bueno ni malo, pero conviene que se note. */
.cp-badge-raro[b-f9puwy4xr6] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* DETALLE */

.cp-detail-panel[b-f9puwy4xr6] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.cp-tabs[b-f9puwy4xr6] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.cp-tab[b-f9puwy4xr6] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    color: #2563eb;
    cursor: default;
    border-bottom: 2px solid #2563eb;
    margin-bottom: -1px;
}

.cp-detail-scroll[b-f9puwy4xr6] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .cp-detail-scroll[b-f9puwy4xr6]::-webkit-scrollbar {
        width: 6px;
    }

    .cp-detail-scroll[b-f9puwy4xr6]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* METADATOS */

.cp-meta-grid[b-f9puwy4xr6] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
}

.cp-meta[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-meta-label[b-f9puwy4xr6] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    font-weight: 700;
}

.cp-meta-value[b-f9puwy4xr6] {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

/* CAMPOS */

.cp-field[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 720px;
}

    .cp-field label[b-f9puwy4xr6] {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
    }

.cp-input[b-f9puwy4xr6] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cp-input:focus[b-f9puwy4xr6] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .cp-input[readonly][b-f9puwy4xr6] {
        background: #f9fafb;
        color: #6b7280;
    }

.cp-field-hint[b-f9puwy4xr6] {
    font-size: 11px;
    color: #9ca3af;
}

.cp-nota[b-f9puwy4xr6] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
}

/* ALCANCE: a quién afecta restaurar. Va ANTES de los avisos y con peso visual propio, porque es el
   dato que cambia la decisión: la pregunta natural es «esto solo toca a mi empresa, ¿no?» y la
   respuesta es que no (SEG-19). */

.cp-alcance[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

/* Más de un cliente en la base: deja de ser informativo y pasa a ser una advertencia. */
.cp-alcance-varios[b-f9puwy4xr6] {
    border-color: #fde68a;
    background: #fffbeb;
}

.cp-alcance-head[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.35;
}

    .cp-alcance-head .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 20px;
        color: #64748b;
        flex: 0 0 auto;
    }

.cp-alcance-varios .cp-alcance-head[b-f9puwy4xr6] {
    color: #92400e;
}

    .cp-alcance-varios .cp-alcance-head .material-symbols-rounded[b-f9puwy4xr6] {
        color: #d97706;
    }

.cp-alcance-lista[b-f9puwy4xr6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-chip[b-f9puwy4xr6] {
    font-size: 11.5px;
    font-weight: 700;
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 3px 10px;
}

.cp-alcance-nota[b-f9puwy4xr6] {
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
}

/* AVISOS DE LA COMPROBACIÓN */

.cp-avisos[b-f9puwy4xr6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-aviso[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #374151;
    line-height: 1.4;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
}

    .cp-aviso .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 19px;
        color: #64748b;
        flex: 0 0 auto;
    }

.cp-aviso-malo[b-f9puwy4xr6] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

    .cp-aviso-malo .material-symbols-rounded[b-f9puwy4xr6] {
        color: #dc2626;
    }

/* ZONA DE ACCIONES DESTRUCTIVAS (tono ámbar, no alarmante) */

.cp-danger[b-f9puwy4xr6] {
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-danger-head[b-f9puwy4xr6] {
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
}

.cp-danger-row[b-f9puwy4xr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cp-danger-text[b-f9puwy4xr6] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}

.cp-danger-box[b-f9puwy4xr6] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-danger-warning[b-f9puwy4xr6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.35;
}

    .cp-danger-warning .material-symbols-rounded[b-f9puwy4xr6] {
        font-size: 20px;
        flex: 0 0 auto;
        color: #d97706;
    }

/* BOTONES */

.cp-detail-actions[b-f9puwy4xr6] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.cp-btn[b-f9puwy4xr6] {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .cp-btn:disabled[b-f9puwy4xr6] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.cp-btn-primary[b-f9puwy4xr6] {
    background: #2563eb;
    color: #ffffff;
}

    .cp-btn-primary:hover:not(:disabled)[b-f9puwy4xr6] {
        background: #1d4ed8;
    }

.cp-btn-ghost[b-f9puwy4xr6] {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

    .cp-btn-ghost:hover:not(:disabled)[b-f9puwy4xr6] {
        background: #f9fafb;
    }

.cp-btn-danger[b-f9puwy4xr6] {
    background: #ffffff;
    color: #b45309;
    border-color: #fcd34d;
}

    .cp-btn-danger:hover:not(:disabled)[b-f9puwy4xr6] {
        background: #fffbeb;
        border-color: #f59e0b;
    }

/* RESPONSIVE */

@media (max-width: 980px) {
    .cp-main[b-f9puwy4xr6] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/CorreoSistemaSalidaPage.razor.rz.scp.css */
/* Bandeja de salida del correo de sistema. Mismo lenguaje visual que el resto del área Sistema
   (AuditoriaPage/TenantsPage): tarjeta blanca, tabla compacta, badges de estado. */

/* A todo el ancho, como Técnicos: sin tope propio. */
/* Todo el alto de la pantalla: columna flex con el suelo en la pantalla; la tabla, la última, se queda
   con el alto que sobra (o crece si no cabe). */
.cs-page[b-ir25x391ue] {
    padding: 0;   /* como Clientes: el borde lo pone .main-body */
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Sin `flex-wrap`, como en Técnicos: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.cs-header[b-ir25x391ue] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 9px;
}

.cs-header-text[b-ir25x391ue] {
    flex: 1 1 auto;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.cs-header-actions[b-ir25x391ue] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.cs-title[b-ir25x391ue] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.cs-subtitle[b-ir25x391ue] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
    max-width: 760px;
}

.cs-check-enviados[b-ir25x391ue] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
    align-self: center;
}

.cs-btn[b-ir25x391ue] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.cs-btn:hover:not(:disabled)[b-ir25x391ue] { background: #f9fafb; }
.cs-btn:disabled[b-ir25x391ue] { opacity: .5; cursor: default; }
.cs-btn .material-symbols-rounded[b-ir25x391ue] { font-size: 18px; }
.cs-btn-ghost[b-ir25x391ue] { color: #6b7280; }

.cs-acciones[b-ir25x391ue] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cs-ocupado[b-ir25x391ue] {
    font-size: .85rem;
    color: #6b7280;
}

.cs-aviso[b-ir25x391ue] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .88rem;
    margin-bottom: 12px;
}

.cs-aviso .material-symbols-rounded[b-ir25x391ue] { font-size: 20px; }

.cs-mensaje[b-ir25x391ue] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .88rem;
    margin-bottom: 12px;
}

.cs-mensaje-error[b-ir25x391ue] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.cs-card[b-ir25x391ue] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

/* Contenedor de la TablaPaginada (marco, cabecera con orden, filas y paginador: los pinta ella).
   Flex-columna, que es lo que espera .tp-panel para repartirse el alto. */
.cs-tabla[b-ir25x391ue] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.cs-page[b-ir25x391ue]  .tp-panel { min-height: auto; }

.cs-empty[b-ir25x391ue] {
    padding: 28px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.cs-denied[b-ir25x391ue] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    justify-content: center;
}

.cs-denied .material-symbols-rounded[b-ir25x391ue] { font-size: 28px; color: #9ca3af; }
.cs-denied-title[b-ir25x391ue] { font-weight: 600; }

/* Las filas y celdas las pinta TablaPaginada: de ahí el ::deep. */
.cs-tabla[b-ir25x391ue]  tr.cs-fila-fallida > td { background: #fffbfb; }
.cs-tabla[b-ir25x391ue]  tr.cs-fila-sel > td { background: #eff6ff; }
.cs-tabla[b-ir25x391ue]  tr.cs-fila-sel > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }

.cs-tabla[b-ir25x391ue]  td.cs-destinatario { white-space: nowrap; font-weight: 500; }

.cs-tabla[b-ir25x391ue]  td.cs-error {
    color: #6b7280;
    word-break: break-word;
}

.cs-tabla[b-ir25x391ue]  .cs-ok { color: #166534; }
.cs-tabla[b-ir25x391ue]  .cs-neutro { color: #9ca3af; }

.cs-tabla[b-ir25x391ue]  .cs-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cs-tabla[b-ir25x391ue]  .cs-badge-ok { background: #dcfce7; color: #166534; }
.cs-tabla[b-ir25x391ue]  .cs-badge-ko { background: #fee2e2; color: #991b1b; }
.cs-tabla[b-ir25x391ue]  .cs-badge-pendiente { background: #fef3c7; color: #92400e; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/DatosPruebaPage.razor.rz.scp.css */
.dp-page[b-umdbaxy4wi] { padding: 0; }   /* como Clientes: el borde lo pone .main-body */

.dp-header[b-umdbaxy4wi] { margin-bottom: 9px; }
.dp-title[b-umdbaxy4wi] { font-size: 1.35rem; font-weight: 600; margin: 0; }
.dp-subtitle[b-umdbaxy4wi] { color: #6b7280; font-size: .9rem; margin-top: 2px; max-width: 70ch; }

.dp-card[b-umdbaxy4wi] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.dp-empty[b-umdbaxy4wi] { padding: 28px; text-align: center; color: #6b7280; }
.dp-denied[b-umdbaxy4wi] { display: flex; align-items: center; gap: 12px; justify-content: center; }
.dp-denied .material-symbols-rounded[b-umdbaxy4wi] { font-size: 28px; color: #9ca3af; }
.dp-denied-title[b-umdbaxy4wi] { font-weight: 600; }

.dp-form[b-umdbaxy4wi] { padding: 20px 22px; display: flex; flex-direction: column; gap: 20px; }

.dp-campo[b-umdbaxy4wi] { display: flex; flex-direction: column; gap: 9px; }
.dp-campo > label[b-umdbaxy4wi],
.dp-campo-titulo[b-umdbaxy4wi] { font-size: .82rem; font-weight: 600; color: #374151; }

.dp-input[b-umdbaxy4wi] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }
.dp-input:focus[b-umdbaxy4wi] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Los tres niveles, en fila: se comparan de un vistazo. */

.dp-niveles[b-umdbaxy4wi] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.dp-nivel[b-umdbaxy4wi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
}

.dp-nivel:hover[b-umdbaxy4wi] { background: #f9fafb; }
.dp-nivel-sel[b-umdbaxy4wi] { border-color: #bfdbfe; background: #eff6ff; }

.dp-nivel input[b-umdbaxy4wi] { margin-top: 3px; flex: 0 0 auto; }
.dp-nivel b[b-umdbaxy4wi] { display: block; font-size: .88rem; font-weight: 600; color: #111827; }
.dp-nivel small[b-umdbaxy4wi] { display: block; font-size: .76rem; color: #6b7280; line-height: 1.35; margin-top: 2px; }

/* Opciones en columna (criterio, modo, vaciado) */

.dp-op[b-umdbaxy4wi] { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.dp-op input[b-umdbaxy4wi] { margin-top: 3px; flex: 0 0 auto; }
.dp-op b[b-umdbaxy4wi] { display: block; font-size: .88rem; font-weight: 600; color: #111827; }
.dp-op small[b-umdbaxy4wi] { display: block; font-size: .8rem; color: #6b7280; line-height: 1.45; margin-top: 2px; max-width: 76ch; }
.dp-op-check b[b-umdbaxy4wi] { color: #92400e; }

/* Lo que va a pasar */

.dp-resumen[b-umdbaxy4wi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: .86rem;
    color: #374151;
    line-height: 1.45;
}

.dp-resumen .material-symbols-rounded[b-umdbaxy4wi] { font-size: 20px; color: #6b7280; flex: 0 0 auto; }

.dp-resumen-ojo[b-umdbaxy4wi] { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }
.dp-resumen-ojo .material-symbols-rounded[b-umdbaxy4wi] { color: #dc2626; }

/* Acciones */

.dp-acciones[b-umdbaxy4wi] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-confirma[b-umdbaxy4wi] { font-size: .85rem; color: #7f1d1d; flex: 1 1 260px; }

.dp-btn[b-umdbaxy4wi] { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.dp-btn:disabled[b-umdbaxy4wi] { opacity: .55; cursor: default; }
.dp-btn-primary[b-umdbaxy4wi] { background: #2563eb; color: #fff; }
.dp-btn-primary:hover:not(:disabled)[b-umdbaxy4wi] { background: #1d4ed8; }
.dp-btn-ghost[b-umdbaxy4wi] { background: #fff; color: #374151; border-color: #e5e7eb; }
.dp-btn-ghost:hover:not(:disabled)[b-umdbaxy4wi] { background: #f9fafb; }

/* Estado de la tanda (CM5c) */

.dp-tanda[b-umdbaxy4wi] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.dp-tanda .material-symbols-rounded[b-umdbaxy4wi] { font-size: 22px; flex: 0 0 auto; margin-top: 1px; }
.dp-tanda b[b-umdbaxy4wi] { display: block; font-size: .9rem; }
.dp-tanda small[b-umdbaxy4wi] { display: block; font-size: .8rem; color: #6b7280; margin-top: 3px; line-height: 1.45; }

.dp-tanda-curso[b-umdbaxy4wi] { border-color: #bfdbfe; background: #eff6ff; }
.dp-tanda-curso .material-symbols-rounded[b-umdbaxy4wi] { color: #2563eb; }
.dp-tanda-curso b[b-umdbaxy4wi] { color: #1e40af; }

.dp-tanda-ok[b-umdbaxy4wi] { border-color: #a7f3d0; background: #ecfdf5; }
.dp-tanda-ok .material-symbols-rounded[b-umdbaxy4wi] { color: #16a34a; }
.dp-tanda-ok b[b-umdbaxy4wi] { color: #166534; }

.dp-tanda-parada[b-umdbaxy4wi] { border-color: #fde68a; background: #fffbeb; }
.dp-tanda-parada .material-symbols-rounded[b-umdbaxy4wi] { color: #d97706; }
.dp-tanda-parada b[b-umdbaxy4wi] { color: #92400e; }

.dp-tanda-error[b-umdbaxy4wi] { border-color: #fecaca; background: #fef2f2; }
.dp-tanda-error .material-symbols-rounded[b-umdbaxy4wi] { color: #dc2626; }
.dp-tanda-error b[b-umdbaxy4wi] { color: #991b1b; }

/* Progreso y registro */

.dp-trabajando[b-umdbaxy4wi] { display: flex; align-items: center; gap: 8px; font-size: .87rem; color: #374151; }
.dp-girando[b-umdbaxy4wi] { animation: dp-spin-b-umdbaxy4wi 1s linear infinite; }

@keyframes dp-spin-b-umdbaxy4wi { to { transform: rotate(360deg); } }

.dp-log[b-umdbaxy4wi] {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/DiagnosticoPage.razor.rz.scp.css */
.dg-page[b-jlhsc8bva0] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dg-header[b-jlhsc8bva0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.dg-header-text[b-jlhsc8bva0] {
    flex: 1 1 auto;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.dg-header-actions[b-jlhsc8bva0] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.dg-title[b-jlhsc8bva0] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.dg-subtitle[b-jlhsc8bva0] {
    margin-top: 4px;
    color: var(--text-muted, #6b7280);
    font-size: 0.875rem;
    max-width: 780px;
}

.dg-card[b-jlhsc8bva0] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    overflow-x: auto;
}

.dg-empty[b-jlhsc8bva0],
.dg-denied[b-jlhsc8bva0] {
    color: var(--text-muted, #6b7280);
    text-align: center;
    padding: 28px;
}

.dg-denied[b-jlhsc8bva0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
}

.dg-denied .material-symbols-rounded[b-jlhsc8bva0] {
    font-size: 2rem;
    color: var(--warning, #d97706);
}

.dg-denied-title[b-jlhsc8bva0] {
    font-weight: 600;
    color: var(--text, #111827);
}

/* --- Filtros --- */
.dg-filtros[b-jlhsc8bva0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.dg-field[b-jlhsc8bva0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}

.dg-field-grow[b-jlhsc8bva0] {
    flex: 1 1 220px;
}

.dg-input[b-jlhsc8bva0] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.875rem;
    background: var(--surface, #fff);
    color: var(--text, #111827);
    min-width: 120px;
}

.dg-input:focus[b-jlhsc8bva0] {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.dg-btn[b-jlhsc8bva0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: var(--surface, #fff);
    color: var(--text, #111827);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.875rem;
    cursor: pointer;
}

.dg-btn:hover:not(:disabled)[b-jlhsc8bva0] {
    background: var(--surface-hover, #f3f4f6);
}

.dg-btn:disabled[b-jlhsc8bva0] {
    opacity: 0.5;
    cursor: default;
}

.dg-btn-primary[b-jlhsc8bva0] {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}

.dg-btn-primary:hover:not(:disabled)[b-jlhsc8bva0] {
    background: var(--primary-dark, #1d4ed8);
}

.dg-btn .material-symbols-rounded[b-jlhsc8bva0] {
    font-size: 1.1rem;
}

/* --- Paginación --- */
.dg-paginacion[b-jlhsc8bva0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.8125rem;
    color: var(--text-muted, #6b7280);
}

.dg-pager[b-jlhsc8bva0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Tabla --- */
.dg-table[b-jlhsc8bva0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dg-table th[b-jlhsc8bva0] {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted, #6b7280);
    font-weight: 600;
    border-bottom: 1px solid var(--border, #e5e7eb);
    white-space: nowrap;
}

.dg-row td[b-jlhsc8bva0] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #f1f2f4);
    vertical-align: top;
}

.dg-row[b-jlhsc8bva0] {
    cursor: pointer;
}

.dg-row:hover[b-jlhsc8bva0] {
    background: var(--surface-hover, #f9fafb);
}

.dg-row-err[b-jlhsc8bva0] {
    background: rgba(220, 38, 38, 0.04);
}

.dg-nowrap[b-jlhsc8bva0] {
    white-space: nowrap;
}

.dg-origen[b-jlhsc8bva0] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #6b7280);
}

.dg-msg[b-jlhsc8bva0] {
    max-width: 520px;
}

.dg-ref code[b-jlhsc8bva0] {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}

/* --- Detalle expandido --- */
.dg-detalle-row td[b-jlhsc8bva0] {
    background: var(--surface-sunken, #f8fafc);
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 12px 14px;
}

.dg-detalle[b-jlhsc8bva0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8125rem;
}

.dg-stack[b-jlhsc8bva0] {
    margin: 0;
    padding: 12px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre;
}

.dg-empty-inline[b-jlhsc8bva0] {
    color: var(--text-muted, #6b7280);
}

/* --- Badges de nivel --- */
.dg-badge[b-jlhsc8bva0] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.dg-badge-information[b-jlhsc8bva0] { background: #e0f2fe; color: #0369a1; }
.dg-badge-debug[b-jlhsc8bva0]       { background: #ede9fe; color: #6d28d9; }
.dg-badge-verbose[b-jlhsc8bva0]     { background: #f1f5f9; color: #475569; }
.dg-badge-warning[b-jlhsc8bva0]     { background: #fef3c7; color: #b45309; }
.dg-badge-error[b-jlhsc8bva0]       { background: #fee2e2; color: #b91c1c; }
.dg-badge-fatal[b-jlhsc8bva0]       { background: #7f1d1d; color: #fff; }

@media (prefers-color-scheme: dark) {
    .dg-badge-information[b-jlhsc8bva0] { background: #082f49; color: #7dd3fc; }
    .dg-badge-debug[b-jlhsc8bva0]       { background: #2e1065; color: #c4b5fd; }
    .dg-badge-verbose[b-jlhsc8bva0]     { background: #1e293b; color: #cbd5e1; }
    .dg-badge-warning[b-jlhsc8bva0]     { background: #451a03; color: #fcd34d; }
    .dg-badge-error[b-jlhsc8bva0]       { background: #450a0a; color: #fca5a5; }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/ElevacionPage.razor.rz.scp.css */
.el-page[b-404isrlahg] { display: flex; justify-content: center; padding: 48px 24px; }
.el-card[b-404isrlahg] { width: 100%; max-width: 440px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.el-head[b-404isrlahg] { display: flex; align-items: flex-start; gap: 12px; }
.el-head-ico[b-404isrlahg] { font-size: 30px; color: #2563eb; }
.el-title[b-404isrlahg] { font-size: 1.25rem; font-weight: 700; margin: 0; }
.el-sub[b-404isrlahg] { color: #6b7280; font-size: .82rem; margin-top: 2px; }

.el-field[b-404isrlahg] { display: flex; flex-direction: column; gap: 5px; }
.el-field label[b-404isrlahg] { font-size: .8rem; font-weight: 600; color: #374151; }
.el-input[b-404isrlahg] { padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 1rem; letter-spacing: .12em; }
.el-input:focus[b-404isrlahg] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.el-hint[b-404isrlahg] { font-size: .76rem; color: #9ca3af; }

.el-activo[b-404isrlahg] { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #374151; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 10px 12px; }
.el-badge[b-404isrlahg] { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; }

.el-btn[b-404isrlahg] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.el-btn:disabled[b-404isrlahg] { opacity: .55; cursor: default; }
.el-btn-primary[b-404isrlahg] { background: #2563eb; color: #fff; }
.el-btn-primary:hover:not(:disabled)[b-404isrlahg] { background: #1d4ed8; }
.el-btn-ghost[b-404isrlahg] { background: #fff; border-color: #d1d5db; color: #374151; }
.el-btn-ghost:hover:not(:disabled)[b-404isrlahg] { background: #f3f4f6; }

.el-link[b-404isrlahg] { font-size: .82rem; color: #2563eb; text-decoration: none; align-self: flex-start; }
.el-link:hover[b-404isrlahg] { text-decoration: underline; }

/* OP3: poner o cambiar el PIN propio. */
.el-pin[b-404isrlahg] { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
.el-pin summary[b-404isrlahg] { cursor: pointer; font-size: .86rem; font-weight: 600; color: #374151; }
.el-pin[open] summary[b-404isrlahg] { margin-bottom: 4px; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/EmpresaDemoPage.razor.rz.scp.css */
.dp-page[b-3fi94cfoni] { padding: 24px 28px; max-width: 900px; margin: 0 auto; }

.dp-header[b-3fi94cfoni] { margin-bottom: 18px; }
.dp-title[b-3fi94cfoni] { font-size: 1.35rem; font-weight: 600; margin: 0; }
.dp-subtitle[b-3fi94cfoni] { color: #6b7280; font-size: .9rem; margin-top: 2px; max-width: 70ch; }

.dp-card[b-3fi94cfoni] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.dp-empty[b-3fi94cfoni] { padding: 28px; text-align: center; color: #6b7280; }
.dp-denied[b-3fi94cfoni] { display: flex; align-items: center; gap: 12px; justify-content: center; }
.dp-denied .material-symbols-rounded[b-3fi94cfoni] { font-size: 28px; color: #9ca3af; }
.dp-denied-title[b-3fi94cfoni] { font-weight: 600; }

.dp-form[b-3fi94cfoni] { padding: 20px 22px; display: flex; flex-direction: column; gap: 20px; }

.dp-campo[b-3fi94cfoni] { display: flex; flex-direction: column; gap: 9px; }
.dp-campo > label[b-3fi94cfoni],
.dp-campo-titulo[b-3fi94cfoni] { font-size: .82rem; font-weight: 600; color: #374151; }

.dp-input[b-3fi94cfoni] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }
.dp-input:focus[b-3fi94cfoni] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Los tres niveles, en fila: se comparan de un vistazo. */

.dp-niveles[b-3fi94cfoni] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.dp-nivel[b-3fi94cfoni] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
}

.dp-nivel:hover[b-3fi94cfoni] { background: #f9fafb; }
.dp-nivel-sel[b-3fi94cfoni] { border-color: #bfdbfe; background: #eff6ff; }

.dp-nivel input[b-3fi94cfoni] { margin-top: 3px; flex: 0 0 auto; }
.dp-nivel b[b-3fi94cfoni] { display: block; font-size: .88rem; font-weight: 600; color: #111827; }
.dp-nivel small[b-3fi94cfoni] { display: block; font-size: .76rem; color: #6b7280; line-height: 1.35; margin-top: 2px; }

/* Opciones en columna (criterio, modo, vaciado) */

.dp-op[b-3fi94cfoni] { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.dp-op input[b-3fi94cfoni] { margin-top: 3px; flex: 0 0 auto; }
.dp-op b[b-3fi94cfoni] { display: block; font-size: .88rem; font-weight: 600; color: #111827; }
.dp-op small[b-3fi94cfoni] { display: block; font-size: .8rem; color: #6b7280; line-height: 1.45; margin-top: 2px; max-width: 76ch; }
.dp-op-check b[b-3fi94cfoni] { color: #92400e; }

/* Lo que va a pasar */

.dp-resumen[b-3fi94cfoni] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: .86rem;
    color: #374151;
    line-height: 1.45;
}

.dp-resumen .material-symbols-rounded[b-3fi94cfoni] { font-size: 20px; color: #6b7280; flex: 0 0 auto; }

.dp-resumen-ojo[b-3fi94cfoni] { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }
.dp-resumen-ojo .material-symbols-rounded[b-3fi94cfoni] { color: #dc2626; }

.dp-fichas[b-3fi94cfoni] { margin: 6px 0 0; padding-left: 18px; }

/* Acciones */

.dp-acciones[b-3fi94cfoni] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-confirma[b-3fi94cfoni] { font-size: .85rem; color: #7f1d1d; flex: 1 1 260px; }

.dp-btn[b-3fi94cfoni] { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.dp-btn:disabled[b-3fi94cfoni] { opacity: .55; cursor: default; }
.dp-btn-primary[b-3fi94cfoni] { background: #2563eb; color: #fff; }
.dp-btn-primary:hover:not(:disabled)[b-3fi94cfoni] { background: #1d4ed8; }
.dp-btn-ghost[b-3fi94cfoni] { background: #fff; color: #374151; border-color: #e5e7eb; }
.dp-btn-ghost:hover:not(:disabled)[b-3fi94cfoni] { background: #f9fafb; }

/* Estado de la tanda (CM5c) */

.dp-tanda[b-3fi94cfoni] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.dp-tanda .material-symbols-rounded[b-3fi94cfoni] { font-size: 22px; flex: 0 0 auto; margin-top: 1px; }
.dp-tanda b[b-3fi94cfoni] { display: block; font-size: .9rem; }
.dp-tanda small[b-3fi94cfoni] { display: block; font-size: .8rem; color: #6b7280; margin-top: 3px; line-height: 1.45; }

.dp-tanda-curso[b-3fi94cfoni] { border-color: #bfdbfe; background: #eff6ff; }
.dp-tanda-curso .material-symbols-rounded[b-3fi94cfoni] { color: #2563eb; }
.dp-tanda-curso b[b-3fi94cfoni] { color: #1e40af; }

.dp-tanda-ok[b-3fi94cfoni] { border-color: #a7f3d0; background: #ecfdf5; }
.dp-tanda-ok .material-symbols-rounded[b-3fi94cfoni] { color: #16a34a; }
.dp-tanda-ok b[b-3fi94cfoni] { color: #166534; }

.dp-tanda-parada[b-3fi94cfoni] { border-color: #fde68a; background: #fffbeb; }
.dp-tanda-parada .material-symbols-rounded[b-3fi94cfoni] { color: #d97706; }
.dp-tanda-parada b[b-3fi94cfoni] { color: #92400e; }

.dp-tanda-error[b-3fi94cfoni] { border-color: #fecaca; background: #fef2f2; }
.dp-tanda-error .material-symbols-rounded[b-3fi94cfoni] { color: #dc2626; }
.dp-tanda-error b[b-3fi94cfoni] { color: #991b1b; }

/* Progreso y registro */

.dp-trabajando[b-3fi94cfoni] { display: flex; align-items: center; gap: 8px; font-size: .87rem; color: #374151; }
.dp-girando[b-3fi94cfoni] { animation: dp-spin-b-3fi94cfoni 1s linear infinite; }

@keyframes dp-spin-b-3fi94cfoni { to { transform: rotate(360deg); } }

.dp-log[b-3fi94cfoni] {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/EsquemaPage.razor.rz.scp.css */
/* Calca la hoja de AuditoriaPage: el área Sistema comparte lenguaje visual. */

.esq-page[b-6g10h3j2ey] {
    padding: 0;
}

.esq-header[b-6g10h3j2ey] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 9px;
}

.esq-header-text[b-6g10h3j2ey] { flex: 1 1 auto; min-width: 0; }

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.esq-header-actions[b-6g10h3j2ey] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.esq-title[b-6g10h3j2ey] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.esq-subtitle[b-6g10h3j2ey] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
}

.esq-subtitulo[b-6g10h3j2ey] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.esq-acciones[b-6g10h3j2ey] {
    display: flex;
    gap: 8px;
}

.esq-btn[b-6g10h3j2ey] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.esq-btn:hover:not(:disabled)[b-6g10h3j2ey] { background: #f9fafb; }
.esq-btn:disabled[b-6g10h3j2ey] { opacity: .5; cursor: not-allowed; }
.esq-btn .material-symbols-rounded[b-6g10h3j2ey] { font-size: 18px; }

.esq-btn-primario[b-6g10h3j2ey] {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

.esq-btn-primario:hover:not(:disabled)[b-6g10h3j2ey] { background: #1a5fd0; }

.esq-card[b-6g10h3j2ey] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.esq-empty[b-6g10h3j2ey] {
    padding: 28px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.esq-denied[b-6g10h3j2ey],
.esq-aviso[b-6g10h3j2ey] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.esq-denied-title[b-6g10h3j2ey],
.esq-aviso-title[b-6g10h3j2ey] {
    font-weight: 600;
}

.esq-aviso[b-6g10h3j2ey] {
    background: #fff8e6;
    border-color: #f3d68a;
}

/* Manual de actuación: azul informativo, distinto del ámbar de aviso — no es una alarma más, es la
   guía de qué hacer con ella. */
.esq-manual[b-6g10h3j2ey] {
    background: #f5f9ff;
    border-color: #bcd7f5;
}

.esq-manual-title[b-6g10h3j2ey] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
}

.esq-manual-pasos[b-6g10h3j2ey] {
    margin: 0 0 14px;
    padding-left: 1.25rem;
    line-height: 1.7;
}

.esq-manual-pasos li + li[b-6g10h3j2ey] {
    margin-top: 6px;
}

.esq-manual-nota[b-6g10h3j2ey] {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.6;
    color: #445;
}

.esq-resumen[b-6g10h3j2ey] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.esq-version[b-6g10h3j2ey] {
    color: var(--text-muted, #6b7280);
    font-size: .85rem;
}

.esq-table[b-6g10h3j2ey] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.esq-table th[b-6g10h3j2ey],
.esq-table td[b-6g10h3j2ey] {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #eef0f3);
    vertical-align: top;
}

.esq-table th[b-6g10h3j2ey] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.esq-fila-ko[b-6g10h3j2ey] { background: #fff6f6; }

.esq-detalle[b-6g10h3j2ey] {
    color: var(--text-muted, #52606d);
    word-break: break-word;
}

.esq-badge[b-6g10h3j2ey] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.esq-badge-ok[b-6g10h3j2ey] { background: #e6f6ec; color: #146c2e; }
.esq-badge-ko[b-6g10h3j2ey] { background: #fdeaea; color: #98232c; }

.esq-lista[b-6g10h3j2ey] {
    margin: 0;
    padding-left: 18px;
    font-size: .9rem;
    line-height: 1.7;
}

.esq-error[b-6g10h3j2ey] {
    background: #fdeaea;
    color: #98232c;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: .9rem;
}

.esq-error-inline[b-6g10h3j2ey] { color: #98232c; }

/* El SQL a la vista (R4). Scroll propio: un guion de migración es largo y no debe estirar la página. */
.esq-sql[b-6g10h3j2ey] {
    background: #1e2430;
    color: #e6e9ef;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0;
    max-height: 420px;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.55;
    white-space: pre;
}

/* Confirmación de la reparación del historial (R3): escribir el nombre de la base. */
.esq-input[b-6g10h3j2ey] {
    width: 100%;
    max-width: 320px;
    padding: 7px 10px;
    border: 1px solid #c9ced6;
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
}

.esq-input:focus[b-6g10h3j2ey] {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .15);
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/FormatosComunesPage.razor.rz.scp.css */
.fc-gate[b-pnxaph2kdk] { padding: 2rem; color: #6b7280; }
/* Todo el ancho de la pantalla, como el resto de Sistema: el borde lo pone .main-body. */
.fc-page[b-pnxaph2kdk] { padding: 0 0 3rem; }
.fc-page h1[b-pnxaph2kdk] { font-size: 1.35rem; margin: 0 0 0.4rem; }
.fc-intro[b-pnxaph2kdk] { color: #4b5563; font-size: 0.85rem; margin: 0 0 1rem; }

.fc-filtros[b-pnxaph2kdk] { display: flex; gap: 8px; margin-bottom: 0.75rem; flex-wrap: wrap; }
.fc-buscar[b-pnxaph2kdk] { flex: 1 1 280px; height: 34px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 8px; }
.fc-filtros select[b-pnxaph2kdk] { height: 34px; border-radius: 8px; }

.fc-aviso[b-pnxaph2kdk] { background: #fef3c7; color: #92400e; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }
.fc-nota[b-pnxaph2kdk] { color: #6b7280; font-size: 0.85rem; }

.fc-rejilla[b-pnxaph2kdk] { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .fc-rejilla[b-pnxaph2kdk] { grid-template-columns: 1fr; } }

.fc-lista[b-pnxaph2kdk] { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; }
.fc-fila[b-pnxaph2kdk] { text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.fc-fila:hover[b-pnxaph2kdk] { border-color: #93c5fd; }
.fc-fila.sel[b-pnxaph2kdk] { border-color: #2563eb; background: #eff6ff; }
.fc-fila small[b-pnxaph2kdk] { color: #6b7280; font-size: 0.72rem; }
.fc-fila.fc-estado-2[b-pnxaph2kdk] { opacity: 0.55; }

.fc-ficha[b-pnxaph2kdk] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; background: #fff; }
.fc-ficha h2[b-pnxaph2kdk] { font-size: 1.1rem; margin: 0 0 0.2rem; }
.fc-ficha h3[b-pnxaph2kdk] { font-size: 0.9rem; margin: 1rem 0 0.4rem; }
.fc-datos[b-pnxaph2kdk] { color: #4b5563; font-size: 0.82rem; margin: 0; }
.fc-huellas[b-pnxaph2kdk] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.fc-huellas code[b-pnxaph2kdk] { background: #f3f4f6; border-radius: 6px; padding: 1px 6px; }
.fc-huellas small[b-pnxaph2kdk], .fc-variante small[b-pnxaph2kdk] { color: #6b7280; }
.fc-tipo[b-pnxaph2kdk] { display: inline-block; min-width: 9ch; color: #6b7280; font-size: 0.72rem; }
.fc-variante[b-pnxaph2kdk] { font-size: 0.82rem; margin-bottom: 4px; }

.fc-acciones[b-pnxaph2kdk] { display: flex; gap: 8px; margin-top: 1rem; }
.fc-btn[b-pnxaph2kdk] { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.fc-btn-primario[b-pnxaph2kdk] { background: #2563eb; border-color: #2563eb; color: #fff; }
.fc-btn-peligro[b-pnxaph2kdk] { border-color: #fca5a5; color: #b91c1c; }
.fc-btn:disabled[b-pnxaph2kdk] { opacity: 0.5; cursor: default; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/FormatosTecnicosPage.razor.rz.scp.css */
/* Todo el ancho de la pantalla, como el resto de Sistema (Auditoría, Trabajos largos): el borde lo pone
   .main-body. Cabecera con el título a la izquierda y la barra de comandos a la derecha. */
.ft-page[b-wuy8jf9745] {
    padding: 0;
    box-sizing: border-box;
}

.ft-header[b-wuy8jf9745] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 4px;
}

.ft-header-text[b-wuy8jf9745] {
    flex: 1 1 auto;
    min-width: 0;
}

/* La barra es de otro componente: sin ::deep la regla no le llegaría. */
.ft-header[b-wuy8jf9745]  .ft-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.ft-title[b-wuy8jf9745] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.ft-subtitle[b-wuy8jf9745] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-bottom: 14px;
}

.ft-acciones-hoja[b-wuy8jf9745] {
    margin-top: 1rem;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/ImpuestosEstandarPage.razor.rz.scp.css */
.ie-gate[b-jaya4uzi57] { padding: 2rem; color: var(--text-secondary, #6b7280); }

/* Todo el ancho de la pantalla, como el resto de Sistema: el borde lo pone .main-body. */
.ie-page[b-jaya4uzi57] { padding: 0; }
.ie-page h1[b-jaya4uzi57] { font-size: 1.5rem; margin: 0 0 .25rem; }
.ie-intro[b-jaya4uzi57] { color: var(--text-secondary, #6b7280); margin: 0 0 1rem; }

.ie-pestanas[b-jaya4uzi57] { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.ie-pestanas button[b-jaya4uzi57] { background: none; border: none; padding: .5rem .75rem; cursor: pointer; color: var(--text-secondary, #6b7280); border-bottom: 2px solid transparent; }
.ie-pestanas button.activa[b-jaya4uzi57] { color: var(--primary, #1d4ed8); border-bottom-color: var(--primary, #1d4ed8); font-weight: 600; }

.ie-rejilla[b-jaya4uzi57] { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ie-rejilla[b-jaya4uzi57] { grid-template-columns: 1fr; } }

.ie-lista[b-jaya4uzi57] { display: flex; flex-direction: column; gap: .4rem; background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: .75rem; }
.ie-lista select[b-jaya4uzi57] { padding: .4rem; border-radius: 6px; border: 1px solid var(--border-color, #d1d5db); margin-bottom: .25rem; }

.ie-fila[b-jaya4uzi57] { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; text-align: left; gap: 0 .5rem; padding: .5rem .6rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; }
.ie-fila strong[b-jaya4uzi57] { grid-row: span 2; align-self: center; font-size: 1.05rem; }
.ie-fila small[b-jaya4uzi57] { color: var(--text-secondary, #6b7280); }
.ie-fila.sel[b-jaya4uzi57] { border-color: var(--primary, #1d4ed8); background: var(--primary-soft, #eff6ff); }
.ie-fila.inactivo[b-jaya4uzi57] { opacity: .55; }

.ie-ficha[b-jaya4uzi57] { background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: 1rem; }
.ie-campos[b-jaya4uzi57] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.ie-campos label[b-jaya4uzi57] { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-secondary, #4b5563); }
.ie-campos label.ancho[b-jaya4uzi57], .ie-campos label.ie-check[b-jaya4uzi57] { grid-column: 1 / -1; }
.ie-campos input[b-jaya4uzi57], .ie-campos select[b-jaya4uzi57] { padding: .45rem .55rem; border: 1px solid var(--border-color, #d1d5db); border-radius: 6px; font-size: .95rem; color: var(--text-primary, #111827); background: var(--surface, #fff); }
.ie-campos input:disabled[b-jaya4uzi57] { background: var(--surface-muted, #f3f4f6); }
.ie-check[b-jaya4uzi57] { flex-direction: row !important; align-items: center; gap: .5rem !important; }

.ie-acciones[b-jaya4uzi57] { margin-top: 1rem; display: flex; gap: .5rem; }
.ie-btn[b-jaya4uzi57] { padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--border-color, #d1d5db); background: var(--surface, #fff); cursor: pointer; }
.ie-btn-primario[b-jaya4uzi57] { background: var(--primary, #1d4ed8); color: #fff; border-color: var(--primary, #1d4ed8); }
.ie-btn:disabled[b-jaya4uzi57] { opacity: .5; cursor: default; }
.ie-nota[b-jaya4uzi57] { color: var(--text-secondary, #6b7280); }
/* _content/ErpPowergest/Presentation/Sistema/Pages/InstanciasPage.razor.rz.scp.css */
/* Calca la hoja de ConexionesPage: el área Sistema comparte lenguaje visual. */

.ins-page[b-r2wmnlzcxn] {
    padding: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.ins-header[b-r2wmnlzcxn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ins-title[b-r2wmnlzcxn] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.ins-subtitle[b-r2wmnlzcxn] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
    max-width: 70ch;
}

.ins-acciones[b-r2wmnlzcxn] {
    display: flex;
    gap: 8px;
}

.ins-btn[b-r2wmnlzcxn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.ins-btn:hover:not(:disabled)[b-r2wmnlzcxn] { background: #f9fafb; }
.ins-btn:disabled[b-r2wmnlzcxn] { opacity: .5; cursor: not-allowed; }
.ins-btn .material-symbols-rounded[b-r2wmnlzcxn] { font-size: 18px; }

.ins-btn-primario[b-r2wmnlzcxn] {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

.ins-btn-primario:hover:not(:disabled)[b-r2wmnlzcxn] { background: #1a5fd0; }

.ins-card[b-r2wmnlzcxn] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.ins-empty[b-r2wmnlzcxn] {
    color: var(--text-muted, #6b7280);
    text-align: center;
}

.ins-denied[b-r2wmnlzcxn],
.ins-nota[b-r2wmnlzcxn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ins-denied .material-symbols-rounded[b-r2wmnlzcxn],
.ins-nota .material-symbols-rounded[b-r2wmnlzcxn] {
    color: var(--text-muted, #6b7280);
    font-size: 22px;
    flex-shrink: 0;
}

.ins-denied-title[b-r2wmnlzcxn] {
    font-weight: 600;
    margin-bottom: 2px;
}

.ins-nota[b-r2wmnlzcxn] {
    background: #f8fafc;
    font-size: .9rem;
    color: #374151;
}

/* La cadena de despliegue: se lee de un vistazo por dónde entra una versión. */
.ins-cadena[b-r2wmnlzcxn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
}

.ins-eslabon[b-r2wmnlzcxn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid #c7d7ee;
    background: #eef4fd;
    color: #1a4f9c;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
}

.ins-eslabon-off[b-r2wmnlzcxn] {
    border-color: var(--border, #e5e7eb);
    background: #f3f4f6;
    color: #6b7280;
}

.ins-eslabon-n[b-r2wmnlzcxn] {
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: 0 7px;
    font-size: .8rem;
}

.ins-flecha[b-r2wmnlzcxn] {
    color: #9ca3af;
    font-size: 18px;
}

.ins-tabla-wrap[b-r2wmnlzcxn] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.ins-tabla[b-r2wmnlzcxn] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 860px;
}

.ins-tabla th[b-r2wmnlzcxn] {
    text-align: left;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6b7280);
    padding: 11px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: #f9fafb;
    white-space: nowrap;
}

.ins-tabla td[b-r2wmnlzcxn] {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: top;
}

.ins-tabla tbody tr:last-child td[b-r2wmnlzcxn] { border-bottom: none; }

.ins-fila-inactiva[b-r2wmnlzcxn] { opacity: .55; }

.ins-orden[b-r2wmnlzcxn] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.ins-nombre[b-r2wmnlzcxn] { font-weight: 600; }

.ins-clave[b-r2wmnlzcxn] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .78rem;
    color: var(--text-muted, #6b7280);
}

.ins-notas[b-r2wmnlzcxn] {
    font-size: .8rem;
    color: var(--text-muted, #6b7280);
    margin-top: 3px;
    max-width: 34ch;
}

.ins-url[b-r2wmnlzcxn] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .8rem;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ins-ocupacion[b-r2wmnlzcxn] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.ins-cuenta[b-r2wmnlzcxn] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1rem;
}

.ins-tope[b-r2wmnlzcxn] {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #6b7280);
}

.ins-sin-tope[b-r2wmnlzcxn] {
    font-size: .78rem;
    color: #9ca3af;
}

.ins-barra[b-r2wmnlzcxn] {
    height: 4px;
    background: #eef0f3;
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
    max-width: 120px;
}

.ins-barra-llena[b-r2wmnlzcxn] {
    height: 100%;
    background: #2f9e63;
    border-radius: 999px;
}

.ins-barra-llena-media[b-r2wmnlzcxn] { background: #c98a12; }
.ins-barra-llena-alta[b-r2wmnlzcxn] { background: #c0392b; }

.ins-pill[b-r2wmnlzcxn] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

.ins-pill-si[b-r2wmnlzcxn] {
    background: #e6f4ec;
    color: #1e7a49;
}

.ins-pill-no[b-r2wmnlzcxn] {
    background: #fbeceb;
    color: #a5382c;
}

.ins-th-acciones[b-r2wmnlzcxn],
.ins-acciones-celda[b-r2wmnlzcxn] {
    text-align: right;
    white-space: nowrap;
}

.ins-btn-mini[b-r2wmnlzcxn] {
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 7px;
    padding: 5px 7px;
    cursor: pointer;
    color: #374151;
    line-height: 0;
}

.ins-btn-mini:hover:not(:disabled)[b-r2wmnlzcxn] { background: #f3f4f6; }
.ins-btn-mini:disabled[b-r2wmnlzcxn] { opacity: .45; cursor: not-allowed; }
.ins-btn-mini .material-symbols-rounded[b-r2wmnlzcxn] { font-size: 18px; }

.ins-btn-borrar:hover:not(:disabled)[b-r2wmnlzcxn] {
    background: #fbeceb;
    border-color: #e3b5b0;
    color: #a5382c;
}

/* Formulario */
.ins-form-title[b-r2wmnlzcxn] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 14px;
}

.ins-form-grid[b-r2wmnlzcxn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 18px;
}

.ins-campo[b-r2wmnlzcxn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ins-campo-ancho[b-r2wmnlzcxn] { grid-column: 1 / -1; }

.ins-label[b-r2wmnlzcxn] {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
}

.ins-input[b-r2wmnlzcxn] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .9rem;
    font-family: inherit;
    width: 100%;
}

.ins-input:focus[b-r2wmnlzcxn] {
    outline: 2px solid #93b7f0;
    outline-offset: -1px;
    border-color: #1f6feb;
}

.ins-input:disabled[b-r2wmnlzcxn] {
    background: #f3f4f6;
    color: #6b7280;
}

.ins-ayuda[b-r2wmnlzcxn] {
    font-size: .78rem;
    color: var(--text-muted, #6b7280);
    max-width: 52ch;
}

.ins-ayuda code[b-r2wmnlzcxn] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .95em;
    background: #f3f4f6;
    padding: 1px 4px;
    border-radius: 3px;
}

.ins-form-acciones[b-r2wmnlzcxn] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Resultado de la comprobación de un servidor. Sin ::deep: son elementos propios de esta pantalla,
   no de un template de terceros. */
.ins-comprobacion[b-r2wmnlzcxn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
}

.ins-paso[b-r2wmnlzcxn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.ins-paso-bien[b-r2wmnlzcxn] { border-left-color: #16a34a; }
.ins-paso-mal[b-r2wmnlzcxn] { border-left-color: #dc2626; background: #fff5f5; }
.ins-paso-duda[b-r2wmnlzcxn] { border-left-color: #f59e0b; background: #fffdf5; }

.ins-paso-ico[b-r2wmnlzcxn] { font-size: 20px; }
.ins-paso-bien .ins-paso-ico[b-r2wmnlzcxn] { color: #16a34a; }
.ins-paso-mal .ins-paso-ico[b-r2wmnlzcxn] { color: #dc2626; }
.ins-paso-duda .ins-paso-ico[b-r2wmnlzcxn] { color: #b45309; }

.ins-paso-titulo[b-r2wmnlzcxn] {
    font-weight: 600;
    color: #111827;
    font-size: .88rem;
}

.ins-paso-detalle[b-r2wmnlzcxn] {
    color: #4b5563;
    font-size: .82rem;
    margin-top: 2px;
    line-height: 1.45;
}

/* Qué hacer va separado del detalle a propósito: el detalle dice qué se ha visto, esto dice qué
   toca hacer, y es lo que se busca cuando algo falla. */
.ins-paso-hacer[b-r2wmnlzcxn] {
    color: #1d4ed8;
    font-size: .82rem;
    margin-top: 4px;
    line-height: 1.45;
}

.ins-comprobacion-final[b-r2wmnlzcxn] {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    font-size: .86rem;
    color: #374151;
    line-height: 1.5;
}

/* PC5 — quién vive en cada servidor. */
.ins-subtitulo-bloque[b-r2wmnlzcxn] {
    color: #6b7280;
    font-size: .82rem;
    line-height: 1.5;
    margin: -4px 0 14px;
}

.ins-grupo[b-r2wmnlzcxn] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* Los clientes sin servidor se marcan: si esto no está vacío, es lo que hay que arreglar. */
.ins-grupo-huerfano[b-r2wmnlzcxn] {
    border-color: #fecaca;
    background: #fff5f5;
}

.ins-grupo-titulo[b-r2wmnlzcxn] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    color: #111827;
    font-size: .9rem;
    margin-bottom: 8px;
}

.ins-grupo-cuenta[b-r2wmnlzcxn] {
    font-weight: 400;
    color: #6b7280;
    font-size: .8rem;
}

.ins-grupo-aviso[b-r2wmnlzcxn] {
    color: #991b1b;
    font-size: .82rem;
    line-height: 1.45;
    margin-bottom: 8px;
}

.ins-grupo-vacio[b-r2wmnlzcxn] {
    color: #6b7280;
    font-size: .82rem;
}

.ins-tabla-clientes[b-r2wmnlzcxn] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.ins-tabla-clientes th[b-r2wmnlzcxn] {
    text-align: left;
    color: #6b7280;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.ins-tabla-clientes td[b-r2wmnlzcxn] {
    padding: 5px 8px;
    border-bottom: 1px solid #f3f4f6;
}

.ins-tabla-clientes tr:last-child td[b-r2wmnlzcxn] { border-bottom: none; }

.ins-base-tipo[b-r2wmnlzcxn] {
    color: #6b7280;
    font-size: .74rem;
    margin-left: 4px;
}

/* Tercer estado del esquema: ni al día ni atrasado — no se sabe. */
.ins-pill-duda[b-r2wmnlzcxn] {
    background: #fef3c7;
    color: #92400e;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/MantenimientoPage.razor.rz.scp.css */
/* A todo el ancho: sin tope ni centrado. */
.mt-page[b-2dladbrv1o] { padding: 0; }   /* como Clientes: el borde lo pone .main-body */

.mt-header[b-2dladbrv1o] { margin-bottom: 9px; }
.mt-title[b-2dladbrv1o] { font-size: 1.35rem; font-weight: 600; margin: 0; }
.mt-subtitle[b-2dladbrv1o] { color: #6b7280; font-size: .9rem; margin-top: 2px; max-width: 70ch; }

.mt-card[b-2dladbrv1o] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.mt-empty[b-2dladbrv1o] { padding: 28px; text-align: center; color: #6b7280; }
.mt-denied[b-2dladbrv1o] { display: flex; align-items: center; gap: 12px; justify-content: center; }
.mt-denied .material-symbols-rounded[b-2dladbrv1o] { font-size: 28px; color: #9ca3af; }
.mt-denied-title[b-2dladbrv1o] { font-weight: 600; }

/* Las herramientas, en tarjetas. Una fila por herramienta y no una rejilla de cuadrados: cada una
   necesita una frase que explique qué hace, y esa frase es lo que evita que alguien pulse a ciegas
   algo que llena o castiga una instalación. */

.mt-grid[b-2dladbrv1o] { display: flex; flex-direction: column; gap: 16px; }

/* Un poco más grandes que antes: más aire, icono y textos algo mayores. */
.mt-tarjeta[b-2dladbrv1o] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 26px;
    min-height: 96px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

a.mt-tarjeta:hover[b-2dladbrv1o] { background: #f9fafb; border-color: #d1d5db; }

.mt-ico[b-2dladbrv1o] { font-size: 32px; color: #2563eb; flex: 0 0 auto; margin-top: 2px; }

.mt-txt[b-2dladbrv1o] { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.mt-nombre[b-2dladbrv1o] { font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; }
.mt-desc[b-2dladbrv1o] { color: #6b7280; font-size: .92rem; line-height: 1.5; max-width: 90ch; }

.mt-flecha[b-2dladbrv1o] { font-size: 26px; color: #9ca3af; flex: 0 0 auto; align-self: center; }

/* Lo anunciado y todavía no hecho: se ve, se lee y no se puede pulsar. */

.mt-tarjeta-pendiente[b-2dladbrv1o] { background: #fafafa; border-style: dashed; }
.mt-tarjeta-pendiente .mt-ico[b-2dladbrv1o] { color: #9ca3af; }
.mt-tarjeta-pendiente .mt-nombre[b-2dladbrv1o] { color: #6b7280; }

.mt-badge[b-2dladbrv1o] {
    font-size: .7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/MigracionDatosPage.razor.rz.scp.css */
/* Calca la hoja de EsquemaPage: el área Sistema comparte lenguaje visual. */

.mig-page[b-c4jpho53ed] {
    padding: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.mig-header[b-c4jpho53ed] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.mig-title[b-c4jpho53ed] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.mig-subtitle[b-c4jpho53ed] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
}

.mig-h2[b-c4jpho53ed] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
}

.mig-card[b-c4jpho53ed] {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* ---- Formulario ---------------------------------------------------------- */

.mig-form[b-c4jpho53ed] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mig-campo[b-c4jpho53ed] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mig-label[b-c4jpho53ed] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.mig-input[b-c4jpho53ed] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .85rem;
    background: var(--surface, #fff);
    color: inherit;
}

.mig-input:focus[b-c4jpho53ed] {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -1px;
}

.mig-check[b-c4jpho53ed] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .88rem;
}

.mig-check em[b-c4jpho53ed] {
    color: var(--text-muted, #6b7280);
    font-style: normal;
}

.mig-acciones[b-c4jpho53ed] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.mig-btn[b-c4jpho53ed] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .88rem;
    cursor: pointer;
    color: inherit;
}

.mig-btn:hover:not(:disabled)[b-c4jpho53ed] {
    background: var(--surface-hover, #f3f4f6);
}

.mig-btn:disabled[b-c4jpho53ed] {
    opacity: .5;
    cursor: not-allowed;
}

.mig-btn-primario[b-c4jpho53ed] {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}

.mig-btn-primario:hover:not(:disabled)[b-c4jpho53ed] {
    filter: brightness(1.08);
}

.mig-nota[b-c4jpho53ed] {
    margin-top: 12px;
    font-size: .82rem;
    color: var(--text-muted, #6b7280);
}

/* ---- Estado y resultados ------------------------------------------------- */

.mig-resumen[b-c4jpho53ed] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.mig-badge[b-c4jpho53ed] {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .8rem;
    background: var(--surface-alt, #f9fafb);
}

.mig-badge-ok[b-c4jpho53ed] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.mig-badge-ko[b-c4jpho53ed] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.mig-ok[b-c4jpho53ed] {
    color: #065f46;
    font-size: .88rem;
}

.mig-error[b-c4jpho53ed] {
    color: #991b1b;
    font-size: .88rem;
    margin-top: 8px;
}

.mig-avisos[b-c4jpho53ed] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
}

.mig-avisos-title[b-c4jpho53ed] {
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 6px;
    color: #92400e;
}

.mig-avisos ul[b-c4jpho53ed] {
    margin: 0;
    padding-left: 18px;
    font-size: .85rem;
}

.mig-avisos li[b-c4jpho53ed] {
    margin-bottom: 4px;
}

/* ---- Progreso ------------------------------------------------------------ */

.mig-barra[b-c4jpho53ed] {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-alt, #f3f4f6);
    overflow: hidden;
}

.mig-barra-relleno[b-c4jpho53ed] {
    height: 100%;
    background: var(--primary, #2563eb);
    transition: width .2s ease;
}

.mig-progreso-detalle[b-c4jpho53ed] {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--text-muted, #6b7280);
}

/* ---- Tablas -------------------------------------------------------------- */

.mig-table[b-c4jpho53ed] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-top: 8px;
}

.mig-table th[b-c4jpho53ed],
.mig-table td[b-c4jpho53ed] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.mig-table th[b-c4jpho53ed] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

/* ---- Acceso denegado ----------------------------------------------------- */

.mig-denied[b-c4jpho53ed] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted, #6b7280);
}

.mig-denied-title[b-c4jpho53ed] {
    font-weight: 600;
    color: inherit;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/ModulosPorPlanPage.razor.rz.scp.css */
.mp-page[b-rflufurlqq] {
    padding: 0;   /* como Altas de la tienda: el borde lo pone .main-body */
}

.mp-header[b-rflufurlqq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 9px;
}

.mp-header-text[b-rflufurlqq] { flex: 1 1 auto; min-width: 0; }
.mp-header-actions[b-rflufurlqq] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.mp-title[b-rflufurlqq] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.mp-subtitle[b-rflufurlqq] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
    margin-top: 2px;
    max-width: 70ch;
}

.mp-card[b-rflufurlqq] {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.mp-empty[b-rflufurlqq] {
    padding: 28px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.mp-denied[b-rflufurlqq] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    text-align: left;
}

.mp-denied .material-symbols-rounded[b-rflufurlqq] { font-size: 28px; color: #9ca3af; }
.mp-denied-title[b-rflufurlqq] { font-weight: 600; }

/* La tabla se desplaza dentro de la tarjeta: cabecera de planes y columna de módulos quedan fijas. */
.mp-scroll[b-rflufurlqq] {
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.mp-table[b-rflufurlqq] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
}

.mp-table th[b-rflufurlqq],
.mp-table td[b-rflufurlqq] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    vertical-align: middle;
    background: #fff;
}

.mp-table thead th[b-rflufurlqq] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.mp-table tfoot td[b-rflufurlqq] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fcfcfd;
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: none;
    vertical-align: top;
}

.mp-col-modulo[b-rflufurlqq] {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left !important;
    min-width: 220px;
}

.mp-table thead .mp-col-modulo[b-rflufurlqq],
.mp-table tfoot .mp-col-modulo[b-rflufurlqq] { z-index: 3; }

.mp-col-plan[b-rflufurlqq] { min-width: 130px; }
.mp-col-cambiada[b-rflufurlqq] { box-shadow: inset 0 -3px 0 #2563eb; }

.mp-plan-nombre[b-rflufurlqq] { font-size: .95rem; }
.mp-plan-clientes[b-rflufurlqq] { font-weight: 400; color: #6b7280; font-size: .8rem; margin-top: 2px; }

.mp-tag[b-rflufurlqq] {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: .72rem;
    font-weight: 600;
}

.mp-fila-app td[b-rflufurlqq] { background: #f8fafc; }
.mp-fila-app .mp-modulo-nombre[b-rflufurlqq] { font-weight: 600; }

.mp-modulo-nombre[b-rflufurlqq] { display: block; color: #111827; }
.mp-modulo-clave[b-rflufurlqq] { display: block; color: #9ca3af; font-size: .75rem; font-family: ui-monospace, monospace; }

.mp-table tbody tr:hover td[b-rflufurlqq] { background: #f3f4f6; }

.mp-celda[b-rflufurlqq] { text-align: center; }
.mp-celda-si[b-rflufurlqq] { background: #f0fdf4 !important; }
.mp-celda-anadida[b-rflufurlqq] { background: #dcfce7 !important; box-shadow: inset 0 0 0 2px #16a34a; }
.mp-celda-quitada[b-rflufurlqq] { background: #fee2e2 !important; box-shadow: inset 0 0 0 2px #dc2626; }

.mp-casilla[b-rflufurlqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    cursor: pointer;
}

.mp-casilla input[b-rflufurlqq] { width: 18px; height: 18px; cursor: pointer; accent-color: #16a34a; }

.mp-pie-rotulo[b-rflufurlqq] { font-weight: 600; color: #374151; }
.mp-pie[b-rflufurlqq] { text-align: center; min-width: 130px; }

.mp-resumen[b-rflufurlqq] { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; font-weight: 600; }
.mp-mas[b-rflufurlqq] { color: #15803d; }
.mp-menos[b-rflufurlqq] { color: #b91c1c; }

.mp-aplicar[b-rflufurlqq] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    font-size: .8rem;
    color: #374151;
    margin-bottom: 6px;
    cursor: pointer;
}

.mp-botones[b-rflufurlqq] { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.mp-btn[b-rflufurlqq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d1d5db);
    background: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}

.mp-btn:hover[b-rflufurlqq] { background: #f9fafb; }
.mp-btn:disabled[b-rflufurlqq] { opacity: .5; cursor: default; }
.mp-btn-primario[b-rflufurlqq] { background: #2563eb; border-color: #2563eb; color: #fff; }
.mp-btn-primario:hover[b-rflufurlqq] { background: #1d4ed8; }

.mp-sin-cambios[b-rflufurlqq] { color: #9ca3af; font-size: .8rem; }

.mp-retiradas[b-rflufurlqq] {
    margin-top: 6px;
    font-size: .75rem;
    color: #92400e;
}

.mp-notas[b-rflufurlqq] { display: grid; gap: 8px; }

.mp-nota[b-rflufurlqq] {
    font-size: .85rem;
    color: #4b5563;
    background: #f9fafb;
    border: 1px solid var(--border, #eef0f3);
    border-radius: 10px;
    padding: 10px 14px;
    line-height: 1.45;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/OperadoresPage.razor.rz.scp.css */
/* Operadores de la plataforma (W5). Lista simple en vez de lista+detalle: un operador son dos campos
   y un estado, y un panel de detalle para eso sería un clic de más sin nada que enseñar. */

/* A todo el ancho y todo el alto, como Clientes: sin tope de ancho ni margen propio (el de la aplicación
   ya lo pone .main-body), y con el suelo en la pantalla. La tarjeta de la lista se queda con el alto que
   sobra. */
.op-page[b-i6xguqkl4e] { min-height: 100%; display: flex; flex-direction: column; gap: 9px; }
.op-lista-card[b-i6xguqkl4e] { flex: 1 1 auto; }

/* Sin `flex-wrap`, como en Técnicos: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.op-header[b-i6xguqkl4e] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; }
.op-header-text[b-i6xguqkl4e] { flex: 1 1 auto; min-width: 0; }
.op-title[b-i6xguqkl4e] { font-size: 1.35rem; font-weight: 700; margin: 0; }
.op-subtitle[b-i6xguqkl4e] { color: #6b7280; font-size: .84rem; margin-top: 3px; max-width: 620px; }
/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.op-header-actions[b-i6xguqkl4e] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.op-card[b-i6xguqkl4e] { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.op-form[b-i6xguqkl4e] { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.op-section-title[b-i6xguqkl4e] { font-size: .95rem; font-weight: 700; color: #111827; }

.op-field[b-i6xguqkl4e] { display: flex; flex-direction: column; gap: 6px; }
.op-field label[b-i6xguqkl4e] { font-size: .8rem; font-weight: 600; color: #374151; }
.op-input[b-i6xguqkl4e] { padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .92rem; }
.op-input:focus[b-i6xguqkl4e] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.op-field-hint[b-i6xguqkl4e] { font-size: .76rem; color: #9ca3af; }

.op-actions[b-i6xguqkl4e] { display: flex; gap: 8px; flex-wrap: wrap; }

.op-list[b-i6xguqkl4e] { display: flex; flex-direction: column; }
.op-item[b-i6xguqkl4e] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; flex-wrap: wrap; }
.op-item:last-child[b-i6xguqkl4e] { border-bottom: none; }
.op-item-texts[b-i6xguqkl4e] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-item-name[b-i6xguqkl4e] { font-size: .9rem; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.op-item-desc[b-i6xguqkl4e] { font-size: .78rem; color: #6b7280; }
.op-item-actions[b-i6xguqkl4e] { display: flex; align-items: center; gap: 8px; }
.op-item-nota[b-i6xguqkl4e] { font-size: .76rem; color: #9ca3af; font-style: italic; }

.op-badge[b-i6xguqkl4e] { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.op-badge-fichero[b-i6xguqkl4e] { background: #eff6ff; color: #1d4ed8; }
.op-badge-inactivo[b-i6xguqkl4e] { background: #f3f4f6; color: #6b7280; }
/* Verde, y no azul como «del fichero»: quien mira la lista tiene que distinguir de un vistazo quién
   puede ENTRAR en todo el parque de quién solo está autorizado aquí. */
.op-badge-global[b-i6xguqkl4e] { background: #ecfdf5; color: #047857; }

/* Formulario de la contraseña de plataforma (ID3). */
.op-credencial[b-i6xguqkl4e] { margin-top: 1rem; }
.op-credencial-titulo[b-i6xguqkl4e] { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }

/* Ámbar, no azul informativo: esto concede acceso a todas las instalaciones y quien lo teclea debe
   leerlo antes, no después. */
.op-aviso[b-i6xguqkl4e] {
    display: flex; gap: .5rem; align-items: flex-start;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: .375rem;
    padding: .625rem .75rem; margin-bottom: .875rem; font-size: .875rem;
}

.op-campo[b-i6xguqkl4e] { display: block; margin-bottom: .75rem; }
.op-campo span[b-i6xguqkl4e] { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .25rem; }
.op-campo input[b-i6xguqkl4e] {
    width: 100%; max-width: 22rem; padding: .5rem .625rem;
    border: 1px solid #e5e7eb; border-radius: .375rem; font-size: .95rem;
}

.op-credencial-acciones[b-i6xguqkl4e] { display: flex; gap: .5rem; margin-top: 1rem; }

.op-btn-primario[b-i6xguqkl4e] {
    background: #2563eb; border-color: #2563eb; color: #fff;
}
.op-btn-primario:hover:not(:disabled)[b-i6xguqkl4e] { background: #1d4ed8; }

.op-btn[b-i6xguqkl4e] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; border-radius: 9px; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.op-btn:disabled[b-i6xguqkl4e] { opacity: .55; cursor: default; }
.op-btn-ico[b-i6xguqkl4e] { font-size: 18px; }
.op-btn-primary[b-i6xguqkl4e] { background: #2563eb; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-i6xguqkl4e] { background: #1d4ed8; }
.op-btn-ghost[b-i6xguqkl4e] { background: #fff; border-color: #d1d5db; color: #374151; }
.op-btn-ghost:hover:not(:disabled)[b-i6xguqkl4e] { background: #f3f4f6; }
.op-btn-peligro[b-i6xguqkl4e] { background: #fff; border-color: #fecaca; color: #b91c1c; }
.op-btn-peligro:hover:not(:disabled)[b-i6xguqkl4e] { background: #fef2f2; }

.op-empty[b-i6xguqkl4e] { padding: 24px; text-align: center; color: #6b7280; font-size: .88rem; }
.op-denied[b-i6xguqkl4e] { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.op-denied .material-symbols-rounded[b-i6xguqkl4e] { font-size: 26px; color: #9ca3af; }
.op-denied-title[b-i6xguqkl4e] { font-weight: 700; color: #111827; }

.op-nota[b-i6xguqkl4e] { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 13px; }
.op-nota .material-symbols-rounded[b-i6xguqkl4e] { font-size: 19px; color: #6b7280; }

/* OP6: el perfil de cada operador. */
.op-select[b-i6xguqkl4e] { padding: 6px 9px; font-size: .84rem; max-width: 200px; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/PaisesPage.razor.rz.scp.css */
.pa-gate[b-4718o3ave2] { padding: 2rem; color: var(--text-secondary, #6b7280); }

/* Todo el ancho de la pantalla, como el resto de Sistema: el borde lo pone .main-body. */
.pa-page[b-4718o3ave2] { padding: 0; }
.pa-page h1[b-4718o3ave2] { font-size: 1.5rem; margin: 0 0 .25rem; }
.pa-intro[b-4718o3ave2] { color: var(--text-secondary, #6b7280); margin: 0 0 1rem; max-width: 70rem; }

.pa-rejilla[b-4718o3ave2] { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .pa-rejilla[b-4718o3ave2] { grid-template-columns: 1fr; } }

.pa-lista[b-4718o3ave2] { display: flex; flex-direction: column; gap: .5rem; background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: .75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pa-buscar[b-4718o3ave2] { padding: .45rem .6rem; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; font-size: .95rem; }
.pa-cuenta[b-4718o3ave2] { color: var(--text-secondary, #6b7280); }

/* 249 países: la lista se desplaza dentro de su caja, la página no crece. */
.pa-filas[b-4718o3ave2] { display: flex; flex-direction: column; gap: .3rem; max-height: 60vh; overflow-y: auto; padding-right: .2rem; }

.pa-fila[b-4718o3ave2] { display: grid; grid-template-columns: 44px 1fr; align-items: center; text-align: left; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; transition: background .12s, border-color .12s; }
.pa-fila:hover[b-4718o3ave2] { background: var(--surface-hover, #f8fafc); }
.pa-fila strong[b-4718o3ave2] { font-family: ui-monospace, monospace; color: var(--primary, #1d4ed8); }
.pa-fila.sel[b-4718o3ave2] { border-color: var(--primary, #1d4ed8); background: var(--primary-soft, #eff6ff); }
.pa-fila.inactivo[b-4718o3ave2] { opacity: .55; }

.pa-ficha[b-4718o3ave2] { background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pa-campos[b-4718o3ave2] { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: .75rem 1rem; }
.pa-campos label[b-4718o3ave2] { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-secondary, #4b5563); }
.pa-campos label.ancho[b-4718o3ave2], .pa-campos label.pa-check[b-4718o3ave2] { grid-column: 1 / -1; }
.pa-campos input[b-4718o3ave2], .pa-campos textarea[b-4718o3ave2] { padding: .45rem .55rem; border: 1px solid var(--border-color, #d1d5db); border-radius: 6px; font-size: .95rem; color: var(--text-primary, #111827); background: var(--surface, #fff); font-family: inherit; }
.pa-campos input:disabled[b-4718o3ave2] { background: var(--surface-muted, #f3f4f6); }
.pa-check[b-4718o3ave2] { flex-direction: row !important; align-items: center; gap: .5rem !important; }

.pa-acciones[b-4718o3ave2] { margin-top: 1rem; display: flex; gap: .5rem; }
.pa-btn[b-4718o3ave2] { padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--border-color, #d1d5db); background: var(--surface, #fff); cursor: pointer; }
.pa-btn-primario[b-4718o3ave2] { background: var(--primary, #1d4ed8); color: #fff; border-color: var(--primary, #1d4ed8); }
.pa-btn:disabled[b-4718o3ave2] { opacity: .5; cursor: default; }
.pa-nota[b-4718o3ave2] { color: var(--text-secondary, #6b7280); }
/* _content/ErpPowergest/Presentation/Sistema/Pages/PerfilesSoportePage.razor.rz.scp.css */
.ps-page[b-7tdogkavuh] { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; max-width: 1200px; }
.ps-title[b-7tdogkavuh] { font-size: 1.3rem; font-weight: 700; margin: 0; color: #111827; }
.ps-subtitle[b-7tdogkavuh] { font-size: .86rem; color: #6b7280; margin-top: 3px; }
.ps-card[b-7tdogkavuh] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; }
.ps-denegado[b-7tdogkavuh] { color: #6b7280; }
.ps-aviso[b-7tdogkavuh] { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; }
.ps-main[b-7tdogkavuh] { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.ps-section-title[b-7tdogkavuh] { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; margin: 6px 0 8px; }
.ps-lista[b-7tdogkavuh] { display: flex; flex-direction: column; gap: 4px; }
.ps-item[b-7tdogkavuh] { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ps-item:hover[b-7tdogkavuh] { background: #f3f4f6; }
.ps-item.activo[b-7tdogkavuh] { background: #eff6ff; }
.ps-item-nombre[b-7tdogkavuh] { font-weight: 600; color: #111827; font-size: .9rem; }
.ps-item-desc[b-7tdogkavuh], .ps-area-desc[b-7tdogkavuh] { font-size: .76rem; color: #6b7280; }
.ps-nuevo[b-7tdogkavuh] { display: flex; gap: 6px; margin-top: 10px; }
.ps-input[b-7tdogkavuh] { padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .86rem; min-width: 0; }
.ps-btn[b-7tdogkavuh] { padding: 7px 12px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ps-btn:disabled[b-7tdogkavuh] { opacity: .55; cursor: default; }
.ps-btn-peligro[b-7tdogkavuh] { color: #b91c1c; border-color: #fecaca; }
.ps-vacio[b-7tdogkavuh], .ps-nota[b-7tdogkavuh] { font-size: .84rem; color: #6b7280; }
.ps-cabecera[b-7tdogkavuh] { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.ps-cabecera .ps-input[b-7tdogkavuh] { flex: 1; font-weight: 600; }
.ps-tabla[b-7tdogkavuh] { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ps-tabla th[b-7tdogkavuh] { text-align: left; font-size: .76rem; color: #6b7280; padding: 6px; border-bottom: 1px solid #e5e7eb; }
.ps-tabla td[b-7tdogkavuh] { padding: 7px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.ps-area[b-7tdogkavuh] { font-weight: 600; color: #111827; }
.ps-capacidades[b-7tdogkavuh] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ps-capacidad[b-7tdogkavuh] { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; }
.ps-capacidad > span[b-7tdogkavuh] { display: flex; flex-direction: column; }
@media (max-width: 900px) { .ps-main[b-7tdogkavuh] { grid-template-columns: 1fr; } }
/* _content/ErpPowergest/Presentation/Sistema/Pages/ProveedorIaPage.razor.rz.scp.css */
/* Proveedor de IA (pantalla de OPERADOR de Powergest). Los estilos estaban en atributos `style=` fila a
   fila —seis tablas anchas y unos ciento cincuenta atributos— y cada tabla había ido derivando por su
   cuenta. Aquí se unifican con los mismos valores que Tenants/Operadores: tarjeta blanca con borde
   #e5e7eb y radio 12, azul #2563eb, gris de apoyo #6b7280, verde #047857 para «configurado» y rojo
   #b91c1c para el rechazo. */

/* Sin techo de ancho: es una pantalla de tablas —el catálogo tiene trece columnas— y con `max-width:1500px`
   en un monitor de 2500 px sobraba media pantalla en blanco mientras la tabla se desplazaba por dentro.
   El texto corrido sí lleva su propio límite de lectura (`.pi-subtitle`, los `hint`), que es donde una línea
   larguísima molesta de verdad. */
.pi-page[b-wxclzwlos0] { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }

.pi-header[b-wxclzwlos0] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pi-title[b-wxclzwlos0] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pi-subtitle[b-wxclzwlos0] { color: #6b7280; font-size: .84rem; margin: 3px 0 0; max-width: 760px; }

/* Estado de la puerta (comprobando / no disponible): mismo hueco que la página, sin marco. */
.pi-gate[b-wxclzwlos0] { padding: 24px; color: #6b7280; }

/* Secciones. Cada bloque de configuración es una tarjeta: son seis y sin marco se leían como una
   sola lista de tablas. */
.pi-section[b-wxclzwlos0] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 16px 18px;
}
/* IF3: pestañas. La página eran siete secciones seguidas; ahora se ve una a la vez. */
.pi-pestanas[b-wxclzwlos0] { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid #e5e7eb; }
.pi-pestana[b-wxclzwlos0] {
    border: 0; background: transparent; padding: 8px 14px; font-size: .86rem; color: #6b7280;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; border-radius: 6px 6px 0 0;
}
.pi-pestana:hover[b-wxclzwlos0] { color: #111827; background: #f9fafb; }
.pi-pestana-activa[b-wxclzwlos0] { color: #1d4ed8; border-bottom-color: #2563eb; font-weight: 600; }

.pi-section-title[b-wxclzwlos0] { font-size: .95rem; font-weight: 700; color: #111827; margin: 0 0 6px; }
/* El texto explicativo se acota a una medida legible aunque la página ocupe todo el monitor: una línea de
   250 caracteres no se lee, se salta. Las tablas, en cambio, sí usan todo el ancho. */
.pi-section-hint[b-wxclzwlos0] { margin: 0 0 14px; color: #6b7280; font-size: .84rem; line-height: 1.55; max-width: 105ch; }
.pi-section-hint:last-child[b-wxclzwlos0] { margin-bottom: 0; }
.pi-section-foot[b-wxclzwlos0] { margin: 10px 0 0; color: #6b7280; font-size: .82rem; line-height: 1.55; max-width: 105ch; }

/* Avisos. Ámbar el que redirige a quien se ha equivocado de pantalla —es lo primero que se lee y no
   puede confundirse con un error—; rojo el fallo; verde la confirmación. */
.pi-aviso-destino[b-wxclzwlos0] {
    background: #fffbeb; color: #78350f; border: 1px solid #fcd34d;
    border-radius: 10px; padding: 11px 14px; font-size: .88rem; line-height: 1.55;
}
.pi-aviso-destino a[b-wxclzwlos0] { color: #1d4ed8; font-weight: 600; }

.pi-error[b-wxclzwlos0] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 13px; font-size: .88rem; }
.pi-ok[b-wxclzwlos0] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 10px; padding: 10px 13px; font-size: .88rem; }

/* Tablas. Son anchas por naturaleza (el catálogo tiene trece columnas): se desplazan dentro de su
   sección y nunca ensanchan la página. */
.pi-scroll[b-wxclzwlos0] { overflow-x: auto; }

/* El catálogo, además, crece a lo alto: con veinte modelos la sección empujaba fuera de pantalla todo lo
   que va debajo. Se desplaza en los dos ejes dentro de su caja, con la cabecera pegada — en una tabla de
   trece columnas, en cuanto bajas un poco ya no sabes qué columna estás mirando. */
.pi-scroll-alto[b-wxclzwlos0] { max-height: 62vh; overflow-y: auto; }
.pi-scroll-alto thead th[b-wxclzwlos0] {
    position: sticky; top: 0; z-index: 1;
    background: #fff; box-shadow: inset 0 -1px 0 #e5e7eb;
}
.pi-table[b-wxclzwlos0] { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pi-table th[b-wxclzwlos0], .pi-table td[b-wxclzwlos0] { padding: 8px 10px; text-align: left; vertical-align: top; }
.pi-table thead th[b-wxclzwlos0] {
    color: #6b7280; font-weight: 600; font-size: .76rem; text-transform: uppercase;
    letter-spacing: .03em; border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.pi-table tbody tr[b-wxclzwlos0] { border-bottom: 1px solid #f3f4f6; }
.pi-table tbody tr:last-child[b-wxclzwlos0] { border-bottom: none; }
.pi-table tbody tr:hover[b-wxclzwlos0] { background: #f9fafb; }
.pi-col-acciones[b-wxclzwlos0] { white-space: nowrap; }
.pi-col-centro[b-wxclzwlos0] { text-align: center; }

/* Campos. Un solo aspecto para todo lo que se teclea, en vez del `padding:.3rem` suelto de cada celda. */
.pi-input[b-wxclzwlos0], .pi-select[b-wxclzwlos0] {
    padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 8px;
    font-family: inherit; font-size: .86rem; color: #111827; background: #fff;
}
.pi-input:focus[b-wxclzwlos0], .pi-select:focus[b-wxclzwlos0] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pi-input:disabled[b-wxclzwlos0], .pi-select:disabled[b-wxclzwlos0] { background: #f9fafb; color: #9ca3af; cursor: default; }
.pi-input[b-wxclzwlos0]::placeholder { color: #9ca3af; }

/* Un identificador de modelo rechazado se marca en el propio campo: el motivo va justo debajo. */
.pi-input.pi-input-mal[b-wxclzwlos0] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.10); }
.pi-motivo[b-wxclzwlos0] { margin-top: 5px; font-size: .78rem; color: #b91c1c; max-width: 260px; line-height: 1.45; }

.pi-in-url[b-wxclzwlos0] { min-width: 220px; }
.pi-in-modelo[b-wxclzwlos0] { min-width: 170px; }
.pi-in-clave[b-wxclzwlos0] { min-width: 180px; }
.pi-in-texto[b-wxclzwlos0] { min-width: 200px; }
.pi-in-corto[b-wxclzwlos0] { width: 100px; }
.pi-in-num[b-wxclzwlos0] { width: 7rem; }
.pi-in-num-sm[b-wxclzwlos0] { width: 4.5rem; }
.pi-in-ancho[b-wxclzwlos0] { width: 100%; }

.pi-nombre[b-wxclzwlos0] { font-weight: 600; color: #111827; }

/* Botones: mismo juego que en las demás pantallas de Sistema. */
.pi-btn[b-wxclzwlos0] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    font-family: inherit; font-size: .83rem; font-weight: 600; cursor: pointer;
}
.pi-btn + .pi-btn[b-wxclzwlos0] { margin-left: 5px; }
.pi-btn:hover:not(:disabled)[b-wxclzwlos0] { background: #f3f4f6; }
.pi-btn:disabled[b-wxclzwlos0] { opacity: .55; cursor: default; }
/* «Importar» es una <label> (lleva el InputFile oculto): no tiene :disabled, se apaga con clase. */
.pi-btn-apagado[b-wxclzwlos0] { opacity: .55; cursor: default; pointer-events: none; }
.pi-btn-primary[b-wxclzwlos0] { background: #2563eb; border-color: #2563eb; color: #fff; }
.pi-btn-primary:hover:not(:disabled)[b-wxclzwlos0] { background: #1d4ed8; }
.pi-btn-peligro[b-wxclzwlos0] { border-color: #fecaca; color: #b91c1c; }
.pi-btn-peligro:hover:not(:disabled)[b-wxclzwlos0] { background: #fef2f2; }

.pi-acciones[b-wxclzwlos0] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* Botones de FILA en forma de icono. En el catálogo, tres botones con texto («Probar», «Guardar»,
   «Borrar») ocupaban más que varias columnas de datos juntas y empujaban el resto fuera de la vista. El
   icono conserva el mismo control y el mismo estado (deshabilitado, peligro); lo que dice el texto pasa
   al `title`, que ya llevaban todos. Se mantiene el tamaño de toque de 30 px: no es un enlace, es un
   botón que borra cosas. */
.pi-iconos[b-wxclzwlos0] { display: inline-flex; gap: 4px; align-items: center; }
.pi-icono[b-wxclzwlos0] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; font-size: .95rem; line-height: 1;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    cursor: pointer;
}
/* El glifo va dimensionado aparte del botón: los emojis que había antes heredaban el font-size de la
   caja, pero un Material Symbol necesita su propio tamaño (y su `font-variation-settings`, o se pinta
   con el grosor por defecto, que a 18 px se ve tosco junto al resto de la aplicación). 18 px es el
   mismo que usa el editor de menú para botones de esta medida. */
.pi-icono .material-symbols-rounded[b-wxclzwlos0] {
    font-size: 18px; line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.pi-icono:hover:not(:disabled)[b-wxclzwlos0] { background: #f3f4f6; }
.pi-icono:disabled[b-wxclzwlos0] { opacity: .45; cursor: default; }
.pi-icono-primary[b-wxclzwlos0] { background: #2563eb; border-color: #2563eb; color: #fff; }
.pi-icono-primary:hover:not(:disabled)[b-wxclzwlos0] { background: #1d4ed8; }
.pi-icono-peligro[b-wxclzwlos0] { border-color: #fecaca; color: #b91c1c; }
.pi-icono-peligro:hover:not(:disabled)[b-wxclzwlos0] { background: #fef2f2; }

/* Estados de una celda: «Configurada» / «No configurada», resultado de una prueba, origen efectivo.
   Verde y rojo son los mismos de toda la aplicación; el gris es la ausencia, no un fallo. */
.pi-si[b-wxclzwlos0] { color: #047857; font-weight: 600; }
.pi-no[b-wxclzwlos0] { color: #9ca3af; }
.pi-prueba[b-wxclzwlos0] { margin-top: 5px; font-size: .82rem; }
.pi-prueba-ok[b-wxclzwlos0] { color: #047857; }
.pi-prueba-mal[b-wxclzwlos0] { color: #b91c1c; }
.pi-prueba-sin[b-wxclzwlos0] { margin-top: 5px; font-size: .82rem; color: #9ca3af; }

.pi-origen[b-wxclzwlos0] { font-size: .82rem; }
.pi-origen-propio[b-wxclzwlos0] { color: #047857; font-weight: 600; }
.pi-origen-derivado[b-wxclzwlos0] { color: #1d4ed8; }
.pi-origen-nada[b-wxclzwlos0] { color: #9ca3af; }

/* Plan por cliente: el consumo manda, y quien se está disparando sale en rojo. */
.pi-gasto[b-wxclzwlos0] { font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }
.pi-gasto.pi-disparado[b-wxclzwlos0] { color: #b91c1c; }
.pi-nota-roja[b-wxclzwlos0] { font-size: .78rem; color: #b91c1c; margin-top: 2px; }

.pi-caps[b-wxclzwlos0] { white-space: nowrap; font-size: .82rem; display: flex; flex-direction: column; gap: 3px; }
.pi-caps label[b-wxclzwlos0] { display: inline-flex; align-items: center; gap: 5px; color: #374151; }

/* Cliente de prueba: una sola cifra, en línea con su etiqueta y su botón. */
.pi-linea[b-wxclzwlos0] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pi-linea label[b-wxclzwlos0] { font-size: .85rem; font-weight: 600; color: #374151; }

/* Banco de comparación: los campos se reparten el ancho y el resultado va debajo en tabla. */
.pi-banco[b-wxclzwlos0] { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pi-campo[b-wxclzwlos0] { display: flex; flex-direction: column; gap: 5px; }
.pi-campo-ancho[b-wxclzwlos0] { flex: 1 1 320px; }
.pi-campo label[b-wxclzwlos0] { font-size: .8rem; font-weight: 600; color: #374151; }
.pi-check[b-wxclzwlos0] { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: #374151; }

.pi-comparacion[b-wxclzwlos0] { margin-top: 16px; }
.pi-comparacion .pi-table td:first-child[b-wxclzwlos0] { font-weight: 600; color: #374151; white-space: nowrap; }
.pi-respuesta[b-wxclzwlos0] { white-space: pre-wrap; font-size: .84rem; line-height: 1.5; }
.pi-veredicto[b-wxclzwlos0] { margin: 10px 0 0; font-weight: 600; }
.pi-veredicto-igual[b-wxclzwlos0] { color: #047857; }
.pi-veredicto-distinto[b-wxclzwlos0] { color: #b91c1c; }
.pi-juez[b-wxclzwlos0] { margin: 6px 0 0; color: #4b5563; white-space: pre-wrap; font-size: .86rem; line-height: 1.55; }

@media (max-width: 880px) {
    .pi-page[b-wxclzwlos0] { padding: 16px; }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/RestablecerClavePage.razor.rz.scp.css */
/* Estilos propios de la pantalla de restablecer contraseña.
   Sin ::deep y sin depender de reglas globales: el CSS scoped de una página copiada que no trae su
   .razor.css es exactamente el motivo por el que otras pantallas «salieron sin estilo». */

.rc-page[b-4u7564pqz5] {
    padding: 1.5rem;
    max-width: 62rem;
    margin: 0 auto;
}

.rc-header[b-4u7564pqz5] {
    margin-bottom: 1.25rem;
}

.rc-title[b-4u7564pqz5] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.rc-subtitle[b-4u7564pqz5] {
    color: var(--text-muted, #6b7280);
    font-size: .9rem;
}

.rc-card[b-4u7564pqz5] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Acceso denegado: se distingue del resto porque es lo único que se ve sin elevación. */
.rc-denied[b-4u7564pqz5] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border-color: var(--warning-border, #fcd34d);
    background: var(--warning-bg, #fffbeb);
}

.rc-denied-title[b-4u7564pqz5] {
    font-weight: 600;
    margin-bottom: .25rem;
}

.rc-buscador[b-4u7564pqz5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
}

.rc-buscador input[b-4u7564pqz5] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
}

.rc-tabla[b-4u7564pqz5] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.rc-tabla th[b-4u7564pqz5],
.rc-tabla td[b-4u7564pqz5] {
    text-align: left;
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.rc-tabla th[b-4u7564pqz5] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.rc-acciones[b-4u7564pqz5] {
    text-align: right;
    white-space: nowrap;
}

.rc-empty[b-4u7564pqz5] {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

/* SP8: la cuenta cerrada por intentos se marca en la propia fila, para que quien busca a alguien
   que «no puede entrar» vea el motivo antes de cambiarle la contraseña sin necesidad. */
.rc-badge[b-4u7564pqz5] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.rc-badge-bloqueada[b-4u7564pqz5] {
    background: var(--warning-bg, #fff8e1);
    color: var(--warning-text, #92400e);
}

.rc-clave[b-4u7564pqz5] {
    margin-left: .4rem;
    color: var(--text-muted, #6b7280);
    font-size: .8rem;
}

.rc-form-title[b-4u7564pqz5] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

/* El aviso va DENTRO del formulario, no como toast: quien cambia una contraseña ajena tiene que leer
   antes de escribir que la persona no va a recibir ningún correo avisándola. */
.rc-aviso[b-4u7564pqz5] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    background: var(--info-bg, #eff6ff);
    border: 1px solid var(--info-border, #bfdbfe);
    border-radius: .375rem;
    padding: .625rem .75rem;
    margin-bottom: .875rem;
    font-size: .875rem;
}

.rc-campo[b-4u7564pqz5] {
    display: block;
    margin-bottom: .75rem;
}

.rc-campo span[b-4u7564pqz5] {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.rc-campo input[b-4u7564pqz5] {
    width: 100%;
    max-width: 22rem;
    padding: .5rem .625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    font-size: .95rem;
}

.rc-form-acciones[b-4u7564pqz5] {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.rc-btn[b-4u7564pqz5] {
    padding: .5rem .875rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: .375rem;
    background: var(--surface, #fff);
    font-size: .875rem;
    cursor: pointer;
}

.rc-btn:hover:not(:disabled)[b-4u7564pqz5] {
    background: var(--surface-hover, #f9fafb);
}

.rc-btn:disabled[b-4u7564pqz5] {
    opacity: .55;
    cursor: not-allowed;
}

.rc-btn-primary[b-4u7564pqz5] {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}

.rc-btn-primary:hover:not(:disabled)[b-4u7564pqz5] {
    background: var(--primary-hover, #1d4ed8);
}

.rc-denied .rc-btn-primary[b-4u7564pqz5] {
    margin-top: .75rem;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/ServidoresWebPage.razor.rz.scp.css */
/* SW1 — Pantalla del parque de servidores web. CSS scoped: vive junto a su .razor y no se comparte.
   El ::deep solo hace falta para lo que pintan TablaPaginada y CommandBar (las filas, la barra). */

/* A todo el ancho: sin tope propio. */
.sw-page[b-c0qyuispt8] {
    padding: 0;
}

/* Sin `flex-wrap`, como en Técnicos: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.sw-header[b-c0qyuispt8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 9px;
}

.sw-header-text[b-c0qyuispt8] {
    flex: 1 1 auto;
    min-width: 0;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.sw-header-actions[b-c0qyuispt8] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ── Contenedor de TablaPaginada (parque y webs alojadas) ─────────────────────────────────────────
   Flex-columna, que es lo que espera .tp-panel; la tabla marca su alto y no se desplaza por dentro. */
.sw-tp[b-c0qyuispt8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sw-tp[b-c0qyuispt8]  .tp-panel { min-height: auto; }

/* Fila abierta e inactiva: las pinta TablaPaginada, de ahí el ::deep. */
.sw-tp[b-c0qyuispt8]  tr.sw-fila-activa > td { background: var(--fondo-activo, #eff6ff); }
.sw-tp[b-c0qyuispt8]  tr.sw-fila-activa > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
.sw-tp[b-c0qyuispt8]  tr.sw-fila-inactiva { opacity: .55; }

/* La casilla de marcar, centrada en su columna. Pulsarla no abre la ficha (stopPropagation). */
.sw-tp[b-c0qyuispt8]  .sw-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.sw-marcar-todas[b-c0qyuispt8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.sw-title[b-c0qyuispt8] {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.sw-subtitle[b-c0qyuispt8] {
    color: var(--texto-suave, #6b7280);
    font-size: .875rem;
    max-width: 70ch;
}

/* La franja de cifras del parque, entre la cabecera y las dos columnas. */
.sw-kpis[b-c0qyuispt8] {
    margin-bottom: 1.25rem;
}

/* ── Lista con scroll propio (comprobaciones del servidor) ───────────────────────────────────────
   El scroll vive en la tabla y no en la página: una lista sin tope empuja lo que va debajo fuera de
   la pantalla. Las webs alojadas ya no lo usan: van paginadas. */
.sw-tabla-scroll[b-c0qyuispt8] {
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 6px;
}

/* La cabecera se queda fija al hacer scroll: sin esto, a la fila 40 ya no se sabe qué columna es cuál. */
.sw-tabla-scroll thead th[b-c0qyuispt8] {
    position: sticky;
    top: 0;
    background: var(--fondo-card, #fff);
    z-index: 1;
}

.sw-filtros[b-c0qyuispt8] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .625rem;
}

.sw-buscador[b-c0qyuispt8] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Barra de acciones sobre lo marcado. Solo aparece cuando hay algo marcado: una barra de acciones
   permanentemente vacía es ruido que se aprende a ignorar. */
.sw-marcadas[b-c0qyuispt8] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .625rem;
    padding: .5rem .75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}

/* ── Semáforo de estado ───────────────────────────────────────────────────────────────────────── */
.sw-estado[b-c0qyuispt8] {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sw-estado-bien[b-c0qyuispt8] { background: #dcfce7; color: #166534; }
.sw-estado-mal[b-c0qyuispt8] { background: #fee2e2; color: #991b1b; }
.sw-estado-aviso[b-c0qyuispt8] { background: #ffedd5; color: #9a3412; }
.sw-estado-gris[b-c0qyuispt8] { background: #f1f5f9; color: #475569; }

/* Una web que debería tener copia y no la tiene: se ve sin tener que buscarla. */
.sw-sin-copia[b-c0qyuispt8] {
    color: #991b1b;
    font-weight: 600;
    font-size: .8125rem;
}

/* ── Trabajo en curso y destino de copias ─────────────────────────────────────────────────────── */
.sw-trabajando[b-c0qyuispt8],
.sw-destino[b-c0qyuispt8] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sw-trabajando[b-c0qyuispt8] {
    border-left: 3px solid #2563eb;
}

.sw-girando[b-c0qyuispt8] {
    animation: sw-giro-b-c0qyuispt8 1.2s linear infinite;
    color: #2563eb;
}

@keyframes sw-giro-b-c0qyuispt8 {
    to { transform: rotate(360deg); }
}

/* Qué hacer con un problema. Solo aparece cuando hay algo que hacer: un consejo junto a cada línea
   en verde es ruido que se aprende a saltar. */
.sw-que-hacer[b-c0qyuispt8] {
    margin-top: .25rem;
    padding: .375rem .5rem;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 4px 4px 0;
    font-size: .8125rem;
}

/* La salida de una comprobación: ancho fijo y con su propio scroll, que un log largo no estire la fila. */
.sw-salida[b-c0qyuispt8] {
    margin: .25rem 0 0;
    padding: .5rem;
    background: #f8fafc;
    border-radius: 4px;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 9rem;
    overflow-y: auto;
}

.sw-acciones[b-c0qyuispt8] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.sw-btn[b-c0qyuispt8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 1px solid var(--borde, #d1d5db);
    border-radius: 6px;
    background: var(--fondo-card, #fff);
    cursor: pointer;
    font-size: .875rem;
}

.sw-btn:hover:not(:disabled)[b-c0qyuispt8] { background: var(--fondo-hover, #f3f4f6); }
.sw-btn:disabled[b-c0qyuispt8] { opacity: .55; cursor: default; }

.sw-btn-primario[b-c0qyuispt8] {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.sw-btn-primario:hover:not(:disabled)[b-c0qyuispt8] { background: var(--primario-oscuro, #1d4ed8); }

/* Revocar corta el acceso a una máquina de producción: se pinta como lo que es. */
.sw-btn-peligro[b-c0qyuispt8] {
    border-color: var(--peligro, #dc2626);
    color: var(--peligro, #dc2626);
}

.sw-btn-peligro:hover:not(:disabled)[b-c0qyuispt8] { background: #fef2f2; }

.sw-btn-icono[b-c0qyuispt8] {
    border: none;
    background: none;
    cursor: pointer;
    padding: .15rem;
    color: var(--texto-suave, #6b7280);
    line-height: 1;
}

.sw-columnas[b-c0qyuispt8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sw-card[b-c0qyuispt8] {
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: var(--fondo-card, #fff);
    padding: 1rem;
}

.sw-card-titulo[b-c0qyuispt8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.sw-subtitulo[b-c0qyuispt8] {
    font-weight: 600;
    font-size: .875rem;
    margin: 1rem 0 .5rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.sw-nota[b-c0qyuispt8] {
    font-weight: 400;
    font-size: .8rem;
    color: var(--texto-suave, #6b7280);
}

.sw-empty[b-c0qyuispt8] {
    color: var(--texto-suave, #6b7280);
    padding: .75rem 0;
    font-size: .875rem;
}

.sw-denied[b-c0qyuispt8] {
    display: flex;
    gap: .75rem;
    align-items: center;
    color: var(--texto-suave, #6b7280);
}

.sw-denied-title[b-c0qyuispt8] { font-weight: 600; color: var(--texto, #111827); }

/* ── Tabla ───────────────────────────────────────────────────────────────────────────────────── */

.sw-tabla[b-c0qyuispt8] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.sw-tabla th[b-c0qyuispt8] {
    text-align: left;
    font-weight: 600;
    padding: .5rem .6rem;
    border-bottom: 2px solid var(--borde, #e5e7eb);
    color: var(--texto-suave, #6b7280);
    font-size: .8rem;
}

.sw-tabla td[b-c0qyuispt8] {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--borde-suave, #f3f4f6);
    vertical-align: top;
}

.sw-tabla tbody tr[b-c0qyuispt8] { cursor: pointer; }
.sw-tabla tbody tr:hover[b-c0qyuispt8] { background: var(--fondo-hover, #f9fafb); }

.sw-fila-activa[b-c0qyuispt8] { background: var(--fondo-activo, #eff6ff) !important; }

/* Un servidor inactivo sigue en la lista con su historial, pero no se sondea: se ve apagado. */
.sw-fila-inactiva[b-c0qyuispt8] { opacity: .55; }

.sw-num[b-c0qyuispt8] { text-align: right; }
.sw-nombre[b-c0qyuispt8] { font-weight: 500; }

.sw-detalle[b-c0qyuispt8] {
    font-size: .8rem;
    color: var(--texto-suave, #6b7280);
}

.sw-ok[b-c0qyuispt8] { color: var(--exito, #059669); }
.sw-pendiente[b-c0qyuispt8] { color: var(--aviso, #d97706); }

/* ── Credenciales: aviso de rotación y prueba de acceso (SW14) ─────────────────────────────────── */

/* El aviso va en la propia fila del listado y no en un panel aparte: un aviso que vive en otra
   pantalla es un aviso que nadie abre. */
.sw-aviso-rotacion[b-c0qyuispt8] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--aviso, #d97706);
}

.sw-aviso-rotacion .material-symbols-rounded[b-c0qyuispt8] { font-size: .95rem; }

/* El resultado de «probar conexión» se queda a la vista hasta la siguiente prueba. Un toast que se
   desvanece obligaría a repetir la prueba solo para releer lo que dijo. */
.sw-pruebas[b-c0qyuispt8] {
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sw-prueba[b-c0qyuispt8] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .8rem;
}

.sw-prueba .material-symbols-rounded[b-c0qyuispt8] { font-size: 1rem; }

.sw-prueba-ok[b-c0qyuispt8] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.sw-prueba-mal[b-c0qyuispt8] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── Contención y restauración (SW15) ──────────────────────────────────────────────────────────── */

/* Una web contenida se ve nada más abrirla: es lo que explica por qué no responde, y sin este aviso
   alguien perdería media hora diagnosticando un corte que hicimos nosotros. */
.sw-contenida[b-c0qyuispt8] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .7rem;
    padding: .6rem .7rem;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #991b1b;
}

.sw-restaurar[b-c0qyuispt8] {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--borde, #e5e7eb);
}

/* La casilla de restauración limpia es LA decisión de esta pantalla: se pinta grande y con su
   explicación al lado, no como una casilla más en una fila de opciones. */
.sw-casilla-limpia[b-c0qyuispt8] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .8rem 0;
    padding: .65rem .75rem;
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 6px;
    background: var(--fondo-suave, #fafafa);
    cursor: pointer;
}

.sw-casilla-limpia input[b-c0qyuispt8] { margin-top: .2rem; }

/* Lo que va a pasar, dicho antes de que pase y sin rodeos: se borra una carpeta de una web viva. */
.sw-aviso-grave[b-c0qyuispt8] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .8rem;
    padding: .65rem .75rem;
    border: 1px solid #fca5a5;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fef2f2;
    color: #991b1b;
}

.sw-causa-pendiente[b-c0qyuispt8] {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.sw-causa-pendiente input[b-c0qyuispt8] { flex: 1 1 auto; min-width: 0; }

/* ── Chips ───────────────────────────────────────────────────────────────────────────────────── */

.sw-chip[b-c0qyuispt8] {
    display: inline-block;
    padding: .1rem .45rem;
    margin: 0 .2rem .2rem 0;
    border-radius: 4px;
    font-size: .75rem;
    background: var(--fondo-hover, #f3f4f6);
    border: 1px solid var(--borde, #e5e7eb);
    white-space: nowrap;
}

/* El nivel decide qué se puede hacer con una web: se distingue de un vistazo y no por el texto. */
.sw-chip-propio[b-c0qyuispt8] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.sw-chip-mantenimiento[b-c0qyuispt8] { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.sw-chip-alojado[b-c0qyuispt8] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sw-chip-sinclasificar[b-c0qyuispt8] { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
.sw-chip-mal[b-c0qyuispt8] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sw-chip-base[b-c0qyuispt8] { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

/* La referencia con la que se comparan las demás: se distingue de un vistazo, porque el porcentaje
   de cambio de todas las filas se lee respecto de ella. */
.sw-fila-base[b-c0qyuispt8] { background: #fafaff; }

/* La puerta del módulo (SW16). Cerrada se ve como un aviso; abierta, discreta: lo que tiene que
   destacar es que FALTA desbloquear, no que ya está hecho. */
.sw-puerta[b-c0qyuispt8] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: #fffbeb;
    border-color: #fde68a;
    margin-bottom: 1rem;
}

.sw-puerta-abierta[b-c0qyuispt8] {
    background: var(--fondo-card, #fff);
    border-color: var(--borde, #e5e7eb);
}

.sw-puerta-texto[b-c0qyuispt8] {
    flex: 1 1 320px;
    font-size: .875rem;
}

.sw-puerta-campos[b-c0qyuispt8] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.sw-puerta-campos input[b-c0qyuispt8] {
    padding: .4rem .5rem;
    border: 1px solid var(--borde, #d1d5db);
    border-radius: 5px;
    font-size: .875rem;
    min-width: 200px;
}

.sw-quehacer[b-c0qyuispt8] {
    font-size: .8rem;
    color: var(--aviso, #92400e);
    margin-top: .15rem;
}

/* ── Formularios ─────────────────────────────────────────────────────────────────────────────── */

.sw-campos[b-c0qyuispt8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
}

.sw-campos label[b-c0qyuispt8] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--texto-suave, #6b7280);
}

.sw-campos input:not([type="checkbox"])[b-c0qyuispt8],
.sw-campos select[b-c0qyuispt8],
.sw-campos textarea[b-c0qyuispt8] {
    padding: .4rem .5rem;
    border: 1px solid var(--borde, #d1d5db);
    border-radius: 5px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--texto, #111827);
    background: var(--fondo-input, #fff);
}

.sw-campos textarea[b-c0qyuispt8] { resize: vertical; font-family: ui-monospace, monospace; font-size: .8rem; }

.sw-check[b-c0qyuispt8] {
    flex-direction: row !important;
    align-items: center;
    gap: .4rem !important;
    color: var(--texto, #111827) !important;
    font-weight: 400 !important;
}

.sw-capacidades[b-c0qyuispt8] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

/* «••• configurada» / «nueva sin guardar»: lo único que se enseña de un secreto. */
.sw-marcador[b-c0qyuispt8] {
    font-weight: 400;
    font-size: .75rem;
    color: var(--texto-suave, #9ca3af);
    font-style: italic;
}

.sw-aviso[b-c0qyuispt8] {
    margin-top: .75rem;
    padding: .6rem .75rem;
    border-radius: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: .8rem;
}

.sw-ficha .sw-acciones[b-c0qyuispt8] { margin-top: 1rem; }

@media (max-width: 700px) {
    .sw-page[b-c0qyuispt8] { padding: 0; }
    .sw-campos[b-c0qyuispt8] { grid-template-columns: 1fr; }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/TenantsPage.razor.rz.scp.css */
.tn-page[b-ypr56xl56s] { padding: 0; }   /* como Clientes: el borde lo pone .main-body */

.tn-header[b-ypr56xl56s] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 9px; }
.tn-header-text[b-ypr56xl56s] { flex: 1 1 auto; min-width: 0; }
.tn-title[b-ypr56xl56s] { font-size: 1.4rem; font-weight: 700; margin: 0; }
.tn-subtitle[b-ypr56xl56s] { color: #6b7280; font-size: .85rem; margin-top: 2px; }
/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha (igual que en Técnicos). */
.tn-header-actions[b-ypr56xl56s] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }

.tn-card[b-ypr56xl56s] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tn-empty[b-ypr56xl56s] { padding: 28px; text-align: center; color: #6b7280; }
.tn-denied[b-ypr56xl56s] { display: flex; align-items: center; gap: 14px; text-align: left; }
.tn-denied .material-symbols-rounded[b-ypr56xl56s] { font-size: 32px; color: #9ca3af; }
.tn-denied-title[b-ypr56xl56s] { font-weight: 700; color: #374151; }

.tn-main[b-ypr56xl56s] { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .tn-main[b-ypr56xl56s] { grid-template-columns: 1fr; } }

/* Lista */
.tn-list-panel[b-ypr56xl56s] { padding: 14px; }
.tn-list-head[b-ypr56xl56s] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tn-section-title[b-ypr56xl56s] { font-weight: 700; color: #374151; }
.tn-search[b-ypr56xl56s] { position: relative; }
.tn-search-icon[b-ypr56xl56s] { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; }
.tn-search-input[b-ypr56xl56s] { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }

.tn-list[b-ypr56xl56s] { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.tn-card-item[b-ypr56xl56s] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.tn-card-item:hover[b-ypr56xl56s] { background: #f9fafb; }
.tn-card-item.active[b-ypr56xl56s] { border-color: #2563eb; background: #eff6ff; }
.tn-card-item-texts[b-ypr56xl56s] { display: flex; flex-direction: column; min-width: 0; }
.tn-card-item-name[b-ypr56xl56s] { font-weight: 600; color: #111827; }
.tn-card-item-desc[b-ypr56xl56s] { font-size: .78rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-list-empty[b-ypr56xl56s] { padding: 16px; text-align: center; color: #9ca3af; font-size: .85rem; }

/* Badges */
.tn-badge[b-ypr56xl56s] { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tn-badge-activo[b-ypr56xl56s] { background: #dcfce7; color: #166534; }
.tn-badge-inactivo[b-ypr56xl56s] { background: #fee2e2; color: #991b1b; }
.tn-badge-prueba[b-ypr56xl56s] { background: #dbeafe; color: #1e40af; }

/* Detalle */
.tn-detail-panel[b-ypr56xl56s] { min-height: 280px; }
.tn-tabs[b-ypr56xl56s] { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid #eef0f3; }
.tn-tab[b-ypr56xl56s] { border: none; background: none; padding: 8px 12px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer; }
.tn-tab.active[b-ypr56xl56s] { color: #2563eb; border-bottom-color: #2563eb; }
.tn-detail-scroll[b-ypr56xl56s] { padding: 16px; }

.tn-fields[b-ypr56xl56s] { display: flex; flex-direction: column; gap: 14px; }
.tn-field[b-ypr56xl56s] { display: flex; flex-direction: column; gap: 4px; }
.tn-field label[b-ypr56xl56s] { font-size: .8rem; font-weight: 600; color: #374151; }
.tn-input[b-ypr56xl56s] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }
.tn-input:focus[b-ypr56xl56s] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tn-field-hint[b-ypr56xl56s] { font-size: .78rem; color: #6b7280; }
.tn-estado-row[b-ypr56xl56s] { display: flex; align-items: center; gap: 10px; }

/* Alojamiento: bloque informativo que se separa del resto con una regla, porque queda entre dos
   secciones de acciones y sin ella se lee como parte de la de abajo. */
.tn-alojamiento[b-ypr56xl56s] { border-top: 1px solid #e5e7eb; padding-top: 14px; margin-top: 14px; }
.tn-alojamiento .tn-meta-grid[b-ypr56xl56s] { margin: 8px 0 10px; }
.tn-alojamiento-aviso[b-ypr56xl56s] { color: #b45309; }

/* Traslado a otra base (T4). Se enmarca porque es la única acción de esta ficha que MUEVE DATOS, y
   leerla como un campo más del formulario es justo lo que no debe pasar. */
.tn-traslado[b-ypr56xl56s] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.tn-traslado-titulo[b-ypr56xl56s] {
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.tn-traslado select[b-ypr56xl56s] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .9rem;
}

/* Los pasos van numerados y en línea: el orden importa y saltarse uno no es una opción. */
.tn-traslado-pasos[b-ypr56xl56s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.tn-traslado-resultado[b-ypr56xl56s] {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.5;
}

.tn-traslado-resultado code[b-ypr56xl56s] {
    background: rgba(0, 0, 0, .06);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}

/* SP14: la gente del cliente, dentro del resultado del traslado. Va separada con una regla porque
   es la parte que hay que LEER antes de conmutar: quién viaja y qué choca. */
.tn-traslado-identidad[b-ypr56xl56s] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

.tn-traslado-identidad ul[b-ypr56xl56s] {
    margin: 4px 0 0 18px;
    padding: 0;
}

/* Secciones del detalle (Contrato, Despliegue): se separan con regla y título porque el detalle ya
   tenía dos bloques y sin separación todo se leía como una lista de campos sueltos. */
.tn-seccion[b-ypr56xl56s] { border-top: 1px solid #e5e7eb; padding-top: 14px; margin-top: 18px; }
.tn-seccion-titulo[b-ypr56xl56s] { font-size: .82rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.tn-seccion .tn-meta-grid[b-ypr56xl56s] { margin: 14px 0 0; flex-wrap: wrap; row-gap: 12px; }

/* Aviso dentro de una pista: lo que el técnico tiene que saber aunque no lo esté buscando. */
.tn-hint-aviso[b-ypr56xl56s] { background: #fffbeb; color: #78350f; border-radius: 6px; padding: 8px 10px; }

/* Fichero de reparto: se lee entero de un vistazo, así que se muestra tal cual y con desplazamiento
   propio en vez de recortarlo. */
.tn-reparto[b-ypr56xl56s] {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    line-height: 1.5;
    color: #374151;
    max-height: 320px;
    overflow: auto;
    white-space: pre;
}

/* Rasgos del cliente */
.tn-etiquetas[b-ypr56xl56s] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tn-etiqueta[b-ypr56xl56s] { display: inline-flex; align-items: center; gap: 4px; background: #f3f4f6; color: #374151; font-size: .78rem; font-weight: 600; padding: 3px 6px 3px 10px; border-radius: 999px; }
.tn-etiqueta-quitar[b-ypr56xl56s] { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.tn-etiqueta-quitar:hover[b-ypr56xl56s] { color: #991b1b; }
.tn-etiqueta-quitar:disabled[b-ypr56xl56s] { opacity: .4; cursor: default; }

.tn-meta-grid[b-ypr56xl56s] { display: flex; gap: 24px; margin: 16px 0; }
.tn-meta[b-ypr56xl56s] { display: flex; flex-direction: column; }
.tn-meta-label[b-ypr56xl56s] { font-size: .72rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .03em; }
.tn-meta-value[b-ypr56xl56s] { font-weight: 600; color: #374151; }

/* Botones */
.tn-btn[b-ypr56xl56s] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.tn-btn:disabled[b-ypr56xl56s] { opacity: .55; cursor: default; }
.tn-btn-ico[b-ypr56xl56s] { font-size: 18px; }
.tn-btn-ghost[b-ypr56xl56s] { background: #fff; border-color: #d1d5db; color: #374151; }
.tn-btn-ghost:hover:not(:disabled)[b-ypr56xl56s] { background: #f3f4f6; }
.tn-btn-primary[b-ypr56xl56s] { background: #2563eb; color: #fff; }
.tn-btn-primary:hover:not(:disabled)[b-ypr56xl56s] { background: #1d4ed8; }
.tn-btn-danger[b-ypr56xl56s] { background: #dc2626; color: #fff; }
.tn-btn-danger:hover:not(:disabled)[b-ypr56xl56s] { background: #b91c1c; }

.tn-detail-actions[b-ypr56xl56s] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Zona de peligro */
.tn-danger[b-ypr56xl56s] { margin-top: 20px; border: 1px solid #fecaca; border-radius: 10px; padding: 14px; background: #fff7f7; }
.tn-danger-head[b-ypr56xl56s] { font-weight: 700; color: #991b1b; margin-bottom: 10px; }
.tn-danger-row[b-ypr56xl56s] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tn-danger-text[b-ypr56xl56s] { font-size: .82rem; color: #7f1d1d; }
.tn-danger-box[b-ypr56xl56s] { display: flex; flex-direction: column; gap: 12px; }
.tn-danger-warning[b-ypr56xl56s] { display: flex; align-items: center; gap: 8px; color: #991b1b; font-size: .85rem; }
.tn-danger-warning .material-symbols-rounded[b-ypr56xl56s] { font-size: 20px; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/TrabajosLargosPage.razor.rz.scp.css */
/* Todo el ancho y todo el alto de la pantalla, como Auditoría: el borde lo pone .main-body, y lo último
   de la página (la lista o el aviso de vacío) se queda con el alto que sobra. */
.tl-page[b-q7qncxmmw3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    min-height: 100%;
    box-sizing: border-box;
}

.tl-header[b-q7qncxmmw3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tl-title[b-q7qncxmmw3] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.tl-subtitle[b-q7qncxmmw3] {
    margin-top: 4px;
    color: var(--texto-secundario, #64748b);
    font-size: 0.9rem;
}

.tl-card[b-q7qncxmmw3] {
    background: var(--fondo-tarjeta, #fff);
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
}

.tl-vacio[b-q7qncxmmw3] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-secundario, #64748b);
}

/* El aviso de «no hay trabajos» (o de acceso / cargando) ocupa el alto que sobra, con el texto centrado. */
.tl-page > .tl-vacio[b-q7qncxmmw3] {
    flex: 1 1 auto;
    justify-content: center;
}

.tl-aviso[b-q7qncxmmw3] {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.tl-filtros[b-q7qncxmmw3] {
    display: flex;
    gap: 10px;
}

.tl-select[b-q7qncxmmw3] {
    height: 34px;
    min-width: 220px;
}

.tl-lista[b-q7qncxmmw3] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
}

.tl-fila[b-q7qncxmmw3] {
    border-left-width: 4px;
}

.tl-tono-neutro[b-q7qncxmmw3] { border-left-color: #94a3b8; }
.tl-tono-enmarcha[b-q7qncxmmw3] { border-left-color: #2563eb; }
.tl-tono-bien[b-q7qncxmmw3] { border-left-color: #16a34a; }
.tl-tono-aviso[b-q7qncxmmw3] { border-left-color: #f59e0b; }
.tl-tono-mal[b-q7qncxmmw3] { border-left-color: #dc2626; }

.tl-fila-cabeza[b-q7qncxmmw3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.tl-fila-titulo[b-q7qncxmmw3] {
    display: flex;
    flex-direction: column;
}

.tl-desc[b-q7qncxmmw3] {
    font-weight: 600;
}

.tl-tipo[b-q7qncxmmw3] {
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.tl-estado[b-q7qncxmmw3] {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.tl-tono-enmarcha .tl-estado[b-q7qncxmmw3] { color: #2563eb; }
.tl-tono-bien .tl-estado[b-q7qncxmmw3] { color: #16a34a; }
.tl-tono-aviso .tl-estado[b-q7qncxmmw3] { color: #b45309; }
.tl-tono-mal .tl-estado[b-q7qncxmmw3] { color: #dc2626; }

.tl-barra[b-q7qncxmmw3] {
    margin-top: 10px;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}

.tl-barra-relleno[b-q7qncxmmw3] {
    height: 100%;
    background: #2563eb;
    transition: width 0.4s ease;
}

.tl-avance[b-q7qncxmmw3] {
    margin-top: 6px;
    font-size: 0.85rem;
}

.tl-mensaje[b-q7qncxmmw3] {
    margin-top: 8px;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f8fafc;
}

.tl-tono-mal .tl-mensaje[b-q7qncxmmw3] { background: #fef2f2; color: #991b1b; }
.tl-tono-aviso .tl-mensaje[b-q7qncxmmw3] { background: #fffbeb; color: #92400e; }

.tl-fila-pie[b-q7qncxmmw3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.tl-hueco[b-q7qncxmmw3] {
    flex: 1;
}

.tl-btn[b-q7qncxmmw3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--borde, #cbd5e1);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
}

.tl-btn .material-symbols-rounded[b-q7qncxmmw3] {
    font-size: 18px;
}

.tl-btn-peligro[b-q7qncxmmw3] {
    color: #dc2626;
    border-color: #fecaca;
}

.tl-btn:disabled[b-q7qncxmmw3] {
    opacity: 0.5;
    cursor: default;
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/VueltaAtrasPage.razor.rz.scp.css */
.vat-page[b-g5q0m7gjo5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    max-width: 1100px;
}

.vat-header[b-g5q0m7gjo5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vat-title[b-g5q0m7gjo5] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.vat-subtitle[b-g5q0m7gjo5] {
    margin-top: 4px;
    color: var(--texto-secundario, #64748b);
    font-size: 0.9rem;
    max-width: 720px;
}

.vat-card[b-g5q0m7gjo5] {
    background: var(--fondo-tarjeta, #fff);
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vat-fila[b-g5q0m7gjo5] {
    border-left: 4px solid #f59e0b;
}

.vat-cerrada[b-g5q0m7gjo5] {
    border-left-color: #94a3b8;
    opacity: 0.8;
}

.vat-vacio[b-g5q0m7gjo5] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--texto-secundario, #64748b);
}

.vat-check[b-g5q0m7gjo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.vat-fila-cabeza[b-g5q0m7gjo5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vat-fila-titulo[b-g5q0m7gjo5] {
    display: flex;
    flex-direction: column;
}

.vat-fuerte[b-g5q0m7gjo5] {
    font-weight: 600;
}

.vat-detalle[b-g5q0m7gjo5] {
    font-size: 0.8rem;
    color: var(--texto-secundario, #64748b);
}

.vat-estado[b-g5q0m7gjo5] {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.vat-motivo[b-g5q0m7gjo5] {
    font-size: 0.9rem;
}

.vat-perdera[b-g5q0m7gjo5] {
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
}

.vat-resultado[b-g5q0m7gjo5] {
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f8fafc;
    white-space: pre-line;
}

.vat-acciones[b-g5q0m7gjo5] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.vat-campo[b-g5q0m7gjo5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vat-input[b-g5q0m7gjo5] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px;
}

.vat-hueco[b-g5q0m7gjo5] {
    flex: 1;
}

.vat-btn[b-g5q0m7gjo5] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px;
    background: var(--fondo-tarjeta, #fff);
    cursor: pointer;
    font-size: 0.85rem;
}

.vat-btn-principal[b-g5q0m7gjo5] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.vat-btn-peligro[b-g5q0m7gjo5] {
    color: #b91c1c;
    border-color: #fecaca;
}

.vat-btn:disabled[b-g5q0m7gjo5] {
    opacity: 0.5;
    cursor: default;
}

.vat-modal[b-g5q0m7gjo5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(460px, 80vw);
}

.vat-modal-botones[b-g5q0m7gjo5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .vat-page[b-g5q0m7gjo5] {
        padding: 14px 16px;
    }

    .vat-header[b-g5q0m7gjo5] {
        flex-direction: column;
    }
}
/* _content/ErpPowergest/Presentation/Tareas/Pages/ProgramacionesPage.razor.rz.scp.css */
/*
    Tareas (T2). Mismo vocabulario visual que «Facturación recurrente», «Asientos predefinidos» e
    «Inmovilizado»: mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    otra página lleva su propio atributo de scope y no alcanza a esta. Referenciar sus clases sin
    declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y con suelo en la pantalla: la página es una columna flex y la lista se estira hasta abajo. */
.op-page[b-f3d6y81ozk] { padding: 0; color: #1f2933; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }

/* Sin `flex-wrap`, como en Técnicos: si la barra bajara de línea, su script nunca vería que falta sitio
   y no replegaría nada al menú «···». */
.op-header[b-f3d6y81ozk] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; margin-bottom: 9px; }
.op-header-text[b-f3d6y81ozk] { flex: 1 1 auto; min-width: 0; }
/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.op-header-actions[b-f3d6y81ozk] { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }
.op-title[b-f3d6y81ozk] { font-size: 1.6rem; font-weight: 700; margin: 0; }
.op-subtitle[b-f3d6y81ozk] { color: #61707d; font-size: .9rem; margin-top: .15rem; }

.op-card[b-f3d6y81ozk] { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.op-card-head[b-f3d6y81ozk] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.op-card-title[b-f3d6y81ozk] { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.op-card-actions[b-f3d6y81ozk] { margin-top: .9rem; }

.op-subhead[b-f3d6y81ozk] { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 700; margin: 1.1rem 0 .4rem; }

.op-form-row[b-f3d6y81ozk] { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .9rem; }
.op-field[b-f3d6y81ozk] { display: flex; flex-direction: column; gap: .25rem; }
.op-field-ancho[b-f3d6y81ozk] { flex: 1 1 16rem; }
.op-field label[b-f3d6y81ozk] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 600; }

.op-select[b-f3d6y81ozk], .op-input[b-f3d6y81ozk] { border: 1px solid #cdd5df; border-radius: 8px; padding: .45rem .6rem; font-size: .9rem; background: #fff; color: #1f2933; }
.op-select[b-f3d6y81ozk] { min-width: 7rem; }
.op-input-corto[b-f3d6y81ozk] { width: 7rem; }
.op-textarea[b-f3d6y81ozk] { width: 100%; resize: vertical; font-family: inherit; }
.op-inline[b-f3d6y81ozk] { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.op-actions[b-f3d6y81ozk] { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }

.op-btn[b-f3d6y81ozk] { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; border-radius: 8px; padding: .5rem .85rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.op-btn:disabled[b-f3d6y81ozk] { opacity: .55; cursor: default; }
.op-btn-ico[b-f3d6y81ozk] { font-size: 1.05rem; }
.op-btn-primary[b-f3d6y81ozk] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-f3d6y81ozk] { background: #245cd0; }
.op-btn-ghost[b-f3d6y81ozk] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-f3d6y81ozk] { background: #e7edf4; }
.op-btn-danger-ghost[b-f3d6y81ozk] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-f3d6y81ozk] { background: #fdf1f2; }

.op-icon-btn[b-f3d6y81ozk] { background: none; border: none; color: #61707d; cursor: pointer; padding: .15rem; line-height: 1; border-radius: 6px; }
.op-icon-btn:hover:not(:disabled)[b-f3d6y81ozk] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-f3d6y81ozk] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-f3d6y81ozk] { font-size: 1.15rem; }

.op-grid-wrapper[b-f3d6y81ozk] { overflow-x: auto; }
.op-table[b-f3d6y81ozk] { width: 100%; border-collapse: collapse; font-size: .86rem; }
.op-table th[b-f3d6y81ozk] { text-align: left; color: #61707d; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; padding: .4rem .5rem; border-bottom: 1px solid #e3e8ee; background: #fff; }
.op-table td[b-f3d6y81ozk] { padding: .45rem .5rem; border-bottom: 1px solid #f0f3f7; vertical-align: middle; }
.op-col-acciones[b-f3d6y81ozk] { width: 5.5rem; white-space: nowrap; text-align: right; }
.op-table-click tbody tr[b-f3d6y81ozk] { cursor: pointer; }
.op-table-click tbody tr:hover[b-f3d6y81ozk] { background: #f5f8fc; }
.op-row-sel[b-f3d6y81ozk], .op-table-click tbody tr.op-row-sel:hover[b-f3d6y81ozk] { background: #e8f0fe; }

.op-check[b-f3d6y81ozk] { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.op-check-campo[b-f3d6y81ozk] { align-self: center; padding-bottom: .45rem; }

.op-muted[b-f3d6y81ozk] { color: #61707d; font-size: .85rem; line-height: 1.45; margin-top: .6rem; }
.op-hint[b-f3d6y81ozk] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-f3d6y81ozk] { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.op-badge-warn[b-f3d6y81ozk] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-f3d6y81ozk] { background: #e2f4e8; color: #1c7a3a; }
.op-badge-off[b-f3d6y81ozk] { background: #eef1f4; color: #61707d; }

/* ── Propio de las tareas ─────────────────────────────────────────────────────────────────── */

/* Las pestañas: «Mis tareas» y una por ámbito concedido. Subrayado, no cajas: son vistas de lo mismo. */
.ta-tabs[b-f3d6y81ozk] { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid #e3e8ee; margin-bottom: 1rem; }
.ta-tab[b-f3d6y81ozk] { background: none; border: none; border-bottom: 2px solid transparent; padding: .5rem .8rem; font-size: .9rem; font-weight: 600; color: #61707d; cursor: pointer; }
.ta-tab:hover:not(:disabled)[b-f3d6y81ozk] { color: #2b3a4a; }
.ta-tab-activa[b-f3d6y81ozk] { color: #2f6fed; border-bottom-color: #2f6fed; }

.ta-titulo[b-f3d6y81ozk] { font-weight: 600; }
.ta-fila-cerrada .ta-titulo[b-f3d6y81ozk] { color: #8a97a3; text-decoration: line-through; }

/* La prioridad se lee de un vistazo por el color del punto, y solo por el color: el texto va en el title. */
.ta-prio[b-f3d6y81ozk] { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #cdd5df; }
.ta-prio-normal[b-f3d6y81ozk] { background: #8fb3f5; }
.ta-prio-alta[b-f3d6y81ozk] { background: #f0b23e; }
.ta-prio-urgente[b-f3d6y81ozk] { background: #d93a44; }

/* Vencida en rojo, hoy en ámbar: lo que hay que mirar primero. */
.ta-vencida[b-f3d6y81ozk] { color: #c22f39; font-weight: 600; }
.ta-hoy[b-f3d6y81ozk] { color: #8a5a00; font-weight: 600; }

.ta-accion[b-f3d6y81ozk] { color: #2f6fed; }

/* ── Propio de las programaciones (T6) ───────────────────────────────────────────────────── */

.op-badge-err[b-f3d6y81ozk] { background: #fde2e4; color: #c22f39; }

.pr-resultado[b-f3d6y81ozk] { max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pr-aviso[b-f3d6y81ozk] { background: #fff7e6; border: 1px solid #f5d9a6; color: #8a5a00; border-radius: 8px; padding: .55rem .8rem; font-size: .86rem; margin: .5rem 0; }
.pr-aviso-error[b-f3d6y81ozk] { background: #fdf1f2; border-color: #f0c4c7; color: #c22f39; }

/* Un paso: cabecera con número y título legible, el árbol de herramientas y, debajo, sus datos. */
.pr-paso[b-f3d6y81ozk] { border: 1px solid #e3e8ee; border-radius: 10px; padding: .7rem .9rem .8rem; margin-bottom: .8rem; background: #fafbfc; }
.pr-paso-cab[b-f3d6y81ozk] { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.pr-paso-num[b-f3d6y81ozk] { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #2f6fed; color: #fff; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pr-paso-titulo[b-f3d6y81ozk] { flex: 1; font-weight: 700; font-size: .98rem; color: #1f2933; }
.pr-paso-datos[b-f3d6y81ozk] { margin-top: .8rem; padding: .8rem .9rem; background: #fff; border: 1px solid #e3e8ee; border-radius: 10px; }
.pr-paso-datos-cab[b-f3d6y81ozk] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 700; margin-bottom: .55rem; }
.pr-sin-pasos[b-f3d6y81ozk] { color: #8a97a3; font-size: .86rem; font-style: italic; margin-bottom: .6rem; }
.pr-subhead-nota[b-f3d6y81ozk] { margin: -.3rem 0 .6rem; }

.pr-dias[b-f3d6y81ozk] { gap: .6rem; }
.pr-usuarios[b-f3d6y81ozk] { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .35rem 0; }

.pr-btn-mini[b-f3d6y81ozk] { padding: .25rem .6rem; font-size: .78rem; margin-left: .6rem; text-transform: none; letter-spacing: 0; }
.op-subhead[b-f3d6y81ozk] { display: flex; align-items: center; }

.pr-previa[b-f3d6y81ozk] { border: 1px solid #e3e8ee; border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; }
.pr-previa-pasos[b-f3d6y81ozk] { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pr-previa-pasos li[b-f3d6y81ozk] { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.pr-previa-pasos li.pr-error[b-f3d6y81ozk] { color: #c22f39; }
.pr-previa-pasos .material-symbols-rounded[b-f3d6y81ozk] { font-size: 1.05rem; color: #61707d; }
.pr-previa-num[b-f3d6y81ozk] { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #eef2f7; color: #2b3a4a; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.pr-btn-aprobar[b-f3d6y81ozk] { background: #e2f4e8; color: #1c7a3a; border-color: #bfe6cc; }
.pr-btn-aprobar:hover:not(:disabled)[b-f3d6y81ozk] { background: #d2eddb; }

.pr-detalle[b-f3d6y81ozk] { margin-top: .8rem; }
.pr-pre[b-f3d6y81ozk] { background: #f6f8fa; border: 1px solid #e3e8ee; border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto; }

/* T7 — el disparador por evento: ayuda de campos y constructor de condiciones. */
.pr-ayuda[b-f3d6y81ozk] { font-size: .8rem; color: #61707d; margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pr-campo[b-f3d6y81ozk] { background: #eef2f7; border: 1px solid #e3e8ee; border-radius: 6px; padding: .1rem .35rem; font-size: .75rem; color: #2b3a4a; cursor: help; }

.pr-condiciones[b-f3d6y81ozk] { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .4rem; }
.pr-condicion[b-f3d6y81ozk] { display: flex; gap: .4rem; align-items: center; }

.op-btn-icono[b-f3d6y81ozk] { padding: .25rem .5rem; line-height: 1; color: #61707d; }
.op-btn-icono:hover:not(:disabled)[b-f3d6y81ozk] { color: #c22f39; }

/* ── Lista a todo el largo y modal del editor ────────────────────────────────────────────── */

/* La tarjeta de la lista y su envoltorio se estiran hasta abajo: flex-columna, que es lo que espera .tp-panel. */
.pr-lista-card[b-f3d6y81ozk] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.pr-tabla[b-f3d6y81ozk] { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* La tabla marca el suelo: con `min-height: 0` no podría empujar a la página y se desplazaría por dentro. */
.pr-tabla[b-f3d6y81ozk]  .tp-panel { min-height: auto; }

/* Programación abierta: la fila la pinta TablaPaginada, de ahí el ::deep. */
.pr-tabla[b-f3d6y81ozk]  tr.pr-fila-sel > td { background: #e8f0fe; }
.pr-tabla[b-f3d6y81ozk]  tr.pr-fila-sel > td:first-child { box-shadow: inset 3px 0 0 #2f6fed; }

/* El formulario de pasos no cabe en los 560px de ModalMaestro: se ensancha solo aquí (su hoja es común). */
.pr-modal[b-f3d6y81ozk]  .mm-card { max-width: 1040px; }

.pr-estado[b-f3d6y81ozk] { display: flex; gap: .4rem; margin-bottom: .4rem; }

/* Los campos del modal (mm-field) en filas que se reparten el ancho; los numéricos y la hora, estrechos. */
.op-form-row > .mm-field[b-f3d6y81ozk] { flex: 1 1 10rem; }
.op-form-row > .mm-field.op-field-ancho[b-f3d6y81ozk] { flex: 2 1 16rem; }
.op-form-row > .mm-field.pr-corto[b-f3d6y81ozk] { flex: 0 0 8.5rem; }

/* Dentro de una fila en línea (intervalo + unidad, horario) el ancho lo reparte el flex, no el 100% del campo. */
.pr-inline[b-f3d6y81ozk] { flex-wrap: nowrap; }
.pr-inline > .mm-input[b-f3d6y81ozk] { flex: 1 1 0; min-width: 4.5rem; }
.pr-inline > .mm-input.pr-num[b-f3d6y81ozk] { flex: 0 0 5.5rem; }

.pr-condicion > .mm-input[b-f3d6y81ozk] { flex: 1 1 0; min-width: 5rem; }
.pr-condicion > .mm-input.pr-op[b-f3d6y81ozk] { flex: 0 0 6.5rem; }
/* _content/ErpPowergest/Presentation/Tareas/Pages/TareasPage.razor.rz.scp.css */
/*
    Tareas (T2). Mismo vocabulario visual que «Facturación recurrente», «Asientos predefinidos» e
    «Inmovilizado»: mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    otra página lleva su propio atributo de scope y no alcanza a esta. Referenciar sus clases sin
    declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho de la pantalla: sin tope ni centrado. */
.op-page[b-zxt3zggl3h] { padding: 0; color: #1f2933; }

/* Cabecera como en Técnicos: sin `flex-wrap` (si la barra bajara de línea, su script nunca vería que
   falta sitio y no replegaría nada al menú «···»), título a la izquierda y CommandBar a la derecha. */
.op-header[b-zxt3zggl3h] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; margin-bottom: 9px; }
/* Título en dos fases, como en Diario: el bloque no cede y el título y el subtítulo van en una línea, así la
   barra pasa a solo iconos y al «···» antes de aplastarlos; con la barra replegada del todo, envuelven. */
.op-header-text[b-zxt3zggl3h] { flex: 0 0 auto; min-width: 0; }
.op-header.command-bar-host-collapsed > .op-header-text[b-zxt3zggl3h] { flex: 1 1 auto; }
.op-header[b-zxt3zggl3h]  .op-header-actions { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-self: center; }
.op-title[b-zxt3zggl3h] { font-size: 1.6rem; font-weight: 700; margin: 0; white-space: nowrap; }
.op-subtitle[b-zxt3zggl3h] { color: #61707d; font-size: .9rem; margin-top: .15rem; white-space: nowrap; }
.op-header.command-bar-host-collapsed .op-title[b-zxt3zggl3h],
.op-header.command-bar-host-collapsed .op-subtitle[b-zxt3zggl3h] { white-space: normal; overflow-wrap: break-word; }

/* Las tres tarjetas (filtros, lista y tarea abierta), algo más grandes que antes: más aire y el texto un
   punto mayor, sin pasarse. */
.op-card[b-zxt3zggl3h] { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.op-card-head[b-zxt3zggl3h] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.op-card-title[b-zxt3zggl3h] { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.op-card-actions[b-zxt3zggl3h] { margin-top: .9rem; }

.op-subhead[b-zxt3zggl3h] { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 700; margin: 1.1rem 0 .4rem; }

.op-form-row[b-zxt3zggl3h] { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .9rem; }
.op-field[b-zxt3zggl3h] { display: flex; flex-direction: column; gap: .25rem; }
.op-field-ancho[b-zxt3zggl3h] { flex: 1 1 16rem; }
.op-field label[b-zxt3zggl3h] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #61707d; font-weight: 600; }

.op-select[b-zxt3zggl3h], .op-input[b-zxt3zggl3h] { border: 1px solid #cdd5df; border-radius: 8px; padding: .55rem .7rem; font-size: .95rem; background: #fff; color: #1f2933; }
.op-select[b-zxt3zggl3h] { min-width: 7rem; }
.op-input-corto[b-zxt3zggl3h] { width: 7rem; }
.op-textarea[b-zxt3zggl3h] { width: 100%; resize: vertical; font-family: inherit; }
.op-inline[b-zxt3zggl3h] { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.op-actions[b-zxt3zggl3h] { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }

.op-btn[b-zxt3zggl3h] { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; border-radius: 8px; padding: .5rem .85rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.op-btn:disabled[b-zxt3zggl3h] { opacity: .55; cursor: default; }
.op-btn-ico[b-zxt3zggl3h] { font-size: 1.05rem; }
.op-btn-primary[b-zxt3zggl3h] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-zxt3zggl3h] { background: #245cd0; }
.op-btn-ghost[b-zxt3zggl3h] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-zxt3zggl3h] { background: #e7edf4; }
.op-btn-danger-ghost[b-zxt3zggl3h] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-zxt3zggl3h] { background: #fdf1f2; }

.op-icon-btn[b-zxt3zggl3h] { background: none; border: none; color: #61707d; cursor: pointer; padding: .15rem; line-height: 1; border-radius: 6px; }
.op-icon-btn:hover:not(:disabled)[b-zxt3zggl3h] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-zxt3zggl3h] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-zxt3zggl3h] { font-size: 1.15rem; }

.op-grid-wrapper[b-zxt3zggl3h] { overflow-x: auto; }
.op-table[b-zxt3zggl3h] { width: 100%; border-collapse: collapse; font-size: .92rem; }
.op-table th[b-zxt3zggl3h] { text-align: left; color: #61707d; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; padding: .55rem .65rem; border-bottom: 1px solid #e3e8ee; background: #fff; }
.op-table td[b-zxt3zggl3h] { padding: .65rem .65rem; border-bottom: 1px solid #f0f3f7; vertical-align: middle; }
.op-col-acciones[b-zxt3zggl3h] { width: 5.5rem; white-space: nowrap; text-align: right; }
.op-table-click tbody tr[b-zxt3zggl3h] { cursor: pointer; }
.op-table-click tbody tr:hover[b-zxt3zggl3h] { background: #f5f8fc; }
.op-row-sel[b-zxt3zggl3h], .op-table-click tbody tr.op-row-sel:hover[b-zxt3zggl3h] { background: #e8f0fe; }

.op-check[b-zxt3zggl3h] { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
/* La casilla de una fila de campos («Ver también las cerradas», «Todo el día»): pegada abajo y con el mismo
   alto que los desplegables y las cajas de la fila, así su centro cae en el centro de ellos. La fila alinea
   por abajo (las etiquetas de los campos van encima); antes la casilla se centraba en la fila entera,
   etiquetas incluidas, y quedaba más arriba que los desplegables. */
.op-check-campo[b-zxt3zggl3h] { align-self: flex-end; box-sizing: border-box; height: var(--ta-alto-campo); padding-bottom: 0; }
.op-select[b-zxt3zggl3h], .op-input:not(textarea)[b-zxt3zggl3h] { box-sizing: border-box; height: var(--ta-alto-campo); }
.op-page[b-zxt3zggl3h], .ta-modal-nueva[b-zxt3zggl3h] { --ta-alto-campo: 2.6rem; }

.op-muted[b-zxt3zggl3h] { color: #61707d; font-size: .85rem; line-height: 1.45; margin-top: .6rem; }
.op-hint[b-zxt3zggl3h] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-zxt3zggl3h] { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.op-badge-warn[b-zxt3zggl3h] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-zxt3zggl3h] { background: #e2f4e8; color: #1c7a3a; }
.op-badge-off[b-zxt3zggl3h] { background: #eef1f4; color: #61707d; }

/* Ventana flotante del alta (el «+»): más ancha que el ModalMaestro de serie, porque lleva los mismos campos
   que el editor (filas de tres campos, la acción y su formulario). Solo desde esta página. */
.ta-modal-nueva[b-zxt3zggl3h]  .mm-card { max-width: 920px; }

/* ── Propio de las tareas ─────────────────────────────────────────────────────────────────── */

/* Dos columnas, como en Artículos: panel de bandejas a la izquierda y la bandeja elegida a la derecha.
   Mismas medidas que su panel lateral: tarjeta blanca, radio 16 y la misma sombra. */
/* Las dos columnas miden lo mismo (stretch): la tarjeta de la lista crece hasta el largo del panel de
   bandejas, y si la derecha se alarga (una tarea abierta debajo), el panel la acompaña. */
.ta-layout[b-zxt3zggl3h] { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ta-main[b-zxt3zggl3h] { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ta-main > .op-card[b-zxt3zggl3h] { margin-bottom: 0; border-radius: 16px; border-color: #e5e7eb; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); }

.ta-panel[b-zxt3zggl3h] { min-width: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .045); display: flex; flex-direction: column; }
.ta-bandejas-panel[b-zxt3zggl3h] { min-height: 0; }
.ta-panel-header[b-zxt3zggl3h] { margin-bottom: 12px; }
.ta-panel-title[b-zxt3zggl3h] { font-size: 16px; line-height: 1.2; font-weight: 850; color: #1f2937; }
.ta-panel-subtitle[b-zxt3zggl3h] { margin-top: 4px; font-size: 12px; color: #6b7280; line-height: 1.35; }

.ta-bandejas-buscar[b-zxt3zggl3h] { display: flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 10px;
                      padding: 0 10px; margin-bottom: 10px; background: #fff; }
.ta-bandejas-buscar .material-symbols-rounded[b-zxt3zggl3h] { font-size: 18px; color: #94a3b8; }
.ta-bandejas-input[b-zxt3zggl3h] { flex: 1 1 auto; min-width: 0; border: none; outline: none; padding: 8px 0; font-size: 13px; background: transparent; }
.ta-bandejas-buscar:focus-within[b-zxt3zggl3h] { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

/* La lista de bandejas: las mismas filas que el árbol de familias de Artículos (selección azul con borde). */
.ta-tabs[b-zxt3zggl3h] { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden;
           padding-right: 3px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.ta-tab[b-zxt3zggl3h] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent;
          border-radius: 9px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: #334155; cursor: pointer;
          transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ta-tab:hover:not(:disabled)[b-zxt3zggl3h] { background: #f1f5f9; }
.ta-tab:disabled[b-zxt3zggl3h] { cursor: default; }
.ta-tab-ico[b-zxt3zggl3h] { font-size: 19px; color: #64748b; flex: 0 0 auto; }
.ta-tab-texto[b-zxt3zggl3h] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-tab-activa[b-zxt3zggl3h], .ta-tab-activa:hover:not(:disabled)[b-zxt3zggl3h] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ta-tab-activa .ta-tab-ico[b-zxt3zggl3h] { color: #2563eb; }
/* «Mis tareas» es la bandeja de todos los días: separada del resto de ámbitos por una raya. */
.ta-tab-mias[b-zxt3zggl3h] { margin-bottom: 6px; position: relative; }
.ta-tab-mias[b-zxt3zggl3h]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -5px; border-bottom: 1px solid #eef1f4; }
.ta-bandejas-vacio[b-zxt3zggl3h] { padding: 6px 8px; }

/* Filtros y lista en una sola tarjeta. La tabla paginada llena el ancho y su panel no fija alto mínimo. */
.ta-filtros[b-zxt3zggl3h] { margin-bottom: .6rem; }
/* La tarjeta de la lista se estira (flex: 1) y dentro, la tabla paginada toma todo el alto sobrante. */
.ta-lista-card[b-zxt3zggl3h] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ta-tabla[b-zxt3zggl3h] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ta-tabla[b-zxt3zggl3h]  .tp-panel { min-height: auto; }
.ta-tabla[b-zxt3zggl3h]  .op-row-sel { background: #e8f0fe; }
.ta-tabla[b-zxt3zggl3h]  .ta-fila-cerrada .ta-titulo { color: #8a97a3; text-decoration: line-through; }
.ta-acciones[b-zxt3zggl3h] { display: inline-flex; gap: .15rem; }

/* «Cómo funciona», en pequeño: una nota, no otra tarjeta del tamaño de la lista. */
.ta-nota[b-zxt3zggl3h] { margin-top: 9px; display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid #e3e8ee; border-radius: 10px;
           background: #f8fafc; color: #61707d; font-size: .8rem; line-height: 1.45; }
.ta-nota p[b-zxt3zggl3h] { margin: 0; }
.ta-nota .material-symbols-rounded[b-zxt3zggl3h] { font-size: 1.05rem; color: #8a97a3; margin-top: .05rem; }

.ta-titulo[b-zxt3zggl3h] { font-weight: 600; }
.ta-fila-cerrada .ta-titulo[b-zxt3zggl3h] { color: #8a97a3; text-decoration: line-through; }

/* La prioridad se lee de un vistazo por el color del punto, y solo por el color: el texto va en el title. */
.ta-prio[b-zxt3zggl3h] { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #cdd5df; }
.ta-prio-normal[b-zxt3zggl3h] { background: #8fb3f5; }
.ta-prio-alta[b-zxt3zggl3h] { background: #f0b23e; }
.ta-prio-urgente[b-zxt3zggl3h] { background: #d93a44; }

/* Vencida en rojo, hoy en ámbar: lo que hay que mirar primero. */
.ta-vencida[b-zxt3zggl3h] { color: #c22f39; font-weight: 600; }
.ta-hoy[b-zxt3zggl3h] { color: #8a5a00; font-weight: 600; }

.ta-accion[b-zxt3zggl3h] { color: #2f6fed; }
.ta-accion-explica[b-zxt3zggl3h] { margin: -.2rem 0 .6rem; }

/* Icono en línea con el texto de la pista (tablero en que está colocada). */
.ta-ico-inline[b-zxt3zggl3h] { font-size: .95rem; vertical-align: -3px; }
.op-hint span + span[b-zxt3zggl3h] { margin-left: .6rem; }

/* ── Pantallas pequeñas ── */
@media (max-width: 900px) {
    /* Las bandejas pasan arriba, en una tira que se desplaza en horizontal (no se apilan en varias filas). */
    .ta-layout[b-zxt3zggl3h] { grid-template-columns: minmax(0, 1fr); }
    .ta-bandejas-panel[b-zxt3zggl3h] { min-height: 0; }
    .ta-tabs[b-zxt3zggl3h] { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .ta-tab[b-zxt3zggl3h] { width: auto; flex: 0 0 auto; }
    .ta-tab-mias[b-zxt3zggl3h] { margin-bottom: 0; margin-right: 6px; }
    .ta-tab-mias[b-zxt3zggl3h]::after { display: none; }
    .op-card[b-zxt3zggl3h] { padding: 1rem; }
    .ta-tabla[b-zxt3zggl3h]  .ta-col-ambito,
    .ta-tabla[b-zxt3zggl3h]  .ta-col-responsable { display: none; }
}

@media (max-width: 600px) {
    .op-form-row[b-zxt3zggl3h] { flex-direction: column; align-items: stretch; }
    .op-field[b-zxt3zggl3h], .op-field-ancho[b-zxt3zggl3h] { width: 100%; flex: 1 1 auto; }
    .op-input[b-zxt3zggl3h], .op-select[b-zxt3zggl3h] { width: 100%; }
    .op-check-campo[b-zxt3zggl3h] { align-self: flex-start; }
    .op-icon-btn[b-zxt3zggl3h] { min-width: 36px; min-height: 36px; }
}

/* ¿Cuándo se ejecuta la acción? Tres opciones en una tira; debajo, los campos de la elegida y la frase de resumen. */
.ta-ejecucion[b-zxt3zggl3h] { display: flex; flex-direction: column; gap: .7rem; }
.ta-modos[b-zxt3zggl3h] { display: flex; flex-wrap: wrap; gap: .4rem; }
.ta-modo[b-zxt3zggl3h] { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .9rem; border-radius: 9px;
           border: 1px solid #d8dfe8; background: #fff; color: #2b3a4a; font-size: .86rem; font-weight: 600;
           font-family: inherit; cursor: pointer; }
.ta-modo .material-symbols-rounded[b-zxt3zggl3h] { font-size: 18px; }
.ta-modo:hover[b-zxt3zggl3h] { background: #f3f6fa; border-color: #b9c4d2; }
.ta-modo-activo[b-zxt3zggl3h], .ta-modo-activo:hover[b-zxt3zggl3h] { background: #1f4fd1; border-color: #1f4fd1; color: #fff; }
.ta-campo-corto[b-zxt3zggl3h] { max-width: 6rem; }
.ta-dias[b-zxt3zggl3h] { display: flex; flex-wrap: wrap; gap: .35rem; }
.ta-dia[b-zxt3zggl3h] { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid #d8dfe8;
          border-radius: 8px; background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ta-dia input[b-zxt3zggl3h] { margin: 0; }
.ta-ejecucion-resumen[b-zxt3zggl3h] { display: flex; align-items: center; gap: .4rem; font-size: .86rem; color: #1f4fd1;
                        background: #eef3ff; border-radius: 8px; padding: .5rem .7rem; }
.ta-ejecucion-resumen .material-symbols-rounded[b-zxt3zggl3h] { font-size: 18px; }
@media (max-width: 600px) {
    .ta-modo[b-zxt3zggl3h] { flex: 1 1 100%; justify-content: center; }
    .ta-campo-corto[b-zxt3zggl3h] { max-width: none; }
}
/* _content/ErpPowergest/Presentation/Usuarios/Pages/CambiarMiClavePage.razor.rz.scp.css */
.mc-page[b-9xslx1xwli] { display: flex; justify-content: center; padding: 32px 16px; }
.mc-card[b-9xslx1xwli] { width: 100%; max-width: 420px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.mc-title[b-9xslx1xwli] { margin: 0; font-size: 1.2rem; font-weight: 700; color: #111827; }
.mc-sub[b-9xslx1xwli] { font-size: .85rem; color: #6b7280; margin-top: -8px; }
.mc-campo[b-9xslx1xwli] { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: #374151; }
.mc-campo input[b-9xslx1xwli] { border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
.mc-acciones[b-9xslx1xwli] { display: flex; justify-content: flex-end; gap: 8px; }
.mc-btn[b-9xslx1xwli] { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: .85rem; }
.mc-btn-primary[b-9xslx1xwli] { background: #2563eb; border-color: #2563eb; color: #fff; }
.mc-btn:disabled[b-9xslx1xwli] { opacity: .6; cursor: default; }
.mc-pie[b-9xslx1xwli] { font-size: .78rem; color: #6b7280; }
/* _content/ErpPowergest/Presentation/Usuarios/Pages/UsuariosPage.razor.rz.scp.css */
.us-page[b-o2hiv0bhpu],
.us-page *[b-o2hiv0bhpu],
.us-page *[b-o2hiv0bhpu]::before,
.us-page *[b-o2hiv0bhpu]::after { box-sizing: border-box; }

/* La pantalla ocupa el hueco entero que le da el layout: sin ancho máximo ni relleno propio (el
   `main-body` ya trae el suyo) y en columna, para que la lista y el detalle crezcan a lo alto en
   vez de dejar la mitad inferior en blanco. */
.us-page[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }

.us-card[b-o2hiv0bhpu] { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.us-empty[b-o2hiv0bhpu] { padding: 28px; text-align: center; color: #6b7280; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.us-empty-ico[b-o2hiv0bhpu] { font-size: 34px; color: #9ca3af; }

/* Invitar: logotipo de la empresa a la izquierda y, a su derecha y en dos líneas, el nombre y el
   enlace. El enlace va suelto —sin caja ni recuadro— porque la tarjeta ya lo es; las acciones bajan
   a su propia línea. */
.us-invite[b-o2hiv0bhpu] { padding: 14px 16px; flex: 0 0 auto; }
.us-invite-head[b-o2hiv0bhpu] { display: flex; gap: 12px; align-items: center; margin: -6px -8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; user-select: none; transition: background .12s; }
.us-invite-head:hover[b-o2hiv0bhpu] { background: #f9fafb; }
.us-invite-texts[b-o2hiv0bhpu] { min-width: 0; flex: 1 1 auto; }
.us-invite-link[b-o2hiv0bhpu] { user-select: text; }

/* Flecha de plegar: gira media vuelta al abrir. */
.us-invite-toggle[b-o2hiv0bhpu] { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #6b7280; cursor: pointer; transition: background .12s, color .12s; }
.us-invite-toggle:hover[b-o2hiv0bhpu] { background: #eef0f3; color: #111827; }
.us-invite-toggle:focus-visible[b-o2hiv0bhpu] { outline: 2px solid #2563eb; outline-offset: 2px; }
.us-invite-toggle-ico[b-o2hiv0bhpu] { font-size: 22px; transition: transform .2s ease; }
.us-invite.abierto .us-invite-toggle-ico[b-o2hiv0bhpu] { transform: rotate(180deg); }

/* Plegable: la fila de la rejilla pasa de 0fr a 1fr y el hijo recorta lo que sobra. Así se anima a
   la altura real del contenido sin medirla, aunque cambie el número de botones según el permiso.
   El margen va en el contenedor y también se anima: en el hijo seguiría ocupando sitio plegado. */
.us-invite-collapse[b-o2hiv0bhpu] { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .2s ease, margin-top .2s ease; }
.us-invite.abierto .us-invite-collapse[b-o2hiv0bhpu] { grid-template-rows: 1fr; margin-top: 10px; }
.us-invite-collapse > .us-invite-actions[b-o2hiv0bhpu] { min-height: 0; overflow: hidden; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .us-invite-collapse[b-o2hiv0bhpu], .us-invite-toggle-ico[b-o2hiv0bhpu] { transition: none; }
}
.us-invite-title[b-o2hiv0bhpu] { font-weight: 700; color: #111827; font-size: .95rem; }
.us-invite-link[b-o2hiv0bhpu] { display: inline-block; margin-top: 2px; color: #16a34a; font-size: .82rem; word-break: break-all; text-decoration: none; cursor: pointer; }
.us-invite-link:hover[b-o2hiv0bhpu], .us-invite-link:focus-visible[b-o2hiv0bhpu] { text-decoration: underline; }
/* Acciones del enlace: una por fila y a todo el ancho, sin borde ni relleno de color. Lo que marca
   dónde está el puntero es la fila entera, que se oscurece al pasar por encima. */
.us-invite-actions[b-o2hiv0bhpu] { display: flex; flex-direction: column; margin-top: 10px; }
.us-invite-btn[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #374151; font-size: .88rem; font-weight: 600; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .12s; }
.us-invite-btn:hover:not(:disabled)[b-o2hiv0bhpu] { background: #f1f3f5; }
.us-invite-btn:disabled[b-o2hiv0bhpu] { opacity: .55; cursor: default; }
.us-invite-btn-ico[b-o2hiv0bhpu] { font-size: 18px; }

/* Restablecer enlace: solo el color lo distingue; la caja es la misma que la de sus vecinos. */
.us-invite-btn-reset[b-o2hiv0bhpu] { color: #dc2626; }

/* Zona de trabajo: se come todo el alto sobrante; cada panel gestiona su propio desplazamiento. */
.us-main[b-o2hiv0bhpu] { display: grid; grid-template-columns: minmax(280px, 26%) 1fr; gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; }

@media (max-width: 880px) {
    .us-page[b-o2hiv0bhpu] { height: auto; }
    .us-main[b-o2hiv0bhpu] { grid-template-columns: 1fr; flex: 0 0 auto; }
    .us-list[b-o2hiv0bhpu] { max-height: 50vh; }
}

/* Lista */
.us-list-panel[b-o2hiv0bhpu] { padding: 14px; display: flex; flex-direction: column; min-height: 0; }
.us-list-head[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; flex: 0 0 auto; }
.us-section-title[b-o2hiv0bhpu] { font-weight: 700; color: #374151; }
.us-search[b-o2hiv0bhpu] { position: relative; }
.us-search-icon[b-o2hiv0bhpu] { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; }
.us-search-input[b-o2hiv0bhpu] { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; }

.us-list[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.us-card-item[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #eef0f3; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.us-card-item:hover[b-o2hiv0bhpu] { background: #f9fafb; }
.us-card-item.active[b-o2hiv0bhpu] { border-color: #2563eb; background: #eff6ff; }
.us-card-item-texts[b-o2hiv0bhpu] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.us-card-item-name[b-o2hiv0bhpu] { font-weight: 600; color: #111827; display: flex; align-items: center; gap: 6px; }
.us-card-item-desc[b-o2hiv0bhpu] { font-size: .78rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-list-empty[b-o2hiv0bhpu] { padding: 16px; text-align: center; color: #9ca3af; font-size: .85rem; }
.us-you[b-o2hiv0bhpu] { font-size: .66rem; font-weight: 700; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 0 6px; }

/* Quien ya no esta: atenuado, pero legible. No se oculta —hace falta poder readmitirle—, solo deja
   de competir por la atencion con la gente que si trabaja aqui. */
.us-card-item.de-baja[b-o2hiv0bhpu] { opacity: .55; }
.us-card-item.de-baja:hover[b-o2hiv0bhpu], .us-card-item.de-baja.active[b-o2hiv0bhpu] { opacity: 1; }
.us-ver-bajas[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #6b7280; cursor: pointer; user-select: none; }
.us-ver-bajas input[b-o2hiv0bhpu] { cursor: pointer; }

/* Badges de rol */
.us-badge[b-o2hiv0bhpu] { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.us-badge-admin[b-o2hiv0bhpu] { background: #ede9fe; color: #5b21b6; }
.us-badge-emp[b-o2hiv0bhpu] { background: #dcfce7; color: #166534; }
.us-badge-inv[b-o2hiv0bhpu] { background: #f3f4f6; color: #4b5563; }
.us-badge-baja[b-o2hiv0bhpu] { background: #f3f4f6; color: #6b7280; border: 1px dashed #d1d5db; }

/* Detalle */
.us-detail-panel[b-o2hiv0bhpu] { min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.us-detail-scroll[b-o2hiv0bhpu] { padding: 18px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.us-detail-id[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.us-detail-name[b-o2hiv0bhpu] { font-weight: 700; font-size: 1.3rem; color: #111827; }
.us-detail-user[b-o2hiv0bhpu] { font-size: .92rem; color: #6b7280; }

/* Avatar con foto: botón sin caja, redondo como la foto para que el foco y el anillo la sigan. */
.us-detail-foto[b-o2hiv0bhpu] { display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; transition: box-shadow .16s ease; }
.us-detail-foto:hover[b-o2hiv0bhpu] { box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.us-detail-foto:focus-visible[b-o2hiv0bhpu] { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Foto en grande: entera (contain), sin recortar la cara como hace el círculo del avatar. */
.us-foto-grande[b-o2hiv0bhpu] { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #f6f8fa; }

.us-fields[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 14px; }
.us-field[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.us-field label[b-o2hiv0bhpu] { font-size: .8rem; font-weight: 600; color: #374151; }
.us-input[b-o2hiv0bhpu] { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .9rem; background: #fff; }
.us-input:focus[b-o2hiv0bhpu] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.us-field-hint[b-o2hiv0bhpu] { font-size: .78rem; color: #6b7280; }

/* Botones */
.us-btn[b-o2hiv0bhpu] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.us-btn:disabled[b-o2hiv0bhpu] { opacity: .55; cursor: default; }
.us-btn-ico[b-o2hiv0bhpu] { font-size: 18px; }
.us-btn-ghost[b-o2hiv0bhpu] { background: #fff; border-color: #d1d5db; color: #374151; }
.us-btn-ghost:hover:not(:disabled)[b-o2hiv0bhpu] { background: #f3f4f6; }
.us-btn-primary[b-o2hiv0bhpu] { background: #2563eb; color: #fff; }
.us-btn-primary:hover:not(:disabled)[b-o2hiv0bhpu] { background: #1d4ed8; }
.us-btn-danger[b-o2hiv0bhpu] { background: #dc2626; color: #fff; }
.us-btn-danger:hover:not(:disabled)[b-o2hiv0bhpu] { background: #b91c1c; }

.us-detail-actions[b-o2hiv0bhpu] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Zona de peligro */
.us-danger[b-o2hiv0bhpu] { margin-top: 22px; border: 1px solid #fecaca; border-radius: 10px; padding: 14px; background: #fff7f7; }
.us-danger-head[b-o2hiv0bhpu] { font-weight: 700; color: #991b1b; margin-bottom: 10px; }
.us-danger-row[b-o2hiv0bhpu] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-danger-text[b-o2hiv0bhpu] { font-size: .82rem; color: #7f1d1d; }
.us-danger-box[b-o2hiv0bhpu] { display: flex; flex-direction: column; gap: 12px; }
.us-danger-warning[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 8px; color: #991b1b; font-size: .85rem; }

/* Ficha de quien ya no esta: gris y no rojo. No es un error ni un peligro, es un hecho. */
.us-baja-aviso[b-o2hiv0bhpu] { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; }
.us-baja-aviso .material-symbols-rounded[b-o2hiv0bhpu] { font-size: 22px; color: #6b7280; flex: 0 0 auto; }
.us-baja-aviso-titulo[b-o2hiv0bhpu] { font-weight: 600; color: #374151; font-size: .88rem; }
.us-baja-aviso-motivo[b-o2hiv0bhpu] { font-size: .82rem; color: #4b5563; margin-top: 4px; font-style: italic; }
.us-baja-aviso-texto[b-o2hiv0bhpu] { font-size: .8rem; color: #6b7280; margin-top: 6px; }

/* Readmitir no es una accion peligrosa: fuera de la zona roja y sin boton rojo. */
.us-readmision[b-o2hiv0bhpu] { margin-top: 22px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; background: #fff; }
.us-readmision-row[b-o2hiv0bhpu] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-readmision .us-danger-text[b-o2hiv0bhpu] { color: #4b5563; }
.us-danger-warning .material-symbols-rounded[b-o2hiv0bhpu] { font-size: 20px; }

/* Cuenta (solo tecnicos): recuadro neutro, con el borrado dentro en su rojo de siempre. */
.us-cuenta[b-o2hiv0bhpu] { margin-top: 22px; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 12px; }
.us-cuenta-head[b-o2hiv0bhpu] { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #334155; }
.us-cuenta-head .material-symbols-rounded[b-o2hiv0bhpu] { font-size: 20px; }
.us-cuenta > .us-danger-text[b-o2hiv0bhpu], .us-cuenta-fila .us-danger-text[b-o2hiv0bhpu], .us-cuenta > .us-danger-box .us-danger-text[b-o2hiv0bhpu] { color: #475569; }
.us-cuenta-fila[b-o2hiv0bhpu] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-cuenta .us-danger[b-o2hiv0bhpu] { margin-top: 4px; }
.us-cuenta-alcance[b-o2hiv0bhpu] { margin: 0; padding-left: 18px; font-size: .82rem; color: #7f1d1d; display: flex; flex-direction: column; gap: 4px; }

/* Confirmacion de restablecer el enlace: mismo lenguaje visual que «Limpiar» en Notificaciones
   (aviso a la izquierda, acciones a la derecha, boton de peligro en rojo suave). */
.us-confirm-modal[b-o2hiv0bhpu] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.us-confirm-icon[b-o2hiv0bhpu] {
    font-size: 24px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
    margin-top: 1px;
}

.us-confirm-body[b-o2hiv0bhpu] {
    flex: 1 1 auto;
    min-width: 0;
}

.us-confirm-subtitle[b-o2hiv0bhpu] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

    .us-confirm-subtitle strong[b-o2hiv0bhpu] {
        font-weight: 850;
        color: #1f2937;
    }

.us-confirm-actions[b-o2hiv0bhpu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.us-confirm-cancel[b-o2hiv0bhpu],
.us-confirm-danger[b-o2hiv0bhpu] {
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.us-confirm-cancel[b-o2hiv0bhpu] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .us-confirm-cancel:hover:not(:disabled)[b-o2hiv0bhpu] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.us-confirm-danger[b-o2hiv0bhpu] {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

    .us-confirm-danger:hover:not(:disabled)[b-o2hiv0bhpu] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .us-confirm-cancel:disabled[b-o2hiv0bhpu],
    .us-confirm-danger:disabled[b-o2hiv0bhpu] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* ============================================================
   ALTA E INVITACIÓN CON ROL
   Añadido con el botón «Añadir empleado» y el diálogo de invitación:
   antes solo se podía repartir un enlace y todo el mundo entraba
   como «Invitado» (solo consultas).
   ============================================================ */

.us-invite-btn-primary[b-o2hiv0bhpu] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

    .us-invite-btn-primary:hover:not(:disabled)[b-o2hiv0bhpu] {
        background: #dbeafe;
        border-color: #93c5fd;
    }

.us-invite-rol[b-o2hiv0bhpu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.us-invite-rol-label[b-o2hiv0bhpu] {
    font-size: 13px;
    color: #64748b;
}

.us-invite-rol-select[b-o2hiv0bhpu] {
    max-width: 220px;
}

.us-form[b-o2hiv0bhpu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px;
}

.us-form-row[b-o2hiv0bhpu] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

    .us-form-row > .us-field[b-o2hiv0bhpu] {
        flex: 1 1 160px;
        min-width: 0;
    }

.us-btn-primary[b-o2hiv0bhpu] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

    .us-btn-primary:hover:not(:disabled)[b-o2hiv0bhpu] {
        background: #dbeafe;
        border-color: #93c5fd;
    }

    .us-btn-primary:disabled[b-o2hiv0bhpu] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* La contraseña provisional se enseña una sola vez: se destaca para
   que nadie cierre el diálogo sin haberla copiado. */
.us-password-box[b-o2hiv0bhpu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
}

.us-password-label[b-o2hiv0bhpu] {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.us-password-value[b-o2hiv0bhpu] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    word-break: break-all;
}

.us-password-value-link[b-o2hiv0bhpu] {
    font-size: 13px;
    font-weight: 500;
}

.us-invitaciones[b-o2hiv0bhpu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.us-invitacion-row[b-o2hiv0bhpu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fbfdff;
}

.us-invitacion-texts[b-o2hiv0bhpu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.us-invitacion-rol[b-o2hiv0bhpu] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.us-invitacion-desc[b-o2hiv0bhpu] {
    font-size: 12px;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.us-invitacion-meta[b-o2hiv0bhpu] {
    font-size: 11px;
    color: #94a3b8;
}
/* _content/ErpPowergest/Presentation/Ventas/Componentes/DialogoColumnasRejilla.razor.rz.scp.css */
/* Diálogo «Columnas» de la rejilla de líneas. CSS PROPIO: las clases fdp-modal-* de facturación y del TPV son
   del ámbito de su página y no llegan a este componente (memoria «CSS scoped en páginas copiadas»). Los colores
   salen de las variables --fdp-* de la página contenedora, que sí se heredan; cada una lleva su respaldo. */

.dcr-overlay[b-ujgd8d38vf] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.dcr-card[b-ujgd8d38vf] {
    inline-size: min(36rem, calc(100vw - 2rem));
    background: var(--fdp-surface, #fff);
    color: var(--fdp-on-surface, #1b1b21);
    border-radius: var(--fdp-radius-md, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.dcr-head[b-ujgd8d38vf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fdp-outline-variant, #e4e5ec);
}

.dcr-body[b-ujgd8d38vf] {
    padding: 1rem 1.1rem;
    font-size: .9rem;
    line-height: 1.4;
}

.dcr-actions[b-ujgd8d38vf] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--fdp-outline-variant, #e4e5ec);
}

.dcr-btn[b-ujgd8d38vf] {
    padding: .4rem .9rem;
    border-radius: var(--fdp-radius-sm, 6px);
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    background: var(--fdp-surface-low, #f7f8fb);
    color: var(--fdp-on-surface, #1b1b21);
    font: inherit;
    cursor: pointer;
}

    .dcr-btn:focus-visible[b-ujgd8d38vf] {
        outline: 2px solid var(--fdp-primary, #00288e);
        outline-offset: 2px;
    }

.dcr-btn-ghost[b-ujgd8d38vf] {
    background: transparent;
}

.dcr-btn-primary[b-ujgd8d38vf] {
    background: var(--fdp-primary, #00288e);
    border-color: var(--fdp-primary, #00288e);
    color: #fff;
}

.dcr-lista[b-ujgd8d38vf] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-block-size: min(60vh, 32rem);
    overflow-y: auto;
}

.dcr-fila[b-ujgd8d38vf] {
    display: grid;
    grid-template-columns: 2.2rem 8rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .3rem .25rem;
    border-block-end: 1px solid var(--fdp-outline-variant, #e4e5ec);
}

    .dcr-fila:last-child[b-ujgd8d38vf] {
        border-block-end: 0;
    }

    .dcr-fila.is-oculta .dcr-nombre[b-ujgd8d38vf],
    .dcr-fila.is-oculta .dcr-desc[b-ujgd8d38vf] {
        opacity: .55;
    }

.dcr-ojo[b-ujgd8d38vf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fdp-primary, #00288e);
    cursor: pointer;
}

    .dcr-ojo:hover[b-ujgd8d38vf],
    .dcr-ojo:focus-visible[b-ujgd8d38vf] {
        background: var(--fdp-surface-container, #f4f5f9);
        outline: none;
    }

    .dcr-fila.is-oculta .dcr-ojo[b-ujgd8d38vf] {
        color: var(--fdp-on-surface-variant, #555766);
    }

    .dcr-ojo.is-fija[b-ujgd8d38vf] {
        color: var(--fdp-outline, #8a8b97);
        cursor: help;
    }

    .dcr-ojo .material-symbols-outlined[b-ujgd8d38vf] {
        font-size: 1.25rem;
    }

.dcr-nombre[b-ujgd8d38vf] {
    font-weight: 600;
    font-size: .85rem;
}

.dcr-desc[b-ujgd8d38vf] {
    font-size: .8rem;
    color: var(--fdp-on-surface-variant, #555766);
}

@media (max-width: 600px) {
    .dcr-fila[b-ujgd8d38vf] {
        grid-template-columns: 2.2rem 1fr;
    }

    .dcr-desc[b-ujgd8d38vf] {
        grid-column: 2;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/Componentes/RejillaLineasDocumento.razor.rz.scp.css */
/* ==================================================================================================
   ESTILO PROPIO DE LA REJILLA DE LÍNEAS (RejillaLineasDocumento)

   La rejilla es la ÚNICA del ERP y la comparten facturación, TPV y compras (fase E1/E2 del plan
   TPV-ERGONOMIA). Su estilo vive AQUÍ, con el componente, y no en la página que lo hospeda: el CSS
   aislado de una página NO alcanza a un componente usado desde otra, así que mientras estas reglas
   estuvieron en FacturaFormulario.razor.css la misma rejilla se veía bien en facturación y desnuda en
   el TPV — el caso real de la lupa del código, que en /tpv no se pintaba en absoluto.

   Qué entra aquí: lo que solo usa clases que PINTA este componente (celdas, celda de código, lupa,
   badge de línea heredada). Lo que mezcla clases de la página (`.ff-unified-page …`,
   `.ff-lines-datagrid …`) se queda en la página: es decoración del contenedor, no de la rejilla.

   AQUÍ NO SE USA `::deep`, y es lo contrario de lo que uno esperaría. El marcado de estas celdas lo
   pinta este componente dentro de las plantillas del DataGrid, y el compilador le pone el atributo de
   scope a CADA elemento raíz de plantilla: el input, la celda de código, el badge. Lo que hay POR ENCIMA
   (los `td`/`tr`/`table` que genera Syncfusion) NO lleva scope. Y `::deep X` compila a `[b-xxx] X`, un
   selector de DESCENDIENTE: exige el scope en un ancestro, que aquí no existe, así que no casa con nada.
   Sin `::deep` compila a `X[b-xxx]` —el atributo en el propio elemento— que es justo el caso.

   La versión con `::deep` que vivía en FacturaFormulario.razor.css funcionaba por otro motivo: allí el
   scope era el de la PÁGINA, que sí está en un ancestro. Al mover las reglas al componente ese ancestro
   desaparece, y copiarlas tal cual dejaba la fila de entrada con el borde `2px inset` del navegador.
   ================================================================================================== */

/* Inputs de las celdas del grid: sin borde, que "rellenen" la celda.

   SIN `::deep`, y no es un descuido. La mayoría de estos inputs son elementos RAÍZ de la plantilla de su
   columna, así que llevan ELLOS el atributo de scope y no tienen ningún ancestro scopeado (el marcado de
   Syncfusion que hay por encima no lo está). `::deep` compila a `[b-xxx] .ff-cell-input` —un
   descendiente— y ahí no casa con nada: sin estas reglas los inputs salen con el borde `2px inset` y el
   fondo blanco del navegador, que es como se veía la fila de entrada.

   El input de la celda de CÓDIGO sí cuelga de `.ff-codigo-cell`, pero también lleva su propio atributo
   de scope, así que la forma sin `::deep` lo alcanza igual: una sola regla vale para los dos casos. */
.ff-cell-input[b-lct2xu3qfc],
.ff-codigo-input[b-lct2xu3qfc] {
    border: none;
    background: transparent;
    inline-size: 100%;
    box-sizing: border-box;
    padding: .35rem .45rem;
    margin: 0;
    font: inherit;
    color: var(--fdp-on-surface, #1a1b22);
    outline: none;
    /* Teclado tipo Excel: en NAVEGACIÓN el caret va OCULTO (la celda se ve activa, no "en modo tecleo"). */
    caret-color: transparent;
}

    /* EDICIÓN: el caret se ve (se está escribiendo). La clase .ff-editing la pone CeldaCss al entrar a editar. */
    .ff-cell-input.ff-editing[b-lct2xu3qfc],
    .ff-codigo-input.ff-editing[b-lct2xu3qfc] {
        caret-color: auto;
    }

    /* Al escribir/enfocar, un resalte sutil en vez del borde negro */
    .ff-cell-input:focus[b-lct2xu3qfc],
    .ff-codigo-input:focus[b-lct2xu3qfc] {
        background: var(--fdp-surface, #ffffff);
        box-shadow: inset 0 0 0 2px var(--fdp-primary, #2f6fed);
        border-radius: 4px;
    }

    /* Placeholder más suave */
    .ff-cell-input[b-lct2xu3qfc]::placeholder,
    .ff-codigo-input[b-lct2xu3qfc]::placeholder {
        color: var(--fdp-on-surface-variant, #9aa0b0);
    }

/* Celda Código con lupa embebida: el input rellena la celda y la lupa se posa a la derecha (buscador de
   artículo).

   OJO CON `::deep` AQUÍ: `.ff-codigo-cell` es el elemento RAÍZ que pinta este componente dentro de la
   plantilla del grid, así que LLEVA ÉL el atributo de scope y ningún ancestro lo tiene (el marcado de
   Syncfusion que hay por encima no está scopeado). `::deep` compila a `[b-xxx] .ff-codigo-cell`, un
   selector de DESCENDIENTE, que por eso NUNCA casa con él. Sin `::deep` compila a
   `.ff-codigo-cell[b-xxx]` y sí casa. Es justo la regla que faltaba en el TPV: sin `position: relative`
   la lupa —que es `position: absolute`— se colgaba del contenedor de scroll y aparecía 34 px FUERA de su
   celda, encima de la columna Concepto, con el aspecto de botón gris del navegador.

   Sus DESCENDIENTES (el input, la lupa) sí necesitan `::deep`, porque para ellos el atributo de scope
   está en un ancestro: en esta misma celda. */
.ff-codigo-cell[b-lct2xu3qfc] {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
}

    .ff-codigo-cell > input[b-lct2xu3qfc] {
        flex: 1 1 auto;
        padding-inline-end: 1.1rem; /* deja hueco para la lupa */
    }

    /* La lupa está SIEMPRE VISIBLE, en suave. Antes salía con opacity 0 y solo aparecía al pasar el
       ratón: quien no sabía que estaba ahí no la encontraba nunca, que es justo lo contrario de lo que
       se busca en una celda de búsqueda. Suave para no cargar el grid, plena al apuntarla o al enfocar
       la celda. Misma regla en las tres pantallas, porque el estilo viaja con la rejilla. */
    .ff-cell-buscador-btn[b-lct2xu3qfc] {
        position: absolute;
        inset-inline-end: 2px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        color: var(--fdp-on-surface-variant, #9aa0b0);
        opacity: .45;
        transition: opacity .12s ease, color .12s ease;
    }

    /* Plena al apuntar la celda o al enfocarla (basta con que el foco esté en el input de al lado). */
    .ff-codigo-cell:hover .ff-cell-buscador-btn[b-lct2xu3qfc],
    .ff-codigo-cell:focus-within .ff-cell-buscador-btn[b-lct2xu3qfc],
    .ff-cell-buscador-btn:focus-visible[b-lct2xu3qfc],
    .ff-cell-buscador-btn:hover[b-lct2xu3qfc] {
        opacity: 1;
    }

        .ff-cell-buscador-btn:hover[b-lct2xu3qfc] {
            color: var(--fdp-primary, #2f6fed);
        }

    /* El icono es un <span> de Material Symbols que pinta este mismo componente. */
    .ff-cell-buscador-icon[b-lct2xu3qfc] {
        font-size: 16px;
        line-height: 1;
    }

/* ── Conversión de documentos (X4) ────────────────────────────────────────────────────────────────
   Celda de SOLO LECTURA (lo decide Application: acceso por rol o campo heredado del origen): se ve
   apagada, no se teclea. Sigue siendo enfocable, para no romper la navegación por teclado del grid.
   Estas clases van sobre los MISMOS inputs de arriba, así que también sin `::deep`. */
.ff-cell-ro[b-lct2xu3qfc] {
    color: var(--fdp-on-surface-variant, #6b7280);
    background: var(--fdp-surface-variant, #f4f5f8);
    cursor: default;
}

    .ff-cell-ro:focus[b-lct2xu3qfc] {
        box-shadow: inset 0 0 0 2px var(--fdp-on-surface-variant, #9aa0b0);
    }

/* Alineación de las celdas por tipo de dato (la pinta el propio componente en cada columna). */
.ff-cell-num[b-lct2xu3qfc] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ff-cell-center[b-lct2xu3qfc] {
    text-align: center;
}

/* Badge de línea HEREDADA de una conversión (viene de un pedido/albarán). Cuelga de `.ff-codigo-cell`
   pero lleva su propio atributo de scope, así que se alcanza sin `::deep`. */
.ff-heredada-ico[b-lct2xu3qfc] {
    font-size: 14px;
    line-height: 1;
    margin-inline-end: 2px;
    color: var(--fdp-primary, #2f6fed);
    flex: 0 0 auto;
}

/* ── Componentes de escandallo (Producción D3/PR5) ───────────────────────────────────────────────
   Una fila HIJA (componente) se pinta SANGRADA bajo su padre, en un tono apagado y en solo lectura:
   se edita en la ventana de componentes, nunca en la rejilla. La decisión (EsHija, nivel, acceso) es
   del modelo vivo; aquí solo el aspecto. Mismas reglas de scope que el resto: sin `::deep`, porque
   los inputs y la celda de código llevan ellos el atributo. */
.ff-cell-input.ff-hija[b-lct2xu3qfc] {
    color: var(--fdp-on-surface-variant, #6b7280);
    font-style: italic;
    background: var(--fdp-surface-variant, #f7f8fb);
}

.ff-hija-cell.ff-nivel-2[b-lct2xu3qfc] { padding-inline-start: 1.1rem; }
.ff-hija-cell.ff-nivel-3[b-lct2xu3qfc] { padding-inline-start: 2.2rem; }

.ff-hija-ico[b-lct2xu3qfc] {
    font-size: 14px;
    line-height: 1;
    margin-inline-end: 2px;
    color: var(--fdp-on-surface-variant, #9aa0b0);
    flex: 0 0 auto;
}

/* Icono de la celda Componentes: siempre visible en suave (como la lupa), pleno al apuntar. */
.ff-componentes-btn[b-lct2xu3qfc] {
    color: var(--fdp-primary, #2f6fed);
    opacity: .7;
}

/* FUN-782 — Botón «gasto sin IVA fuera de la base» de la celda IVA: con la marca puesta se ve pleno y en
   el color principal, para que la línea se distinga sin abrir nada. */
.ff-fuera-base-activo[b-lct2xu3qfc] {
    color: var(--fdp-primary, #2f6fed);
    opacity: 1;
}

/* Casilla «Inmovilizado» de la línea de compra: marcada, en el color principal y plena. */
.ff-inmovilizado-activo[b-lct2xu3qfc] {
    color: var(--fdp-primary, #2f6fed);
    opacity: 1;
}

/* RQ8: pregunta de existencias («Solo hay 3 de … ¿Seguir?»). Propia de la rejilla: las ventanas de la página
   (fdp-modal-*) son CSS aislado de FacturaFormulario y aquí no llegan. */
.rld-pregunta-fondo[b-lct2xu3qfc] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.rld-pregunta[b-lct2xu3qfc] {
    inline-size: min(420px, 92vw);
    background: var(--fdp-surface, #ffffff);
    color: var(--fdp-on-surface, #1a1b22);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.rld-pregunta-cabecera[b-lct2xu3qfc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fdp-outline-variant, #dfe1ea);
}

.rld-pregunta-texto[b-lct2xu3qfc] {
    margin: 0;
    padding: 1rem 1.1rem;
    font-size: .9rem;
    line-height: 1.4;
}

.rld-pregunta-botones[b-lct2xu3qfc] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--fdp-outline-variant, #dfe1ea);
}

.rld-pregunta-boton[b-lct2xu3qfc] {
    padding: .4rem .9rem;
    border-radius: 6px;
    border: 1px solid var(--fdp-outline-variant, #dfe1ea);
    background: var(--fdp-surface-low, #f6f7fb);
    color: var(--fdp-on-surface, #1a1b22);
    font: inherit;
    cursor: pointer;
}

.rld-pregunta-boton-principal[b-lct2xu3qfc] {
    background: var(--fdp-primary, #2f6fed);
    border-color: var(--fdp-primary, #2f6fed);
    color: #ffffff;
}

/* Se maneja con el teclado: el botón enfocado tiene que verse. */
.rld-pregunta-boton:focus-visible[b-lct2xu3qfc] {
    outline: 2px solid var(--fdp-primary, #2f6fed);
    outline-offset: 2px;
}

/* Punto de servicio de la línea (presupuestos, pedidos y albaranes): rojo pendiente, verde servida. Toma los
   sólidos del semáforo (semaforo.css: vencido y completo); el respaldo es el mismo color. */
.ff-servicio-punto[b-lct2xu3qfc] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.ff-servicio-pendiente[b-lct2xu3qfc] {
    background: var(--sem-vencido-solido, #dc2626);
}

.ff-servicio-servida[b-lct2xu3qfc] {
    background: var(--sem-completo-solido, #16a34a);
}

/* Papelera de la línea: la misma piel que los botones de arriba a la derecha (CommandBar «plano»):
   sin fondo ni borde y gris en reposo; al pasar el ratón, la caja aparece con el tinte rojizo de
   «Eliminar». Va en una plantilla de columna, que es marcado de esta rejilla: no necesita ::deep. */
.ff-eliminar-linea-btn[b-lct2xu3qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

    .ff-eliminar-linea-btn .material-symbols-rounded[b-lct2xu3qfc] {
        font-size: 20px;
        line-height: 1;
    }

    .ff-eliminar-linea-btn:hover[b-lct2xu3qfc],
    .ff-eliminar-linea-btn:focus-visible[b-lct2xu3qfc] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
        outline: none;
    }
/* _content/ErpPowergest/Presentation/Ventas/Componentes/RespuestaPresupuestoCliente.razor.rz.scp.css */
/* El color del estado lo pone el semáforo común (SemaforoCss, wwwroot/css/semaforo.css): aquí solo la maqueta. */
.rpc[b-qctd5hrwoh] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rpc-btn[b-qctd5hrwoh] {
    border: 1px solid var(--erp-border, #d0d5dd);
    background: var(--erp-surface, #fff);
    color: inherit;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}

.rpc-btn:disabled[b-qctd5hrwoh] {
    opacity: .6;
    cursor: default;
}

.rpc-btn--si[b-qctd5hrwoh] {
    border-color: #1e7a3c;
    color: #1e7a3c;
}

.rpc-btn--no[b-qctd5hrwoh] {
    border-color: #b42318;
    color: #b42318;
}

.rpc-rechazo[b-qctd5hrwoh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.rpc-campo[b-qctd5hrwoh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.rpc-campo--ancho[b-qctd5hrwoh] {
    min-width: 220px;
    flex: 1;
}

.rpc-campo input[b-qctd5hrwoh],
.rpc-campo select[b-qctd5hrwoh] {
    height: 28px;
    font-size: 13px;
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Components/BorradoDocumentosModal.razor.rz.scp.css */
/* Ventana de borrado de documentos (plan BD). Es la de la impresión automática con prefijo propio —el CSS
   scoped no cruza entre componentes— y lo único suyo va al final: el botón rojo de borrar, la insignia
   naranja de «se anulará» y la lista de lo que no se puede borrar.

   Tres estados con distinto número de bloques (rangos, confirmación e informe): la caja apila en columna. */

.bor-overlay[b-f3gl5y6c5p] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: borIn-b-f3gl5y6c5p 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bor-modal[b-f3gl5y6c5p] {
    --bor-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --bor-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --bor-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --bor-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    box-sizing: border-box;
    inline-size: min(56rem, 100%);
    max-block-size: min(84dvh, 46rem);
    display: flex;
    flex-direction: column;
    gap: var(--bor-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: clamp(0.75rem, 0.85vw, 1rem);
    background: #ffffff;
    padding: clamp(0.75rem, 1vw, 1rem);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

    /* El `::deep` alcanza el DOM de los componentes hijos (CampoConBuscador). Sin él, Blazor ataría el
       `*` al scope de ESTE componente y los inputs con lupa se quedarían sin box-sizing, desbordando
       su celda de la rejilla. */
    .bor-modal *[b-f3gl5y6c5p],
    .bor-modal *[b-f3gl5y6c5p]::before,
    .bor-modal *[b-f3gl5y6c5p]::after,
    .bor-modal[b-f3gl5y6c5p]  *,
    .bor-modal[b-f3gl5y6c5p]  *::before,
    .bor-modal[b-f3gl5y6c5p]  *::after {
        box-sizing: border-box;
    }

/* CABECERA */

.bor-header[b-f3gl5y6c5p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bor-gap);
}

.bor-title[b-f3gl5y6c5p] {
    font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    font-weight: 850;
    color: #1f2937;
}

.bor-subtitle[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #64748b;
    font-weight: 750;
}

.bor-close[b-f3gl5y6c5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .bor-close:hover[b-f3gl5y6c5p] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* FORMULARIO DE RANGOS */

.bor-form[b-f3gl5y6c5p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--bor-gap);
}

.bor-field[b-f3gl5y6c5p] {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
}

.bor-label[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #475569;
    font-weight: 800;
}

/* Los rangos de código (RangoCodigos) pintan su contenedor y su rótulo en un componente hijo: el CSS
   aislado de la ventana solo les llega con `::deep`. El contenedor es el mismo campo de la rejilla, y el
   rótulo —que ahí es texto del propio <label>— toma el aspecto de .bor-label. */
.bor-modal[b-f3gl5y6c5p]  .bor-field--codigo {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: var(--bor-font-small);
    color: #475569;
    font-weight: 800;
}

    .bor-modal[b-f3gl5y6c5p]  .bor-field--codigo .cc-nombre {
        font-weight: 600;
    }

/* El input de un campo con lupa lo pinta CampoConBuscador, que es OTRO componente: el CSS scoped de
   este no lo alcanza sin `::deep`, y sin la regla el campo sale sin borde, sin alto y desbordando la
   celda. El componente solo aporta el layout de la lupa; el aspecto del input lo pone el host (por eso
   se le pasa `ClaseInput="bor-input"`). Los dos selectores llevan la MISMA declaración a propósito: un
   campo con lupa y uno sin ella tienen que ser indistinguibles. */
.bor-input[b-f3gl5y6c5p],
.bor-modal[b-f3gl5y6c5p]  .bor-input {
    min-block-size: var(--bor-field-block);
    inline-size: 100%;
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: 0.6rem;
    background: #ffffff;
    color: #1f2937;
    font-size: var(--bor-font-text);
    font-weight: 700;
}

    .bor-input:focus[b-f3gl5y6c5p],
    .bor-modal[b-f3gl5y6c5p]  .bor-input:focus {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

    .bor-input[b-f3gl5y6c5p]::placeholder,
    .bor-modal[b-f3gl5y6c5p]  .bor-input::placeholder {
        color: #94a3b8;
        font-weight: 600;
    }

    .bor-input:disabled[b-f3gl5y6c5p],
    .bor-modal[b-f3gl5y6c5p]  .bor-input:disabled {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

/* CUERPO: PREVIEW / INFORME */

.bor-body[b-f3gl5y6c5p] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.bor-table[b-f3gl5y6c5p] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--bor-font-small);
}

    .bor-table th[b-f3gl5y6c5p] {
        position: sticky;
        inset-block-start: 0;
        text-align: start;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #eef2f7;
    }

    .bor-table td[b-f3gl5y6c5p] {
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.bor-num[b-f3gl5y6c5p] {
    text-align: end;
    white-space: nowrap;
}

.bor-descartado td[b-f3gl5y6c5p] {
    background: #fbfbfc;
    color: #64748b;
}

.bor-fila-error td[b-f3gl5y6c5p] {
    background: #fffbfb;
}

.bor-avisos[b-f3gl5y6c5p] {
    margin: 0;
    padding-inline-start: 1rem;
    color: #b45309;
}

.bor-vacio[b-f3gl5y6c5p] {
    display: block;
    padding: 1rem;
    color: #94a3b8;
    font-size: var(--bor-font-small);
    font-weight: 700;
    text-align: center;
}

.bor-error[b-f3gl5y6c5p] {
    padding: 0.8rem;
    color: #b91c1c;
    font-size: var(--bor-font-small);
    font-weight: 800;
}

/* RESUMEN Y BADGES */

.bor-summary[b-f3gl5y6c5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bor-badge[b-f3gl5y6c5p] {
    display: inline-flex;
    align-items: center;
    border-radius: 999rem;
    padding: 0.15rem 0.6rem;
    font-size: var(--bor-font-small);
    font-weight: 850;
    white-space: nowrap;
}

.bor-badge-green[b-f3gl5y6c5p] {
    background: #dcfce7;
    color: #166534;
}

.bor-badge-red[b-f3gl5y6c5p] {
    background: #fee2e2;
    color: #991b1b;
}

.bor-badge-gray[b-f3gl5y6c5p] {
    background: #f1f5f9;
    color: #475569;
}

/* PROGRESO */

.bor-progress[b-f3gl5y6c5p] {
    display: grid;
    gap: 0.3rem;
}

.bor-progress-text[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #475569;
    font-weight: 800;
}

.bor-progress-track[b-f3gl5y6c5p] {
    block-size: 0.4rem;
    border-radius: 999rem;
    background: #e2e8f0;
    overflow: hidden;
}

.bor-progress-bar[b-f3gl5y6c5p] {
    block-size: 100%;
    border-radius: 999rem;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* ACCIONES */

.bor-actions[b-f3gl5y6c5p] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bor-gap);
}

.bor-resumen[b-f3gl5y6c5p] {
    flex: 1 1 auto;
    font-size: var(--bor-font-small);
    color: #64748b;
    font-weight: 800;
}

.bor-btn[b-f3gl5y6c5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: var(--bor-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    background: #ffffff;
    color: #374151;
    font-size: var(--bor-font-text);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

    .bor-btn:hover:not(:disabled)[b-f3gl5y6c5p] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

    .bor-btn:disabled[b-f3gl5y6c5p] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bor-btn-primary[b-f3gl5y6c5p] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .bor-btn-primary:hover:not(:disabled)[b-f3gl5y6c5p] {
        background: #1d4ed8;
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.bor-btn-icon[b-f3gl5y6c5p] {
    font-size: 1.05rem;
    line-height: 1;
}

@keyframes borIn-b-f3gl5y6c5p {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* CONFIRMACIÓN: «se van a imprimir X documentos, ¿seguro?» */

.bor-confirm[b-f3gl5y6c5p] {
    display: flex;
    align-items: flex-start;
    gap: var(--bor-gap);
    padding: clamp(0.75rem, 1vw, 1rem);
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    background: #f8fafc;
}

.bor-confirm-icon[b-f3gl5y6c5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
    border-radius: 999rem;
    background: #dbeafe;
    color: #1d4ed8;
}

.bor-confirm-text[b-f3gl5y6c5p] {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 0;
}

    .bor-confirm-text p[b-f3gl5y6c5p] {
        margin: 0;
    }

.bor-confirm-pregunta[b-f3gl5y6c5p] {
    font-size: var(--bor-font-text);
    color: #1f2937;
    font-weight: 800;
}

.bor-confirm-nota[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #64748b;
    font-weight: 700;
}

/* Nota al pie del formulario de rangos (qué entra en el lote). */

.bor-nota[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #64748b;
    font-weight: 700;
}

.bor-summary-total[b-f3gl5y6c5p] {
    font-size: var(--bor-font-small);
    color: #64748b;
    font-weight: 800;
}

/* LO PROPIO DEL BORRADO */

/* Borrar es la acción peligrosa de la ventana: rojo, no el azul de las demás. */
.bor-btn-peligro[b-f3gl5y6c5p] {
    border: none;
    background: #dc2626;
    color: #ffffff;
}

    .bor-btn-peligro:hover:not(:disabled)[b-f3gl5y6c5p] {
        background: #b91c1c;
        box-shadow: 0 0.65rem 1.1rem rgba(220, 38, 38, 0.18);
    }

.bor-confirm-icon--peligro[b-f3gl5y6c5p] {
    background: #fee2e2;
    color: #b91c1c;
}

.bor-badge-orange[b-f3gl5y6c5p] {
    background: #ffedd5;
    color: #9a3412;
}

.bor-lista[b-f3gl5y6c5p] {
    margin: 0;
    padding-inline-start: 1.1rem;
    display: grid;
    gap: 0.2rem;
    font-size: var(--bor-font-small);
    color: #1f2937;
    font-weight: 700;
}

.bor-no-permitidos[b-f3gl5y6c5p] {
    max-block-size: 12rem;
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Components/ConversionMasivaModal.razor.rz.scp.css */
/* X7 — Ventana de conversión masiva. Mismo lenguaje visual que el listado de Facturación
   (mismas medidas, mismos azules), con prefijo propio: el CSS de la página es scoped y no cruza. */

.cnv-overlay[b-335m9nid1g] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: cnvIn-b-335m9nid1g 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cnv-modal[b-335m9nid1g] {
    --cnv-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --cnv-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --cnv-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --cnv-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    box-sizing: border-box;
    inline-size: min(56rem, 100%);
    max-block-size: min(84dvh, 46rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: var(--cnv-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: clamp(0.75rem, 0.85vw, 1rem);
    background: #ffffff;
    padding: clamp(0.75rem, 1vw, 1rem);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

    .cnv-modal *[b-335m9nid1g],
    .cnv-modal *[b-335m9nid1g]::before,
    .cnv-modal *[b-335m9nid1g]::after {
        box-sizing: border-box;
    }

/* CABECERA */

.cnv-header[b-335m9nid1g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cnv-gap);
}

.cnv-title[b-335m9nid1g] {
    font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    font-weight: 850;
    color: #1f2937;
}

.cnv-subtitle[b-335m9nid1g] {
    font-size: var(--cnv-font-small);
    color: #64748b;
    font-weight: 750;
}

.cnv-close[b-335m9nid1g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .cnv-close:hover[b-335m9nid1g] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* FORMULARIO DE RANGOS */

.cnv-form[b-335m9nid1g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--cnv-gap);
}

.cnv-field[b-335m9nid1g] {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
}

.cnv-field-small[b-335m9nid1g] {
    max-inline-size: 12rem;
}

.cnv-label[b-335m9nid1g] {
    font-size: var(--cnv-font-small);
    color: #475569;
    font-weight: 800;
}

/* La serie es un CampoCodigo (componente hijo): su input recibe la clase por parámetro y la regla le llega
   con ::deep. Mismo aspecto que los demás campos. */
.cnv-input[b-335m9nid1g],
.cnv-form[b-335m9nid1g]  .cnv-input {
    min-block-size: var(--cnv-field-block);
    inline-size: 100%;
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: 0.6rem;
    background: #ffffff;
    color: #1f2937;
    font-size: var(--cnv-font-text);
    font-weight: 700;
}

    .cnv-input:focus[b-335m9nid1g] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

    .cnv-input:disabled[b-335m9nid1g] {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

/* CUERPO: PREVIEW / INFORME */

.cnv-body[b-335m9nid1g] {
    min-block-size: 0;
    overflow: auto;
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.cnv-table[b-335m9nid1g] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--cnv-font-small);
}

    .cnv-table th[b-335m9nid1g] {
        position: sticky;
        inset-block-start: 0;
        text-align: start;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #eef2f7;
    }

    .cnv-table td[b-335m9nid1g] {
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.cnv-num[b-335m9nid1g] {
    text-align: end;
    white-space: nowrap;
}

.cnv-descartado td[b-335m9nid1g] {
    background: #fbfbfc;
    color: #64748b;
}

.cnv-fila-error td[b-335m9nid1g] {
    background: #fffbfb;
}

.cnv-avisos[b-335m9nid1g] {
    margin: 0;
    padding-inline-start: 1rem;
    color: #b45309;
}

.cnv-vacio[b-335m9nid1g] {
    display: block;
    padding: 1rem;
    color: #94a3b8;
    font-size: var(--cnv-font-small);
    font-weight: 700;
    text-align: center;
}

.cnv-error[b-335m9nid1g] {
    padding: 0.8rem;
    color: #b91c1c;
    font-size: var(--cnv-font-small);
    font-weight: 800;
}

/* RESUMEN Y BADGES */

.cnv-summary[b-335m9nid1g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cnv-badge[b-335m9nid1g] {
    display: inline-flex;
    align-items: center;
    border-radius: 999rem;
    padding: 0.15rem 0.6rem;
    font-size: var(--cnv-font-small);
    font-weight: 850;
    white-space: nowrap;
}

.cnv-badge-green[b-335m9nid1g] {
    background: #dcfce7;
    color: #166534;
}

.cnv-badge-red[b-335m9nid1g] {
    background: #fee2e2;
    color: #991b1b;
}

.cnv-badge-gray[b-335m9nid1g] {
    background: #f1f5f9;
    color: #475569;
}

/* PROGRESO */

.cnv-progress[b-335m9nid1g] {
    display: grid;
    gap: 0.3rem;
}

.cnv-progress-text[b-335m9nid1g] {
    font-size: var(--cnv-font-small);
    color: #475569;
    font-weight: 800;
}

.cnv-progress-track[b-335m9nid1g] {
    block-size: 0.4rem;
    border-radius: 999rem;
    background: #e2e8f0;
    overflow: hidden;
}

.cnv-progress-bar[b-335m9nid1g] {
    block-size: 100%;
    border-radius: 999rem;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* ACCIONES */

.cnv-actions[b-335m9nid1g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cnv-gap);
}

.cnv-resumen[b-335m9nid1g] {
    flex: 1 1 auto;
    font-size: var(--cnv-font-small);
    color: #64748b;
    font-weight: 800;
}

.cnv-btn[b-335m9nid1g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: var(--cnv-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    background: #ffffff;
    color: #374151;
    font-size: var(--cnv-font-text);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

    .cnv-btn:hover:not(:disabled)[b-335m9nid1g] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

    .cnv-btn:disabled[b-335m9nid1g] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.cnv-btn-primary[b-335m9nid1g] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .cnv-btn-primary:hover:not(:disabled)[b-335m9nid1g] {
        background: #1d4ed8;
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.cnv-btn-icon[b-335m9nid1g] {
    font-size: 1.05rem;
    line-height: 1;
}

@keyframes cnvIn-b-335m9nid1g {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Components/ElegirLineasOrigen.razor.rz.scp.css */
/* Ventana «Traer de …» (facturación parcial guiada). Mismo aspecto que las ventanas del documento. */
.elo-fondo[b-g1z33htfxg] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.elo-card[b-g1z33htfxg] {
    inline-size: min(760px, 94vw);
    max-block-size: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--fdp-surface, #fff);
    color: var(--fdp-on-surface, #1a1b22);
    border-radius: var(--fdp-radius-md, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.elo-head[b-g1z33htfxg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fdp-outline-variant, #e4e5ec);
}

.elo-body[b-g1z33htfxg] {
    padding: .8rem 1.1rem;
    overflow: auto;
    font-size: .88rem;
}

.elo-ayuda[b-g1z33htfxg] {
    margin: 0 0 .6rem;
    color: var(--fdp-on-surface-variant, #5f6368);
}

.elo-tabla[b-g1z33htfxg] {
    inline-size: 100%;
    border-collapse: collapse;
}

    .elo-tabla th[b-g1z33htfxg],
    .elo-tabla td[b-g1z33htfxg] {
        padding: .3rem .45rem;
        border-bottom: 1px solid var(--fdp-outline-variant, #e4e5ec);
        text-align: start;
        vertical-align: middle;
    }

    .elo-tabla th[b-g1z33htfxg] {
        font-weight: 600;
        font-size: .78rem;
        color: var(--fdp-on-surface-variant, #5f6368);
    }

    .elo-tabla tr:not(.elo-marcada) td[b-g1z33htfxg] {
        color: var(--fdp-on-surface-variant, #9aa0b0);
    }

.elo-num[b-g1z33htfxg] {
    text-align: end !important;
    white-space: nowrap;
}

.elo-col-marca[b-g1z33htfxg] {
    inline-size: 2rem;
    text-align: center !important;
}

.elo-col-cantidad[b-g1z33htfxg] {
    inline-size: 7rem;
}

.elo-concepto[b-g1z33htfxg] {
    overflow-wrap: anywhere;
}

.elo-texto[b-g1z33htfxg] {
    font-style: italic;
}

.elo-input[b-g1z33htfxg] {
    inline-size: 100%;
    padding: .2rem .35rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 6px;
    font: inherit;
    text-align: end;
}

.elo-acciones[b-g1z33htfxg] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--fdp-outline-variant, #e4e5ec);
}

.elo-btn[b-g1z33htfxg] {
    padding: .4rem .9rem;
    border-radius: var(--fdp-radius-sm, 6px);
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    background: var(--fdp-surface-low, #fafbfd);
    color: var(--fdp-on-surface, #1a1b22);
    font: inherit;
    cursor: pointer;
}

.elo-btn-ghost[b-g1z33htfxg] {
    background: transparent;
}

.elo-btn-primario[b-g1z33htfxg] {
    background: var(--fdp-primary, #00288e);
    border-color: var(--fdp-primary, #00288e);
    color: #fff;
}

/* La ventana se maneja con el teclado: el botón enfocado tiene que verse. */
.elo-btn:focus-visible[b-g1z33htfxg] {
    outline: 2px solid var(--fdp-primary, #00288e);
    outline-offset: 2px;
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Components/ImpresionAutomaticaModal.razor.rz.scp.css */
/* Ventana de impresión automática. Mismo lenguaje visual que la conversión masiva y que el listado de
   Facturación (mismas medidas, mismos azules), con prefijo propio: el CSS de la página es scoped y no cruza.

   A diferencia de la conversión, esta ventana tiene TRES estados con distinto número de bloques (rangos,
   confirmación e informe), así que la caja apila en columna en vez de fijar filas de rejilla: con
   grid-template-rows, el estado con menos bloques dejaría huecos. */

.imp-overlay[b-03uwfka8cy] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: impIn-b-03uwfka8cy 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.imp-modal[b-03uwfka8cy] {
    --imp-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --imp-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --imp-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --imp-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    box-sizing: border-box;
    inline-size: min(56rem, 100%);
    max-block-size: min(84dvh, 46rem);
    display: flex;
    flex-direction: column;
    gap: var(--imp-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: clamp(0.75rem, 0.85vw, 1rem);
    background: #ffffff;
    padding: clamp(0.75rem, 1vw, 1rem);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

    /* El `::deep` alcanza el DOM de los componentes hijos (CampoConBuscador). Sin él, Blazor ataría el
       `*` al scope de ESTE componente y los inputs con lupa se quedarían sin box-sizing, desbordando
       su celda de la rejilla. */
    .imp-modal *[b-03uwfka8cy],
    .imp-modal *[b-03uwfka8cy]::before,
    .imp-modal *[b-03uwfka8cy]::after,
    .imp-modal[b-03uwfka8cy]  *,
    .imp-modal[b-03uwfka8cy]  *::before,
    .imp-modal[b-03uwfka8cy]  *::after {
        box-sizing: border-box;
    }

/* CABECERA */

.imp-header[b-03uwfka8cy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--imp-gap);
}

.imp-title[b-03uwfka8cy] {
    font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    font-weight: 850;
    color: #1f2937;
}

.imp-subtitle[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #64748b;
    font-weight: 750;
}

.imp-close[b-03uwfka8cy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .imp-close:hover[b-03uwfka8cy] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* FORMULARIO DE RANGOS */

.imp-form[b-03uwfka8cy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--imp-gap);
}

.imp-field[b-03uwfka8cy] {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
}

.imp-label[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #475569;
    font-weight: 800;
}

/* Los rangos de código (RangoCodigos) pintan su contenedor y su rótulo en un componente hijo: el CSS
   aislado de la ventana solo les llega con `::deep`. El contenedor es el mismo campo de la rejilla, y el
   rótulo —que ahí es texto del propio <label>— toma el aspecto de .imp-label. */
.imp-modal[b-03uwfka8cy]  .imp-field--codigo {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: var(--imp-font-small);
    color: #475569;
    font-weight: 800;
}

    .imp-modal[b-03uwfka8cy]  .imp-field--codigo .cc-nombre {
        font-weight: 600;
    }

/* El input de un campo con lupa lo pinta CampoConBuscador, que es OTRO componente: el CSS scoped de
   este no lo alcanza sin `::deep`, y sin la regla el campo sale sin borde, sin alto y desbordando la
   celda. El componente solo aporta el layout de la lupa; el aspecto del input lo pone el host (por eso
   se le pasa `ClaseInput="imp-input"`). Los dos selectores llevan la MISMA declaración a propósito: un
   campo con lupa y uno sin ella tienen que ser indistinguibles. */
.imp-input[b-03uwfka8cy],
.imp-modal[b-03uwfka8cy]  .imp-input {
    min-block-size: var(--imp-field-block);
    inline-size: 100%;
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: 0.6rem;
    background: #ffffff;
    color: #1f2937;
    font-size: var(--imp-font-text);
    font-weight: 700;
}

    .imp-input:focus[b-03uwfka8cy],
    .imp-modal[b-03uwfka8cy]  .imp-input:focus {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

    .imp-input[b-03uwfka8cy]::placeholder,
    .imp-modal[b-03uwfka8cy]  .imp-input::placeholder {
        color: #94a3b8;
        font-weight: 600;
    }

    .imp-input:disabled[b-03uwfka8cy],
    .imp-modal[b-03uwfka8cy]  .imp-input:disabled {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

/* CUERPO: PREVIEW / INFORME */

.imp-body[b-03uwfka8cy] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.imp-table[b-03uwfka8cy] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--imp-font-small);
}

    .imp-table th[b-03uwfka8cy] {
        position: sticky;
        inset-block-start: 0;
        text-align: start;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #eef2f7;
    }

    .imp-table td[b-03uwfka8cy] {
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.imp-num[b-03uwfka8cy] {
    text-align: end;
    white-space: nowrap;
}

.imp-descartado td[b-03uwfka8cy] {
    background: #fbfbfc;
    color: #64748b;
}

.imp-fila-error td[b-03uwfka8cy] {
    background: #fffbfb;
}

.imp-avisos[b-03uwfka8cy] {
    margin: 0;
    padding-inline-start: 1rem;
    color: #b45309;
}

.imp-vacio[b-03uwfka8cy] {
    display: block;
    padding: 1rem;
    color: #94a3b8;
    font-size: var(--imp-font-small);
    font-weight: 700;
    text-align: center;
}

.imp-error[b-03uwfka8cy] {
    padding: 0.8rem;
    color: #b91c1c;
    font-size: var(--imp-font-small);
    font-weight: 800;
}

/* RESUMEN Y BADGES */

.imp-summary[b-03uwfka8cy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.imp-badge[b-03uwfka8cy] {
    display: inline-flex;
    align-items: center;
    border-radius: 999rem;
    padding: 0.15rem 0.6rem;
    font-size: var(--imp-font-small);
    font-weight: 850;
    white-space: nowrap;
}

.imp-badge-green[b-03uwfka8cy] {
    background: #dcfce7;
    color: #166534;
}

.imp-badge-red[b-03uwfka8cy] {
    background: #fee2e2;
    color: #991b1b;
}

.imp-badge-gray[b-03uwfka8cy] {
    background: #f1f5f9;
    color: #475569;
}

/* PROGRESO */

.imp-progress[b-03uwfka8cy] {
    display: grid;
    gap: 0.3rem;
}

.imp-progress-text[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #475569;
    font-weight: 800;
}

.imp-progress-track[b-03uwfka8cy] {
    block-size: 0.4rem;
    border-radius: 999rem;
    background: #e2e8f0;
    overflow: hidden;
}

.imp-progress-bar[b-03uwfka8cy] {
    block-size: 100%;
    border-radius: 999rem;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* ACCIONES */

.imp-actions[b-03uwfka8cy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--imp-gap);
}

.imp-resumen[b-03uwfka8cy] {
    flex: 1 1 auto;
    font-size: var(--imp-font-small);
    color: #64748b;
    font-weight: 800;
}

.imp-btn[b-03uwfka8cy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: var(--imp-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    background: #ffffff;
    color: #374151;
    font-size: var(--imp-font-text);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

    .imp-btn:hover:not(:disabled)[b-03uwfka8cy] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

    .imp-btn:disabled[b-03uwfka8cy] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.imp-btn-primary[b-03uwfka8cy] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .imp-btn-primary:hover:not(:disabled)[b-03uwfka8cy] {
        background: #1d4ed8;
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.imp-btn-icon[b-03uwfka8cy] {
    font-size: 1.05rem;
    line-height: 1;
}

@keyframes impIn-b-03uwfka8cy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* CONFIRMACIÓN: «se van a imprimir X documentos, ¿seguro?» */

.imp-confirm[b-03uwfka8cy] {
    display: flex;
    align-items: flex-start;
    gap: var(--imp-gap);
    padding: clamp(0.75rem, 1vw, 1rem);
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    background: #f8fafc;
}

.imp-confirm-icon[b-03uwfka8cy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
    border-radius: 999rem;
    background: #dbeafe;
    color: #1d4ed8;
}

.imp-confirm-text[b-03uwfka8cy] {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 0;
}

    .imp-confirm-text p[b-03uwfka8cy] {
        margin: 0;
    }

.imp-confirm-pregunta[b-03uwfka8cy] {
    font-size: var(--imp-font-text);
    color: #1f2937;
    font-weight: 800;
}

.imp-confirm-nota[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #64748b;
    font-weight: 700;
}

/* Nota al pie del formulario de rangos (qué entra en el lote). */

.imp-nota[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #64748b;
    font-weight: 700;
}

.imp-summary-total[b-03uwfka8cy] {
    font-size: var(--imp-font-small);
    color: #64748b;
    font-weight: 800;
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Pages/FacturacionAlbaranesPage.razor.rz.scp.css */
/* X9 — Facturación de albaranes. Mismo lenguaje visual que el listado de Facturación (mismas medidas, mismos
   azules), con prefijo propio: el CSS de la página es scoped y no cruza de un componente a otro. */

.fab-page[b-ytbsc1fffq],
.fab-page *[b-ytbsc1fffq],
.fab-page *[b-ytbsc1fffq]::before,
.fab-page *[b-ytbsc1fffq]::after {
    box-sizing: border-box;
}

.fab-page[b-ytbsc1fffq] {
    --fab-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fab-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fab-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fab-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fab-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fab-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fab-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fab-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fab-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fab-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--fab-gap);
    overflow: hidden;
}

.fab-heading[b-ytbsc1fffq],
.fab-criterios[b-ytbsc1fffq],
.fab-resultado[b-ytbsc1fffq],
.fab-grid-wrapper[b-ytbsc1fffq] {
    min-inline-size: 0;
}

/* Título con el icono «Emitir / Borrador» a su derecha. */
.fab-title-row[b-ytbsc1fffq] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.fab-emitir-toggle[b-ytbsc1fffq] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-block-size: 2.2rem;
    padding: 0 .75rem;
    border-radius: 8px;
    border: 1px solid;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

    .fab-emitir-toggle .material-symbols-outlined[b-ytbsc1fffq] {
        font-size: 1.3rem;
        font-weight: 300;
    }

    /* Emitir: verde, el mismo del botón Emitir del documento (acto fiscal). */
    .fab-emitir-toggle.is-emitir[b-ytbsc1fffq] {
        background: color-mix(in srgb, #1f9d55 10%, #ffffff);
        border-color: #1f9d55;
        color: #17803f;
    }

    /* Borrador: neutro. */
    .fab-emitir-toggle.is-borrador[b-ytbsc1fffq] {
        background: #ffffff;
        border-color: #c7cad6;
        color: #4b5563;
    }

    .fab-emitir-toggle:disabled[b-ytbsc1fffq] {
        opacity: .55;
        cursor: default;
    }

.fab-title[b-ytbsc1fffq] {
    margin: 0;
    font-size: var(--fab-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.fab-subtitle[b-ytbsc1fffq] {
    margin-block-start: 0.25rem;
    font-size: var(--fab-font-text);
    color: #6b7280;
    line-height: 1.35;
}

.card-panel[b-ytbsc1fffq] {
    inline-size: 100%;
    min-inline-size: 0;
    background: #ffffff;
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fab-radius);
    padding: var(--fab-panel-pad);
    box-shadow: var(--fab-shadow);
}

/* CRITERIOS */

.fab-criterios[b-ytbsc1fffq] {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: var(--fab-inner-gap);
}

.fab-panel-title[b-ytbsc1fffq] {
    font-size: var(--fab-font-panel-title);
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.fab-panel-subtitle[b-ytbsc1fffq] {
    margin-block-start: 0.15rem;
    font-size: var(--fab-font-small);
    color: #6b7280;
}

.fab-form[b-ytbsc1fffq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--fab-inner-gap);
}

.fab-field[b-ytbsc1fffq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

    .fab-field > label[b-ytbsc1fffq] {
        font-size: var(--fab-font-small);
        font-weight: 650;
        color: #64748b;
    }

/* El rango de códigos de tercero (RangoCodigos) pinta su contenedor y su rótulo en un componente hijo: el
   CSS aislado de la página solo le llega con `::deep`. El contenedor es un <label> con el rótulo como
   texto propio, así que el aspecto del rótulo se pone en el propio contenedor. */
.fab-page[b-ytbsc1fffq]  .fab-field--codigo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: var(--fab-font-small);
    font-weight: 650;
    color: #64748b;
}

.fab-hint[b-ytbsc1fffq] {
    font-size: var(--fab-font-small);
    color: #94a3b8;
    line-height: 1.25;
}

/* Con `::deep` además: el input de los códigos con lupa lo pinta CampoConBuscador (otro componente). */
.fab-input[b-ytbsc1fffq],
.fab-select[b-ytbsc1fffq],
.fab-page[b-ytbsc1fffq]  .fab-input {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--fab-field-block);
    padding-inline: 0.6rem;
    border: 0.0625rem solid #dbe2ea;
    border-radius: 0.5rem;
    background: #ffffff;
    font-size: var(--fab-font-text);
    color: #1f2937;
    outline: none;
}

    .fab-input:focus[b-ytbsc1fffq],
    .fab-select:focus[b-ytbsc1fffq],
    .fab-page[b-ytbsc1fffq]  .fab-input:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
    }

.fab-input-readonly[b-ytbsc1fffq] {
    background: #f8fafc;
    color: #64748b;
}

.fab-field-check[b-ytbsc1fffq] {
    justify-content: end;
}

.fab-toggle[b-ytbsc1fffq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    block-size: var(--fab-field-block);
    font-size: var(--fab-font-text);
    color: #1f2937;
    cursor: pointer;
}

.fab-check[b-ytbsc1fffq] {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    accent-color: #2563eb;
    cursor: pointer;
}

.fab-criterios-actions[b-ytbsc1fffq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* RESULTADO */

.fab-resultado[b-ytbsc1fffq] {
    block-size: 100%;
    min-block-size: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--fab-inner-gap);
    overflow: hidden;
}

.fab-results-bar[b-ytbsc1fffq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fab-inner-gap);
}

.fab-results-text[b-ytbsc1fffq] {
    font-size: var(--fab-font-text);
    color: #6b7280;
}

.fab-results-sel[b-ytbsc1fffq] {
    font-weight: 700;
    color: #2563eb;
}

.fab-results-actions[b-ytbsc1fffq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fab-grid-wrapper[b-ytbsc1fffq] {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
}

.fab-aviso[b-ytbsc1fffq] {
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 0.0625rem solid #e5e7eb;
    font-size: var(--fab-font-text);
    color: #64748b;
}

.fab-num[b-ytbsc1fffq] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* PROGRESO */

.fab-progress[b-ytbsc1fffq] {
    display: grid;
    gap: 0.35rem;
}

.fab-progress-text[b-ytbsc1fffq] {
    font-size: var(--fab-font-small);
    color: #64748b;
}

.fab-progress-track[b-ytbsc1fffq] {
    inline-size: 100%;
    block-size: 0.35rem;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.fab-progress-bar[b-ytbsc1fffq] {
    block-size: 100%;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* BOTONES */

.fab-primary-btn[b-ytbsc1fffq],
.fab-action-btn[b-ytbsc1fffq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    block-size: var(--fab-field-block);
    padding-inline: 0.85rem;
    border-radius: 0.5rem;
    font-size: var(--fab-font-text);
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
}

.fab-primary-btn[b-ytbsc1fffq] {
    background: #2563eb;
    border: none;
    color: #ffffff;
}

    .fab-primary-btn:hover:not(:disabled)[b-ytbsc1fffq] {
        background: #1d4ed8;
    }

.fab-action-btn[b-ytbsc1fffq] {
    background: #ffffff;
    border: 0.0625rem solid #dbe2ea;
    color: #1f2937;
}

    .fab-action-btn:hover:not(:disabled)[b-ytbsc1fffq] {
        border-color: #93c5fd;
    }

.fab-btn-icon[b-ytbsc1fffq] {
    font-size: 1.05rem;
}

.fab-link[b-ytbsc1fffq] {
    color: #2563eb;
    font-weight: 650;
    text-decoration: none;
}

    .fab-link:hover[b-ytbsc1fffq] {
        text-decoration: underline;
    }

/* BADGES */

.fab-badge[b-ytbsc1fffq] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: var(--fab-font-small);
    font-weight: 700;
    white-space: nowrap;
}

.fab-badge-blue[b-ytbsc1fffq] {
    background: #eff6ff;
    color: #1d4ed8;
}

.fab-badge-green[b-ytbsc1fffq] {
    background: #ecfdf5;
    color: #047857;
}

.fab-badge-orange[b-ytbsc1fffq] {
    background: #fff7ed;
    color: #c2410c;
}

.fab-badge-red[b-ytbsc1fffq] {
    background: #fef2f2;
    color: #b91c1c;
}

.fab-badge-gray[b-ytbsc1fffq] {
    background: #f1f5f9;
    color: #475569;
}

/* MODALES */

.fab-modal-overlay[b-ytbsc1fffq] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.fab-modal[b-ytbsc1fffq] {
    inline-size: min(56rem, 100%);
    max-block-size: min(84dvh, 46rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--fab-inner-gap);
    padding: var(--fab-panel-pad);
    border-radius: var(--fab-radius);
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.fab-modal-header[b-ytbsc1fffq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fab-inner-gap);
}

.fab-modal-title[b-ytbsc1fffq] {
    font-size: var(--fab-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fab-modal-close[b-ytbsc1fffq] {
    display: inline-flex;
    padding: 0.2rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.fab-modal-summary[b-ytbsc1fffq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fab-modal-summary-total[b-ytbsc1fffq] {
    margin-inline-start: auto;
    font-size: var(--fab-font-text);
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

.fab-modal-body[b-ytbsc1fffq] {
    min-block-size: 0;
    overflow: auto;
}

.fab-modal-actions[b-ytbsc1fffq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.fab-informe-table[b-ytbsc1fffq] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fab-font-text);
}

    .fab-informe-table th[b-ytbsc1fffq] {
        position: sticky;
        inset-block-start: 0;
        padding: 0.4rem 0.5rem;
        text-align: start;
        font-weight: 700;
        color: #64748b;
        background: #f8fafc;
        border-block-end: 0.0625rem solid #e5e7eb;
    }

    .fab-informe-table td[b-ytbsc1fffq] {
        padding: 0.4rem 0.5rem;
        color: #1f2937;
        border-block-end: 0.0625rem solid #eef2f7;
        vertical-align: top;
    }

.fab-informe-error td[b-ytbsc1fffq] {
    background: #fffbfb;
}

.fab-descartados[b-ytbsc1fffq] {
    margin-block-start: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 0.0625rem solid #e5e7eb;
    font-size: var(--fab-font-small);
    color: #64748b;
}

.fab-descartados-title[b-ytbsc1fffq] {
    font-weight: 700;
    color: #475569;
    margin-block-end: 0.25rem;
}

.fab-descartados ul[b-ytbsc1fffq] {
    margin: 0;
    padding-inline-start: 1rem;
}

@media (max-width: 62rem) {
    .fab-results-bar[b-ytbsc1fffq] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-progress-bar[b-ytbsc1fffq] {
        transition: none;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Pages/FacturacionPage.razor.rz.scp.css */
.facturacion-page[b-qpflkei1dr],
.facturacion-page *[b-qpflkei1dr],
.facturacion-page *[b-qpflkei1dr]::before,
.facturacion-page *[b-qpflkei1dr]::after {
    box-sizing: border-box;
}

.facturacion-page[b-qpflkei1dr] {
    --fc-gap: clamp(0.6rem, 0.8vw, 0.9rem);
    --fc-inner-gap: clamp(0.5rem, 0.65vw, 0.75rem);
    --fc-panel-pad: clamp(0.75rem, 1vw, 1rem);
    --fc-radius: clamp(0.75rem, 0.85vw, 1rem);
    --fc-field-block: clamp(2.35rem, 3.8dvh, 2.75rem);
    --fc-font-title: clamp(1.25rem, 1rem + 0.75vw, 1.55rem);
    --fc-font-panel-title: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
    --fc-font-text: clamp(0.76rem, 0.71rem + 0.18vw, 0.86rem);
    --fc-font-small: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
    --fc-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.045);
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—, y a partir de ahí la página
       crece con su contenido. Nada de `height:100%` + `overflow:hidden`: si la tabla no cabe (ventana
       baja, o filas altas), la página se extiende y el scroll lo lleva .main-body, en vez de comprimir
       la tabla y obligarla a desplazarse por dentro.
       Filas: cabecera, KPIs y listado; la última es `1fr`, así que reparte el espacio sobrante cuando
       sobra y empuja el alto de la página cuando falta. */
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-gap);
    /* «backwards» (no «both»): el fotograma final del keyframe (transform/filter) NO se retiene tras
       la animación. Con «both» quedaba aplicado de forma permanente y convertía a .facturacion-page en
       el bloque contenedor de sus descendientes position:fixed, atrapando los modales (conversión
       masiva, informe de emisión, ventanas de búsqueda) dentro del panel en vez de cubrir la pantalla
       completa —header y sidebar incluidos—. El estado final equivale al de reposo, así que la entrada
       se ve igual. Mismo criterio que .articulos-page. */
    animation: facturacionPageIn-b-qpflkei1dr 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.facturacion-heading[b-qpflkei1dr],
.facturacion-kpis[b-qpflkei1dr],
.facturacion-list-panel[b-qpflkei1dr],
.fc-filter-item[b-qpflkei1dr],
.fc-filter-item-search[b-qpflkei1dr],
.fc-filter-searchbox[b-qpflkei1dr] {
    min-inline-size: 0;
}

/* CABECERA
   Título a la izquierda y CommandBar anclado a la esquina superior derecha. */

.facturacion-heading[b-qpflkei1dr] {
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-gap);
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los comandos del CommandBar se
       repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, clase
       command-bar-host-collapsed que añade el propio CommandBar). */
    .facturacion-heading > div:first-child[b-qpflkei1dr] {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .facturacion-heading.command-bar-host-collapsed > div:first-child[b-qpflkei1dr] {
        flex: 1 1 auto;
    }

.facturacion-title[b-qpflkei1dr] {
    margin: 0;
    font-size: var(--fc-font-title);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Fase 1: una línea. */
    white-space: nowrap;
}

.facturacion-subtitle[b-qpflkei1dr] {
    margin-block-start: 0.25rem;
    font-size: var(--fc-font-text);
    color: #6b7280;
    line-height: 1.35;
    /* Fase 1: una línea (sin envolver). */
    white-space: nowrap;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.facturacion-heading.command-bar-host-collapsed .facturacion-title[b-qpflkei1dr],
.facturacion-heading.command-bar-host-collapsed .facturacion-subtitle[b-qpflkei1dr] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea arriba a la derecha. Usa las
   variantes `cmdbar-inline cmdbar-plain` (icono al lado del texto, sin caja hasta el hover), las
   mismas que la cabecera de Clientes. */
.facturacion-header-actions[b-qpflkei1dr] {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

.facturacion-kpis[b-qpflkei1dr] {
    inline-size: 100%;
    max-inline-size: 100%;
}

    .facturacion-kpis[b-qpflkei1dr] (.kpi-board),
    .facturacion-kpis[b-qpflkei1dr] (.kpi-grid),
    .facturacion-kpis[b-qpflkei1dr] (.kpi-list) {
        inline-size: 100%;
        max-inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        gap: var(--fc-gap);
    }

    .facturacion-kpis[b-qpflkei1dr] (.kpi-tile),
    .facturacion-kpis[b-qpflkei1dr] (.kpi-card) {
        min-inline-size: 0;
        inline-size: 100%;
    }

/* PANEL LISTADO
   Sin tarjeta envolvente: los filtros y la tabla se apoyan directamente sobre el fondo de la página.
   El único marco es el de la propia tabla (.tp-shell, dentro de TablaPaginada), así que no hay cajas
   dentro de cajas. */

.facturacion-list-panel[b-qpflkei1dr] {
    /* Se ancla siempre a la última fila (la de 1fr) del grid de .facturacion-page. */
    grid-row: -2 / -1;
    display: grid;
    /* Filtros, barra de resultados y tabla. La tabla absorbe el alto sobrante (o lo reclama). */
    grid-template-rows: auto auto 1fr;
    gap: var(--fc-inner-gap);
}

/* FILTROS */

/* El NÚMERO de filtros no es fijo: el desplegable de tipo solo se pinta en el listado sin sección
   (dentro de una sección el tipo lo fija ella misma), así que la fila tiene cuatro filtros o tres.
   Por eso las columnas no se enumeran: se declara solo la del buscador y las demás se crean como
   columnas IMPLÍCITAS a razón de una por filtro. Así la fila llena siempre el ancho —como en
   ClientesPage, donde los tres filtros son fijos y el grid encaja— en vez de dejar una columna
   vacía a la derecha cuando falta el desplegable de tipo. */
.facturacion-filters[b-qpflkei1dr] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--fc-inner-gap);
    align-items: stretch;
    inline-size: 100%;
}

.fc-filter-searchbox[b-qpflkei1dr] {
    position: relative;
    inline-size: 100%;
}

.fc-filter-search-icon[b-qpflkei1dr] {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.fc-filter-input[b-qpflkei1dr],
.fc-filter-select[b-qpflkei1dr] {
    inline-size: 100%;
    min-block-size: var(--fc-field-block);
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    background: #ffffff;
    font-size: var(--fc-font-text);
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-filter-input[b-qpflkei1dr] {
    padding-block: 0;
    padding-inline: 0.85rem;
}

.fc-filter-input-search[b-qpflkei1dr] {
    padding-inline-start: 2.5rem !important;
}

.fc-filter-select[b-qpflkei1dr] {
    padding-block: 0;
    padding-inline: 0.85rem;
    cursor: pointer;
}

.fc-filter-input[b-qpflkei1dr]::placeholder {
    color: #9ca3af;
}

.fc-filter-input:focus[b-qpflkei1dr],
.fc-filter-select:focus[b-qpflkei1dr] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

/* BOTONES */

.fc-primary-btn[b-qpflkei1dr],
.fc-action-btn[b-qpflkei1dr] {
    min-block-size: var(--fc-field-block);
    border-radius: clamp(0.65rem, 0.6rem + 0.2vw, 0.85rem);
    padding-block: 0;
    padding-inline: clamp(0.75rem, 1vw, 1rem);
    font-size: var(--fc-font-text);
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
    flex: 1 1 max-content;
}

.fc-primary-btn[b-qpflkei1dr] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fc-primary-btn:hover[b-qpflkei1dr] {
        background: #1d4ed8;
        transform: translateY(-0.08rem);
        box-shadow: 0 0.65rem 1.1rem rgba(37, 99, 235, 0.16);
    }

.fc-action-btn[b-qpflkei1dr] {
    border: 0.0625rem solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fc-action-btn:hover[b-qpflkei1dr] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-0.08rem);
    }

/* RESULTADOS */

.fc-results-zone[b-qpflkei1dr] {
    display: grid;
    gap: 0.4rem;
    min-inline-size: 0;
}

.fc-results-bar[b-qpflkei1dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
    flex-wrap: wrap;
    min-block-size: 1.25rem;
}

.fc-results-text[b-qpflkei1dr] {
    font-size: var(--fc-font-small);
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

.fc-results-sel[b-qpflkei1dr] {
    color: #2563eb;
}

/* SELECCIÓN (emisión masiva) */

.fc-results-toggles[b-qpflkei1dr] {
    display: flex;
    align-items: center;
    gap: var(--fc-gap);
    flex-wrap: wrap;
    min-inline-size: 0;
}

.fc-toggle[b-qpflkei1dr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fc-font-small);
    color: #475569;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* La misma marca en los dos sitios donde vive: los conmutadores de la barra de resultados (markup de
   esta página) y la columna de selección de la tabla (markup de TablaPaginada → hace falta `::deep`). */
.fc-check[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-check {
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
    margin: 0;
}

    .fc-check:disabled[b-qpflkei1dr],
    .facturacion-page[b-qpflkei1dr]  .fc-check:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

/* PROGRESO DE LA EMISIÓN MASIVA */

.fc-progress[b-qpflkei1dr] {
    display: grid;
    gap: 0.3rem;
}

.fc-progress-text[b-qpflkei1dr] {
    font-size: var(--fc-font-small);
    color: #1d4ed8;
    font-weight: 800;
}

.fc-progress-track[b-qpflkei1dr] {
    inline-size: 100%;
    block-size: 0.4rem;
    border-radius: 999rem;
    background: #eff6ff;
    overflow: hidden;
}

.fc-progress-bar[b-qpflkei1dr] {
    block-size: 100%;
    border-radius: 999rem;
    background: #2563eb;
    transition: inline-size 0.2s ease;
}

/* TABLA
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (marca de selección e insignias).

   Todas esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que
   el CSS scoped de esta página no lo alcanza por sí solo. */

.fc-tabla[b-qpflkei1dr] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

/* La tabla marca el suelo del alto de la página: con `min-height: 0` (su valor por defecto, pensado
   para el panel de pestañas de la ficha, que sí comprime) el contenido no podría empujar la fila
   `1fr` del grid y la tabla se desplazaría por dentro en vez de crecer la página. */
.facturacion-page[b-qpflkei1dr]  .tp-panel {
    min-height: auto;
}

/* MARCA DE SELECCIÓN (plantilla de la primera columna) */

.facturacion-page[b-qpflkei1dr]  .fc-row-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* INSIGNIAS DE TIPO
   La columna «Estado» ya no se pinta aquí: usa el semáforo de estado (wwwroot/css/semaforo.css), el
   mismo de las fichas y de cobros. Estas clases quedan para la columna «Tipo» y el modal del informe.
   El markup de la columna vive dentro de la tabla: de ahí el `::deep`. El modal sí es markup propio,
   así que cada regla se declara por partida doble. */

.fc-estado-badge[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5.4rem;
    min-block-size: 1.5rem;
    padding-block: 0.2rem;
    padding-inline: 0.65rem;
    border-radius: 999rem;
    font-size: clamp(0.62rem, 0.59rem + 0.12vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    border: 0.0625rem solid transparent;
    white-space: nowrap;
}

.fc-estado-green[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fc-estado-blue[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fc-estado-orange[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fc-estado-purple[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-purple {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* Orden de fabricación (OF3): badge propio, para no confundirla con el pedido de cliente. */
.fc-estado-teal[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-teal {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #99f6e4;
}

.fc-estado-red[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-estado-gray[b-qpflkei1dr],
.facturacion-page[b-qpflkei1dr]  .fc-estado-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* MODAL DEL INFORME DE EMISIÓN MASIVA */

.fc-modal-overlay[b-qpflkei1dr] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: fcMenuIn-b-qpflkei1dr 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-modal[b-qpflkei1dr] {
    inline-size: min(46rem, 100%);
    max-block-size: min(80dvh, 44rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--fc-inner-gap);
    border: 0.0625rem solid #e5e7eb;
    border-radius: var(--fc-radius);
    background: #ffffff;
    padding: var(--fc-panel-pad);
    box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.24);
}

.fc-modal-header[b-qpflkei1dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-inner-gap);
}

.fc-modal-title[b-qpflkei1dr] {
    font-size: var(--fc-font-panel-title);
    font-weight: 850;
    color: #1f2937;
}

.fc-modal-close[b-qpflkei1dr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .fc-modal-close:hover[b-qpflkei1dr] {
        background: #f1f5f9;
        color: #1f2937;
    }

.fc-modal-summary[b-qpflkei1dr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fc-modal-summary-total[b-qpflkei1dr] {
    font-size: var(--fc-font-small);
    color: #64748b;
    font-weight: 750;
}

.fc-modal-body[b-qpflkei1dr] {
    min-block-size: 0;
    overflow: auto;
    border: 0.0625rem solid #eef2f7;
    border-radius: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.fc-informe-table[b-qpflkei1dr] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fc-font-small);
}

    .fc-informe-table th[b-qpflkei1dr] {
        position: sticky;
        inset-block-start: 0;
        text-align: start;
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #eef2f7;
    }

    .fc-informe-table td[b-qpflkei1dr] {
        padding: 0.5rem 0.7rem;
        border-block-end: 0.0625rem solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.fc-informe-error td[b-qpflkei1dr] {
    background: #fffbfb;
}

.fc-informe-avisos[b-qpflkei1dr] {
    margin: 0;
    padding-inline-start: 1rem;
    color: #b45309;
}

.fc-informe-vacio[b-qpflkei1dr] {
    color: #94a3b8;
}

.fc-modal-actions[b-qpflkei1dr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fc-inner-gap);
}

.fc-export-link[b-qpflkei1dr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
}


/* MENU FLOTANTE NUEVO DOCUMENTO */

.fc-new-doc-wrapper[b-qpflkei1dr] {
    position: relative;
    min-inline-size: 0;
    flex: 1 1 max-content;
}

.fc-new-doc-trigger[b-qpflkei1dr] {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.fc-btn-icon[b-qpflkei1dr] {
    font-size: 1.08rem;
    line-height: 1;
}

.fc-new-doc-backdrop[b-qpflkei1dr] {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    background: transparent;
    cursor: default;
}

.fc-new-doc-menu[b-qpflkei1dr] {
    position: absolute;
    inset-block-start: calc(100% + 0.45rem);
    inset-inline-end: 0;
    z-index: 50;
    inline-size: min(24rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.35rem;
    border: 0.0625rem solid #dbe2ea;
    border-radius: clamp(0.8rem, 0.75rem + 0.25vw, 1rem);
    background: #ffffff;
    padding: 0.55rem;
    box-shadow: 0 1.2rem 2.4rem rgba(15, 23, 42, 0.16);
    animation: fcMenuIn-b-qpflkei1dr 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fc-new-doc-menu-title[b-qpflkei1dr] {
    padding-block: 0.35rem 0.45rem;
    padding-inline: 0.45rem;
    color: #64748b;
    font-size: var(--fc-font-small);
    font-weight: 850;
    line-height: 1;
}

.fc-new-doc-option[b-qpflkei1dr] {
    inline-size: 100%;
    min-inline-size: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    border: 0.0625rem solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    padding-block: 0.62rem;
    padding-inline: 0.65rem;
    color: #1f2937;
    text-align: start;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

    .fc-new-doc-option:hover[b-qpflkei1dr],
    .fc-new-doc-option:focus-visible[b-qpflkei1dr] {
        border-color: #bfdbfe;
        background: #eff6ff;
        outline: none;
        transform: translateY(-0.04rem);
    }

.fc-new-doc-option-icon[b-qpflkei1dr] {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999rem;
    background: #f8fafc;
    color: #2563eb;
    font-size: 1.2rem;
}

.fc-new-doc-option-text[b-qpflkei1dr] {
    min-inline-size: 0;
    display: grid;
    gap: 0.18rem;
}

    .fc-new-doc-option-text strong[b-qpflkei1dr],
    .fc-new-doc-option-text small[b-qpflkei1dr] {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fc-new-doc-option-text strong[b-qpflkei1dr] {
        font-size: var(--fc-font-text);
        font-weight: 850;
        line-height: 1.15;
    }

    .fc-new-doc-option-text small[b-qpflkei1dr] {
        color: #64748b;
        font-size: var(--fc-font-small);
        font-weight: 650;
        line-height: 1.2;
    }

@keyframes fcMenuIn-b-qpflkei1dr {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ANIMACIONES */

@keyframes facturacionPageIn-b-qpflkei1dr {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.12rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

/* Columnas replegables: al estrechar la ventana caen primero las menos importantes. La marca de
   selección, «Número», «Cliente» e «Importe» permanecen siempre visibles. La clase la lleva la
   cabecera Y sus celdas (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */
@media (max-width: 1440px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-usuario {
        display: none;
    }
}

@media (max-width: 1280px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-comercial {
        display: none;
    }
}

@media (max-width: 1200px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-porservir {
        display: none;
    }
}

@media (max-width: 1120px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-serie {
        display: none;
    }
}

@media (max-width: 980px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-fecha {
        display: none;
    }
}

@media (max-width: 760px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-tipo {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo
   se va cuando ya no queda ancho para nada más que identificar la fila y su importe. */
@media (max-width: 640px) {
    .facturacion-page[b-qpflkei1dr]  .fc-col-estado {
        display: none;
    }
}

/* Estrecho: el buscador se queda con una fila entera y los desplegables bajan a dos columnas. Aquí sí
   se enumeran las columnas, así que se devuelve el flujo a filas (el de por defecto es de columnas). */
@media (max-width: 80rem) {
    .facturacion-filters[b-qpflkei1dr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .fc-filter-item-search[b-qpflkei1dr] {
        grid-column: 1 / -1;
    }

    /* Con los CUATRO filtros (listado sin sección) los tres desplegables no llenan dos columnas: el
       último se quedaría solo dejando el hueco a su derecha. Que ocupe entonces la fila entera. */
    .facturacion-filters:has(> .fc-filter-item:nth-child(4)) > .fc-filter-item:last-child[b-qpflkei1dr] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .facturacion-page[b-qpflkei1dr] {
        gap: clamp(0.5rem, 2vi, 0.8rem);
    }

    .facturacion-filters[b-qpflkei1dr] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fc-results-bar[b-qpflkei1dr] {
        justify-content: flex-start;
    }
}



@media (max-width: 42rem) {
    .fc-new-doc-menu[b-qpflkei1dr] {
        inset-inline: 0;
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .facturacion-page[b-qpflkei1dr],
    .facturacion-page *[b-qpflkei1dr],
    .facturacion-page *[b-qpflkei1dr]::before,
    .facturacion-page *[b-qpflkei1dr]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/Facturacion/Pages/FacturaFormulario.razor.rz.scp.css */
.factura-form-page[b-orzevupr5r],
.factura-form-page *[b-orzevupr5r],
.factura-form-page *[b-orzevupr5r]::before,
.factura-form-page *[b-orzevupr5r]::after,
.ff-unified-page[b-orzevupr5r],
.ff-unified-page *[b-orzevupr5r],
.ff-unified-page *[b-orzevupr5r]::before,
.ff-unified-page *[b-orzevupr5r]::after {
    box-sizing: border-box;
}

.ff-unified-page[b-orzevupr5r] {
    --ff-text: #102033;
    --ff-heading: #0f172a;
    --ff-muted: #64748b;
    --ff-surface: #ffffff;
    --ff-soft: #f8fafc;
    --ff-soft-strong: #eef4fb;
    --ff-line: #d9e3ef;
    --ff-line-soft: #edf2f7;
    --ff-primary: #2563eb;
    --ff-primary-dark: #1d4ed8;
    --ff-accent: #2563eb;
    --ff-accent-soft: #eff6ff;
    --ff-accent-line: #bfdbfe;
    --ff-success: #16a34a;
    --ff-success-soft: #f0fdf4;
    --ff-warning: #d97706;
    --ff-warning-soft: #fffbeb;
    --ff-danger: #dc2626;
    --ff-danger-soft: #fef2f2;
    --ff-gap: clamp(.22rem, .42dvi, .52rem);
    --ff-gap-tight: clamp(.12rem, .26dvi, .34rem);
    --ff-pad: clamp(.32rem, .58dvi, .72rem);
    --ff-pad-tight: clamp(.2rem, .38dvi, .48rem);
    --ff-radius: clamp(.5rem, .72dvi, .9rem);
    --ff-radius-sm: clamp(.36rem, .52dvi, .68rem);
    --ff-control: clamp(1.48rem, 1.68dvi, 1.88rem);
    --ff-control-small: clamp(1.28rem, 1.46dvi, 1.62rem);
    --ff-font-mini: clamp(.54rem, .6dvi, .68rem);
    --ff-font-small: clamp(.61rem, .68dvi, .78rem);
    --ff-font: clamp(.68rem, .78dvi, .86rem);
    --ff-shadow: 0 .26rem .78rem rgba(15, 23, 42, .04);
    --ff-chat-safe: clamp(3.2rem, 4.6dvi, 5.4rem);
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ff-gap-tight);
    overflow: hidden;
    color: var(--ff-text);
    container-type: inline-size;
    animation: ffUnifiedIn-b-orzevupr5r .14s cubic-bezier(.16, 1, .3, 1) both;
}

.ff-theme-factura[b-orzevupr5r],
.ff-theme-presupuesto[b-orzevupr5r] {
    --ff-accent: #2563eb;
    --ff-accent-soft: #eff6ff;
    --ff-accent-line: #bfdbfe;
}

.ff-theme-albaran[b-orzevupr5r] {
    --ff-accent: #0f766e;
    --ff-accent-soft: #f0fdfa;
    --ff-accent-line: #99f6e4;
}

.ff-theme-factura-albaranes[b-orzevupr5r] {
    --ff-accent: #7c3aed;
    --ff-accent-soft: #f5f3ff;
    --ff-accent-line: #ddd6fe;
}

.ff-theme-pedido[b-orzevupr5r] {
    --ff-accent: #ea580c;
    --ff-accent-soft: #fff7ed;
    --ff-accent-line: #fed7aa;
}

.ff-unified-header[b-orzevupr5r] {
    min-inline-size: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ff-gap);
}

.ff-title-block[b-orzevupr5r],
.ff-title-block h1[b-orzevupr5r],
.ff-title-block p[b-orzevupr5r],
.ff-panel-title-row > div[b-orzevupr5r],
.ff-panel-title-row h2[b-orzevupr5r],
.ff-panel-title-row p[b-orzevupr5r],
.ff-panel-heading-mini[b-orzevupr5r],
.ff-panel-heading-mini h2[b-orzevupr5r],
.ff-panel-heading-mini p[b-orzevupr5r] {
    min-inline-size: 0;
}

.ff-eyebrow[b-orzevupr5r] {
    display: inline-flex;
    color: var(--ff-accent);
    font-size: var(--ff-font-mini);
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.ff-title-block h1[b-orzevupr5r] {
    margin: .04rem 0 0;
    color: var(--ff-heading);
    font-size: clamp(1rem, 1.18dvi, 1.34rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -.035em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-title-block p[b-orzevupr5r],
.ff-panel-title-row p[b-orzevupr5r],
.ff-panel-heading-mini p[b-orzevupr5r] {
    margin: .06rem 0 0;
    color: var(--ff-muted);
    font-size: var(--ff-font-small);
    line-height: 1.16;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-header-tools[b-orzevupr5r],
.ff-mini-actions[b-orzevupr5r],
.ff-footer-checks[b-orzevupr5r],
.ff-footer-actions[b-orzevupr5r],
.ff-side-checks[b-orzevupr5r] {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ff-gap-tight);
    flex-wrap: wrap;
}

    .ff-header-tools > *[b-orzevupr5r],
    .ff-mini-actions > *[b-orzevupr5r],
    .ff-footer-checks > *[b-orzevupr5r],
    .ff-footer-actions > *[b-orzevupr5r] {
        min-inline-size: 0;
    }

.ff-header-type-picker[b-orzevupr5r] {
    inline-size: clamp(9rem, 13dvi, 14.4rem);
    max-inline-size: 100%;
    min-block-size: var(--ff-control);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .25rem;
    border: .0625rem solid var(--ff-accent-line);
    border-radius: 999rem;
    background: color-mix(in srgb, var(--ff-accent-soft) 68%, #ffffff);
    padding-inline: .48rem .34rem;
    overflow: hidden;
}

.ff-header-type-icon[b-orzevupr5r] {
    color: var(--ff-accent);
    font-size: var(--ff-font-small);
    line-height: 1;
}

.ff-warning-strip[b-orzevupr5r] {
    min-inline-size: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ff-gap-tight);
}

    .ff-warning-strip > div[b-orzevupr5r] {
        min-inline-size: 0;
        border: .0625rem solid #fde68a;
        border-radius: 999rem;
        background: var(--ff-warning-soft);
        color: #92400e;
        padding-block: .28rem;
        padding-inline: .6rem;
        font-size: var(--ff-font-small);
        font-weight: 850;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ff-tab-strip[b-orzevupr5r] {
    min-inline-size: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ff-gap-tight);
    align-items: stretch;
}

.ff-workspace[b-orzevupr5r],
.ff-workspace-tabs[b-orzevupr5r] {
    min-inline-size: 0;
    min-block-size: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--ff-gap-tight);
    overflow: hidden;
}

.ff-tab-content[b-orzevupr5r] {
    min-inline-size: 0;
    min-block-size: 0;
    overflow: hidden;
}

.ff-tab-general[b-orzevupr5r] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--ff-gap-tight);
}

.ff-tab-economicos[b-orzevupr5r],
.ff-tab-otros[b-orzevupr5r] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.ff-card[b-orzevupr5r] {
    min-inline-size: 0;
    min-block-size: 0;
    border: .0625rem solid var(--ff-line);
    border-radius: var(--ff-radius);
    background: var(--ff-surface);
    box-shadow: var(--ff-shadow);
    overflow: hidden;
}

.ff-head-panel[b-orzevupr5r],
.ff-lines-panel[b-orzevupr5r],
.ff-general-economics-panel[b-orzevupr5r],
.ff-accounting-panel[b-orzevupr5r],
.ff-other-panel[b-orzevupr5r] {
    padding: var(--ff-pad);
}

.ff-head-panel[b-orzevupr5r],
.ff-accounting-panel[b-orzevupr5r],
.ff-other-panel[b-orzevupr5r] {
    border-block-start: .16rem solid var(--ff-accent);
}

.ff-lines-panel[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ff-general-economics-panel[b-orzevupr5r] {
    flex: 0 0 auto;
    border-block-start: .12rem solid color-mix(in srgb, var(--ff-accent-line) 65%, var(--ff-line));
}

.ff-panel-title-row[b-orzevupr5r] {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--ff-gap);
    margin-block-end: var(--ff-gap-tight);
}

    .ff-panel-title-row h2[b-orzevupr5r],
    .ff-panel-heading-mini h2[b-orzevupr5r] {
        margin: 0;
        color: var(--ff-heading);
        font-size: clamp(.84rem, .96dvi, 1.05rem);
        font-weight: 950;
        line-height: 1.05;
        letter-spacing: -.02em;
    }

.ff-field-grid[b-orzevupr5r],
.ff-head-compact-grid[b-orzevupr5r],
.ff-general-economics-grid[b-orzevupr5r],
.ff-accounting-grid[b-orzevupr5r],
.ff-side-grid[b-orzevupr5r],
.ff-specific-grid[b-orzevupr5r],
.ff-shipping-grid[b-orzevupr5r],
.ff-text-free-grid[b-orzevupr5r],
.ff-iva-summary-grid[b-orzevupr5r] {
    min-inline-size: 0;
    display: grid;
    gap: var(--ff-gap-tight);
}

.ff-head-compact-grid[b-orzevupr5r],
.ff-general-economics-grid[b-orzevupr5r],
.ff-accounting-grid[b-orzevupr5r],
.ff-shipping-grid[b-orzevupr5r] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ff-field-grid-ranges[b-orzevupr5r] {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ff-specific-grid[b-orzevupr5r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ff-side-grid[b-orzevupr5r],
.ff-text-free-grid[b-orzevupr5r] {
    grid-template-columns: 1fr;
}

.ff-iva-summary-grid[b-orzevupr5r] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ff-field[b-orzevupr5r] {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

    .ff-field > span[b-orzevupr5r] {
        min-inline-size: 0;
        color: #475569;
        font-size: var(--ff-font-mini);
        font-weight: 900;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ff-field-strong > span[b-orzevupr5r] {
    color: var(--ff-accent);
}

.ff-col-1[b-orzevupr5r] {
    grid-column: span 1;
}

.ff-col-2[b-orzevupr5r] {
    grid-column: span 2;
}

.ff-col-3[b-orzevupr5r] {
    grid-column: span 3;
}

.ff-col-4[b-orzevupr5r] {
    grid-column: span 4;
}

.ff-col-5[b-orzevupr5r] {
    grid-column: span 5;
}

.ff-col-6[b-orzevupr5r] {
    grid-column: span 6;
}

.ff-col-8[b-orzevupr5r] {
    grid-column: span 8;
}

.ff-col-9[b-orzevupr5r] {
    grid-column: span 9;
}

.ff-col-10[b-orzevupr5r] {
    grid-column: span 10;
}

.ff-field-wide[b-orzevupr5r] {
    grid-column: span 2;
}

.ff-field-full[b-orzevupr5r] {
    grid-column: 1 / -1;
}

.ff-field-payment[b-orzevupr5r] {
    grid-column: span 3;
}

.ff-control[b-orzevupr5r],
.ff-grid-control[b-orzevupr5r] {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
}

.ff-special-box[b-orzevupr5r],
.ff-fieldset[b-orzevupr5r] {
    min-inline-size: 0;
    border: .0625rem solid color-mix(in srgb, var(--ff-accent-line) 58%, var(--ff-line));
    border-radius: var(--ff-radius-sm);
    background: color-mix(in srgb, var(--ff-accent-soft) 18%, #ffffff);
    padding: var(--ff-pad-tight);
}

.ff-special-box[b-orzevupr5r] {
    margin-block-start: var(--ff-gap-tight);
}

.ff-rectificativa-box[b-orzevupr5r] {
    --ff-accent: #7c3aed;
    --ff-accent-soft: #f5f3ff;
    --ff-accent-line: #ddd6fe;
}

.ff-special-title[b-orzevupr5r],
.ff-fieldset legend[b-orzevupr5r] {
    color: var(--ff-accent);
    font-size: var(--ff-font-small);
    font-weight: 950;
    line-height: 1;
}

.ff-special-title[b-orzevupr5r] {
    margin-block-end: var(--ff-gap-tight);
}

.ff-fieldset[b-orzevupr5r] {
    margin: 0;
}

    .ff-fieldset legend[b-orzevupr5r] {
        padding-inline: .28rem;
    }

.ff-grid-wrapper[b-orzevupr5r] {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    border: .0625rem solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    background: #fffafb;
}

.ff-lines-panel .ff-grid-wrapper[b-orzevupr5r] {
    block-size: 100%;
}

.ff-vencimientos-wrapper[b-orzevupr5r] {
    min-block-size: clamp(10rem, 22dvb, 16rem);
    max-block-size: clamp(10rem, 28dvb, 18rem);
}

.ff-economic-layout[b-orzevupr5r],
.ff-other-layout[b-orzevupr5r] {
    min-inline-size: 0;
    min-block-size: 0;
    display: grid;
    gap: var(--ff-gap);
    overflow: hidden;
}

.ff-economic-layout[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .34fr);
}

.ff-other-layout[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .28fr);
}

.ff-economic-main[b-orzevupr5r],
.ff-economic-side[b-orzevupr5r],
.ff-other-main[b-orzevupr5r],
.ff-other-side[b-orzevupr5r] {
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ff-gap-tight);
    overflow: hidden;
}

.ff-accounting-panel[b-orzevupr5r],
.ff-other-panel[b-orzevupr5r] {
    min-block-size: 0;
    overflow: hidden;
}

.ff-text-free-grid[b-orzevupr5r] {
    flex: 0 0 auto;
}

.ff-checkbox-line[b-orzevupr5r],
.ff-side-checks[b-orzevupr5r] {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: var(--ff-gap-tight);
    flex-wrap: wrap;
}

.ff-bottom-actions[b-orzevupr5r] {
    min-inline-size: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ff-gap);
    padding-block: var(--ff-pad-tight);
    padding-inline: var(--ff-pad) var(--ff-chat-safe);
    border: .0625rem solid var(--ff-line);
    border-radius: var(--ff-radius);
    background: var(--ff-surface);
    box-shadow: var(--ff-shadow);
}

.ff-footer-checks[b-orzevupr5r] {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
}

.ff-footer-actions[b-orzevupr5r] {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.ff-readonly[b-orzevupr5r] {
    opacity: 1;
}

.ff-delete-cell[b-orzevupr5r] {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-btn,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-mini-btn,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-status,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-lines-count,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-tab-button,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-total-chip,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-flow-chip,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-grid-total-chip,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-grid-delete-btn,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-icon-btn {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--ff-control);
    border-radius: 999rem;
    padding-block: 0;
    padding-inline: .58rem;
    font-size: var(--ff-font-small);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-btn-light,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-mini-btn,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-lines-count,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-tab-button {
    border-color: var(--ff-line) !important;
    background: #ffffff !important;
    color: var(--ff-heading) !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-btn-primary,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-icon-btn-primary {
    border-color: var(--ff-primary) !important;
    background: var(--ff-primary) !important;
    color: #ffffff !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-tab-button {
    inline-size: 100%;
    justify-content: center;
    border-radius: var(--ff-radius-sm);
    background: color-mix(in srgb, var(--ff-soft) 76%, #ffffff) !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-tab-active {
    border-color: var(--ff-accent) !important;
    background: var(--ff-accent-soft) !important;
    color: var(--ff-accent) !important;
    box-shadow: inset 0 -.12rem 0 var(--ff-accent);
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-status {
    cursor: default !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-status-green {
    border-color: #bbf7d0 !important;
    background: var(--ff-success-soft) !important;
    color: #166534 !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-status-blue {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-status-orange {
    border-color: #fde68a !important;
    background: var(--ff-warning-soft) !important;
    color: #92400e !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-status-red {
    border-color: #fecaca !important;
    background: var(--ff-danger-soft) !important;
    color: #991b1b !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-lines-count {
    color: var(--ff-accent) !important;
    cursor: default !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-total-chip,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-flow-chip {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    cursor: default !important;
    border-color: var(--ff-accent-line) !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 38%, #ffffff) !important;
    color: var(--ff-heading) !important;
}

[b-orzevupr5r] .ff-unified-page .ff-chip-label {
    min-inline-size: 0;
    color: var(--ff-muted);
    font-size: var(--ff-font-mini);
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-orzevupr5r] .ff-unified-page .ff-chip-value {
    min-inline-size: 0;
    color: var(--ff-heading);
    font-size: var(--ff-font-small);
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-total-highlight {
    border-color: var(--ff-primary) !important;
    background: var(--ff-primary) !important;
}

    [b-orzevupr5r] .ff-unified-page .e-btn.ff-total-highlight .ff-chip-label,
    [b-orzevupr5r] .ff-unified-page .e-btn.ff-total-highlight .ff-chip-value {
        color: #ffffff;
    }

[b-orzevupr5r] .ff-unified-page .e-btn.ff-grid-total-chip {
    inline-size: 100%;
    min-block-size: var(--ff-control-small);
    border-color: var(--ff-accent-line) !important;
    background: var(--ff-accent-soft) !important;
    color: var(--ff-primary-dark) !important;
    cursor: default !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-grid-delete-btn,
[b-orzevupr5r] .ff-unified-page .e-btn.ff-icon-btn {
    inline-size: var(--ff-control);
    min-inline-size: var(--ff-control);
    block-size: var(--ff-control);
    min-block-size: var(--ff-control);
    padding-inline: 0;
    justify-content: center;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-icon-btn {
    inline-size: var(--ff-control-small);
    min-inline-size: var(--ff-control-small);
    block-size: var(--ff-control-small);
    min-block-size: var(--ff-control-small);
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-grid-delete-btn {
    border-color: #fecaca !important;
    background: var(--ff-danger-soft) !important;
    color: var(--ff-danger) !important;
}

[b-orzevupr5r] .ff-unified-page .e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .e-input-group,
[b-orzevupr5r] .ff-unified-page .e-ddl,
[b-orzevupr5r] .ff-unified-page .e-datepicker,
[b-orzevupr5r] .ff-unified-page .e-numerictextbox,
[b-orzevupr5r] .ff-unified-page .ff-control.e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-control .e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-grid-control.e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-grid-control .e-control-wrapper {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--ff-control);
    border-color: #cfd9e8;
    border-radius: var(--ff-radius-sm);
    background: #ffffff;
    box-shadow: none;
}

[b-orzevupr5r] .ff-unified-page .ff-grid-control.e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-grid-control .e-control-wrapper {
    min-block-size: var(--ff-control-small);
}

[b-orzevupr5r] .ff-unified-page .e-input,
[b-orzevupr5r] .ff-unified-page input.e-input,
[b-orzevupr5r] .ff-unified-page textarea.e-input {
    min-block-size: var(--ff-control);
    color: var(--ff-text);
    font-size: var(--ff-font-small);
    font-weight: 650;
}

[b-orzevupr5r] .ff-unified-page .ff-grid-control .e-input,
[b-orzevupr5r] .ff-unified-page .ff-grid-control.e-control-wrapper input.e-input {
    min-block-size: var(--ff-control-small);
    font-size: var(--ff-font-mini);
}

[b-orzevupr5r] .ff-unified-page .e-input-group.e-disabled,
[b-orzevupr5r] .ff-unified-page .e-control-wrapper.e-disabled,
[b-orzevupr5r] .ff-unified-page .ff-readonly.e-control-wrapper {
    background: var(--ff-soft);
    opacity: 1;
}

[b-orzevupr5r] .ff-unified-page .ff-textarea textarea,
[b-orzevupr5r] .ff-unified-page .ff-textarea.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-textarea .e-control-wrapper textarea {
    min-block-size: clamp(2.8rem, 8dvb, 5rem);
    resize: none;
    line-height: 1.32;
}

[b-orzevupr5r] .ff-unified-page .ff-notes-compact textarea,
[b-orzevupr5r] .ff-unified-page .ff-notes-compact.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-notes-compact .e-control-wrapper textarea {
    min-block-size: clamp(2.4rem, 5dvb, 3.8rem);
}

/* Notas en la columna derecha del pie: el textarea se estira hasta el alto de las dos filas de campos. */
[b-orzevupr5r] .ff-unified-page .ff-notes-side-box,
[b-orzevupr5r] .ff-unified-page .ff-notes-side-box .e-control-wrapper {
    block-size: 100%;
}

    [b-orzevupr5r] .ff-unified-page .ff-notes-side-box textarea,
    [b-orzevupr5r] .ff-unified-page .ff-notes-side-box.e-control-wrapper textarea,
    [b-orzevupr5r] .ff-unified-page .ff-notes-side-box .e-control-wrapper textarea {
        block-size: 100%;
        min-block-size: 0;
    }

.ff-notes-side[b-orzevupr5r]  .e-control-wrapper {
    flex: 1 1 auto;
    min-block-size: 0;
}

[b-orzevupr5r] .ff-unified-page .e-checkbox-wrapper,
[b-orzevupr5r] .ff-unified-page .e-checkbox-wrapper .e-label {
    color: var(--ff-heading);
    font-size: var(--ff-font-small);
    font-weight: 800;
}

    [b-orzevupr5r] .ff-unified-page .e-checkbox-wrapper .e-frame.e-check,
    [b-orzevupr5r] .ff-unified-page .e-checkbox-wrapper .e-frame.e-stop {
        background-color: var(--ff-primary);
        border-color: var(--ff-primary);
    }

[b-orzevupr5r] .ff-unified-page .e-grid.ff-grid {
    inline-size: 100%;
    min-inline-size: max(100%, 76rem);
    border: 0;
    border-radius: var(--ff-radius-sm);
    background: #fffafb;
    box-shadow: none;
}

[b-orzevupr5r] .ff-unified-page .e-grid.ff-vencimientos-grid {
    min-inline-size: 100%;
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-gridheader,
[b-orzevupr5r] .ff-unified-page .e-grid .e-headercontent,
[b-orzevupr5r] .ff-unified-page .e-grid .e-gridcontent {
    border-color: var(--ff-line-soft);
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-headercell {
    background: var(--ff-soft);
    color: #334155;
    border-color: var(--ff-line-soft);
    font-size: var(--ff-font-mini);
    font-weight: 950;
    padding-block: .3rem;
    padding-inline: .42rem;
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-headertext {
    font-size: var(--ff-font-mini);
    font-weight: 950;
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-rowcell {
    color: var(--ff-text);
    border-color: var(--ff-line-soft);
    background: #fffafb;
    font-size: var(--ff-font-mini);
    padding-block: .22rem;
    padding-inline: .36rem;
    vertical-align: middle;
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-row:hover .e-rowcell {
    background: color-mix(in srgb, var(--ff-accent-soft) 28%, #ffffff);
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-altrow .e-rowcell {
    background: #fffefe;
}

[b-orzevupr5r] .ff-unified-page .e-grid .e-content {
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    [b-orzevupr5r] .ff-unified-page .e-grid .e-content::-webkit-scrollbar,
    .ff-grid-wrapper[b-orzevupr5r]::-webkit-scrollbar {
        inline-size: .36rem;
        block-size: .36rem;
    }

    [b-orzevupr5r] .ff-unified-page .e-grid .e-content::-webkit-scrollbar-track,
    .ff-grid-wrapper[b-orzevupr5r]::-webkit-scrollbar-track {
        background: transparent;
    }

    [b-orzevupr5r] .ff-unified-page .e-grid .e-content::-webkit-scrollbar-thumb,
    .ff-grid-wrapper[b-orzevupr5r]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999rem;
    }

[b-orzevupr5r] .ff-unified-page .ff-currency-ddl.e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-currency-ddl .e-control-wrapper {
    inline-size: clamp(3.8rem, 4.8dvi, 5.2rem);
    max-inline-size: clamp(3.8rem, 4.8dvi, 5.2rem);
    min-inline-size: clamp(3.8rem, 4.8dvi, 5.2rem);
}

    [b-orzevupr5r] .ff-unified-page .ff-currency-ddl .e-input,
    [b-orzevupr5r] .ff-unified-page .ff-currency-ddl.e-control-wrapper input.e-input {
        font-size: var(--ff-font-mini);
        font-weight: 850;
    }

/* ==========================================================
   LAYOUT FLUIDO LIMPIO
   - Sin estilos dentro del Razor.
   - Cabecera General optimizada en 2 filas cuando hay ancho.
   - Notas a ancho completo.
   - Grids adaptativos para todos los bloques del documento.
   ========================================================== */

.ff-unified-page .ff-general-fields[b-orzevupr5r] {
    grid-template-columns: repeat(100, minmax(0, 1fr));
    align-items: end;
}

    .ff-unified-page .ff-general-fields .ff-field-doc[b-orzevupr5r] {
        grid-column: span 15;
    }

    .ff-unified-page .ff-general-fields .ff-field-date[b-orzevupr5r] {
        grid-column: span 16;
    }

    .ff-unified-page .ff-general-fields .ff-field-agent[b-orzevupr5r] {
        grid-column: span 24;
    }

    .ff-unified-page .ff-general-fields .ff-field-tariff[b-orzevupr5r] {
        grid-column: span 18;
    }

    .ff-unified-page .ff-general-fields .ff-field-order[b-orzevupr5r] {
        grid-column: span 27;
    }

    .ff-unified-page .ff-general-fields .ff-field-warehouse[b-orzevupr5r] {
        grid-column: span 29;
    }

    .ff-unified-page .ff-general-fields .ff-field-format[b-orzevupr5r] {
        grid-column: span 16;
    }

    .ff-unified-page .ff-general-fields .ff-field-reference[b-orzevupr5r] {
        grid-column: span 19;
    }

    .ff-unified-page .ff-general-fields .ff-field-client[b-orzevupr5r] {
        grid-column: span 18;
    }

    .ff-unified-page .ff-general-fields .ff-field-invoice-type[b-orzevupr5r] {
        grid-column: span 8;
    }

    .ff-unified-page .ff-general-fields .ff-field-rectified[b-orzevupr5r] {
        grid-column: span 10;
    }

.ff-unified-page .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
.ff-unified-page .ff-field-notes[b-orzevupr5r] {
    grid-column: 1 / -1;
}

.ff-unified-page .ff-general-economics-grid .ff-field-payment-method[b-orzevupr5r] {
    grid-column: span 4;
}

[b-orzevupr5r] .ff-unified-page .ff-field-notes textarea,
[b-orzevupr5r] .ff-unified-page .ff-field-notes.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-field-notes .e-control-wrapper textarea {
    min-block-size: clamp(2.8rem, 7dvb, 4.6rem);
}

.ff-unified-page .ff-field-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-head-compact-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-general-economics-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-accounting-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-specific-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-shipping-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-text-free-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-side-grid > .ff-field[b-orzevupr5r],
.ff-unified-page .ff-iva-summary-grid > .ff-field[b-orzevupr5r] {
    min-inline-size: 0;
}

@container (max-width: 92rem) {
    .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
    .ff-general-economics-grid[b-orzevupr5r],
    .ff-accounting-grid[b-orzevupr5r],
    .ff-shipping-grid[b-orzevupr5r] {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-1[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-2[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-1[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-2[b-orzevupr5r],
        .ff-accounting-grid .ff-col-1[b-orzevupr5r],
        .ff-accounting-grid .ff-col-2[b-orzevupr5r],
        .ff-shipping-grid .ff-col-1[b-orzevupr5r],
        .ff-shipping-grid .ff-col-2[b-orzevupr5r] {
            grid-column: span 2;
        }

        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-3[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-field-payment[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-3[b-orzevupr5r],
        .ff-general-economics-grid .ff-field-payment[b-orzevupr5r],
        .ff-accounting-grid .ff-col-3[b-orzevupr5r],
        .ff-accounting-grid .ff-field-payment[b-orzevupr5r],
        .ff-shipping-grid .ff-col-3[b-orzevupr5r],
        .ff-shipping-grid .ff-field-payment[b-orzevupr5r] {
            grid-column: span 4;
        }

        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-4[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-5[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-6[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-8[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-9[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-col-10[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) .ff-field-wide[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-4[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-5[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-6[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-8[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-9[b-orzevupr5r],
        .ff-general-economics-grid .ff-col-10[b-orzevupr5r],
        .ff-general-economics-grid .ff-field-wide[b-orzevupr5r],
        .ff-accounting-grid .ff-col-4[b-orzevupr5r],
        .ff-accounting-grid .ff-col-5[b-orzevupr5r],
        .ff-accounting-grid .ff-col-6[b-orzevupr5r],
        .ff-accounting-grid .ff-col-8[b-orzevupr5r],
        .ff-accounting-grid .ff-col-9[b-orzevupr5r],
        .ff-accounting-grid .ff-col-10[b-orzevupr5r],
        .ff-accounting-grid .ff-field-wide[b-orzevupr5r],
        .ff-shipping-grid .ff-col-4[b-orzevupr5r],
        .ff-shipping-grid .ff-col-5[b-orzevupr5r],
        .ff-shipping-grid .ff-col-6[b-orzevupr5r],
        .ff-shipping-grid .ff-col-8[b-orzevupr5r],
        .ff-shipping-grid .ff-col-9[b-orzevupr5r],
        .ff-shipping-grid .ff-col-10[b-orzevupr5r],
        .ff-shipping-grid .ff-field-wide[b-orzevupr5r] {
            grid-column: span 4;
        }

    .ff-economic-layout[b-orzevupr5r],
    .ff-other-layout[b-orzevupr5r] {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, .36fr);
    }

    .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
    .ff-general-economics-grid .ff-field-full[b-orzevupr5r] {
        grid-column: 1 / -1;
    }
}

@container (max-width: 78rem) {
    .ff-unified-page[b-orzevupr5r] {
        block-size: auto;
        min-block-size: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        gap: var(--ff-gap);
        padding-block-end: var(--ff-pad);
    }

    .ff-unified-header[b-orzevupr5r],
    .ff-bottom-actions[b-orzevupr5r],
    .ff-economic-layout[b-orzevupr5r],
    .ff-other-layout[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

    .ff-title-block h1[b-orzevupr5r],
    .ff-title-block p[b-orzevupr5r],
    .ff-panel-title-row p[b-orzevupr5r],
    .ff-panel-heading-mini p[b-orzevupr5r] {
        white-space: normal;
    }

    .ff-header-tools[b-orzevupr5r] {
        inline-size: 100%;
        justify-content: flex-start;
    }

    .ff-header-type-picker[b-orzevupr5r] {
        flex: 0 1 auto;
        inline-size: auto;
        min-inline-size: min(13.5rem, 100%);
        max-inline-size: min(100%, 18rem);
    }

    .ff-workspace[b-orzevupr5r],
    .ff-workspace-tabs[b-orzevupr5r],
    .ff-tab-content[b-orzevupr5r],
    .ff-tab-general[b-orzevupr5r],
    .ff-tab-economicos[b-orzevupr5r],
    .ff-tab-otros[b-orzevupr5r] {
        display: flex;
        flex-direction: column;
        block-size: auto;
        max-block-size: none;
        overflow: visible;
    }

    .ff-card[b-orzevupr5r],
    .ff-head-panel[b-orzevupr5r],
    .ff-lines-panel[b-orzevupr5r],
    .ff-general-economics-panel[b-orzevupr5r],
    .ff-accounting-panel[b-orzevupr5r],
    .ff-other-panel[b-orzevupr5r],
    .ff-economic-main[b-orzevupr5r],
    .ff-economic-side[b-orzevupr5r],
    .ff-other-main[b-orzevupr5r],
    .ff-other-side[b-orzevupr5r],
    .ff-economic-layout[b-orzevupr5r],
    .ff-other-layout[b-orzevupr5r] {
        block-size: auto;
        max-block-size: none;
        overflow: visible;
    }

    .ff-panel-title-row[b-orzevupr5r] {
        align-items: center;
    }

    .ff-mini-actions[b-orzevupr5r] {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .ff-general-fields[b-orzevupr5r],
    .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
    .ff-general-economics-grid[b-orzevupr5r],
    .ff-accounting-grid[b-orzevupr5r],
    .ff-shipping-grid[b-orzevupr5r],
    .ff-field-grid-ranges[b-orzevupr5r],
    .ff-specific-grid[b-orzevupr5r],
    .ff-side-grid[b-orzevupr5r],
    .ff-text-free-grid[b-orzevupr5r],
    .ff-iva-summary-grid[b-orzevupr5r] {
        grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
        align-items: end;
    }

        .ff-general-fields > .ff-field[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) > .ff-field[b-orzevupr5r],
        .ff-general-economics-grid > .ff-field[b-orzevupr5r],
        .ff-accounting-grid > .ff-field[b-orzevupr5r],
        .ff-shipping-grid > .ff-field[b-orzevupr5r],
        .ff-field-grid-ranges > .ff-field[b-orzevupr5r],
        .ff-specific-grid > .ff-field[b-orzevupr5r],
        .ff-side-grid > .ff-field[b-orzevupr5r],
        .ff-text-free-grid > .ff-field[b-orzevupr5r],
        .ff-iva-summary-grid > .ff-field[b-orzevupr5r],
        .ff-col-1[b-orzevupr5r],
        .ff-col-2[b-orzevupr5r],
        .ff-col-3[b-orzevupr5r],
        .ff-col-4[b-orzevupr5r],
        .ff-col-5[b-orzevupr5r],
        .ff-col-6[b-orzevupr5r],
        .ff-col-8[b-orzevupr5r],
        .ff-col-9[b-orzevupr5r],
        .ff-col-10[b-orzevupr5r],
        .ff-field-wide[b-orzevupr5r],
        .ff-field-payment[b-orzevupr5r] {
            grid-column: auto;
        }

        .ff-field-full[b-orzevupr5r],
        .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
        .ff-text-free-grid .ff-field-full[b-orzevupr5r] {
            grid-column: 1 / -1;
        }

    .ff-grid-wrapper[b-orzevupr5r],
    .ff-lines-panel .ff-grid-wrapper[b-orzevupr5r],
    .ff-vencimientos-wrapper[b-orzevupr5r] {
        inline-size: 100%;
        block-size: auto;
        min-block-size: clamp(12rem, 32dvb, 22rem);
        max-block-size: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    [b-orzevupr5r] .ff-unified-page .e-grid.ff-grid {
        inline-size: 100%;
        min-inline-size: max(100%, 64rem);
    }

    [b-orzevupr5r] .ff-unified-page .e-grid.ff-vencimientos-grid {
        min-inline-size: max(100%, 40rem);
    }

    .ff-footer-checks[b-orzevupr5r],
    .ff-footer-actions[b-orzevupr5r] {
        flex-wrap: wrap;
        overflow: visible;
    }

    .ff-bottom-actions[b-orzevupr5r] {
        padding-inline: var(--ff-pad);
    }
}

@container (max-width: 58rem) {
    .ff-panel-title-row[b-orzevupr5r],
    .ff-lines-panel .ff-panel-title-row[b-orzevupr5r] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .ff-mini-actions[b-orzevupr5r] {
        inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
        overflow: visible;
    }

    [b-orzevupr5r] .ff-unified-page .ff-mini-actions .e-btn {
        inline-size: 100%;
    }

    .ff-general-fields[b-orzevupr5r],
    .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
    .ff-general-economics-grid[b-orzevupr5r],
    .ff-accounting-grid[b-orzevupr5r],
    .ff-shipping-grid[b-orzevupr5r],
    .ff-field-grid-ranges[b-orzevupr5r],
    .ff-specific-grid[b-orzevupr5r],
    .ff-side-grid[b-orzevupr5r],
    .ff-text-free-grid[b-orzevupr5r],
    .ff-iva-summary-grid[b-orzevupr5r] {
        grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    }

    .ff-footer-checks[b-orzevupr5r],
    .ff-footer-actions[b-orzevupr5r] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
        inline-size: 100%;
        align-items: center;
    }

    [b-orzevupr5r] .ff-unified-page .ff-currency-ddl.e-control-wrapper,
    [b-orzevupr5r] .ff-unified-page .ff-currency-ddl .e-control-wrapper {
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
    }
}

@container (max-width: 40rem) {
    .ff-unified-page[b-orzevupr5r] {
        padding-block-end: calc(var(--ff-pad) + .5rem);
    }

    .ff-header-tools[b-orzevupr5r],
    .ff-tab-strip[b-orzevupr5r],
    .ff-mini-actions[b-orzevupr5r],
    .ff-footer-checks[b-orzevupr5r],
    .ff-footer-actions[b-orzevupr5r] {
        display: grid;
        grid-template-columns: 1fr;
        inline-size: 100%;
        align-items: stretch;
    }

        .ff-header-type-picker[b-orzevupr5r],
        .ff-header-tools .ff-status[b-orzevupr5r] {
            inline-size: 100%;
            max-inline-size: 100%;
            min-inline-size: 0;
        }

    [b-orzevupr5r] .ff-unified-page .ff-header-tools .e-btn,
    [b-orzevupr5r] .ff-unified-page .ff-tab-strip .e-btn,
    [b-orzevupr5r] .ff-unified-page .ff-footer-actions .e-btn {
        inline-size: 100%;
    }

    .ff-general-fields[b-orzevupr5r],
    .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
    .ff-general-economics-grid[b-orzevupr5r],
    .ff-accounting-grid[b-orzevupr5r],
    .ff-shipping-grid[b-orzevupr5r],
    .ff-field-grid-ranges[b-orzevupr5r],
    .ff-specific-grid[b-orzevupr5r],
    .ff-side-grid[b-orzevupr5r],
    .ff-text-free-grid[b-orzevupr5r],
    .ff-iva-summary-grid[b-orzevupr5r],
    .ff-warning-strip[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

        .ff-general-fields > .ff-field[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields) > .ff-field[b-orzevupr5r],
        .ff-general-economics-grid > .ff-field[b-orzevupr5r],
        .ff-accounting-grid > .ff-field[b-orzevupr5r],
        .ff-shipping-grid > .ff-field[b-orzevupr5r],
        .ff-field-grid-ranges > .ff-field[b-orzevupr5r],
        .ff-specific-grid > .ff-field[b-orzevupr5r],
        .ff-side-grid > .ff-field[b-orzevupr5r],
        .ff-text-free-grid > .ff-field[b-orzevupr5r],
        .ff-iva-summary-grid > .ff-field[b-orzevupr5r],
        .ff-field[b-orzevupr5r],
        .ff-field-full[b-orzevupr5r],
        .ff-col-1[b-orzevupr5r],
        .ff-col-2[b-orzevupr5r],
        .ff-col-3[b-orzevupr5r],
        .ff-col-4[b-orzevupr5r],
        .ff-col-5[b-orzevupr5r],
        .ff-col-6[b-orzevupr5r],
        .ff-col-8[b-orzevupr5r],
        .ff-col-9[b-orzevupr5r],
        .ff-col-10[b-orzevupr5r],
        .ff-field-wide[b-orzevupr5r],
        .ff-field-payment[b-orzevupr5r] {
            grid-column: 1 / -1;
        }

    [b-orzevupr5r] .ff-unified-page .e-grid.ff-grid {
        min-inline-size: 58rem;
    }

    [b-orzevupr5r] .ff-unified-page .e-grid.ff-vencimientos-grid {
        min-inline-size: 36rem;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 78rem) {
        .ff-unified-page[b-orzevupr5r] {
            block-size: auto;
            min-block-size: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .ff-unified-header[b-orzevupr5r],
        .ff-bottom-actions[b-orzevupr5r],
        .ff-economic-layout[b-orzevupr5r],
        .ff-other-layout[b-orzevupr5r] {
            grid-template-columns: 1fr;
        }

        .ff-workspace[b-orzevupr5r],
        .ff-workspace-tabs[b-orzevupr5r],
        .ff-tab-content[b-orzevupr5r],
        .ff-tab-general[b-orzevupr5r],
        .ff-tab-economicos[b-orzevupr5r],
        .ff-tab-otros[b-orzevupr5r] {
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        .ff-general-fields[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
        .ff-general-economics-grid[b-orzevupr5r],
        .ff-accounting-grid[b-orzevupr5r],
        .ff-shipping-grid[b-orzevupr5r],
        .ff-field-grid-ranges[b-orzevupr5r],
        .ff-specific-grid[b-orzevupr5r],
        .ff-side-grid[b-orzevupr5r],
        .ff-text-free-grid[b-orzevupr5r],
        .ff-iva-summary-grid[b-orzevupr5r] {
            grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
        }

            .ff-general-fields > .ff-field[b-orzevupr5r],
            .ff-head-compact-grid:not(.ff-general-fields) > .ff-field[b-orzevupr5r],
            .ff-general-economics-grid > .ff-field[b-orzevupr5r],
            .ff-accounting-grid > .ff-field[b-orzevupr5r],
            .ff-shipping-grid > .ff-field[b-orzevupr5r],
            .ff-field-grid-ranges > .ff-field[b-orzevupr5r],
            .ff-specific-grid > .ff-field[b-orzevupr5r],
            .ff-side-grid > .ff-field[b-orzevupr5r],
            .ff-text-free-grid > .ff-field[b-orzevupr5r],
            .ff-iva-summary-grid > .ff-field[b-orzevupr5r],
            .ff-col-1[b-orzevupr5r],
            .ff-col-2[b-orzevupr5r],
            .ff-col-3[b-orzevupr5r],
            .ff-col-4[b-orzevupr5r],
            .ff-col-5[b-orzevupr5r],
            .ff-col-6[b-orzevupr5r],
            .ff-col-8[b-orzevupr5r],
            .ff-col-9[b-orzevupr5r],
            .ff-col-10[b-orzevupr5r],
            .ff-field-wide[b-orzevupr5r],
            .ff-field-payment[b-orzevupr5r] {
                grid-column: auto;
            }

        .ff-field-full[b-orzevupr5r],
        .ff-field-notes[b-orzevupr5r] {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 40rem) {
        .ff-general-fields[b-orzevupr5r],
        .ff-head-compact-grid:not(.ff-general-fields)[b-orzevupr5r],
        .ff-general-economics-grid[b-orzevupr5r],
        .ff-accounting-grid[b-orzevupr5r],
        .ff-shipping-grid[b-orzevupr5r],
        .ff-field-grid-ranges[b-orzevupr5r],
        .ff-specific-grid[b-orzevupr5r],
        .ff-side-grid[b-orzevupr5r],
        .ff-text-free-grid[b-orzevupr5r],
        .ff-iva-summary-grid[b-orzevupr5r] {
            grid-template-columns: 1fr;
        }
    }
}

@keyframes ffUnifiedIn-b-orzevupr5r {
    from {
        opacity: 0;
        transform: translateY(.28rem);
        filter: blur(.08rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-unified-page[b-orzevupr5r],
    .ff-unified-page *[b-orzevupr5r],
    .ff-unified-page *[b-orzevupr5r]::before,
    .ff-unified-page *[b-orzevupr5r]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   GENERAL RESPONSIVE OK - OVERRIDE FINAL
   - Sin estilos dentro del Razor.
   - El panel General crece en alto y no se pisa con lineas.
   - Los campos se distribuyen por ancho real del contenedor.
   - Las notas ocupan todo el ancho.
   ========================================================== */

.ff-unified-page[b-orzevupr5r] {
    block-size: 100% !important;
    min-block-size: 0 !important;
    max-block-size: 100% !important;
    overflow: hidden !important;
}

.ff-workspace[b-orzevupr5r],
.ff-workspace-tabs[b-orzevupr5r] {
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.ff-tab-content[b-orzevupr5r],
.ff-tab-general[b-orzevupr5r] {
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    block-size: auto !important;
    max-block-size: 100% !important;
    overflow: hidden !important;
}

.ff-tab-general[b-orzevupr5r] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ff-gap-tight) !important;
}

    /* Cabecera y económicos: alto natural, anclados (no crecen ni se encogen) */
    .ff-tab-general > .ff-head-panel[b-orzevupr5r],
    .ff-tab-general > .ff-general-economics-panel[b-orzevupr5r] {
        inline-size: 100% !important;
        flex: 0 0 auto !important;
        block-size: auto !important;
        min-block-size: 0 !important;
        max-block-size: none !important;
        overflow: visible !important;
    }

    /* Líneas: ocupan SOLO el espacio sobrante y hacen scroll interno */
    .ff-tab-general > .ff-lines-panel[b-orzevupr5r] {
        inline-size: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-block-size: 8rem !important;
        max-block-size: none !important;
        overflow: hidden !important;
    }

.ff-grid-wrapper[b-orzevupr5r],
.ff-lines-panel .ff-grid-wrapper[b-orzevupr5r] {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex: 1 1 auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ff-unified-page .ff-general-fields[b-orzevupr5r],
.ff-unified-page .ff-general-economics-grid[b-orzevupr5r] {
    min-inline-size: 0 !important;
    display: grid !important;
    gap: var(--ff-gap-tight) !important;
    align-items: end !important;
}

    .ff-unified-page .ff-general-fields > .ff-field[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

/* General: escritorio grande, 2 filas exactas */
.ff-unified-page .ff-general-fields[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
}

    .ff-unified-page .ff-general-fields .ff-field-doc[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(1)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-date[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(2)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-agent[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(3)[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-tariff[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(4)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-order[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(5)[b-orzevupr5r] {
        grid-column: span 7 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-warehouse[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(6)[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-format[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(7)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-reference[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(8)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-client[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(9)[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-invoice-type[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(10)[b-orzevupr5r] {
        grid-column: span 2 !important;
    }

    .ff-unified-page .ff-general-fields .ff-field-rectified[b-orzevupr5r],
    .ff-unified-page .ff-general-fields > .ff-field:nth-child(11)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

/* Economicos dentro de General */
.ff-unified-page .ff-general-economics-grid[b-orzevupr5r] {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

    .ff-unified-page .ff-general-economics-grid .ff-col-1[b-orzevupr5r] {
        grid-column: span 1 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-2[b-orzevupr5r] {
        grid-column: span 2 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-3[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid .ff-field-payment[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-4[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid .ff-field-payment-method[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-5[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-6[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-8[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-9[b-orzevupr5r] {
        grid-column: span 9 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-col-10[b-orzevupr5r] {
        grid-column: span 10 !important;
    }

    .ff-unified-page .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid .ff-field-full[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }

[b-orzevupr5r] .ff-unified-page .ff-field-notes textarea,
[b-orzevupr5r] .ff-unified-page .ff-field-notes.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-field-notes .e-control-wrapper textarea {
    min-block-size: clamp(3rem, 7dvb, 5rem) !important;
}

/* Tablet ancho: campos aprovechando 12 columnas sin pisarse */
@container (max-width: 78rem) {
    .ff-unified-page .ff-general-fields[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-general-fields .ff-field-doc[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(1)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-date[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(2)[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-agent[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(3)[b-orzevupr5r] {
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-tariff[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(4)[b-orzevupr5r] {
            grid-column: span 4 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-order[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(5)[b-orzevupr5r] {
            grid-column: span 8 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-warehouse[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(6)[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(7)[b-orzevupr5r] {
            grid-column: span 4 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-reference[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(8)[b-orzevupr5r] {
            grid-column: span 8 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-client[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(9)[b-orzevupr5r] {
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(10)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(11)[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

    .ff-unified-page .ff-general-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-general-economics-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-1[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-2[b-orzevupr5r] {
            grid-column: span 2 !important;
        }

        .ff-unified-page .ff-general-economics-grid .ff-col-3[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-4[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment-method[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-general-economics-grid .ff-col-5[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-6[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-8[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-9[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-10[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-full[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Tablet estrecho: 2 columnas reales, nunca campos aplastados */
@container (max-width: 52rem) {
    .ff-unified-page .ff-panel-title-row[b-orzevupr5r],
    .ff-unified-page .ff-lines-panel .ff-panel-title-row[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .ff-unified-page .ff-mini-actions[b-orzevupr5r] {
        inline-size: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--ff-gap-tight) !important;
    }

    [b-orzevupr5r] .ff-unified-page .ff-mini-actions .e-btn {
        inline-size: 100% !important;
    }

    .ff-unified-page .ff-general-fields[b-orzevupr5r] {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-general-fields .ff-field-doc[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(1)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-date[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(2)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-tariff[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(4)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(7)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(10)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(11)[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-general-fields .ff-field-agent[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(3)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-order[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(5)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-warehouse[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(6)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-reference[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(8)[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-client[b-orzevupr5r],
        .ff-unified-page .ff-general-fields > .ff-field:nth-child(9)[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }

    .ff-unified-page .ff-general-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-general-economics-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-1[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-2[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-3[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-4[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment-method[b-orzevupr5r] {
            grid-column: auto !important;
        }

        .ff-unified-page .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-full[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-5[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-6[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-8[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-9[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-10[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil: una columna limpia */
@container (max-width: 36rem) {
    .ff-unified-page .ff-general-fields[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid[b-orzevupr5r],
    .ff-unified-page .ff-mini-actions[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-general-fields > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-doc[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-date[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-agent[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-tariff[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-order[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-warehouse[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-reference[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-client[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-general-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-1[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-2[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-3[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-4[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-5[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-6[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-8[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-9[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-col-10[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-payment-method[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-notes[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid .ff-field-full[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }

    .ff-lines-panel[b-orzevupr5r] {
        min-block-size: 18rem !important;
    }
}

/* Fallback para el Razor original sin clases especificas en economicos */
.ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(16)[b-orzevupr5r] {
    grid-column: span 4 !important;
}

.ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(17)[b-orzevupr5r] {
    grid-column: 1 / -1 !important;
}

@container (max-width: 78rem) {
    .ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(16)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(17)[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }
}

@container (max-width: 52rem) {
    .ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(16)[b-orzevupr5r] {
        grid-column: auto !important;
    }

    .ff-unified-page .ff-general-economics-grid > .ff-field:nth-child(17)[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================
   GENERAL - ECONOMICOS EN 8 COLUMNAS
   Mantener este bloque al final del archivo.
   ========================================================== */

.ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: end !important;
}

    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-1[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-2[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-3[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-4[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-5[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-6[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-8[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-9[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-col-10[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-field-payment[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field.ff-field-payment-method[b-orzevupr5r] {
        grid-column: span 1 !important;
    }

    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field-full[b-orzevupr5r],
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field-notes[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }

@container (max-width: 92rem) {
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@container (max-width: 58rem) {
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@container (max-width: 36rem) {
    .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field-full[b-orzevupr5r],
        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid > .ff-field-notes[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

@supports not (container-type: inline-size) {
    @media (max-width: 92rem) {
        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 58rem) {
        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 36rem) {
        .ff-unified-page .ff-general-economics-grid.ff-economics-8-grid[b-orzevupr5r] {
            grid-template-columns: 1fr !important;
        }
    }
}

.ff-btn-emoji[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    line-height: 1;
}

[b-orzevupr5r] .ff-unified-page .ff-mini-btn .ff-btn-emoji {
    margin-inline-end: .28rem;
}

[b-orzevupr5r] .ff-unified-page .ff-icon-btn .ff-btn-emoji {
    margin: 0;
}

/* ==========================================================
   SECCIONES/TÍTULOS DEL CUERPO (SF8)
   Cabecera de grupo del SfGrid de líneas: título + ↑/↓ +
   renombrar + «+ línea» + eliminar + subtotal a la derecha.
   Se renderiza dentro del grid → estilar con ::deep.
   ========================================================== */

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-caption {
    display: flex;
    align-items: center;
    gap: .4rem;
    inline-size: 100%;
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-title {
    font-weight: 600;
    color: var(--ff-heading);
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-title-none {
    font-style: italic;
    color: var(--ff-muted);
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-btn {
    border: .0625rem solid var(--ff-line);
    background: #ffffff;
    color: var(--ff-heading);
    border-radius: 4px;
    line-height: 1;
    padding: .1rem .4rem;
    cursor: pointer;
    font-size: .82rem;
}

    [b-orzevupr5r] .ff-lines-datagrid .ff-sec-btn:disabled {
        opacity: .35;
        cursor: default;
    }

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-btn-danger {
    border-color: #fecaca;
    background: var(--ff-danger-soft);
    color: var(--ff-danger);
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-input {
    inline-size: 13.5rem;
    max-inline-size: 60%;
    min-block-size: 1.5rem;
    border: .0625rem solid var(--ff-line);
    border-radius: 4px;
    padding: .1rem .4rem;
    font-size: .85rem;
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-sum {
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--ff-heading);
}

[b-orzevupr5r] .ff-lines-datagrid .ff-sec-entry-hint {
    font-style: italic;
    color: var(--ff-muted);
}

/* ==========================================================
   SELECTOR TIPO DOCUMENTO CON ICONO ALINEADO
   Mantener este bloque al FINAL del archivo.
   Conserva el icono y sube ligeramente el texto del DropDownList.
   ========================================================== */

.ff-unified-page .ff-header-type-picker[b-orzevupr5r] {
    inline-size: clamp(12rem, 16dvi, 16rem) !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: var(--ff-control) !important;
    block-size: var(--ff-control) !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .28rem !important;
    padding-block: 0 !important;
    padding-inline: .58rem .24rem !important;
    border: .0625rem solid var(--ff-accent-line) !important;
    border-radius: 999rem !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 68%, #ffffff) !important;
    overflow: hidden !important;
}

.ff-unified-page .ff-header-type-icon[b-orzevupr5r] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: .95rem !important;
    min-inline-size: .95rem !important;
    block-size: var(--ff-control) !important;
    color: var(--ff-accent) !important;
    font-size: var(--ff-font-small) !important;
    line-height: 1 !important;
    transform: translateY(-.025rem) !important;
}

[b-orzevupr5r] .ff-unified-page .ff-header-type-picker .e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-header-type-picker .e-input-group,
[b-orzevupr5r] .ff-unified-page .ff-header-type-ddl.e-control-wrapper,
[b-orzevupr5r] .ff-unified-page .ff-header-type-ddl .e-control-wrapper {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: var(--ff-control) !important;
    block-size: var(--ff-control) !important;
    display: flex !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 999rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

    [b-orzevupr5r] .ff-unified-page .ff-header-type-picker .e-input,
    [b-orzevupr5r] .ff-unified-page .ff-header-type-picker input.e-input,
    [b-orzevupr5r] .ff-unified-page .ff-header-type-ddl .e-input,
    [b-orzevupr5r] .ff-unified-page .ff-header-type-ddl.e-control-wrapper input.e-input {
        min-block-size: var(--ff-control) !important;
        block-size: var(--ff-control) !important;
        padding-block: 0 !important;
        padding-inline: .08rem 1.72rem !important;
        color: var(--ff-accent) !important;
        font-size: var(--ff-font-small) !important;
        font-weight: 950 !important;
        line-height: var(--ff-control) !important;
        transform: translateY(-.075rem) !important;
    }

[b-orzevupr5r] .ff-unified-page .ff-header-type-picker .e-ddl-icon,
[b-orzevupr5r] .ff-unified-page .ff-header-type-picker .e-input-group-icon,
[b-orzevupr5r] .ff-unified-page .ff-header-type-ddl .e-ddl-icon,
[b-orzevupr5r] .ff-unified-page .ff-header-type-ddl .e-input-group-icon {
    color: var(--ff-accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-block-size: var(--ff-control) !important;
    transform: translateY(-.025rem) !important;
}

@container (max-width: 40rem) {
    .ff-unified-page .ff-header-type-picker[b-orzevupr5r] {
        inline-size: 100% !important;
    }
}

@media (max-width: 40rem) {
    .ff-unified-page .ff-header-type-picker[b-orzevupr5r] {
        inline-size: 100% !important;
    }
}

/* ==========================================================
   ECONOMICOS - RESUMEN IVA EN 2 COLUMNAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-iva-summary-grid[b-orzevupr5r] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

[b-orzevupr5r] .ff-unified-page .ff-iva-summary-grid .e-btn.ff-total-chip {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

@container (max-width: 30rem) {
    .ff-unified-page .ff-iva-summary-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 30rem) {
    .ff-unified-page .ff-iva-summary-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   FACTURA DE ALBARANES - PESTAÑA ALBARANES
   Mantener este bloque al FINAL del archivo.
   ========================================================== */


.ff-unified-page .ff-tab-strip[b-orzevupr5r] {
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)) !important;
}

.ff-tab-albaranes[b-orzevupr5r],
.ff-tab-facturas-albaranes[b-orzevupr5r] {
    display: flex !important;
    flex-direction: column !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    overflow: visible !important;
}

.ff-albaranes-panel[b-orzevupr5r],
.ff-facturas-panel[b-orzevupr5r] {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    overflow: visible !important;
    padding: var(--ff-pad) !important;
    border-block-start: .16rem solid var(--ff-accent) !important;
}

.ff-albaranes-form-grid[b-orzevupr5r] {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: var(--ff-gap-tight);
    align-items: end;
    margin-block-end: var(--ff-gap);
}

    .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0;
    }

.ff-alb-number[b-orzevupr5r],
.ff-alb-date[b-orzevupr5r],
.ff-alb-from-albaran[b-orzevupr5r],
.ff-alb-to-albaran[b-orzevupr5r],
.ff-alb-from-date[b-orzevupr5r],
.ff-alb-to-date[b-orzevupr5r],
.ff-alb-min-amount[b-orzevupr5r],
.ff-alb-payment-code[b-orzevupr5r] {
    grid-column: span 4;
}

.ff-alb-format[b-orzevupr5r],
.ff-alb-invoice-type[b-orzevupr5r],
.ff-alb-payment-type[b-orzevupr5r] {
    grid-column: span 3;
}

.ff-alb-rectified[b-orzevupr5r] {
    grid-column: span 5;
}

.ff-alb-from-client-code[b-orzevupr5r],
.ff-alb-to-client-code[b-orzevupr5r] {
    grid-column: span 3;
}

.ff-alb-from-client-name[b-orzevupr5r],
.ff-alb-to-client-name[b-orzevupr5r],
.ff-alb-payment-name[b-orzevupr5r] {
    grid-column: span 9;
}

.ff-alb-grouping[b-orzevupr5r] {
    grid-column: span 15;
}

.ff-albaranes-wrapper[b-orzevupr5r],
.ff-facturas-wrapper[b-orzevupr5r] {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-block-size: clamp(14rem, 34dvb, 23rem) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

[b-orzevupr5r] .ff-unified-page .e-grid.ff-albaranes-datagrid {
    min-inline-size: max(100%, 72rem) !important;
}

[b-orzevupr5r] .ff-unified-page .e-grid.ff-facturas-datagrid {
    min-inline-size: max(100%, 58rem) !important;
}

@container (max-width: 78rem) {
    .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ff-alb-number[b-orzevupr5r],
    .ff-alb-date[b-orzevupr5r],
    .ff-alb-format[b-orzevupr5r],
    .ff-alb-invoice-type[b-orzevupr5r],
    .ff-alb-rectified[b-orzevupr5r],
    .ff-alb-from-albaran[b-orzevupr5r],
    .ff-alb-to-albaran[b-orzevupr5r],
    .ff-alb-from-date[b-orzevupr5r],
    .ff-alb-to-date[b-orzevupr5r],
    .ff-alb-min-amount[b-orzevupr5r],
    .ff-alb-payment-type[b-orzevupr5r],
    .ff-alb-payment-code[b-orzevupr5r] {
        grid-column: span 4;
    }

    .ff-alb-from-client-code[b-orzevupr5r],
    .ff-alb-to-client-code[b-orzevupr5r] {
        grid-column: span 3;
    }

    .ff-alb-from-client-name[b-orzevupr5r],
    .ff-alb-to-client-name[b-orzevupr5r],
    .ff-alb-payment-name[b-orzevupr5r],
    .ff-alb-grouping[b-orzevupr5r] {
        grid-column: span 9;
    }
}

@container (max-width: 52rem) {
    .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: auto !important;
        }

    .ff-alb-from-client-name[b-orzevupr5r],
    .ff-alb-to-client-name[b-orzevupr5r],
    .ff-alb-payment-name[b-orzevupr5r],
    .ff-alb-grouping[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }
}

@container (max-width: 36rem) {
    .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

        .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

@supports not (container-type: inline-size) {
    @media (max-width: 78rem) {
        .ff-albaranes-form-grid[b-orzevupr5r] {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
    }

    @media (max-width: 52rem) {
        .ff-albaranes-form-grid[b-orzevupr5r] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

            .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
                grid-column: auto !important;
            }

        .ff-alb-from-client-name[b-orzevupr5r],
        .ff-alb-to-client-name[b-orzevupr5r],
        .ff-alb-payment-name[b-orzevupr5r],
        .ff-alb-grouping[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
    }

    @media (max-width: 36rem) {
        .ff-albaranes-form-grid[b-orzevupr5r] {
            grid-template-columns: 1fr;
        }

            .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
                grid-column: 1 / -1 !important;
            }
    }
}

/* ==========================================================
   FACTURA DE ALBARANES - CAMPOS OCUPANDO TODO EL ANCHO
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-albaranes-fields[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-albaranes-fields > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Fila 1 */
    .ff-unified-page .ff-albaranes-fields .ff-field-invoice-number[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-issue-date[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-format[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-invoice-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-rectified[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-from-delivery[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    /* Fila 2 */
    .ff-unified-page .ff-albaranes-fields .ff-field-from-client[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-from-client-name[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-to-delivery[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-to-client[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-to-client-name[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    /* Fila 3 */
    .ff-unified-page .ff-albaranes-fields .ff-field-payment-method[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-payment-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-payment-description[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-from-date[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-to-date[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields .ff-field-minimum-amount[b-orzevupr5r] {
        grid-column: span 1 !important;
    }

    /* Fila 4 */
    .ff-unified-page .ff-albaranes-fields .ff-field-invoice-group-type[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }

    /* Fallback si alguna clase no coincide: repartir por posición */
    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(1)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(2)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(3)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(4)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(5)[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(6)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(7)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(8)[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(9)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(10)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(11)[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(12)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(13)[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(14)[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(15)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(16)[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(17)[b-orzevupr5r] {
        grid-column: span 1 !important;
    }

    .ff-unified-page .ff-albaranes-fields > .ff-field:nth-child(18)[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }

/* Tablet: 12 columnas, todavía aprovechando ancho */
@container (max-width: 78rem) {
    .ff-unified-page .ff-albaranes-fields[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-fields > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-number[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-issue-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-method[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-minimum-amount[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-albaranes-fields .ff-field-from-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-description[b-orzevupr5r] {
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-group-type[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Tablet estrecho: 2 columnas reales */
@container (max-width: 52rem) {
    .ff-unified-page .ff-albaranes-fields[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-fields > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-number[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-issue-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-method[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-minimum-amount[b-orzevupr5r] {
            grid-column: span 1 !important;
        }

        .ff-unified-page .ff-albaranes-fields .ff-field-from-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-description[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-group-type[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Móvil: una columna limpia */
@container (max-width: 36rem) {
    .ff-unified-page .ff-albaranes-fields[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-albaranes-fields > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-number[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-issue-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-format[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-delivery[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-method[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-payment-description[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-from-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-to-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-minimum-amount[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-fields .ff-field-invoice-group-type[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - FORMULARIO EN 3 LINEAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1: Numero · Fecha · Formato · Factura · Rectificada · Desde albaran */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-number[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-date[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-format[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-invoice-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-rectified[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-albaran[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    /* Linea 2: Desde cliente · Nombre · Hasta albaran · Hasta cliente · Nombre */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client-name[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-albaran[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client-name[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    /* Linea 3: Desde fecha · Hasta fecha · Forma pago · Codigo · Descripcion · Importe · Tipo */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-date[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-date[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-code[b-orzevupr5r] {
        grid-column: span 2 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-min-amount[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

/* Tablet ancho */
@container (max-width: 78rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-number[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-format[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-albaran[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-albaran[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-min-amount[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
            grid-column: span 6 !important;
        }
}

/* Tablet estrecho */
@container (max-width: 52rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: auto !important;
        }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil */
@container (max-width: 36rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - DROPDOWNS Y CLIENTES UNIDOS EN 3 LINEAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1 */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-number[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-date[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-format[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-invoice-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-rectified[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-albaran[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    /* Linea 2 */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client[b-orzevupr5r] {
        grid-column: span 9 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-albaran[b-orzevupr5r] {
        grid-column: span 6 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client[b-orzevupr5r] {
        grid-column: span 9 !important;
    }

    /* Linea 3 */
    .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-date[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-date[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-code[b-orzevupr5r] {
        grid-column: span 2 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-min-amount[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

@container (max-width: 78rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-number[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-format[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-albaran[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-albaran[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-date[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-type[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-min-amount[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
            grid-column: span 6 !important;
        }
}

@container (max-width: 52rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: auto !important;
        }

        .ff-unified-page .ff-albaranes-form-grid .ff-alb-rectified[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-from-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-to-client[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-albaranes-form-grid .ff-alb-grouping[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

@container (max-width: 36rem) {
    .ff-unified-page .ff-albaranes-form-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-albaranes-form-grid > .ff-field[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - PESTANA FACTURAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-tab-facturas-albaranes[b-orzevupr5r],
.ff-unified-page .ff-facturas-panel[b-orzevupr5r] {
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ff-gap-tight) !important;
    overflow: visible !important;
}

.ff-unified-page .ff-facturas-panel[b-orzevupr5r] {
    padding: var(--ff-pad) !important;
    border-block-start: .16rem solid var(--ff-accent) !important;
}

.ff-unified-page .ff-facturas-wrapper[b-orzevupr5r] {
    flex: 1 1 auto !important;
    min-block-size: clamp(12rem, 34dvb, 23rem) !important;
    max-block-size: none !important;
    overflow: auto !important;
}

[b-orzevupr5r] .ff-unified-page .e-grid.ff-facturas-datagrid {
    min-inline-size: max(100%, 68rem) !important;
}

.ff-unified-page .ff-facturas-detail-panel[b-orzevupr5r],
.ff-unified-page .ff-facturas-economics-panel[b-orzevupr5r] {
    min-inline-size: 0 !important;
    border: .0625rem solid var(--ff-line) !important;
    border-radius: var(--ff-radius-sm) !important;
    background: color-mix(in srgb, var(--ff-soft) 48%, #ffffff) !important;
    padding: var(--ff-pad-tight) !important;
}

.ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
.ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
    min-inline-size: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    gap: var(--ff-gap-tight) !important;
    align-items: end !important;
}

    .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Facturas: datos principales */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r] {
        grid-column: span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r] {
        grid-column: span 8 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
        grid-column: span 4 !important;
    }

    /* Facturas: importes */
    .ff-unified-page .ff-facturas-economics-grid .ff-field[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-code[b-orzevupr5r] {
        grid-column: span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-name[b-orzevupr5r] {
        grid-column: span 10 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
        grid-column: span 19 !important;
    }

[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes textarea,
[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes .e-control-wrapper textarea {
    min-block-size: clamp(2.1rem, 4dvb, 3.2rem) !important;
}

/* Tablet */
@container (max-width: 78rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
            grid-column: span 6 !important;
        }
}

/* Tablet estrecho */
@container (max-width: 52rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
            grid-column: auto !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil */
@container (max-width: 36rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - DATOS FACTURA EN 3 LINEAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1: Documento · Vendedor · Nombre vendedor · Albaran */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 5 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 9 / span 8 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 17 / span 8 !important;
    }

    /* Linea 2: Fecha · Almacen · Nombre almacen · Referencia · Tarifa */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 5 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 9 / span 7 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 16 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 20 / span 5 !important;
    }

    /* Linea 3: Cliente · Nombre cliente · Factura · Rectificada */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 1 / span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 6 / span 10 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 16 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 20 / span 5 !important;
    }

/* Tablet: mantiene 3 lineas, pero con menos presion */
@container (max-width: 78rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 6 !important;
        }
}

/* Tablet estrecho */
@container (max-width: 52rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: auto !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil */
@container (max-width: 36rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - DATOS FACTURA 3 LINEAS SIN DUPLICADOS
   Mantener este bloque al FINAL del archivo.
   Quita el hueco de Nombre vendedor y Nombre almacen.
   ========================================================== */

.ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1: Documento · Vendedor · Albaran */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 5 / span 8 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 13 / span 12 !important;
    }

    /* Linea 2: Fecha · Almacen · Referencia · Tarifa */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 5 / span 8 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 13 / span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 18 / span 7 !important;
    }

    /* Linea 3: Cliente · Nombre cliente · Factura · Rectificada */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 1 / span 6 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 7 / span 9 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 16 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 20 / span 5 !important;
    }

    /* Por si quedara alguna clase antigua en cache o markup */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r],
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r] {
        display: none !important;
    }

/* Tablet */
@container (max-width: 78rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 6 !important;
        }
}

/* Tablet estrecho */
@container (max-width: 52rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: auto !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil */
@container (max-width: 36rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FACTURA DE ALBARANES - FACTURAS RESTAURADA
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

/* Datos principales de la pestaña Facturas en 2 lineas */
.ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1: Documento · Vendedor · Albaran · Fecha · Almacen */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-document[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 5 / span 7 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 12 / span 6 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-date[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 18 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-code[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 21 / span 4 !important;
    }

    /* Linea 2: Referencia · Tarifa · Cliente · Nombre cliente · Factura · Rectificada */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-reference[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 1 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-tariff[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 5 / span 4 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 9 / span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 14 / span 5 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-invoice-type[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 19 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 22 / span 3 !important;
    }

    /* Ocultar por seguridad los duplicados antiguos si quedasen en cache */
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-name[b-orzevupr5r],
    .ff-unified-page .ff-facturas-detail-grid .ff-fac-warehouse-name[b-orzevupr5r] {
        display: none !important;
    }

/* Importes de Facturas: 2 lineas + Notas en tercera linea */
.ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
    grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
    align-items: end !important;
    inline-size: 100% !important;
}

    .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
        min-inline-size: 0 !important;
    }

    /* Linea 1 */
    .ff-unified-page .ff-facturas-economics-grid .ff-fac-discount[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 1 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-total-net[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 4 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-discount-net[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 7 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-expenses-iva[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 10 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-retention[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 13 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-total[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 16 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-expenses[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 19 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-account-payment[b-orzevupr5r] {
        grid-row: 1 !important;
        grid-column: 22 / span 3 !important;
    }

    /* Linea 2 */
    .ff-unified-page .ff-facturas-economics-grid .ff-fac-cash[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 1 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-deferred[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 4 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-due-date[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 7 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-total-invoice[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 10 / span 3 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-code[b-orzevupr5r] {
        grid-row: 2 !important;
        grid-column: 13 / span 5 !important;
    }

    /* Linea 3 */
    .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
        grid-row: 3 !important;
        grid-column: 1 / -1 !important;
    }

    .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-name[b-orzevupr5r] {
        display: none !important;
    }

[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes textarea,
[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes .e-control-wrapper textarea {
    min-block-size: clamp(2.5rem, 5dvb, 4rem) !important;
    max-block-size: none !important;
    resize: none !important;
}

/* Tablet */
@container (max-width: 78rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: span 3 !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-seller-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-code[b-orzevupr5r] {
            grid-column: span 6 !important;
        }

        .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Tablet estrecho */
@container (max-width: 52rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: auto !important;
        }

        .ff-unified-page .ff-facturas-detail-grid .ff-fac-delivery[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-client-name[b-orzevupr5r],
        .ff-unified-page .ff-facturas-detail-grid .ff-fac-rectified[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-payment-code[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid .ff-fac-notes[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* Movil */
@container (max-width: 36rem) {
    .ff-unified-page .ff-facturas-detail-grid[b-orzevupr5r],
    .ff-unified-page .ff-facturas-economics-grid[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .ff-unified-page .ff-facturas-detail-grid > .ff-field[b-orzevupr5r],
        .ff-unified-page .ff-facturas-economics-grid > .ff-field[b-orzevupr5r] {
            grid-row: auto !important;
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   GENERAL COMPRIMIBLE
   Permite ocultar la cabecera General para dar mas alto al grid
   de lineas del documento. Mantener al final del archivo.
   ========================================================== */

.ff-unified-page .ff-head-panel-collapsed[b-orzevupr5r] {
    padding-block: clamp(.34rem, .52dvi, .62rem) !important;
    border-block-start-width: .12rem !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 16%, #ffffff) !important;
}

    .ff-unified-page .ff-head-panel-collapsed .ff-panel-title-row[b-orzevupr5r] {
        align-items: center !important;
        margin-block-end: 0 !important;
    }

.ff-unified-page .ff-collapsed-summary[b-orzevupr5r] {
    margin: .08rem 0 0 !important;
    color: var(--ff-muted) !important;
    font-size: var(--ff-font-small) !important;
    font-weight: 750 !important;
    line-height: 1.18 !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-collapse-btn {
    border-color: var(--ff-accent-line) !important;
    background: var(--ff-accent-soft) !important;
    color: var(--ff-accent) !important;
}

.ff-unified-page .ff-general-compressed .ff-lines-panel[b-orzevupr5r] {
    flex: 1 1 auto !important;
    min-block-size: clamp(22rem, 54dvb, 40rem) !important;
}

    .ff-unified-page .ff-general-compressed .ff-lines-panel .ff-grid-wrapper[b-orzevupr5r] {
        min-block-size: clamp(17rem, 46dvb, 34rem) !important;
    }

@container (max-width: 58rem) {
    .ff-unified-page .ff-general-compressed .ff-mini-actions[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

    .ff-unified-page .ff-general-compressed .ff-lines-panel[b-orzevupr5r] {
        min-block-size: clamp(24rem, 60dvb, 42rem) !important;
    }
}

@container (max-width: 36rem) {
    .ff-unified-page .ff-head-panel-collapsed .ff-panel-title-row[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

    .ff-unified-page .ff-collapsed-summary[b-orzevupr5r] {
        white-space: normal !important;
    }

    .ff-unified-page .ff-general-compressed .ff-lines-panel[b-orzevupr5r],
    .ff-unified-page .ff-general-compressed .ff-lines-panel .ff-grid-wrapper[b-orzevupr5r] {
        min-block-size: 24rem !important;
    }
}

/* ==========================================================
   GENERAL - FLECHA JUNTO AL TITULO
   Mantener este bloque al FINAL del archivo.
   Coloca el toggle a la derecha de "General" con estilo compacto.
   ========================================================== */

.ff-unified-page .ff-section-title[b-orzevupr5r],
.ff-unified-page .ff-general-title[b-orzevupr5r] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .38rem !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.ff-unified-page .ff-section-title-text[b-orzevupr5r] {
    display: inline-flex !important;
    align-items: center !important;
    min-inline-size: 0 !important;
    gap: 0 !important;
}

.ff-unified-page .ff-general-title .ff-title-icon[b-orzevupr5r] {
    margin-inline-end: .45rem !important;
    color: var(--ff-accent) !important;
}

[b-orzevupr5r] .ff-unified-page .e-btn.ff-collapse-toggle {
    inline-size: clamp(1.42rem, 1.62dvi, 1.82rem) !important;
    min-inline-size: clamp(1.42rem, 1.62dvi, 1.82rem) !important;
    max-inline-size: clamp(1.42rem, 1.62dvi, 1.82rem) !important;
    block-size: clamp(1.42rem, 1.62dvi, 1.82rem) !important;
    min-block-size: clamp(1.42rem, 1.62dvi, 1.82rem) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: .0625rem solid var(--ff-accent-line) !important;
    border-radius: 999rem !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 82%, #ffffff) !important;
    color: var(--ff-accent) !important;
    box-shadow: inset 0 0 0 .0625rem color-mix(in srgb, var(--ff-accent-line) 42%, transparent) !important;
    transform: translateY(.01rem) !important;
}

    [b-orzevupr5r] .ff-unified-page .e-btn.ff-collapse-toggle:hover,
    [b-orzevupr5r] .ff-unified-page .e-btn.ff-collapse-toggle:focus-visible {
        border-color: var(--ff-accent) !important;
        background: var(--ff-accent) !important;
        color: #ffffff !important;
        box-shadow: 0 .26rem .64rem color-mix(in srgb, var(--ff-accent) 18%, transparent) !important;
    }

    [b-orzevupr5r] .ff-unified-page .e-btn.ff-collapse-toggle .ff-collapse-toggle-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: clamp(1rem, 1.12dvi, 1.22rem) !important;
        line-height: 1 !important;
        inline-size: 1em !important;
        block-size: 1em !important;
    }

/* Evita que reglas antiguas de .ff-mini-btn o del h2 recorten el toggle. */
.ff-unified-page .ff-head-panel .ff-panel-title-row > div[b-orzevupr5r],
.ff-unified-page .ff-head-panel .ff-panel-title-row h2[b-orzevupr5r] {
    overflow: visible !important;
}


/* ==========================================================
   MINIATURA DE IMAGEN EN LÍNEAS
   ========================================================== */

[b-orzevupr5r] .ff-lines-datagrid .ff-line-thumb {
    inline-size: 2rem;
    block-size: 2rem;
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--ff-line);
    vertical-align: middle;
}

[b-orzevupr5r] .ff-lines-datagrid .ff-line-thumb-empty {
    font-size: 20px;
    color: var(--ff-muted);
    opacity: .55;
}

/* ==========================================================
   NOTAS COMPRIMIDAS AL COMPRIMIR GENERAL
   Solo encoge el textarea de Notas (el resto de campos
   económicos se quedan igual). Da más alto al grid de líneas.
   ========================================================== */
[b-orzevupr5r] .ff-unified-page .ff-general-compressed .ff-field-notes textarea,
[b-orzevupr5r] .ff-unified-page .ff-general-compressed .ff-field-notes.e-control-wrapper textarea,
[b-orzevupr5r] .ff-unified-page .ff-general-compressed .ff-field-notes .e-control-wrapper textarea {
    min-block-size: clamp(1.6rem, 3dvb, 2.2rem) !important;
}


/* ==========================================================
   ALTA RÁPIDA DE LÍNEAS (Enter)
   ========================================================== */
.ff-quick-add-row[b-orzevupr5r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ff-gap-tight);
    margin-block-end: var(--ff-gap-tight);
    padding: var(--ff-pad-tight);
    border: .0625rem dashed var(--ff-accent-line);
    border-radius: var(--ff-radius-sm);
    background: var(--ff-accent-soft);
}

    .ff-quick-add-row .ff-material-icon[b-orzevupr5r] {
        color: var(--ff-accent);
    }

.ff-quick-add-input[b-orzevupr5r] {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: var(--ff-control);
    padding: .3rem .55rem;
    border: .0625rem solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    background: #fff;
    font-size: var(--ff-font);
    color: var(--ff-text);
}

    .ff-quick-add-input:focus[b-orzevupr5r] {
        outline: none;
        border-color: var(--ff-accent);
        box-shadow: 0 0 0 .12rem var(--ff-accent-soft);
    }

/* Input de código en la fila de entrada (alta por código estilo Powergest) */
[b-orzevupr5r] .ff-lines-datagrid .ff-codigo-input {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 1.6rem;
    padding: .1rem .35rem;
    border: .0625rem solid var(--ff-accent-line);
    border-radius: var(--ff-radius-sm);
    background: #fff;
    font-size: var(--ff-font);
    color: var(--ff-text);
}

    [b-orzevupr5r] .ff-lines-datagrid .ff-codigo-input:focus {
        outline: none;
        border-color: var(--ff-accent);
        box-shadow: 0 0 0 .12rem var(--ff-accent-soft);
    }

/* ==========================================================
   PIE DESPLEGADO (vista normal del pie, con todos los campos)
   Al desplegar el pie, el CUERPO de líneas le cede altura (no se apila ni crece el pie oculto bajo el
   pliegue), en CUALQUIER ancho. El pie queda ACOTADO con scroll propio → todos sus campos alcanzables y
   el cuerpo conserva una franja visible. (Antes, a anchos intermedios el modo "apilado" desactivaba la
   cota y asumía scroll de página, que este shell de alto fijo no hace → el pie quedaba invisible.)
   ========================================================== */
.ff-tab-general > .ff-general-economics-panel.ff-footer-open[b-orzevupr5r] {
    flex: 0 1 auto !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: min(58%, 48dvb) !important;
    overflow-y: auto !important;
}

/* Modo "apilado" (contenedor estrecho): por defecto el documento crece y la página hace scroll. Pero CON
   EL PIE ABIERTO forzamos alto fijo (acotado por viewport) y repartimos como en escritorio: el cuerpo
   encoge y el pie queda acotado + scroll. Solo aplica con el pie abierto (:has) → no altera el resto. */
@container (max-width: 78rem) {
    .ff-tab-general:has(> .ff-general-economics-panel.ff-footer-open)[b-orzevupr5r] {
        /* Alto FIJO ~ viewport menos cabecera+barra inferior: el documento llena el hueco y reparte la
           altura sobrante al CUERPO (flex:1), en vez de quedarse pequeño con espacio muerto debajo. */
        block-size: calc(100dvb - 16rem) !important;
        max-block-size: calc(100dvb - 16rem) !important;
        overflow: hidden !important;
    }

        .ff-tab-general:has(> .ff-general-economics-panel.ff-footer-open) > .ff-lines-panel[b-orzevupr5r] {
            flex: 1 1 0 !important;
            block-size: auto !important;
            min-block-size: 4.5rem !important;
            max-block-size: none !important;
            overflow: hidden !important;
        }

            .ff-tab-general:has(> .ff-general-economics-panel.ff-footer-open) > .ff-lines-panel .ff-grid-wrapper[b-orzevupr5r] {
                block-size: 100% !important;
                min-block-size: 0 !important;
                max-block-size: none !important;
                overflow: auto !important;
            }

    .ff-tab-general > .ff-general-economics-panel.ff-footer-open[b-orzevupr5r] {
        max-block-size: min(60%, 46dvb) !important;
    }
}


.fdp-page[b-orzevupr5r] {
    --fdp-primary: #00288e;
    --fdp-primary-container: #1e40af;
    --fdp-surface: #ffffff;
    --fdp-surface-lowest: #ffffff;
    --fdp-surface-low: #fafbfd;
    --fdp-surface-container: #f4f5f9;
    --fdp-outline: #8a8b97;
    --fdp-outline-variant: #e4e5ec;
    --fdp-on-surface: #1a1b22;
    --fdp-on-surface-variant: #555766;
    --fdp-radius: 0.75rem;
    --fdp-radius-sm: 0.5rem;
    --fdp-shadow: 0 1px 2px 0 rgba(15, 23, 42, .05), 0 1px 3px 0 rgba(15, 23, 42, .04);
    /* Espaciados responsive: compactos en pantallas pequeñas, holgados en grandes. */
    --fdp-pad: clamp(0.6rem, 0.45rem + 0.7vw, 1.1rem);
    --fdp-pad-head: clamp(0.45rem, 0.35rem + 0.55vw, 0.85rem);
    --fdp-gap: clamp(0.55rem, 0.4rem + 0.7vw, 1.1rem);
    --fdp-gap-sm: clamp(0.4rem, 0.3rem + 0.45vw, 0.75rem);
    padding: 0px !important;
    box-sizing: border-box;
    inline-size: 100%;
    padding: 1.5rem;
    color: var(--fdp-on-surface);
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    /* «backwards» (no «both»): el fotograma final del keyframe (transform) NO se retiene tras la
       animación. Con «both» quedaba aplicado de forma permanente y convertía a .fdp-page en el bloque
       contenedor de sus descendientes position:fixed, atrapando las ventanas de búsqueda
       (SelectorEntidad) dentro de la página en vez de cubrir la pantalla completa —header y sidebar
       incluidos—. El estado final equivale al de reposo, así que la entrada se ve igual. Mismo
       criterio que .articulos-page. */
    animation: fdpIn-b-orzevupr5r .5s cubic-bezier(.16, 1, .3, 1) backwards;
}

    .fdp-page *[b-orzevupr5r],
    .fdp-page *[b-orzevupr5r]::before,
    .fdp-page *[b-orzevupr5r]::after {
        box-sizing: border-box;
    }

/* ─── Cabecera ──────────────────────────────────────────────────────── */
/* No envuelve: cuando falta espacio, el CommandBar repliega sus comandos al «···»
   (mide el desbordamiento de .fdp-header) y solo como último recurso, ya con solo
   el «···», deja que el título ceda (command-bar-host-collapsed). El título conserva
   su ancho natural y el CommandBar queda siempre en la esquina superior derecha. */
.fdp-header[b-orzevupr5r] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fdp-gap);
    margin-block-end: var(--fdp-gap-sm);
}

.fdp-title-block[b-orzevupr5r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--fdp-gap-sm);
    min-inline-size: 0;
}

/* Última prioridad: cuando el CommandBar ya solo muestra «···» y aún no cabe,
   el título pasa a poder encogerse (y su texto se recorta con elipsis). */
.fdp-header.command-bar-host-collapsed .fdp-title-block[b-orzevupr5r] {
    flex: 1 1 auto;
}

.fdp-title-block h1[b-orzevupr5r] {
    margin: 0;
    /* Escala con el viewport: mínimo 20px, fluido, tope 30px. */
    font-size: clamp(1.25rem, 1.4vw + 0.75rem, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fdp-title-number[b-orzevupr5r] {
    color: var(--fdp-on-surface-variant);
    font-weight: 400;
}

/* El CommandBar conserva su ancho natural y se alinea siempre a la derecha; nunca envuelve.
   Se usa ::deep porque el root del componente vive fuera del scope de esta página. */
.fdp-header[b-orzevupr5r]  .command-bar {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* ─── Chip de estado ────────────────────────────────────────────────── */
.fdp-status[b-orzevupr5r] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
}

.fdp-status-green[b-orzevupr5r] {
    color: #047857;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.fdp-status-blue[b-orzevupr5r] {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #bfdbfe;
}

.fdp-status-orange[b-orzevupr5r] {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}

.fdp-status-red[b-orzevupr5r] {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.fdp-status-neutral[b-orzevupr5r] {
    color: #475569;
    background: var(--fdp-surface-low);
    border-color: var(--fdp-outline-variant);
}

/* ─── Pestañas ──────────────────────────────────────────────────────── */
.fdp-tabs[b-orzevupr5r] {
    border-block-end: 1px solid var(--fdp-outline-variant);
    margin-block-end: var(--fdp-gap);
}

.fdp-tab[b-orzevupr5r] {
    padding: clamp(.45rem, .35rem + .35vw, .75rem) clamp(.8rem, .55rem + 1vw, 1.5rem);
    border: 0;
    background: transparent;
    color: var(--fdp-on-surface-variant);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

    .fdp-tab:hover[b-orzevupr5r] {
        color: var(--fdp-primary);
    }

    .fdp-tab.active[b-orzevupr5r] {
        color: var(--fdp-primary);
        border-block-end-color: var(--fdp-primary);
    }

/* ─── Contenido / tarjetas ──────────────────────────────────────────── */
.fdp-content[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    gap: var(--fdp-gap-sm);
}

.fdp-card[b-orzevupr5r] {
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius);
    background: var(--fdp-surface-lowest);
    box-shadow: var(--fdp-shadow);
    overflow: hidden;
}

/* Barras de sección (datos, líneas, resumen…): azul claro con el borde izquierdo azul oscuro, el lenguaje del
   TPV, para que las dos pantallas de venta se lean igual. */
.fdp-card-head[b-orzevupr5r] {
    padding: 5px 15px;
    border-block-end: 1px solid #dfe6f5;
    border-inline-start: 4px solid var(--fdp-primary);
    background: #eef3fd;
}

    .fdp-card-head h2[b-orzevupr5r] {
        margin: 0;
        font-size: clamp(.68rem, .62rem + .18vw, .78rem);
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--fdp-primary);
    }

.fdp-card-body[b-orzevupr5r] {
    padding: var(--fdp-pad);
}

/* ─── Rejillas ──────────────────────────────────────────────────────── */
.fdp-grid[b-orzevupr5r] {
    display: grid;
    gap: 5px;
}

.fdp-grid-2[b-orzevupr5r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fdp-grid-3[b-orzevupr5r] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fdp-grid-2 > .fdp-card[b-orzevupr5r] {
    align-self: start;
}

/* ─── Campos ────────────────────────────────────────────────────────── */
.fdp-field[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.fdp-field-full[b-orzevupr5r] {
    grid-column: 1 / -1;
}

.fdp-field label[b-orzevupr5r] {
    display: block;
    margin-block-end: .2rem;
    font-size: .72rem;
    font-weight: 400;
    color: var(--fdp-on-surface-variant);
}

/* «::deep» además del selector directo: el input puede venir de un componente hijo (CampoConBuscador
   hereda la clase del host vía ClaseInput) y el CSS scoped no lo marcaría. Anclado en .fdp-field (de
   esta página) para no sangrar a otros componentes. */
.fdp-input[b-orzevupr5r],
.fdp-field[b-orzevupr5r]  .fdp-input {
    inline-size: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface);
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.35rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .fdp-input:focus[b-orzevupr5r],
    .fdp-field[b-orzevupr5r]  .fdp-input:focus {
        outline: none;
        border-color: var(--fdp-primary);
        box-shadow: 0 0 0 2px rgba(0, 40, 142, .25);
    }

.fdp-readonly[b-orzevupr5r] {
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface-variant);
    cursor: not-allowed;
}

/* ─── Disparador de selector de entidad ─────────────────────────────── */
.fdp-selector[b-orzevupr5r] {
    position: relative;
}

.fdp-selector-trigger[b-orzevupr5r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    text-align: start;
    cursor: pointer;
}

    .fdp-selector-trigger > span:first-child[b-orzevupr5r] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.fdp-selector-placeholder[b-orzevupr5r] {
    color: var(--fdp-outline);
}

.fdp-selector-icon[b-orzevupr5r] {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--fdp-on-surface-variant);
}

/* Botón-icono de búsqueda embebido a la derecha de un campo editable (campo «factura»/Documento). */
.fdp-selector-icon-btn[b-orzevupr5r] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    padding: 0 .4rem;
    border: none;
    background: transparent;
    color: var(--fdp-on-surface-variant);
    cursor: pointer;
}

    .fdp-selector-icon-btn:hover[b-orzevupr5r] {
        color: var(--fdp-primary);
    }

.fdp-selector:has(> .fdp-selector-icon-btn) > .fdp-input[b-orzevupr5r] {
    padding-inline-end: 1.9rem;
}

/* ─── Propuesta consultar/modificar de un documento localizado por número ── */
.fdp-modal-overlay[b-orzevupr5r] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.fdp-modal-card[b-orzevupr5r] {
    inline-size: min(420px, 92vw);
    background: var(--fdp-surface, #fff);
    color: var(--fdp-on-surface);
    border-radius: var(--fdp-radius-md, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.fdp-modal-head[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fdp-outline-variant);
}

.fdp-modal-body[b-orzevupr5r] {
    padding: 1rem 1.1rem;
    font-size: .9rem;
    line-height: 1.4;
}

    .fdp-modal-body p[b-orzevupr5r] {
        margin: 0 0 .5rem;
    }

.fdp-modal-actions[b-orzevupr5r] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--fdp-outline-variant);
}

.fdp-modal-actions .fdp-btn[b-orzevupr5r] {
    padding: .4rem .9rem;
    border-radius: var(--fdp-radius-sm);
    border: 1px solid var(--fdp-outline-variant);
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface);
    font: inherit;
    cursor: pointer;
}

    .fdp-modal-actions .fdp-btn-ghost[b-orzevupr5r] {
        background: transparent;
    }

    .fdp-modal-actions .fdp-btn-primary[b-orzevupr5r] {
        background: var(--fdp-primary);
        border-color: var(--fdp-primary);
        color: #fff;
    }

    /* La ventana se maneja con el teclado: el botón enfocado tiene que verse. */
    .fdp-modal-actions .fdp-btn:focus-visible[b-orzevupr5r] {
        outline: 2px solid var(--fdp-primary);
        outline-offset: 2px;
    }

    .fdp-modal-body .fdp-modal-aviso[b-orzevupr5r] {
        color: #b3261e;
        font-weight: 600;
    }

/* ─── Tabla de líneas ───────────────────────────────────────────────── */
.fdp-table-wrap[b-orzevupr5r] {
    overflow-x: auto;
}

.fdp-table[b-orzevupr5r] {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: start;
}

    .fdp-table thead tr[b-orzevupr5r] {
        background: var(--fdp-surface-low);
    }

    .fdp-table th[b-orzevupr5r] {
        padding: .5rem .75rem;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--fdp-on-surface-variant);
        white-space: nowrap;
    }

    .fdp-table tbody tr[b-orzevupr5r] {
        border-block-start: 1px solid var(--fdp-outline-variant);
        transition: background .15s ease;
    }

        .fdp-table tbody tr:hover[b-orzevupr5r] {
            background: var(--fdp-surface-low);
        }

    .fdp-table td[b-orzevupr5r] {
        padding: .45rem .75rem;
        font-size: .85rem;
    }

.fdp-col-qty[b-orzevupr5r] {
    inline-size: 5rem;
}

.fdp-col-code[b-orzevupr5r] {
    inline-size: 8rem;
}

.fdp-num[b-orzevupr5r] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.fdp-cell-input[b-orzevupr5r] {
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .875rem;
}

    .fdp-cell-input:focus[b-orzevupr5r] {
        outline: none;
    }

.fdp-cell-strong[b-orzevupr5r] {
    font-weight: 600;
}

.fdp-cell-total[b-orzevupr5r] {
    font-weight: 700;
    color: var(--fdp-primary);
}

.fdp-table-foot[b-orzevupr5r] {
    display: flex;
    justify-content: center;
    padding: var(--fdp-pad-head);
    border-block-start: 1px solid var(--fdp-outline-variant);
}

.fdp-add-btn[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border: 0;
    border-radius: var(--fdp-radius-sm);
    background: transparent;
    color: var(--fdp-primary);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .15s ease;
}

    .fdp-add-btn:hover[b-orzevupr5r] {
        background: rgba(0, 40, 142, .08);
    }

    .fdp-add-btn .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1.25rem;
    }

/* ─── Notas ─────────────────────────────────────────────────────────── */
.fdp-textarea[b-orzevupr5r] {
    inline-size: 100%;
    min-block-size: clamp(70px, 8vw, 110px);
    padding: .6rem .75rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface);
    font-family: inherit;
    font-size: .85rem;
    font-style: italic;
    line-height: 1.4rem;
    resize: vertical;
}

    .fdp-textarea:focus[b-orzevupr5r] {
        outline: none;
        border-color: var(--fdp-primary);
        box-shadow: 0 0 0 2px rgba(0, 40, 142, .25);
    }

/* ─── Desglose e importes ───────────────────────────────────────────── */
.fdp-card-fill[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
}

    .fdp-card-fill .fdp-card-body[b-orzevupr5r] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--fdp-gap);
    }

.fdp-muted[b-orzevupr5r] {
    color: var(--fdp-on-surface-variant);
}

/* Lista del desglose de IVA (solo lectura): número de filas variable según los tipos
   presentes en el documento. Sin líneas divisorias; alineación por columna
   (Base Imponible a la izquierda · Tipo IVA centrado · Total IVA a la derecha). */
.fdp-iva-list[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.fdp-iva-list-head[b-orzevupr5r],
.fdp-iva-list-row[b-orzevupr5r] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr);
    align-items: center;
    gap: .75rem;
}

.fdp-iva-list-head[b-orzevupr5r] {
    padding-block: .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fdp-on-surface-variant);
}

.fdp-iva-list-row[b-orzevupr5r] {
    padding-block: .375rem;
    font-size: .875rem;
    color: var(--fdp-on-surface);
}

    /* Alineación por columna (cabecera y valores coherentes). */
    .fdp-iva-list-head span:nth-child(1)[b-orzevupr5r],
    .fdp-iva-list-row span:nth-child(1)[b-orzevupr5r] {
        text-align: start;
        font-variant-numeric: tabular-nums;
    }

    .fdp-iva-list-head span:nth-child(2)[b-orzevupr5r],
    .fdp-iva-list-row span:nth-child(2)[b-orzevupr5r],
    .fdp-iva-list-head span:nth-child(3)[b-orzevupr5r],
    .fdp-iva-list-row span:nth-child(3)[b-orzevupr5r] {
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .fdp-iva-list-head span:nth-child(4)[b-orzevupr5r],
    .fdp-iva-list-row span:nth-child(4)[b-orzevupr5r] {
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

.fdp-summary-lines[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fdp-summary-line[b-orzevupr5r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .875rem;
}

.fdp-total-line[b-orzevupr5r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding-block-start: var(--fdp-pad-head);
    border-block-start: 1px solid var(--fdp-outline-variant);
}

    .fdp-total-line span[b-orzevupr5r] {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--fdp-primary);
    }

    .fdp-total-line strong[b-orzevupr5r] {
        /* Importe grande: escala con el viewport (≈18px → 24px). */
        font-size: clamp(1.15rem, .85rem + 1vw, 1.5rem);
        line-height: 1.3;
        font-weight: 900;
        color: var(--fdp-primary);
    }

@keyframes fdpIn-b-orzevupr5r {
    from {
        opacity: 0;
        transform: translateY(.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
    .fdp-grid-3[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fdp-grid-2[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 42rem) {
    .fdp-page[b-orzevupr5r] {
        padding: 1rem;
    }

    .fdp-grid-3[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fdp-page[b-orzevupr5r],
    .fdp-page *[b-orzevupr5r] {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   FACTURA - DATOS 5 COLUMNAS / RESUMEN 3 COLUMNAS
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

/* Datos de Facturación: 5 columnas */
.fdp-page .fdp-card-body.fdp-grid.fdp-grid-5[b-orzevupr5r] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end !important;
}

/* Resumen Económico: el grid editable va antes del desglose IVA */
.fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown)[b-orzevupr5r] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
}

    /* Notas siempre a ancho completo */
    .fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown) > .fdp-field-full[b-orzevupr5r] {
        grid-column: 1 / -1 !important;
    }

/* Mantiene el resumen económico con campos + desglose a la derecha */
.fdp-page .fdp-card:has(.fdp-breakdown) > .fdp-card-body > .fdp-grid.fdp-grid-2[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .45fr) !important;
    align-items: start !important;
}

/* Tablet */
@media (max-width: 64rem) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-grid-5[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown)[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fdp-page .fdp-card:has(.fdp-breakdown) > .fdp-card-body > .fdp-grid.fdp-grid-2[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet estrecha */
@media (max-width: 48rem) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-grid-5[b-orzevupr5r],
    .fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown)[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Móvil */
@media (max-width: 36rem) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-grid-5[b-orzevupr5r],
    .fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown)[b-orzevupr5r] {
        grid-template-columns: 1fr !important;
    }

        .fdp-page .fdp-card-body.fdp-grid.fdp-grid-5 > .fdp-field[b-orzevupr5r],
        .fdp-page .fdp-grid.fdp-grid-5:has(+ .fdp-breakdown) > .fdp-field[b-orzevupr5r] {
            grid-column: 1 / -1 !important;
        }
}

/* ==========================================================
   FDP - BOTÓN COLLAPSE MINIMALISTA A LA DERECHA
   Mantener este bloque al FINAL del archivo.
   ========================================================== */

.fdp-page .fdp-card-head.fdp-card-head-collapsible[b-orzevupr5r] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    inline-size: 100% !important;
}

    .fdp-page .fdp-card-head.fdp-card-head-collapsible > h2[b-orzevupr5r] {
        margin: 0 !important;
        min-inline-size: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }


        /* Resumen en el encabezado comprimido. El h2 lleva «flex: 1 1 auto» y se comería el hueco, así que
   cuando le sigue un resumen se le quita el crecimiento y es el resumen quien ocupa (y recorta). */
        .fdp-page .fdp-card-head.fdp-card-head-collapsible > h2:has(+ .fdp-head-resumen)[b-orzevupr5r] {
            flex: 0 0 auto !important;
        }

.fdp-head-resumen[b-orzevupr5r] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .35rem;
    min-inline-size: 0;
    overflow: hidden;
}

.fdp-head-chip[b-orzevupr5r] {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    min-inline-size: 0;
    padding: .1rem .45rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 999px;
    background: var(--fdp-surface);
    white-space: nowrap;
}

.fdp-head-chip-k[b-orzevupr5r] {
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fdp-on-surface-variant);
}

.fdp-head-chip-v[b-orzevupr5r] {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .75rem;
    font-weight: 600;
    color: var(--fdp-on-surface);
}

/* Botón circular tipo imagen */
.fdp-page .fdp-collapse-toggle[b-orzevupr5r] {
    margin-inline-start: auto !important;
    inline-size: 1.65rem !important;
    min-inline-size: 1.65rem !important;
    max-inline-size: 1.65rem !important;
    block-size: 1.65rem !important;
    min-block-size: 1.65rem !important;
    max-block-size: 1.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid #dce3ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

    .fdp-page .fdp-collapse-toggle:hover[b-orzevupr5r] {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: var(--fdp-primary) !important;
        box-shadow: 0 2px 5px rgba(15, 23, 42, .08) !important;
        transform: translateY(-1px) !important;
    }

    .fdp-page .fdp-collapse-toggle:active[b-orzevupr5r] {
        transform: translateY(0) scale(.96) !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    }

    .fdp-page .fdp-collapse-toggle:focus-visible[b-orzevupr5r] {
        outline: none !important;
        border-color: #b6c4d6 !important;
        box-shadow: 0 0 0 3px rgba(0, 40, 142, .10), 0 2px 5px rgba(15, 23, 42, .08) !important;
    }

    /* Icono centrado, por si usas Material Symbols */
    .fdp-page .fdp-collapse-toggle .material-symbols-outlined[b-orzevupr5r] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }


.fdp-grid-4[b-orzevupr5r] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fdp-grid-5[b-orzevupr5r] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1400px) {
    .fdp-grid-5[b-orzevupr5r] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fdp-grid-4[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 1100px) {
    .fdp-grid-5[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fdp-grid-4[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fdp-grid-6[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


}

@media (max-width: 800px) {
    .fdp-grid-5[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fdp-grid-5[b-orzevupr5r],
    .fdp-grid-4[b-orzevupr5r],
    .fdp-grid-6[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }
}

/* ── Barra de acciones de la cabecera de "Líneas del documento" ── */
.ff-mini-actions[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Contador "N línea(s)" → chip informativo */
[b-orzevupr5r] .e-btn.ff-lines-count,
[b-orzevupr5r] .e-btn.ff-lines-count:disabled {
    inline-size: auto;
    min-inline-size: 0;
    padding: .3rem .7rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 999rem;
    background: var(--fdp-surface-container, #f4f5f9);
    color: var(--fdp-on-surface-variant, #555766);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: none;
    opacity: 1;
    text-transform: none;
}

/* Selector de modo de entrada (Normal / TPV / Completa) */
.ff-mode-pick[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 8px;
    background: var(--fdp-surface, #ffffff);
    color: var(--fdp-on-surface-variant, #555766);
    font-size: .78rem;
    transition: border-color .15s ease, background .15s ease;
}

    .ff-mode-pick:hover[b-orzevupr5r],
    .ff-mode-pick:focus-within[b-orzevupr5r] {
        border-color: var(--fdp-primary, #2f6fed);
        background: var(--fdp-surface-low, #fafbfd);
    }

    .ff-mode-pick .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1.05rem;
        line-height: 1;
        color: var(--fdp-on-surface-variant, #555766);
    }

.ff-mode-select[b-orzevupr5r] {
    border: none;
    background: transparent;
    color: var(--fdp-on-surface, #1a1b22);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

/* ── Secuencia de entrada: iconos de estado en vez de desplegable ──────────────────────────────
   El desplegable gastaba una línea entera de la tarjeta para repetir su propio texto («Normal:
   cantidad → producto»). Ahora el estado se VE —el modo activo va resaltado— y el detalle de cada
   modo vive en su tooltip, que es donde no ocupa espacio. */
.ff-mode-icons[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 8px;
    background: var(--fdp-surface, #ffffff);
}

.ff-mode-icon[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--fdp-on-surface-variant, #555766);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ff-mode-icon:hover[b-orzevupr5r] {
        background: var(--fdp-surface-low, #f1f3f8);
        color: var(--fdp-on-surface, #1a1b22);
    }

    /* El modo ACTIVO: el estado tiene que leerse de un vistazo, sin abrir nada. */
    .ff-mode-icon.is-active[b-orzevupr5r] {
        background: var(--fdp-primary, #00288e);
        color: #ffffff;
    }

    .ff-mode-icon .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1.05rem;
        line-height: 1;
    }

/* ── Barra de acciones de la cabecera ── */
/* La barra de acciones va SIEMPRE en una sola línea (nowrap). Con `wrap`, el selector de divisa —o
   cualquier control que se añada— empujaba el resto a una segunda fila y se comía alto vertical, que
   en esta pantalla es el recurso escaso (el modo compacto existe justo para que no haya scroll).
   Si algún día no cupiera, lo que debe ceder es el TÍTULO (ya lo hace: command-bar-host-collapsed),
   no la barra partiéndose. */
.fdp-actions-bar[b-orzevupr5r] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    margin-inline-start: auto;
    min-inline-size: 0;
}

/* Cuando no cabe (lo decide js/barraAcciones.js midiendo, no un ancho fijo: depende del título y de qué
   botones haya), primero SOLO ICONOS: se esconde el texto de botones, casillas y distintivos, y cada uno
   conserva su nombre completo en el tooltip.
   Se esconde a la VISTA, no del árbol de accesibilidad (sin display:none): el botón sigue llamándose
   «Emitir» para un lector de pantalla y para quien lo busca por su nombre, y no ocupa sitio. */
.fdp-actions-bar.barra-acciones--iconos[b-orzevupr5r] {
    gap: .3rem;
}

    .fdp-actions-bar.barra-acciones--iconos[b-orzevupr5r]  .fdp-btn > span:not(.material-symbols-outlined),
    .fdp-actions-bar.barra-acciones--iconos .ff-print-pref > span[b-orzevupr5r] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .fdp-actions-bar.barra-acciones--iconos[b-orzevupr5r]  .e-btn.fdp-btn,
    .fdp-actions-bar.barra-acciones--iconos[b-orzevupr5r]  a.fdp-btn {
        padding: 0 .55rem;
    }

/* Y si ni así cabe, la barra se parte en más de una línea. Cuesta alto, pero un botón fuera de la pantalla
   es un botón que no existe: no se puede grabar, emitir ni borrar. */
.fdp-actions-bar.barra-acciones--envuelve[b-orzevupr5r] {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .35rem;
}

/* Divisa + cambio + consulta: un grupo indivisible dentro de la barra, con el mismo alto que los
   botones vecinos. No envuelve por dentro ni se separa de su campo de cambio. */
.fdp-divisa-group[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    gap: .35rem;
}

/* El botón del selector adopta el aspecto de los demás controles de la barra (borde, radio y alto de
   .fdp-btn): antes heredaba solo el ancho y desentonaba con el resto de la pantalla. */
[b-orzevupr5r] .fdp-actions-bar .fdp-currency {
    block-size: 32px;
    padding-inline: .5rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fdp-on-surface, #1f2430);
}

    [b-orzevupr5r] .fdp-actions-bar .fdp-currency:hover {
        border-color: var(--fdp-primary, #00288e);
    }

[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 2.25rem;
    padding: 0 .9rem;
    border-radius: 8px;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    background: var(--fdp-surface, #ffffff);
    color: var(--fdp-on-surface, #1a1b22);
    font-size: .8rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn .material-symbols-outlined {
        font-size: 1.1rem;
        line-height: 1;
    }

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn:hover {
        background: var(--fdp-surface-low, #fafbfd);
        border-color: var(--fdp-on-surface-variant, #9aa0b0);
    }

/* Puente N9 «Ver contabilización»: es un ENLACE (navega, no manda una orden), así que no lleva la
   clase .e-btn de Syncfusion y necesita su propia regla para verse igual que sus vecinos. */
[b-orzevupr5r] .fdp-actions-bar a.fdp-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 2.25rem;
    padding: 0 .9rem;
    border-radius: 8px;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    background: var(--fdp-surface, #ffffff);
    color: var(--fdp-on-surface, #1a1b22);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    [b-orzevupr5r] .fdp-actions-bar a.fdp-btn .material-symbols-outlined {
        font-size: 1.1rem;
        line-height: 1;
    }

    [b-orzevupr5r] .fdp-actions-bar a.fdp-btn:hover {
        background: var(--fdp-surface-low, #fafbfd);
        border-color: var(--fdp-on-surface-variant, #9aa0b0);
    }

/* Primario: Guardar cambios */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-primary,
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-primary:hover {
    background: var(--fdp-primary, #2f6fed);
    border-color: var(--fdp-primary, #2f6fed);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-primary:hover {
        filter: brightness(0.95);
    }

/* Cancelar: peligro con contorno */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-danger {
    color: var(--fdp-danger, #d33a3a);
    border-color: color-mix(in srgb, var(--fdp-danger, #d33a3a) 40%, #e4e5ec);
    background: #ffffff;
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-danger:hover {
        background: color-mix(in srgb, var(--fdp-danger, #d33a3a) 8%, #ffffff);
        border-color: var(--fdp-danger, #d33a3a);
        color: var(--fdp-danger, #d33a3a);
    }

/* Emitir (X5): el acto que da validez fiscal al borrador. Verde sólido para distinguirlo de «Grabar»
   (azul primario): son dos actos distintos y confundirlos tiene coste legal. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-emitir,
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-emitir:hover {
    background: var(--fdp-success, #1f9d55);
    border-color: var(--fdp-success, #1f9d55);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn-emitir:hover {
        filter: brightness(0.95);
    }

/* Imprimir: icono + texto, mismas métricas que el resto de la barra */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-icon-btn {
    justify-content: center;
    white-space: nowrap;
}

/* Toggle de modo «Compacto»: botón cuadrado, solo icono. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-toggle-compacto {
    padding: 0;
    inline-size: 2.25rem;
    min-inline-size: 2.25rem;
}

    /* Activo: resaltado con el color primario para diferenciarlo del modo normal. */
    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-toggle-compacto.is-active,
    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-toggle-compacto.is-active:hover {
        background: color-mix(in srgb, var(--fdp-primary, #00288e) 10%, #ffffff);
        border-color: var(--fdp-primary, #00288e);
        color: var(--fdp-primary, #00288e);
    }

/* El ancho del selector de moneda ya no se fija aquí: en la barra va en modo COMPACTO (bandera +
   código, ancho por contenido) y su aspecto lo da la regla de .fdp-actions-bar .fdp-currency de más
   abajo. Un min-inline-size de 6,5rem era lo que lo hacía tan ancho como para partir la barra.

   Campo del CAMBIO del documento (multidivisa F1): solo visible con divisa distinta de la base.
   El icono de al lado consulta el cambio actual (orden ConsultarCambioActual). */
[b-orzevupr5r] .fdp-cambio-input {
    inline-size: 4.75rem;
    block-size: 32px;
    padding-inline: .4rem;
    text-align: right;
}

/* Contravalor en moneda base bajo el Total Factura (F2): solo con divisa distinta de la base. */
.fdp-contravalor[b-orzevupr5r] {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    color: #5a5f6a;
}


/* Los estilos de las CELDAS del grid de líneas (ff-cell-input, ff-codigo-cell, la lupa del buscador,
   ff-cell-ro, ff-heredada-ico…) se movieron a RejillaLineasDocumento.razor.css: son de la rejilla, que
   es la misma en facturación, TPV y compras. Aquí no aplicaban al TPV —el CSS aislado de esta página no
   alcanza a un componente hospedado por otra— y la lupa del código no se pintaba allí. Lo que sigue
   estando en este archivo es lo que mezcla clases de ESTA página (`.ff-unified-page …`,
   `.ff-lines-datagrid …`): decoración del contenedor, no de la rejilla. */

/* Chips de los documentos ORIGEN cargados en la cabecera (una factura puede agrupar varios albaranes). */
.ff-origenes[b-orzevupr5r] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-block-start: .25rem;
}

.ff-origen-chip[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .1rem .35rem;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--fdp-info-container, #eef4ff);
    border: 1px solid var(--fdp-primary, #2f6fed);
    color: var(--fdp-primary, #2f6fed);
}

.ff-origen-ico[b-orzevupr5r] {
    font-size: 13px;
    line-height: 1;
}

.ff-origen-quitar[b-orzevupr5r] {
    border: none;
    background: transparent;
    padding: 0 .1rem;
    cursor: pointer;
    color: inherit;
    font-size: .9rem;
    line-height: 1;
}

    .ff-origen-quitar:hover[b-orzevupr5r] {
        color: var(--fdp-error, #b3261e);
    }

/* Franja de avisos del documento (validación / impresión / existencias / trazabilidad) — portado de local. */
.ff-warning-strip[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: .35rem 0;
    padding: .5rem .75rem;
    background: var(--fdp-info-container, #eef4ff);
    border: 1px solid var(--fdp-primary, #2f6fed);
    border-radius: 6px;
    font-size: .85rem;
    color: var(--fdp-on-surface, #1a1b22);
}

    .ff-warning-strip > div[b-orzevupr5r] {
        display: flex;
        align-items: center;
        gap: .35rem;
    }

    .ff-warning-strip .material-symbols-outlined[b-orzevupr5r] {
        font-size: 18px;
    }

/* X de cerrar el aviso, en su esquina: el aviso se va sin grabar ni recargar. */
.ff-warning-strip[b-orzevupr5r] {
    position: relative;
    padding-inline-end: 2.4rem;
}

.ff-warning-cerrar[b-orzevupr5r] {
    position: absolute;
    inset-block-start: .3rem;
    inset-inline-end: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.8rem;
    block-size: 1.8rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fdp-on-surface-variant, #555766);
    cursor: pointer;
}

    .ff-warning-cerrar:hover[b-orzevupr5r],
    .ff-warning-cerrar:focus-visible[b-orzevupr5r] {
        background: color-mix(in srgb, var(--fdp-primary, #2f6fed) 10%, transparent);
        outline: none;
    }

/* Toggle «impresión directa» en la cabecera (preferencia vista previa ↔ directa). */
.ff-print-pref[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--fdp-on-surface-variant, #6b7280);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .ff-print-pref input[b-orzevupr5r] {
        cursor: pointer;
    }


/* ── Cabecera: título + estado ── */
.fdp-title-block[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

    .fdp-title-block h1[b-orzevupr5r] {
        margin: 0;
        font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem);
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--fdp-on-surface, #1a1b22);
    }

.fdp-title-number[b-orzevupr5r] {
    color: var(--fdp-primary, #2f6fed);
    font-weight: 800;
    margin-inline-start: .25rem;
}

/* Chip de estado (base) */
.ff-status-green[b-orzevupr5r],
.ff-status-blue[b-orzevupr5r],
.ff-status-orange[b-orzevupr5r],
.ff-status-red[b-orzevupr5r],
.ff-status-neutral[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    padding: .2rem .62rem;
    border-radius: 999rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Colores por estado */
.ff-status-green[b-orzevupr5r] {
    background: #e6f6ec;
    color: #1d7a3f;
    border-color: #bfe6cd;
}

.ff-status-blue[b-orzevupr5r] {
    background: #e8f0fe;
    color: #1a56d6;
    border-color: #c7dcfb;
}

.ff-status-orange[b-orzevupr5r] {
    background: #fff3e0;
    color: #b5650b;
    border-color: #ffe0b2;
}

.ff-status-red[b-orzevupr5r] {
    background: #fdecec;
    color: #c62828;
    border-color: #f7c9c9;
}

.ff-status-neutral[b-orzevupr5r] {
    background: #eef0f4;
    color: #555766;
    border-color: #e0e3ea;
}


/* ── Pestañas (General / Económicos / Otros datos) ── */
[b-orzevupr5r] .fdp-tabs {
    display: flex;
    gap: .15rem;
    border-block-end: 1px solid var(--fdp-outline-variant, #e4e5ec);
    margin-block-end: .75rem;
}

.fdp-tab[b-orzevupr5r] {
    appearance: none;
    border: none;
    background: transparent;
    padding: .55rem .95rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--fdp-on-surface-variant, #555766);
    cursor: pointer;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

    .fdp-tab:hover[b-orzevupr5r] {
        color: var(--fdp-on-surface, #1a1b22);
        background: var(--fdp-surface-low, #fafbfd);
    }

.fdp-tab-active[b-orzevupr5r] {
    color: var(--fdp-primary, #2f6fed);
    border-block-end-color: var(--fdp-primary, #2f6fed);
}

/* Caja del desglose de importes (columna derecha del Resumen) */
.fdp-breakdown[b-orzevupr5r] {
    align-self: start;
    margin-inline-start: 1rem; /* distancia respecto a los campos */
    padding: 1rem 1.15rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 10px;
    background: var(--fdp-surface-low, #fafbfd);
}

.fdp-total-line strong[b-orzevupr5r] {
    font-size: 1.1rem;
}


/* Envoltorio de la rejilla. Existe SOLO para poder ocultarla sin desmontarla al cambiar de pestaña
   (si se desmonta, el cuerpo del documento se pierde de la pantalla y los importes se duplican al
   reescribirlo). `display: contents` lo hace invisible al layout: la tarjeta de líneas sigue siendo
   hija efectiva de .fdp-content y las reglas de altura y de .fdp-page-fit siguen casando igual.
   Con [hidden] sí toma caja para desaparecer del todo — `contents` ignoraría el `display:none`. */
.ff-lines-host[b-orzevupr5r] {
    display: contents;
}

.ff-lines-host[hidden][b-orzevupr5r] {
    display: none;
}

/* Tarjeta de líneas: altura relativa al viewport (el grid hace scroll interno).
   Se agranda cuando Datos de Facturación y Resumen Económico están colapsados. */
.fdp-lines-card > .fdp-card-body[b-orzevupr5r] {
    block-size: 52dvh;
    overflow: hidden;
    transition: block-size .2s ease;
}

.fdp-lines-card.fdp-lines-expanded > .fdp-card-body[b-orzevupr5r] {
    block-size: 76dvh;
}

/* Cabeceras con el botón de colapsar a la izquierda del título */
.fdp-card-head-collapsible.fdp-head-toggle-left[b-orzevupr5r] {
    justify-content: flex-start;
    gap: .5rem;
}

.fdp-grid-8[b-orzevupr5r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .fdp-grid-8 > .fdp-field[b-orzevupr5r] {
        flex: 1 1 6.5rem;
        min-inline-size: 5.5rem;
    }

    .fdp-grid-8 > .ff-checkbox-line[b-orzevupr5r] {
        flex: 0 0 auto; /* toma su ancho natural, no 1/8 */
        flex-wrap: nowrap;
        white-space: nowrap; /* "Colector de datos" no se parte */
    }

.fdp-grid-6[b-orzevupr5r] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end; /* el checkbox se alinea con la base de los inputs */
}

.ff-eco-split[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: stretch; /* ambas tarjetas toman el alto de la más alta */
}

@media (max-width: 1100px) {
    .ff-eco-split[b-orzevupr5r] {
        grid-template-columns: 1fr; /* apiladas en pantallas estrechas */
    }
}

/* ─── Vencimientos: la tabla (TablaPaginada) ocupa la celda izquierda de la fila
   económica sin tarjeta que la envuelva. Su aspecto y su alto los resuelve el CSS
   del componente: como celda del grid se estira al alto de la tarjeta de IVA por
   el align-items:stretch de .ff-eco-split. Aquí no hace falta nada. */


/* ─── Pestaña General: las tres tarjetas encajan en el alto de pantalla ───
   La página ocupa el alto de su contenedor; Datos de Facturación y Resumen
   Económico toman su alto natural y Líneas del documento se queda con el
   resto. Al colapsar los otros dos, Líneas crece; nada se sale del viewport
   (el scroll vive dentro del grid). */
.fdp-page.fdp-page-fit[b-orzevupr5r] {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fdp-page-fit .fdp-content[b-orzevupr5r] {
    flex: 1 1 auto;
    min-block-size: 0; /* imprescindible: deja que los hijos encojan bajo su contenido */
    overflow: hidden;
}

    /* Datos de Facturación, Rectificativa y Resumen Económico: alto natural, no se estiran. */
    .fdp-page-fit .fdp-content > .fdp-card[b-orzevupr5r] {
        flex: 0 0 auto;
    }

    /* Líneas del documento: ocupa todo el espacio sobrante. */
    .fdp-page-fit .fdp-content > .fdp-lines-card[b-orzevupr5r],
    .fdp-page-fit .fdp-content > .ff-lines-host > .fdp-lines-card[b-orzevupr5r] {
        flex: 1 1 auto;
        min-block-size: 0;
        display: flex;
        flex-direction: column;
    }

/* Anula el alto fijo (52dvh/76dvh): aquí manda el flex y el SfGrid hace scroll
   interno. Los dos selectores cubren el estado colapsado y el expandido. */
.fdp-page-fit .fdp-lines-card > .fdp-card-body[b-orzevupr5r],
.fdp-page-fit .fdp-lines-card.fdp-lines-expanded > .fdp-card-body[b-orzevupr5r] {
    block-size: auto;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
}

/* ─── Pestaña General: encajar en pantalla SOLO en escritorio ─────────────
   En anchos < 1100px NO se aplica: la página vuelve al flujo normal y
   main-body hace scroll (imprescindible en responsive para poder trabajar).
   En escritorio, Datos de Facturación y Resumen Económico toman su alto
   natural y Líneas del documento se queda con el resto sin salirse del alto. */
@media (min-width: 1100px) {
    .fdp-page.fdp-page-fit[b-orzevupr5r] {
        block-size: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .fdp-page-fit .fdp-content[b-orzevupr5r] {
        flex: 1 1 auto;
        min-block-size: 0; /* deja que los hijos encojan bajo su contenido */
        overflow: hidden;
    }

        /* Datos de Facturación, Rectificativa y Resumen Económico: alto natural. */
        .fdp-page-fit .fdp-content > .fdp-card[b-orzevupr5r] {
            flex: 0 0 auto;
        }

        /* Líneas del documento: ocupa todo el espacio sobrante. */
        .fdp-page-fit .fdp-content > .fdp-lines-card[b-orzevupr5r],
        .fdp-page-fit .fdp-content > .ff-lines-host > .fdp-lines-card[b-orzevupr5r] {
            flex: 1 1 auto;
            min-block-size: 0;
            display: flex;
            flex-direction: column;
        }

    /* Anula el alto fijo (52dvh/76dvh): aquí manda el flex y el grid hace
       scroll interno. Cubre el estado colapsado y el expandido. */
    .fdp-page-fit .fdp-lines-card > .fdp-card-body[b-orzevupr5r],
    .fdp-page-fit .fdp-lines-card.fdp-lines-expanded > .fdp-card-body[b-orzevupr5r] {
        block-size: auto;
        flex: 1 1 auto;
        min-block-size: 0;
        overflow: hidden;
    }
}


.fdp-grid-7[b-orzevupr5r] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1400px) {
    .fdp-grid-7[b-orzevupr5r] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .fdp-grid-7[b-orzevupr5r] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fdp-grid-7[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }
}

/* Datos contables: cuatro campos, dos filas en pantalla completa */
[b-orzevupr5r] .ff-contable-grid {
    grid-template-columns: 1.4fr 1fr;
}

/* Caja/Banco: el tipo y el campo con lupa son un solo control */
[b-orzevupr5r] .ff-cb-group {
    display: flex;
    align-items: stretch;
    gap: .35rem;
}

    [b-orzevupr5r] .ff-cb-group .ff-cb-tipo {
        flex: 0 0 6.5rem;
    }

    [b-orzevupr5r] .ff-cb-group .ccb-selector {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

@media (max-width: 1100px) {
    [b-orzevupr5r] .ff-contable-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Los dos checkbox del IVA: fila propia, centrados y juntos */
[b-orzevupr5r] .ff-iva-checks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}


/* Otros datos: Datos específicos junto a Direcciones de envío, mitad y mitad */
.ff-otros-split[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

/* Datos específicos: un campo por fila, a todo el ancho de la tarjeta */
.ff-especificos-grid[b-orzevupr5r] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .ff-otros-split[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }
}


/* Direcciones de envío: cabecera con navegación entre las del cliente */
.ff-dir-head[b-orzevupr5r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ff-dir-nav[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ff-dir-count[b-orzevupr5r] {
    min-inline-size: 6rem;
    text-align: center;
    font-size: .8rem;
    color: var(--fdp-on-surface-variant);
}

.ff-dir-btn[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 6px;
    background: var(--fdp-surface, #fff);
    cursor: pointer;
}

    .ff-dir-btn:disabled[b-orzevupr5r] {
        opacity: .4;
        cursor: default;
    }


/* Datos específicos: dos columnas; el checkbox centrado en su celda */
.ff-especificos-grid[b-orzevupr5r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .ff-especificos-grid .ff-checkbox-line[b-orzevupr5r] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Pie del Resumen Económico: catorce campos + Notas en dos filas exactas */
.ff-pie-grid[b-orzevupr5r] {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: start;
}

/* Notas cierra la segunda fila ocupando las dos últimas columnas */
.ff-pie-notas[b-orzevupr5r] {
    grid-column: span 2;
}

@media (max-width: 1500px) {
    .ff-pie-grid[b-orzevupr5r] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ff-pie-notas[b-orzevupr5r] {
        grid-column: span 4;
    }
}

@media (max-width: 900px) {
    .ff-pie-grid[b-orzevupr5r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-pie-notas[b-orzevupr5r] {
        grid-column: span 2;
    }
}

/* Datos | Totales, al 50 %. */
.ff-half-split[b-orzevupr5r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* Totales: 13 campos en rejilla, con Notas ocupando la fila entera al final. */
.ff-totales-grid[b-orzevupr5r] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

    .ff-totales-grid > .ff-totales-notas[b-orzevupr5r] {
        grid-column: 1 / -1;
    }

/* Consultar / modificar: un solo botón con un lápiz. Consultando: lápiz tachado y en gris. Modificando:
   lápiz normal y en el color activo de la casa (el mismo que el modo compacto encendido). */
/* Es un SfButton como los demás de la barra (forma, borde y tamaño los da .fdp-btn); aquí solo el color. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion {
    color: #5f6368;
}

/* Modificando: lleno, en el color de la casa, para que se vea de lejos que el documento se puede cambiar.
   !important porque los estados de Syncfusion (.e-btn:focus, :active) repintan el fondo al pulsar. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion.is-active,
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion.is-active:hover,
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion.is-active:focus,
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion.is-active:active {
    background: var(--fdp-primary, #00288e) !important;
    border-color: var(--fdp-primary, #00288e) !important;
    color: #ffffff !important;
}

[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-modo-edicion.is-active .material-symbols-outlined {
    color: #ffffff !important;
}

/* Situación de la ORDEN DE FABRICACIÓN (OF3): chip en la barra de acciones, junto a su botonera. Los
   colores son los de los chips de estado (ff-status-*); aquí solo la forma. */
.ff-orden-situacion[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    user-select: none;
}



/* ==========================================================
   CABECERA DEL DOCUMENTO EN DOS FILAS (E8)
   Mantener este bloque al FINAL del archivo (gana por orden).
   ==========================================================

   Qué estaba mal: con `repeat(5, 1fr)` los diez campos de la cabecera recibían el
   MISMO ancho, así que un código de 6 caracteres ocupaba lo mismo que el nombre de
   una empresa — y el nombre no se veía en ninguna parte salvo en el tooltip. El
   legacy, con tres filas y menos sitio, sí lo enseñaba («000001 | Nombre»).

   Cómo se arregla: el ancho lo fija el CONTENIDO REAL. Un código son 10-12
   caracteres y no necesita más; lo que sobraba se lo lleva el NOMBRE de la entidad,
   que es el dato que hay que LEER para saber a quién se está facturando.

   Las DOS filas cierran exactas, sin huecos ni un campo empujado a una tercera
   (el espacio vertical es del detalle, no de la cabecera):

     8 columnas (el caso normal, portátil de 1180-1400 px):
       fila 1 = 1+1+1+3+1+1 = 8   documento · fecha · TERCERO · nombre · tipo · referencia
       fila 2 = 1+2+1+1+2   = 7   almacén · nombre · agente · tarifa · formato
                                  (+ origen o rectificada cuando el tipo los pinta)

     16 columnas (monitor ancho, ≥1400 px): las mismas proporciones al doble de
       resolución, para que el nombre gane el espacio extra en vez de repartirlo
       a partes iguales entre campos que no lo necesitan.

   `fdp-fila2` fuerza el arranque de la segunda fila: los campos opcionales de la
   primera (el tipo, que solo se pinta en documentos fiscales) pueden faltar, y sin
   esto la segunda subiría a rellenar el hueco y la cabecera perdería su lectura por
   frecuencia de uso. */

/* ── Caso base: 8 columnas ─────────────────────────────────────────────────── */
.fdp-page .fdp-card-body.fdp-grid.fdp-cab-grid[b-orzevupr5r] {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
}

/* Campo de CÓDIGO: 10-12 caracteres. No necesita más. */
.fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r],
/* Texto corto que no es un código (referencia / nº de factura del proveedor). */
.fdp-page .fdp-cab-grid > .fdp-col-medio[b-orzevupr5r] {
    grid-column: span 1;
}

/* NOMBRE del almacén y desplegables (formato, rectificada). */
.fdp-page .fdp-cab-grid > .fdp-col-nombre[b-orzevupr5r],
.fdp-page .fdp-cab-grid > .fdp-col-ancho[b-orzevupr5r] {
    grid-column: span 2;
}

/* NOMBRE del tercero: el más ancho de la cabecera. Es el que de verdad se lee
   (razones sociales largas) y el que el legacy enseñaba al lado del código. */
.fdp-page .fdp-cab-grid > .fdp-col-nombre-ancho[b-orzevupr5r] {
    grid-column: span 3;
}

.fdp-page .fdp-cab-grid > .fdp-fila2[b-orzevupr5r] {
    grid-column-start: 1;
}

/* ── Monitor ancho: 16 columnas, mismas proporciones ───────────────────────── */
@media (min-width: 1400px) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-cab-grid[b-orzevupr5r] {
        grid-template-columns: repeat(16, minmax(0, 1fr));
    }

        .fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r] {
            grid-column: span 2;
        }

        .fdp-page .fdp-cab-grid > .fdp-col-medio[b-orzevupr5r] {
            grid-column: span 2;
        }

        .fdp-page .fdp-cab-grid > .fdp-col-nombre[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-col-ancho[b-orzevupr5r] {
            grid-column: span 4;
        }

        .fdp-page .fdp-cab-grid > .fdp-col-nombre-ancho[b-orzevupr5r] {
            grid-column: span 6;
        }
}

/* ── Tablet: 4 columnas. El nombre sigue doblando a su código. ─────────────── */
@media (max-width: 1100px) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-cab-grid[b-orzevupr5r] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

        .fdp-page .fdp-cab-grid > .fdp-col-nombre-ancho[b-orzevupr5r] {
            grid-column: span 2;
        }
}

/* ── Móvil: una columna, y el corte de fila deja de tener sentido. ─────────── */
@media (max-width: 560px) {
    .fdp-page .fdp-card-body.fdp-grid.fdp-cab-grid[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

        .fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-col-medio[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-col-nombre[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-col-nombre-ancho[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-col-ancho[b-orzevupr5r],
        .fdp-page .fdp-cab-grid > .fdp-fila2[b-orzevupr5r] {
            grid-column: 1 / -1;
        }
}

/* ECO de solo lectura (nombre del tercero, nombre del almacén, tipo de factura): se
   LEE, no se teclea. Se distingue del campo editable sin gritar —mismo alto y misma
   línea base, fondo plano, sin borde— y queda fuera del recorrido por teclado
   (tabindex -1 en el marcado). */
.fdp-page .fdp-cab-grid .fdp-input.fdp-eco[b-orzevupr5r] {
    border-color: transparent;
    background: var(--fdp-surface-variant, #f1f3f4);
    color: var(--fdp-on-surface-variant);
    cursor: default;
    text-overflow: ellipsis;
}


/* Campos de CÓDIGO de la cabecera: el requisito es que quepan 10-12 caracteres, y en
   una columna estrecha lo que se los come no es el ancho sino el ACOLCHADO. Aquí se
   recupera ese espacio sin robárselo al nombre de al lado: acolchado lateral mínimo,
   lupa más pequeña y pegada al borde, y cifras tabulares (todas del mismo ancho, que
   es lo que son casi todos los códigos). El alto y la tipografía no cambian: la fila
   sigue midiendo lo mismo. */
.fdp-page .fdp-cab-grid > .fdp-col-codigo .fdp-input[b-orzevupr5r],
.fdp-page .fdp-cab-grid > .fdp-col-medio .fdp-input[b-orzevupr5r] {
    padding-inline: .35rem;
    font-variant-numeric: tabular-nums;
}

.fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r]  .ccb-input-con-boton,
.fdp-page .fdp-cab-grid > .fdp-col-codigo .fdp-selector > .fdp-input[b-orzevupr5r] {
    padding-inline-end: 1.35rem;
}

.fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r]  .ccb-icon-btn,
.fdp-page .fdp-cab-grid > .fdp-col-codigo .fdp-selector-icon-btn[b-orzevupr5r] {
    padding: 0 .15rem;
}

.fdp-page .fdp-cab-grid > .fdp-col-codigo[b-orzevupr5r]  .ccb-icon,
.fdp-page .fdp-cab-grid > .fdp-col-codigo .fdp-selector-icon[b-orzevupr5r] {
    font-size: 1.05rem;
}

/* ── Pestaña «Servicio técnico» del parte (plan de servicio técnico, ST2) ──────────────────────────
   Chip de estado y botonera en la cabecera de la tarjeta; casillas en una línea; textos largos. */

.ff-st-head[b-orzevupr5r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.ff-st-botonera[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.ff-st-casillas[b-orzevupr5r] {
    grid-column: 1 / -1;
    gap: 1.2rem;
}

.ff-st-casilla[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .ff-st-casilla input[type="checkbox"][b-orzevupr5r] {
        inline-size: .95rem;
        block-size: .95rem;
        accent-color: #2563eb;
        cursor: pointer;
    }

.ff-st-textarea[b-orzevupr5r] {
    inline-size: 100%;
    min-block-size: 6.5rem;
    resize: vertical;
    line-height: 1.4;
    padding-block: .45rem;
}

.ff-st-observaciones[b-orzevupr5r] {
    margin-block-start: .6rem;
}

/* ST7 — parecidos a la avería (soluciones guardadas y partes resueltos). */
.ff-st-parecidos-nota[b-orzevupr5r] {
    font-size: .78rem;
    color: #6b7280;
}

.ff-st-parecidos[b-orzevupr5r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .6rem;
}

.ff-st-parecido[b-orzevupr5r] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .6rem .75rem;
    border: .0625rem solid #e5e7eb;
    border-radius: .7rem;
    background: #fafafa;
}

    .ff-st-parecido.mismo-cliente[b-orzevupr5r] {
        border-color: #bfdbfe;
        background: #eff6ff;
    }

.ff-st-parecido-cab[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: #1f2937;
}

    .ff-st-parecido-cab .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1rem;
        color: #64748b;
    }

.ff-st-parecido-num[b-orzevupr5r],
.ff-st-parecido-tag[b-orzevupr5r] {
    padding: .1rem .45rem;
    border-radius: 999rem;
    background: #e2e8f0;
    color: #334155;
    font-size: .7rem;
    font-weight: 750;
}

.ff-st-parecido-texto[b-orzevupr5r] {
    font-size: .8rem;
    color: #374151;
    white-space: pre-wrap;
    line-height: 1.35;
    max-block-size: 7rem;
    overflow: auto;
}

.ff-st-parecido-btn[b-orzevupr5r] {
    align-self: flex-start;
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   E9 — ERGONOMÍA VERTICAL DEL DOCUMENTO
   El alto es el recurso escaso de esta pantalla: cada línea que gasta la cabecera o el pie es una
   línea que el cuerpo NO tiene. Tres ajustes que se reparten ese alto y una cabecera de tarjeta que
   deja de cortar sus iconos. Mantener este bloque al FINAL del archivo.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Aire entre el título y las pestañas ──────────────────────────────────────────────────────
   La cabecera de página y la tira de pestañas gastaban `--fdp-gap-sm` + `--fdp-gap` (hasta 1,85rem
   entre el h1 y el contenido) para no separar nada que lo necesitara: el título y los tabs se leen
   como un solo bloque. Se recorta ese hueco y el que sobra baja al cuerpo. */
.fdp-page .fdp-header[b-orzevupr5r] {
    margin-block-end: .25rem;
}

.fdp-page .fdp-tabs[b-orzevupr5r] {
    margin-block-end: .4rem;
}

/* ── Cabecera de la tarjeta de líneas: título centrado y iconos enteros ───────────────────────
   Dos defectos que se veían juntos y tenían causas distintas:
     · el TÍTULO salía alto respecto a los botones — `.fdp-card-head` da un padding de 5px y el h2
       hereda `line-height` del cuerpo, así que su caja era más baja que la de los controles y el
       `align-items:center` del flex lo dejaba ópticamente descentrado;
     · los ICONOS se cortaban por abajo — los Material Symbols de 1.05rem viven en una caja de 26px
       con `overflow:hidden` de la tarjeta, y a esa altura el glifo no cabe entero.
   Se le da a la cabecera un alto mínimo propio, al h2 la misma línea que los controles, y a los
   iconos una caja algo más alta. */
.fdp-page .fdp-lines-card > .fdp-card-head[b-orzevupr5r] {
    min-block-size: 2.1rem;
    padding-block: .22rem;
}

    .fdp-page .fdp-lines-card > .fdp-card-head > h2[b-orzevupr5r] {
        display: inline-flex;
        align-items: center;
        block-size: 1.75rem;
        line-height: 1;
    }

.fdp-page .ff-mini-actions[b-orzevupr5r] {
    align-items: center;
    flex-wrap: nowrap;
}

.fdp-page .ff-mode-icons[b-orzevupr5r] {
    flex: 0 0 auto;
    line-height: 0; /* la caja del grupo la marcan los botones, no el hueco de la línea de texto */
}

.fdp-page .ff-mode-icon[b-orzevupr5r] {
    block-size: 1.75rem;
    inline-size: 1.9rem;
    overflow: visible;
}

    .fdp-page .ff-mode-icon .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1.15rem;
        line-height: 1;
        overflow: visible;
    }

/* ── Pie: DOS filas, no tres ──────────────────────────────────────────────────────────────────
   Con 8 columnas los 18 campos del resumen ocupaban tres filas y el cuerpo de líneas se quedaba en
   dos. Diez columnas y campos un poco más estrechos los meten en dos filas exactas: fila 1 los de
   cada documento (descuento, forma de pago a doble ancho, contado, aplazado, vencimiento, total
   neto, total y TOTAL FACTURA a doble ancho = 10), fila 2 los ocasionales e informativos (10). */
.fdp-page .fdp-pie-split[b-orzevupr5r] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
    align-items: stretch;
}

.fdp-page .fdp-pie-grid[b-orzevupr5r] {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px 5px;
    align-items: end;
}

    /* Forma de pago lleva código + nombre + lupa: con una columna se queda sin sitio. */
    .fdp-page .fdp-pie-grid > .fdp-pie-ancho[b-orzevupr5r] {
        grid-column: span 2;
    }

    /* El importe que cierra el documento: doble ancho y destacado. */
    .fdp-page .fdp-pie-grid > .fdp-pie-total[b-orzevupr5r] {
        grid-column: span 2;
    }

    /* Etiquetas y controles del pie, un punto más compactos: son 18 y el alto se nota. */
    .fdp-page .fdp-pie-grid .fdp-field label[b-orzevupr5r] {
        margin-block-end: .1rem;
        font-size: .68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fdp-page .fdp-pie-grid .fdp-input[b-orzevupr5r],
    .fdp-page .fdp-pie-grid .fdp-field[b-orzevupr5r]  .fdp-input {
        padding-block: .28rem;
        padding-inline: .4rem;
    }

    .fdp-page .fdp-pie-grid[b-orzevupr5r]  .e-input-group,
    .fdp-page .fdp-pie-grid[b-orzevupr5r]  .e-control-wrapper {
        min-block-size: 1.7rem;
    }

    .fdp-page .fdp-pie-grid[b-orzevupr5r]  input.e-input {
        padding-block: .18rem;
        font-size: .78rem;
    }

/* Con menos ancho por campo, en pantallas medianas el pie vuelve a partirse: cinco columnas por
   fila (cuatro filas) sigue siendo mejor que el desbordamiento horizontal. */
@media (max-width: 1400px) {
    .fdp-page .fdp-pie-grid[b-orzevupr5r] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .fdp-page .fdp-pie-split[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

    .fdp-page .fdp-pie-grid[b-orzevupr5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fdp-page .fdp-pie-grid[b-orzevupr5r] {
        grid-template-columns: 1fr;
    }

        .fdp-page .fdp-pie-grid > .fdp-pie-ancho[b-orzevupr5r],
        .fdp-page .fdp-pie-grid > .fdp-pie-total[b-orzevupr5r] {
            grid-column: auto;
        }
}

/* ─── FUN-V122: las líneas nunca se quedan sin sitio ──────────────────────────
   Con el modo compacto la página encaja en la ventana y las líneas se quedan con
   lo que sobra. Desde que cabecera y pie ya no se pliegan solos al entrar en las
   líneas (AutoColapsar, de fábrica apagado), en un portátil no sobraba nada: a
   1180×740 la tarjeta de líneas medía 0 px y la factura no tenía dónde escribir.
   Ahora las líneas guardan un alto mínimo y, si con eso no cabe todo, es el
   contenido el que se desplaza; plegar cabecera o pie les devuelve el sitio.
   Y la causa de fondo: desde el 28/08 la tarjeta va dentro de .ff-lines-host
   (display: contents), así que ninguna regla «.fdp-content > .fdp-lines-card» la
   alcanzaba —tampoco la que le da el espacio sobrante— y se quedaba en 0 px. */
.fdp-page-fit .fdp-content[b-orzevupr5r] {
    overflow-y: auto;
}

    .fdp-page-fit .fdp-content > .fdp-lines-card[b-orzevupr5r],

    .fdp-page-fit .fdp-content > .ff-lines-host > .fdp-lines-card[b-orzevupr5r] {
        /* FUN-V652: la fila de alta y al menos tres líneas. Con 10rem, a 1366×768 y el resumen abierto, la rejilla
           medía 56 px: cabía UNA fila, la de alta, y cada línea añadida desaparecía por arriba («no deja añadir
           líneas»). Si así no cabe el resumen, se desplaza la página: las líneas son lo que no puede faltar. */
        min-block-size: 18rem;
    }

/* ── Barra de acciones: iconos de consulta y menú «Otros» ───────────────────────────────────────────
   Las acciones de consulta (imprimir, contabilización, existencias, cancelar) van como ICONO solo, cuadrado
   y algo más grande que el de los botones con texto: se reconocen por el dibujo y su nombre está en el
   tooltip. Grabar y Emitir conservan el texto. Lo infrecuente cuelga de «Otros». */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn.fdp-solo-icono,
[b-orzevupr5r] .fdp-actions-bar a.fdp-btn.fdp-solo-icono {
    padding: 0;
    inline-size: 2.4rem;
    min-inline-size: 2.4rem;
    min-block-size: 2.4rem;
    justify-content: center;
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn.fdp-solo-icono .material-symbols-outlined,
    [b-orzevupr5r] .fdp-actions-bar a.fdp-btn.fdp-solo-icono .material-symbols-outlined {
        font-size: 1.35rem;
    }

/* Línea FINA en todos los iconos de la barra. La fuente de iconos es variable y su grosor sigue a
   font-weight: dentro de un botón con texto en negrita (600) heredaban ese peso y salían bastos. */
[b-orzevupr5r] .fdp-actions-bar .material-symbols-outlined {
    font-weight: 300;
}

[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-toggle-compacto {
    inline-size: 2.4rem;
    min-inline-size: 2.4rem;
    min-block-size: 2.4rem;
}

    [b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-toggle-compacto .material-symbols-outlined {
        font-size: 1.35rem;
    }

/* Los botones con texto, a la misma altura que los de icono: la barra es una sola fila pareja. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.fdp-btn {
    min-block-size: 2.4rem;
}

/* Contenedor del menú: el desplegable se ancla a su esquina derecha. */
.ff-otros[b-orzevupr5r] {
    position: relative;
    flex: 0 0 auto;
}

[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-otros-btn.is-active {
    background: color-mix(in srgb, var(--fdp-primary, #00288e) 10%, #ffffff);
    border-color: var(--fdp-primary, #00288e);
    color: var(--fdp-primary, #00288e);
}

/* Casilla «Etiqueta» de la barra: icono de casilla + su nombre; marcada, con el resaltado de los botones activos. */
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-etiqueta-btn {
    gap: 0.3rem;
}

[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-etiqueta-btn.is-active,
[b-orzevupr5r] .fdp-actions-bar .e-btn.ff-etiqueta-btn.is-active:hover {
    background: color-mix(in srgb, var(--fdp-primary, #00288e) 10%, #ffffff);
    border-color: var(--fdp-primary, #00288e);
    color: var(--fdp-primary, #00288e);
}

/* La etiqueta al terminar el documento: el PDF en el visor del navegador, a buen tamaño para leerla. */
[b-orzevupr5r] .ff-etiqueta-visor {
    display: block;
    inline-size: min(48rem, 85vw);
    block-size: min(36rem, 70vh);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f8fafc;
}

/* Fondo transparente que cierra el menú al pulsar fuera. */
.ff-otros-fondo[b-orzevupr5r] {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.ff-otros-menu[b-orzevupr5r] {
    position: absolute;
    inset-block-start: calc(100% + .3rem);
    inset-inline-end: 0;
    z-index: 901;
    min-inline-size: 15rem;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    background: var(--fdp-surface, #ffffff);
    border: 1px solid var(--fdp-outline-variant, #e4e5ec);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

.ff-otros-item[b-orzevupr5r] {
    display: flex;
    align-items: center;
    gap: .6rem;
    inline-size: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fdp-on-surface, #1a1b22);
    font-size: .85rem;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

    .ff-otros-item .material-symbols-outlined[b-orzevupr5r] {
        font-size: 1.25rem;
        font-weight: 300;
        color: var(--fdp-on-surface-variant, #555766);
    }

    /* «Ver contabilización» es un ENLACE (navega): mismo aspecto que las opciones que son botón. */
    a.ff-otros-item[b-orzevupr5r] {
        text-decoration: none;
    }

    .ff-otros-item:hover:not(:disabled)[b-orzevupr5r],
    .ff-otros-item:focus-visible[b-orzevupr5r] {
        background: var(--fdp-surface-container, #f4f5f9);
        outline: none;
    }

    .ff-otros-item:disabled[b-orzevupr5r] {
        opacity: .5;
        cursor: default;
    }

    /* Borrar/Anular: la única acción que destruye, en rojo y tras un separador. */
    .ff-otros-item.is-peligro[b-orzevupr5r],
    .ff-otros-item.is-peligro .material-symbols-outlined[b-orzevupr5r] {
        color: var(--fdp-danger, #d33a3a);
    }

        .ff-otros-item.is-peligro:hover:not(:disabled)[b-orzevupr5r] {
            background: color-mix(in srgb, var(--fdp-danger, #d33a3a) 8%, #ffffff);
        }

.ff-otros-separador[b-orzevupr5r] {
    block-size: 1px;
    margin: .3rem .2rem;
    background: var(--fdp-outline-variant, #e4e5ec);
}

/* Carta de porte (FUN-V506): el enlace de la que hizo el transportista, en la tarjeta de envío. */
.ff-deca-recibido[b-orzevupr5r] { display: flex; gap: 6px; align-items: center; }
.ff-deca-recibido .fdp-input[b-orzevupr5r] { flex: 1; min-width: 0; }

/* FUN-V617: qué factura saldrá al emitir, junto al botón Emitir. */
.ff-factura-prevista[b-orzevupr5r] {
    align-self: center;
    color: var(--ff-muted);
    font-size: var(--ff-font-small);
    white-space: nowrap;
}

/* Completa a un extranjero sin NIF: se emite, pero se avisa (incidencias 25). */
.ff-factura-prevista--aviso[b-orzevupr5r] {
    color: #b45309;
    font-weight: 600;
}
/* _content/ErpPowergest/Presentation/Ventas/FacturacionRecurrente/Pages/FacturacionRecurrentePage.razor.rz.scp.css */
/*
    Asientos predefinidos (C4). Mismo vocabulario visual que «Libros oficiales» e «Inmovilizado»:
    mismas medidas, mismos colores, mismos radios.

    Se repiten aquí y no se comparten porque el CSS de Blazor tiene ámbito POR COMPONENTE: la hoja de
    InmovilizadoPage lleva su propio atributo de scope y no alcanza a esta página. Referenciar sus
    clases sin declararlas dejaría la pantalla sin estilo, que es un fallo que solo se ve al abrirla.
*/

/* A todo el ancho y todo el alto, como Clientes: sin max-width ni margen propio (el borde lo pone .main-body) y
   9px entre bloques. La tabla de plantillas se queda con el alto que sobra. */
.op-page[b-tbd8acqk3v] {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

.op-page > *[b-tbd8acqk3v] { min-width: 0; }

/* Cabecera como en Diario. Sin `flex-wrap`: si la barra bajara de línea, su script nunca vería que falta
   sitio y no replegaría nada al menú «···». */
.op-header[b-tbd8acqk3v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Título en dos fases: primero en UNA línea y sin ceder (así la barra ve que falta sitio y repliega sus
   botones al «···»); con la barra ya replegada del todo (command-bar-host-collapsed, lo pone el propio
   CommandBar) el bloque cede y título y subtítulo envuelven, en vez de empujar la barra fuera. */
.op-header > .op-header-text[b-tbd8acqk3v] {
    flex: 0 0 auto;
    min-width: 0;
}

.op-header.command-bar-host-collapsed > .op-header-text[b-tbd8acqk3v] {
    flex: 1 1 auto;
}

.op-title[b-tbd8acqk3v],
.op-subtitle[b-tbd8acqk3v] {
    white-space: nowrap;
}

.op-header.command-bar-host-collapsed .op-title[b-tbd8acqk3v],
.op-header.command-bar-host-collapsed .op-subtitle[b-tbd8acqk3v] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: su ancho natural, siempre arriba a la derecha. */
.op-header[b-tbd8acqk3v]  .op-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.op-title[b-tbd8acqk3v] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.op-subtitle[b-tbd8acqk3v] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.op-card[b-tbd8acqk3v] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.op-card-head[b-tbd8acqk3v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.op-card-title[b-tbd8acqk3v] {
    font-size: 1.05rem;
    font-weight: 700;
}

.op-card-actions[b-tbd8acqk3v] { margin-top: .9rem; }

.op-subhead[b-tbd8acqk3v] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 700;
    margin: 1.1rem 0 .4rem;
}

.op-form-row[b-tbd8acqk3v] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: .9rem;
}

.op-field[b-tbd8acqk3v] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field-ancho[b-tbd8acqk3v] { flex: 1 1 16rem; }

.op-field label[b-tbd8acqk3v] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-select[b-tbd8acqk3v], .op-input[b-tbd8acqk3v] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

/* Los códigos con lupa (CampoCodigo: forma de pago y código de línea) pintan su input dentro del
   componente, adonde el CSS aislado de la página no llega sin ::deep. */
.op-page[b-tbd8acqk3v]  .cc-campo .op-input {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-page[b-tbd8acqk3v]  .cc-campo .op-input-codigo { width: 9rem; font-variant-numeric: tabular-nums; }

/* El input del buscador de cliente lo pinta CampoConBuscador (otro ámbito de CSS): sin ::deep no le
   llegaba .op-input y salía con el borde del navegador. Mismo aspecto que el resto de campos y todo el
   ancho de su celda (la lupa va dentro, a la derecha). */
.op-field[b-tbd8acqk3v]  .ccb-selector {
    width: 100%;
}

.op-field[b-tbd8acqk3v]  .ccb-selector > input.op-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding-block: .45rem;
    padding-inline-start: .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-select[b-tbd8acqk3v] { min-width: 7rem; }
.op-select-sm[b-tbd8acqk3v] { min-width: 5.5rem; }
.op-input-num[b-tbd8acqk3v] { text-align: right; width: 9rem; }
.op-input-pct[b-tbd8acqk3v] { text-align: right; width: 5rem; }
.op-input-cuenta[b-tbd8acqk3v] { width: 9rem; font-variant-numeric: tabular-nums; }

/* El par «21 % de la línea 2» se lee como una frase: si se parte en dos controles sueltos deja de
   verse que el porcentaje y su base son un mismo dato. */
.op-inline[b-tbd8acqk3v] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.op-inline-sep[b-tbd8acqk3v] { font-size: .82rem; color: #61707d; }

.op-actions[b-tbd8acqk3v] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.op-btn[b-tbd8acqk3v] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-tbd8acqk3v] { opacity: .55; cursor: default; }
.op-btn-ico[b-tbd8acqk3v] { font-size: 1.05rem; }

.op-btn-primary[b-tbd8acqk3v] { background: #2f6fed; color: #fff; }
.op-btn-primary:hover:not(:disabled)[b-tbd8acqk3v] { background: #245cd0; }

.op-btn-ghost[b-tbd8acqk3v] { background: #f2f5f9; color: #2b3a4a; border-color: #e0e6ee; }
.op-btn-ghost:hover:not(:disabled)[b-tbd8acqk3v] { background: #e7edf4; }

.op-btn-danger[b-tbd8acqk3v] { background: #d93a44; color: #fff; }
.op-btn-danger:hover:not(:disabled)[b-tbd8acqk3v] { background: #c22f39; }

.op-btn-danger-ghost[b-tbd8acqk3v] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-tbd8acqk3v] { background: #fdf1f2; }

.op-link-btn[b-tbd8acqk3v] {
    background: none;
    border: none;
    color: #2f6fed;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Botones de fila (subir/bajar/quitar): sin marco, para que la rejilla no parezca una botonera. */
.op-icon-btn[b-tbd8acqk3v] {
    background: none;
    border: none;
    color: #61707d;
    cursor: pointer;
    padding: .15rem;
    line-height: 1;
    border-radius: 6px;
}

.op-icon-btn:hover:not(:disabled)[b-tbd8acqk3v] { background: #eef2f7; color: #2b3a4a; }
.op-icon-btn:disabled[b-tbd8acqk3v] { opacity: .3; cursor: default; }
.op-icon-btn .material-symbols-rounded[b-tbd8acqk3v] { font-size: 1.15rem; }
.op-icon-danger:hover:not(:disabled)[b-tbd8acqk3v] { background: #fdf1f2; color: #c22f39; }

.op-grid-wrapper[b-tbd8acqk3v] { overflow-x: auto; }

/* Listado de plantillas: el título y la casilla encima, y la tabla paginada con el alto que queda. */
.op-lista-barra[b-tbd8acqk3v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.op-lista[b-tbd8acqk3v] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.op-page[b-tbd8acqk3v]  .tp-panel { min-height: auto; }

/* La fila de la plantilla abierta la pinta TablaPaginada (otro ámbito de CSS). */
.op-lista[b-tbd8acqk3v]  tr.op-row-sel,
.op-lista[b-tbd8acqk3v]  tr.op-row-sel:hover { background: #e8f0fe; }

.op-table[b-tbd8acqk3v] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.op-table th[b-tbd8acqk3v] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.op-table td[b-tbd8acqk3v] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-num[b-tbd8acqk3v] { text-align: right; font-variant-numeric: tabular-nums; }

/* La rejilla de líneas lleva controles: necesita más aire vertical que una tabla de solo lectura. */
.op-table-lineas td[b-tbd8acqk3v] { padding: .35rem .5rem; }
.op-col-orden[b-tbd8acqk3v] { width: 2.5rem; }
.op-col-acciones[b-tbd8acqk3v] { width: 6.5rem; white-space: nowrap; text-align: right; }

/* El listado abre el editor al pulsar la fila: hay que verse que es pulsable. */
.op-table-click tbody tr[b-tbd8acqk3v] { cursor: pointer; }
.op-table-click tbody tr:hover[b-tbd8acqk3v] { background: #f5f8fc; }
.op-row-sel[b-tbd8acqk3v], .op-table-click tbody tr.op-row-sel:hover[b-tbd8acqk3v] { background: #e8f0fe; }

/*
    Ámbar y no rojo: lo que marca —una plantilla sin líneas suficientes— es algo que hay que completar
    antes de seguir, no un error de la aplicación. El rojo se reserva para lo que ha fallado.
*/
.op-aviso[b-tbd8acqk3v] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a5a00;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .75rem;
}

.op-aviso .material-symbols-rounded[b-tbd8acqk3v] { font-size: 1.1rem; }

.op-check[b-tbd8acqk3v] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

/* La casilla «Activa» convive con campos que tienen rótulo encima: se baja a su línea base. */
.op-check-campo[b-tbd8acqk3v] { align-self: center; padding-bottom: .45rem; }

.op-confirm[b-tbd8acqk3v] {
    font-size: .85rem;
    color: #8a5a00;
    background: #fff6e6;
    border: 1px solid #f3dfae;
    border-radius: 8px;
    padding: .4rem .65rem;
    align-self: center;
}

.op-muted[b-tbd8acqk3v] {
    color: #61707d;
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.op-hint[b-tbd8acqk3v] { color: #8a97a3; font-size: .82rem; font-style: italic; }

.op-badge[b-tbd8acqk3v] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-warn[b-tbd8acqk3v] { background: #fdeccd; color: #8a5a00; }
.op-badge-ok[b-tbd8acqk3v] { background: #e2f4e8; color: #1c7a3a; }
.op-badge-off[b-tbd8acqk3v] { background: #eef1f4; color: #61707d; }
.op-badge-err[b-tbd8acqk3v] { background: #fde3e5; color: #c22f39; }

/* ── Propio de la facturación recurrente ─────────────────────────────────────────────────── */

/* Iconos «se manda por correo» / «avisa» junto al modo: informativos, del color del texto secundario. */
.op-ico-inline[b-tbd8acqk3v] { font-size: 1rem; vertical-align: middle; color: #61707d; margin-left: .25rem; }

.op-input-corto[b-tbd8acqk3v] { width: 7rem; }
.op-input-codigo[b-tbd8acqk3v] { width: 9rem; font-variant-numeric: tabular-nums; }
.op-input-concepto[b-tbd8acqk3v] { width: 100%; min-width: 14rem; }
.op-textarea[b-tbd8acqk3v] { width: 100%; resize: vertical; font-family: inherit; }

/* La vista previa se lee a dos columnas: las fechas a la izquierda, el primer documento a la derecha. */
.op-previa[b-tbd8acqk3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #f7f9fc;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: .88rem;
}

@media (max-width: 720px) { .op-previa[b-tbd8acqk3v] { grid-template-columns: 1fr; } }

.op-previa-titulo[b-tbd8acqk3v] { font-weight: 700; margin-bottom: .35rem; }
.op-previa-lista[b-tbd8acqk3v] { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.op-previa-total[b-tbd8acqk3v] { font-weight: 700; margin-top: .5rem; }

.op-error-cell[b-tbd8acqk3v] { color: #c22f39; font-size: .8rem; max-width: 22rem; }

/* ─────────────── Editor en la ventana flotante ───────────────
   La ventana ya es la tarjeta: el editor no lleva marco y la llena (sin franja gris debajo). Su cabecera
   deja sitio a la «×» de la ventana (36px arriba a la derecha). El historial va debajo, separado por una
   raya, dentro de la misma ventana. */
.op-editor[b-tbd8acqk3v] {
    background: #fff;
    padding: 1.25rem 1.5rem;
    min-height: 100%;
    box-sizing: border-box;
    color: #1f2933;
}

.op-editor-seccion[b-tbd8acqk3v] { min-width: 0; }

.op-editor-seccion:first-child > .op-card-head[b-tbd8acqk3v] { padding-right: 44px; }

.op-editor-historial[b-tbd8acqk3v] {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e3e8ee;
}

/* ─────────────── Pantallas pequeñas ───────────────
   Nada de scroll horizontal de la página: solo las tablas se desplazan, dentro de su contenedor. */
@media (max-width: 900px) {
    /* Columnas secundarias del listado fuera: «Última» y «Último resultado» se ven al abrir la plantilla. */
    .op-col-sec[b-tbd8acqk3v] { display: none; }
}

@media (max-width: 768px) {
    .op-card[b-tbd8acqk3v] { padding: .9rem 1rem; }
    .op-title[b-tbd8acqk3v] { font-size: 1.4rem; }

    /* Botones con área de toque suficiente para el dedo. */
    .op-btn[b-tbd8acqk3v] { min-height: 36px; }
    .op-icon-btn[b-tbd8acqk3v] {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .op-col-acciones[b-tbd8acqk3v] { width: auto; }
}

/* Móvil: el editor apila los campos al 100% y los botones van a lo ancho. */
@media (max-width: 600px) {
    .op-card[b-tbd8acqk3v] { padding: .8rem .75rem; }
    .op-title[b-tbd8acqk3v] { font-size: 1.25rem; }
    .op-card-head[b-tbd8acqk3v] { gap: .5rem; }

    .op-editor[b-tbd8acqk3v] { padding: .9rem .75rem; }

    .op-form-row[b-tbd8acqk3v] { flex-direction: column; align-items: stretch; gap: .75rem; }
    .op-field-ancho[b-tbd8acqk3v] { flex: 0 0 auto; }
    .op-field .op-input[b-tbd8acqk3v], .op-field .op-select[b-tbd8acqk3v] { width: 100%; box-sizing: border-box; }
    .op-field .op-inline[b-tbd8acqk3v] { flex-wrap: nowrap; }
    .op-field .op-inline .op-input-pct[b-tbd8acqk3v] { width: 5rem; flex: 0 0 auto; }
    .op-field .op-inline .op-select[b-tbd8acqk3v] { width: auto; flex: 1 1 auto; min-width: 0; }
    .op-field[b-tbd8acqk3v]  input { max-width: 100%; }
    .op-check-campo[b-tbd8acqk3v] { align-self: flex-start; padding-bottom: 0; }

    .op-card-actions[b-tbd8acqk3v] { flex-direction: column; align-items: stretch; }
    .op-card-actions .op-btn[b-tbd8acqk3v] { justify-content: center; }
    .op-confirm[b-tbd8acqk3v] { align-self: stretch; }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaElectronica/Pages/FacturaElectronicaPage.razor.rz.scp.css */
.facturae-page[b-e4dpxi67wx],
.facturae-page *[b-e4dpxi67wx],
.facturae-page *[b-e4dpxi67wx]::before,
.facturae-page *[b-e4dpxi67wx]::after {
    box-sizing: border-box;
}

.facturae-page[b-e4dpxi67wx] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: facturaePageIn-b-e4dpxi67wx 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.facturae-header[b-e4dpxi67wx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título: se mantiene a su ancho natural y NO cede; los botones del CommandBar se
   repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (clase
   host-collapsed que añade el propio CommandBar sobre la cabecera). */
.facturae-heading[b-e4dpxi67wx] {
    min-width: 0;
    flex: 0 0 auto;
}

.facturae-header.command-bar-host-collapsed .facturae-heading[b-e4dpxi67wx] {
    flex: 1 1 auto;
}

.facturae-title[b-e4dpxi67wx] {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.facturae-subtitle[b-e4dpxi67wx] {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. */
.facturae-header-actions[b-e4dpxi67wx] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.card-panel[b-e4dpxi67wx] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* ESTADO SUPERIOR */

.facturae-status-strip[b-e4dpxi67wx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fe-status-mini[b-e4dpxi67wx] {
    min-width: 0;
    height: 54px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
}

    .fe-status-mini span[b-e4dpxi67wx] {
        font-size: 11px;
        font-weight: 850;
        color: #64748b;
        line-height: 1.1;
    }

    .fe-status-mini strong[b-e4dpxi67wx] {
        font-size: 13px;
        font-weight: 900;
        color: #111827;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.fe-status-ok[b-e4dpxi67wx] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fe-status-info[b-e4dpxi67wx] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* LAYOUT PRINCIPAL */

.facturae-workspace[b-e4dpxi67wx] {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(430px, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

.facturae-left-panel[b-e4dpxi67wx] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .facturae-left-panel > .facturae-panel-header[b-e4dpxi67wx],
    .facturae-left-panel > .facturae-filters[b-e4dpxi67wx] {
        flex: 0 0 auto;
    }

.facturae-right-panel[b-e4dpxi67wx] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

    .facturae-right-panel > .fe-tabs[b-e4dpxi67wx] {
        flex: 0 0 auto;
    }

.facturae-panel-header[b-e4dpxi67wx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.facturae-panel-heading[b-e4dpxi67wx] {
    min-width: 0;
    flex: 1 1 auto;
}

.facturae-panel-title[b-e4dpxi67wx] {
    font-size: 16px;
    font-weight: 850;
    color: #1f2937;
    line-height: 1.2;
}

.facturae-panel-subtitle[b-e4dpxi67wx] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* FILTROS */

.facturae-filters[b-e4dpxi67wx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    align-items: center;
}

.fe-filter-item-search[b-e4dpxi67wx] {
    grid-column: 1 / -1;
}

.fe-filter-item[b-e4dpxi67wx],
.fe-filter-item-search[b-e4dpxi67wx] {
    min-width: 0;
}

.fe-filter-searchbox[b-e4dpxi67wx] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.fe-filter-search-icon[b-e4dpxi67wx] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.fe-filter-input[b-e4dpxi67wx],
.fe-filter-select[b-e4dpxi67wx] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-filter-input[b-e4dpxi67wx] {
    padding: 0 13px;
}

.fe-filter-input-search[b-e4dpxi67wx] {
    padding-left: 40px !important;
}

.fe-filter-select[b-e4dpxi67wx] {
    padding: 0 12px;
    cursor: pointer;
}

.fe-filter-input[b-e4dpxi67wx]::placeholder {
    color: #9ca3af;
}

.fe-filter-input:focus[b-e4dpxi67wx],
.fe-filter-select:focus[b-e4dpxi67wx] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.fe-filter-actions[b-e4dpxi67wx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* BOTONES */

.fe-primary-btn[b-e4dpxi67wx],
.fe-action-btn[b-e4dpxi67wx] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.fe-primary-btn[b-e4dpxi67wx] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .fe-primary-btn:hover[b-e4dpxi67wx] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.fe-action-btn[b-e4dpxi67wx] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .fe-action-btn:hover[b-e4dpxi67wx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* MENSAJES */

.fe-message[b-e4dpxi67wx] {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.fe-message-ok[b-e4dpxi67wx] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fe-message-error[b-e4dpxi67wx] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* CONTADOR */

.fe-counter[b-e4dpxi67wx] {
    flex: 0 0 auto;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

/* TABLA PRINCIPAL
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El listado lo pinta <TablaPaginada> (marco, cabecera con orden, filas, estado vacío y paginador):
   ese estilo vive en su propio CSS y NO se replica aquí. Lo que queda en esta página es solo lo que
   la tabla no puede saber: el replegado de columnas por ancho de ventana y el aspecto de las celdas
   que aporta la propia página como plantilla (casilla e insignias).

   Esas reglas van con `::deep`: el markup al que apuntan lo renderiza <TablaPaginada>, así que el CSS
   scoped de esta página no lo alcanza por sí solo. */

.fe-tabla[b-e4dpxi67wx] {
    /* Contenedor flex-columna: es lo que espera .tp-panel para repartirse el alto (flex: 1 1 auto). */
    flex: 1 1 auto;
    min-height: 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
}

/* CASILLA DE SELECCIÓN (plantilla de la primera columna) */

.facturae-page[b-e4dpxi67wx]  .fe-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .facturae-page[b-e4dpxi67wx]  .fe-check input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* PESTA�AS */

/* Envuelve <ScrollableTabs> dentro del panel: el rail continuo, el scroll horizontal y las flechas
   los aporta el propio componente; aquí solo permitimos que la pista pueda desbordar y desplazarse. */
.fe-tabs[b-e4dpxi67wx] {
    min-width: 0;
}

/* Botones de pestaña (viajan en el ChildContent y conservan el CSS de esta página). */
.fe-tab[b-e4dpxi67wx] {
    flex: 0 0 auto;
    height: 40px;
    margin-bottom: -1px;        /* el subrayado solapa el rail de 1px */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

    .fe-tab:hover[b-e4dpxi67wx] {
        color: #334155;
    }

    .fe-tab.active[b-e4dpxi67wx] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
        font-weight: 800;
    }

    .fe-tab:focus-visible[b-e4dpxi67wx] {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

.fe-tab-panel[b-e4dpxi67wx] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 2px;
}

    .fe-tab-panel[b-e4dpxi67wx]::-webkit-scrollbar {
        width: 6px;
    }

    .fe-tab-panel[b-e4dpxi67wx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fe-tab-panel[b-e4dpxi67wx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* DETALLE */

.fe-detail-content[b-e4dpxi67wx] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .fe-detail-content[b-e4dpxi67wx]::-webkit-scrollbar {
        width: 6px;
    }

    .fe-detail-content[b-e4dpxi67wx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fe-detail-content[b-e4dpxi67wx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .fe-detail-content[b-e4dpxi67wx]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.fe-empty-detail[b-e4dpxi67wx] {
    min-height: 150px;
    border: 1px dashed #dbe2ea;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    font-weight: 750;
    text-align: center;
    padding: 18px;
}

.fe-detail-header[b-e4dpxi67wx] {
    border: 1px solid #dbe5f0;
    background: #f8fbff;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

    .fe-detail-header div[b-e4dpxi67wx] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .fe-detail-header strong[b-e4dpxi67wx] {
        font-size: 16px;
        font-weight: 900;
        color: #111827;
    }

    .fe-detail-header span[b-e4dpxi67wx] {
        font-size: 13px;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fe-detail-header b[b-e4dpxi67wx] {
        font-size: 18px;
        color: #1d4ed8;
        white-space: nowrap;
    }

.fe-facturae-data[b-e4dpxi67wx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .fe-facturae-data div[b-e4dpxi67wx],
    .fe-system-detail-item[b-e4dpxi67wx] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border: 1px solid #edf2f7;
        background: #f8fafc;
        border-radius: 12px;
        padding: 10px 12px;
    }

        .fe-facturae-data span[b-e4dpxi67wx],
        .fe-system-detail-item span[b-e4dpxi67wx] {
            font-size: 12px;
            color: #6b7280;
            font-weight: 750;
        }

        .fe-facturae-data strong[b-e4dpxi67wx],
        .fe-system-detail-item strong[b-e4dpxi67wx] {
            font-size: 13px;
            color: #111827;
            text-align: right;
            font-weight: 850;
        }

/* TABLA COMPACTA DE LINEAS */

.fe-lines-table[b-e4dpxi67wx] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 160px;
}

.fe-lines-body[b-e4dpxi67wx] {
    flex: 1 1 auto;
}

.fe-lines-head[b-e4dpxi67wx],
.fe-lines-row[b-e4dpxi67wx] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 64px 90px;
    gap: 10px;
    align-items: center;
}

.fe-lines-head[b-e4dpxi67wx] {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

    .fe-lines-head span[b-e4dpxi67wx] {
        font-size: 12px;
        font-weight: 850;
        color: #475569;
    }

.fe-lines-row[b-e4dpxi67wx] {
    min-height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid #eef2f7;
}

    .fe-lines-row:last-child[b-e4dpxi67wx] {
        border-bottom: 0;
    }

    .fe-lines-row span[b-e4dpxi67wx],
    .fe-lines-row strong[b-e4dpxi67wx] {
        min-width: 0;
        font-size: 12px;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fe-lines-row strong[b-e4dpxi67wx] {
        text-align: right;
        font-weight: 900;
    }

/* CERTIFICADOS */

.fe-cert-list[b-e4dpxi67wx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fe-cert-item[b-e4dpxi67wx] {
    border: 1px solid #dbe5f0;
    background: #ffffff;
    border-radius: 14px;
    padding: 13px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .fe-cert-item:hover[b-e4dpxi67wx] {
        border-color: #bfdbfe;
        background: #f8fbff;
        transform: translateY(-1px);
    }

    .fe-cert-item input[b-e4dpxi67wx] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

    .fe-cert-item span[b-e4dpxi67wx] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .fe-cert-item strong[b-e4dpxi67wx] {
        font-size: 13px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fe-cert-item small[b-e4dpxi67wx] {
        font-size: 12px;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* SISTEMA */

.fe-system-detail-list[b-e4dpxi67wx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* BADGES (plantillas de las columnas «Datos» y «Estado», dentro de <TablaPaginada>) */

.facturae-page[b-e4dpxi67wx]  .fe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.facturae-page[b-e4dpxi67wx]  .fe-badge-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.facturae-page[b-e4dpxi67wx]  .fe-badge-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.facturae-page[b-e4dpxi67wx]  .fe-badge-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes facturaePageIn-b-e4dpxi67wx {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1480px) {
    .facturae-workspace[b-e4dpxi67wx] {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.8fr);
    }

    .fe-filter-actions[b-e4dpxi67wx] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 1280px) {
    .facturae-status-strip[b-e4dpxi67wx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .facturae-workspace[b-e4dpxi67wx] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow-y: auto;
        padding-right: 2px;
    }

    /* Los paneles dejan de repartirse la pantalla y se apilan: la tabla ya no compite por el alto con
       el panel de Detalle, así que crece con sus filas y el scroll lo lleva el workspace. */
    .fe-tabla[b-e4dpxi67wx] {
        flex: 0 0 auto;
    }

    .facturae-right-panel > .fe-tab-panel[b-e4dpxi67wx],
    .fe-detail-content[b-e4dpxi67wx] {
        overflow-y: visible;
    }

    .fe-lines-table[b-e4dpxi67wx],
    .fe-lines-body[b-e4dpxi67wx] {
        flex: 0 0 auto;
    }

    .fe-filter-actions[b-e4dpxi67wx] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    /*TEST*/
    .facturae-page[b-e4dpxi67wx] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* La cabecera permanece en fila: el CommandBar se mantiene arriba a la derecha (no se apila ni envuelve). */
    .facturae-header-actions[b-e4dpxi67wx] {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .facturae-left-panel[b-e4dpxi67wx],
    .facturae-right-panel[b-e4dpxi67wx] {
        height: auto;
        min-height: 0;
    }
}

/* COLUMNAS REPLEGABLES: al estrechar la ventana caen primero las menos importantes. La casilla,
   «Factura», «Cliente» y «Total» permanecen siempre visibles: identifican la factura, dicen su importe
   y permiten marcarla, que es lo que se viene a hacer aquí. La clase la lleva la cabecera Y sus celdas
   (ColumnaTabla.CssClass), así que basta con ocultarla una vez. */

@media (max-width: 1180px) {
    .facturae-page[b-e4dpxi67wx]  .fe-col-tipo {
        display: none;
    }
}

@media (max-width: 900px) {
    .facturae-page[b-e4dpxi67wx]  .fe-col-datos {
        display: none;
    }
}

@media (max-width: 720px) {
    .facturae-page[b-e4dpxi67wx]  .fe-col-fecha {
        display: none;
    }
}

/* «Estado» es la última en caer: de las replegables es la que más dice de un vistazo, así que solo se
   va cuando ya no queda ancho para nada más que identificar la factura y marcarla. */
@media (max-width: 620px) {
    .facturae-page[b-e4dpxi67wx]  .fe-col-estado {
        display: none;
    }
}

@media (max-width: 768px) {
    .facturae-status-strip[b-e4dpxi67wx] {
        grid-template-columns: 1fr;
    }

    .fe-filter-actions[b-e4dpxi67wx] {
        grid-column: auto;
    }

    .fe-filter-actions[b-e4dpxi67wx] {
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
    }

    .facturae-header-actions[b-e4dpxi67wx] {
        width: 100%;
    }

        .facturae-header-actions .fe-action-btn[b-e4dpxi67wx],
        .facturae-header-actions .fe-primary-btn[b-e4dpxi67wx],
        .fe-filter-actions .fe-action-btn[b-e4dpxi67wx],
        .fe-filter-actions .fe-primary-btn[b-e4dpxi67wx] {
            width: 100%;
        }

    .facturae-panel-header[b-e4dpxi67wx] {
        flex-direction: column;
        align-items: stretch;
    }

    .fe-counter[b-e4dpxi67wx] {
        width: fit-content;
    }
}

@media (max-width: 640px) {
    /* El título y el subtítulo escalan con el clamp responsive; no se fija tamaño aquí. */

    .card-panel[b-e4dpxi67wx] {
        padding: 12px;
    }

    .fe-detail-header[b-e4dpxi67wx] {
        flex-direction: column;
    }

    .fe-lines-head[b-e4dpxi67wx],
    .fe-lines-row[b-e4dpxi67wx] {
        grid-template-columns: 70px minmax(0, 1fr) 78px;
    }

        .fe-lines-head span:nth-child(3)[b-e4dpxi67wx],
        .fe-lines-row span:nth-child(3)[b-e4dpxi67wx] {
            display: none;
        }
}

@media (prefers-reduced-motion: reduce) {
    .facturae-page[b-e4dpxi67wx],
    .facturae-page *[b-e4dpxi67wx],
    .facturae-page *[b-e4dpxi67wx]::before,
    .facturae-page *[b-e4dpxi67wx]::after {
        animation: none !important;
        transition: none !important;
    }
}

.facturae-panel-tools[b-e4dpxi67wx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .facturae-panel-header[b-e4dpxi67wx] {
        flex-direction: column;
        align-items: stretch;
    }

    .facturae-panel-tools[b-e4dpxi67wx] {
        width: 100%;
        justify-content: space-between;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/AgenteRecomendadoModal.razor.rz.scp.css */
/* Programa del mostrador recomendado (FUN-V566). CSS propio y completo: un modal no hereda el CSS aislado de la
   página que lo monta (memoria «CSS scoped en páginas copiadas»). */
.arm-overlay[b-9z6km9l1lo] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
}

.arm-card[b-9z6km9l1lo] {
    width: min(640px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    color: #1f2937;
    font-size: 14px;
}

.arm-cab[b-9z6km9l1lo] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}

    .arm-cab h2[b-9z6km9l1lo] {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
    }

    .arm-cab p[b-9z6km9l1lo] {
        margin: 4px 0 0;
        color: #92400e;
        font-weight: 600;
    }

.arm-ico[b-9z6km9l1lo] {
    font-size: 32px;
    color: #d97706;
}

.arm-cuerpo[b-9z6km9l1lo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px;
}

    .arm-cuerpo p[b-9z6km9l1lo] {
        margin: 0;
    }

.arm-sin-puesto[b-9z6km9l1lo] {
    padding: 8px 12px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.arm-comparar[b-9z6km9l1lo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.arm-col[b-9z6km9l1lo] {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

    .arm-col h3[b-9z6km9l1lo] {
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 800;
    }

    .arm-col ul[b-9z6km9l1lo] {
        margin: 0;
        padding-left: 18px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.arm-col-con[b-9z6km9l1lo] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.arm-col-sin[b-9z6km9l1lo] {
    background: #fffbeb;
    border-color: #fde68a;
}

.arm-pasos-titulo[b-9z6km9l1lo] {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 800;
}

.arm-pasos[b-9z6km9l1lo] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.arm-descarga[b-9z6km9l1lo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-weight: 700;
    color: #1d4ed8;
}

    .arm-descarga .material-symbols-outlined[b-9z6km9l1lo] {
        font-size: 18px;
    }

.arm-no-avisar[b-9z6km9l1lo] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
}

.arm-acciones[b-9z6km9l1lo] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e5e7eb;
}

.arm-btn[b-9z6km9l1lo] {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.arm-btn-ghost[b-9z6km9l1lo] {
    background: #ffffff;
    color: #374151;
    border-color: #d0d7de;
}

.arm-btn-primario[b-9z6km9l1lo] {
    background: #1d4ed8;
    color: #ffffff;
}

@media (max-width: 560px) {
    .arm-comparar[b-9z6km9l1lo] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/CanjePuntosModal.razor.rz.scp.css */
/* Ventana «Canjear puntos» del TPV (incidencias 13, T9). CSS propio y completo: el de la página no llega aquí
   (ámbito aislado; ver FUN-V357). Tocable: filas altas y botones grandes. */

.cpt-overlay[b-i2rp16a1v5] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
}

/* Más ancha que antes (760): con cuatro columnas el artículo y su aviso se partían en tres o cuatro renglones
   y la ventana se leía apelmazada (incidencias de María, TPV_MARIA2). */
.cpt-card[b-i2rp16a1v5] {
    display: flex;
    flex-direction: column;
    inline-size: min(900px, 100%);
    max-block-size: calc(100vh - 32px);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    outline: none;
    overflow: hidden;
}

.cpt-header[b-i2rp16a1v5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #00288e;
    color: #ffffff;
}

.cpt-title[b-i2rp16a1v5] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.cpt-saldo[b-i2rp16a1v5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

    .cpt-saldo strong[b-i2rp16a1v5] {
        font-size: 1.6rem;
    }

.cpt-saldo-rotulo[b-i2rp16a1v5] {
    font-size: .75rem;
    opacity: .85;
}

.cpt-body[b-i2rp16a1v5] {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
}

.cpt-vacio[b-i2rp16a1v5] {
    margin: 1rem 0;
    color: #64748b;
}

.cpt-tabla[b-i2rp16a1v5] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

    .cpt-tabla th[b-i2rp16a1v5],
    .cpt-tabla td[b-i2rp16a1v5] {
        padding: .85rem .75rem;
        border-block-end: 1px solid #e2e8f0;
        text-align: start;
        vertical-align: middle;
    }

    /* La cabecera se queda arriba al desplazar un ticket largo. */
    .cpt-tabla th[b-i2rp16a1v5] {
        position: sticky;
        inset-block-start: -1.25rem;
        z-index: 1;
        padding-block: .7rem;
        background: #f8fafc;
        color: #475569;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* Las tres columnas de cifras con su ancho: el resto es para el artículo y su aviso. */
    .cpt-tabla th.cpt-num[b-i2rp16a1v5],
    .cpt-tabla td.cpt-num[b-i2rp16a1v5] {
        inline-size: 7.5rem;
    }

    .cpt-tabla th:last-child[b-i2rp16a1v5],
    .cpt-tabla td:last-child[b-i2rp16a1v5] {
        inline-size: 8.5rem;
    }

.cpt-num[b-i2rp16a1v5] {
    text-align: end !important;
    white-space: nowrap;
}

.cpt-concepto[b-i2rp16a1v5] {
    font-weight: 600;
    line-height: 1.35;
}

.cpt-motivo[b-i2rp16a1v5] {
    margin-block-start: .3rem;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.4;
}

.cpt-fila-off .cpt-concepto[b-i2rp16a1v5] {
    color: #94a3b8;
}

.cpt-input[b-i2rp16a1v5] {
    inline-size: 6rem;
    min-block-size: 2.6rem;
    padding: .4rem .6rem;
    border: 1px solid #cbd5e1;
    border-radius: .55rem;
    font-family: inherit;
    font-size: 1rem;
    text-align: end;
}

    .cpt-input:focus[b-i2rp16a1v5] {
        outline: none;
        border-color: #00288e;
        box-shadow: 0 0 0 3px rgba(0, 40, 142, .2);
    }

.cpt-error[b-i2rp16a1v5] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-block-start: .9rem;
    padding: .6rem .8rem;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .88rem;
}

/* Las dos notas, en un recuadro aparte de la tabla y separadas entre sí: pegadas a la última fila se leían
   como parte de ella. */
.cpt-nota[b-i2rp16a1v5] {
    margin: .6rem 0 0;
    padding: .7rem .9rem;
    border-radius: .6rem;
    background: #f1f5f9;
    color: #475569;
    font-size: .85rem;
    line-height: 1.45;
}

    .cpt-tabla + .cpt-nota[b-i2rp16a1v5],
    .cpt-error + .cpt-nota[b-i2rp16a1v5] {
        margin-block-start: 1.25rem;
    }

    .cpt-nota a[b-i2rp16a1v5] {
        margin-inline-start: .35rem;
        color: #00288e;
        font-weight: 600;
    }

.cpt-acciones[b-i2rp16a1v5] {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-block-start: 1px solid #e2e8f0;
    background: #f8fafc;
}

.cpt-btn[b-i2rp16a1v5] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 3rem;
    padding: 0 1.2rem;
    border-radius: .7rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

    .cpt-btn:disabled[b-i2rp16a1v5] {
        opacity: .5;
        cursor: not-allowed;
    }

.cpt-btn-ghost[b-i2rp16a1v5] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.cpt-btn-primary[b-i2rp16a1v5] {
    border: 1px solid #00288e;
    background: #00288e;
    color: #ffffff;
}

    .cpt-btn-primary:hover:not(:disabled)[b-i2rp16a1v5] {
        background: #001f6e;
    }

@media (max-width: 560px) {
    .cpt-tabla th:nth-child(3)[b-i2rp16a1v5],
    .cpt-tabla td:nth-child(3)[b-i2rp16a1v5] {
        display: none;
    }

    .cpt-tabla th.cpt-num[b-i2rp16a1v5],
    .cpt-tabla td.cpt-num[b-i2rp16a1v5],
    .cpt-tabla th:last-child[b-i2rp16a1v5],
    .cpt-tabla td:last-child[b-i2rp16a1v5] {
        inline-size: auto;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/CobroRapidoModal.razor.rz.scp.css */
/* Cobro rápido del TPV («Pago de documentos»). CSS PROPIO y completo (FUN-V357): este componente no hereda
   nada del CSS scoped de TpvPage, que no le llega. Los colores son los del TPV (azul de marca, verde de cobro)
   escritos aquí; si la página cambia los suyos, este se cambia a la par. Pensado para el teclado y para el
   dedo: campos y botones de al menos 3 rem de alto. */

.cr-overlay[b-u8snx2dywz] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
}

.cr-modal[b-u8snx2dywz],
.cr-modal *[b-u8snx2dywz],
.cr-modal *[b-u8snx2dywz]::before,
.cr-modal *[b-u8snx2dywz]::after {
    box-sizing: border-box;
}

.cr-modal[b-u8snx2dywz] {
    inline-size: min(36rem, 100%);
    max-block-size: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    color: #1a1b22;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
    animation: crEntra-b-u8snx2dywz .2s cubic-bezier(.16, 1, .3, 1) both;
}

/* Cabecera con el TOTAL grande: es lo primero que se mira al cobrar. */
.cr-head[b-u8snx2dywz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #00288e 0%, #1a4fc4 100%);
    color: #ffffff;
}

.cr-head-titulo[b-u8snx2dywz] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-inline-size: 0;
}

    .cr-head-titulo h1[b-u8snx2dywz] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .cr-head-titulo .material-symbols-outlined[b-u8snx2dywz] {
        font-size: 1.5rem;
        opacity: .9;
    }

.cr-total[b-u8snx2dywz] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.cr-total-rotulo[b-u8snx2dywz] {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.cr-total-importe[b-u8snx2dywz] {
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cr-body[b-u8snx2dywz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    overflow-y: auto;
}

.cr-importes[b-u8snx2dywz],
.cr-saldos[b-u8snx2dywz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.cr-campo[b-u8snx2dywz] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-inline-size: 0;
}

    .cr-campo label[b-u8snx2dywz] {
        color: #555766;
        font-size: .78rem;
        font-weight: 600;
    }

.cr-input[b-u8snx2dywz] {
    inline-size: 100%;
    min-block-size: 2.6rem;
    padding: .45rem .7rem;
    border: 1px solid #d6d9e3;
    border-radius: .55rem;
    background: #ffffff;
    color: #1a1b22;
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .cr-input:focus[b-u8snx2dywz] {
        outline: none;
        border-color: #00288e;
        box-shadow: 0 0 0 3px rgba(0, 40, 142, .2);
    }

/* Importes alineados a la derecha, con cifras de ancho fijo: se leen en columna. */
.cr-input-grande[b-u8snx2dywz] {
    min-block-size: 3.2rem;
    font-size: 1.45rem;
    font-weight: 700;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.cr-input-cambio[b-u8snx2dywz] {
    border-color: #b7e4c7;
    background: #effaf3;
    color: #0f7b3f;
}

.cr-input-ro[b-u8snx2dywz] {
    background: #f4f5f9;
    color: #6b6d7a;
}

.cr-fuentes[b-u8snx2dywz] {
    padding: .6rem .85rem;
    border: 1px solid #bfdbfe;
    border-radius: .6rem;
    background: #eff6ff;
    color: #1e40af;
    font-size: .85rem;
}

.cr-warn[b-u8snx2dywz] {
    padding: .6rem .85rem;
    border: 1px solid #f5b5b5;
    border-radius: .6rem;
    background: #fdf1f1;
    color: #a31d1d;
    font-size: .85rem;
    font-weight: 600;
}

.cr-check[b-u8snx2dywz] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

    .cr-check input[b-u8snx2dywz] {
        inline-size: 1.15rem;
        block-size: 1.15rem;
        accent-color: #00288e;
    }

/* Botonera: Contado (verde, el cobro de siempre) y Tarjeta grandes; Cancelar discreto. */
.cr-acciones[b-u8snx2dywz] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .7rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #e4e5ec;
    background: #fafbfd;
}

.cr-btn[b-u8snx2dywz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: 3.4rem;
    padding: 0 1.1rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, border-color .15s ease;
}

    .cr-btn .material-symbols-outlined[b-u8snx2dywz] {
        font-size: 1.4rem;
    }

    .cr-btn:focus-visible[b-u8snx2dywz] {
        outline: 3px solid #1a4fc4;
        outline-offset: 2px;
    }

    .cr-btn:disabled[b-u8snx2dywz] {
        opacity: .45;
        cursor: not-allowed;
    }

    .cr-btn:not(:disabled):hover[b-u8snx2dywz] {
        filter: brightness(.94);
    }

.cr-btn-contado[b-u8snx2dywz] {
    background: #0f7b3f;
    color: #ffffff;
}

.cr-btn-tarjeta[b-u8snx2dywz] {
    background: #00288e;
    color: #ffffff;
}

.cr-btn-cancelar[b-u8snx2dywz] {
    border-color: #e4c4c4;
    background: #ffffff;
    color: #c62828;
    font-size: .9rem;
}

    .cr-btn-cancelar:not(:disabled):hover[b-u8snx2dywz] {
        background: #fdf3f3;
        filter: none;
    }

@media (max-width: 560px) {
    .cr-importes[b-u8snx2dywz],
    .cr-saldos[b-u8snx2dywz] {
        grid-template-columns: 1fr;
    }

    .cr-acciones[b-u8snx2dywz] {
        grid-template-columns: 1fr 1fr;
    }

    .cr-btn-cancelar[b-u8snx2dywz] {
        grid-column: 1 / -1;
    }

    .cr-head[b-u8snx2dywz] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-total[b-u8snx2dywz] {
        align-items: flex-start;
    }
}

@keyframes crEntra-b-u8snx2dywz {
    from {
        opacity: 0;
        transform: translateY(.5rem) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cr-modal[b-u8snx2dywz] {
        animation: none;
    }
}

/* Vale por número (al portador, incidencias 13 T8): campo y botón en la misma fila, tocables. */
.cr-vale-buscar[b-u8snx2dywz] {
    display: flex;
    gap: .4rem;
}

    .cr-vale-buscar .cr-input[b-u8snx2dywz] {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

.cr-btn-mini[b-u8snx2dywz] {
    flex: 0 0 auto;
    min-block-size: 2.6rem;
    padding: 0 .9rem;
    border: 1px solid #00288e;
    border-radius: .55rem;
    background: #ffffff;
    color: #00288e;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

    .cr-btn-mini:hover:not(:disabled)[b-u8snx2dywz] {
        background: #eef2ff;
    }

    .cr-btn-mini:disabled[b-u8snx2dywz] {
        opacity: .5;
        cursor: not-allowed;
    }
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/RecuperarTicketModal.razor.rz.scp.css */
/* Recuperar tickets aparcados (T7). Todo el marcado lo viste este componente, con el mismo aspecto que
   «Tickets emitidos»: no depende del CSS aislado de ninguna página (la trampa de la ventana de cobro, FUN-V357). */

.rt-overlay[b-vtgr2m82ja] {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483000;
    animation: rt-fade-b-vtgr2m82ja .2s ease forwards;
}

.rt-overlay .material-symbols-rounded[b-vtgr2m82ja] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes rt-fade-b-vtgr2m82ja {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rt-card[b-vtgr2m82ja] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 760px;
    max-width: 95vw;
    max-height: 88vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
}

@media (max-width: 700px) {
    .rt-card[b-vtgr2m82ja] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.rt-header[b-vtgr2m82ja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .8rem;
    border-bottom: 1px solid #eef0f3;
}

.rt-title[b-vtgr2m82ja] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
}

.rt-title-icon[b-vtgr2m82ja] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.rt-chip[b-vtgr2m82ja] {
    display: inline-block;
    min-width: 1.6rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.rt-icon-btn[b-vtgr2m82ja] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.rt-icon-btn:hover[b-vtgr2m82ja] {
    background: #f3f4f6;
    color: #111827;
}

.rt-body[b-vtgr2m82ja] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: .75rem 1.25rem 1rem;
}

.rt-vacio[b-vtgr2m82ja] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #64748b;
}

.rt-vacio p[b-vtgr2m82ja] {
    margin: 0;
}

.rt-vacio-icono[b-vtgr2m82ja] {
    font-size: 2.2rem !important;
    color: #cbd5e1;
}

.rt-nota[b-vtgr2m82ja] {
    font-size: .82rem;
    color: #94a3b8;
}

.rt-tabla[b-vtgr2m82ja] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.rt-tabla th[b-vtgr2m82ja],
.rt-tabla td[b-vtgr2m82ja] {
    padding: .55rem .6rem;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
    vertical-align: middle;
}

.rt-tabla thead th[b-vtgr2m82ja] {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
}

.rt-num[b-vtgr2m82ja] {
    text-align: right !important;
}

.rt-fila[b-vtgr2m82ja] {
    cursor: pointer;
    transition: background .12s ease;
}

.rt-fila:hover[b-vtgr2m82ja] {
    background: #eff6ff;
}

.rt-numero[b-vtgr2m82ja] {
    font-weight: 600;
    color: #1d4ed8;
}

.rt-total[b-vtgr2m82ja] {
    font-weight: 600;
}

.rt-acciones[b-vtgr2m82ja] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
}

.rt-btn[b-vtgr2m82ja] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 34px;
    padding: 0 .9rem;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}

.rt-btn:disabled[b-vtgr2m82ja] {
    opacity: .6;
    cursor: default;
}

.rt-btn-ghost[b-vtgr2m82ja] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.rt-btn-ghost:hover:not(:disabled)[b-vtgr2m82ja] {
    background: #f3f4f6;
}

.rt-btn-primary[b-vtgr2m82ja] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.rt-btn-primary:hover:not(:disabled)[b-vtgr2m82ja] {
    background: #1d4ed8;
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/TicketsEmitidosModal.razor.rz.scp.css */
/* «Tickets emitidos» del TPV — todo el marcado lo pinta este componente: no depende del CSS aislado de la
   página (la trampa de la ventana de cobro, FUN-V357). Por debajo del visor de PDF, que se abre encima. */

.tke-overlay[b-eri4b29cxg] {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483000;
    animation: tke-fade-b-eri4b29cxg .2s ease forwards;
}

.tke-overlay .material-symbols-rounded[b-eri4b29cxg] {
    user-select: none;
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes tke-fade-b-eri4b29cxg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tke-card[b-eri4b29cxg] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
    outline: none;
    overflow: hidden;
}

@media (max-width: 700px) {
    .tke-card[b-eri4b29cxg] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.tke-header[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .8rem;
    border-bottom: 1px solid #eef0f3;
}

.tke-title[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
}

.tke-title strong[b-eri4b29cxg] {
    color: #1d4ed8;
}

.tke-title-icon[b-eri4b29cxg] {
    color: #2563eb;
    font-size: 1.45rem !important;
}

.tke-icon-btn[b-eri4b29cxg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.tke-icon-btn:hover[b-eri4b29cxg] {
    background: #f3f4f6;
    color: #111827;
}

.tke-filtros[b-eri4b29cxg] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    padding: .9rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f3;
    flex-wrap: wrap;
}

.tke-campo[b-eri4b29cxg] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.tke-campo-ancho[b-eri4b29cxg] {
    flex: 1;
    min-width: 220px;
}

.tke-label[b-eri4b29cxg] {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.tke-input[b-eri4b29cxg] {
    height: 38px;
    padding: 0 .8rem;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    font-family: inherit;
}

.tke-input:focus[b-eri4b29cxg] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.tke-input-num[b-eri4b29cxg] {
    width: 90px;
    height: 32px;
    text-align: right;
}

.tke-body[b-eri4b29cxg] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: .75rem 1.25rem 1rem;
}

.tke-vacio[b-eri4b29cxg] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
}

.tke-nota[b-eri4b29cxg] {
    margin: .75rem 0 0;
    font-size: .82rem;
    color: #64748b;
}

.tke-tabla[b-eri4b29cxg] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.tke-tabla th[b-eri4b29cxg],
.tke-tabla td[b-eri4b29cxg] {
    padding: .55rem .6rem;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
}

.tke-tabla thead th[b-eri4b29cxg] {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
}

.tke-num[b-eri4b29cxg] {
    text-align: right !important;
}

.tke-fila[b-eri4b29cxg] {
    cursor: pointer;
    transition: background .12s ease;
}

.tke-fila:hover[b-eri4b29cxg] {
    background: #eff6ff;
}

.tke-numero[b-eri4b29cxg] {
    font-weight: 600;
    color: #1d4ed8;
}

.tke-total[b-eri4b29cxg] {
    font-weight: 600;
}

.tke-chip[b-eri4b29cxg] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.tke-chip-ambar[b-eri4b29cxg] {
    background: #fef3c7;
    color: #92400e;
}

.tke-datos[b-eri4b29cxg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: .8rem 1rem;
    margin-bottom: .9rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef0f3;
}

.tke-datos > div[b-eri4b29cxg] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .92rem;
    color: #1f2937;
}

.tke-datos-total span:last-child[b-eri4b29cxg] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1d4ed8;
}

@media (max-width: 700px) {
    .tke-datos[b-eri4b29cxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tke-resumen[b-eri4b29cxg] {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: .75rem .6rem 0;
    font-size: .9rem;
    color: #475569;
}

.tke-resumen-total strong[b-eri4b29cxg] {
    font-size: 1.05rem;
    color: #1f2937;
}

.tke-devoluciones[b-eri4b29cxg] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tke-devolucion[b-eri4b29cxg] {
    display: flex;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: .88rem;
    color: #78350f;
}

.tke-error[b-eri4b29cxg],
.tke-aviso[b-eri4b29cxg] {
    margin-top: .9rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: 9px;
    font-size: .86rem;
}

.tke-error[b-eri4b29cxg] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.tke-aviso[b-eri4b29cxg] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

.tke-acciones[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef0f3;
}

.tke-btn[b-eri4b29cxg] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.tke-btn:disabled[b-eri4b29cxg] {
    opacity: .6;
    cursor: default;
}

.tke-btn-ghost[b-eri4b29cxg] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.tke-btn-ghost:hover:not(:disabled)[b-eri4b29cxg] {
    background: #f3f4f6;
}

.tke-btn-primary[b-eri4b29cxg] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.tke-btn-primary:hover:not(:disabled)[b-eri4b29cxg] {
    background: #1d4ed8;
}

.tke-btn-peligro[b-eri4b29cxg] {
    border: 1px solid #dc2626;
    background: #fff;
    color: #b91c1c;
}

.tke-btn-peligro:hover:not(:disabled)[b-eri4b29cxg] {
    background: #fef2f2;
}

/* ─── Devolver con vale (incidencias 13, T8) ─────────────────────────────── */

.tke-modo[b-eri4b29cxg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .9rem;
}

.tke-modo-op[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .9rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    min-height: 48px;
}

.tke-modo-op input[b-eri4b29cxg] {
    accent-color: #2563eb;
    width: 18px;
    height: 18px;
}

.tke-modo-activo[b-eri4b29cxg] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
}

.tke-modo-off[b-eri4b29cxg] {
    opacity: .5;
    cursor: not-allowed;
}

.tke-vale[b-eri4b29cxg] {
    margin-bottom: .9rem;
    padding: .85rem 1rem;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    background: #f0fdf4;
}

.tke-vale-cabecera[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    color: #14532d;
    font-size: .95rem;
}

.tke-vale-cabecera .tke-chip[b-eri4b29cxg] {
    background: #dcfce7;
    color: #166534;
}

.tke-vale-papel[b-eri4b29cxg] {
    margin: .7rem 0;
    padding: .7rem .9rem;
    max-height: 260px;
    overflow: auto;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font: .8rem/1.35 "Courier New", monospace;
    white-space: pre;
}

.tke-vale-acciones[b-eri4b29cxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.tke-vale-acciones .tke-nota[b-eri4b29cxg] {
    margin: 0;
}

@media (max-width: 560px) {
    .tke-modo[b-eri4b29cxg] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/TpvPage.razor.rz.scp.css */
/* PÁGINA del TPV (fase E9, decisión D5): una ventana más del ERP, que ocupa el área de trabajo de .main-body.

   Incidencias 15: UN TPV NO HACE SCROLL. Todo cabe en la pantalla y el alto que sobra es de las líneas: título y
   acciones en una sola fila fina, cabecera y pie en dos líneas cada uno (etiquetas a la izquierda, como el TPV de
   escritorio) y una botonera fina. Nada de márgenes de adorno: el fondo es el del ERP. */

.fs-ticket-page[b-5if4zcz2ru],
.fs-ticket-page *[b-5if4zcz2ru],
.fs-ticket-page *[b-5if4zcz2ru]::before,
.fs-ticket-page *[b-5if4zcz2ru]::after {
    box-sizing: border-box;
}

.fdp-page.fs-ticket-page[b-5if4zcz2ru] {
    --fdp-primary: #00288e;
    --fdp-danger: #d33a3a;
    --fdp-surface: #ffffff;
    --fdp-surface-lowest: #ffffff;
    --fdp-surface-low: #fafbfd;
    --fdp-surface-container: #f4f5f9;
    --fdp-outline: #8a8b97;
    --fdp-outline-variant: #e4e5ec;
    --fdp-on-surface: #1a1b22;
    --fdp-on-surface-variant: #555766;
    --fdp-radius: .6rem;
    --fdp-radius-sm: .4rem;
    --fdp-shadow: 0 1px 2px 0 rgba(15, 23, 42, .05);
    --fs-gap: .45rem;
    /* El alto es el de la pantalla (lo que cede .main-body) y no se pasa: lo que no cabe lo encoge la rejilla. */
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fs-gap);
    overflow: hidden;
    color: var(--fdp-on-surface);
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Fila de título y acciones ─────────────────────────────────────────────────────────────────── */

.fs-top[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-inline-size: 0;
}

.fs-top-titulo[b-5if4zcz2ru],
.fs-top-acciones[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-inline-size: 0;
}

.fs-top-titulo[b-5if4zcz2ru] {
    flex: 1 1 auto;
    overflow: hidden;
}

.fs-top-acciones[b-5if4zcz2ru] {
    flex: 0 0 auto;
    justify-content: flex-end;
}

    .fs-top-titulo h1[b-5if4zcz2ru] {
        margin: 0;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--fdp-on-surface);
        font-size: 1.12rem;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -.01em;
    }

.fdp-title-number[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-weight: 800;
    margin-inline-start: .2rem;
}

.ff-status-blue[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    padding: .12rem .55rem;
    border: 1px solid #c7dcfb;
    border-radius: 999rem;
    background: #e8f0fe;
    color: #1a56d6;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.fs-info-chip[b-5if4zcz2ru],
.fs-chip-enlace[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-block-size: 1.6rem;
    padding: 0 .5rem;
    border: 1px solid #c7dcfb;
    border-radius: 999rem;
    background: #e8f0fe;
    color: #1a56d6;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.fs-info-chip-soft[b-5if4zcz2ru] {
    border-color: var(--fdp-outline-variant);
    background: var(--fdp-surface-container);
    color: var(--fdp-on-surface-variant);
}

/* El último ticket cobrado, a un clic (FUN-V359). */
.fs-chip-enlace[b-5if4zcz2ru] {
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

    .fs-chip-enlace:hover[b-5if4zcz2ru] {
        border-color: var(--fdp-primary);
    }

.fs-info-chip .material-symbols-outlined[b-5if4zcz2ru],
.fs-chip-enlace .material-symbols-outlined[b-5if4zcz2ru] {
    font-size: .95rem;
    line-height: 1;
}

.ff-mode-pick[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-block-size: 2rem;
    padding: 0 .5rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 8px;
    background: var(--fdp-surface);
    color: var(--fdp-on-surface-variant);
    font-size: .76rem;
    transition: border-color .15s ease, background .15s ease;
}

    .ff-mode-pick:hover[b-5if4zcz2ru],
    .ff-mode-pick:focus-within[b-5if4zcz2ru] {
        border-color: var(--fdp-primary);
        background: var(--fdp-surface-low);
    }

    .ff-mode-pick .material-symbols-outlined[b-5if4zcz2ru] {
        color: var(--fdp-on-surface-variant);
        font-size: 1rem;
        line-height: 1;
    }

button.ff-mode-pick[b-5if4zcz2ru] {
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    color: var(--fdp-on-surface);
    cursor: pointer;
}

    button.ff-mode-pick:focus-visible[b-5if4zcz2ru] {
        outline: 2px solid var(--fdp-primary);
        outline-offset: 2px;
    }

.ff-mode-select[b-5if4zcz2ru] {
    max-inline-size: 11rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fdp-on-surface);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── Botones ───────────────────────────────────────────────────────────────────────────────────── */

[b-5if4zcz2ru] .e-btn.fdp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-block-size: 2rem;
    padding: 0 .75rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 8px;
    background: var(--fdp-surface);
    color: var(--fdp-on-surface);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

    [b-5if4zcz2ru] .e-btn.fdp-btn .material-symbols-outlined {
        font-size: 1.05rem;
        line-height: 1;
    }

    [b-5if4zcz2ru] .e-btn.fdp-btn:hover {
        background: var(--fdp-surface-low);
        border-color: #9aa0b0;
    }

    [b-5if4zcz2ru] .e-btn.fdp-btn:focus-visible {
        outline: 2px solid var(--fdp-primary);
        outline-offset: 2px;
    }

[b-5if4zcz2ru] .e-btn.fdp-btn-primary,
[b-5if4zcz2ru] .e-btn.fdp-btn-primary:hover {
    border-color: var(--fdp-primary);
    background: var(--fdp-primary);
    color: #ffffff;
}

    [b-5if4zcz2ru] .e-btn.fdp-btn-primary:hover {
        filter: brightness(.95);
    }

[b-5if4zcz2ru] .e-btn.fdp-btn-danger {
    color: var(--fdp-danger);
    border-color: color-mix(in srgb, var(--fdp-danger) 40%, #e4e5ec);
    background: #ffffff;
}

    [b-5if4zcz2ru] .e-btn.fdp-btn-danger:hover {
        color: var(--fdp-danger);
        border-color: var(--fdp-danger);
        background: color-mix(in srgb, var(--fdp-danger) 8%, #ffffff);
    }

[b-5if4zcz2ru] .e-btn.fdp-icon-btn {
    inline-size: 2rem;
    min-inline-size: 2rem;
    padding: 0;
}

/* ── Cuerpo: cabecera, líneas y pie ────────────────────────────────────────────────────────────── */

.fs-ticket-content[b-5if4zcz2ru],
.fdp-content[b-5if4zcz2ru] {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fs-gap);
    overflow: hidden;
}

.fdp-card[b-5if4zcz2ru] {
    min-inline-size: 0;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius);
    background: var(--fdp-surface-lowest);
    box-shadow: var(--fdp-shadow);
    overflow: hidden;
}

.fs-head-row[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 18vw, 17rem);
    gap: var(--fs-gap);
    align-items: stretch;
}

.fs-datos[b-5if4zcz2ru],
.fs-pie[b-5if4zcz2ru] {
    flex: 0 0 auto;
}

/* Barras de cabecera, líneas y pie: azul claro con el borde izquierdo azul oscuro (el lenguaje de T7 que se
   queda). Finas: una línea de texto, para no quitarle alto a las líneas. */
.fdp-card-head[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-inline-size: 0;
    min-block-size: 1.95rem;
    padding: .15rem .7rem;
    border-block-end: 1px solid #dfe6f5;
    border-inline-start: 4px solid var(--fdp-primary);
    background: #eef3fd;
}

    .fdp-card-head h2[b-5if4zcz2ru] {
        margin: 0;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--fdp-primary);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.ff-mini-actions[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-inline-size: 0;
}

    .ff-mini-actions .fs-info-chip[b-5if4zcz2ru] {
        min-block-size: 1.4rem;
        font-size: .7rem;
    }

    .ff-mini-actions .ff-mode-pick[b-5if4zcz2ru] {
        min-block-size: 1.5rem;
        padding: 0 .45rem;
        font-size: .72rem;
    }

    .ff-mini-actions .ff-mode-select[b-5if4zcz2ru] {
        font-size: .72rem;
    }

/* Aplazado: el ticket se emite sin cobrar, que se vea. */
.fs-info-chip.fs-info-chip-aviso[b-5if4zcz2ru] {
    border-color: #f3c98b;
    background: #fff4e5;
    color: #a15c00;
}

/* FUN-V566: la marca «sin programa del mostrador» es un botón (abre la recomendación). */
.fs-chip-boton[b-5if4zcz2ru] {
    font-family: inherit;
    cursor: pointer;
}

    .fs-chip-boton:hover[b-5if4zcz2ru] {
        border-color: #a15c00;
    }

.fs-campos[b-5if4zcz2ru] {
    padding: .4rem .7rem;
}

/* Dos líneas de campos con las columnas alineadas: etiqueta · código · nombre, dos veces por línea. */
.fs-campos[b-5if4zcz2ru] {
    display: grid;
    grid-template-columns:
        max-content minmax(6rem, 8.5rem) minmax(0, 1fr)
        max-content minmax(6rem, 8.5rem) minmax(0, 1fr);
    gap: .35rem .55rem;
    align-items: center;
}

.fs-et[b-5if4zcz2ru] {
    margin: 0;
    color: var(--fdp-on-surface-variant);
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* «Vendedor» enlaza a los agentes (FUN-V362) sin dejar de parecer una etiqueta. */
a.fs-et-enlace[b-5if4zcz2ru] {
    color: var(--fdp-on-surface-variant);
    text-decoration: none;
    border-block-end: 1px dotted currentColor;
    justify-self: start;
}

    a.fs-et-enlace:hover[b-5if4zcz2ru] {
        color: var(--fdp-primary);
    }

/* Una etiqueta con su campo dentro de una celda (fecha, cambio, cambio anterior). */
.fs-par[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-inline-size: 0;
}

    .fs-par > .fdp-input[b-5if4zcz2ru] {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

.fdp-field[b-5if4zcz2ru] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

/* «::deep» además del selector directo: el input del código viene de CampoConBuscador (hereda la clase por
   ClaseInput) y el CSS scoped no lo marcaría. */
.fdp-input[b-5if4zcz2ru],
.fdp-field[b-5if4zcz2ru]  .fdp-input {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 2rem;
    padding: .25rem .5rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: #ffffff;
    color: var(--fdp-on-surface);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.3rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .fdp-input:focus[b-5if4zcz2ru],
    .fdp-field[b-5if4zcz2ru]  .fdp-input:focus {
        outline: none;
        border-color: var(--fdp-primary);
        box-shadow: 0 0 0 2px rgba(0, 40, 142, .22);
    }

    .fdp-input:disabled[b-5if4zcz2ru] {
        background: var(--fdp-surface-container);
        color: var(--fdp-outline);
    }

.fdp-readonly[b-5if4zcz2ru] {
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface-variant);
    cursor: default;
    text-overflow: ellipsis;
}

.fs-strong-input[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-weight: 800;
}

/* Ticket (incidencias 16, U0): se teclea el número de uno ya cobrado; la lupa, dentro del campo, abre la lista. */
.fs-ticket-campo[b-5if4zcz2ru] {
    position: relative;
    min-width: 0;
}

.fs-ticket-campo .fdp-input[b-5if4zcz2ru] {
    width: 100%;
    padding-right: 1.9rem;
}

.fs-ticket-lupa[b-5if4zcz2ru] {
    position: absolute;
    top: 50%;
    right: .25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fdp-muted, #64748b);
    cursor: pointer;
}

.fs-ticket-lupa:hover[b-5if4zcz2ru] {
    color: var(--fdp-primary);
}

.fs-ticket-lupa .material-symbols-outlined[b-5if4zcz2ru] {
    font-size: 1.1rem;
}

.fs-importe[b-5if4zcz2ru] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.fs-fecha[b-5if4zcz2ru] {
    max-inline-size: 7rem;
}

/* Forma de pago aplazada: el ticket se emite sin cobrar, que se vea. */
.fdp-readonly.fs-aplazado[b-5if4zcz2ru] {
    color: #a15c00;
    font-weight: 700;
}

/* ── El visor del total: azul suave (el fuerte de T7 cansaba) ──────────────────────────────────── */

.fs-total-card[b-5if4zcz2ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .4rem .75rem;
    border-color: #c7dcfb !important;
    background: #e8f0fe;
}

.fs-total-label[b-5if4zcz2ru] {
    color: var(--fdp-on-surface-variant);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fs-total-amount[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem);
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Líneas: se quedan todo el alto que sobra; si no caben, desliza la rejilla, nunca la página ─── */

.fs-lines-card[b-5if4zcz2ru] {
    flex: 1 1 auto;
    min-block-size: 7rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .fs-lines-card > .fdp-card-head[b-5if4zcz2ru] {
        flex: 0 0 auto;
    }

.fs-lines-body[b-5if4zcz2ru] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
}

[b-5if4zcz2ru] .e-grid.ff-grid {
    inline-size: 100%;
    min-inline-size: max(100%, 60rem);
    border: 0;
    background: var(--fdp-surface-lowest);
    box-shadow: none;
}

    [b-5if4zcz2ru] .e-grid.ff-grid .e-gridheader,
    [b-5if4zcz2ru] .e-grid.ff-grid .e-headercontent,
    [b-5if4zcz2ru] .e-grid.ff-grid .e-gridcontent {
        border-color: var(--fdp-outline-variant);
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-headercell {
        background: #f1f5fd;
        color: #1e3a8a;
        border-color: #dde4f3;
        font-size: .76rem;
        font-weight: 700;
        padding-block: .3rem;
        padding-inline: .5rem;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-rowcell {
        color: var(--fdp-on-surface);
        border-color: #e9ecf3;
        background: #ffffff;
        font-size: .9rem;
        padding: 0;
        vertical-align: middle;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-altrow .e-rowcell {
        background: #f8fafd;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-row:hover .e-rowcell {
        background: #eef3fd;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-content {
        overflow: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

/* El TOTAL de la línea va en negrita: es la cifra que se canta. Las celdas las viste la rejilla común. */
.fs-ticket-page .fs-lines-card[b-5if4zcz2ru]  input[id$="-Total"] {
    font-weight: 700;
    color: var(--fdp-primary);
}

[b-5if4zcz2ru] .e-btn.ff-grid-delete-btn {
    inline-size: 1.8rem;
    min-inline-size: 1.8rem;
    block-size: 1.8rem;
    min-block-size: 1.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f7c9c9;
    border-radius: 8px;
    background: #fdecec;
    color: #c62828;
    box-shadow: none;
}

    [b-5if4zcz2ru] .e-btn.ff-grid-delete-btn .material-symbols-outlined {
        font-size: 1rem;
        line-height: 1;
    }

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-caption {
    display: flex;
    align-items: center;
    gap: .4rem;
    inline-size: 100%;
}

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-title {
    color: var(--fdp-on-surface);
    font-weight: 650;
}

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-title-none {
    color: var(--fdp-on-surface-variant);
    font-style: italic;
}

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-btn {
    padding: .1rem .4rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 4px;
    background: #ffffff;
    color: var(--fdp-on-surface);
    font-size: .82rem;
    line-height: 1;
    cursor: pointer;
}

    [b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-btn:disabled {
        opacity: .35;
        cursor: default;
    }

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-btn-danger {
    border-color: #f7c9c9;
    background: #fdecec;
    color: #c62828;
}

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-input {
    inline-size: 13.5rem;
    max-inline-size: 60%;
    min-block-size: 1.5rem;
    padding: .1rem .4rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 4px;
    font-size: .85rem;
}

[b-5if4zcz2ru] .ff-lines-datagrid .ff-sec-sum {
    margin-inline-start: auto;
    color: var(--fdp-on-surface);
    font-weight: 750;
}

/* ── Botonera fina ─────────────────────────────────────────────────────────────────────────────── */

.fs-bottom-bar[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-inline-size: 0;
    /* Hueco para el botón flotante del dock (abajo a la derecha): sin él tapaba el último botón. */
    padding-inline-end: 4.5rem;
}

/* La botonera no puede partirse en dos líneas (le quitaría alto a las líneas). */
.fs-bottom-bar > .fs-bottom-actions[b-5if4zcz2ru] {
    margin-inline-start: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.fdp-actions-bar[b-5if4zcz2ru],
.fs-bottom-actions[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}

[b-5if4zcz2ru] .fs-bottom-actions .e-btn.fdp-btn {
    min-block-size: 2.3rem;
    padding: 0 .85rem;
    font-size: .84rem;
}

[b-5if4zcz2ru] .fs-bottom-actions .e-btn.fdp-btn-primary {
    min-inline-size: 11rem;
    font-size: .9rem;
}

/* ── Pantallas estrechas (no son un mostrador): el TPV deja de repartir el alto y crece con su contenido ── */

@media (max-width: 900px) {
    .fs-top[b-5if4zcz2ru] {
        flex-wrap: wrap;
    }

    .fs-head-row[b-5if4zcz2ru] {
        grid-template-columns: 1fr;
    }

    .fs-campos[b-5if4zcz2ru] {
        grid-template-columns: max-content minmax(6rem, 8.5rem) minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .fdp-page.fs-ticket-page[b-5if4zcz2ru] {
        block-size: auto;
        min-block-size: 100%;
        overflow: visible;
    }

    .fs-ticket-content[b-5if4zcz2ru] {
        overflow: visible;
    }

    .fs-lines-card[b-5if4zcz2ru] {
        flex: 0 0 auto;
        block-size: 22rem;
    }

    .fs-top-acciones[b-5if4zcz2ru],
    .fs-bottom-bar[b-5if4zcz2ru],
    .fs-bottom-bar > .fs-bottom-actions[b-5if4zcz2ru] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/TransformarTicketModal.razor.rz.scp.css */
/* Transformar el ticket (T6): reutiliza el chasis de la modal de cobro (cr-*) y añade la pista informativa. */

.tt-modal[b-bs1kt3uu3p] {
    width: min(560px, 92vw);
}

.tt-hint[b-bs1kt3uu3p] {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.4;
}

.tt-hint .material-symbols-outlined[b-bs1kt3uu3p] {
    font-size: 18px;
    flex: 0 0 auto;
}
/* _content/ErpPowergest/Presentation/Ventas/FacturasPendientes/Pages/FacturasPendientes.razor.rz.scp.css */
.facturas-pendientes-page[b-daqe8x241f],
.facturas-pendientes-page *[b-daqe8x241f],
.facturas-pendientes-page *[b-daqe8x241f]::before,
.facturas-pendientes-page *[b-daqe8x241f]::after {
    box-sizing: border-box;
}

.facturas-pendientes-page[b-daqe8x241f] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: facturasPendientesPageIn-b-daqe8x241f 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.facturas-pendientes-title[b-daqe8x241f] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.facturas-pendientes-subtitle[b-daqe8x241f] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

/* PANEL GENERAL */

.card-panel[b-daqe8x241f] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* LISTADO */

.facturas-pendientes-list-panel[b-daqe8x241f] {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.facturas-pendientes-list-header[b-daqe8x241f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .facturas-pendientes-list-header > div:first-child[b-daqe8x241f] {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title[b-daqe8x241f] {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-daqe8x241f] {
    margin: 0;
}

.facturas-pendientes-list-subtitle[b-daqe8x241f] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.facturas-pendientes-header-actions[b-daqe8x241f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* FILTROS */

.facturas-pendientes-filters[b-daqe8x241f] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: center;
}

.fp-filter-item[b-daqe8x241f],
.fp-filter-item-search[b-daqe8x241f] {
    min-width: 0;
}

.fp-filter-input[b-daqe8x241f],
.fp-filter-select[b-daqe8x241f] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fp-filter-input[b-daqe8x241f] {
    padding: 0 13px;
}

.fp-filter-select[b-daqe8x241f] {
    padding: 0 12px;
    cursor: pointer;
}

.fp-filter-input[b-daqe8x241f]::placeholder {
    color: #9ca3af;
}

.fp-filter-input:focus[b-daqe8x241f],
.fp-filter-select:focus[b-daqe8x241f] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* BOTONES */

.fp-action-btn[b-daqe8x241f] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
}

    .fp-action-btn:hover[b-daqe8x241f] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* RESULTADOS */

.fp-results-bar[b-daqe8x241f] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
}

.fp-results-text[b-daqe8x241f] {
    font-size: 12px;
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

/* GRID */

.fp-grid-wrapper[b-daqe8x241f] {
    min-height: 0;
    height: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
}

.fp-grid.e-grid[b-daqe8x241f] {
    height: 100%;
    width: 100%;
    min-width: 1020px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.fp-grid .e-gridheader[b-daqe8x241f] {
    border-bottom: 1px solid #eef2f7;
}

.fp-grid .e-headercell[b-daqe8x241f] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.fp-grid .e-headertext[b-daqe8x241f] {
    font-size: 12px;
    font-weight: 850;
}

.fp-grid .e-rowcell[b-daqe8x241f] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fp-grid .e-gridcontent[b-daqe8x241f],
.fp-grid .e-table[b-daqe8x241f] {
    cursor: pointer;
}

.fp-grid .e-row:hover .e-rowcell[b-daqe8x241f] {
    background: #f8fbff;
}

.fp-grid .e-altrow .e-rowcell[b-daqe8x241f] {
    background: #fcfdff;
}

.fp-grid .e-pager[b-daqe8x241f] {
    border-top: 1px solid #eef2f7;
    background: #ffffff;
    min-height: 42px;
}

.fp-grid .e-content[b-daqe8x241f] {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .fp-grid .e-content[b-daqe8x241f]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .fp-grid .e-content[b-daqe8x241f]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fp-grid .e-content[b-daqe8x241f]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .fp-grid .e-content[b-daqe8x241f]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ESTADOS */

.fp-estado-badge[b-daqe8x241f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fp-estado-blue[b-daqe8x241f] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fp-estado-orange[b-daqe8x241f] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fp-estado-red[b-daqe8x241f] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes facturasPendientesPageIn-b-daqe8x241f {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .facturas-pendientes-page[b-daqe8x241f] {
        height: calc(100dvh - 96px);
    }

    .facturas-pendientes-filters[b-daqe8x241f] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .facturas-pendientes-page[b-daqe8x241f] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .facturas-pendientes-list-panel[b-daqe8x241f] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .facturas-pendientes-list-header[b-daqe8x241f] {
        flex-direction: column;
        align-items: stretch;
    }

    .facturas-pendientes-header-actions[b-daqe8x241f] {
        justify-content: flex-end;
    }

    .facturas-pendientes-filters[b-daqe8x241f] {
        grid-template-columns: 1fr 1fr;
    }

    .fp-filter-item-search[b-daqe8x241f] {
        grid-column: 1 / -1;
    }

    .fp-grid-wrapper[b-daqe8x241f] {
        height: auto;
        min-height: 440px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .fp-grid.e-grid[b-daqe8x241f] {
        min-width: 1020px;
    }
}

@media (max-width: 768px) {
    .facturas-pendientes-filters[b-daqe8x241f] {
        grid-template-columns: 1fr;
    }

    .facturas-pendientes-header-actions[b-daqe8x241f] {
        width: 100%;
    }

        .facturas-pendientes-header-actions .fp-action-btn[b-daqe8x241f] {
            width: 100%;
        }

    .fp-grid-wrapper[b-daqe8x241f] {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .facturas-pendientes-title[b-daqe8x241f] {
        font-size: 20px;
    }

    .facturas-pendientes-subtitle[b-daqe8x241f] {
        font-size: 12px;
    }

    .card-panel[b-daqe8x241f] {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .facturas-pendientes-page[b-daqe8x241f],
    .facturas-pendientes-page *[b-daqe8x241f],
    .facturas-pendientes-page *[b-daqe8x241f]::before,
    .facturas-pendientes-page *[b-daqe8x241f]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FormasPago/Components/FormaPagoModal.razor.rz.scp.css */
.fpg-modal-backdrop[b-msnhkl7lxj] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.fpg-modal-card[b-msnhkl7lxj] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Los iconos (material symbols) no deben poder seleccionarse. */
.fpg-modal-card .material-symbols-outlined[b-msnhkl7lxj] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.fpg-modal-header[b-msnhkl7lxj] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f7;
}

.fpg-modal-title[b-msnhkl7lxj] {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.fpg-modal-body[b-msnhkl7lxj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpg-modal-field[b-msnhkl7lxj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fpg-modal-label[b-msnhkl7lxj] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* Calendario de pago: dos columnas para no alargar el modal; los campos marcados como «full»
   (plazos) ocupan la línea entera. */
.fpg-modal-grid[b-msnhkl7lxj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fpg-modal-field-full[b-msnhkl7lxj] {
    grid-column: 1 / -1;
}

@media (max-width: 460px) {
    .fpg-modal-grid[b-msnhkl7lxj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* «::deep» además del selector directo: las cuentas de tarjeta y de banco se eligen con
   <CampoConBuscador>, y su <input> hereda esta clase vía ClaseInput pero lo renderiza el componente
   HIJO, así que el CSS scoped no lo marcaría y el campo saldría SIN estilo. Anclado en
   .fpg-modal-field (de este modal) para no sangrar a otros componentes. Misma solución que
   .art-modal-input en el alta de artículos. */
.fpg-modal-input[b-msnhkl7lxj],
.fpg-modal-field[b-msnhkl7lxj]  .fpg-modal-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .fpg-modal-input[b-msnhkl7lxj]::placeholder,
    .fpg-modal-field[b-msnhkl7lxj]  .fpg-modal-input::placeholder {
        color: #9aa6b2;
        font-weight: 500;
    }

    .fpg-modal-input:focus[b-msnhkl7lxj],
    .fpg-modal-field[b-msnhkl7lxj]  .fpg-modal-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    /* Al contado el calendario queda bloqueado en sus valores neutros: se ve, pero no se edita. */
    .fpg-modal-input:disabled[b-msnhkl7lxj] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

/* Conmutador "Forma de pago activa": casilla + texto descriptivo en una tarjeta. */
.fpg-modal-toggle[b-msnhkl7lxj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fafcff;
    cursor: pointer;
}

.fpg-modal-toggle input[type="checkbox"][b-msnhkl7lxj] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.fpg-modal-toggle span[b-msnhkl7lxj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fpg-modal-toggle strong[b-msnhkl7lxj] {
    font-size: 13px;
    font-weight: 850;
    color: #0f172a;
}

.fpg-modal-toggle small[b-msnhkl7lxj] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Aclaración bajo un campo cuyo comportamiento no se adivina del rótulo (el día de cobro). Mismo
   tono que el texto del conmutador: es explicación, no aviso. */
.fpg-modal-hint[b-msnhkl7lxj] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Aviso: no es un error —se puede guardar— sino una consecuencia que conviene ver antes de guardar. */
.fpg-modal-hint-aviso[b-msnhkl7lxj] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    background: #fffbeb;
    color: #92400e;
}

.fpg-modal-actions[b-msnhkl7lxj] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef2f7;
}

/* Botones con el mismo estilo que FamiliaNuevaModal (sin animaciones de traslación en hover). */
.btn[b-msnhkl7lxj] {
    padding: 0.55rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover[b-msnhkl7lxj] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn:active[b-msnhkl7lxj] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Aceptar (Guardar) */
.btn-accept[b-msnhkl7lxj] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d1d5db;
}

    .btn-accept:hover[b-msnhkl7lxj] {
        background: #f3f4f6;
    }

    .btn-accept:disabled[b-msnhkl7lxj] {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Cancelar */
.btn-cancel[b-msnhkl7lxj] {
    background: #6b7280;
    color: #fff;
    border: none;
}

    .btn-cancel:hover[b-msnhkl7lxj] {
        background: #4b5563;
    }

/* Pantallas pequeñas (móviles): el modal ocupa toda la pantalla con scroll vertical interno. */
@media (max-width: 560px) {
    .fpg-modal-backdrop[b-msnhkl7lxj] {
        padding: 0;
    }

    .fpg-modal-card[b-msnhkl7lxj] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    /* El pie NO se apila: los botones se reparten el ancho mitad y mitad, y el aviso de campos
       obligatorios se coloca encima. Lo gobierna `.modal-actions` en app.css, igual en todos los
       modales de la aplicación. */
}
/* _content/ErpPowergest/Presentation/Ventas/FormasPago/Pages/FormasPagoPage.razor.rz.scp.css */
.fpagos-page[b-vzch2kybfw],
.fpagos-page *[b-vzch2kybfw],
.fpagos-page *[b-vzch2kybfw]::before,
.fpagos-page *[b-vzch2kybfw]::after {
    box-sizing: border-box;
}

.fpagos-page[b-vzch2kybfw] {
    /* Rellena el alto disponible que le cede .main-body (sin número mágico).
       min-height actúa como suelo de comodidad: si el viewport es muy bajo,
       la página crece y deja que .main-body haga scroll en vez de aplastar el grid. */
    height: 100%;
    min-height: 520px;
    /* Flex en columna (no grid): el número de hijos varía según aparezca o no el banner de error, y con
       filas fijas la fila sobrante seguía aportando su gap (doble separación bajo el buscador). */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: fpagosPageIn-b-vzch2kybfw 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fpagos-header[b-vzch2kybfw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .fpagos-header > div:first-child[b-vzch2kybfw] {
        /* Absorbe el espacio libre para empujar el CommandBar a la esquina superior derecha; nunca
           cede por debajo de este suelo, así el texto envuelve por palabras (no letra a letra). */
        flex: 1 1 auto;
        min-width: min(100%, 16rem);
    }

.fpagos-title[b-vzch2kybfw] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.fpagos-subtitle[b-vzch2kybfw] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* Fase 2: el CommandBar ya está totalmente replegado -> el texto del título cede y envuelve. */
.fpagos-header.command-bar-host-collapsed .fpagos-title[b-vzch2kybfw],
.fpagos-header.command-bar-host-collapsed .fpagos-subtitle[b-vzch2kybfw] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea a la derecha. Usa el estilo por
   defecto del componente (botones compactos icono+texto). */
.fpagos-header-actions[b-vzch2kybfw] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.fpagos-error-banner[b-vzch2kybfw] {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    font-size: 13px;
}

.fpagos-filters[b-vzch2kybfw] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr);
    gap: 10px;
    align-items: center;
}

.fpg-filter-item[b-vzch2kybfw],
.fpg-filter-item-search[b-vzch2kybfw] {
    min-width: 0;
}

.fpg-filter-searchbox[b-vzch2kybfw] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.fpg-filter-search-icon[b-vzch2kybfw] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.fpg-filter-input[b-vzch2kybfw] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    padding: 0 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fpg-filter-input-search[b-vzch2kybfw] {
    padding-left: 38px;
}

.fpg-filter-input[b-vzch2kybfw]::placeholder {
    color: #9ca3af;
}

.fpg-filter-input:focus[b-vzch2kybfw] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* TABLA */

/* Marco de la tabla: consume el alto que dejan libre la cabecera y el buscador (con o sin banner de
   error), y dentro de él el paginador queda anclado abajo. */
.fpg-table-shell[b-vzch2kybfw] {
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

/* Sin scroll propio: la tabla se despliega entera y el desplazamiento vertical lo hace el contenedor
   de la página. */
.fpg-table-scroll[b-vzch2kybfw] {
    min-height: 0;
}

.fpg-table[b-vzch2kybfw] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #1f2937;
}

/* Cabecera fija: se mantiene visible mientras el cuerpo hace scroll. */
.fpg-table thead th[b-vzch2kybfw] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

/* Cabecera sin orden (Acciones): mismo alto y ritmo tipográfico que las ordenables. */
.fpg-table thead th.fpg-th-plain[b-vzch2kybfw] {
    padding: 0 14px;
    height: 42px;
    text-align: center;
}

/* Botón de orden: ocupa toda la celda de cabecera para que el área de clic sea la columna entera. */
.fpg-sort[b-vzch2kybfw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, color 0.16s ease;
}

    .fpg-sort:hover[b-vzch2kybfw] {
        background: #f1f5f9;
        color: #334155;
    }

    .fpg-sort:focus-visible[b-vzch2kybfw] {
        outline: 2px solid #93c5fd;
        outline-offset: -2px;
    }

.fpg-sort-center[b-vzch2kybfw] {
    justify-content: center;
}

.fpg-sort-icon[b-vzch2kybfw] {
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

/* Columna no ordenada: el icono reserva su hueco (opacity, no display, para que el texto de la cabecera
   no se desplace) y solo aparece al pasar el puntero o al enfocar con teclado. */
.fpg-sort-icon-inactivo[b-vzch2kybfw] {
    opacity: 0;
}

.fpg-sort:hover .fpg-sort-icon-inactivo[b-vzch2kybfw],
.fpg-sort:focus-visible .fpg-sort-icon-inactivo[b-vzch2kybfw] {
    opacity: 1;
}

.fpg-table tbody td[b-vzch2kybfw] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    /* Permite el salto de línea (incluso partiendo palabras largas sin espacios) en celdas estrechas. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fpg-table tbody tr[b-vzch2kybfw] {
    cursor: pointer;
    transition: background 0.14s ease;
}

    .fpg-table tbody tr:hover td[b-vzch2kybfw] {
        background: #f8fbff;
    }

    /* La última fila no dibuja separador: el borde inferior lo pone el paginador. */
    .fpg-table tbody tr:last-child td[b-vzch2kybfw] {
        border-bottom: none;
    }

/* Anchos de columna: «Título» absorbe el espacio sobrante; el resto es contenido. */
.fpg-col-codigo[b-vzch2kybfw] {
    width: 120px;
}

.fpg-col-tipo[b-vzch2kybfw] {
    width: 130px;
    text-align: center;
}

.fpg-col-plazos[b-vzch2kybfw] {
    width: 90px;
    text-align: center;
}

.fpg-col-inicial[b-vzch2kybfw],
.fpg-col-siguientes[b-vzch2kybfw],
.fpg-col-periodo[b-vzch2kybfw] {
    width: 110px;
    text-align: center;
}

.fpg-col-acciones[b-vzch2kybfw] {
    width: 110px;
    text-align: center;
}

/* ESTADO VACÍO */

.fpg-empty[b-vzch2kybfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 20px;
    text-align: center;
}

.fpg-empty-icon[b-vzch2kybfw] {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.fpg-empty-title[b-vzch2kybfw] {
    font-size: 14px;
    font-weight: 800;
    color: #475569;
}

.fpg-empty-text[b-vzch2kybfw] {
    font-size: 12px;
    color: #94a3b8;
    max-width: 380px;
}

/* PAGINADOR */

.fpg-pager[b-vzch2kybfw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 7px 12px;
    border-top: 1px solid #eef2f7;
    background: #fcfdff;
}

.fpg-pager-info[b-vzch2kybfw] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.fpg-pager-nav[b-vzch2kybfw] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fpg-pager-btn[b-vzch2kybfw],
.fpg-pager-page[b-vzch2kybfw] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .fpg-pager-btn:hover:not(:disabled)[b-vzch2kybfw],
    .fpg-pager-page:hover[b-vzch2kybfw] {
        background: #eef2f7;
        color: #1f2937;
    }

    .fpg-pager-btn:disabled[b-vzch2kybfw] {
        opacity: 0.4;
        cursor: default;
    }

    .fpg-pager-btn .material-symbols-outlined[b-vzch2kybfw] {
        font-size: 18px;
        pointer-events: none;
    }

/* Página activa: relleno primary sólido, como el botón principal de la cabecera. */
.fpg-pager-page-active[b-vzch2kybfw],
.fpg-pager-page-active:hover[b-vzch2kybfw] {
    background: #00288e;
    border-color: #00288e;
    color: #ffffff;
}

/* Acciones por fila (editar / borrar): botones-icono compactos, modelados en .art-property-remove-btn. */
.fpg-row-actions[b-vzch2kybfw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fpg-action-btn[b-vzch2kybfw] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    /* Evita que el usuario pueda seleccionar/resaltar el glifo del icono (texto de la ligadura). */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .fpg-action-btn .material-symbols-outlined[b-vzch2kybfw] {
        font-size: 18px;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

/* Editar: texto y borde tenue en color primary; hover con fondo primary/10. */
.fpg-action-btn-edit[b-vzch2kybfw] {
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.2);
}

    .fpg-action-btn-edit:hover[b-vzch2kybfw] {
        background: rgba(0, 40, 142, 0.1);
    }

/* Eliminar: gris neutro sin borde; en hover vira a rojo de error con fondo error/10. */
.fpg-action-btn-delete[b-vzch2kybfw] {
    color: #444653;
}

    .fpg-action-btn-delete:hover[b-vzch2kybfw] {
        color: #ba1a1a;
        background: rgba(186, 26, 26, 0.1);
    }

/* Badge circular de nivel (tinte primary, como el mockup). */
.fpg-plazos-badge[b-vzch2kybfw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(0, 40, 142, 0.1);
    color: #00288e;
    border: 1px solid rgba(0, 40, 142, 0.2);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.fpg-tipo-badge[b-vzch2kybfw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fpg-tipo-contado[b-vzch2kybfw] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fpg-tipo-aplazada[b-vzch2kybfw] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

/* ANIMACIONES */

@keyframes fpagosPageIn-b-vzch2kybfw {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .fpagos-page[b-vzch2kybfw] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }
}

/* Pantallas BAJAS (poca altura): el modelo de "rellenar el alto disponible" aplastaría la tabla.
   En su lugar dejamos que la página crezca (height auto + overflow visible) para que sea el contenedor
   (.main-body) quien haga el scroll vertical, y garantizamos una altura mínima utilizable de la tabla
   para que sus filas sigan siendo visibles aunque la pantalla sea muy baja. */
@media (max-height: 720px) {
    .fpagos-page[b-vzch2kybfw] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .fpg-table-shell[b-vzch2kybfw] {
        /* Suelo de altura para que la tabla muestre varias filas antes de desplazar internamente. */
        min-height: 320px;
    }
}

/* Columnas replegables: el calendario de pago se va retirando de fuera hacia dentro según se estrecha
   la pantalla («Periodo», «Siguientes», «Inicial» y, por último, «Plazos»); «Código», «Tipo», «Título»
   y «Acciones» permanecen siempre visibles. */
@media (max-width: 860px) {
    .fpg-col-periodo[b-vzch2kybfw] {
        display: none;
    }
}

@media (max-width: 760px) {
    .fpg-col-siguientes[b-vzch2kybfw] {
        display: none;
    }
}

@media (max-width: 660px) {
    .fpg-col-inicial[b-vzch2kybfw] {
        display: none;
    }
}

@media (max-width: 580px) {
    .fpg-col-plazos[b-vzch2kybfw] {
        display: none;
    }
}

@media (max-width: 640px) {
    .fpagos-title[b-vzch2kybfw] {
        font-size: 20px;
    }

    .fpagos-subtitle[b-vzch2kybfw] {
        font-size: 12px;
    }

    .fpg-pager[b-vzch2kybfw] {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fpagos-page[b-vzch2kybfw],
    .fpagos-page *[b-vzch2kybfw],
    .fpagos-page *[b-vzch2kybfw]::before,
    .fpagos-page *[b-vzch2kybfw]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/Panel/Pages/VentasPanelPage.razor.rz.scp.css */
.ventas-panel[b-l6wums78ch],
.ventas-panel *[b-l6wums78ch],
.ventas-panel *[b-l6wums78ch]::before,
.ventas-panel *[b-l6wums78ch]::after {
    box-sizing: border-box;
}

.ventas-panel[b-l6wums78ch] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA (mismo patrón visual que el resto de pantallas: cc-header) */

.cc-header[b-l6wums78ch] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cc-eyebrow[b-l6wums78ch] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.cc-title[b-l6wums78ch] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.cc-subtitle[b-l6wums78ch] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.cc-header-actions[b-l6wums78ch] {
    display: flex;
    gap: 8px;
}

/* TARJETAS */

.cc-card[b-l6wums78ch] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.cc-section-title[b-l6wums78ch] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.cc-list-subtitle[b-l6wums78ch] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.cc-list-head[b-l6wums78ch] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cc-empty[b-l6wums78ch] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.cc-error-box[b-l6wums78ch] {
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 12px;
    color: #991b1b;
    font-weight: 700;
}

/* KPIs */

.vp-kpis[b-l6wums78ch] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vp-kpi[b-l6wums78ch] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #cbd5e1;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.vp-kpi-label[b-l6wums78ch] {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}

.vp-kpi-valor[b-l6wums78ch] {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 850;
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vp-kpi-hint[b-l6wums78ch] {
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
}

.vp-kpi-blue[b-l6wums78ch] {
    border-left-color: #2563eb;
}

.vp-kpi-purple[b-l6wums78ch] {
    border-left-color: #7c3aed;
}

.vp-kpi-orange[b-l6wums78ch] {
    border-left-color: #d97706;
}

.vp-kpi-green[b-l6wums78ch] {
    border-left-color: #059669;
}

/* TABLA */

.cc-grid-wrapper[b-l6wums78ch] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.cc-table[b-l6wums78ch] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .cc-table thead th[b-l6wums78ch] {
        background: #f8fafc;
        color: #475569;
        font-weight: 850;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px solid #eef2f7;
        white-space: nowrap;
    }

    .cc-table tbody td[b-l6wums78ch] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .cc-table tbody tr:last-child td[b-l6wums78ch] {
        border-bottom: 0;
    }

.cc-row:hover[b-l6wums78ch] {
    background: #f8fbff;
}

.cc-col-importe[b-l6wums78ch] {
    text-align: right;
    white-space: nowrap;
    width: 150px;
    font-variant-numeric: tabular-nums;
}

.cc-table thead .cc-col-importe[b-l6wums78ch] {
    text-align: right;
}

.vp-col-tipo[b-l6wums78ch] {
    width: 170px;
    white-space: nowrap;
}

.vp-col-numero[b-l6wums78ch] {
    min-width: 180px;
}

.vp-col-fecha[b-l6wums78ch] {
    width: 110px;
    white-space: nowrap;
}

.vp-col-accion[b-l6wums78ch] {
    width: 90px;
    text-align: right;
    white-space: nowrap;
}

.vp-numero[b-l6wums78ch] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
}

/* BADGES */

.cc-badge[b-l6wums78ch] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vp-badge-tipo[b-l6wums78ch] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.vp-badge-antiguo[b-l6wums78ch] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
    margin-left: 8px;
}

.vp-badge-ico[b-l6wums78ch] {
    font-size: 14px;
    line-height: 1;
}

/* ACCIONES FRECUENTES */

.vp-acciones[b-l6wums78ch] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vp-accion[b-l6wums78ch] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .vp-accion:hover[b-l6wums78ch] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

.vp-accion-ico[b-l6wums78ch] {
    font-size: 22px;
    line-height: 1;
    color: #2563eb;
}

.vp-accion-texto[b-l6wums78ch] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vp-accion-titulo[b-l6wums78ch] {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}

.vp-accion-desc[b-l6wums78ch] {
    font-size: 11.5px;
    color: #6b7280;
}

/* BOTONES */

.cc-btn[b-l6wums78ch] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cc-btn-mini[b-l6wums78ch] {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

.cc-btn-ico[b-l6wums78ch] {
    font-size: 18px;
    line-height: 1;
}

.cc-btn-primary[b-l6wums78ch] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cc-btn-primary:hover:not(:disabled)[b-l6wums78ch] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cc-btn-ghost[b-l6wums78ch] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cc-btn-ghost:hover:not(:disabled)[b-l6wums78ch] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.cc-btn:disabled[b-l6wums78ch] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .vp-kpis[b-l6wums78ch] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vp-acciones[b-l6wums78ch] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vp-kpis[b-l6wums78ch],
    .vp-acciones[b-l6wums78ch] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/BuscadorTactil.razor.rz.scp.css */
.bt-velo[b-r7yb3onhet] {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 25, 40, 0.45);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    user-select: none;
}

.bt-ventana[b-r7yb3onhet] {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: #ffffff;
    color: #1b2430;
    box-shadow: 0 16px 40px rgba(20, 40, 70, 0.3);
}

.bt-cabecera[b-r7yb3onhet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-cabecera h2[b-r7yb3onhet] {
    margin: 0;
    font-size: 18px;
}

.bt-cerrar[b-r7yb3onhet] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bt-visor[b-r7yb3onhet] {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    background: #1b2430;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}

.bt-resultados[b-r7yb3onhet] {
    min-height: 120px;
    max-height: 30vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
}

.bt-nada[b-r7yb3onhet] {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: #4a5565;
}

.bt-opcion[b-r7yb3onhet] {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #d3dae4;
    background: #f6f8fb;
    color: #1b2430;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.bt-opcion:active[b-r7yb3onhet] {
    background: #e4eefa;
}

.bt-opcion-nombre[b-r7yb3onhet] {
    font-size: 15px;
    font-weight: 600;
}

.bt-opcion-codigo[b-r7yb3onhet] {
    font-size: 12px;
    color: #4a5565;
}

.bt-teclado[b-r7yb3onhet] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bt-fila[b-r7yb3onhet] {
    display: flex;
    gap: 6px;
}

.bt-tecla[b-r7yb3onhet] {
    flex: 1;
    min-width: 0;
    height: 52px;
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-tecla:active[b-r7yb3onhet] {
    background: #e4eefa;
}

.bt-ancha[b-r7yb3onhet] {
    flex: 2;
    font-size: 14px;
    background: #f1f3f6;
}

.bt-espacio[b-r7yb3onhet] {
    flex: 6;
    font-size: 14px;
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/CobroTactil.razor.rz.scp.css */
.ct-velo[b-dn2ldfp5q5] {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    background: #eef1f5;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    user-select: none;
}

.ct-ventana[b-dn2ldfp5q5] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 14px;
    padding: 14px;
    color: #1b2430;
}

.ct-ventana button[b-dn2ldfp5q5] {
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.ct-ventana button:disabled[b-dn2ldfp5q5] {
    opacity: 0.45;
    cursor: default;
}

/* Resumen */

.ct-resumen[b-dn2ldfp5q5] {
    width: clamp(280px, 28vw, 380px);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-total[b-dn2ldfp5q5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 12px;
    background: #e4eefa;
    border: 1px solid #bcd3ee;
    color: #0f3d75;
}

.ct-rotulo[b-dn2ldfp5q5] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.ct-importe[b-dn2ldfp5q5] {
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ct-cuentas[b-dn2ldfp5q5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #d9dee6;
}

.ct-fila[b-dn2ldfp5q5] {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.ct-fila-grande[b-dn2ldfp5q5] {
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid #e2e6ec;
    font-size: 18px;
    font-weight: 600;
}

.ct-cambio[b-dn2ldfp5q5] {
    font-size: 32px;
    font-weight: 700;
    color: #157a43;
}

.ct-falta[b-dn2ldfp5q5] {
    font-size: 32px;
    font-weight: 700;
    color: #9a2a22;
}

/* Centro */

.ct-centro[b-dn2ldfp5q5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-medios[b-dn2ldfp5q5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ct-medio[b-dn2ldfp5q5] {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    text-align: left;
}

.ct-medio-activo[b-dn2ldfp5q5] {
    border: 0;
    background: #16365f;
    color: #ffffff;
}

.ct-medio-nombre[b-dn2ldfp5q5] {
    font-size: 18px;
    font-weight: 700;
}

.ct-medio-ayuda[b-dn2ldfp5q5] {
    font-size: 12px;
    opacity: 0.85;
}

.ct-datafonos[b-dn2ldfp5q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-datafono[b-dn2ldfp5q5] {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 24px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 14px;
}

.ct-datafono-activo[b-dn2ldfp5q5] {
    border-color: #1e5aa8;
    background: #e4eefa;
    font-weight: 600;
}

.ct-subtitulo[b-dn2ldfp5q5] {
    font-size: 12px;
    font-weight: 600;
    color: #4a5565;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct-billetes[b-dn2ldfp5q5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 76px;
    gap: 10px;
}

.ct-boton[b-dn2ldfp5q5] {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 16px;
    font-weight: 600;
}

.ct-billete[b-dn2ldfp5q5] {
    font-size: 22px;
    font-weight: 700;
}

.ct-exacto[b-dn2ldfp5q5] {
    border: 0;
    background: #1e5aa8;
    color: #ffffff;
    font-size: 17px;
}

.ct-saldo[b-dn2ldfp5q5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-color: #9a5f00;
    color: #6e4400;
    font-size: 14px;
    text-align: left;
}

.ct-hueco[b-dn2ldfp5q5] {
    flex: 1;
}

.ct-acciones[b-dn2ldfp5q5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 80px;
    gap: 10px;
}

.ct-sin-papel[b-dn2ldfp5q5] {
    border-color: #157a43;
    color: #157a43;
}

.ct-cobrar[b-dn2ldfp5q5] {
    border: 0;
    background: #157a43;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

/* Teclado */

.ct-teclado[b-dn2ldfp5q5] {
    width: clamp(260px, 24vw, 330px);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #e3e8ef;
}

.ct-visor[b-dn2ldfp5q5] {
    height: 64px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    background: #1b2430;
    color: #ffffff;
}

.ct-visor-que[b-dn2ldfp5q5] {
    font-size: 11px;
    color: #aeb9c8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct-visor-valor[b-dn2ldfp5q5] {
    font-size: 26px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-numerico[b-dn2ldfp5q5] {
    flex: 1;
    min-height: 240px;
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/PropiedadesBotonTpv.razor.rz.scp.css */
.pbt[b-3jnu37m6h8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e6ec;
}

.pbt-titulo[b-3jnu37m6h8] {
    font-size: 13px;
    font-weight: 700;
    color: #16365f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pbt-campo[b-3jnu37m6h8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pbt-rotulo[b-3jnu37m6h8] {
    font-size: 12px;
    color: #4a5565;
}

.pbt-ayuda[b-3jnu37m6h8] {
    font-size: 12px;
    color: #4a5565;
}

.pbt-colores[b-3jnu37m6h8],
.pbt-tamanos[b-3jnu37m6h8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pbt-color[b-3jnu37m6h8] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
}

.pbt-color-activo[b-3jnu37m6h8] {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b2430;
}

.pbt-color-defecto[b-3jnu37m6h8] {
    width: auto;
    padding: 0 8px;
    border: 1px dashed #8a96a6;
    background: #ffffff;
    color: #1b2430;
    font-size: 11px;
}

.pbt-tamano[b-3jnu37m6h8] {
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 12px;
    cursor: pointer;
}

.pbt-tamano-activo[b-3jnu37m6h8] {
    border-color: #16365f;
    background: #16365f;
    color: #ffffff;
}

.pbt-casilla[b-3jnu37m6h8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1b2430;
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/TecladoNumericoTactil.razor.rz.scp.css */
.tnt[b-p7fh199j39] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(54px, 1fr));
    gap: 6px;
    height: 100%;
    user-select: none;
}

.tnt-k[b-p7fh199j39] {
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 22px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tnt-k:active[b-p7fh199j39] {
    background: #e4eefa;
}

.tnt-gris[b-p7fh199j39] {
    background: #f1f3f6;
    font-size: 18px;
}

.tnt-intro[b-p7fh199j39] {
    grid-column: 4;
    grid-row: 3 / span 2;
    border: 0;
    background: #1e5aa8;
    color: #ffffff;
    font-size: 15px;
}

.tnt-intro:active[b-p7fh199j39] {
    background: #16365f;
}

.tnt-cero[b-p7fh199j39] {
    grid-column: 1 / span 2;
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/TpvTactilBotoneraPage.razor.rz.scp.css */
.btt-pagina[b-91r6jjhxbp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btt-barra[b-91r6jjhxbp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.btt-titulo h1[b-91r6jjhxbp] {
    margin: 0;
    font-size: 20px;
}

.btt-sub[b-91r6jjhxbp],
.btt-ayuda[b-91r6jjhxbp] {
    font-size: 13px;
    color: #4a5565;
}

.btt-acciones[b-91r6jjhxbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btt-boton[b-91r6jjhxbp] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.btt-boton:disabled[b-91r6jjhxbp] {
    opacity: 0.5;
    cursor: default;
}

.btt-boton .material-symbols-outlined[b-91r6jjhxbp] {
    font-size: 18px;
}

.btt-boton-azul[b-91r6jjhxbp] {
    border: 0;
    background: #1e5aa8;
    color: #ffffff;
}

.btt-puestos[b-91r6jjhxbp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #d9dee6;
    background: #ffffff;
}

.btt-fila[b-91r6jjhxbp],
.btt-terminales[b-91r6jjhxbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btt-campo[b-91r6jjhxbp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

.btt-campo label[b-91r6jjhxbp] {
    font-size: 12px;
    color: #4a5565;
}

.btt-campo select[b-91r6jjhxbp],
.btt-campo input[type=number][b-91r6jjhxbp] {
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #c3ccd8;
    font: inherit;
    font-size: 13px;
}

.btt-campo-casilla[b-91r6jjhxbp] {
    justify-content: flex-end;
}

.btt-campo-casilla label[b-91r6jjhxbp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1b2430;
}

.btt-subtitulo[b-91r6jjhxbp] {
    font-size: 12px;
    font-weight: 700;
    color: #16365f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btt-pie[b-91r6jjhxbp] {
    display: flex;
    justify-content: flex-end;
}
/* _content/ErpPowergest/Presentation/Ventas/TpvTactil/TpvTactilPage.razor.rz.scp.css */
/* TPV táctil (TT3). Encima del chasis del ERP y a pantalla completa: por debajo solo de los avisos y de las ventanas
   modales del ERP (visor de PDF, recuperar, tickets), por encima del botón flotante, que taparía «Cobrar».
   Objetivos táctiles de 48 px como mínimo; nada hace scroll salvo la zona que no cabe (decisión del dueño). */

.tt-raiz[b-b7rf0fzl6w] {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: #eef1f5;
    color: #1b2430;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    user-select: none;
    touch-action: manipulation;
    overflow: hidden;
}

.tt-raiz button[b-b7rf0fzl6w] {
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.tt-raiz button:disabled[b-b7rf0fzl6w] {
    cursor: default;
    opacity: 0.45;
}

/* ── Barra superior ─────────────────────────────────────────────────────────────────────────────── */

.tt-barra[b-b7rf0fzl6w] {
    position: relative;
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #16365f;
    color: #ffffff;
}

.tt-marca[b-b7rf0fzl6w] {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    padding-right: 6px;
    white-space: nowrap;
}

.tt-chip[b-b7rf0fzl6w] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #3b5c86;
    background: #21497a;
    color: #ffffff;
    font-size: 14px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-chip .material-symbols-outlined[b-b7rf0fzl6w] {
    font-size: 18px;
}

.tt-numero[b-b7rf0fzl6w] {
    font-size: 14px;
    color: #c9d6e8;
    white-space: nowrap;
}

.tt-numero strong[b-b7rf0fzl6w] {
    color: #ffffff;
}

.tt-hueco[b-b7rf0fzl6w] {
    flex: 1;
}

.tt-aviso-barra[b-b7rf0fzl6w] {
    font-size: 13px;
    color: #ffd98a;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-icono[b-b7rf0fzl6w] {
    width: 44px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #3b5c86;
    background: #21497a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tt-menu[b-b7rf0fzl6w] {
    position: absolute;
    top: 52px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(20, 40, 70, 0.25);
}

.tt-menu-op[b-b7rf0fzl6w] {
    display: block;
    padding: 14px 16px;
    border-radius: 8px;
    color: #1b2430;
    text-decoration: none;
    font-size: 15px;
}

.tt-menu-op:active[b-b7rf0fzl6w],
.tt-menu-op:hover[b-b7rf0fzl6w] {
    background: #e4eefa;
}

/* ── Cuerpo: cuatro zonas ───────────────────────────────────────────────────────────────────────── */

.tt-cuerpo[b-b7rf0fzl6w] {
    flex: 1;
    min-height: 0;
    display: grid;
    /* --tt-ancho-ticket lo pone el asa del panel del ticket (tpvTactil.js); sin él, el de fábrica. */
    grid-template-columns: var(--tt-ancho-ticket, clamp(300px, 29vw, 420px)) clamp(104px, 10vw, 140px) minmax(0, 1fr) clamp(260px, 24vw, 340px);
}

.tt-cuerpo.tt-cuerpo-plegado[b-b7rf0fzl6w] {
    grid-template-columns: 76px clamp(104px, 10vw, 140px) minmax(0, 1fr) clamp(260px, 24vw, 340px);
}

/* Borde derecho del ticket: se arrastra para cambiar su ancho. Ancho de dedo, raya fina a la vista. */
.tt-asa[b-b7rf0fzl6w] {
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    width: 16px;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
}

.tt-asa[b-b7rf0fzl6w]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 4px;
    height: 56px;
    margin-top: -28px;
    border-radius: 2px;
    background: #b9c4d3;
}

.tt-asa:hover[b-b7rf0fzl6w]::after,
.tt-asa-activa[b-b7rf0fzl6w]::after {
    background: #1e5aa8;
}

.tt-plegar[b-b7rf0fzl6w] {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 8px;
    border: 1px solid #b9c4d3;
    background: #ffffff;
    color: #1b2430;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tt-plegar-cab[b-b7rf0fzl6w] {
    width: 34px;
    height: 30px;
    margin-left: 4px;
}

.tt-ticket-plegado[b-b7rf0fzl6w] {
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.tt-plegado-lineas[b-b7rf0fzl6w] {
    min-width: 40px;
    height: 34px;
    padding: 0 6px;
    border-radius: 17px;
    background: #e4eefa;
    color: #0f3d75;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

.tt-plegado-total[b-b7rf0fzl6w] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 22px;
    font-weight: 700;
    color: #0f3d75;
    font-variant-numeric: tabular-nums;
}

/* Líneas */

.tt-ticket[b-b7rf0fzl6w] {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #d9dee6;
}

.tt-ticket-cab[b-b7rf0fzl6w] {
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: #e4eefa;
    font-size: 12px;
    font-weight: 600;
    color: #4a5565;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tt-c-cant[b-b7rf0fzl6w] { width: 48px; }
.tt-c-art[b-b7rf0fzl6w] { flex: 1; }
.tt-c-imp[b-b7rf0fzl6w] { width: 90px; text-align: right; }

.tt-lineas[b-b7rf0fzl6w] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tt-linea[b-b7rf0fzl6w] {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #edf0f4;
}

.tt-linea-sel[b-b7rf0fzl6w] {
    background: #d6e6f8;
    box-shadow: inset 0 0 0 2px #1e5aa8;
}

.tt-linea-principal[b-b7rf0fzl6w] {
    flex: 1;
    min-width: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.tt-linea-cant[b-b7rf0fzl6w] {
    width: 42px;
    height: 34px;
    flex: none;
    border-radius: 6px;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.tt-linea-texto[b-b7rf0fzl6w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tt-linea-nombre[b-b7rf0fzl6w] {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-linea-detalle[b-b7rf0fzl6w] {
    font-size: 12px;
    color: #4a5565;
}

.tt-mas-menos[b-b7rf0fzl6w] {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 8px;
    border: 1px solid #b9c4d3;
    background: #ffffff;
    color: #1b2430;
    font-size: 22px;
}

.tt-linea-importe[b-b7rf0fzl6w] {
    width: 92px;
    flex: none;
    padding-right: 12px;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tt-totales[b-b7rf0fzl6w] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    border-top: 1px solid #d9dee6;
    background: #f9fafc;
}

.tt-totales-fila[b-b7rf0fzl6w] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #4a5565;
}

/* El visor del total, en azul SUAVE (decisión del dueño en el TPV de teclado). */
.tt-visor-total[b-b7rf0fzl6w] {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: 10px;
    background: #e4eefa;
    border: 1px solid #bcd3ee;
    color: #0f3d75;
}

.tt-visor-rotulo[b-b7rf0fzl6w] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.tt-visor-importe[b-b7rf0fzl6w] {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Familias */

.tt-familias[b-b7rf0fzl6w] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px;
    background: #e3e8ef;
    border-right: 1px solid #d9dee6;
}

.tt-familia[b-b7rf0fzl6w] {
    min-height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #c9d1dc;
    background: #ffffff;
    color: #1b2430;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.tt-familia-activa[b-b7rf0fzl6w] {
    box-shadow: 0 2px 6px rgba(20, 40, 70, 0.25);
}

.tt-familia-marca[b-b7rf0fzl6w] {
    width: 8px;
    height: 34px;
    flex: none;
    border-radius: 4px;
}

/* Se parte por sílabas (con guion) y no a mitad de letra: «Brico-laje», no «Bricolaj e». */
.tt-familia-texto[b-b7rf0fzl6w] {
    flex: 1;
    min-width: 0;
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Artículos */

.tt-articulos[b-b7rf0fzl6w] {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
}

.tt-articulos-cab[b-b7rf0fzl6w] {
    height: 32px;
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tt-articulos-familia[b-b7rf0fzl6w] {
    font-size: 17px;
    font-weight: 700;
}

.tt-articulos-cuenta[b-b7rf0fzl6w] {
    font-size: 12px;
    color: #4a5565;
}

.tt-rejilla[b-b7rf0fzl6w] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    grid-auto-rows: 148px;
    gap: 10px;
    align-content: start;
}

.tt-articulo[b-b7rf0fzl6w] {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d3dae4;
    background: #ffffff;
    color: #1b2430;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 40, 70, 0.08);
}

.tt-articulo:active:not(:disabled)[b-b7rf0fzl6w] {
    transform: scale(0.97);
    background: #e4eefa;
}

.tt-articulo-img[b-b7rf0fzl6w] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tt-articulo-img img[b-b7rf0fzl6w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.tt-articulo-inicial[b-b7rf0fzl6w] {
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
}

.tt-articulo-nombre[b-b7rf0fzl6w] {
    padding: 5px 8px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    height: 34px;
    overflow: hidden;
}

.tt-articulo-precio[b-b7rf0fzl6w] {
    padding: 2px 8px 6px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tt-vacio[b-b7rf0fzl6w] {
    grid-column: 1 / -1;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #4a5565;
    font-size: 15px;
    text-align: center;
}

.tt-vacio .material-symbols-outlined[b-b7rf0fzl6w] {
    font-size: 40px;
    color: #8a96a6;
}

/* Teclado y teclas */

.tt-teclado[b-b7rf0fzl6w] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    background: #e3e8ef;
    border-left: 1px solid #d9dee6;
}

.tt-visor[b-b7rf0fzl6w] {
    height: 56px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    background: #1b2430;
    color: #ffffff;
}

.tt-visor-grande[b-b7rf0fzl6w] {
    height: 72px;
}

.tt-visor-que[b-b7rf0fzl6w] {
    font-size: 11px;
    color: #aeb9c8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-visor-valor[b-b7rf0fzl6w] {
    font-size: 22px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

.tt-visor-grande .tt-visor-valor[b-b7rf0fzl6w] {
    font-size: 32px;
}

.tt-modos[b-b7rf0fzl6w] {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.tt-modo[b-b7rf0fzl6w] {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 13px;
    font-weight: 600;
}

.tt-modo-activo[b-b7rf0fzl6w] {
    border: 0;
    background: #1e5aa8;
    color: #ffffff;
}

.tt-numerico[b-b7rf0fzl6w] {
    flex: 1 1 236px;
    min-height: 220px;
}

.tt-teclas[b-b7rf0fzl6w] {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.tt-tecla[b-b7rf0fzl6w] {
    min-height: 48px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid #c3ccd8;
    background: #ffffff;
    color: #1b2430;
    font-size: 13px;
    font-weight: 500;
}

.tt-tecla-roja[b-b7rf0fzl6w] {
    border-color: #e3b4b0;
    color: #9a2a22;
}

.tt-tecla-azul[b-b7rf0fzl6w] {
    border: 0;
    background: #1e5aa8;
    color: #ffffff;
}

.tt-cobrar[b-b7rf0fzl6w] {
    height: 72px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: #157a43;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.tt-cobrar:active:not(:disabled)[b-b7rf0fzl6w] {
    background: #0f5c32;
}

/* El campo del lector: tiene el foco, pero no se ve. */
.tt-lector[b-b7rf0fzl6w] {
    position: absolute;
    left: -2000px;
    top: 0;
    width: 10px;
    height: 10px;
    opacity: 0;
}

/* Ventanas propias (cantidad, confirmaciones) */

.tt-velo[b-b7rf0fzl6w] {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 25, 40, 0.45);
}

.tt-ventana[b-b7rf0fzl6w] {
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(20, 40, 70, 0.3);
}

.tt-ventana h2[b-b7rf0fzl6w] {
    margin: 0;
    font-size: 18px;
}

.tt-ventana-texto[b-b7rf0fzl6w] {
    margin: 0;
    font-size: 16px;
}

.tt-ventana-teclado[b-b7rf0fzl6w] {
    height: 260px;
}

.tt-ventana-botones[b-b7rf0fzl6w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Pantallas de 1024 de ancho: el mismo reparto, más apretado. */
@media (max-width: 1100px) {
    .tt-cuerpo[b-b7rf0fzl6w] { grid-template-columns: var(--tt-ancho-ticket, 290px) 116px minmax(0, 1fr) 248px; }
    .tt-cuerpo.tt-cuerpo-plegado[b-b7rf0fzl6w] { grid-template-columns: 76px 116px minmax(0, 1fr) 248px; }
    .tt-familia[b-b7rf0fzl6w] { padding: 6px 8px; font-size: 13px; }
    .tt-modo[b-b7rf0fzl6w] { font-size: 11px; padding: 0 2px; }
    .tt-totales-fila[b-b7rf0fzl6w] { flex-direction: column; gap: 2px; }
    .tt-chip[b-b7rf0fzl6w] { max-width: 150px; }
    .tt-numero[b-b7rf0fzl6w] { display: none; }
    .tt-c-imp[b-b7rf0fzl6w], .tt-linea-importe[b-b7rf0fzl6w] { width: 78px; }
    .tt-rejilla[b-b7rf0fzl6w] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 136px; }
}
/* _content/ErpPowergest/Presentation/Ventas/Transporte/DocumentoControlPage.razor.rz.scp.css */
/*
    Carta de porte: el vocabulario visual del formulario de venta (FacturaFormulario): mismo título con número y chip de
    estado, mismas tarjetas con la barra azul de sección y mismos campos. Se repite aquí porque el CSS de Blazor tiene
    ámbito POR COMPONENTE: las clases fdp- de aquella página no alcanzan a esta.
*/

.fdp-page[b-ryqkwh02zb] {
    --fdp-primary: #00288e;
    --fdp-surface-lowest: #ffffff;
    --fdp-surface-low: #fafbfd;
    --fdp-outline-variant: #e4e5ec;
    --fdp-on-surface: #1a1b22;
    --fdp-on-surface-variant: #555766;
    --fdp-radius: 0.75rem;
    --fdp-radius-sm: 0.5rem;
    --fdp-shadow: 0 1px 2px 0 rgba(15, 23, 42, .05), 0 1px 3px 0 rgba(15, 23, 42, .04);
    --fdp-pad: clamp(0.6rem, 0.45rem + 0.7vw, 1.1rem);
    --fdp-gap: clamp(0.55rem, 0.4rem + 0.7vw, 1.1rem);
    --fdp-gap-sm: clamp(0.4rem, 0.3rem + 0.45vw, 0.75rem);
    box-sizing: border-box;
    inline-size: 100%;
    color: var(--fdp-on-surface);
}

    .fdp-page *[b-ryqkwh02zb],
    .fdp-page *[b-ryqkwh02zb]::before,
    .fdp-page *[b-ryqkwh02zb]::after {
        box-sizing: border-box;
    }

/* ─── Cabecera ─── Sin `flex-wrap`: el CommandBar repliega sus botones al «···» cuando falta sitio. */
.fdp-header[b-ryqkwh02zb] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fdp-gap);
    margin-block-end: var(--fdp-gap-sm);
}

.fdp-title-block[b-ryqkwh02zb] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--fdp-gap-sm);
    min-inline-size: 0;
}

.fdp-header.command-bar-host-collapsed .fdp-title-block[b-ryqkwh02zb] {
    flex: 1 1 auto;
}

.fdp-title-block h1[b-ryqkwh02zb] {
    margin: 0;
    font-size: clamp(1.25rem, 1.4vw + 0.75rem, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fdp-title-number[b-ryqkwh02zb] {
    color: var(--fdp-primary);
    font-weight: 700;
}

.fdp-header[b-ryqkwh02zb]  .command-bar {
    flex: 0 0 auto;
    min-inline-size: 0;
    justify-content: flex-end;
}

/* ─── Chip de estado ─── */
.fdp-status[b-ryqkwh02zb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fdp-status-green[b-ryqkwh02zb] { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
.fdp-status-red[b-ryqkwh02zb] { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.fdp-status-neutral[b-ryqkwh02zb] { color: #475569; background: var(--fdp-surface-low); border-color: var(--fdp-outline-variant); }

/* ─── Tarjetas con la barra azul de sección ─── */
.fdp-content[b-ryqkwh02zb] {
    display: flex;
    flex-direction: column;
    gap: var(--fdp-gap-sm);
}

.fdp-card[b-ryqkwh02zb] {
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius);
    background: var(--fdp-surface-lowest);
    box-shadow: var(--fdp-shadow);
    overflow: hidden;
}

.fdp-card-head[b-ryqkwh02zb] {
    padding: 5px 15px;
    border-block-end: 1px solid #dfe6f5;
    border-inline-start: 4px solid var(--fdp-primary);
    background: #eef3fd;
}

    .fdp-card-head h2[b-ryqkwh02zb] {
        margin: 0;
        font-size: clamp(.68rem, .62rem + .18vw, .78rem);
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--fdp-primary);
    }

.fdp-card-body[b-ryqkwh02zb] {
    padding: var(--fdp-pad);
}

/* ─── Campos ─── El CampoCodigo pinta su caja y su rótulo dentro del componente: de ahí el ::deep. */
.fdp-grid[b-ryqkwh02zb] {
    display: grid;
    gap: 8px 12px;
}

.fdp-grid-3[b-ryqkwh02zb] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fdp-page[b-ryqkwh02zb]  .fdp-field {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.fdp-page[b-ryqkwh02zb]  .fdp-field-full {
    grid-column: 1 / -1;
}

.fdp-page[b-ryqkwh02zb]  .fdp-field label {
    display: block;
    margin-block-end: .2rem;
    font-size: .72rem;
    font-weight: 400;
    color: var(--fdp-on-surface-variant);
}

.fdp-page[b-ryqkwh02zb]  .fdp-input {
    inline-size: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface);
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.35rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .fdp-page[b-ryqkwh02zb]  .fdp-input:focus {
        outline: none;
        border-color: var(--fdp-primary);
        box-shadow: 0 0 0 2px rgba(0, 40, 142, .25);
    }

    .fdp-page[b-ryqkwh02zb]  .fdp-input:disabled {
        color: var(--fdp-on-surface-variant);
        cursor: not-allowed;
    }

.dcf-num[b-ryqkwh02zb] { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Propio de la carta de porte ─── */
.dcf-suave[b-ryqkwh02zb] { color: var(--fdp-on-surface-variant); }

/* Las tres partes (cargador, destinatario, transportista) se leen en paralelo: tres columnas. */
.dcf-partes[b-ryqkwh02zb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fdp-gap-sm);
}

.dcf-parte[b-ryqkwh02zb] {
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-low);
    padding: 10px 12px;
    font-size: .85rem;
    line-height: 1.45;
}

.dcf-parte-titulo[b-ryqkwh02zb] {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fdp-on-surface-variant);
}

.dcf-parte-nombre[b-ryqkwh02zb] { font-weight: 700; margin: 2px 0; }

.dcf-cubre[b-ryqkwh02zb] {
    margin-top: var(--fdp-gap-sm);
    font-size: .85rem;
    color: var(--fdp-on-surface-variant);
}

/* Lo que falta para emitir: ámbar, porque es algo que completar y no un error. */
.dcf-aviso[b-ryqkwh02zb] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-block-end: var(--fdp-gap-sm);
    padding: .55rem .75rem;
    border-radius: var(--fdp-radius-sm);
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: .85rem;
    line-height: 1.45;
}

.dcf-aviso-info[b-ryqkwh02zb] { background: #eef3fd; border-color: #dfe6f5; color: var(--fdp-primary); margin: 0; }
.dcf-aviso .material-symbols-outlined[b-ryqkwh02zb] { font-size: 1.1rem; }

.dcf-enlaces[b-ryqkwh02zb] { display: flex; flex-direction: column; gap: var(--fdp-gap-sm); }
.dcf-url[b-ryqkwh02zb] { font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; }

.dcf-oculto[b-ryqkwh02zb] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.dcf-versiones[b-ryqkwh02zb] { width: 100%; border-collapse: collapse; font-size: .85rem; }

.dcf-versiones th[b-ryqkwh02zb] {
    text-align: left;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--fdp-outline-variant);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fdp-on-surface-variant);
}

.dcf-versiones td[b-ryqkwh02zb] { padding: .4rem .5rem; border-bottom: 1px solid #f0f3f7; }
.dcf-huella[b-ryqkwh02zb] { font-family: ui-monospace, monospace; color: var(--fdp-on-surface-variant); }

/* ─── Carta de porte y CMR: el contrato y la mercancía ─── */
.dcf-subtitulo[b-ryqkwh02zb] {
    margin: .6rem 0 0;
    padding-block-start: .5rem;
    border-block-start: 1px solid var(--fdp-outline-variant);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fdp-primary);
}

.dcf-mercancia-cabecera[b-ryqkwh02zb] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dcf-mercancia-cabecera h3[b-ryqkwh02zb] { margin: 0 auto 0 0; font: inherit; }

.dcf-boton[b-ryqkwh02zb] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .65rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-lowest);
    color: var(--fdp-primary);
    font: inherit;
    font-size: .78rem;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

    .dcf-boton:hover[b-ryqkwh02zb] { background: #eef3fd; }
    .dcf-boton .material-symbols-outlined[b-ryqkwh02zb] { font-size: 1rem; }

.dcf-casilla[b-ryqkwh02zb] { justify-content: flex-end; }
.dcf-casilla label[b-ryqkwh02zb] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--fdp-on-surface); }

/* La rejilla de la mercancía tiene once columnas: con scroll horizontal y vertical, nunca rompe la página. */
.dcf-lineas-scroll[b-ryqkwh02zb] { overflow: auto; max-height: 22rem; }

.dcf-lineas[b-ryqkwh02zb] { width: 100%; min-width: 64rem; border-collapse: collapse; font-size: .85rem; }

.dcf-lineas th[b-ryqkwh02zb] {
    position: sticky;
    top: 0;
    background: var(--fdp-surface-lowest);
    text-align: left;
    padding: .3rem .3rem;
    border-bottom: 1px solid var(--fdp-outline-variant);
    font-size: .7rem;
    font-weight: 600;
    color: var(--fdp-on-surface-variant);
    white-space: nowrap;
}

.dcf-lineas td[b-ryqkwh02zb] { padding: .2rem .3rem; border-bottom: 1px solid #f0f3f7; }
.dcf-corto[b-ryqkwh02zb] { min-inline-size: 4.5rem; }

.dcf-quitar[b-ryqkwh02zb] {
    border: 0;
    background: transparent;
    color: var(--fdp-on-surface-variant);
    cursor: pointer;
    padding: .2rem;
}

    .dcf-quitar:hover[b-ryqkwh02zb] { color: #b91c1c; }

@media (max-width: 900px) {
    .fdp-grid-3[b-ryqkwh02zb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dcf-partes[b-ryqkwh02zb] { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .fdp-grid-3[b-ryqkwh02zb] { grid-template-columns: 1fr; }
}
/* _content/ErpPowergest/Presentation/Ventas/Transporte/DocumentosControlPage.razor.rz.scp.css */
/*
    Cartas de porte: el vocabulario visual de los listados de maestros (Vehículos, Agencias de transporte): mismas
    medidas, colores y radios. Se repite aquí porque el CSS de Blazor tiene ámbito POR COMPONENTE: referenciar las
    clases de otra página sin declararlas dejaría esta sin estilo.
*/

/* A todo el ancho y alto: la tabla (la última) se queda con el alto que sobra. */
.op-page[b-tcswo7ai4p] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #1f2933;
}

.op-tabla[b-tcswo7ai4p] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.op-page[b-tcswo7ai4p]  .tp-panel {
    min-height: auto;
}

/* Sin `flex-wrap`: si la barra bajara de línea, su script no vería que falta sitio y no replegaría nada. */
.op-header[b-tcswo7ai4p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.op-header-actions[b-tcswo7ai4p] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

    .op-header > div:first-child[b-tcswo7ai4p] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .op-header.command-bar-host-collapsed > div:first-child[b-tcswo7ai4p] {
        flex: 1 1 auto;
    }

.op-title[b-tcswo7ai4p] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.op-subtitle[b-tcswo7ai4p] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
}

.op-header.command-bar-host-collapsed .op-title[b-tcswo7ai4p],
.op-header.command-bar-host-collapsed .op-subtitle[b-tcswo7ai4p] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Fila de filtros encima de la lista. */
.op-filtros[b-tcswo7ai4p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.op-field[b-tcswo7ai4p] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.op-field label[b-tcswo7ai4p] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #61707d;
    font-weight: 600;
}

.op-input[b-tcswo7ai4p] {
    border: 1px solid #cdd5df;
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
    color: #1f2933;
}

.op-btn[b-tcswo7ai4p] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .35rem .7rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.op-btn:disabled[b-tcswo7ai4p] { opacity: .55; cursor: default; }

.op-btn-danger-ghost[b-tcswo7ai4p] { background: #fff; color: #c22f39; border-color: #f0c4c7; }
.op-btn-danger-ghost:hover:not(:disabled)[b-tcswo7ai4p] { background: #fdf1f2; }

.op-table[b-tcswo7ai4p] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
    margin-top: .9rem;
}

.op-table th[b-tcswo7ai4p] {
    text-align: left;
    color: #61707d;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e3e8ee;
}

.op-table td[b-tcswo7ai4p] {
    padding: .4rem .5rem;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.op-col-acciones[b-tcswo7ai4p] { white-space: nowrap; text-align: right; }

.op-revocada td[b-tcswo7ai4p] { color: #8a97a3; }

.op-badge[b-tcswo7ai4p] {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.op-badge-ok[b-tcswo7ai4p] { background: #e2f4e8; color: #1c7a3a; }
.op-badge-off[b-tcswo7ai4p] { background: #eef1f4; color: #61707d; }
.op-badge-err[b-tcswo7ai4p] { background: #fde3e5; color: #c22f39; }

/* La clave recién creada: verde, porque es el resultado que se esperaba, y partible (es larga). */
.op-clave-nueva[b-tcswo7ai4p] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .9rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #b7ebcd;
    color: #065f46;
    font-size: .88rem;
}

.op-clave-nueva code[b-tcswo7ai4p] { font-size: .92rem; word-break: break-all; }

@media (max-width: 600px) {
    .op-title[b-tcswo7ai4p] { font-size: 1.25rem; }
    .op-filtros[b-tcswo7ai4p] { flex-direction: column; align-items: stretch; }
    .op-field .op-input[b-tcswo7ai4p] { width: 100%; box-sizing: border-box; }
}
/* _content/ErpPowergest/Presentation/Ventas/Ventas/Pages/VentasPage.razor.rz.scp.css */
.ventas-page[b-7kijtcdv8e],
.ventas-page *[b-7kijtcdv8e],
.ventas-page *[b-7kijtcdv8e]::before,
.ventas-page *[b-7kijtcdv8e]::after {
    box-sizing: border-box;
}

.ventas-page[b-7kijtcdv8e] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    animation: ventasPageIn-b-7kijtcdv8e 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ventas-heading[b-7kijtcdv8e] {
    min-width: 0;
}

.ventas-title[b-7kijtcdv8e] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.ventas-subtitle[b-7kijtcdv8e] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.card-panel[b-7kijtcdv8e] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* PANEL LISTADO */

.ventas-list-panel[b-7kijtcdv8e] {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.ventas-list-header[b-7kijtcdv8e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    flex: 0 0 auto;
}

.ventas-list-heading[b-7kijtcdv8e] {
    min-width: 0;
    flex: 1 1 auto;
}

.ventas-list-title[b-7kijtcdv8e] {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.ventas-list-subtitle[b-7kijtcdv8e] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.ventas-header-actions[b-7kijtcdv8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* FILTROS */

.ventas-filters[b-7kijtcdv8e] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.vt-filter-item[b-7kijtcdv8e],
.vt-filter-item-search[b-7kijtcdv8e] {
    min-width: 0;
}

.vt-filter-searchbox[b-7kijtcdv8e] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.vt-filter-search-icon[b-7kijtcdv8e] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.vt-filter-input[b-7kijtcdv8e],
.vt-filter-select[b-7kijtcdv8e] {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vt-filter-input[b-7kijtcdv8e] {
    padding: 0 13px;
}

.vt-filter-input-search[b-7kijtcdv8e] {
    padding-left: 38px;
}

.vt-filter-select[b-7kijtcdv8e] {
    padding: 0 12px;
    cursor: pointer;
}

.vt-filter-input[b-7kijtcdv8e]::placeholder {
    color: #9ca3af;
}

.vt-filter-input:focus[b-7kijtcdv8e],
.vt-filter-select:focus[b-7kijtcdv8e] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.vt-filter-actions[b-7kijtcdv8e] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

/* BOTONES */

.vt-primary-btn[b-7kijtcdv8e],
.vt-action-btn[b-7kijtcdv8e] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.vt-primary-btn[b-7kijtcdv8e] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .vt-primary-btn:hover[b-7kijtcdv8e] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.vt-action-btn[b-7kijtcdv8e] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .vt-action-btn:hover[b-7kijtcdv8e] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* RESULTADOS */

.vt-results-bar[b-7kijtcdv8e] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
    flex: 0 0 auto;
}

.vt-results-text[b-7kijtcdv8e] {
    font-size: 12px;
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

/* GRID */

.vt-grid-wrapper[b-7kijtcdv8e] {
    min-height: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
    overflow-x: auto;
    max-width: 100%;
}

.vt-grid.e-grid[b-7kijtcdv8e] {
    height: 100%;
    width: 100%;
    min-width: 900px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.vt-grid .e-gridheader[b-7kijtcdv8e] {
    border-bottom: 1px solid #eef2f7;
}

.vt-grid .e-headercell[b-7kijtcdv8e] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.vt-grid .e-headertext[b-7kijtcdv8e] {
    font-size: 12px;
    font-weight: 850;
}

.vt-grid .e-rowcell[b-7kijtcdv8e] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.vt-grid .e-gridcontent[b-7kijtcdv8e],
.vt-grid .e-table[b-7kijtcdv8e] {
    cursor: pointer;
}

.vt-grid .e-row:hover .e-rowcell[b-7kijtcdv8e] {
    background: #f8fbff;
}

.vt-grid .e-altrow .e-rowcell[b-7kijtcdv8e] {
    background: #fcfdff;
}

.vt-grid .e-pager[b-7kijtcdv8e] {
    border-top: 1px solid #eef2f7;
    background: #ffffff;
    min-height: 42px;
}

.vt-grid .e-content[b-7kijtcdv8e] {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .vt-grid .e-content[b-7kijtcdv8e]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .vt-grid .e-content[b-7kijtcdv8e]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vt-grid .e-content[b-7kijtcdv8e]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .vt-grid .e-content[b-7kijtcdv8e]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ESTADOS */

.vt-estado-badge[b-7kijtcdv8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vt-estado-green[b-7kijtcdv8e] {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.vt-estado-blue[b-7kijtcdv8e] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.vt-estado-orange[b-7kijtcdv8e] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.vt-estado-purple[b-7kijtcdv8e] {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.vt-estado-red[b-7kijtcdv8e] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes ventasPageIn-b-7kijtcdv8e {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .ventas-page[b-7kijtcdv8e] {
        height: calc(100dvh - 96px);
        overflow: hidden;
    }

    .ventas-filters[b-7kijtcdv8e] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px auto;
    }
}

@media (max-width: 980px) {
    .ventas-page[b-7kijtcdv8e] {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .ventas-list-panel[b-7kijtcdv8e] {
        height: auto;
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .ventas-list-header[b-7kijtcdv8e] {
        flex-direction: column;
        align-items: stretch;
    }

    .ventas-header-actions[b-7kijtcdv8e] {
        justify-content: space-between;
    }

    .ventas-filters[b-7kijtcdv8e] {
        grid-template-columns: 1fr 1fr;
    }

    .vt-filter-item-search[b-7kijtcdv8e] {
        grid-column: 1 / -1;
    }

    .vt-filter-actions[b-7kijtcdv8e] {
        justify-content: stretch;
    }

        .vt-filter-actions .vt-primary-btn[b-7kijtcdv8e] {
            width: 100%;
        }

    .vt-grid-wrapper[b-7kijtcdv8e] {
        height: auto;
        min-height: 440px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .vt-grid.e-grid[b-7kijtcdv8e] {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .ventas-header-actions[b-7kijtcdv8e] {
        width: 100%;
    }

        .ventas-header-actions .vt-action-btn[b-7kijtcdv8e],
        .ventas-header-actions .vt-primary-btn[b-7kijtcdv8e] {
            flex: 1 1 auto;
        }

    .ventas-filters[b-7kijtcdv8e] {
        grid-template-columns: 1fr;
    }

    .vt-filter-actions[b-7kijtcdv8e] {
        width: 100%;
    }

        .vt-filter-actions .vt-primary-btn[b-7kijtcdv8e] {
            width: 100%;
        }

    .vt-grid-wrapper[b-7kijtcdv8e] {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .ventas-title[b-7kijtcdv8e] {
        font-size: 20px;
    }

    .ventas-subtitle[b-7kijtcdv8e] {
        font-size: 12px;
    }

    .card-panel[b-7kijtcdv8e] {
        padding: 12px;
    }

    .ventas-header-actions[b-7kijtcdv8e] {
        flex-direction: column;
        align-items: stretch;
    }

        .ventas-header-actions .vt-action-btn[b-7kijtcdv8e],
        .ventas-header-actions .vt-primary-btn[b-7kijtcdv8e] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ventas-page[b-7kijtcdv8e],
    .ventas-page *[b-7kijtcdv8e],
    .ventas-page *[b-7kijtcdv8e]::before,
    .ventas-page *[b-7kijtcdv8e]::after {
        animation: none !important;
        transition: none !important;
    }
}

.vt-filter-searchbox[b-7kijtcdv8e] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.vt-filter-search-icon[b-7kijtcdv8e] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.vt-filter-input-search[b-7kijtcdv8e] {
    padding-left: 40px !important;
}