/* _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;
}

.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;
}
/* _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;
}
/* _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/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/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;
    border-bottom: 1px solid #e5e7eb;
}

/* FASES 1-3: las pestañas 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.

   El `margin-bottom: -1px` es lo que hace que el subrayado de la pestaña activa se apoye EN la línea
   de la fila en vez de flotar sobre ella (mismo truco que `.cform-tab` en la ficha de cliente). */
.ctab-tabs[b-1wslds1ifa] {
    flex: 0 0 auto;
    min-width: 0;
    align-self: flex-end;
    margin-bottom: -1px;
}

/* 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 las pestañas ceden el ancho sobrante y se desplazan
   por dentro con las flechas de <ScrollableTabs>. Es el único estado en el que aparecen. */
.ctab-barra.command-bar-host-collapsed .ctab-tabs[b-1wslds1ifa] {
    flex: 1 1 auto;
}

/* 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;
}

/* PESTAÑAS: el MISMO estilo que las de la ficha de cliente (`.cform-tab`, en
   `Presentation/Fichas/Clientes/Pages/ClienteFicha.razor.css`). Subrayado sobre la línea continua,
   sin fondo ni pastilla. Los valores son los tokens `--cf-*` de la ficha, escritos aquí porque esta
   pantalla no es una `.cform-page` y no los hereda; si allí cambian, cambian aquí:
   `--cf-muted #6b7280` · `--cf-text-2 #374151` · `--cf-brand-strong #1d4ed8` · `--cf-brand #2563eb`
   · `--cf-brand-line #bfdbfe`.

   Los botones viajan en el ChildContent de <ScrollableTabs>, así que conservan el CSS de esta página
   y se estilan desde aquí (sin `::deep`). */
.ctab-tab[b-1wslds1ifa] {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #6b7280;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .ctab-tab:hover[b-1wslds1ifa] {
        color: #374151;
    }

    .ctab-tab.active[b-1wslds1ifa] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
    }

    .ctab-tab:focus-visible[b-1wslds1ifa] {
        outline: 2px solid #bfdbfe;
        outline-offset: -2px;
    }

/* 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;
}

    .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;
    }
}

/* _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 de que lo contado vive en la sesión: se pierde al recargar. */
.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;
}
/* _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;
    }

/* 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;
}

/* Pestanas: MISMO estilo que las de la ficha (`.cform-tab` en
   `Presentation/Fichas/Clientes/Pages/ClienteFicha.razor.css`). Subrayado sobre el rail continuo de
   1px que dibuja <ScrollableTabs> —el `margin-bottom: -1px` es lo que hace que el subrayado activo
   se apoye EN el rail en vez de flotar bajo él—, sin fondo ni pastilla.

   Los valores son los tokens `--cf-*` de la ficha, escritos aquí porque esta pantalla no es una
   `.cform-page` y por tanto no los hereda; si allí cambian, cambian aquí:
   `--cf-muted #6b7280` · `--cf-text-2 #374151` · `--cf-brand-strong #1d4ed8` · `--cf-brand #2563eb`
   · `--cf-brand-line #bfdbfe`.

   Los botones viajan en el ChildContent de <ScrollableTabs>, asi que conservan el CSS de esta
   pagina y se estilan desde aqui. */
.tienda-web-tab-btn[b-bxwk0swu1t] {
    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: #6b7280;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .tienda-web-tab-btn:hover[b-bxwk0swu1t] {
        color: #374151;
    }

    .tienda-web-tab-btn.active[b-bxwk0swu1t] {
        color: #1d4ed8;
        border-bottom-color: #2563eb;
    }

    .tienda-web-tab-btn:focus-visible[b-bxwk0swu1t] {
        outline: 2px solid #bfdbfe;
        outline-offset: -2px;
    }

@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;
}

/* ---- 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: 8px;
    margin-top: 12px;
}

/* ---- Botones ---- */

.cw-btn.e-btn[b-z4hbdufqqg] {
    height: 32px;
    border-radius: 10px;
    padding: 0 14px !important;
    border: 1px solid #d0d7de !important;
    background: #ffffff !important;
    color: #24292f !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: none !important;
    box-shadow: none !important;
}

    .cw-btn.e-btn:hover[b-z4hbdufqqg] {
        background: #f6f8fa !important;
    }

.cw-btn-primary.e-btn[b-z4hbdufqqg] {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

    .cw-btn-primary.e-btn:hover[b-z4hbdufqqg] {
        background: #1d4ed8 !important;
    }

.cw-btn-danger.e-btn[b-z4hbdufqqg] {
    color: #b91c1c !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/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;
    }
}
/* _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%;
}

.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;
}
/* _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;
}

.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;
}

.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. */

.cw-page[b-x0o58iemop] {
    padding: 1.25rem;
    max-width: 1400px;
}

.cw-header[b-x0o58iemop] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cw-title[b-x0o58iemop] {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.cw-subtitle[b-x0o58iemop] {
    color: var(--texto-suave, #6b7280);
    font-size: .875rem;
    max-width: 70ch;
}

.cw-kpis[b-x0o58iemop] {
    margin-bottom: 1.25rem;
}

/* ── Tarjetas y secciones ────────────────────────────────────────────────────────────────────── */

.cw-card[b-x0o58iemop] {
    border: 1px solid var(--borde, #e5e7eb);
    border-radius: 8px;
    background: var(--fondo-card, #fff);
    padding: 1rem;
    margin-bottom: 1rem;
}

.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;
    margin-bottom: 1rem;
    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-y: 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 ─────────────────────────────────────────────────────────────────────────────────── */

.cw-acciones[b-x0o58iemop] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cw-btn[b-x0o58iemop] {
    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;
    color: inherit;
}

.cw-btn:hover:not(:disabled)[b-x0o58iemop] { background: var(--fondo-hover, #f3f4f6); }
.cw-btn:disabled[b-x0o58iemop] { opacity: .55; cursor: default; }

.cw-btn .material-symbols-rounded[b-x0o58iemop] { font-size: 1.05rem; }

.cw-btn-primario[b-x0o58iemop] {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.cw-btn-primario:hover:not(:disabled)[b-x0o58iemop] { background: var(--primario-oscuro, #1d4ed8); }

/* Borrar un canal deja muda la web que lo usa: se pinta como lo que es. */
.cw-btn-peligro[b-x0o58iemop] {
    border-color: var(--peligro, #dc2626);
    color: var(--peligro, #dc2626);
}

.cw-btn-peligro:hover:not(:disabled)[b-x0o58iemop] { background: #fef2f2; }

/* Los botones de la fila del canal: iconos con su texto, pero compactos, que son seis. */
.cw-acciones-fila[b-x0o58iemop] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cw-acciones-fila .cw-btn[b-x0o58iemop] {
    padding: .3rem .55rem;
    font-size: .8rem;
}

/* ── Formularios ─────────────────────────────────────────────────────────────────────────────── */

.cw-campos[b-x0o58iemop] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}

.cw-campos label[b-x0o58iemop],
.cw-campo label[b-x0o58iemop] {
    display: flex;
    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-page[b-x0o58iemop] { padding: .75rem; }
    .cw-campos[b-x0o58iemop] { grid-template-columns: 1fr; }
    .cw-acciones-fila[b-x0o58iemop] { justify-content: flex-start; }
}
/* _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/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;
    }

.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/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/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.
*/

.op-page[b-1yh5raraeg] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1180px;
    margin: 0 auto;
    color: #1f2933;
}

/* 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;
    margin-bottom: 1.25rem;
}

    /* 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;
    margin-bottom: 1.1rem;
    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;
}

.op-select[b-1yh5raraeg], .op-input[b-1yh5raraeg] {
    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; }

/* 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; }
/* _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);
}

/* 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;
    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»)
   Cuatro estados y cuatro colores: Pagado verde, Pendiente rojo, Histórico azul, Anticipo amarillo.
   Un pendiente VENCIDO no es un quinto estado —sigue siendo Pendiente—: lo que cambia es su fecha de
   vencimiento, que se pinta en rojo (.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;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cobros-page[b-sa0oled97j]  .cb-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cobros-page[b-sa0oled97j]  .cb-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* 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: en punto, el fondo pálido de la insignia no se distinguiría. */
        background: #94a3b8;
        border-color: transparent;
    }

    .cobros-page[b-sa0oled97j]  .cb-estado-green {
        background: #16a34a;
    }

    .cobros-page[b-sa0oled97j]  .cb-estado-red {
        background: #dc2626;
    }
}

@media (max-width: 1280px) {
    .cobros-filters[b-sa0oled97j] {
        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. */
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: 1fr 1fr;
    }

    .cb-filter-item-search[b-sa0oled97j] {
        grid-column: 1 / -1;
    }
}

@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 dos colores de insignia que no son verde ni rojo (histórico y anticipo). */
.cobros-page[b-sa0oled97j]  .cb-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.cobros-page[b-sa0oled97j]  .cb-estado-yellow {
    color: #a16207;
    background: #fefce8;
    border-color: #fef08a;
}


/* Tres celdas de filtro: buscador + dos desplegables (estado y fechas). */
.cobros-filters[b-sa0oled97j] {
    grid-template-columns: minmax(240px, 1fr) 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;
    }
}

/* En punto de color, los dos tipos nuevos también necesitan su relleno sólido. */
@media (max-width: 1120px) {
    .cobros-page[b-sa0oled97j]  .cb-estado-blue {
        background: #2563eb;
    }

    .cobros-page[b-sa0oled97j]  .cb-estado-yellow {
        background: #ca8a04;
    }
}

@media (max-width: 1280px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .cobros-filters[b-sa0oled97j] {
        grid-template-columns: 1fr 1fr;
    }
}
/* _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;
    }

.vl-filter-input[b-hlkef7l4dl],
.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],
.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/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;
    /* 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. */
.command-bar__btn[b-9woqa3uyyg] {
    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 #d0d7de;
    border-radius: 6px;
    background: #ffffff;
    color: #24292f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    /* El contenido del botón (icono Material Symbols + texto) no es seleccionable por el usuario. */
    -webkit-user-select: none;
    user-select: none;
}

    .command-bar__btn:hover[b-9woqa3uyyg] {
        background: #f3f4f6;
        border-color: #afb8c1;
    }

    .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] {
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.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 #d0d7de;
    border-radius: 6px;
    background: #ffffff;
    color: #24292f;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

    .command-bar__more:hover[b-9woqa3uyyg] {
        background: #f3f4f6;
        border-color: #afb8c1;
    }

.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;
}

/* 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 (estilo MainHeader, integrada en la ficha) ===== */
/* Sin fondo ni borde y color grisáceo en reposo; en hover, fondo y borde discretos. Se
   conserva el borde a 1px (transparente) para que al aparecer en hover no haya salto de
   layout. Se engancha a los tokens de la ficha (--cf-*, declarados en .cform-page, que es
   ancestro) para hablar el mismo idioma visual que tarjetas y pestañas: el hover usa la
   superficie blanca sobre el fondo gris de la página, más la línea y la sombra de las
   tarjetas. Los fallbacks mantienen el aspecto si la barra se usara fuera de la ficha.
   Va en una clase aparte de cmdbar-inline para poder tener el layout horizontal sin
   renunciar al color de las variantes (p. ej. el botón primario «Añadir tarifa»). */
.command-bar.cmdbar-plain .command-bar__btn[b-9woqa3uyyg] {
    padding: 6px;
    border-radius: var(--cf-r-sm, 8px);
    background: transparent;
    border-color: transparent;
    color: var(--cf-muted, #6b7280);
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .command-bar.cmdbar-plain .command-bar__btn:hover[b-9woqa3uyyg] {
        background: var(--cf-surface, #ffffff);
        border-color: var(--cf-line, #e5e7eb);
        color: var(--cf-text, #111827);
        box-shadow: var(--cf-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
    }

/* Todas las variantes de color (primaria/peligro) se aplanan al mismo gris: en esta
   barra el énfasis no viene del fondo de color sino del propio icono/texto. */
.command-bar.cmdbar-plain .command-bar__btn.is-primary[b-9woqa3uyyg],
.command-bar.cmdbar-plain .command-bar__btn.is-danger[b-9woqa3uyyg] {
    background: transparent;
    border-color: transparent;
    color: var(--cf-muted, #6b7280);
}

    .command-bar.cmdbar-plain .command-bar__btn.is-primary:hover[b-9woqa3uyyg] {
        background: var(--cf-surface, #ffffff);
        border-color: var(--cf-line, #e5e7eb);
        color: var(--cf-text, #111827);
        box-shadow: var(--cf-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
    }

/* Excepción: el botón «Eliminar» (variante peligro) tiñe su hover con los tokens de
   peligro de la ficha (fondo, línea y texto rojizos). */
.command-bar.cmdbar-plain .command-bar__btn.is-danger:hover[b-9woqa3uyyg] {
    background: var(--cf-danger-soft, #fef2f2);
    border-color: var(--cf-danger-line, #fecaca);
    color: var(--cf-danger, #b91c1c);
    box-shadow: var(--cf-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
}

/* ===== VARIANTES DE COLOR ===== */

/* Primario: azul plano de marca (#1d4ed8), el mismo del botón «editar» de las tablas. */
.command-bar__btn.is-primary[b-9woqa3uyyg] {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

    .command-bar__btn.is-primary:hover[b-9woqa3uyyg] {
        background: #1e40af;
        border-color: #1e40af;
    }

.command-bar__btn.is-danger[b-9woqa3uyyg] {
    background: #fff7f7;
    border-color: #f3c2c2;
    color: #b91c1c;
}

    .command-bar__btn.is-danger:hover[b-9woqa3uyyg] {
        background: #fdeaea;
        border-color: #eba9a9;
    }

.command-bar__menu-item.is-primary[b-9woqa3uyyg] {
    color: #1d4ed8;
}

    .command-bar__menu-item.is-primary .command-bar__menu-icon[b-9woqa3uyyg] {
        color: #2563eb;
    }

.command-bar__menu-item.is-danger[b-9woqa3uyyg] {
    color: #b91c1c;
}

    .command-bar__menu-item.is-danger .command-bar__menu-icon[b-9woqa3uyyg] {
        color: #dc2626;
    }
/* _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/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;
    /* Por defecto NO cede: la cabecera desborda cuando no caben navegador + CommandBar, y es el
       CommandBar quien reacciona (compacta y repliega). 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: 0 0 auto;
    min-width: 0;
}

.cf-nav-btn[b-vc9yzdntdx] {
    flex: 0 0 auto;
    width: 36px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .cf-nav-btn:hover:not(:disabled)[b-vc9yzdntdx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1f2937;
    }

    .cf-nav-btn:disabled[b-vc9yzdntdx] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .cf-nav-btn .material-symbols-rounded[b-vc9yzdntdx] {
        font-size: 22px;
    }

.cf-identity-wrap[b-vc9yzdntdx] {
    position: relative;
    flex: 1 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;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    padding-left: 2px;
    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/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/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);
}

.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/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. */
    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;
}

.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-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;
}

/* ===== 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] {
        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/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;
}

/* ESTADOS
   Las insignias las pinta la página como plantilla de las columnas «Tipo» y «Estado», 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;
    }
}

/* «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). */

.costes-ia-page[b-9tmzwytyph] {
    padding: 1.5rem;
    max-width: 760px;
    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/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;
}

.tpv-page[b-dqvh3vjj3u] {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

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

.tpv-title[b-dqvh3vjj3u] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
}

.tpv-subtitle[b-dqvh3vjj3u] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
    gap: 10px;
    overflow: hidden;
}

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

.tpv-printer-panel[b-dqvh3vjj3u] {
    grid-column: 1 / -1;
    grid-template-rows: auto auto;
}

.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] {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .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;
}

.tpv-btn[b-dqvh3vjj3u] {
    height: 36px;
    border-radius: 11px;
    padding: 0 14px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

    .tpv-btn:hover[b-dqvh3vjj3u] {
        background: #1d4ed8;
    }

.tpv-page .e-btn[b-dqvh3vjj3u] {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .tpv-page .e-btn .e-btn-content[b-dqvh3vjj3u] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

.tpv-page .e-ripple-element[b-dqvh3vjj3u] {
    display: none !important;
}

@media (max-width: 1280px) {
    .tpv-page[b-dqvh3vjj3u] {
        height: calc(100dvh - 96px);
    }
}

@media (max-width: 980px) {
    .tpv-page[b-dqvh3vjj3u] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .tpv-dashboard-grid[b-dqvh3vjj3u] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .tpv-section-panel[b-dqvh3vjj3u],
    .tpv-list[b-dqvh3vjj3u] {
        height: auto;
        overflow: visible;
    }

    .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] {
        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/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; }

.dcfg-page[b-95mgf441he] { padding: 20px 24px; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.dcfg-header[b-95mgf441he] { margin-bottom: 2px; }
.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; }

/* ---------------- 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 ---------------- */

.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: 1fr; }
    .dcfg-paleta-lista[b-95mgf441he] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* 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/Listados/DisenadorListados.razor.rz.scp.css */
.dl-page[b-de5elxnyb7],
.dl-page *[b-de5elxnyb7],
.dl-page *[b-de5elxnyb7]::before,
.dl-page *[b-de5elxnyb7]::after {
    box-sizing: border-box;
}

.dl-page[b-de5elxnyb7] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden; /* la página NO scrollea */
    animation: dlPageIn-b-de5elxnyb7 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* HEADER */
.dl-header[b-de5elxnyb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
}

.dl-title[b-de5elxnyb7] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.dl-subtitle[b-de5elxnyb7] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.dl-header-actions[b-de5elxnyb7] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* BOTONES */
.dl-btn[b-de5elxnyb7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .dl-btn .material-symbols-outlined[b-de5elxnyb7] {
        font-size: 18px;
    }

.dl-btn-primary[b-de5elxnyb7] {
    background: #00288e;
    color: #fff;
}

    .dl-btn-primary:hover[b-de5elxnyb7] {
        background: #001f6f;
    }

.dl-btn-ghost[b-de5elxnyb7] {
    background: #fff;
    color: #334155;
    border-color: #dbe2ea;
}

    .dl-btn-ghost:hover[b-de5elxnyb7] {
        background: #f1f5f9;
        color: #1f2937;
    }

/* CARD PANEL (igual que .card-panel de la app) */
.card-panel[b-de5elxnyb7] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* BODY: master + detail, ocupa el alto restante */
.dl-body[b-de5elxnyb7] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

/* PANEL IZQUIERDO */
.dl-side[b-de5elxnyb7] {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.dl-list[b-de5elxnyb7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
}

.dl-list-item[b-de5elxnyb7] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

    .dl-list-item .material-symbols-outlined[b-de5elxnyb7] {
        font-size: 18px;
        color: #94a3b8;
    }

    .dl-list-item:hover[b-de5elxnyb7] {
        background: #f8fafc;
        color: #1f2937;
    }

.dl-list-item-active[b-de5elxnyb7] {
    background: rgba(0, 40, 142, 0.08);
    color: #00288e;
    border-color: rgba(0, 40, 142, 0.14);
}

    .dl-list-item-active .material-symbols-outlined[b-de5elxnyb7] {
        color: #00288e;
    }

.dl-list-item-text[b-de5elxnyb7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PANEL DERECHO: columna flex que llena el alto.
   Opciones = auto · Columnas = crece y scrollea · Vista previa = auto, anclada abajo */
.dl-config[b-de5elxnyb7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
    min-width: 0;
}

/* Opciones y Vista previa a su alto natural; Columnas es la que crece y scrollea */
.dl-generales[b-de5elxnyb7] {
    flex: 0 0 auto;
}


/* Cabecera de sección: título a la izquierda, switch a la derecha del todo */
.dl-section-head[b-de5elxnyb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

    .dl-section-head .dl-section-title[b-de5elxnyb7] {
        margin-bottom: 0;
    }

.dl-section-title[b-de5elxnyb7] {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 4px;
}

.dl-section-sub[b-de5elxnyb7] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 14px;
}

/* Switch */
.dl-switch-row[b-de5elxnyb7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dl-switch-label[b-de5elxnyb7] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

/* CAMPOS */
.dl-grid2[b-de5elxnyb7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

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

.dl-label[b-de5elxnyb7] {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.dl-opt[b-de5elxnyb7] {
    color: #9ca3af;
    font-weight: 500;
}

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

    .dl-input[b-de5elxnyb7]::placeholder {
        color: #9ca3af;
    }

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

.dl-select[b-de5elxnyb7] {
    cursor: pointer;
}

/* Searchbox con icono */
.dl-searchbox[b-de5elxnyb7] {
    position: relative;
    width: 100%;
}

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

.dl-input-search[b-de5elxnyb7] {
    padding-left: 38px;
}

.dl-search-icon-end[b-de5elxnyb7] {
    left: auto;
    right: 11px;
}

.dl-input-endicon[b-de5elxnyb7] {
    padding-right: 38px;
}

/* ── COLUMNAS DEL LISTADO: crece y su tabla scrollea por dentro ── */
.dl-cols-card[b-de5elxnyb7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .dl-cols-card .dl-table-shell[b-de5elxnyb7] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    /* La cabecera de la tabla queda fija mientras se hace scroll */
    .dl-cols-card .dl-table thead th[b-de5elxnyb7] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

/* TABLA de columnas */
.dl-table-shell[b-de5elxnyb7] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

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

    .dl-table thead th[b-de5elxnyb7] {
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        padding: 0 12px;
        height: 34px;
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
    }

    .dl-table tbody td[b-de5elxnyb7] {
        padding: 5px 12px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .dl-table tbody tr:last-child td[b-de5elxnyb7] {
        border-bottom: none;
    }

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

.dl-col-grip[b-de5elxnyb7] {
    width: 42px;
    text-align: center;
}

.dl-col-show[b-de5elxnyb7] {
    width: 90px;
}

.dl-col-name[b-de5elxnyb7] {
    font-weight: 600;
}

.dl-col-width[b-de5elxnyb7] {
    width: 150px;
}

.dl-col-align[b-de5elxnyb7] {
    width: 160px;
}

.dl-grip[b-de5elxnyb7] {
    color: #cbd5e1;
    cursor: grab;
    font-size: 20px;
}

.dl-width[b-de5elxnyb7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dl-input-num[b-de5elxnyb7] {
    width: 82px;
    padding: 0 10px;
}

.dl-width-unit[b-de5elxnyb7] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

/* ── VISTA PREVIA: siempre abajo, a su alto, sin scroll vertical ── */
.dl-preview-card[b-de5elxnyb7] {
    flex: 0 0 auto;
}

.dl-preview-shell[b-de5elxnyb7] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow-x: auto;
}
/* solo scroll horizontal si no caben las columnas */
.dl-preview[b-de5elxnyb7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

    .dl-preview thead th[b-de5elxnyb7] {
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 14px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
    }

    .dl-preview tbody td[b-de5elxnyb7] {
        padding: 12px 14px;
        color: #1f2937;
        white-space: nowrap;
    }

/* FLASH */
.dl-flash[b-de5elxnyb7] {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 11px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 13px;
    font-weight: 600;
}

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

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

/* RESPONSIVE */
@media (max-width: 1200px) {
    .dl-grid2[b-de5elxnyb7] {
        grid-template-columns: 1fr 1fr;
    }
}

/* En pantallas estrechas se recupera el flujo normal con scroll de página (el modelo de altura fija
   solo tiene sentido en escritorio ancho). */
@media (max-width: 900px) {
    .dl-page[b-de5elxnyb7] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .dl-body[b-de5elxnyb7] {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* El panel de listados no crece indefinidamente: alto acotado y la lista scrollea dentro */
    .dl-side[b-de5elxnyb7] {
        height: auto;
        max-height: 320px;
    }

    .dl-config[b-de5elxnyb7] {
        height: auto;
    }

    .dl-cols-card[b-de5elxnyb7] {
        flex: 0 0 auto;
    }

        .dl-cols-card .dl-table-shell[b-de5elxnyb7] {
            max-height: 420px;
        }

    /* Opciones generales en dos columnas también en responsive */
    .dl-grid2[b-de5elxnyb7] {
        grid-template-columns: 1fr 1fr;
    }
}

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

.dl-col-orden[b-de5elxnyb7] {
    width: 64px;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
}
/* _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; }

.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; }
/* _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; }
/* _content/ErpPowergest/Presentation/Configuration/Menu/Pages/MenuConfiguracionPage.razor.rz.scp.css */
.mn-page[b-x5h2ujgv28] { padding: 20px 24px; max-width: 900px; margin: 0 auto; }

.mn-header[b-x5h2ujgv28] { margin-bottom: 16px; }
.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; }

.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/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 minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

/* HEADER */

.series-doc-header[b-oirli8agn9] {
    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). */
.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;
    /* Cuando la cabecera cede el ancho (CommandBar replegado), el título envuelve sin recortarse. */
    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: conserva su ancho natural y se alinea siempre a la derecha. */
.series-doc-header-actions[b-oirli8agn9] {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

.sd-detail-actions[b-oirli8agn9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* 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;
}

.series-doc-list-panel[b-oirli8agn9] {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 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;
    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;
    }

.sd-tab-footer[b-oirli8agn9] {
    display: flex;
    justify-content: flex-end;
}

/* 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;
    }

/* BOTONES */

.sd-action-btn[b-oirli8agn9] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

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

    .sd-action-btn:disabled[b-oirli8agn9] {
        opacity: 0.55;
        cursor: default;
    }

/* 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-detail-actions[b-oirli8agn9] {
        width: 100%;
    }

        .sd-detail-actions .sd-action-btn[b-oirli8agn9] {
            flex: 1 1 auto;
            width: auto;
        }

    .sd-selected-serie-box[b-oirli8agn9],
    .sd-options-grid[b-oirli8agn9],
    .sd-rules-grid[b-oirli8agn9] {
        grid-template-columns: 1fr;
    }

    .sd-action-btn[b-oirli8agn9] {
        width: 100%;
    }
}
/* _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;
}

.dc-page[b-p0y5kzwjhe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.dc-header[b-p0y5kzwjhe] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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 */

.dc-grid-wrapper[b-p0y5kzwjhe] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.dc-table[b-p0y5kzwjhe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .dc-table thead th[b-p0y5kzwjhe] {
        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;
    }

    .dc-table tbody td[b-p0y5kzwjhe] {
        padding: 7px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
        vertical-align: top;
    }

.dc-row-drill[b-p0y5kzwjhe] {
    cursor: pointer;
}

    .dc-row-drill:hover[b-p0y5kzwjhe] {
        background: #f8fbff;
    }

.dc-grupo-head td[b-p0y5kzwjhe] {
    background: #eef2ff;
    font-weight: 850;
    color: #3730a3;
    border-bottom: 1px solid #e0e7ff;
}

.dc-col-fecha[b-p0y5kzwjhe] {
    width: 96px;
    white-space: nowrap;
}

.dc-col-asiento[b-p0y5kzwjhe] {
    width: 90px;
    white-space: nowrap;
}

.dc-asiento-num[b-p0y5kzwjhe] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
}

.dc-col-cuenta[b-p0y5kzwjhe] {
    width: 180px;
    white-space: nowrap;
}

.dc-cuenta[b-p0y5kzwjhe] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    display: block;
}

.dc-cuenta-nombre[b-p0y5kzwjhe] {
    font-size: 11px;
    color: #94a3b8;
    display: block;
}

.dc-col-concepto[b-p0y5kzwjhe] {
    min-width: 160px;
}

.dc-col-dim[b-p0y5kzwjhe] {
    width: 130px;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #475569;
}

.dc-col-importe[b-p0y5kzwjhe] {
    text-align: right;
    white-space: nowrap;
    width: 110px;
    font-variant-numeric: tabular-nums;
}

.dc-table thead .dc-col-importe[b-p0y5kzwjhe] {
    text-align: right;
}

/* 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;
}
/* _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;
}

.dim-page[b-gf32cjj89q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.dim-header[b-gf32cjj89q] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
}

.dim-header-actions[b-gf32cjj89q] {
    display: flex;
    gap: 8px;
}

/* TABS DE EJE */

.dim-tabs[b-gf32cjj89q] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.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 */

.dim-alta-title[b-gf32cjj89q] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.dim-alta-grid[b-gf32cjj89q] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 12px;
}

.dim-field[b-gf32cjj89q] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .dim-field label[b-gf32cjj89q] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.dim-field-hint[b-gf32cjj89q] {
    font-size: 11px;
    color: #94a3b8;
}

.dim-input[b-gf32cjj89q] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .dim-input:focus[b-gf32cjj89q] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.dim-alta-actions[b-gf32cjj89q] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.dim-error-box[b-gf32cjj89q] {
    margin-top: 10px;
    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;
    }

.dim-results-bar[b-gf32cjj89q] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.dim-empty[b-gf32cjj89q] {
    padding: 26px 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* TABLA */

.dim-grid-wrapper[b-gf32cjj89q] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.dim-table[b-gf32cjj89q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .dim-table thead th[b-gf32cjj89q] {
        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;
    }

    .dim-table tbody td[b-gf32cjj89q] {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #1f2937;
    }

    .dim-table tbody tr:last-child td[b-gf32cjj89q] {
        border-bottom: 0;
    }

.dim-row[b-gf32cjj89q] {
    cursor: pointer;
    transition: background 0.12s ease;
}

    .dim-row:hover[b-gf32cjj89q] {
        background: #f8fbff;
    }

.dim-col-codigo[b-gf32cjj89q] {
    width: 220px;
    white-space: nowrap;
}

.dim-codigo[b-gf32cjj89q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #1d4ed8;
    display: inline-block;
}

.dim-col-nombre[b-gf32cjj89q] {
    min-width: 220px;
}

.dim-col-centrada[b-gf32cjj89q] {
    text-align: center;
    white-space: nowrap;
    width: 120px;
}

.dim-table thead .dim-col-centrada[b-gf32cjj89q] {
    text-align: center;
}

/* 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;
}

/* BOTONES */

.dim-btn[b-gf32cjj89q] {
    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-transform: capitalize;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dim-btn-ico[b-gf32cjj89q] {
    font-size: 18px;
    line-height: 1;
}

.dim-btn-primary[b-gf32cjj89q] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

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

.dim-btn-ghost[b-gf32cjj89q] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .dim-btn-ghost:hover:not(:disabled)[b-gf32cjj89q] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.dim-btn:disabled[b-gf32cjj89q] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 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 */

@media (max-width: 760px) {
    .dim-alta-grid[b-gf32cjj89q] {
        grid-template-columns: 1fr;
    }

    .dim-search[b-gf32cjj89q] {
        flex: 1 1 100%;
        min-width: 0;
    }
}
/* _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] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    color: #1f2933;
}

.rep-header[b-u085fqh5tk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.rep-header-fields[b-u085fqh5tk] {
    display: flex;
    gap: .75rem;
}

.rep-title[b-u085fqh5tk] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.rep-subtitle[b-u085fqh5tk] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
    max-width: 46rem;
}

.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;
    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; }

.rep-table[b-u085fqh5tk] {
    width: 100%;
    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; }
/* _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;
}

.cuentas-page[b-yo5ifh7awo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.cc-header[b-yo5ifh7awo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
}

.cc-header-actions[b-yo5ifh7awo] {
    display: flex;
    gap: 8px;
}

/* 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);
}

.cc-section-title[b-yo5ifh7awo] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
}

.cc-list-subtitle[b-yo5ifh7awo] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* ALTA DE SUBCUENTA */

.cc-alta-title[b-yo5ifh7awo] {
    font-size: 14px;
    font-weight: 850;
    color: #1f2937;
    margin-bottom: 10px;
}

.cc-alta-grid[b-yo5ifh7awo] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 12px;
}

.cc-field[b-yo5ifh7awo] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .cc-field label[b-yo5ifh7awo] {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

.cc-field-hint[b-yo5ifh7awo] {
    font-size: 11px;
    color: #94a3b8;
}

.cc-input[b-yo5ifh7awo] {
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #111827;
    background: #ffffff;
}

    .cc-input:focus[b-yo5ifh7awo] {
        outline: 2px solid #bfdbfe;
        border-color: #93c5fd;
    }

.cc-alta-actions[b-yo5ifh7awo] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.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 */

.cc-list-head[b-yo5ifh7awo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cc-search[b-yo5ifh7awo] {
    position: relative;
    min-width: 260px;
    flex: 0 1 340px;
}

.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-results-bar[b-yo5ifh7awo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.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 */

.cc-grid-wrapper[b-yo5ifh7awo] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.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;
    }

    .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-grupo[b-yo5ifh7awo] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.cc-badge-subcuenta[b-yo5ifh7awo] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.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;
}

.cc-revision-acciones[b-yo5ifh7awo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .cc-alta-grid[b-yo5ifh7awo] {
        grid-template-columns: 1fr;
    }

    .cc-search[b-yo5ifh7awo] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cc-revision-acciones[b-yo5ifh7awo] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _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;
}

.cuentas-anuales-page[b-ebvdytkmod] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.ca-header[b-ebvdytkmod] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
}

.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-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 */

@media (max-width: 900px) {
    .ca-filtros-acciones[b-ebvdytkmod] {
        margin-left: 0;
    }

    .ca-select-informe[b-ebvdytkmod] {
        min-width: 220px;
    }
}
/* _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;
}

.def-page[b-tsncwmar9r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA */

.def-header[b-tsncwmar9r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
}

.def-header-actions[b-tsncwmar9r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 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 */

@media (max-width: 900px) {
    .def-filtros-acciones[b-tsncwmar9r] {
        margin-left: 0;
    }

    .def-grid-wrapper[b-tsncwmar9r] {
        max-height: none;
    }
}
/* _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: 12px;
    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 */

.dg-header[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dg-title[b-vori6gw4s1] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.dg-subtitle[b-vori6gw4s1] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.dg-header-actions[b-vori6gw4s1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 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 ── */

.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;
    }

.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(160px, 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(220px, 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;
}

.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;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .dg-editor-grid[b-vori6gw4s1] {
        grid-template-columns: 1fr;
    }

    .dg-list-range[b-vori6gw4s1] {
        flex: 1 1 100%;
    }
}

/* 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;
    }
/* _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] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CABECERA (mismo patrón visual que el resto de pantallas: cc-header) */

.cc-header[b-nltsg7tgc4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
    font-size: 22px;
    font-weight: 850;
    color: #111827;
}

.cc-subtitle[b-nltsg7tgc4] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.cc-header-actions[b-nltsg7tgc4] {
    display: flex;
    gap: 8px;
}

/* 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;
}

/* BOTONES */

.cc-btn[b-nltsg7tgc4] {
    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-ico[b-nltsg7tgc4] {
    font-size: 18px;
    line-height: 1;
}

.cc-btn-primary[b-nltsg7tgc4] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cc-btn-primary:hover[b-nltsg7tgc4] {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }

/* RESPONSIVE */

@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;
    }
}
/* _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.
*/

.op-page[b-2btiu4nc3m] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1180px;
    margin: 0 auto;
    color: #1f2933;
}

.op-header[b-2btiu4nc3m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.op-title[b-2btiu4nc3m] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.op-subtitle[b-2btiu4nc3m] {
    color: #61707d;
    font-size: .9rem;
    margin-top: .15rem;
}

.op-card[b-2btiu4nc3m] {
    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-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; }

.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;
    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; }

/* El listado abre ficha al pulsar la fila: hay que verse que es pulsable. */
.op-table-click tbody tr[b-2btiu4nc3m] { cursor: pointer; }
.op-table-click tbody tr:hover[b-2btiu4nc3m] { background: #f5f8fc; }
.op-row-sel[b-2btiu4nc3m], .op-table-click tbody tr.op-row-sel:hover[b-2btiu4nc3m] { background: #e8f0fe; }

/* 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; }
/* _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.
*/

.op-page[b-2spz3uv3ob] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    color: #1f2933;
}

.op-header[b-2spz3uv3ob] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.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;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.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; }

.op-grid-wrapper[b-2spz3uv3ob] { overflow-x: auto; }

.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;
}
/* _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] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    color: #1f2933;
}

.op-header[b-cpqnr42xtu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.op-title[b-cpqnr42xtu] {
    font-size: 1.6rem;
    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;
    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; }

.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; }

.op-table[b-cpqnr42xtu] {
    width: 100%;
    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(180px, 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;
}
/* _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.
*/

.op-page[b-20lg58s6fj] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1180px;
    margin: 0 auto;
    color: #1f2933;
}

.op-header[b-20lg58s6fj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.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;
    margin-bottom: 1.1rem;
    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; }
.op-col-orden[b-20lg58s6fj] { width: 2.5rem; }
.op-col-acciones[b-20lg58s6fj] { 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-20lg58s6fj] { cursor: pointer; }
.op-table-click tbody tr:hover[b-20lg58s6fj] { background: #f5f8fc; }
.op-row-sel[b-20lg58s6fj], .op-table-click tbody tr.op-row-sel:hover[b-20lg58s6fj] { 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-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; }
/* _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] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    color: #1f2933;
}

.ss-header[b-j7nsjkhzuo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.ss-title[b-j7nsjkhzuo] {
    font-size: 1.6rem;
    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;
}

.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;
    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. */
.ss-grid-wrapper[b-j7nsjkhzuo] { overflow-x: auto; }

.ss-table[b-j7nsjkhzuo] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.ss-table th[b-j7nsjkhzuo] {
    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;
}

.ss-table td[b-j7nsjkhzuo] {
    padding: .4rem .5rem;
    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: .55rem;
}

.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;
}
/* _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; }
/* _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/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-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/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/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;
}

/* ===== 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 ── */

.calendario-header[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.calendario-titulo[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

    .calendario-titulo .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 20px;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 9px;
        padding: 5px;
    }


/* ── Filtros ── */

.calendario-filtros[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 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;
    }


/* ── Botón nueva actividad ── */

.btn-nueva-actividad[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: #3b82f6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

    .btn-nueva-actividad:hover[b-9ipinyb67w] {
        background: #2563eb;
        box-shadow: 0 2px 8px rgba(59,130,246,0.35);
    }

    .btn-nueva-actividad .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 18px;
    }


/* Los atajos: al lado del botón principal pero sin competir con él. Es una consulta, no una acción,
   y quien ya se los sabe no tiene que verlo cada vez que entra. */
.btn-atajos-cal[b-9ipinyb67w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e3e8ef;
    background: #fff;
    color: #5b6673;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

    .btn-atajos-cal:hover[b-9ipinyb67w] {
        background: #f5f8ff;
        border-color: #cddcff;
        color: #2f6fed;
    }

    .btn-atajos-cal .material-symbols-rounded[b-9ipinyb67w] {
        font-size: 18px;
    }


/* ── 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;
}

.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);
    }

/* 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 {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}

[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). Contrapartida: el menú de 3 puntos de una nota en el borde inferior puede recortarse
       al desplegarse (basta desplazar un poco). */
    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;
    }

/* La confirmación de completar, dentro del detalle, va a ras (sin la sangría de la tarjeta). */
[b-5oeq3rz1ar] .act-det-confirm {
    margin-left: 0;
}

/* ── Detalle de actividad: un panel más de la columna, encima del historial (no es modal) ── */
[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 scroll lo lleva SOLO la lista de apuntes (ver .act-det-log): así la caja de escribir se queda
   siempre abajo, a la vista, en vez de irse con el contenido y montarse encima de los apuntes. */
[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-titulo {
    margin: 1px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

[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] .act-det-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: #64748b;
}

[b-5oeq3rz1ar] .act-det-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    [b-5oeq3rz1ar] .act-det-meta-item .material-symbols-rounded {
        font-size: 15px;
        color: #94a3b8;
    }

[b-5oeq3rz1ar] .act-det-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

    [b-5oeq3rz1ar] .act-det-badge.pendiente {
        background: #fef3c7;
        color: #b45309;
    }

    [b-5oeq3rz1ar] .act-det-badge.hecha {
        background: #dcfce7;
        color: #15803d;
    }

[b-5oeq3rz1ar] .act-det-descripcion {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 8px 10px;
}

[b-5oeq3rz1ar] .act-det-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

[b-5oeq3rz1ar] .act-det-accion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 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;
}

    [b-5oeq3rz1ar] .act-det-accion:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    [b-5oeq3rz1ar] .act-det-accion .material-symbols-rounded {
        font-size: 17px;
    }

    [b-5oeq3rz1ar] .act-det-accion.peligro {
        color: #b91c1c;
    }

        [b-5oeq3rz1ar] .act-det-accion.peligro:hover {
            background: #fef2f2;
            border-color: #fecaca;
        }

[b-5oeq3rz1ar] .act-det-log-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

/* Los apuntes son el único trozo que crece sin límite: aquí es donde va el scroll. El tope deja el
   detalle a una altura razonable y el historial sigue a la vista debajo. */
[b-5oeq3rz1ar] .act-det-log {
    /* Lo que ocupa un apunte: la fila (~37px) más el hueco que la separa del siguiente. */
    --alto-apunte: 47px;

    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 60px;
    /* Un apunte menos de alto que la pantalla daría de sí: el panel queda más contenido. */
    max-height: calc(42vh - var(--alto-apunte));
    overflow-y: auto;
    /* Aire para que la barra de scroll no pise el botón de borrar del apunte. */
    padding-right: 6px;
}

[b-5oeq3rz1ar] .act-det-log-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 24px 10px;
}

    [b-5oeq3rz1ar] .act-det-log-vacio .material-symbols-rounded {
        font-size: 26px;
        opacity: 0.6;
    }

[b-5oeq3rz1ar] .act-log-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[b-5oeq3rz1ar] .act-log-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

[b-5oeq3rz1ar] .act-log-cuerpo {
    flex: 1;
    min-width: 0;
}

[b-5oeq3rz1ar] .act-log-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

[b-5oeq3rz1ar] .act-log-autor {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
}

[b-5oeq3rz1ar] .act-log-hora {
    font-size: 11px;
    color: #94a3b8;
}

[b-5oeq3rz1ar] .act-log-contenido {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    word-break: break-word;
}

[b-5oeq3rz1ar] .act-log-borrar {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

    [b-5oeq3rz1ar] .act-log-borrar .material-symbols-rounded {
        font-size: 16px;
    }

[b-5oeq3rz1ar] .act-log-item:hover .act-log-borrar {
    opacity: 1;
}

    [b-5oeq3rz1ar] .act-log-borrar:hover {
        color: #ef4444;
    }

/* Caja de escribir: queda fuera del scroll de los apuntes, pegada al fondo del panel y siempre visible. */
[b-5oeq3rz1ar] .act-det-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
}

    [b-5oeq3rz1ar] .act-det-add .inline-input {
        flex: 1;
    }

[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;
}
/* _content/ErpPowergest/Presentation/Crm/Pages/ContactosPage.razor.rz.scp.css */
/* ════════════════════════════════════════
            Contactos.razor.css
   ════════════════════════════════════════ */

/* ── Página ── */
.contactos-page[b-8jktjfp3fx] {
    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: 20px;
}

/* ── Header ── */
.contactos-header[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contactos-header-info[b-8jktjfp3fx] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.contactos-title[b-8jktjfp3fx] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
}

.contactos-count[b-8jktjfp3fx] {
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Color y hover: .btn-azul-crm (app.css). Aquí, solo la forma. */
.btn-nuevo-contacto[b-8jktjfp3fx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* Acción secundaria (exportar): misma forma y tamaño que el botón principal, pero plano. Antes
   reutilizaba .btn-nuevo-contacto pisando solo los colores, así que se quedaba con el halo azul y
   el salto al pasar por encima: un botón blanco con sombra de color llamaba más que el principal. */
.btn-secundario-contactos[b-8jktjfp3fx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .btn-secundario-contactos:hover:not(:disabled)[b-8jktjfp3fx] {
        background: #f8fafc;
        border-color: #94a3b8;
    }

    .btn-secundario-contactos:disabled[b-8jktjfp3fx] {
        color: #94a3b8;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

    .btn-secundario-contactos .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 18px;
    }

    .btn-nuevo-contacto .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 18px;
    }

/* ── Buscador ── */
.contactos-search-bar[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.search-icon[b-8jktjfp3fx] {
    font-size: 18px;
    color: #94a3b8;
    flex-shrink: 0;
}

.search-input[b-8jktjfp3fx] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1e293b;
    background: transparent;
}

    .search-input[b-8jktjfp3fx]::placeholder {
        color: #94a3b8;
    }

/* ── Tabla ── */
.contactos-table-wrapper[b-8jktjfp3fx] {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .contactos-table-wrapper[b-8jktjfp3fx]::-webkit-scrollbar {
        width: 6px;
    }

    .contactos-table-wrapper[b-8jktjfp3fx]::-webkit-scrollbar-track {
        background: transparent;
        margin: 8px 0;
    }

    .contactos-table-wrapper[b-8jktjfp3fx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .contactos-table-wrapper[b-8jktjfp3fx]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.contactos-table[b-8jktjfp3fx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .contactos-table thead tr[b-8jktjfp3fx] {
        border-bottom: 1px solid #e2e8f0;
    }

    .contactos-table th[b-8jktjfp3fx] {
        padding: 12px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        /* Cabecera fija al hacer scroll dentro del wrapper. */
        position: sticky;
        top: 0;
        z-index: 1;
        background: #ffffff;
        box-shadow: inset 0 -1px 0 #e2e8f0;
    }

    .th-accion[b-8jktjfp3fx] {
        width: 40px;
    }

    /* Cabeceras ordenables: clicables, con flecha de sentido. */
    .th-orden[b-8jktjfp3fx] {
        cursor: pointer;
        user-select: none;
        transition: color 0.15s ease;
    }

        .th-orden:hover[b-8jktjfp3fx] {
            color: #64748b;
        }

        .th-orden.activo[b-8jktjfp3fx] {
            color: #2563eb;
        }

    .th-orden-inner[b-8jktjfp3fx] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .th-orden-icon[b-8jktjfp3fx] {
        font-size: 15px;
        line-height: 1;
        opacity: 0.5;
        transition: opacity 0.15s ease;
    }

    .th-orden:hover .th-orden-icon[b-8jktjfp3fx],
    .th-orden.activo .th-orden-icon[b-8jktjfp3fx] {
        opacity: 1;
    }

.contacto-row[b-8jktjfp3fx] {
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

    .contacto-row:last-child[b-8jktjfp3fx] {
        border-bottom: none;
    }

    .contacto-row:hover[b-8jktjfp3fx] {
        background: #f6f9ff;
    }

        /* Barra de acento a la izquierda + avatar y chevron reaccionan al pasar el ratón. */
        .contacto-row:hover td:first-child[b-8jktjfp3fx] {
            box-shadow: inset 3px 0 0 #2563eb;
        }

        .contacto-row:hover .contacto-avatar[b-8jktjfp3fx] {
            transform: scale(1.08);
        }

        .contacto-row:hover .contacto-chevron[b-8jktjfp3fx] {
            opacity: 1;
            transform: translateX(0);
            color: #2563eb;
        }

    .contacto-row td[b-8jktjfp3fx] {
        padding: 12px 16px;
        color: #334155;
        vertical-align: middle;
    }

.contacto-accion-cell[b-8jktjfp3fx] {
    width: 40px;
    text-align: right;
}

.contacto-chevron[b-8jktjfp3fx] {
    font-size: 20px;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.contacto-nombre-cell[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacto-avatar[b-8jktjfp3fx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(16,24,40,0.14);
    transition: transform 0.15s ease;
}

/* Paleta estable por contacto (ver GetAvatarColor). Van después de .contacto-avatar para ganar. */
.avatar-c1[b-8jktjfp3fx] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.avatar-c2[b-8jktjfp3fx] { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.avatar-c3[b-8jktjfp3fx] { background: linear-gradient(135deg, #ec4899, #db2777); }
.avatar-c4[b-8jktjfp3fx] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar-c5[b-8jktjfp3fx] { background: linear-gradient(135deg, #10b981, #059669); }
.avatar-c6[b-8jktjfp3fx] { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.avatar-c7[b-8jktjfp3fx] { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.avatar-c8[b-8jktjfp3fx] { background: linear-gradient(135deg, #64748b, #475569); }

.contacto-nombre-info[b-8jktjfp3fx] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.contacto-nombre[b-8jktjfp3fx] {
    font-weight: 600;
    color: #1e293b;
}

.contacto-cargo[b-8jktjfp3fx] {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.contacto-empresa[b-8jktjfp3fx] {
    color: #64748b;
}

.contacto-vacio[b-8jktjfp3fx] {
    color: #cbd5e1;
}

.contacto-email-cell[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacto-tipo-badge[b-8jktjfp3fx] {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 500;
}

/* ── Estado badges ── */
.estado-badge[b-8jktjfp3fx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

    /* Puntito del color del estado (usa el color de texto de cada variante). */
    .estado-badge[b-8jktjfp3fx]::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

.estado-nuevo[b-8jktjfp3fx] {
    background: #f1f5f9;
    color: #64748b;
}

.estado-contactado[b-8jktjfp3fx] {
    background: #fef9c3;
    color: #ca8a04;
}

.estado-cualificado[b-8jktjfp3fx] {
    background: #dbeafe;
    color: #2563eb;
}

.estado-cliente[b-8jktjfp3fx] {
    background: #dcfce7;
    color: #16a34a;
}

.estado-descartado[b-8jktjfp3fx] {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Vacío / Loading ── */
.contactos-loading[b-8jktjfp3fx],
.contactos-empty[b-8jktjfp3fx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 14px;
}

.loading-icon[b-8jktjfp3fx] {
    font-size: 32px;
    color: #cbd5e1;
    animation: spin-b-8jktjfp3fx 1.2s linear infinite;
}

@keyframes spin-b-8jktjfp3fx {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.empty-icon[b-8jktjfp3fx] {
    font-size: 48px;
    color: #cbd5e1;
}

/* ── Paginación ── */
.paginacion[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px 4px;
    flex-shrink: 0;
}

.pag-btn[b-8jktjfp3fx],
.pag-num[b-8jktjfp3fx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pag-btn[b-8jktjfp3fx] {
    width: 34px;
}

.pag-num[b-8jktjfp3fx] {
    min-width: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
}

    .pag-btn:hover:not(:disabled)[b-8jktjfp3fx],
    .pag-num:hover:not(.activa)[b-8jktjfp3fx] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.pag-btn:disabled[b-8jktjfp3fx] {
    opacity: 0.35;
    cursor: default;
}

.pag-btn .material-symbols-rounded[b-8jktjfp3fx] {
    font-size: 18px;
}

.pag-num.activa[b-8jktjfp3fx] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(37,99,235,0.25);
}

.pag-info[b-8jktjfp3fx] {
    margin-left: 8px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── 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;
    }

/* ── Badge de prioridad (celda de la tabla) ── */
.prioridad-badge[b-8jktjfp3fx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
}

/* ── 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;
}

/* Avatar y badge de las filas que son EMPRESA (para distinguirlas de las personas de un vistazo) */
.contacto-avatar.avatar-empresa[b-8jktjfp3fx] {
    background: #eef2ff;
    color: #4338ca;
}

    .contacto-avatar.avatar-empresa .material-symbols-rounded[b-8jktjfp3fx] {
        font-size: 20px;
    }

.badge-empresa[b-8jktjfp3fx] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

/* ── 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;
    }
/* _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. */

.cc-header[b-wyydlprtlw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.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: 8px 4px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    min-height: 100%;
}

.home-container[b-wyydlprtlw] {
    max-width: 1180px;
    margin: 0 auto;
}

/* ===== 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. */

.informes-page[b-adj08c38oi]{ padding:8px 4px 32px; max-width:1180px; margin:0 auto; }

.informes-header[b-adj08c38oi]{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.informes-title[b-adj08c38oi]{ font-size:22px; font-weight:750; margin:0; color:#0f172a; letter-spacing:-.01em; }
.informes-sub[b-adj08c38oi]{ color:#64748b; font-size:13px; margin-top:2px; }

/* Pestañas Panel / Informes */
.informes-tabs[b-adj08c38oi]{ display:flex; gap:4px; margin:16px 0 4px; border-bottom:1px solid #e6eaef; }
.informes-tab[b-adj08c38oi]{ background:none; border:none; padding:10px 16px; font-size:14px; font-weight:600; color:#8493a8;
    cursor:pointer; border-bottom:2px solid transparent; }
.informes-tab.activa[b-adj08c38oi]{ color:#0f766e; border-bottom-color:#0f766e; }
.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:8px 4px 32px; }   /* mismo margen que /crm */
.informes-title[b-adj08c38oi]{ font-size:23px; letter-spacing:-.02em; }
.informes-sub[b-adj08c38oi]{ font-size:13px; color:#6b7684; }

/* 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; }
.informes-tab[b-adj08c38oi]{ transition:color .15s ease, border-color .15s ease; }
.informes-tabs[b-adj08c38oi]{ border-bottom-color:#edf0f4; }
/* _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;
    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/Documentacion/Pages/DocumentacionPage.razor.rz.scp.css */
/* DE0 — la pantalla de lectura de la documentación.

   Dos columnas: índice a la izquierda, documento a la derecha. 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;
}

.doc-header[b-e2a0abnn3s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.doc-title[b-e2a0abnn3s] {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.doc-sub[b-e2a0abnn3s] {
    color: #6b7280;
    font-size: .85rem;
}

.doc-buscar[b-e2a0abnn3s] {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: .35rem .6rem;
    background: #fff;
}

.doc-buscar .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.1rem;
    color: #9ca3af;
}

.doc-input[b-e2a0abnn3s] {
    border: 0;
    outline: none;
    font: inherit;
    min-width: 220px;
}

.doc-cuerpo[b-e2a0abnn3s] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .doc-cuerpo[b-e2a0abnn3s] {
        grid-template-columns: 1fr;
    }
}

.doc-arbol[b-e2a0abnn3s] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: .5rem;
    max-height: 75vh;
    overflow: auto;
}

.doc-grupo[b-e2a0abnn3s] {
    margin-bottom: .75rem;
}

.doc-grupo-nombre[b-e2a0abnn3s] {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    padding: .3rem .5rem;
}

.doc-hoja[b-e2a0abnn3s] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    font-size: .85rem;
    color: #374151;
    padding: .35rem .5rem;
    border-radius: 5px;
    cursor: pointer;
}

.doc-hoja:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
}

.doc-hoja-activa[b-e2a0abnn3s] {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.doc-lectura[b-e2a0abnn3s] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 1.5rem 1.75rem;
    min-height: 60vh;
}

/* La cabecera del documento: su ruta a la izquierda, los botones a la derecha. */
.doc-barra[b-e2a0abnn3s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f3f4f6;
}

.doc-ruta[b-e2a0abnn3s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    color: #9ca3af;
}

.doc-acciones[b-e2a0abnn3s] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.doc-btn[b-e2a0abnn3s] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    padding: .4rem .8rem;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
}

.doc-btn:hover[b-e2a0abnn3s] {
    background: #1d4ed8;
}

.doc-btn:disabled[b-e2a0abnn3s] {
    opacity: .5;
    cursor: default;
}

.doc-btn-sec[b-e2a0abnn3s] {
    background: #f9fafb;
    color: #111827;
    border-color: #d1d5db;
}

.doc-btn-sec:hover[b-e2a0abnn3s] {
    background: #f3f4f6;
}

.doc-btn .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.05rem;
}

/* En qué instancia se escribe. Permanente mientras se pueda editar: en producción conviven dos
   instancias con clientes reales y nombres parecidos, y esto tiene que verse sin buscarlo. */
.doc-instancia[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-instancia .material-symbols-rounded[b-e2a0abnn3s] {
    font-size: 1.1rem;
}

.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;
}

.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],
.doc-vacio-arbol[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-bottom: 1rem;
}

/* El documento renderizado. Llega como MarkupString: sin ::deep no le llega ni una regla. */

.doc-md[b-e2a0abnn3s] {
    line-height: 1.7;
    color: #1f2937;
    font-size: .92rem;
}

.doc-md[b-e2a0abnn3s]  h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.doc-md[b-e2a0abnn3s]  h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f3f4f6;
}

.doc-md[b-e2a0abnn3s]  h3 {
    font-size: 1rem;
    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 .9rem;
    padding: .5rem 0 .5rem 1rem;
    border-left: 3px solid #d1d5db;
    color: #4b5563;
}

.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 278 de los 326 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: .85rem;
    display: block;
    overflow-x: auto;
}

.doc-md[b-e2a0abnn3s]  th,
.doc-md[b-e2a0abnn3s]  td {
    border: 1px solid #e5e7eb;
    padding: .4rem .6rem;
    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%;
}
/* _content/ErpPowergest/Presentation/Empresas/Contratar/ContratarPage.razor.rz.scp.css */
/* Elegir plan desde dentro (AL9). Mismo lenguaje visual que la tarifa del asistente de alta; se
   repite el estilo en vez de compartir selectores, por el criterio de la casa. */

.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: 14px;
    padding: 4px 2px 24px;
    max-width: 1080px;
}

.ct-kicker[b-atpk56p8zv] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6366f1;
}

.ct-title[b-atpk56p8zv] {
    margin: 2px 0 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    font-weight: 850;
    color: #1f2937;
}

.ct-subtitle[b-atpk56p8zv] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    max-width: 640px;
}

.ct-card[b-atpk56p8zv] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-msg[b-atpk56p8zv] {
    align-items: center;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    padding: 40px 18px;
    gap: 8px;
}

.ct-msg-ico[b-atpk56p8zv] {
    font-size: 34px;
    color: #16a34a;
}

.ct-msg strong[b-atpk56p8zv] {
    color: #1f2937;
    font-size: 15px;
}

.ct-msg p[b-atpk56p8zv] {
    margin: 0;
    max-width: 460px;
}

.ct-planes-cab[b-atpk56p8zv] {
    display: flex;
    justify-content: flex-end;
}

.ct-periodo[b-atpk56p8zv] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    overflow: hidden;
}

.ct-periodo-btn[b-atpk56p8zv] {
    padding: 7px 16px;
    border: 0;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.ct-periodo-btn.active[b-atpk56p8zv] {
    background: #6366f1;
    color: #ffffff;
}

.ct-planes[b-atpk56p8zv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ct-plan[b-atpk56p8zv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.ct-plan-nombre[b-atpk56p8zv] {
    font-size: 15px;
    font-weight: 850;
    color: #1f2937;
}

.ct-plan-desc[b-atpk56p8zv] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
    min-height: 34px;
}

.ct-plan-precio[b-atpk56p8zv] {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ct-plan-precio strong[b-atpk56p8zv] {
    font-size: 26px;
    font-weight: 850;
    color: #1f2937;
}

.ct-plan-precio span[b-atpk56p8zv] {
    font-size: 13px;
    color: #6b7280;
}

.ct-plan-consultanos[b-atpk56p8zv] {
    font-size: 18px !important;
    color: #4338ca !important;
}

.ct-btn[b-atpk56p8zv] {
    margin-top: auto;
    height: 36px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    text-align: center;
}

.ct-btn:disabled[b-atpk56p8zv] {
    opacity: .5;
    cursor: default;
}

.ct-btn-primary[b-atpk56p8zv] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.ct-btn-primary:hover:not(:disabled)[b-atpk56p8zv] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.ct-btn-link[b-atpk56p8zv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ct-error[b-atpk56p8zv] {
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 12px;
}

.ct-nota[b-atpk56p8zv] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
}
/* _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*/
.form-header[b-3mh9eke3r7] {
    margin-bottom: 0.5rem;
    text-align: left;
}

.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;
}
/* _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 {
    box-sizing: border-box;
}

.empresa-cfg-page[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;
    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: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

    .ec-list-title-row[b-uzq9f0k1cq]  .command-bar__btn:hover:not(:disabled),
    .ec-detail-top[b-uzq9f0k1cq]  .command-bar__btn:hover:not(:disabled),
    .ec-usuarios-head[b-uzq9f0k1cq]  .command-bar__btn:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    /* Deshabilitado + puntero encima: se declara aunque repita el reposo porque «:hover» también
       casa con un botón deshabilitado, y las reglas :hover del propio CommandBar empatarían en
       especificidad y ganarían por orden de carga. */
    .ec-list-title-row[b-uzq9f0k1cq]  .command-bar__btn:disabled:hover,
    .ec-detail-top[b-uzq9f0k1cq]  .command-bar__btn:disabled:hover,
    .ec-usuarios-head[b-uzq9f0k1cq]  .command-bar__btn:disabled:hover {
        background: transparent;
        border-color: #c1c6d7;
        color: #414754;
    }

/* El icono sigue al color de su botón —de ahí el inherit— y 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 {
    color: inherit;
    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);
    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;
        }
}
/* _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: 12px;
    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;
}

.pem-heading[b-avtv2v1ya0] {
    min-width: 0;
}

.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;
    overflow-wrap: break-word;
}

.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 */

.pem-steps[b-avtv2v1ya0] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.pem-step[b-avtv2v1ya0] {
    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;
}

.pem-step:hover:not(:disabled)[b-avtv2v1ya0] {
    border-color: #c7d2fe;
    color: #4338ca;
}

.pem-step:disabled[b-avtv2v1ya0] {
    cursor: default;
    opacity: .7;
}

.pem-step.active[b-avtv2v1ya0] {
    border-color: #6366f1;
    background: #eef2ff;
    color: #3730a3;
}

.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: #6366f1;
    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;
}

.pem-listo-acceso[b-avtv2v1ya0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #86efac;
    color: #166534;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.pem-listo-acceso:hover[b-avtv2v1ya0] {
    background: #dcfce7;
    border-color: #4ade80;
}

.pem-listo-acceso .material-symbols-rounded[b-avtv2v1ya0] {
    font-size: 18px;
}

.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;
}

.pem-btn[b-avtv2v1ya0] {
    height: 36px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.pem-btn:hover:not(:disabled)[b-avtv2v1ya0] {
    border-color: #9ca3af;
}

.pem-btn:disabled[b-avtv2v1ya0] {
    opacity: .5;
    cursor: default;
}

.pem-btn-ghost[b-avtv2v1ya0] {
    border-color: transparent;
    color: #6b7280;
}

.pem-btn-primary[b-avtv2v1ya0] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.pem-btn-primary:hover:not(:disabled)[b-avtv2v1ya0] {
    background: #4f46e5;
    border-color: #4f46e5;
}

/* 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;
    }
}


/* Las salidas, tambien en la cabecera (mismos botones y rotulos que el pie): quien entra por
   primera vez no sabe que el pie esta al fondo del scroll. */
.pem-header-acciones[b-avtv2v1ya0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Los botones ganan un icono pequeno delante del rotulo (cabecera y pie por igual). */
.pem-btn[b-avtv2v1ya0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pem-btn-ico[b-avtv2v1ya0] {
    font-size: 16px;
    line-height: 1;
}
/* _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/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;
}

/* EL4: «Informes» es un tercer hijo de una fila con space-between, así que sin esto se quedaría
   colgado en el centro. El margen automático lo empuja contra el CommandBar. */
.agente-ficha-header[b-ytzyeugn3k]  .cform-header-informes {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}

/* ===== 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;
    }
}
/* _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) 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) 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/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;
}

/* EL4: «Informes» es un tercer hijo de una fila con space-between, así que sin esto se quedaría
   colgado en el centro. El margen automático lo empuja contra el CommandBar y los dos quedan juntos
   a la derecha, leídos como un solo grupo de acciones. */
.cliente-ficha-header[b-a6tfquhdio]  .cform-header-informes {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}

/* ===== 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;
}

.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;
}

/* 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;
    }
}
/* _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) 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) 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 */
.top-clientes-page[b-uu1kdwv9k0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.top-clientes-title[b-uu1kdwv9k0] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.top-clientes-subtitle[b-uu1kdwv9k0] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

.card-panel[b-uu1kdwv9k0] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.top-clientes-list-panel[b-uu1kdwv9k0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-clientes-list-header[b-uu1kdwv9k0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.top-clientes-list-subtitle[b-uu1kdwv9k0] {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

.top-clientes-header-actions[b-uu1kdwv9k0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-clientes-filters[b-uu1kdwv9k0] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.top-filter-item-search[b-uu1kdwv9k0] {
    flex: 1 1 auto;
    min-width: 0;
}

.top-filter-item[b-uu1kdwv9k0] {
    flex: 0 0 auto;
}

    .top-filter-item:not(.top-filter-item-search)[b-uu1kdwv9k0] {
        width: 190px;
    }

.top-filter-input[b-uu1kdwv9k0],
.top-filter-select[b-uu1kdwv9k0] {
    width: 100%;
    height: 42px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .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);
    }

.top-filter-select[b-uu1kdwv9k0] {
    cursor: pointer;
}

.top-filter-actions[b-uu1kdwv9k0] {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.top-primary-btn[b-uu1kdwv9k0],
.top-action-btn[b-uu1kdwv9k0] {
    height: 42px;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

    .top-primary-btn:hover[b-uu1kdwv9k0] {
        background: #1d4ed8;
    }

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

    .top-action-btn:hover[b-uu1kdwv9k0] {
        background: #f8fafc;
    }

.top-clientes-results-bar[b-uu1kdwv9k0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 22px;
}

.top-clientes-results-text[b-uu1kdwv9k0] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.top-clientes-grid-wrapper[b-uu1kdwv9k0] {
    width: 100%;
    min-width: 0;
}

.top-clientes-grid.e-grid[b-uu1kdwv9k0] {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.top-clientes-grid .e-gridcontent[b-uu1kdwv9k0],
.top-clientes-grid .e-table[b-uu1kdwv9k0] {
    cursor: pointer;
}

.top-clientes-grid .e-row:hover .e-rowcell[b-uu1kdwv9k0] {
    background: #f8fbff;
}

.top-estado-badge[b-uu1kdwv9k0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}

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

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

@media (max-width: 1280px) {
    .top-clientes-filters[b-uu1kdwv9k0] {
        flex-wrap: wrap;
    }

    .top-filter-item-search[b-uu1kdwv9k0] {
        flex: 1 1 100%;
    }

    .top-filter-item:not(.top-filter-item-search)[b-uu1kdwv9k0] {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .top-clientes-list-header[b-uu1kdwv9k0] {
        flex-direction: column;
        align-items: stretch;
    }

    .top-clientes-filters[b-uu1kdwv9k0] {
        flex-direction: column;
        align-items: stretch;
    }

    .top-filter-item[b-uu1kdwv9k0],
    .top-filter-item-search[b-uu1kdwv9k0],
    .top-filter-item:not(.top-filter-item-search)[b-uu1kdwv9k0],
    .top-filter-actions[b-uu1kdwv9k0] {
        width: 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;
}

/* 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-acciones[b-lfbvs7dap9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cst-btn[b-lfbvs7dap9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

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

    .cst-btn .material-symbols-outlined[b-lfbvs7dap9] {
        font-size: 1.1rem;
    }

.cst-btn-primario[b-lfbvs7dap9] {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cst-btn-primario:hover[b-lfbvs7dap9] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.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) 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) 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;
    }
}
/* _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;
}

/* EL4: «Informes» es un tercer hijo de una fila con space-between, así que sin esto se quedaría
   colgado en el centro. El margen automático lo empuja contra el CommandBar. */
.proveedor-ficha-header[b-i1qjcxg1e4]  .cform-header-informes {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}

/* ===== 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;
    }
}
/* _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;
}

.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;
    }
}
/* _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/GestionIvas/Pages/GestionIvaPage.razor.rz.scp.css */
.gestion-iva-page[b-rk0ilcspcx],
.gestion-iva-page *[b-rk0ilcspcx],
.gestion-iva-page *[b-rk0ilcspcx]::before,
.gestion-iva-page *[b-rk0ilcspcx]::after {
    box-sizing: border-box;
}

.gestion-iva-page[b-rk0ilcspcx] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    overflow: hidden;
}

.gestion-iva-header[b-rk0ilcspcx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

    .gestion-iva-header > div:first-child[b-rk0ilcspcx] {
        min-width: 0;
        flex: 1 1 auto;
    }

.gestion-iva-title[b-rk0ilcspcx] {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
}

.gestion-iva-subtitle[b-rk0ilcspcx] {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gestion-iva-header-actions[b-rk0ilcspcx],
.giva-header-actions[b-rk0ilcspcx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.card-panel[b-rk0ilcspcx] {
    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-rk0ilcspcx] {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin[b-rk0ilcspcx] {
    margin: 0;
}

/* KPIS */

.gestion-iva-summary-panel[b-rk0ilcspcx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.giva-kpi-card[b-rk0ilcspcx] {
    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);
}

.giva-kpi-head[b-rk0ilcspcx] {
    width: 104px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    flex: 0 0 auto;
}

.giva-kpi-card-blue .giva-kpi-head[b-rk0ilcspcx] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.giva-kpi-card-green .giva-kpi-head[b-rk0ilcspcx] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.giva-kpi-card-orange .giva-kpi-head[b-rk0ilcspcx] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.giva-kpi-card-purple .giva-kpi-head[b-rk0ilcspcx] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.giva-kpi-body[b-rk0ilcspcx] {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.giva-kpi-value[b-rk0ilcspcx] {
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.giva-kpi-value-text[b-rk0ilcspcx] {
    font-size: 16px;
}

.giva-kpi-foot[b-rk0ilcspcx] {
    font-size: 11px;
    color: #8b95a7;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TABS */

.gestion-iva-tabs-panel[b-rk0ilcspcx] {
    padding: 10px 12px;
    overflow: hidden;
}

.gestion-iva-tabs[b-rk0ilcspcx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.gestion-iva-tab[b-rk0ilcspcx] {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

    .gestion-iva-tab:hover[b-rk0ilcspcx] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .gestion-iva-tab.active[b-rk0ilcspcx] {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

/* BODY */

.gestion-iva-body[b-rk0ilcspcx] {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

    /* El contenido del tab activo ocupa todo el alto disponible del body */
    .gestion-iva-body > *[b-rk0ilcspcx] {
        flex: 1 1 auto;
        min-height: 0;
    }

.gestion-iva-content-grid[b-rk0ilcspcx] {
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 10px;
    align-items: stretch;
    overflow: visible;
}

.gestion-iva-content-grid-main[b-rk0ilcspcx] {
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    overflow: visible;
}

.giva-types-panel[b-rk0ilcspcx],
.giva-edit-panel[b-rk0ilcspcx],
.giva-form-panel[b-rk0ilcspcx] {
    min-width: 0;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}

.giva-panel-header[b-rk0ilcspcx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    flex: 0 0 auto;
}

    .giva-panel-header > div:first-child[b-rk0ilcspcx] {
        min-width: 0;
        flex: 1 1 auto;
    }

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

/* GRUPOS */

.giva-group-tabs[b-rk0ilcspcx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 0 0 auto;
}

.giva-group-tab[b-rk0ilcspcx] {
    height: 34px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

    .giva-group-tab:hover[b-rk0ilcspcx] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .giva-group-tab.active[b-rk0ilcspcx] {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

/* LISTA TIPOS */

.giva-types-list[b-rk0ilcspcx] {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .giva-types-list[b-rk0ilcspcx]::-webkit-scrollbar {
        width: 6px;
    }

    .giva-types-list[b-rk0ilcspcx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.giva-type-card[b-rk0ilcspcx] {
    width: 100%;
    min-width: 0;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 11px 12px;
    cursor: pointer;
}

    .giva-type-card:hover[b-rk0ilcspcx] {
        background: #f8fbff;
        border-color: #bfdbfe;
    }

    .giva-type-card.active[b-rk0ilcspcx] {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }

.giva-type-top[b-rk0ilcspcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .giva-type-top strong[b-rk0ilcspcx] {
        font-size: 17px;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
    }

    .giva-type-top span[b-rk0ilcspcx] {
        min-width: 0;
        font-size: 12px;
        color: #1d4ed8;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.giva-type-title[b-rk0ilcspcx] {
    margin-top: 6px;
    font-size: 12px;
    color: #374151;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.giva-type-meta[b-rk0ilcspcx] {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 700;
}

/* EDICION */

.giva-edit-grid[b-rk0ilcspcx] {
    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;
}

    .giva-edit-grid[b-rk0ilcspcx]::-webkit-scrollbar {
        width: 6px;
    }

    .giva-edit-grid[b-rk0ilcspcx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.giva-edit-block[b-rk0ilcspcx] {
    min-width: 0;
    align-self: start;
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px;
}

.giva-block-title[b-rk0ilcspcx] {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5eaf0;
    font-size: 13px;
    font-weight: 900;
    color: #111827;
}

/* FORMULARIOS */

.giva-form-grid[b-rk0ilcspcx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
}

.giva-form-grid-3[b-rk0ilcspcx] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.giva-form-grid-2[b-rk0ilcspcx] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.giva-form-grid-single[b-rk0ilcspcx] {
    grid-template-columns: 1fr;
}

.giva-field[b-rk0ilcspcx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.giva-field-span-2[b-rk0ilcspcx] {
    grid-column: span 2;
}

.giva-field label[b-rk0ilcspcx] {
    font-size: 12px;
    font-weight: 800;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.giva-input[b-rk0ilcspcx] {
    width: 100%;
    max-width: 100%;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

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

/* CHECKS E INFO */

.giva-check-grid[b-rk0ilcspcx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.giva-check-item[b-rk0ilcspcx] {
    min-height: 38px;
    display: 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;
    white-space: nowrap;
}

.giva-check-inline[b-rk0ilcspcx] {
    min-height: 34px;
}

.giva-check-item input[b-rk0ilcspcx] {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
    flex: 0 0 auto;
}

.giva-info-box[b-rk0ilcspcx] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

/* FACTURA */

.giva-grid-panel[b-rk0ilcspcx] {
    display: flex;
    flex-direction: column;
}

/* Contenido scrollable del panel "Datos para calculo del IVA" (cabecera fija) */
.giva-calc-scroll[b-rk0ilcspcx] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .giva-calc-scroll[b-rk0ilcspcx]::-webkit-scrollbar {
        width: 6px;
    }

    .giva-calc-scroll[b-rk0ilcspcx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.giva-rules-grid[b-rk0ilcspcx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.giva-rule-card[b-rk0ilcspcx] {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 14px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .giva-rule-card strong[b-rk0ilcspcx] {
        font-size: 12px;
        color: #111827;
        font-weight: 900;
    }

    .giva-rule-card span[b-rk0ilcspcx] {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.3;
    }

/* GRID SYNCFUSION */

.giva-grid.e-grid[b-rk0ilcspcx] {
    min-height: 260px;
    height: auto;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.giva-grid .e-gridheader[b-rk0ilcspcx] {
    border-bottom: 1px solid #eef2f7;
}

.giva-grid .e-headercell[b-rk0ilcspcx] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.giva-grid .e-headertext[b-rk0ilcspcx] {
    font-size: 12px;
    font-weight: 850;
}

.giva-grid .e-rowcell[b-rk0ilcspcx] {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 7px;
    padding-bottom: 7px;
}

.giva-grid .e-content[b-rk0ilcspcx] {
    max-height: 320px;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .giva-grid .e-content[b-rk0ilcspcx]::-webkit-scrollbar {
        width: 6px;
    }

    .giva-grid .e-content[b-rk0ilcspcx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

/* BOTONES BASE */

.giva-primary-btn[b-rk0ilcspcx],
.giva-action-btn[b-rk0ilcspcx] {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

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

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

/* RESPONSIVE */

@media (max-width: 1280px) {
    .gestion-iva-page[b-rk0ilcspcx] {
        min-height: calc(100dvh - 96px);
        height: auto;
    }

    .gestion-iva-summary-panel[b-rk0ilcspcx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gestion-iva-content-grid[b-rk0ilcspcx],
    .gestion-iva-content-grid-main[b-rk0ilcspcx] {
        grid-template-columns: 1fr;
    }

    .giva-types-list[b-rk0ilcspcx],
    .giva-edit-grid[b-rk0ilcspcx] {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 980px) {
    .gestion-iva-page[b-rk0ilcspcx] {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .gestion-iva-body[b-rk0ilcspcx],
    .gestion-iva-content-grid[b-rk0ilcspcx],
    .gestion-iva-content-grid-main[b-rk0ilcspcx],
    .giva-types-panel[b-rk0ilcspcx],
    .giva-edit-panel[b-rk0ilcspcx],
    .giva-form-panel[b-rk0ilcspcx],
    .giva-edit-grid[b-rk0ilcspcx],
    .giva-types-list[b-rk0ilcspcx] {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .gestion-iva-tabs[b-rk0ilcspcx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gestion-iva-header[b-rk0ilcspcx],
    .giva-panel-header[b-rk0ilcspcx] {
        flex-direction: column;
        align-items: stretch;
    }

    .gestion-iva-summary-panel[b-rk0ilcspcx],
    .giva-edit-grid[b-rk0ilcspcx],
    .giva-form-grid[b-rk0ilcspcx],
    .giva-form-grid-2[b-rk0ilcspcx],
    .giva-form-grid-3[b-rk0ilcspcx],
    .giva-group-tabs[b-rk0ilcspcx] {
        grid-template-columns: 1fr;
    }

    .giva-field-span-2[b-rk0ilcspcx] {
        grid-column: auto;
    }

    .gestion-iva-header-actions[b-rk0ilcspcx],
    .giva-header-actions[b-rk0ilcspcx] {
        width: 100%;
        flex-direction: row;
    }

    .giva-action-btn[b-rk0ilcspcx],
    .giva-primary-btn[b-rk0ilcspcx] {
        width: 100%;
    }
}
/* _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: 12px;
}

/* CABECERA (mismo patrón visual que el resto de pantallas: cc-header) */

.cc-header[b-aydsvalhui] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.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;
}

.cc-subtitle[b-aydsvalhui] {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.cc-header-actions[b-aydsvalhui] {
    display: flex;
    gap: 8px;
}

/* 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 */

.cc-btn[b-aydsvalhui] {
    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-ico[b-aydsvalhui] {
    font-size: 18px;
    line-height: 1;
}

.cc-btn-primary[b-aydsvalhui] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

    .cc-btn-primary:hover[b-aydsvalhui] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.cc-btn-ghost[b-aydsvalhui] {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .cc-btn-ghost:hover[b-aydsvalhui] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

/* 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;
}
/* _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: 18px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.pres-title[b-wz83pc5a32] {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    color: #0f172a;
}

.pres-subtitle[b-wz83pc5a32] {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
    max-width: 760px;
}

.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/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;
    }

/* 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;
}
/* _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  — la tabla (`imp-grid`, `imp-table-wrap`), el vacío
        (`imp-empty`) y el texto atenuado (`imp-muted`) traídos de
        ImportacionDatos.razor.css, 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);

    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cf-gap);
    color: var(--cf-text);
    animation: tareasImportacionPageIn-b-4xxx3et9te 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────  CABECERA  ───────────────────────────── */

.cform-topbar[b-4xxx3et9te] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* El bloque de título cede espacio para que el CommandBar conserve su ancho natural. */
.cform-topbar-text[b-4xxx3et9te] {
    min-width: 0;
}

.cform-title[b-4xxx3et9te] {
    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-4xxx3et9te] {
    margin: 2px 0 0;
    max-width: 90ch;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cf-muted);
}

/* El propio CommandBar repliega comandos al menú «···» cuando falta ancho. */
.cform-page[b-4xxx3et9te]  .cform-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: flex-start;
}

/* ───────────────────────────────  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;
}

/* 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). */
.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);
}

.cform-page[b-4xxx3et9te]  .imp-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    padding: 16px;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
}

.cform-page[b-4xxx3et9te]  .imp-table-wrap {
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    overflow: auto;
    max-height: 320px;
}

.cform-page[b-4xxx3et9te]  .imp-table-wrap--tall {
    max-height: 440px;
}

.cform-page[b-4xxx3et9te]  .imp-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .cform-page[b-4xxx3et9te]  .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-4xxx3et9te]  .imp-grid tbody td {
        padding: 8px 10px;
        border-bottom: 1px solid #eef2f7;
        color: var(--cf-text-2);
        vertical-align: middle;
    }

    .cform-page[b-4xxx3et9te]  .imp-grid tbody tr:last-child td {
        border-bottom: 0;
    }

/* 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;
}

/* 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-grid .cform-check {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cf-text-2);
}

    .cform-page[b-4xxx3et9te]  .imp-grid .cform-check:hover {
        background: transparent;
        border-color: transparent;
    }

    .cform-page[b-4xxx3et9te]  .imp-grid .cform-check:has(input:checked) {
        background: transparent;
        border-color: transparent;
        color: var(--cf-brand-strong);
    }

    .cform-page[b-4xxx3et9te]  .imp-grid .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);
}

/* 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 */
    }
}

@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/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);
}
/* _content/ErpPowergest/Presentation/Informes/Areas/Almacenes/Components/RangoEntidadField.razor.rz.scp.css */
.inf-lookup-field[b-s4p0fi1zka] {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mismo lenguaje visual que el resto de pantallas de informes (ParametroListadoField): etiqueta de
   11.5px/600 sobre campo de 36px, radio 8, foco azul #2563eb. Antes esta pantalla iba por libre —
   etiquetas en 850, campos de 38px y un icono delante del texto— y se veía como otra aplicación. */

    .inf-lookup-field label[b-s4p0fi1zka] {
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 600;
        color: #5b6472;
    }

.inf-lookup-box[b-s4p0fi1zka] {
    position: relative;
    min-width: 0;
    display: grid;
    /* Sin columna para el icono de delante: el resto de buscadores no lo lleva. */
    grid-template-columns: minmax(0, 1fr) 30px;
    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;
}

    .inf-lookup-box:hover[b-s4p0fi1zka] {
        border-color: #b9c1cc;
    }

    .inf-lookup-box:focus-within[b-s4p0fi1zka] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

/* El icono de delante se oculta en vez de quitarse del marcado: así el cambio es solo de estilo y
   se revierte en una línea si algún día se quiere de vuelta. */
.inf-lookup-leading-icon[b-s4p0fi1zka] {
    display: none;
}

.inf-filter-input[b-s4p0fi1zka] {
    width: 100%;
    height: 34px;
    border: 0;
    background: transparent;
    padding: 0 6px 0 10px;
    font-size: 13.5px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
}

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

.inf-lookup-input[b-s4p0fi1zka] {
    min-width: 0;
    font-weight: 400;
}

.inf-lookup-suggestions[b-s4p0fi1zka] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 168px;
    overflow-y: auto;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 5px;
    animation: infLookupIn-b-s4p0fi1zka 0.14s ease both;
}

.inf-lookup-option[b-s4p0fi1zka] {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 5px 8px;
    cursor: pointer;
    text-align: left;
    color: #334155;
}

    .inf-lookup-option:hover[b-s4p0fi1zka] {
        background: #eff6ff;
    }

.inf-lookup-option-code[b-s4p0fi1zka] {
    min-width: 0;
    font-size: 11px;
    font-weight: 900;
    color: #1d4ed8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-lookup-option-name[b-s4p0fi1zka] {
    min-width: 0;
    font-size: 11px;
    font-weight: 750;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La lupa como en el buscador común (CampoConBuscador): sin separador, sin fondo y en gris apagado
   que se enciende al pasar por encima. Antes era azul con un filete a la izquierda. */
[b-s4p0fi1zka] .e-btn.inf-lookup-btn,
[b-s4p0fi1zka] .e-btn.inf-lookup-btn:focus {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 7px 7px 0 !important;
    background: transparent !important;
    color: #111827 !important;
    opacity: .55;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

    [b-s4p0fi1zka] .e-btn.inf-lookup-btn:hover {
        background: transparent !important;
        color: #111827 !important;
        opacity: 1;
        transform: none !important;
    }

    [b-s4p0fi1zka] .e-btn.inf-lookup-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    [b-s4p0fi1zka] .e-btn.inf-lookup-btn .material-symbols-outlined {
        font-size: 17px;
        line-height: 1;
    }

@keyframes infLookupIn-b-s4p0fi1zka {
    from {
        opacity: 0;
        transform: translateY(-4px);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* _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/Components/BotonInformesFicha.razor.rz.scp.css */
/* EL4 — el botón «Informes» de una ficha y su desplegable.

   Se pinta al lado del CommandBar de la cabecera, así que imita su botón compacto (icono arriba, rótulo
   debajo) para que se lea como uno más de la barra y no como algo pegado encima. El desplegable es
   propio —sin Syncfusion— y se ancla al botón. */

.binf[b-93n2z9dvwv] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.binf__btn[b-93n2z9dvwv] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 54px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

    .binf__btn:hover:not(:disabled)[b-93n2z9dvwv] {
        background: #f3f4f6;
        border-color: #e5e7eb;
        color: #111827;
    }

    .binf__btn:disabled[b-93n2z9dvwv] {
        opacity: .45;
        cursor: not-allowed;
    }

.binf__icon[b-93n2z9dvwv] {
    font-size: 20px;
    line-height: 1;
}

/* Backdrop transparente: el clic fuera cierra, sin oscurecer la pantalla (no es un modal). */
.binf__backdrop[b-93n2z9dvwv] {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: transparent;
}

.binf__menu[b-93n2z9dvwv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1031;
    min-width: 260px;
    max-width: 380px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

.binf__item[b-93n2z9dvwv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: none;
    color: #1f2937;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .binf__item:hover[b-93n2z9dvwv] {
        background: #f3f4f6;
    }

.binf__item-title[b-93n2z9dvwv] {
    font-weight: 600;
}

.binf__item-cod[b-93n2z9dvwv] {
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
}
/* _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 par desde/hasta en la misma fila; una o dos 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), y si no caben se apilan solas (wrap). El sitio que sobra es para la tabla. */
.emisor__rangos[b-bj233y970o] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 28px;
}

.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. */
    --rng-label: 12ch;
    --rng-control: 10rem;
    --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. */
.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%;
    }

    .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;
}

.emisor__actions[b-bj233y970o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.emisor__actions-sp[b-bj233y970o] {
    margin-left: auto;
}

.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;
}

/* ── 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;
    }

    .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;
}
/* _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/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: 1rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden; 
}

.disenador__cmdbar[b-ovmj92qdex] {
    margin-bottom: .25rem;
}

.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;
}

.disenador__badge--warn[b-ovmj92qdex] {
    background: #fff3cd;
    color: #664d03;
}

.disenador__badge--ok[b-ovmj92qdex] {
    background: #d1e7dd;
    color: #0f5132;
}

/* Pestañas de pasos (los botones los estiliza esta página; ScrollableTabs solo los desplaza). */
.disenador__tabs[b-ovmj92qdex] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.disenador__tab[b-ovmj92qdex] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .5rem .8rem;
    white-space: nowrap;
    color: #495057;
    font-size: .85rem;
    cursor: pointer;
}

    .disenador__tab:disabled[b-ovmj92qdex] {
        color: #adb5bd;
        cursor: not-allowed;
    }

    .disenador__tab.is-active[b-ovmj92qdex] {
        color: #0d6efd;
        border-bottom-color: #0d6efd;
        font-weight: 600;
    }

.disenador__tab-num[b-ovmj92qdex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #e9ecef;
    font-size: .72rem;
    font-weight: 700;
}

.disenador__tab.is-active .disenador__tab-num[b-ovmj92qdex] {
    background: #0d6efd;
    color: #fff;
}

.disenador__cuerpo[b-ovmj92qdex] {
    flex: 1 1 auto;
    min-height: 0; 
    overflow: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: 1rem;
    background: #fff;
}

/* Fila de navegación: Anterior · pestañas centradas · Siguiente */
.disenador__nav[b-ovmj92qdex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-width: 0;
}

.disenador__nav-btn[b-ovmj92qdex] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ::deep para alcanzar la raíz de <ScrollableTabs> (otro scope de CSS).
   flex:0 1 auto → las pestañas se centran ocupando solo su ancho; si no caben, encogen y aparecen las flechas. */
.disenador__nav::deep .disenador__tabs[b-ovmj92qdex] {
    flex: 0 1 auto;
    min-width: 0;
}

/* ── 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-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).
   Calcada del lenguaje visual de la home (Dashboard.razor.css / WidgetKpi.razor.css): panel blanco de
   radio 14 con sombra baja, título 23/800, azul #2563eb para lo seleccionado, morado #6d5ef1 para la
   acción principal y acento superior de 3px como las tarjetas KPI.

   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 (línea 17), así que cualquier botón primario salía como una barra
   azul de lado a lado. Los botones de esta pantalla son propios. */

.listados[b-t2a0iht9tc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
    container: listados-page / inline-size;
}

/* ── Cabecera ── */

.listados__head[b-t2a0iht9tc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.listados__head-txt[b-t2a0iht9tc] {
    min-width: 0;
}

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

.listados__buscar[b-t2a0iht9tc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}

    .listados__buscar:focus-within[b-t2a0iht9tc] {
        border-color: #c7d2fe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

    .listados__buscar .material-symbols-rounded[b-t2a0iht9tc] {
        font-size: 18px;
        color: #9ca3af;
    }

    .listados__buscar input[b-t2a0iht9tc] {
        width: 220px;
        max-width: 40vw;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 13px;
        color: #374151;
    }

        .listados__buscar input[b-t2a0iht9tc]::placeholder {
            color: #9ca3af;
        }

.listados__title[b-t2a0iht9tc] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.listados__subtitle[b-t2a0iht9tc] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.listados__nuevo[b-t2a0iht9tc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid #6d5ef1;
    border-radius: 9px;
    background: #6d5ef1;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .listados__nuevo:hover[b-t2a0iht9tc] {
        background: #5b4ce0;
        border-color: #5b4ce0;
    }

    .listados__nuevo:focus-visible[b-t2a0iht9tc] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .listados__nuevo .material-symbols-rounded[b-t2a0iht9tc] {
        font-size: 18px;
    }

/* ── Estados sin rejilla ── */

.listados__estado[b-t2a0iht9tc],
.listados__vacio[b-t2a0iht9tc] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    padding: 32px 18px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.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;
    }

/* ── Pestañas por área ──
   Chips sueltos y no subrayado ni segmentado de una pieza: con once pestañas el subrayado se parte en
   dos filas y la línea inferior queda flotando a media pantalla. Los colores sí son los del
   .dashboard-seg-btn de la home. */

.listados__tabs[b-t2a0iht9tc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.listados__tab[b-t2a0iht9tc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}

    .listados__tab:hover[b-t2a0iht9tc] {
        border-color: #c7d2fe;
        background: #eef2ff;
        color: #2563eb;
    }

    .listados__tab:focus-visible[b-t2a0iht9tc] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .listados__tab.is-active[b-t2a0iht9tc] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

.listados__tab-count[b-t2a0iht9tc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
}

.listados__tab:hover .listados__tab-count[b-t2a0iht9tc] {
    background: #fff;
    color: #2563eb;
}

.listados__tab.is-active .listados__tab-count[b-t2a0iht9tc] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Rejilla y tarjeta ── */

.listados__grid[b-t2a0iht9tc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    align-items: start;
}

.listado-card[b-t2a0iht9tc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 124px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #cbd5e1;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    cursor: pointer;
    transition: box-shadow .14s, transform .14s, border-color .14s;
}

    .listado-card:hover[b-t2a0iht9tc] {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
        transform: translateY(-1px);
    }

    .listado-card:focus-visible[b-t2a0iht9tc] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }


    /* Acento por área — mismo recurso que .mini-kpi-card.blue/green/purple en la home. Sirve para
   distinguir el área de un vistazo cuando la pestaña activa es «Todos». Sin regla → gris. */
    .listado-card.a-clientes[b-t2a0iht9tc] {
        border-top-color: #2563eb;
    }

    .listado-card.a-proveedores[b-t2a0iht9tc] {
        border-top-color: #ea580c;
    }

    .listado-card.a-agentes[b-t2a0iht9tc] {
        border-top-color: #7c3aed;
    }

    .listado-card.a-ventas[b-t2a0iht9tc] {
        border-top-color: #16a34a;
    }

    .listado-card.a-compras[b-t2a0iht9tc] {
        border-top-color: #0891b2;
    }

    .listado-card.a-cobros[b-t2a0iht9tc] {
        border-top-color: #d97706;
    }

    .listado-card.a-iva[b-t2a0iht9tc] {
        border-top-color: #be123c;
    }

    .listado-card.a-contabilidad[b-t2a0iht9tc] {
        border-top-color: #4338ca;
    }

    .listado-card.a-almacen[b-t2a0iht9tc] {
        border-top-color: #0d9488;
    }

    /* Los del usuario: color propio y fuera de la paleta de las nueve áreas, porque no son un área.
   «Otros listados» se queda sin regla —gris— a propósito: es el cajón de lo que no se sabe colocar. */
    .listado-card.a-personalizados[b-t2a0iht9tc] {
        border-top-color: #c026d3;
    }

.listado-card__top[b-t2a0iht9tc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.listado-card__title[b-t2a0iht9tc] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.35;
}

.listado-card__desc[b-t2a0iht9tc] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

/* El lápiz vive en la esquina y solo se destaca al pasar por la tarjeta: la acción de esta pantalla es
   ejecutar, editar el diseño es lo excepcional. */
.listado-card__editar[b-t2a0iht9tc] {
    display: inline-flex;
    flex-shrink: 0;
    padding: 4px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
}

.listado-card:hover .listado-card__editar[b-t2a0iht9tc],
.listado-card:focus-within .listado-card__editar[b-t2a0iht9tc] {
    opacity: 1;
}

.listado-card__editar:hover[b-t2a0iht9tc] {
    background: #f3f4f6;
    color: #374151;
}

.listado-card__editar:focus-visible[b-t2a0iht9tc] {
    opacity: 1;
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.listado-card__editar .material-symbols-rounded[b-t2a0iht9tc] {
    font-size: 17px;
}

.listado-card__pie[b-t2a0iht9tc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

/* El código legacy es un identificador, no prosa: tipografía monoespaciada y tamaño de nota. */
.listado-card__cod[b-t2a0iht9tc] {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #9ca3af;
}

.listado-card__run[b-t2a0iht9tc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #6d5ef1;
}

    .listado-card__run .material-symbols-rounded[b-t2a0iht9tc] {
        font-size: 17px;
    }

/* El diálogo de ejecución vive ahora en Components/EmisorListadoModal.razor.css (EL2). */

/* ── Responsive ──
   Al ancho REAL del área de contenido, no al del viewport: al plegar el sidebar el viewport no cambia
   pero el sitio disponible sí (mismo criterio que la home). */

@container listados-page (max-width: 720px) {
    .listados[b-t2a0iht9tc] {
        gap: 14px;
    }

    .listados__grid[b-t2a0iht9tc] {
        grid-template-columns: 1fr;
    }

    .listados__title[b-t2a0iht9tc] {
        font-size: 21px;
    }

    .listados__nuevo[b-t2a0iht9tc] {
        width: 100%;
        justify-content: center;
    }
}
/* _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/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 con diseño NavMenu
   Mantiene la estructura del LeftSidebar: header, empresa, menú y footer.
============================= */

.sidebar[b-0wfn46b7j1] {
    --nav-blue: #2563eb;
    --nav-blue-dark: #1d4ed8;
    --nav-blue-light: #2d8cff;
    --nav-blue-soft: #eff6ff;
    --nav-text: #172033;
    --nav-muted: #64748b;
    --nav-border: #e7edf5;
    --nav-hover: #f8fafc;
    height: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    width: 258px;
    max-width: 258px;
    background: #ffffff;
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-right: 1px solid var(--nav-border);
    /* visible (no hidden) para que los popovers de empresa/perfil puedan salir a la
       derecha tambien con el sidebar expandido (el submenu "Cambiar cuenta" sale a
       left: 100% y excede los 258px). El scroll vertical y el recorte horizontal de
       las etiquetas los gestiona .sidebar-menu-items, no el contenedor raiz.
       En colapsado ya era visible (mas abajo); aqui se unifica para el estado abierto. */
    overflow: visible;
    overscroll-behavior: contain;
    transition: width 0.24s ease, max-width 0.24s ease, transform 0.24s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sidebar-top[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

/* =============================
   Header / marca
============================= */

.sidebar-header[b-0wfn46b7j1] {
    min-height: 64px;
    height: 64px;
    max-height: 64px;
    padding: 18px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--nav-border);
    background: #ffffff;
    flex: 0 0 auto;
    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: 12px;
    color: var(--nav-text);
    text-decoration: none !important;
}

.brand-logo-shell[b-0wfn46b7j1] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--nav-blue-light) 0%, var(--nav-blue-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
    overflow: hidden;
}

.brand-logo[b-0wfn46b7j1] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.brand-text-wrap[b-0wfn46b7j1] {
    min-width: 0;
    width: 142px;
    max-width: 142px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: width 0.22s ease, max-width 0.22s ease, opacity 0.18s ease;
}

.brand-text[b-0wfn46b7j1] {
    color: var(--nav-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-subtext[b-0wfn46b7j1] {
    margin-top: 3px;
    color: #8b95a7;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-resizer[b-0wfn46b7j1] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 13px;
    border: 1px solid #dbe3ee;
    background: #ffffff;
    color: var(--nav-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
        color: inherit;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
    }

    .sidebar-resizer:hover[b-0wfn46b7j1] {
        background: var(--nav-hover);
        color: var(--nav-blue);
        border-color: #bfdbfe;
    }

    .sidebar-resizer:active[b-0wfn46b7j1] {
        transform: scale(0.96);
    }

    .sidebar-resizer:focus[b-0wfn46b7j1] {
        outline: none;
    }

    .sidebar-resizer:focus-visible[b-0wfn46b7j1] {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }

/* =============================
   Empresa + menú
============================= */

.sidebar-menu[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
}

.sidebar-company-block[b-0wfn46b7j1] {
    padding: 12px 10px 0;
    flex: 0 0 auto;
}

    .sidebar-company-block[b-0wfn46b7j1]  * {
        max-width: 100%;
    }

.sidebar-menu-items[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Se sigue pudiendo scrollear, pero la barra no se pinta nunca: colapsado los
       6px de barra descentraban los iconos y ensuciaban el borde del sidebar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

    .sidebar-menu-items[b-0wfn46b7j1]::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

/* Grupo principal tipo captura */

.sidebar-group[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-group-btn[b-0wfn46b7j1],
.sidebar-link[b-0wfn46b7j1] {
    width: 100%;
    min-height: 26px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #263449;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 12px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
/*    font-weight: 800;
*/    line-height: 1;
    text-decoration: none !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .sidebar-group-btn:hover[b-0wfn46b7j1],
    .sidebar-link:hover[b-0wfn46b7j1] {
        background: var(--nav-hover);
        border-color: #eef2f7;
        color: #1f2937;
        text-decoration: none !important;
    }

    .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: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }

    .sidebar-group.active > .sidebar-group-btn[b-0wfn46b7j1],
    .sidebar-link.active[b-0wfn46b7j1] {
        background: linear-gradient(135deg, var(--nav-blue-light) 0%, var(--nav-blue) 55%, var(--nav-blue-dark) 100%);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
    }

.nav-icon-wrap[b-0wfn46b7j1] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.sidebar-group.active > .sidebar-group-btn .nav-icon-wrap[b-0wfn46b7j1],
.sidebar-link.active .nav-icon-wrap[b-0wfn46b7j1] {
    background: rgba(255, 255, 255, 0.15);
}

.nav-icon[b-0wfn46b7j1] {
    color: inherit;
    font-size: 21px;
    line-height: 1;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-text[b-0wfn46b7j1] {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 14px;
/*    font-weight: 850;
*/    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-chevron[b-0wfn46b7j1] {
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: inherit;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-group.open > .sidebar-group-btn .nav-chevron[b-0wfn46b7j1] {
    transform: rotate(180deg);
}

/* EM7: badge de correos nuevos en la entrada de correo del menú */
.correo-menu-badge[b-0wfn46b7j1] {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d93025;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sidebar.collapsed .correo-menu-badge[b-0wfn46b7j1] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    line-height: 14px;
    padding: 0 3px;
}

/* Submenú como en la captura */

/* N11b: el segundo nivel no lleva icono; se lee por la sangría y una guía vertical fina. */
.sidebar-submenu[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 24px;
    padding: 4px 0 7px 12px;
    border-left: 1px solid #e7edf5;
}

.sidebar-sub-link[b-0wfn46b7j1] {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--nav-muted);
    font-size: 13px;
/*    font-weight: 750;
*/    border: 1px solid transparent;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

    .sidebar-sub-link:hover[b-0wfn46b7j1] {
        background: var(--nav-hover);
        color: #1f2937;
        border-color: #eef2f7;
        text-decoration: none !important;
    }

    .sidebar-sub-link.active[b-0wfn46b7j1] {
        background: var(--nav-blue-soft);
        color: var(--nav-blue-dark);
        border-color: #dbeafe;
    }

.nav-sub-icon[b-0wfn46b7j1] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #94a3b8;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-sub-link.active .nav-sub-icon[b-0wfn46b7j1],
.sidebar-sub-link:hover .nav-sub-icon[b-0wfn46b7j1] {
    color: var(--nav-blue);
}

.nav-sub-text[b-0wfn46b7j1] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================
   Footer
============================= */

.sidebar-footer[b-0wfn46b7j1] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px 14px;
    margin: 0;
    border-top: 1px solid var(--nav-border);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    flex: 0 0 auto;
    z-index: 5;
}

.sidebar-upgrade-link[b-0wfn46b7j1] {
    min-height: 44px;
}

/* Dropdowns internos del LeftSidebar */

.dropdown-menu[b-0wfn46b7j1],
[b-0wfn46b7j1] .dropdown-menu {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

    .dropdown-menu a[b-0wfn46b7j1],
    [b-0wfn46b7j1] .dropdown-menu a {
        min-height: 40px;
        padding: 0 12px !important;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #334155 !important;
        font-size: 13px;
/*        font-weight: 750;
*/        text-decoration: none !important;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

        .dropdown-menu a:hover[b-0wfn46b7j1],
        [b-0wfn46b7j1] .dropdown-menu a:hover {
            background: var(--nav-hover) !important;
            color: #111827 !important;
        }

.logout-item .icon[b-0wfn46b7j1],
.logout-item .dropdown-text[b-0wfn46b7j1],
[b-0wfn46b7j1] .logout-item .icon,
[b-0wfn46b7j1] .logout-item .dropdown-text {
    color: #dc2626 !important;
}

/* Quitar subrayados globales de NavLink */

[b-0wfn46b7j1] a,
[b-0wfn46b7j1] a.active,
a[b-0wfn46b7j1],
a.active[b-0wfn46b7j1] {
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
}

.tooltip-text[b-0wfn46b7j1] {
    display: none;
}

/* =============================
   Colapsado
============================= */

.sidebar.collapsed[b-0wfn46b7j1] {
    width: 76px;
    max-width: 76px;
    /* Colapsado los popovers de empresa y perfil salen a la derecha (fuera del
       ancho de 76px); sin esto el overflow:hidden del sidebar los recortaria. */
    overflow: visible;
}

    .sidebar.collapsed .sidebar-header[b-0wfn46b7j1] {
        min-height: 104px;
        height: 104px;
        max-height: 104px;
        padding: 14px 8px;
        flex-direction: column;
        justify-content: center;
    }

    .sidebar.collapsed .brand-link[b-0wfn46b7j1] {
        justify-content: center;
        gap: 0;
    }

    .sidebar.collapsed .brand-text-wrap[b-0wfn46b7j1] {
        width: 0;
        max-width: 0;
        opacity: 0;
    }

    .sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1] {
        width: 38px;
        height: 38px;
        margin-left: 0;
    }

    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar.collapsed .sidebar-menu-items[b-0wfn46b7j1] {
        align-items: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar.collapsed .sidebar-group[b-0wfn46b7j1] {
        align-items: center;
    }

    .sidebar.collapsed .sidebar-group-btn[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-link[b-0wfn46b7j1] {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .sidebar.collapsed .nav-text[b-0wfn46b7j1],
    .sidebar.collapsed .nav-chevron[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-submenu[b-0wfn46b7j1] {
        display: none;
    }

    .sidebar.collapsed .sidebar-footer[b-0wfn46b7j1] {
        padding-left: 8px;
        padding-right: 8px;
        align-items: center;
    }

    .sidebar.collapsed .tooltip-text[b-0wfn46b7j1] {
        display: none;
    }

/* =============================
   Responsive mobile
============================= */

@media (max-width: 768px) {
    .sidebar[b-0wfn46b7j1] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 258px;
        max-width: 258px;
        transform: translateX(-100%);
        z-index: 2000;
    }

        .sidebar:not(.collapsed)[b-0wfn46b7j1] {
            transform: translateX(0);
            box-shadow: 2px 0 18px rgba(15, 23, 42, 0.18);
        }

        .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]::before,
    .sidebar *[b-0wfn46b7j1]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   AJUSTES FINALES PEDIDOS
   - Logo sin fondo azul.
   - Submenus con el estilo exacto tipo NavMenu/captura.
   - Mejorar plan alineado con su icono.
   Nota: se duplican selectores con ::deep porque NavLink renderiza
   el <a> desde un componente hijo y, con CSS isolation, si no se
   usa ::deep algunos estilos pueden no entrar.
========================================================= */

/* Logo limpio: quitamos la caja azul, sombra y relleno */
.brand-logo-shell[b-0wfn46b7j1] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.brand-logo[b-0wfn46b7j1] {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Submenus: pill azul claro para activo e items grises suaves como en la captura */
.sidebar-submenu[b-0wfn46b7j1] {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 5px 0 7px 38px !important;
}

.sidebar-sub-link[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-sub-link {
    width: 100% !important;
    min-height: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    text-decoration: none !important;
    font-size: 14px !important;
/*    font-weight: 700 !important;
*/    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

    .sidebar-sub-link:hover[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-sub-link:hover {
        background: #f8fafc !important;
        color: #1f2937 !important;
        border-color: #eef2f7 !important;
    }

    .sidebar-sub-link.active[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-sub-link.active,
    .sidebar-sub-link[aria-current="page"][b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-sub-link[aria-current="page"] {
        background: #eff6ff !important;
        color: #2563eb !important;
        border-color: #dbeafe !important;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.02) !important;
    }

.nav-sub-icon[b-0wfn46b7j1],
[b-0wfn46b7j1] .nav-sub-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.sidebar-sub-link:hover .nav-sub-icon[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-sub-link:hover .nav-sub-icon,
.sidebar-sub-link.active .nav-sub-icon[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-sub-link.active .nav-sub-icon,
.sidebar-sub-link[aria-current="page"] .nav-sub-icon[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-sub-link[aria-current="page"] .nav-sub-icon {
    color: #2563eb !important;
}

.nav-sub-text[b-0wfn46b7j1],
[b-0wfn46b7j1] .nav-sub-text {
    min-width: 0 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/*.sidebar-sub-link.active .nav-sub-text,
::deep a.sidebar-sub-link.active .nav-sub-text,
.sidebar-sub-link[aria-current="page"] .nav-sub-text,
::deep a.sidebar-sub-link[aria-current="page"] .nav-sub-text {
    font-weight: 850 !important;
}*/

/* Grupo activo: mantenemos el bloque azul, pero aseguramos texto/iconos en blanco */
.sidebar-group.active > .sidebar-group-btn[b-0wfn46b7j1] {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18) !important;
}

    .sidebar-group.active > .sidebar-group-btn .nav-icon[b-0wfn46b7j1],
    .sidebar-group.active > .sidebar-group-btn .nav-text[b-0wfn46b7j1],
    .sidebar-group.active > .sidebar-group-btn .nav-chevron[b-0wfn46b7j1] {
        color: #ffffff !important;
    }

/* Mejorar plan: icono y texto centrados verticalmente */
.sidebar-upgrade-link[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-upgrade-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    color: #006fe6 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

    .sidebar-upgrade-link .nav-icon-wrap[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-upgrade-link .nav-icon-wrap {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: transparent !important;
    }

    .sidebar-upgrade-link .nav-icon[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-upgrade-link .nav-icon {
        width: 22px !important;
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #006fe6 !important;
        font-size: 21px !important;
        line-height: 1 !important;
    }

    .sidebar-upgrade-link .nav-text[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-upgrade-link .nav-text {
        display: inline-flex !important;
        align-items: center !important;
        color: #006fe6 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }


/* =========================================================
   EMPRESA + USUARIO PROFESIONAL
   Tarjetas mas limpias, compactas y claras. Se evita usar
   selectores globales [class*=company] sobre los desplegables
   para que los menus no se deformen.
========================================================= */

/* Espacio de trabajo (N4): la fila de ENCIMA de la empresa. Mismo fondo que el bloque de empresa para que
   las dos filas se lean como una cabecera de contexto (espacio + empresa); el componente trae su estilo. */
.sidebar-espacio-block[b-0wfn46b7j1] {
    position: relative;
    padding: 12px 12px 0;
    margin: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    flex: 0 0 auto;
}

    .sidebar-espacio-block:empty[b-0wfn46b7j1] {
        display: none;
    }

.sidebar.collapsed .sidebar-espacio-block[b-0wfn46b7j1] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Empresa: bloque integrado, sin tarjeta pesada */
.sidebar-company-block[b-0wfn46b7j1] {
    position: relative;
    padding: 12px 12px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(231, 237, 245, 0.75) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    flex: 0 0 auto !important;
}

    .sidebar-company-block[b-0wfn46b7j1]  > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Trigger del selector: compacto y elegante */
    .sidebar-company-block[b-0wfn46b7j1]  > button,
    .sidebar-company-block[b-0wfn46b7j1]  > .company-selected,
    .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown,
    .sidebar-company-block[b-0wfn46b7j1]  > .selected-company,
    .sidebar-company-block[b-0wfn46b7j1]  > .company-selector,
    .sidebar-company-block[b-0wfn46b7j1]  > .company-trigger {
        min-height: 48px !important;
        width: 100% !important;
        border: 1px solid #e7edf5 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: var(--nav-text) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 7px 10px !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;
        text-align: left !important;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    }

        .sidebar-company-block[b-0wfn46b7j1]  > button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected:hover,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown:hover,
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company:hover,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selector:hover,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-trigger:hover {
            background: #f8fbff !important;
            border-color: #cfe0ff !important;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08) !important;
        }

        .sidebar-company-block[b-0wfn46b7j1]  > button:focus-visible,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected:focus-visible,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown:focus-visible,
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company:focus-visible,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selector:focus-visible,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-trigger:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.16) !important;
            outline-offset: 2px !important;
        }

        /* Avatar de empresa: mas sobrio, mantiene el color del componente */
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="logo"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Logo"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="Avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="Avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company [class*="avatar"],
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company [class*="Avatar"] {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            border-radius: 12px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 12px !important;
            font-weight: 850 !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        }

        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="name"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Name"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="text"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Text"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="name"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="Name"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="name"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="Name"],
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company [class*="name"],
        .sidebar-company-block[b-0wfn46b7j1]  > .selected-company [class*="Name"] {
            color: var(--nav-text) !important;
            font-size: 14px !important;
            font-weight: 850 !important;
            line-height: 1.15 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .sidebar-company-block[b-0wfn46b7j1]  > button .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  > button .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="chevron"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="arrow"],
        .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Arrow"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="chevron"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="arrow"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="Arrow"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="chevron"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="arrow"],
        .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown [class*="Arrow"] {
            margin-left: auto !important;
            color: #64748b !important;
            font-size: 21px !important;
            line-height: 1 !important;
        }

    /* Dropdown de empresa: menu claro, items alineados y sin heredar forma de tarjeta */
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu,
    .sidebar-company-block[b-0wfn46b7j1]  .menu,
    .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] {
        width: 224px !important;
        min-width: 224px !important;
        padding: 8px !important;
        border: 1px solid #e3eaf3 !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        backdrop-filter: blur(12px) !important;
        overflow: hidden !important;
    }

        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu a,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu button,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu a,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu button,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu a,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu button,
        .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] a,
        .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] button {
            width: 100% !important;
            min-height: 40px !important;
            height: auto !important;
            border: 0 !important;
            border-radius: 12px !important;
            background: transparent !important;
            color: #334155 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            padding: 0 11px !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            text-align: left !important;
            text-decoration: none !important;
            box-shadow: none !important;
            transform: none !important;
            transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
        }

            .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu a:hover,
            .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu button:hover,
            .sidebar-company-block[b-0wfn46b7j1]  .company-menu a:hover,
            .sidebar-company-block[b-0wfn46b7j1]  .company-menu button:hover,
            .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu a:hover,
            .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu button:hover,
            .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] a:hover,
            .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] button:hover {
                background: #f8fafc !important;
                color: #111827 !important;
            }

        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .material-symbols-outlined,
        .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] .material-symbols-rounded,
        .sidebar-company-block[b-0wfn46b7j1]  [role="menu"] .material-symbols-outlined {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            margin: 0 !important;
            color: #64748b !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 20px !important;
        }

.sidebar-menu-items[b-0wfn46b7j1] {
    padding-top: 12px !important;
}

/* Usuario: footer mas limpio, profesional y compacto */
.sidebar-footer[b-0wfn46b7j1] {
    gap: 8px !important;
    padding: 12px 12px 14px !important;
}

.sidebar-user-card[b-0wfn46b7j1] {
    position: relative;
    width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

    .sidebar-user-card[b-0wfn46b7j1]  > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-user-card[b-0wfn46b7j1]  > button,
    .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown,
    .sidebar-user-card[b-0wfn46b7j1]  > .profile-button,
    .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger,
    .sidebar-user-card[b-0wfn46b7j1]  > .user-button,
    .sidebar-user-card[b-0wfn46b7j1]  > .avatar-button {
        width: 100% !important;
        min-height: 54px !important;
        border: 1px solid #e7edf5 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: var(--nav-text) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;
        text-align: left !important;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    }

        .sidebar-user-card[b-0wfn46b7j1]  > button:hover,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown:hover,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button:hover,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger:hover,
        .sidebar-user-card[b-0wfn46b7j1]  > .user-button:hover,
        .sidebar-user-card[b-0wfn46b7j1]  > .avatar-button:hover {
            background: #f8fbff !important;
            border-color: #cfe0ff !important;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08) !important;
        }

        .sidebar-user-card[b-0wfn46b7j1]  > button:focus-visible,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown:focus-visible,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button:focus-visible,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger:focus-visible,
        .sidebar-user-card[b-0wfn46b7j1]  > .user-button:focus-visible,
        .sidebar-user-card[b-0wfn46b7j1]  > .avatar-button:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.16) !important;
            outline-offset: 2px !important;
        }

        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button [class*="avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button [class*="Avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger [class*="avatar"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger [class*="Avatar"] {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 12px !important;
            font-weight: 850 !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 14px rgba(15, 23, 42, 0.10) !important;
        }

        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="name"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button [class*="name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-button [class*="Name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger [class*="name"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger [class*="Name"] {
            color: var(--nav-text) !important;
            font-size: 14px !important;
            font-weight: 850 !important;
            line-height: 1.12 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="email"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Email"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="role"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Role"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="subtitle"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Subtitle"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="email"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Email"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="role"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Role"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="subtitle"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Subtitle"] {
            margin-top: 3px !important;
            color: #64748b !important;
            font-size: 12px !important;
            font-weight: 650 !important;
            line-height: 1.15 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .sidebar-user-card[b-0wfn46b7j1]  > button .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  > button .material-symbols-outlined,
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="chevron"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="arrow"],
        .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Arrow"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown .material-symbols-outlined,
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="chevron"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="arrow"],
        .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown [class*="Arrow"] {
            margin-left: auto !important;
            color: #64748b !important;
            font-size: 21px !important;
            line-height: 1 !important;
        }

    /* Dropdown de usuario: menu de acciones consistente con el resto */
    .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu,
    .sidebar-user-card[b-0wfn46b7j1]  .profile-menu,
    .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown,
    .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] {
        width: 224px !important;
        min-width: 224px !important;
        padding: 8px !important;
        border: 1px solid #e3eaf3 !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        backdrop-filter: blur(12px) !important;
        overflow: hidden !important;
    }

        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu a,
        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu button,
        .sidebar-user-card[b-0wfn46b7j1]  .profile-menu a,
        .sidebar-user-card[b-0wfn46b7j1]  .profile-menu button,
        .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown a,
        .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown button,
        .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] a,
        .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] button {
            width: 100% !important;
            min-height: 40px !important;
            height: auto !important;
            border: 0 !important;
            border-radius: 12px !important;
            background: transparent !important;
            color: #334155 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            padding: 0 11px !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            text-align: left !important;
            text-decoration: none !important;
            box-shadow: none !important;
            transform: none !important;
            transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
        }

            .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu a:hover,
            .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu button:hover,
            .sidebar-user-card[b-0wfn46b7j1]  .profile-menu a:hover,
            .sidebar-user-card[b-0wfn46b7j1]  .profile-menu button:hover,
            .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown a:hover,
            .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown button:hover,
            .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] a:hover,
            .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] button:hover {
                background: #f8fafc !important;
                color: #111827 !important;
            }

        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu .material-symbols-outlined,
        .sidebar-user-card[b-0wfn46b7j1]  .profile-menu .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  .profile-menu .material-symbols-outlined,
        .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  .user-menu-dropdown .material-symbols-outlined,
        .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  [role="menu"] .material-symbols-outlined {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            margin: 0 !important;
            color: #64748b !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 20px !important;
        }

        /* El icono de "Cerrar sesión" va en rojo, igual que su texto. */
        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu .logout-item .material-symbols-rounded,
        .sidebar-user-card[b-0wfn46b7j1]  .dropdown-menu .logout-item .material-symbols-outlined {
            color: #e53935 !important;
        }

/* Colapsado: se ocultan etiquetas y textos, manteniendo iconos centrados */
.sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 10px !important;
}

    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button,
    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected,
    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected-dropdown,
    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .selected-company,
    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selector,
    .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-trigger,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > .profile-dropdown,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > .profile-button,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > .profile-trigger,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > .user-button,
    .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > .avatar-button {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin-inline: auto !important;
        justify-content: center !important;
        border-radius: 15px !important;
    }

        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button [class*="name"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Name"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button [class*="text"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button [class*="Text"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button .material-symbols-rounded,
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > button .material-symbols-outlined,
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="name"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected [class*="Name"],
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected .material-symbols-rounded,
        .sidebar.collapsed .sidebar-company-block[b-0wfn46b7j1]  > .company-selected .material-symbols-outlined,
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="name"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Name"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="email"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Email"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="role"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Role"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="subtitle"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button [class*="Subtitle"],
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button .material-symbols-rounded,
        .sidebar.collapsed .sidebar-user-card[b-0wfn46b7j1]  > button .material-symbols-outlined {
            display: none !important;
        }


/* =========================================================
   FIX COLAPSO / DESCOLAPSO
   - El boton de abrir queda mas visible y facil de pulsar.
   - Al estar colapsado, "Mejorar plan" queda solo como icono.
   - Los grupos se pueden abrir haciendo clic directamente en su icono
     porque ToggleGroup descolapsa el menu desde el .razor.
========================================================= */

.sidebar.collapsed .sidebar-header[b-0wfn46b7j1] {
    position: relative !important;
    overflow: visible !important;
}

.sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1] {
    position: absolute !important;
    top: 22px !important;
    right: -15px !important;
    z-index: 30 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border-color: #dbeafe !important;
    color: var(--nav-blue) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
}

    .sidebar.collapsed .sidebar-resizer:hover[b-0wfn46b7j1] {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: var(--nav-blue-dark) !important;
    }

    .sidebar.collapsed .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
        font-size: 25px !important;
    }

/* En modo colapsado, el enlace de mejorar plan debe comportarse igual que el resto:
   caja de 48px, icono centrado y texto oculto. */
.sidebar.collapsed .sidebar-upgrade-link[b-0wfn46b7j1],
.sidebar.collapsed[b-0wfn46b7j1]  a.sidebar-upgrade-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 15px !important;
}

    .sidebar.collapsed .sidebar-upgrade-link .nav-icon-wrap[b-0wfn46b7j1],
    .sidebar.collapsed[b-0wfn46b7j1]  a.sidebar-upgrade-link .nav-icon-wrap {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        margin: 0 !important;
    }

    .sidebar.collapsed .sidebar-upgrade-link .nav-icon[b-0wfn46b7j1],
    .sidebar.collapsed[b-0wfn46b7j1]  a.sidebar-upgrade-link .nav-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 22px !important;
    }

    .sidebar.collapsed .sidebar-upgrade-link .nav-text[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-upgrade-link .tooltip-text[b-0wfn46b7j1],
    .sidebar.collapsed[b-0wfn46b7j1]  a.sidebar-upgrade-link .nav-text,
    .sidebar.collapsed[b-0wfn46b7j1]  a.sidebar-upgrade-link .tooltip-text {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

/* Evita que reglas tardias de .sidebar-upgrade-link vuelvan a meter padding o texto. */
.sidebar.collapsed .sidebar-footer .sidebar-upgrade-link[b-0wfn46b7j1] {
    color: #006fe6 !important;
}

.sidebar.collapsed .sidebar-footer[b-0wfn46b7j1] {
    gap: 10px !important;
}

/* =========================================================
   FIX FINAL BOTON DESCOLAPSAR
   El boton se queda dentro del ancho del sidebar para que:
   - sea visible siempre, no solo al hacer hover;
   - toda la pastilla sea clicable;
   - no lo recorte el overflow del sidebar.
========================================================= */
.sidebar.collapsed .sidebar-header[b-0wfn46b7j1] {
    min-height: 116px !important;
    height: 116px !important;
    max-height: 116px !important;
    padding: 14px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
}

.sidebar.collapsed .sidebar-logo[b-0wfn46b7j1] {
    width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar.collapsed .brand-link[b-0wfn46b7j1] {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.sidebar.collapsed .brand-logo-shell[b-0wfn46b7j1] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    z-index: 20 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid #dbeafe !important;
    background: #ffffff !important;
    color: var(--nav-blue) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

    .sidebar.collapsed .sidebar-resizer:hover[b-0wfn46b7j1] {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: var(--nav-blue-dark) !important;
        box-shadow: 0 12px 26px rgba(37, 99, 235, 0.16) !important;
    }

    .sidebar.collapsed .sidebar-resizer:active[b-0wfn46b7j1] {
        transform: scale(0.96) !important;
    }

    .sidebar.collapsed .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: currentColor !important;
        font-size: 25px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    /* =========================================================
   FIX DEFINITIVO: ICONO DEL BOTON DE DESCOLAPSAR SIEMPRE VISIBLE
   En colapsado, el chevron no debe desaparecer ni cambiar de estado al hacer hover.
========================================================= */
    .sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-resizer:hover[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-resizer:focus[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-resizer:focus-visible[b-0wfn46b7j1],
    .sidebar.collapsed .sidebar-resizer:active[b-0wfn46b7j1] {
        color: #2563eb !important;
        background: #ffffff !important;
        border-color: #dbeafe !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .sidebar.collapsed .sidebar-resizer:hover[b-0wfn46b7j1],
        .sidebar.collapsed .sidebar-resizer:focus-visible[b-0wfn46b7j1] {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.16) !important;
        }

            .sidebar.collapsed .sidebar-resizer .resize-icon[b-0wfn46b7j1],
            .sidebar.collapsed .sidebar-resizer:hover .resize-icon[b-0wfn46b7j1],
            .sidebar.collapsed .sidebar-resizer:focus .resize-icon[b-0wfn46b7j1],
            .sidebar.collapsed .sidebar-resizer:focus-visible .resize-icon[b-0wfn46b7j1],
            .sidebar.collapsed .sidebar-resizer:active .resize-icon[b-0wfn46b7j1] {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                color: #2563eb !important;
                -webkit-text-fill-color: #2563eb !important;
                opacity: 1 !important;
                visibility: visible !important;
                font-family: 'Material Symbols Rounded' !important;
                font-size: 25px !important;
                font-weight: 400 !important;
                line-height: 1 !important;
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
                transform: none !important;
                pointer-events: none !important;
            }

/* =========================================================
   FIX DEFINITIVO: LOGO SIEMPRE VISIBLE EN COLAPSADO
   El logo de PowerGest no debe desaparecer ni alterarse al
   acercar el raton, hacer hover, focus o active sobre la marca.
========================================================= */
.sidebar.collapsed .sidebar-logo[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-logo:hover[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-logo:focus-within[b-0wfn46b7j1] {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

.sidebar.collapsed .brand-link[b-0wfn46b7j1],
.sidebar.collapsed .brand-link:hover[b-0wfn46b7j1],
.sidebar.collapsed .brand-link:focus[b-0wfn46b7j1],
.sidebar.collapsed .brand-link:focus-visible[b-0wfn46b7j1],
.sidebar.collapsed .brand-link:active[b-0wfn46b7j1] {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    text-decoration: none !important;
}

    .sidebar.collapsed .brand-logo-shell[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:hover .brand-logo-shell[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:focus .brand-logo-shell[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:focus-visible .brand-logo-shell[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:active .brand-logo-shell[b-0wfn46b7j1] {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform: none !important;
        overflow: visible !important;
    }

    .sidebar.collapsed .brand-logo[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:hover .brand-logo[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:focus .brand-logo[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:focus-visible .brand-logo[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:active .brand-logo[b-0wfn46b7j1] {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: block !important;
        object-fit: contain !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform: none !important;
    }

    .sidebar.collapsed .brand-text-wrap[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:hover .brand-text-wrap[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:focus .brand-text-wrap[b-0wfn46b7j1],
    .sidebar.collapsed .brand-link:active .brand-text-wrap[b-0wfn46b7j1] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }


/* =========================================================
   POPUP FLOTANTE DE GRUPO (sidebar colapsado)
   Al pulsar un icono se abre este popup en vez de expandir.
========================================================= */
.sidebar-flyout[b-0wfn46b7j1] {
    position: fixed;
    z-index: 2200;
    min-width: 232px;
    max-width: 280px;
    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.16), 0 2px 8px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: flyout-in-b-0wfn46b7j1 0.14s ease;
}

@keyframes flyout-in-b-0wfn46b7j1 {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-flyout-title[b-0wfn46b7j1] {
    padding: 6px 10px 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar-flyout-items[b-0wfn46b7j1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* NavLink renderiza el <a> desde un componente hijo: duplicamos con ::deep. */
.sidebar-flyout-link[b-0wfn46b7j1],
[b-0wfn46b7j1] a.sidebar-flyout-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 11px;
    border-radius: 11px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 750;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-flyout-link:hover[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }

    .sidebar-flyout-link.active[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link.active,
    .sidebar-flyout-link[aria-current="page"][b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link[aria-current="page"] {
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .sidebar-flyout-link .nav-sub-icon[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link .nav-sub-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        color: #64748b !important;
        font-size: 21px !important;
    }

    .sidebar-flyout-link:hover .nav-sub-icon[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link:hover .nav-sub-icon,
    .sidebar-flyout-link.active .nav-sub-icon[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link.active .nav-sub-icon,
    .sidebar-flyout-link[aria-current="page"] .nav-sub-icon[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link[aria-current="page"] .nav-sub-icon {
        color: #2563eb !important;
    }

    .sidebar-flyout-link .nav-sub-text[b-0wfn46b7j1],
    [b-0wfn46b7j1] a.sidebar-flyout-link .nav-sub-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Resalta el icono del grupo mientras su popup esta abierto */
.sidebar.collapsed .sidebar-group.flyout-open > .sidebar-group-btn[b-0wfn46b7j1] {
    background: #eff6ff;
    border-color: #dbeafe;
    color: var(--nav-blue);
}



/* =========================================================
   MENU EMPRESA - MISMO DISEÑO QUE LOS FLYOUTS DEL SIDEBAR
   Solo diseño. No toca JS, rutas, eventos ni posicionamiento.
========================================================= */

.sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu,
.sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu,
.sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu,
.sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu,
.sidebar-company-block[b-0wfn46b7j1]  .company-menu {
    width: 224px !important;
    min-width: 224px !important;
    padding: 8px !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    overflow: hidden !important;
}

    /* Titulo superior como "PRINCIPAL" */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu::before {
        content: "EMPRESA";
        display: block;
        padding: 0 10px 8px !important;
        color: #94a3b8 !important;
        font-size: 11px !important;
/*        font-weight: 850 !important;
*/        letter-spacing: 0.06em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    /* Items */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu .dropdown-item,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu .dropdown-item,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .dropdown-item,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu .dropdown-item {
        width: 100% !important;
        min-height: 42px !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 0 11px !important;
        font-size: 14px !important;
/*        font-weight: 750 !important;
*/        line-height: 1 !important;
        text-align: left !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    }

        /* Hover como los flyouts */
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu a:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu .dropdown-item:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu a:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu .dropdown-item:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu a:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .dropdown-item:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu a:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu button:hover,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu .dropdown-item:hover {
            background: #f1f5f9 !important;
            color: #0f172a !important;
            transform: none !important;
        }

        /* Activo: pill azul igual que "Inicio" */
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-menu .dropdown-item.active,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu.company-dropdown-menu .dropdown-item.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .dropdown-item.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-menu .dropdown-item.active {
            background: #eff6ff !important;
            color: #2563eb !important;
            font-weight: 850 !important;
        }

    /* Si ese menu no marca active, damos aspecto activo al primer item como en la captura */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > a:first-of-type,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > button:first-of-type,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > .dropdown-item:first-of-type {
        background: #eff6ff !important;
        color: #2563eb !important;
        font-weight: 850 !important;
    }

    /* Iconos */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .material-symbols-outlined,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .icon,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu .material-symbols-outlined,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu .icon,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .material-symbols-outlined,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu .icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin: 0 !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 21px !important;
        line-height: 1 !important;
    }

    /* Iconos en activo */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > a:first-of-type .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > button:first-of-type .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > .dropdown-item:first-of-type .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a[aria-current="page"] .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button[aria-current="page"] .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item[aria-current="page"] .material-symbols-rounded {
        color: #2563eb !important;
    }

    /* Texto interno */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu span,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu span,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu span {
        color: inherit !important;
    }


    /* =========================================================
   MENU EMPRESA - TIPOGRAFIA IGUAL QUE SIDEBAR-FLYOUT
   Solo letras/texto. No toca posicion ni comportamiento.
========================================================= */

    /* Titulo EMPRESA igual que PRINCIPAL */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .company-menu::before,
    .sidebar-company-block[b-0wfn46b7j1]  .company-dropdown-menu::before {
        color: #94a3b8 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: 0.06em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    /* Texto de todos los items */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item {
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1 !important;
    }

        /* Spans internos del componente de empresa: aquí estaba el fallo */
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a span:not(.material-symbols-rounded):not(.material-symbols-outlined),
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button span:not(.material-symbols-rounded):not(.material-symbols-outlined),
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item span:not(.material-symbols-rounded):not(.material-symbols-outlined),
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-text,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .text,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .label {
            color: inherit !important;
            font-size: 14px !important;
            font-weight: 750 !important;
            line-height: 1 !important;
        }

        /* Item activo: igual que Inicio */
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item.active,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item[aria-current="page"],
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > a:first-of-type,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > button:first-of-type,
        .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > .dropdown-item:first-of-type {
            color: #2563eb !important;
            font-size: 14px !important;
            font-weight: 850 !important;
        }

            /* Texto interno del activo */
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a.active span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button.active span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item.active span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a[aria-current="page"] span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button[aria-current="page"] span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item[aria-current="page"] span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > a:first-of-type span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > button:first-of-type span:not(.material-symbols-rounded):not(.material-symbols-outlined),
            .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > .dropdown-item:first-of-type span:not(.material-symbols-rounded):not(.material-symbols-outlined) {
                color: #2563eb !important;
                font-size: 14px !important;
                font-weight: 850 !important;
                line-height: 1 !important;
            }

    /* Iconos no activos */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .material-symbols-outlined {
        color: #64748b !important;
        font-weight: 400 !important;
    }

    /* Icono activo igual que Inicio */
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item.active .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu a[aria-current="page"] .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu button[aria-current="page"] .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu .dropdown-item[aria-current="page"] .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > a:first-of-type .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > button:first-of-type .material-symbols-rounded,
    .sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu > .dropdown-item:first-of-type .material-symbols-rounded {
        color: #2563eb !important;
    }


/* =========================================================
   SUBMENU "CAMBIAR CUENTA"
   El submenu de empresas sale a la derecha del menu (left: 100%). El menu de
   empresa tenia overflow: hidden (para las esquinas redondeadas) y lo recortaba,
   por lo que no se veia. Lo dejamos visible para que el submenu pueda salir.
========================================================= */
.sidebar-company-block[b-0wfn46b7j1]  .company-container > .dropdown-menu,
.sidebar-company-block[b-0wfn46b7j1]  .dropdown-menu {
    overflow: visible !important;
}


/* =========================================================
   COLAPSADO: BOTON DESCOLAPSAR SOBRE EL LOGO (dock_to_right)
   - La cabecera vuelve a una sola fila con el logo centrado.
   - El boton resizer ya no es una pastilla debajo del logo: pasa a ser una
     capa transparente superpuesta al logo, clicable siempre (expande).
   - Su icono dock_to_right solo aparece al pasar el raton por CUALQUIER parte
     del sidebar colapsado (.sidebar.collapsed:hover), y en ese momento se oculta
     el logo: el icono "sustituye" al logo en el mismo hueco.
   Este bloque va al final para ganar por orden a las reglas previas del resizer.
========================================================= */
.sidebar.collapsed .sidebar-header[b-0wfn46b7j1] {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    padding: 14px 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Capa transparente del tamaño del logo, centrada sobre el (cabecera relativa).
   Sin transiciones ni transform: nada de animaciones al pulsar o mantener pulsado. */
.sidebar.collapsed .sidebar-resizer[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:hover[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:focus[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:focus-visible[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:active[b-0wfn46b7j1] {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    translate: none !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: none !important;
    animation: none !important;
}

/* Icono oculto por defecto; se muestra al hacer hover en el sidebar colapsado.
   Sin transicion: el cambio logo <-> icono es instantaneo. */
.sidebar.collapsed .sidebar-resizer .resize-icon[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:hover .resize-icon[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:focus .resize-icon[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:focus-visible .resize-icon[b-0wfn46b7j1],
.sidebar.collapsed .sidebar-resizer:active .resize-icon[b-0wfn46b7j1] {
    display: none !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-size: 26px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Hover sobre CUALQUIER parte del sidebar colapsado: aparece dock_to_right... */
.sidebar.collapsed:hover .sidebar-resizer .resize-icon[b-0wfn46b7j1] {
    display: inline-flex !important;
}

/* ...y desaparece el logo por completo, dejando el hueco para el icono (reemplazo) */
.sidebar.collapsed:hover .brand-logo[b-0wfn46b7j1],
.sidebar.collapsed:hover .brand-logo-shell[b-0wfn46b7j1] {
    display: 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;
}

.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
============================= */

@media (min-width: 768px) {
    .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/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/MemoriaC/Pages/MemoriaContableEditor.razor.rz.scp.css */
.memoria-page[b-8fxbp4d1ji] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    color: var(--erp-text);
    background: var(--erp-bg);
}

/* Header */
.mc-topbar[b-8fxbp4d1ji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 22px;
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
}

.mc-title[b-8fxbp4d1ji] {
    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;
}

.mc-actions[b-8fxbp4d1ji] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.mc-actions-label[b-8fxbp4d1ji] {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--erp-muted);
}

.mc-save-btn[b-8fxbp4d1ji] {
    margin-left: 6px;
}

/* 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;
    padding: 12px 22px;
    background: var(--erp-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--erp-border) 70%, transparent);
}

/* 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] {
    margin: 0 22px 10px;
    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] {
    min-height: 0;
    padding: 0 22px 18px;
    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);
}

/* 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 */
@media (max-width: 1380px) {
    @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 0 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;
    }
}

@media (max-width: 760px) {
    .memoria-page[b-8fxbp4d1ji] {
        height: auto;
        min-height: 100%;
        overflow: visible;
        grid-template-rows: auto auto auto;
    }

    .mc-topbar[b-8fxbp4d1ji] {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 12px;
    }

    .mc-actions[b-8fxbp4d1ji] {
        width: 100%;
        justify-content: flex-start;
    }

        .mc-actions .btn[b-8fxbp4d1ji] {
            flex: 1 1 auto;
        }

    .mc-save-btn[b-8fxbp4d1ji] {
        margin-left: 0;
    }

    .mc-formbar[b-8fxbp4d1ji] {
        padding: 10px 12px;
        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] {
        padding: 0 12px 12px;
        overflow: visible;
    }

    .mc-word-panel[b-8fxbp4d1ji] {
        height: 70dvh;
        min-height: 420px;
    }

}


.mc-export-select[b-8fxbp4d1ji] {
    height: 36px;
    padding: 0 11px;
    font-size: .86rem;
    color: var(--erp-text);
    background: var(--erp-bg);
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .mc-export-select:focus[b-8fxbp4d1ji] {
        outline: none;
        border-color: var(--erp-primary);
        box-shadow: 0 0 0 3px var(--erp-primary-soft);
    }
/* _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. */

.comp-page[b-r7mzcl5li6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 2rem;
}

.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: una indicación, no una tabla vacía. */
.comp-detalle-vacio[b-r7mzcl5li6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 8rem;
    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. */
.comp-tabla-envoltorio[b-r7mzcl5li6] {
    overflow-x: auto;
}

.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;
}

.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;
}

/* 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: 220px;
}

.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;
    }

.new-format-btn[b-bsz88bl45c] {
    width: 100%;
    max-width: 520px;
    height: 44px;
    border-radius: 10px;
    font-weight: 850;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.14);
}

.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-main-action[b-bsz88bl45c],
    .toolbar-format-actions[b-bsz88bl45c] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .new-format-btn[b-bsz88bl45c] {
        max-width: none;
    }

    .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-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;
}

.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;
}
/* _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 la rejilla es su propio contenedor de consulta y el corte mira su ancho real. 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-rejilla[b-mhswcb858k] {
    container: dashboard-rejilla / inline-size;
}

@container dashboard-rejilla (max-width: 820px) {
    .dashboard-rejilla[b-mhswcb858k] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-celda-span-3[b-mhswcb858k],
    .dashboard-celda-span-4[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: 760px) {
    .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] {
        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;
}

.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/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));
    height: min(640px, calc(100vh - 140px));
    min-width: 360px;
    min-height: 420px;
    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). */
.ia-panel.ia-ancho[b-aw4rnp2vqj] {
    width: min(880px, calc(100vw - 36px));
    height: calc(100vh - 104px);
}

.ia-panel.ia-pantalla[b-aw4rnp2vqj] {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: min(1140px, calc(100vw - 56px));
    height: min(880px, calc(100vh - 56px));
}

/* ── 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;
}

.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-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-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] {
    font-size: 18px;
}

/* ── 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;
    }

/* 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;
}

/* 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;
}

.ia-tarea-cabecera[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.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. */
.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;
    padding: 0 0 8px;
}

.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;
    }

.ia-barra[b-aw4rnp2vqj] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px 7px;
}

.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);
}

/* Premium marcado se distingue del nivel elegido: el nivel se cambia en cada pregunta y este se queda
   puesto para toda la conversación gastando créditos. Verlo igual que lo demás es lo que hace que se
   olvide. */
.ia-modelo-on[data-modelo="Premium"][b-aw4rnp2vqj] {
    background: #eef2ff;
    color: #4338ca;
}

/* 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/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/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;
    box-shadow: 0 1px 2px 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;
    box-shadow: 0 1px 2px 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;
    position: relative;
}

    .titulo-completado[b-yvbz58meej]::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% + 1px);
        height: 1px;
        background-color: #9ca3af;
    }

.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/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;

    /* 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: #eef1f6 !important;
    border-color: #e2e7ef !important;
    border-bottom-color: #e2e7ef !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: #ffffff; color: var(--c-text); box-shadow: var(--sh-1); }

    .chat-conv-options:active[b-n1gkyu1x23],
    .chat-conv-minimizar:active[b-n1gkyu1x23] { background: #e2e7ef; 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;
    }
/* _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;
    padding: 12px;
    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: 12px;
        padding-right: 12px;
    }

    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 4px 12px;
    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 a blanco opaco al 55%, así que la mitad de abajo tapa del todo. */
    height: 40px;
    margin-top: -40px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 55%, #ffffff);
    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;
}

.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
   (la altura se fija por style inline). Reserva el sitio real donde va a caer, con parpadeo lento. */
.drop-zone.activa[b-3xac9v0fie] {
    margin: 6px 0;
    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.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: #f8fafc;
    }

.subtext[b-f7dq8st1b0] {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dock-menu.qa-open-down.qa-opening[b-mb5tv5vnjk] { animation: dockPanelInDown-b-mb5tv5vnjk 0.24s 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.24s 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/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;
}

.espacio-trigger[b-awgck36fix] {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e7edf5;
    border-left: 4px solid var(--esp-acento);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .espacio-trigger:hover[b-awgck36fix],
    .espacio-trigger.open[b-awgck36fix] {
        background: var(--esp-fondo);
        border-color: var(--esp-acento);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .espacio-trigger:focus-visible[b-awgck36fix] {
        outline: 3px solid rgba(37, 99, 235, 0.16);
        outline-offset: 2px;
    }

.espacio-badge[b-awgck36fix] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--esp-acento);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.espacio-badge-ico[b-awgck36fix] {
    font-size: 20px;
    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: 13.5px;
    font-weight: 800;
    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: 600;
    line-height: 1.15;
    color: #8b95a7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.espacio-chevron[b-awgck36fix] {
    margin-left: auto;
    color: var(--esp-acento);
    font-size: 22px;
    line-height: 1;
    transition: transform .18s ease;
}

.espacio-trigger.open .espacio-chevron[b-awgck36fix] {
    transform: rotate(180deg);
}

/* ---- sidebar contraído: solo la insignia ---- */
.espacio-container.collapsed .espacio-trigger[b-awgck36fix] {
    justify-content: center;
    padding: 6px;
    border-left-width: 1px;
    border-color: var(--esp-acento);
}

.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: 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);
    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: 12px;
    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;
}
/* _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; }
/* _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;
    width: 320px;
    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);
}

    .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;
}

.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. */
.gu-bloqueo[b-65fijthvtx] {
    position: fixed;
    z-index: 100000;
    background: transparent;
}

/* =========================
   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;
}

/* 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: 15px;
}

/* ===== 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;
}

.mas-opciones-dropdown[b-9h7m9shyo0] {
    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-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);
}

.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/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/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;
    }

/* 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/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;
}

.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 y su input comparten caja EXACTA: mismo alto, tipografía, padding y borde (transparente en
   el h2, que reserva el sitio del azul del input). Sin esto, entrar en edición empujaría la fecha de
   vencimiento de debajo. El padding izquierdo se compensa con el margen negativo. */
.modal-title[b-592frhbpjc],
.modal-title-input[b-592frhbpjc] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.015em;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 1px 6px;
    margin: 0 0 0 -6px;
    border: 1px solid transparent;
    border-radius: 7px;
}

.modal-title[b-592frhbpjc] {
    word-break: break-word;
}

    /* 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;
        }

.modal-title-input[b-592frhbpjc] {
    font-family: inherit;
    width: 100%;
    min-width: 260px;
    background: #ffffff;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.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;
    }
}
/* _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 y el comportamiento del botón plano del CommandBar
   (.command-bar.cmdbar-plain .command-bar__btn y .command-bar__more: 48px de alto, radio pequeño,
   sin fondo ni borde en reposo, superficie + línea + sombra en hover) 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 transparent;
    border-radius: var(--cf-r-sm, 8px);
    background: transparent;
    color: var(--cf-muted, #6b7280);
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .volver-chip.volver-boton:hover[b-80cuuj209i] {
        background: var(--cf-surface, #ffffff);
        border-color: var(--cf-line, #e5e7eb);
        color: var(--cf-text, #111827);
        box-shadow: var(--cf-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
    }

    /* 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/ChecklistOnboardingPanel.razor.rz.scp.css */

.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;
}
/* _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;
}
/* _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/Pricing/BillingToggle.razor.rz.scp.css */
/* =========================
   BILLING TOGGLE
========================= */

.billing-toggle[b-8onpc59max] {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.billing-option[b-8onpc59max] {
    padding: 8px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .billing-option:hover[b-8onpc59max] {
        color: #334155;
    }

    .billing-option.active[b-8onpc59max] {
        background: #ffffff;
        color: #0f172a;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        font-weight: 600;
    }

.billing-badge[b-8onpc59max] {
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 480px) {
    .billing-option[b-8onpc59max] {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .billing-badge[b-8onpc59max] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Pricing/PlanCard.razor.rz.scp.css */
/* =========================
   PLAN CARD
========================= */

.plan-card[b-hb66mnfemr] {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1.5px solid #e2e8f0;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    flex: 1;
    min-width: 280px;
    max-width: 380px;
}

    .plan-card:hover[b-hb66mnfemr] {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }

/* Popular variant */
.plan-card.popular[b-hb66mnfemr] {
    border-color: var(--plan-accent, #6366f1);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--plan-accent, #6366f1) 15%, transparent);
}

    .plan-card.popular:hover[b-hb66mnfemr] {
        box-shadow: 0 16px 48px color-mix(in srgb, var(--plan-accent, #6366f1) 20%, transparent);
    }

/* Popular badge */
.popular-badge[b-hb66mnfemr] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--plan-accent, #6366f1);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ===== HEADER ===== */

.plan-header[b-hb66mnfemr] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.plan-icon-wrapper[b-hb66mnfemr] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--plan-accent, #6366f1) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.plan-icon[b-hb66mnfemr] {
    font-size: 28px;
    color: var(--plan-accent, #6366f1);
    font-variation-settings: 'FILL' 1;
    user-select: none;
}

.plan-name[b-hb66mnfemr] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.plan-description[b-hb66mnfemr] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* ===== PRICING ===== */

.plan-pricing[b-hb66mnfemr] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.price-row[b-hb66mnfemr] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount[b-hb66mnfemr] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
    line-height: 1;
}

.price-period[b-hb66mnfemr] {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
}

.price-savings[b-hb66mnfemr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    padding: 2px 10px;
    border-radius: 999px;
}

/* ===== FEATURES ===== */

.plan-features[b-hb66mnfemr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
    flex: 1;
}

/* ===== ACTION ===== */

.plan-action[b-hb66mnfemr] {
    margin-top: auto;
}

.plan-btn[b-hb66mnfemr] {
    width: 100%;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.upgrade-btn[b-hb66mnfemr] {
    background: var(--plan-accent, #6366f1);
    color: #ffffff;
}

    .upgrade-btn:hover[b-hb66mnfemr] {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--plan-accent, #6366f1) 30%, transparent);
    }

.current-btn[b-hb66mnfemr] {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
}

.btn-icon[b-hb66mnfemr] {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

/* ===== RESPONSIVE ===== */

/* Tablets horizontales: cards apiladas, permitir ancho completo */
@media (max-width: 900px) {
    .plan-card[b-hb66mnfemr] {
        max-width: 420px;
        width: 100%;
    }
}

/* Moviles */
@media (max-width: 480px) {
    .plan-card[b-hb66mnfemr] {
        min-width: 0;
        max-width: 100%;
        padding: 24px 20px;
        gap: 18px;
        border-radius: 16px;
    }

    .plan-icon-wrapper[b-hb66mnfemr] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .plan-icon[b-hb66mnfemr] {
        font-size: 24px;
    }

    .plan-name[b-hb66mnfemr] {
        font-size: 1.1rem;
    }

    .price-amount[b-hb66mnfemr] {
        font-size: 2rem;
    }

    .plan-btn[b-hb66mnfemr] {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}
/* _content/ErpPowergest/Presentation/Shared/Pricing/PlanFeatureItem.razor.rz.scp.css */
/* =========================
   PLAN FEATURE ITEM
========================= */

.plan-feature[b-imr2w2ab5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    list-style: none;
}

.feature-icon[b-imr2w2ab5m] {
    font-size: 20px;
    color: #16a34a;
    font-variation-settings: 'FILL' 1;
    flex-shrink: 0;
}

.feature-text[b-imr2w2ab5m] {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.4;
}

/* Excluded feature */
.plan-feature.excluded .feature-icon[b-imr2w2ab5m] {
    color: #cbd5e1;
}

.plan-feature.excluded .feature-text[b-imr2w2ab5m] {
    color: #94a3b8;
}
/* _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/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;
    }

/* Ámbar y no rojo: no ha salido nada mal, falta un paso previo. El rojo se reserva para lo que
   destruye, o deja de significar nada. */
.bc-aviso-bloqueo[b-yz8gva6l6z] {
    border-left: 4px solid #D97706;
    background-color: #FFFBEB;
    color: #374151;
}

    .bc-aviso-bloqueo .material-symbols-rounded[b-yz8gva6l6z] {
        color: #D97706;
    }

    .bc-aviso-bloqueo strong[b-yz8gva6l6z] {
        color: #92400E;
    }

/* Rojo, y no el ámbar del bloqueo: esto NO es un paso que falta, 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;
}

.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] {
    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;
    bottom: 24px;
    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/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/Pages/AltasComercialesPage.razor.rz.scp.css */
.ac-page[b-xvd2vtoq23] {
    padding: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.ac-header[b-xvd2vtoq23] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.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 */
.au-page[b-plugbxrjqb] {
    padding: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.au-header[b-plugbxrjqb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.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-btn[b-plugbxrjqb] {
    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;
}

.au-btn:hover[b-plugbxrjqb] { background: #f9fafb; }
.au-btn .material-symbols-rounded[b-plugbxrjqb] { font-size: 18px; }

.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; }

.au-table[b-plugbxrjqb] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.au-table th[b-plugbxrjqb],
.au-table td[b-plugbxrjqb] {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    vertical-align: top;
}

.au-table th[b-plugbxrjqb] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.au-table tbody tr:hover[b-plugbxrjqb] { background: #fafafa; }

.au-detalle[b-plugbxrjqb] {
    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/ComandosPage.razor.rz.scp.css */
.cm-page[b-p79dy1dx5l] { padding: 24px 28px; max-width: 1100px; margin: 0 auto; }

.cm-header[b-p79dy1dx5l] { margin-bottom: 18px; }
.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; }

.cm-main[b-p79dy1dx5l] { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }

.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; }
.cm-section-title[b-p79dy1dx5l] { font-weight: 600; color: #374151; padding: 4px 6px 10px; }
.cm-list-empty[b-p79dy1dx5l] { color: #6b7280; padding: 12px 6px; font-size: .9rem; }

.cm-item[b-p79dy1dx5l] { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.cm-item:hover[b-p79dy1dx5l] { background: #f9fafb; }
.cm-item.active[b-p79dy1dx5l] { background: #eff6ff; border-color: #bfdbfe; }
.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-item-tags[b-p79dy1dx5l] { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }

.cm-tag[b-p79dy1dx5l] { 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/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. */

.cs-page[b-ir25x391ue] {
    padding: 24px 28px;
    max-width: 1300px;
    margin: 0 auto;
}

.cs-header[b-ir25x391ue] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cs-header-actions[b-ir25x391ue] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.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;
}

.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;
}

.cs-tabla-wrap[b-ir25x391ue] { overflow-x: 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; }

.cs-table[b-ir25x391ue] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.cs-table th[b-ir25x391ue],
.cs-table td[b-ir25x391ue] {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border, #f0f1f3);
    vertical-align: top;
}

.cs-table th[b-ir25x391ue] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.cs-table tbody tr:hover[b-ir25x391ue] { background: #fafafa; }
.cs-fila-fallida[b-ir25x391ue] { background: #fffbfb; }

.cs-col-check[b-ir25x391ue] { width: 34px; }
.cs-col-num[b-ir25x391ue] { width: 74px; text-align: right; }

.cs-destinatario[b-ir25x391ue] { white-space: nowrap; font-weight: 500; }

.cs-error[b-ir25x391ue] {
    color: #6b7280;
    max-width: 460px;
    word-break: break-word;
}

.cs-ok[b-ir25x391ue] { color: #166534; }
.cs-neutro[b-ir25x391ue] { color: #9ca3af; }

.cs-badge[b-ir25x391ue] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.cs-badge-ok[b-ir25x391ue] { background: #dcfce7; color: #166534; }
.cs-badge-ko[b-ir25x391ue] { background: #fee2e2; color: #991b1b; }
.cs-badge-pendiente[b-ir25x391ue] { background: #fef3c7; color: #92400e; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/DatosPruebaPage.razor.rz.scp.css */
.dp-page[b-umdbaxy4wi] { padding: 24px 28px; max-width: 900px; margin: 0 auto; }

.dp-header[b-umdbaxy4wi] { margin-bottom: 18px; }
.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: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.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;
}

.dg-actions[b-jlhsc8bva0] {
    display: flex;
    gap: 8px;
}

/* --- 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; }
/* _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: 24px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.esq-header[b-6g10h3j2ey] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.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/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 */
.mt-page[b-2dladbrv1o] { padding: 24px 28px; max-width: 1100px; margin: 0 auto; }

.mt-header[b-2dladbrv1o] { margin-bottom: 18px; }
.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: 12px; }

.mt-tarjeta[b-2dladbrv1o] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    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: 26px; color: #2563eb; flex: 0 0 auto; margin-top: 2px; }

.mt-txt[b-2dladbrv1o] { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.mt-nombre[b-2dladbrv1o] { font-weight: 600; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.mt-desc[b-2dladbrv1o] { color: #6b7280; font-size: .85rem; line-height: 1.45; max-width: 78ch; }

.mt-flecha[b-2dladbrv1o] { font-size: 22px; 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/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. */

.op-page[b-i6xguqkl4e] { padding: 24px; display: flex; flex-direction: column; gap: 18px; max-width: 860px; }

.op-header[b-i6xguqkl4e] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.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; }
.op-header-actions[b-i6xguqkl4e] { display: flex; gap: 8px; }

.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; }
/* _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;
}
.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; }
.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.
   Sin ::deep: no hay plantillas de Syncfusion aquí, es HTML propio. */

.sw-page[b-c0qyuispt8] {
    padding: 1.25rem;
    max-width: 1400px;
}

.sw-header[b-c0qyuispt8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.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 larga de webs ─────────────────────────────────────────────────────────────────────────
   El scroll vive en la tabla y no en la página: con 200 filas, una tabla sin tope empuja la ficha
   del dominio fuera de la pantalla y obliga a subir y bajar para cada cosa. */
.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: .75rem; }
    .sw-campos[b-c0qyuispt8] { grid-template-columns: 1fr; }
}
/* _content/ErpPowergest/Presentation/Sistema/Pages/TecnicosPage.razor.rz.scp.css */
/* Pantalla de técnicos de soporte (W4). Mismo lenguaje visual que el resto de /sistema/*:
   cabecera + dos paneles (lista a la izquierda, detalle a la derecha). */

.tc-page[b-kq200crr1s] { padding: 24px; display: flex; flex-direction: column; gap: 18px; }

.tc-header[b-kq200crr1s] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tc-title[b-kq200crr1s] { font-size: 1.35rem; font-weight: 700; margin: 0; }
.tc-subtitle[b-kq200crr1s] { color: #6b7280; font-size: .84rem; margin-top: 3px; max-width: 720px; }
.tc-subtitle a[b-kq200crr1s] { color: #2563eb; text-decoration: none; }
.tc-subtitle a:hover[b-kq200crr1s] { text-decoration: underline; }
.tc-header-actions[b-kq200crr1s] { display: flex; gap: 8px; }

.tc-card[b-kq200crr1s] { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.tc-main[b-kq200crr1s] { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .tc-main[b-kq200crr1s] { grid-template-columns: 1fr; } }

/* ---- Lista ---- */

.tc-list-panel[b-kq200crr1s] { display: flex; flex-direction: column; overflow: hidden; }
.tc-list-head[b-kq200crr1s] { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #f3f4f6; }
.tc-section-title[b-kq200crr1s] { font-size: .95rem; font-weight: 700; color: #111827; }

.tc-search[b-kq200crr1s] { position: relative; display: flex; align-items: center; }
.tc-search-icon[b-kq200crr1s] { position: absolute; left: 9px; font-size: 18px; color: #9ca3af; }
.tc-search-input[b-kq200crr1s] { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .88rem; }
.tc-search-input:focus[b-kq200crr1s] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.tc-list[b-kq200crr1s] { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }

.tc-card-item[b-kq200crr1s] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.tc-card-item:hover[b-kq200crr1s] { background: #f9fafb; }
.tc-card-item.active[b-kq200crr1s] { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
.tc-card-item-texts[b-kq200crr1s] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-card-item-name[b-kq200crr1s] { font-size: .9rem; font-weight: 600; color: #111827; }
.tc-card-item-desc[b-kq200crr1s] { font-size: .78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Detalle ---- */

.tc-detail-panel[b-kq200crr1s] { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.tc-detail-sub[b-kq200crr1s] { margin-top: -8px; }

.tc-field[b-kq200crr1s] { display: flex; flex-direction: column; gap: 6px; }
.tc-field label[b-kq200crr1s] { font-size: .8rem; font-weight: 600; color: #374151; }
.tc-input[b-kq200crr1s] { padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .92rem; background: #fff; }
.tc-input:focus[b-kq200crr1s] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-input:disabled[b-kq200crr1s] { background: #f9fafb; color: #9ca3af; }
.tc-field-hint[b-kq200crr1s] { font-size: .76rem; color: #9ca3af; }

.tc-estado-row[b-kq200crr1s] { display: flex; align-items: center; gap: 10px; }
.tc-separador[b-kq200crr1s] { height: 1px; background: #f3f4f6; margin: 4px 0; }

.tc-actions[b-kq200crr1s] { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Piezas comunes ---- */

.tc-badge[b-kq200crr1s] { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tc-badge-activo[b-kq200crr1s] { background: #dcfce7; color: #166534; }
.tc-badge-inactivo[b-kq200crr1s] { background: #f3f4f6; color: #6b7280; }

.tc-btn[b-kq200crr1s] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 13px; border-radius: 9px; font-size: .88rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.tc-btn:disabled[b-kq200crr1s] { opacity: .55; cursor: default; }
.tc-btn-ico[b-kq200crr1s] { font-size: 18px; }
.tc-btn-primary[b-kq200crr1s] { background: #2563eb; color: #fff; }
.tc-btn-primary:hover:not(:disabled)[b-kq200crr1s] { background: #1d4ed8; }
.tc-btn-ghost[b-kq200crr1s] { background: #fff; border-color: #d1d5db; color: #374151; }
.tc-btn-ghost:hover:not(:disabled)[b-kq200crr1s] { background: #f3f4f6; }

.tc-empty[b-kq200crr1s] { padding: 24px; text-align: center; color: #6b7280; font-size: .88rem; }
.tc-empty-list[b-kq200crr1s] { padding: 18px 14px; text-align: left; }

.tc-denied[b-kq200crr1s] { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.tc-denied .material-symbols-rounded[b-kq200crr1s] { font-size: 26px; color: #9ca3af; }
.tc-denied-title[b-kq200crr1s] { font-weight: 700; color: #111827; }

.tc-aviso[b-kq200crr1s] { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; }
.tc-aviso .material-symbols-rounded[b-kq200crr1s] { font-size: 19px; }
/* _content/ErpPowergest/Presentation/Sistema/Pages/TenantsPage.razor.rz.scp.css */
.tn-page[b-ypr56xl56s] { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }

.tn-header[b-ypr56xl56s] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.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; }
.tn-header-actions[b-ypr56xl56s] { display: flex; gap: 8px; flex-shrink: 0; }

.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/Suscripcion/Pages/UpgradePlan.razor.rz.scp.css */
/* =========================
   UPGRADE PLAN PAGE
========================= */

.upgrade-page[b-fk6byxvsak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 60px;
    gap: 40px;
    min-height: 100%;
}

/* ===== HEADER ===== */

.upgrade-header[b-fk6byxvsak] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    flex-shrink: 0;
}

.upgrade-title[b-fk6byxvsak] {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.upgrade-subtitle[b-fk6byxvsak] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ===== PLANS GRID ===== */

.plans-grid[b-fk6byxvsak] {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

/* ===== FOOTER NOTE ===== */

.upgrade-footer-note[b-fk6byxvsak] {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */

/* Tablets horizontales */
@media (max-width: 900px) {
    .plans-grid[b-fk6byxvsak] {
        flex-direction: column;
        align-items: center;
    }

    .upgrade-title[b-fk6byxvsak] {
        font-size: 1.5rem;
    }

    .upgrade-page[b-fk6byxvsak] {
        padding: 24px 16px 40px;
        gap: 28px;
    }
}

/* Tablets verticales */
@media (max-width: 768px) {
    .upgrade-title[b-fk6byxvsak] {
        font-size: 1.35rem;
    }

    .upgrade-subtitle[b-fk6byxvsak] {
        font-size: 0.9rem;
    }

    .plans-grid[b-fk6byxvsak] {
        gap: 20px;
    }
}

/* Moviles */
@media (max-width: 480px) {
    .upgrade-page[b-fk6byxvsak] {
        padding: 20px 12px 32px;
        gap: 20px;
    }

    .upgrade-title[b-fk6byxvsak] {
        font-size: 1.2rem;
    }

    .upgrade-subtitle[b-fk6byxvsak] {
        font-size: 0.85rem;
    }

    .plans-grid[b-fk6byxvsak] {
        gap: 16px;
    }

    .upgrade-footer-note[b-fk6byxvsak] {
        font-size: 0.75rem;
    }
}
/* _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.
*/

.op-page[b-f3d6y81ozk] { padding: 1.25rem 1.5rem 3rem; max-width: 1180px; margin: 0 auto; color: #1f2933; }

.op-header[b-f3d6y81ozk] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.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; }
.pr-condicion .op-select[b-f3d6y81ozk] { flex: 0 0 auto; }
.pr-condicion .op-input[b-f3d6y81ozk] { flex: 1 1 auto; min-width: 6rem; }

.op-btn-icono[b-f3d6y81ozk] { padding: .25rem .5rem; line-height: 1; color: #61707d; }
.op-btn-icono:hover:not(:disabled)[b-f3d6y81ozk] { color: #c22f39; }
/* _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.
*/

.op-page[b-zxt3zggl3h] { padding: 1.25rem 1.5rem 3rem; max-width: 1180px; margin: 0 auto; color: #1f2933; }

.op-header[b-zxt3zggl3h] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.op-title[b-zxt3zggl3h] { font-size: 1.6rem; font-weight: 700; margin: 0; }
.op-subtitle[b-zxt3zggl3h] { color: #61707d; font-size: .9rem; margin-top: .15rem; }

.op-card[b-zxt3zggl3h] { 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-zxt3zggl3h] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.op-card-title[b-zxt3zggl3h] { font-size: 1.05rem; 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: .45rem .6rem; font-size: .9rem; 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: .86rem; }
.op-table th[b-zxt3zggl3h] { 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-zxt3zggl3h] { padding: .45rem .5rem; 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; }
.op-check-campo[b-zxt3zggl3h] { align-self: center; padding-bottom: .45rem; }

.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; }

/* ── 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-zxt3zggl3h] { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid #e3e8ee; margin-bottom: 1rem; }
.ta-tab[b-zxt3zggl3h] { 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-zxt3zggl3h] { color: #2b3a4a; }
.ta-tab-activa[b-zxt3zggl3h] { color: #2f6fed; border-bottom-color: #2f6fed; }

.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; }
/* _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; }
.us-invite-texts[b-o2hiv0bhpu] { min-width: 0; }
.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; }

/* 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; }

/* 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: 12px; margin-bottom: 18px; }
.us-detail-name[b-o2hiv0bhpu] { font-weight: 700; font-size: 1.05rem; color: #111827; }
.us-detail-user[b-o2hiv0bhpu] { font-size: .82rem; color: #6b7280; }

.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; }
.us-danger-warning .material-symbols-rounded[b-o2hiv0bhpu] { font-size: 20px; }

/* 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/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;
}
/* _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;
}

.cnv-input[b-335m9nid1g] {
    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/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;
}

/* 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;
}

.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;
    }

.fab-hint[b-ytbsc1fffq] {
    font-size: var(--fab-font-small);
    color: #94a3b8;
    line-height: 1.25;
}

.fab-input[b-ytbsc1fffq],
.fab-select[b-ytbsc1fffq] {
    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] {
        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;
}

/* ESTADOS
   Las insignias las pinta la página como plantilla de las columnas «Tipo» y «Estado», 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-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: 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;
}

.fdp-card-head[b-orzevupr5r] {
    padding: 5px 15px;
    border-block-end: 1px solid var(--fdp-outline-variant);
    background: var(--fdp-surface-low);
}

    .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-on-surface-variant);
    }

.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;
    }

/* ─── 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;
}

/* 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;
    }

/* 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] {
        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] {
            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;
    }

/* Modo consulta por permiso (Permisos F6): distintivo en la cabecera del documento. */
.ff-consulta-badge[b-orzevupr5r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: #eef1f4;
    color: #5f6368;
    font-size: 0.85rem;
    font-weight: 600;
    user-select: none;
}

.ff-consulta-badge .material-symbols-outlined[b-orzevupr5r] {
    font-size: 1.1rem;
}

/* 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;
}

/* Banda del PDF del documento. El marcado existe desde siempre y NUNCA tuvo hoja: salía como texto corrido,
   con el nombre del fichero pegado al enlace («000017.pdfDescargar»). Se notaba poco porque la banda casi no
   llegaba a verse; desde que la dirección se deduce del documento (FUN-513) sale en cualquier documento
   guardado y el descuido pasó a verse siempre.

   OJO con el juego de variables: esta pantalla cuelga de «.fdp-page» y usa «--fdp-*». Las «--ff-*» son de
   «.ff-unified-page», que NO es antecesor de esto: escritas con aquéllas, cada declaración queda inválida y
   se cae sola (así se escribió la primera vez y solo sobrevivió el «display: flex»). */
.fdp-page .ff-pdf-strip[b-orzevupr5r] {
    min-inline-size: 0;
    margin-block-end: var(--fdp-gap-sm);
}

.fdp-page .ff-pdf-actions[b-orzevupr5r] {
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fdp-gap-sm);
    border: 1px solid var(--fdp-outline-variant);
    border-radius: var(--fdp-radius-sm);
    background: var(--fdp-surface-container);
    color: var(--fdp-on-surface);
    padding: var(--fdp-pad-head) var(--fdp-pad);
    font-size: .82rem;
}

    .fdp-page .ff-pdf-actions > strong[b-orzevupr5r] {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .fdp-page .ff-pdf-actions .ff-material-icon[b-orzevupr5r] {
        flex: 0 0 auto;
        color: var(--fdp-primary);
        font-size: 1.15rem;
    }

.fdp-page .ff-pdf-link[b-orzevupr5r] {
    flex: 0 0 auto;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 999rem;
    background: var(--fdp-surface);
    color: var(--fdp-primary);
    padding: .22rem .7rem;
    font-weight: 600;
    text-decoration: none;
}

    .fdp-page .ff-pdf-link:hover[b-orzevupr5r],
    .fdp-page .ff-pdf-link:focus-visible[b-orzevupr5r] {
        background: var(--fdp-primary);
        border-color: var(--fdp-primary);
        color: #ffffff;
    }


/* _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.
*/

.op-page[b-tbd8acqk3v] {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 1180px;
    margin: 0 auto;
    color: #1f2933;
}

.op-header[b-tbd8acqk3v] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.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;
    margin-bottom: 1.1rem;
    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;
}

.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; }

.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; }
/* _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/CobroRapidoModal.razor.rz.scp.css */
/* Cobro rápido del TPV (T5): modal pequeña, centrada y pensada para el teclado. */

.cr-modal[b-u8snx2dywz] {
    width: min(520px, 92vw);
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.cr-body[b-u8snx2dywz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 2px;
}

.cr-warn[b-u8snx2dywz] {
    grid-column: 1 / -1;
    padding: 8px 12px;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.cr-fuentes[b-u8snx2dywz] {
    grid-column: 1 / -1;
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
}

@media (max-width: 560px) {
    .cr-body[b-u8snx2dywz] {
        grid-template-columns: 1fr;
    }
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/RecuperarTicketModal.razor.rz.scp.css */
/* Recuperar tickets aparcados (T7): lista compacta dentro del chasis de modal. */

.rt-modal[b-vtgr2m82ja] {
    width: min(720px, 94vw);
    max-height: 88vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.rt-body[b-vtgr2m82ja] {
    overflow: auto;
}

.rt-empty[b-vtgr2m82ja] {
    padding: 24px;
    text-align: center;
    color: #64748b;
}

.rt-table[b-vtgr2m82ja] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rt-table th[b-vtgr2m82ja],
.rt-table td[b-vtgr2m82ja] {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.rt-table thead th[b-vtgr2m82ja] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
}

.rt-table .rt-num[b-vtgr2m82ja] {
    text-align: right;
}

.fdp-btn-sm[b-vtgr2m82ja] {
    padding: 4px 10px;
    font-size: 12.5px;
}
/* _content/ErpPowergest/Presentation/Ventas/FacturaSimplificada/TpvPage.razor.rz.scp.css */
/* PÁGINA del TPV (fase E9, decisión D5). Antes esto era el chasis de un modal: overlay fijo con velo y
   una tarjeta flotante centrada. Ahora es una ventana más del ERP, así que ocupa el área de trabajo que
   le cede .main-body, igual que el resto de páginas: sin position:fixed, sin velo, sin sombra de modal
   y sin ancho máximo de tarjeta. El reparto interno (cabecera fija, líneas elásticas, pie y botonera)
   no cambia: sigue siendo el mismo flex en columna que ya funcionaba. */

.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: .75rem;
    --fdp-radius-sm: .5rem;
    --fdp-shadow: 0 1px 2px 0 rgba(15, 23, 42, .05), 0 1px 3px 0 rgba(15, 23, 42, .04);
    --fdp-pad: clamp(.55rem, .42rem + .55vw, .95rem);
    --fdp-pad-head: clamp(.45rem, .34rem + .45vw, .75rem);
    --fdp-gap: clamp(.55rem, .42rem + .65vw, 1rem);
    --fdp-gap-sm: clamp(.38rem, .28rem + .42vw, .7rem);
    /* ALTO: el suelo es la pantalla —el alto visible que cede .main-body—; el TPV lo llena y reparte por
       dentro (las líneas se quedan el sobrante). ANCHO: todo el que haya, sin tope de tarjeta. */
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    min-block-size: 34rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fdp-surface-lowest);
    color: var(--fdp-on-surface);
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    animation: fsPaginaIn-b-5if4zcz2ru .28s cubic-bezier(.16, 1, .3, 1) both;
}

.fs-ticket-header[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fdp-gap);
    margin-block-end: var(--fdp-gap-sm);
    min-inline-size: 0;
}

.fdp-title-block[b-5if4zcz2ru] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}

    .fdp-title-block h1[b-5if4zcz2ru] {
        margin: 0;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--fdp-on-surface);
        font-size: clamp(1.12rem, .9rem + .6vw, 1.48rem);
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -.01em;
    }

.fdp-title-number[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-weight: 800;
    margin-inline-start: .25rem;
}

.ff-status-blue[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    padding: .2rem .62rem;
    border: 1px solid #c7dcfb;
    border-radius: 999rem;
    background: #e8f0fe;
    color: #1a56d6;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.fdp-actions-bar[b-5if4zcz2ru],
.ff-mini-actions[b-5if4zcz2ru],
.fs-bottom-actions[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}

.fs-ticket-actions[b-5if4zcz2ru] {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

[b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn,
[b-5if4zcz2ru] .e-btn.fdp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-block-size: 2.25rem;
    padding: 0 .9rem;
    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] .fdp-actions-bar .e-btn.fdp-btn .material-symbols-outlined,
    [b-5if4zcz2ru] .e-btn.fdp-btn .material-symbols-outlined {
        font-size: 1.1rem;
        line-height: 1;
    }

    [b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn:hover,
    [b-5if4zcz2ru] .e-btn.fdp-btn:hover {
        background: var(--fdp-surface-low);
        border-color: #9aa0b0;
    }

[b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn-primary,
[b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn-primary:hover,
[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;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

    [b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn-primary:hover,
    [b-5if4zcz2ru] .e-btn.fdp-btn-primary:hover {
        filter: brightness(.95);
    }

[b-5if4zcz2ru] .fdp-actions-bar .e-btn.fdp-btn-danger,
[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] .fdp-actions-bar .e-btn.fdp-btn-danger:hover,
    [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] .fdp-actions-bar .e-btn.fdp-icon-btn,
[b-5if4zcz2ru] .e-btn.fdp-icon-btn {
    inline-size: 2.25rem;
    min-inline-size: 2.25rem;
    padding: 0;
}

.fs-ticket-content[b-5if4zcz2ru],
.fdp-content[b-5if4zcz2ru] {
    min-inline-size: 0;
    min-block-size: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--fdp-gap-sm);
    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;
}

.fdp-card-head[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fdp-gap-sm);
    min-inline-size: 0;
    padding: 5px 15px;
    border-block-end: 1px solid var(--fdp-outline-variant);
    background: var(--fdp-surface-low);
}

    .fdp-card-head h2[b-5if4zcz2ru] {
        margin: 0;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--fdp-on-surface-variant);
        font-size: clamp(.68rem, .62rem + .18vw, .78rem);
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.fdp-card-body[b-5if4zcz2ru] {
    padding: var(--fdp-pad);
}

.fdp-field[b-5if4zcz2ru] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

    .fdp-field label[b-5if4zcz2ru] {
        display: block;
        margin-block-end: .2rem;
        color: var(--fdp-on-surface-variant);
        font-size: .72rem;
        font-weight: 400;
    }

.fdp-input[b-5if4zcz2ru] {
    inline-size: 100%;
    min-inline-size: 0;
    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-5if4zcz2ru] {
        outline: none;
        border-color: var(--fdp-primary);
        box-shadow: 0 0 0 2px rgba(0, 40, 142, .25);
    }

.fdp-readonly[b-5if4zcz2ru] {
    background: var(--fdp-surface-low);
    color: var(--fdp-on-surface-variant);
    cursor: default;
}

.fs-strong-input[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-weight: 800;
}

.fs-ticket-head-card[b-5if4zcz2ru],
.fs-payment-card[b-5if4zcz2ru] {
    flex: 0 0 auto;
}

.fs-ticket-fields[b-5if4zcz2ru] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px var(--fdp-gap-sm);
    align-items: end;
}

    .fs-ticket-fields > .fdp-field[b-5if4zcz2ru] {
        flex: 1 1 8rem;
        min-inline-size: 7rem;
    }

.fs-field-cash-name[b-5if4zcz2ru] {
    flex-grow: 2;
    min-inline-size: 11rem;
}

.fs-field-client-name[b-5if4zcz2ru] {
    flex-grow: 3;
    min-inline-size: 12rem;
}

.fs-info-chip[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-block-size: 1.7rem;
    padding: 0 .55rem;
    border: 1px solid #c7dcfb;
    border-radius: 999rem;
    background: #e8f0fe;
    color: #1a56d6;
    font-size: .74rem;
    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);
}

.fs-info-chip .material-symbols-outlined[b-5if4zcz2ru] {
    font-size: 1rem;
    line-height: 1;
}

.fs-lines-card[b-5if4zcz2ru] {
    flex: 1 1 auto;
    min-block-size: 14rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .fs-lines-card > .fdp-card-head[b-5if4zcz2ru] {
        flex: 0 0 auto;
    }

    .fs-lines-card > .fdp-card-body[b-5if4zcz2ru] {
        flex: 1 1 auto;
        min-block-size: 0;
        padding: var(--fdp-pad);
        overflow: hidden;
    }

.ff-mode-pick[b-5if4zcz2ru] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 8px;
    background: var(--fdp-surface);
    color: var(--fdp-on-surface-variant);
    font-size: .78rem;
    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: 1.05rem;
        line-height: 1;
    }

.ff-mode-select[b-5if4zcz2ru] {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fdp-on-surface);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

[b-5if4zcz2ru] .e-btn.ff-lines-count,
[b-5if4zcz2ru] .e-btn.ff-lines-count:disabled {
    inline-size: auto;
    min-inline-size: 0;
    padding: .3rem .7rem;
    border: 1px solid var(--fdp-outline-variant);
    border-radius: 999rem;
    background: var(--fdp-surface-container);
    color: var(--fdp-on-surface-variant);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: none;
    opacity: 1;
    text-transform: none;
}

[b-5if4zcz2ru] .e-grid.ff-grid {
    inline-size: 100%;
    min-inline-size: max(100%, 76rem);
    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: var(--fdp-surface-low);
        color: var(--fdp-on-surface-variant);
        border-color: var(--fdp-outline-variant);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .02em;
        padding-block: .34rem;
        padding-inline: .42rem;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-rowcell {
        color: var(--fdp-on-surface);
        border-color: var(--fdp-outline-variant);
        background: #ffffff;
        font-size: .78rem;
        padding: 0;
        vertical-align: middle;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-altrow .e-rowcell {
        background: #fbfcff;
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-row:hover .e-rowcell {
        background: var(--fdp-surface-low);
    }

    [b-5if4zcz2ru] .e-grid.ff-grid .e-content {
        overflow: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

/* Las celdas del grid de líneas (ff-cell-input, ff-codigo-input, ff-cell-num, ff-cell-center,
   ff-cell-ro) las viste ahora RejillaLineasDocumento.razor.css, que viaja CON la rejilla. Esta página
   tenía su propia copia de esas reglas —y aun así le faltaba la lupa de la celda de código, que no
   estaba copiada y por eso en /tpv no se veía—. Duplicarlas volvería a abrir esa brecha: si algo del
   estilo de la celda hay que cambiar, se cambia en el componente y las tres pantallas lo heredan. */

[b-5if4zcz2ru] .e-btn.ff-grid-delete-btn {
    inline-size: 2rem;
    min-inline-size: 2rem;
    block-size: 2rem;
    min-block-size: 2rem;
    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;
}

.fs-payment-fields[b-5if4zcz2ru] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px var(--fdp-gap-sm);
    align-items: end;
}

    .fs-payment-fields > .fdp-field[b-5if4zcz2ru] {
        flex: 1 1 8rem;
        min-inline-size: 7rem;
    }

.fs-field-card-name[b-5if4zcz2ru],
.fs-field-payment-name[b-5if4zcz2ru] {
    flex-grow: 2;
    min-inline-size: 12rem;
}

.fs-bottom-bar[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fdp-gap-sm);
    margin-block-start: var(--fdp-gap-sm);
    padding-block-start: var(--fdp-gap-sm);
    border-block-start: 1px solid var(--fdp-outline-variant);
}

.fs-check[b-5if4zcz2ru] {
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--fdp-on-surface);
    font-size: .82rem;
    font-weight: 600;
}

    .fs-check input[b-5if4zcz2ru] {
        accent-color: var(--fdp-primary);
    }

@media (max-width: 1200px) {
    .fs-head-row[b-5if4zcz2ru],
    .fs-bottom-bar[b-5if4zcz2ru] {
        grid-template-columns: 1fr;
    }

    .fs-ticket-actions[b-5if4zcz2ru],
    .fs-bottom-actions[b-5if4zcz2ru] {
        justify-content: flex-start;
    }

    .fs-ticket-fields[b-5if4zcz2ru],
    .fs-payment-fields[b-5if4zcz2ru] {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .fs-field-ticket[b-5if4zcz2ru],
    .fs-field-cash-code[b-5if4zcz2ru],
    .fs-field-seller-code[b-5if4zcz2ru],
    .fs-field-client-code[b-5if4zcz2ru],
    .fs-field-paid[b-5if4zcz2ru],
    .fs-field-change[b-5if4zcz2ru],
    .fs-field-total[b-5if4zcz2ru],
    .fs-field-card-code[b-5if4zcz2ru],
    .fs-field-payment-code[b-5if4zcz2ru] {
        grid-column: span 3;
    }

    .fs-field-cash-name[b-5if4zcz2ru],
    .fs-field-seller-name[b-5if4zcz2ru],
    .fs-field-client-name[b-5if4zcz2ru],
    .fs-field-card-name[b-5if4zcz2ru],
    .fs-field-payment-name[b-5if4zcz2ru] {
        grid-column: span 6;
    }

    .fs-payment-fields[b-5if4zcz2ru] {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .fs-field-paid[b-5if4zcz2ru],
    .fs-field-change[b-5if4zcz2ru],
    .fs-field-card-code[b-5if4zcz2ru],
    .fs-field-payment-code[b-5if4zcz2ru],
    .fs-field-company[b-5if4zcz2ru],
    .fs-field-prev-change[b-5if4zcz2ru] {
        grid-column: span 3;
    }

    .fs-field-card-name[b-5if4zcz2ru],
    .fs-field-payment-name[b-5if4zcz2ru] {
        grid-column: span 6;
    }

}

@media (max-width: 780px) {
    /* En estrecho el TPV deja de repartir el alto y crece con su contenido: el scroll lo lleva el área
       de trabajo, como el resto de páginas del ERP. */
    .fdp-page.fs-ticket-page[b-5if4zcz2ru] {
        block-size: auto;
        min-block-size: 100%;
    }

    .fs-ticket-header[b-5if4zcz2ru],
    .fdp-card-head[b-5if4zcz2ru] {
        align-items: stretch;
        flex-direction: column;
    }

    .fdp-title-block h1[b-5if4zcz2ru] {
        white-space: normal;
    }

    .fs-ticket-actions[b-5if4zcz2ru],
    .ff-mini-actions[b-5if4zcz2ru],
    .fs-bottom-actions[b-5if4zcz2ru] {
        inline-size: 100%;
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    }

    [b-5if4zcz2ru] .fs-ticket-actions .e-btn,
    [b-5if4zcz2ru] .fs-bottom-actions .e-btn {
        inline-size: 100%;
    }

    .fs-ticket-content[b-5if4zcz2ru] {
        overflow-y: auto;
        padding-inline-end: .1rem;
    }

    .fs-lines-card[b-5if4zcz2ru] {
        min-block-size: 22rem;
        flex: 0 0 auto;
    }

        .fs-lines-card > .fdp-card-body[b-5if4zcz2ru] {
            min-block-size: 20rem;
        }

    [b-5if4zcz2ru] .e-grid.ff-grid {
        min-inline-size: 62rem;
    }
}

@media (max-width: 520px) {
    .ff-mode-pick[b-5if4zcz2ru],
    .ff-mode-select[b-5if4zcz2ru] {
        inline-size: 100%;
    }
}

/* Misma entrada que el resto de páginas del ERP (compras, almacenes, movimientos). */
@keyframes fsPaginaIn-b-5if4zcz2ru {
    from {
        opacity: 0;
        transform: translateY(.35rem);
    }

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

@media (prefers-reduced-motion: reduce) {
    .fdp-page.fs-ticket-page[b-5if4zcz2ru] {
        animation: none !important;
    }
}

/* ── Aviso de «venta a medias» al salir (T7 con semántica de página) ─────────────────────────────
   Confirmación en línea, sobre la propia página: el que retiene NavigationLock. No es el chasis de
   modal que se acaba de quitar —es un diálogo de decisión, corto y centrado, sin nada que editar. */

.fs-leave-overlay[b-5if4zcz2ru] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}

.fs-leave-card[b-5if4zcz2ru] {
    inline-size: min(28rem, 92vw);
    padding: 1.25rem 1.35rem;
    border: 1px solid #e4e5ec;
    border-radius: .9rem;
    background: #ffffff;
    color: #1a1b22;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.fs-leave-title[b-5if4zcz2ru] {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.fs-leave-text[b-5if4zcz2ru] {
    margin: 0 0 1.1rem;
    color: #555766;
    font-size: .88rem;
    line-height: 1.45;
}

.fs-leave-actions[b-5if4zcz2ru] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.fs-leave-btn[b-5if4zcz2ru] {
    min-block-size: 2.25rem;
    padding: 0 .95rem;
    border: 1px solid #e4e5ec;
    border-radius: 8px;
    background: #ffffff;
    color: #1a1b22;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, filter .15s ease;
}

.fs-leave-btn-ghost[b-5if4zcz2ru] {
    color: #d33a3a;
    border-color: #f0c4c4;
}

    .fs-leave-btn-ghost:hover[b-5if4zcz2ru] {
        border-color: #d33a3a;
        background: #fdf3f3;
    }

.fs-leave-btn-primary[b-5if4zcz2ru] {
    border-color: #00288e;
    background: #00288e;
    color: #ffffff;
}

    .fs-leave-btn-primary:hover[b-5if4zcz2ru] {
        filter: brightness(.95);
    }

.fs-head-row[b-5if4zcz2ru] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .28fr);
    gap: var(--fdp-gap-sm);
    align-items: stretch; /* hace que el total tenga la misma altura que "Datos de venta" */
}

.fs-total-card[b-5if4zcz2ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1rem;
    border-color: #c7dcfb !important;
    background: #e8f0fe;
}

.fs-total-label[b-5if4zcz2ru] {
    color: var(--fdp-on-surface-variant);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fs-total-amount[b-5if4zcz2ru] {
    color: var(--fdp-primary);
    font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fdp-selector[b-5if4zcz2ru] {
    position: relative;
}

.fdp-selector-trigger[b-5if4zcz2ru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    text-align: start;
    cursor: pointer;
}

    .fdp-selector-trigger > span:first-child[b-5if4zcz2ru] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.fdp-selector-placeholder[b-5if4zcz2ru] {
    color: var(--fdp-outline);
}

.fdp-selector-icon[b-5if4zcz2ru] {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--fdp-on-surface-variant);
}
/* _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);
    }
}

.fpg-modal-input[b-msnhkl7lxj] {
    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 {
        color: #9aa6b2;
        font-weight: 500;
    }

    .fpg-modal-input:focus[b-msnhkl7lxj] {
        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/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;
}