@import '_content/Recihub.Razor.Components/Recihub.Razor.Components.p1imugz7w3.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-p6t280ixdz] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-p6t280ixdz] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Pages/Admin/MenuBuilder.razor.rz.scp.css */
[b-9zsbfxrx4c] .menu-section {
    margin-bottom: 1rem;
}

[b-9zsbfxrx4c] .menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.2s ease!important;
}

    [b-9zsbfxrx4c] .menu-item:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

    [b-9zsbfxrx4c] .menu-item.selected {
        background-color: var(--mud-palette-primary-lighten);
    }

[b-9zsbfxrx4c] .menu-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* CSS EXPANSION PANELS ( Títulos filas principales ) */
[b-l8po1kcyjc] #dashboard-expansion-panel .mud-expand-panel.parent-expand-panel > .mud-expand-panel-header {
    padding: 0px;
}

[b-l8po1kcyjc] #dashboard-expansion-panel .mud-expand-panel.parent-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0px;
}
/* NOTA: Estilos para 'MudExpansionPanel' anidados: <MudExpansionPanel Class="nested-expand-panel" Expanded="true"> */
/* IMPORTANTE: añadir clase propia 'nested-expand-panel'*/
[b-l8po1kcyjc] #dashboard-expansion-panel .mud-expand-panel.nested-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}



/* CSS BUTTONS */
@media (max-width: 600px) {
    [b-l8po1kcyjc] .mud-button-root.mud-button {
        width: 100%;
        padding: 8px;
    }
}


/* CSS CARDS */
@media (max-width: 600px) {
    #dashboard[b-l8po1kcyjc]  .mud-card-header-content .mud-icon-root.mud-svg-icon {
        font-size: 3rem;
    }
}


/* CSS TABS ( ReciTabs ) */
/* Contenedor principal de las tabs */
/*::deep .mud-tabs {
    background-color: transparent;
    border: none;
}

::deep .mud-tabs-tabbar {
    background-color: transparent;
    border: none;
}*/


/* Barra de navegación de tabs */
/*::deep .mud-tabs-toolbar {
    padding: 0;
    margin-bottom: 0;
}*/

/* Ocultar línea indicadora de tab activa */
/*::deep .mud-tab-slider {
    display: none;
}*/

/* Pestañas individuales */
/*::deep .mud-tab {
    min-height: 48px;
    padding: 8px 24px;
    margin-right: 4px;
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background-color: transparent;
    color: var(--mud-palette-appbar-text);
    transition: all 0.2s ease;
    gap: 6px;
    font-weight: 500;
}

    ::deep .mud-tab:hover {
        color: var(--mud-palette-primary);
    }

    ::deep .mud-tab.mud-selected, ::deep .mud-tab-active, ::deep .mud-tab.mud-tab-active:hover {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
    }*/

/* Contenido de una Tab */
/*::deep .mud-tabs-panels {
    background-color: var(--mud-palette-surface);
    border-radius: 0px;*/
    /*min-height: 200px;*/
/*}*/
/* /Components/Pages/Instalaciones/Instalaciones_Form_DemoPage.razor.rz.scp.css */
/* CSS FORM ( ReciFormTemplate ) */

/* CSS OVERRIDES */
[b-qlx8dthvms] .checkbox-no-left-padding .mud-icon-button {
    padding-left: 0px;
    padding-bottom: 3px;
    padding-top: 3px;
}
/* Sobreescribe el estilo de navegadores chromoium al usar valores de tipo autocompletar en inputs */
/* El estilo original marca de color celeste el fondo del input. Lo sobreescribimos para evitar eso */
#FormTemplate[b-qlx8dthvms]  input:-webkit-autofill,
#FormTemplate[b-qlx8dthvms]  input:-webkit-autofill:hover,
#FormTemplate[b-qlx8dthvms]  input:-webkit-autofill:focus,
#FormTemplate[b-qlx8dthvms]  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--mud-palette-background) inset !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    background-color: deeppink !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Contenedor sección */
[b-qlx8dthvms] .mud-paper {
    position: relative;
    border-radius: var(--mud-default-borderradius);
    /*padding: 1.5rem;*/
}
    /* Encabezado ( Label ) de la sección */
    [b-qlx8dthvms] .mud-paper .mud-typography-h6 {
        font-weight: 500;
        color: var(--mud-palette-text-primary);
    }

/* Descripción de la sección */
[b-qlx8dthvms] .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

/* Contenedor base para campos */
.field-container[b-qlx8dthvms] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Permite que flexbox encoja el contenido */
}



/* CSS TABS ( ReciTabs ) */
/* Contenedor principal de las tabs */
[b-qlx8dthvms] .mud-tabs {
    background-color: transparent;
    border: none;
}

[b-qlx8dthvms] .mud-tabs-tabbar {
    background-color: transparent;
    border: none;
}


/* Barra de navegación de tabs */
[b-qlx8dthvms] .mud-tabs-toolbar {
    padding: 0;
    margin-bottom: 0;
}

/* Ocultar línea indicadora de tab activa */
[b-qlx8dthvms] .mud-tab-slider {
    display: none;
}

/* Pestañas individuales */
[b-qlx8dthvms] .mud-tab {
    min-height: 48px;
    padding: 8px 24px;
    margin-right: 4px;
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background-color: transparent;
    color: var(--mud-palette-appbar-text);
    transition: all 0.2s ease;
    gap: 6px;
    font-weight: 500;
}

    [b-qlx8dthvms] .mud-tab:hover {
        color: var(--mud-palette-primary);
    }

    [b-qlx8dthvms] .mud-tab.mud-selected, [b-qlx8dthvms] .mud-tab-active, [b-qlx8dthvms] .mud-tab.mud-tab-active:hover {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
    }

/* Contenido de una Tab */
[b-qlx8dthvms] .mud-tabs-panels {
    background-color: var(--mud-palette-surface);
    border-radius: 0px;
    /*min-height: 200px;*/
}


/* CSS SECCIONES ( ReciPageSection ) */
/* Contenedor sección */
[b-qlx8dthvms] .reci-form-group,
[b-qlx8dthvms] .reci-form-group .mud-input-label-outlined {
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

/* Form groups desplegables */
[b-qlx8dthvms] .reci-form-group .collapsible-btn {
    width: 100%;
}

[b-qlx8dthvms] .mud-typography-caption {
    color: var(--mud-palette-appbar-text);
}

/* CSS INPUTS ( ReciRenderFormField ) */
/* CSS Grid para distribución responsiva de campos (Auto-fit fluido)  */
/* 
   Uso: Grupos de inputs que se distribuyen automáticamente
   Comportamiento: Se adapta al espacio disponible, mínimo 320px por columna
   Ejemplo: Sección "Datos de la instalación" con múltiples campos
*/
.reci-fields-grid[b-qlx8dthvms] {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
    gap: 1rem;
}

/* CSS Grid para distribución responsiva de campos ( Grid de 2 columnas fijas ) */
/* 
   Uso: Bloques destacados que SIEMPRE deben estar lado a lado en desktop
   Comportamiento: 1 col en móvil, 2 cols fijas en desktop (no auto-fit)
   Ejemplo: "Datos del Cliente" y "Datos del Titular Firmante"
*/
.reci-fields-grid--two-cols[b-qlx8dthvms] {
    grid-template-columns: 1fr; /* Base: 1 columna */
}

#ReciSelectFacturarA[b-qlx8dthvms] {
    flex-grow: 0;
}

/* CONTENEDOR DE INPUTS (wrapper individual) */
/*
   Uso: Wrapper de cada input individual
   Propósito: Asegurar que los inputs respeten los límites del grid
*/
.reci-renderformfield[b-qlx8dthvms] {
    min-width: 0; /* Permite que flexbox/grid encoja el elemento */
    width: 100%;
}

    /* Forzar inputs de MudBlazor a respetar contenedor */
    .reci-renderformfield[b-qlx8dthvms]  .mud-input-root,
    .reci-renderformfield[b-qlx8dthvms]  .mud-input {
        width: 100%;
        max-width: 100%;
    }

/* Asterisco Label input requerido */
.reci-renderformfield[b-qlx8dthvms]  .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after,
.reci-renderformfield[b-qlx8dthvms]  label.reci-fileupload-required::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.25em;
    margin-bottom: 0.25em;
    background-color: var(--mud-palette-text-primary); /*var(--mud-palette-error);*/
    border-radius: 50%;
}

/* GRID INTERNO (dentro de bloques destacados) */
[b-qlx8dthvms] .reci-input-highlighted-area {
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background);
}
    /* 
       Uso: Inputs dentro de '.reci-input-highlighted-area'
       Comportamiento: SIEMPRE 1 columna ( vertical stack )
       Justificación: Los bloques destacados ya controlan el layout principal
    */
    [b-qlx8dthvms] .reci-input-highlighted-area .reci-fields-grid {
        grid-template-columns: 1fr !important; /* Fuerza 1 columna */
        gap: 0.75rem;
    }
    [b-qlx8dthvms] .reci-input-highlighted-area .mud-input-label-outlined {
        background-color: var(--mud-palette-background);
    }

/*** FILE UPLOAD ***/
[b-qlx8dthvms] .mud-file-upload .mud-paper,
[b-qlx8dthvms] .mud-paper.reci-dropzone-disabled {
    /*padding: 0;
    height: 80px;*/
}
/* Estilo para zona de drop deshabilitada */
[b-qlx8dthvms] .mud-paper.reci-dropzone-disabled {
    border-width: 2px !important;
    border-color: var(--mud-palette-background);
    background-color: var(--mud-palette-background);
}
/* Mejoras visuales para archivos cargados */
[b-qlx8dthvms] .file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mud-stack .d-flex.align-center.justify-space-between[b-qlx8dthvms] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

    .mud-stack .d-flex.align-center.justify-space-between:last-child[b-qlx8dthvms] {
        border-bottom: none;
        margin-bottom: 0;
    }
/* Loading Botón SUBIR */
[b-qlx8dthvms] .mud-progress-circular {
    color: inherit; 
}



/* CSS DATAGRIDS EMBEDIDOS ( ReciDataGrid ) */
/* TOOLBAR Filtros */
[b-qlx8dthvms] .mud-paper.toolbar-filters,
[b-qlx8dthvms] .mud-paper.toolbar-filters .mud-input-label-outlined {
    background-color: var(--mud-palette-background-gray);
}

/* DATAGRID */
/* Limita altura máxima si se listan demasiados registros */
[b-qlx8dthvms] .mud-table-container {
    /*min-height: fit-content;*/
    max-height: calc(100vh - 360px);
}
/* marcar filas con incidencias */
[b-qlx8dthvms] .row-with-incidencias .mud-table-cell {
    color: var(--mud-palette-error) !important;
    font-weight: 500;
}
/* Círculo total incidencias*/
[b-qlx8dthvms] .mud-chip.mud-chip-size-small {
    /*border-radius: 12px;
    font-size: 14px;
    height: 20px;
    padding: 0 6px;*/
}

[b-qlx8dthvms] .mud-chip-content {
    font-weight: 400;
}


/* =====================================================
   CSS PARA DATOS FISCALES - Grid de 3 columnas
   Ubicación: Instalaciones_Form_DemoPage.razor.css
   Añadir al final del archivo existente
   ===================================================== */


/* ─────────────────────────────────────────────────────
   GRID DE 3 COLUMNAS FIJAS
   Para los 3 bloques: Cliente, Titular, Facturación
   ───────────────────────────────────────────────────── */

/* Base: 1 columna (móvil) */
.reci-fields-grid--three-cols[b-qlx8dthvms] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}


/* ─────────────────────────────────────────────────────
   ESTILOS PARA CHECKBOX/RADIO DE SINCRONIZACIÓN
   ───────────────────────────────────────────────────── */

/* Contenedor del checkbox de sincronización */
.reci-checkbox-sync[b-qlx8dthvms] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 0.5rem;
}

    .reci-checkbox-sync[b-qlx8dthvms]  .mud-checkbox {
        margin: 0;
    }

    .reci-checkbox-sync[b-qlx8dthvms]  .mud-typography {
        font-size: 0.875rem;
        color: var(--mud-palette-text-secondary);
    }

/* Contenedor del radio group de sincronización */
.reci-radio-sync[b-qlx8dthvms] {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 0.5rem;
}

    .reci-radio-sync[b-qlx8dthvms]  .mud-radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .reci-radio-sync[b-qlx8dthvms]  .mud-radio {
        margin: 0;
        padding: 0.125rem 0;
    }

    .reci-radio-sync[b-qlx8dthvms]  .mud-radio-content {
        margin-left: 0.25rem;
    }

    .reci-radio-sync[b-qlx8dthvms]  .mud-typography-body2 {
        font-size: 0.8125rem;
        color: var(--mud-palette-text-secondary);
    }


/* ─────────────────────────────────────────────────────
   ESTADOS VISUALES PARA CAMPOS SINCRONIZADOS
   ───────────────────────────────────────────────────── */

/* Indicador visual cuando un campo está sincronizado (disabled) */
.reci-input-highlighted-area[b-qlx8dthvms]  .mud-input-control.mud-disabled {
    opacity: 0.85;
}

    .reci-input-highlighted-area[b-qlx8dthvms]  .mud-input-control.mud-disabled .mud-input {
        background-color: var(--mud-palette-background-gray);
    }

    /* Icono de "enlazado" para campos sincronizados */
    .reci-input-highlighted-area[b-qlx8dthvms]  .mud-input-control.mud-disabled .mud-input-adornment-end::after {
        content: "🔗";
        font-size: 0.75rem;
        opacity: 0.6;
        margin-left: 0.25rem;
    }


/* ─────────────────────────────────────────────────────
   MEJORAS EN BLOQUES DESTACADOS
   ───────────────────────────────────────────────────── */

/* Sombra sutil para distinguir bloques */
[b-qlx8dthvms] .reci-input-highlighted-area {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

    [b-qlx8dthvms] .reci-input-highlighted-area:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Título del bloque */
    [b-qlx8dthvms] .reci-input-highlighted-area .mud-typography-subtitle2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Caption/descripción del bloque */
    [b-qlx8dthvms] .reci-input-highlighted-area .mud-typography-caption {
        line-height: 1.3;
    }


/* RESPONSIVE BREAKPOINTS */

/* TABLET, DESKTOP */
@media (min-width: 960px) {

    /* CSS Grid para distribución responsiva de campos (Auto-fit fluido)  */
    /* Desktop: auto-fit fluido */
    .reci-fields-grid[b-qlx8dthvms] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: none;
    }

    /* CSS Grid para distribución responsiva de campos ( Grid de 2 columnas fijas ) */
    /* Desktop: 2 columnas fijas */
    .reci-fields-grid--two-cols[b-qlx8dthvms] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* CSS Grid para distribución responsiva de campos */
    /* Móvil: siempre 1 columna */
    .reci-fields-grid[b-qlx8dthvms] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (min-width: 600px) {
    /* BOTONES responsive DataGrid */
    .reci-datagrid[b-qlx8dthvms]  .mud-button-root {
        width: auto;
    }
    /* BUSCADOR responsive DataGrid */
    [b-qlx8dthvms] .reci-datagrid .reci-searchinput .mud-input {
        width: auto;
    }
}

/* MÓVIL */
@media (max-width: 600px) {
    /* BOTONES responsive FileUpload */
    .reci-renderformfield[b-qlx8dthvms]  .fileupload-button .mud-button-root {
        width: 100%;
        padding: 8px;
    }

    /* BOTONES responsive DataGrid */
    .reci-datagrid[b-qlx8dthvms]  .datagrid-button .mud-button-root,
    .reci-datagrid[b-qlx8dthvms]  .filter-button .mud-button-root {
        width: 100%;
        padding: 8px;
    }
    /* BUSCADOR responsive DataGrid */
    [b-qlx8dthvms] .reci-searchinput {
        width: 100%;
    }

    /* BOTONES con Icon Start */
    .reci-datagrid[b-qlx8dthvms]  .mud-button-label .mud-button-icon-start {
        display: none;
    }

    /* TOOLBAR FILTROS */
    [b-qlx8dthvms] .toolbar-filters .reci-renderformfield.field-multiselect {
        width: 100%;
        max-width: 100%;
    }

    .toolbar-filters .action-buttons[b-qlx8dthvms] {
        width: 100%;
    }

    /* DATAGRID */
    /* Limita altura máxima si se listan demasiados registros */
    [b-qlx8dthvms] .mud-table-container {
        max-height: calc(100vh - 410px);
    }
}

@media only screen and (max-height: 430px) and (orientation: landscape) {

    /* DATAGRID */
    /* Limita altura máxima si se listan demasiados registros */
    [b-qlx8dthvms] .mud-table-container {
        min-height: 300px;
    }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE: TABLET (2 columnas)
   ───────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Tablet: 2 columnas, el tercero ocupa fila completa */
    .reci-fields-grid--three-cols[b-qlx8dthvms] {
        grid-template-columns: repeat(2, 1fr);
    }

        /* El tercer bloque (Facturación) ocupa las 2 columnas */
        .reci-fields-grid--three-cols > div:nth-child(3)[b-qlx8dthvms] {
            grid-column: 1 / -1;
        }

    /* Ajuste de radio buttons en tablet */
    .reci-radio-sync[b-qlx8dthvms]  .mud-radio-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE: DESKTOP (3 columnas)
   ───────────────────────────────────────────────────── */

@media (min-width: 1200px) {

    /* Desktop: 3 columnas iguales */
    .reci-fields-grid--three-cols[b-qlx8dthvms] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Radio buttons en línea horizontal */
    .reci-radio-sync[b-qlx8dthvms]  .mud-radio-group {
        flex-direction: row;
        gap: 0.75rem;
    }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE: PANTALLAS GRANDES (> 1600px)
   ───────────────────────────────────────────────────── */

@media (min-width: 1600px) {

    /* Limitar ancho máximo para legibilidad */
    .reci-fields-grid--three-cols[b-qlx8dthvms] {
        max-width: 1800px;
    }

    /* Más espacio entre bloques */
    .reci-fields-grid--three-cols[b-qlx8dthvms] {
        gap: 1.5rem;
    }
}


/* ─────────────────────────────────────────────────────
   MÓVIL: Ajustes adicionales
   ───────────────────────────────────────────────────── */

@media (max-width: 600px) {

    /* Reducir padding en bloques */
    [b-qlx8dthvms] .reci-input-highlighted-area {
        padding: 0.75rem !important;
    }

    /* Checkbox más compacto */
    .reci-checkbox-sync[b-qlx8dthvms] {
        padding: 0.25rem 0;
    }

    /* Radio buttons verticales y más compactos */
    .reci-radio-sync[b-qlx8dthvms]  .mud-radio-group {
        gap: 0.125rem;
    }

    .reci-radio-sync[b-qlx8dthvms]  .mud-radio {
        padding: 0.0625rem 0;
    }
}


/* ─────────────────────────────────────────────────────
   ANIMACIONES SUTILES
   ───────────────────────────────────────────────────── */

/* Transición suave al habilitar/deshabilitar campos */
[b-qlx8dthvms] .reci-input-highlighted-area .mud-input-control {
    transition: opacity 0.2s ease, background-color 0.2s ease!important;
}

/* Animación al cambiar radio selection */
.reci-radio-sync[b-qlx8dthvms]  .mud-radio-icons {
    transition: transform 0.15s ease!important;
}

.reci-radio-sync[b-qlx8dthvms]  .mud-radio.mud-checked .mud-radio-icons {
    transform: scale(1.05)!important;
}
/* /Components/Pages/Preconexion/Preconexiones_Wizard.razor.rz.scp.css */
/* NAVEGACIONES STEPS */
[b-yggc29yqjc] .hide-on-mobile.mud-icon-button {padding:0;}

/* MudPaper ( transici� suau Elevation animat ) */
[b-yggc29yqjc] .mud-paper {
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
}

/* Mud divider ( dentro de un MudPaper ) */
[b-yggc29yqjc] .mud-divider {
    margin: 0;
    flex-shrink: 0;
    border-color: var(--mud-palette-background);
    border-width: 2px;
}

[b-yggc29yqjc] .numero-abonado-readonly .mud-card-content {
    color: var(--mud-palette-text-disabled);
    padding: 8px;
    background-color: rgba(0,0,0,.12);
    border-radius: var(--mud-default-borderradius);
}


/* DATAGRIDS */
/* CONTACTOS: Animación de resaltado para filas reordenadas/añadidas */
@keyframes row-highlight-blink-b-yggc29yqjc {
    0% {        
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-surface);
        font-weight: 700;
    }
    30% {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-surface);
        font-weight: 700;
    }

    100% {
        background-color: transparent;
    }
}

/* Clase para aplicar el resaltado */
[b-yggc29yqjc] .row-highlighted td {
    animation: row-highlight-blink-b-yggc29yqjc 1.2s ease-in-out;
}

/* GENERACIÓN CONTRATO */
/* CONTRATO: Animación de resaltado al regenerar contrato */
@keyframes contrato-highlight-blink-b-yggc29yqjc {
    0% {
        background-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px var(--mud-palette-primary);
    }
    30% {
        background-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px var(--mud-palette-primary);
    }
    100% {
        background-color: var(--mud-palette-background);
        box-shadow: none;
    }
}

[b-yggc29yqjc] .contrato-file-highlighted {
    animation: contrato-highlight-blink-b-yggc29yqjc 1.2s ease-in-out;
}

    [b-yggc29yqjc] .contrato-file-highlighted .mud-typography,
    [b-yggc29yqjc] .contrato-file-highlighted .mud-chip > .mud-chip-content {
        animation: contrato-text-flash-b-yggc29yqjc 1.2s ease-in-out;
    }

@keyframes contrato-text-flash-b-yggc29yqjc {
    0% {
        color: var(--mud-palette-surface);
        font-weight: 700;
    }
    30% {
        color: var(--mud-palette-surface);
        font-weight: 700;
    }
    100% {
        color: inherit;
        font-weight: inherit;
    }
}



/*** FILE UPLOAD ***/
/* Estilo para zona de drop deshabilitada */
[b-yggc29yqjc] .mud-paper.reci-dropzone-disabled {
    border-width: 2px !important;
    border-color: var(--mud-palette-background);
    background-color: var(--mud-palette-background);
}
/* Mejoras visuales para archivos cargados */
[b-yggc29yqjc] .file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
}



/* ============================================
   STEPPER CIRCULAR (TASK-607)
   ============================================ */

/* Contenedor principal del stepper */
[b-yggc29yqjc] .stepper-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 8px 0;
}

/* Cada item del stepper (línea + círculo) */
[b-yggc29yqjc] .stepper-item {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 80px;
    position: relative;
}

[b-yggc29yqjc] .stepper-item:first-child {
    flex: 0 0 auto;
}

/* Línea conectora entre círculos */
[b-yggc29yqjc] .stepper-line {
    flex: 1;
    height: 1.5px;
    background-color: var(--mud-palette-text-disabled); /*var(--mud-palette-lines-default);*/
    margin: 0 4px;
    min-width: 12px;
}

[b-yggc29yqjc] .stepper-line--active {
    background-color: var(--mud-palette-primary);
}

/* Círculo del step */
[b-yggc29yqjc] .stepper-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

/* Badge wrapper */
[b-yggc29yqjc] .stepper-badge {
    flex-shrink: 0;
}
    [b-yggc29yqjc] .stepper-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
        inset: auto auto calc(100% - 3px) calc(100% - 3px);
    }

/* ---- Estado: Bloqueado (gris, no clickable) ---- */
[b-yggc29yqjc] .step--blocked {
    cursor: not-allowed;
    opacity: 0.5;
}

    [b-yggc29yqjc] .step--blocked .stepper-circle {
        color: var(--mud-palette-text-disabled);
        background-color: var(--mud-palette-action-disabled);
    }

/* ---- Estado: Pendiente (desbloqueado, clickable, borde primario suave) ---- */
[b-yggc29yqjc] .step--pending {
    cursor: pointer;
}

    [b-yggc29yqjc] .step--pending .stepper-circle {
        /*background-color: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        border-color: var(--mud-palette-lines-default);*/
        color: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
    }

    [b-yggc29yqjc] .step--pending:hover .stepper-circle {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
    }

/* ---- Estado: Activo (fondo primario sólido, prominente) ---- */
[b-yggc29yqjc] .step--active {
    cursor: default;
}

    [b-yggc29yqjc] .step--active .stepper-circle {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        border-color: var(--mud-palette-primary);
        font-weight: 700;
        transform: scale(1.1);
    }

/* ---- Estado: Completado (check verde, clickable) ---- */
[b-yggc29yqjc] .step--completed {
    cursor: pointer;
}

    [b-yggc29yqjc] .step--completed .stepper-circle {
        background-color: var(--mud-palette-success);
        color: var(--mud-palette-success-text);
        border-color: var(--mud-palette-success);
    }

    [b-yggc29yqjc] .step--completed:hover .stepper-circle {
        opacity: 0.85;
    }

/* Barra de progreso */
[b-yggc29yqjc] .stepper-progress {
    padding: 4px 0 0;
}

/* ---- Responsive: visibilidad por breakpoint ---- */

/* Desktop (≥1024px): stepper completo visible */
[b-yggc29yqjc] .stepper-desktop { display: block; }
[b-yggc29yqjc] .stepper-tablet  { display: none; }
[b-yggc29yqjc] .stepper-mobile  { display: none; }

/* Tablet (768–1023px): compacto */
@media (max-width: 1023px) {
    [b-yggc29yqjc] .stepper-desktop { display: none; }
    [b-yggc29yqjc] .stepper-tablet  { display: block; }
    [b-yggc29yqjc] .stepper-mobile  { display: none; }
}

/* Mobile (<768px): texto simple */
@media (max-width: 767px) {
    [b-yggc29yqjc] .stepper-desktop { display: none; }
    [b-yggc29yqjc] .stepper-tablet  { display: none; }
    [b-yggc29yqjc] .stepper-mobile  { display: block; }
}


/* ANIMACIONES, FX */
[b-yggc29yqjc] .mud-tab-slider.mud-tab-slider-horizontal {
    transition: left .3s cubic-bezier(0.64, 0.09, 0.08, 1) !important;
}


/* ============================================
   OCULTAR/MOSTRAR POR BREAKPOINT (660px)
   ============================================ */

/* Clase para ocultar en m�vil (<660px) */
[b-yggc29yqjc] .hide-on-mobile {
    display: flex;
}

/* Clase para mostrar solo en m�vil (<660px) */
[b-yggc29yqjc] .show-on-mobile {
    display: none;
}


/* ============================================
   BREAKPOINT: M�VIL (<660px)
   ============================================ */

@media (max-width: 660px) {

    /* Ocultar elementos desktop */
    [b-yggc29yqjc] .hide-on-mobile {
        display: none !important;
    }

    /* Mostrar elementos m�vil */
    [b-yggc29yqjc] .show-on-mobile {
        display: flex !important;
        align-items: center;
    }

    [b-yggc29yqjc] #btn-back-step, [b-yggc29yqjc] #btn-back-step button,
    [b-yggc29yqjc] #btn-forward-step, [b-yggc29yqjc] #btn-forward-step button {
        width: 100%;
    }
}

/* HACK temporal mientras no resuelvo la responsividad masiva de todos los botones */
@media (max-width: 600px) {
    [b-yggc29yqjc] #btn-enviar-contrato .mud-button-root,
    [b-yggc29yqjc] #btn-alta-hub .mud-button-root,
    [b-yggc29yqjc] #btn-alta-sim .mud-button-root,
    [b-yggc29yqjc] #btn-add-contacto .mud-button-root,
    [b-yggc29yqjc] #btn-add-zona .mud-button-root,
    [b-yggc29yqjc] #btn-add-cctv .mud-button-root,
    [b-yggc29yqjc] #apply-facturarA .mud-button-root,
    [b-yggc29yqjc] #apply-periodicidad .mud-button-root,
    [b-yggc29yqjc] #Button .mud-button-root,
    [b-yggc29yqjc] #btn-descargar-contrato .mud-button-root,
    [b-yggc29yqjc] #btn-generar-contrato .mud-button-root {
    ::deep #btn-regenerar-contrato .mud-button-root {
        width: 100%;
        min-width: 100%;
    }
}
/* /Components/Pages/Preconexion/WizardInstalacion.razor.rz.scp.css */
/* CSS FORM ( ReciFormTemplate ) */
/* Contenedor sección */
[b-yp8as2y7re] .mud-paper {
    position: relative;
    border-radius: var(--mud-default-borderradius);
    /*padding: 1.5rem;*/
}
    /* Encabezado ( Label ) de la sección */
    [b-yp8as2y7re] .mud-paper .mud-typography-h6 {
        font-weight: 500;
        color: var(--mud-palette-text-primary);
    }

/* Descripción de la sección */
[b-yp8as2y7re] .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

/* Contenedor base para campos */
.field-container[b-yp8as2y7re] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Permite que flexbox encoja el contenido */
}



/* CSS TABS ( ReciTabs ) */
/* Contenedor principal de las tabs */
[b-yp8as2y7re] .mud-tabs {
    background-color: transparent;
    border: none;
}

[b-yp8as2y7re] .mud-tabs-tabbar {
    background-color: transparent;
    border: none;
}


/* Barra de navegación de tabs */
[b-yp8as2y7re] .mud-tabs-toolbar {
    padding: 0;
    margin-bottom: 0;
}

/* Ocultar línea indicadora de tab activa */
[b-yp8as2y7re] .mud-tab-slider {
    display: none;
}

/* Pestañas individuales */
[b-yp8as2y7re] .mud-tab {
    min-height: 48px;
    padding: 8px 24px;
    margin-right: 4px;
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background-color: transparent;
    color: var(--mud-palette-appbar-text);
    transition: all 0.2s ease;
    gap: 6px;
    font-weight: 500;
}

    [b-yp8as2y7re] .mud-tab:hover {
        color: var(--mud-palette-primary);
    }

    [b-yp8as2y7re] .mud-tab.mud-selected, [b-yp8as2y7re] .mud-tab-active, [b-yp8as2y7re] .mud-tab.mud-tab-active:hover {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
    }

/* Contenido de una Tab */
[b-yp8as2y7re] .mud-tabs-panels {
    background-color: var(--mud-palette-surface);
    border-radius: 0px;
    /*min-height: 200px;*/
}


/* CSS SECCIONES ( ReciPageSection ) */
/* Contenedor sección */
[b-yp8as2y7re] .reci-form-group,
[b-yp8as2y7re] .reci-form-group .mud-input-label-outlined {
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

    /* Form groups desplegables */
    [b-yp8as2y7re] .reci-form-group .collapsible-btn {
        width: 100%;
    }

[b-yp8as2y7re] .mud-typography-caption {
    color: var(--mud-palette-appbar-text);
}

/* CSS INPUTS ( ReciRenderFormField ) */
/* CSS Grid para distribución responsiva de campos */
.reci-fields-grid[b-yp8as2y7re] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* Asterisco Label input requerido */
.reci-renderformfield[b-yp8as2y7re]  .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after,
.reci-renderformfield[b-yp8as2y7re]  label.reci-fileupload-required::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.25em;
    margin-bottom: 0.25em;
    background-color: var(--mud-palette-error);
    border-radius: 50%;
}

/*** FILE UPLOAD ***/
[b-yp8as2y7re] .mud-file-upload .mud-paper,
[b-yp8as2y7re] .mud-paper.reci-dropzone-disabled {
    /*padding: 0;
    height: 80px;*/
}
/* Estilo para zona de drop deshabilitada */
[b-yp8as2y7re] .mud-paper.reci-dropzone-disabled {
    border-width: 2px !important;
    border-color: var(--mud-palette-background);
    background-color: var(--mud-palette-background);
}
/* Mejoras visuales para archivos cargados */
.mud-stack .d-flex.align-center.justify-space-between[b-yp8as2y7re] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

    .mud-stack .d-flex.align-center.justify-space-between:last-child[b-yp8as2y7re] {
        border-bottom: none;
        margin-bottom: 0;
    }
/* Loading Botón SUBIR */
[b-yp8as2y7re] .mud-progress-circular {
    color: inherit;
}



/* CSS DATAGRIDS EMBEDIDOS ( ReciDataGrid ) */
/* TOOLBAR Filtros */
[b-yp8as2y7re] .mud-paper.toolbar-filters,
[b-yp8as2y7re] .mud-paper.toolbar-filters .mud-input-label-outlined {
    background-color: var(--mud-palette-background-gray);
}

/* DATAGRID */
/* Limita altura máxima si se listan demasiados registros */
[b-yp8as2y7re] .mud-table-container {
    /*min-height: fit-content;*/
    max-height: calc(100vh - 360px);
}
/* marcar filas con incidencias */
[b-yp8as2y7re] .row-with-incidencias .mud-table-cell {
    color: var(--mud-palette-error) !important;
    font-weight: 500;
}
/* Círculo total incidencias*/
[b-yp8as2y7re] .mud-chip.mud-chip-size-small {
    /*border-radius: 12px;
    font-size: 14px;
    height: 20px;
    padding: 0 6px;*/
}

[b-yp8as2y7re] .mud-chip-content {
    font-weight: 400;
}


/* RESPONSIVE BREAKPOINTS */
@media (max-width: 768px) {
    .reci-fields-grid[b-yp8as2y7re] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (min-width: 1200px) {
    .reci-fields-grid[b-yp8as2y7re] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: none;
    }
}
/* TABLET, DESKTOP */
@media (min-width: 600px) {
    /* BOTONES responsive DataGrid */
    .reci-datagrid[b-yp8as2y7re]  .mud-button-root {
        width: auto;
    }
    /* BUSCADOR responsive DataGrid */
    [b-yp8as2y7re] .reci-datagrid .reci-searchinput .mud-input {
        width: auto;
    }
}
/* MÓVIL */
@media (max-width: 600px) {
    /* BOTONES responsive FileUpload */
    .reci-renderformfield[b-yp8as2y7re]  .fileupload-button .mud-button-root {
        width: 100%;
        padding: 8px;
    }

    /* BOTONES responsive DataGrid */
    .reci-datagrid[b-yp8as2y7re]  .datagrid-button .mud-button-root,
    .reci-datagrid[b-yp8as2y7re]  .filter-button .mud-button-root {
        width: 100%;
        padding: 8px;
    }
    /* BUSCADOR responsive DataGrid */
    [b-yp8as2y7re] .reci-searchinput {
        width: 100%;
    }

    /* BOTONES con Icon Start */
    .reci-datagrid[b-yp8as2y7re]  .mud-button-label .mud-button-icon-start {
        display: none;
    }

    /* TOOLBAR FILTROS */
    [b-yp8as2y7re] .toolbar-filters .reci-renderformfield.field-multiselect {
        width: 100%;
        max-width: 100%;
    }

    .toolbar-filters .action-buttons[b-yp8as2y7re] {
        width: 100%;
    }

    /* DATAGRID */
    /* Limita altura máxima si se listan demasiados registros */
    [b-yp8as2y7re] .mud-table-container {
        max-height: calc(100vh - 410px);
    }
}

@media only screen and (max-height: 430px) and (orientation: landscape) {

    /* DATAGRID */
    /* Limita altura máxima si se listan demasiados registros */
    [b-yp8as2y7re] .mud-table-container {
        min-height: 300px;
    }
}