<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-8" (click)="goBack(1)">
      Administrador del sistema<mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: calc(100% - 48px);">
    <mat-card-title style="text-align: center;" class="pv-16">Parámetros del sistema</mat-card-title>
    <mat-card-content>
      <div class="loader-container animated fadeIn fast" *ngIf="isLoading">
        <mat-spinner></mat-spinner>
        <h2 class="loader-label">Cargando...</h2>
      </div>
      <div class="error-container animated fadeIn" *ngIf="!isLoading && hasError">
        <mat-icon style="color: #e53935; transform: scale(5); margin: 48px;">error</mat-icon>
        <h1 style="color: #e53935;">¡Error!</h1>
        <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
      </div>
      <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
      <mat-tab-group class="animated fadeIn" *ngIf="!isLoading && !hasError">
        <!--<mat-tab label="Tema">
          <div class="theme-items-container">
            <div class="theme-item">
              <p class="mr-16" style="font-weight: 500;">Color primario del tema</p>
              <div class="principal-color-border mr-16" style="cursor: pointer;" (click)="openColorSelector('primary')">
                <div class="principal-color-fill" [style.background]="hexColorStr"></div>
              </div>
              <p class="mr-16">RGB <span [style.color]="hexColorStr" style="font-weight: 500;">{{ decColorStr }}</span></p>
              <p>HEX <span [style.color]="hexColorStr" style="font-weight: 500;">{{ hexColorStr }}</span></p>
            </div>
            <div class="theme-item">
              <p class="mr-16" style="font-weight: 500;">Color secundario del tema</p>
              <div class="principal-color-border mr-16">
                <div class="principal-color-fill" [style.background]="hexSecColorStr"></div>
              </div>
              <p class="mr-16">RGBA <span [style.color]="hexColorStr" style="font-weight: 500;">{{ decSecColorStr }}</span></p>
              <p>HEX <span [style.color]="hexColorStr" style="font-weight: 500;">{{ hexSecColorStr }}</span></p>
            </div>
            <div class="theme-item">
              <p class="mr-16" style="font-weight: 500;">Color primario de la fuente</p>
              <div class="principal-color-border mr-16" style="cursor: pointer;">
                <div class="principal-color-fill" [style.background]="primaryFontColor"></div>
              </div>
              <p class="mr-16">RGB <span [style.color]="primaryFontColor" style="font-weight: 500;">{{ primaryDecFontColor }}</span></p>
              <p>HEX <span [style.color]="primaryFontColor" style="font-weight: 500;">{{ primaryFontColor }}</span></p>
            </div>
            <div class="theme-item">
              <p class="mr-16" style="font-weight: 500;">Color secundario de la fuente</p>
              <div class="principal-color-border mr-16" style="cursor: pointer;">
                <div class="principal-color-fill" [style.background]="secondaryFontColor"></div>
              </div>
              <p class="mr-16">RGB <span [style.color]="primaryFontColor" style="font-weight: 500;">{{ secondaryDecFontColor }}</span></p>
              <p>HEX <span [style.color]="primaryFontColor" style="font-weight: 500;">{{ secondaryFontColor }}</span></p>
            </div>
          </div>
        </mat-tab>-->
        <mat-tab label="Login">
          <div class="login-options-container animated fadeIn" *ngIf="loginImagesEditEnabled">
            <div class="login-option">
              <div class="image-container" #tooltipImage="matTooltip" matTooltip="Cambiar imágen de inicio de sesión" 
              [matTooltipPositionAtOrigin]="true" (click)="imageHandler('img')">
                <img [src]="imgStr" *ngIf="!upImg"/>
                <div class="shine" *ngIf="upImg"></div>
              </div>
              <h2 style="text-align: center;">Imágen de inicio de sesión</h2>
            </div>
            <div class="login-option">
              <div class="image-container" #tooltipBack="matTooltip" matTooltip="Cambiar fondo del inicio de sesión" 
              [matTooltipPositionAtOrigin]="true" (click)="imageHandler('bac')">
                <img [src]="bacStr" *ngIf="!upBac"/>
                <div class="shine" *ngIf="upBac"></div>
              </div>
              <h2 style="text-align: center;">Fondo del inicio de sesión</h2>
            </div>
          </div>
          <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)" (cancel)="cancelHandle()">
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!loginImagesEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Módulos">
          <div class="form-pass-container animated fadeIn" *ngIf="modulesIconsEditEnabled">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="moduleNameModulesControl">
                  <mat-option *ngFor="let mod of modules" [value]="mod.ID_MODULO">
                    {{ mod.NOMBRE_MODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-slide-toggle class="mb-20" [formControl]="moduleCustomIconModulesControl" (change)="customIconStatusUpdated($event, 'M')">
                Icono personalizado
              </mat-slide-toggle>
            </div>
            <div class="element">
              @if (moduleCustomIconModulesControl.value) {
                <input type="file" name="custom_icon" class="hidden" #custom_icon (change)="checkFileSVG($event, 'M')"
                accept="image/svg+xml">
                <button mat-flat-button class="animated fadeIn mb-20" (click)="custom_icon.click()">
                  <mat-icon>upload</mat-icon> Cargar icono personalizado
                </button>
              } @else {
                <mat-form-field appearance="outline" class="animated fadeIn w-100">
                  <mat-label>Icono del módulo</mat-label>
                  <mat-select [formControl]="moduleIconModulesControl" #iconSel (valueChange)="updateModuleIcon(iconSel.value, 'M')">
                    <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                      <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                        <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                      </mat-option>
                    </mat-optgroup>
                  </mat-select>
                  <mat-hint align="end">
                    <a [ngClass]="{ hint_button_disabled: moduleIconModulesControl.disabled, 
                    hint_button: moduleIconModulesControl.enabled }" (click)="openGridIcons('M')">
                      Abrir diálogo de selección
                    </a>
                  </mat-hint>
                </mat-form-field>
              }
            </div>
            <div class="element">
              <mat-slide-toggle class="mb-20" (change)="changeModuleState($event)"  
              [formControl]="moduleStatusModulesControl">
                {{ moduleName.value == null ? 'Módulo apagado' : (modulesStates.get(moduleName.value) ? 'Módulo encendido' : 'Módulo apagado') }}
              </mat-slide-toggle>
            </div>
            @if (modulesModuleSelected != null) {
              <div class="element module_preview">
                @if (modulesModuleSelected.ICONO_PERSONALIZADO == 'S' && !uploadingCustomIcon) {
                  <mat-icon [svgIcon]="modulesModuleSelected.ICONO_MODULO"></mat-icon>
                } @else if(modulesModuleSelected.ICONO_PERSONALIZADO == 'N' && !uploadingCustomIcon) {
                  <mat-icon>{{ modulesModuleSelected.ICONO_MODULO }}</mat-icon>
                } @else {
                  <div class="icon_placeholder">
                    <div class="loader_container">
                    </div>
                  </div>
                }
                <p>{{ modulesModuleSelected.NOMBRE_MODULO }}</p>
              </div>
            }
            <div class="save-politics-container">
              <button mat-flat-button (click)="saveModules()" [disabled]="uploadingCustomIcon">
                Guardar configuración
              </button>
            </div>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!modulesIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Submódulos">
          <div class="form-pass-container animated fadeIn" *ngIf="submodulesIconsEditEnabled">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="moduleNameSubmodulesControl">
                  <mat-option *ngFor="let mod of modules" [value]="mod.ID_MODULO" [disabled]="!submodulesSettings.has(mod.ID_MODULO)">
                    {{ mod.NOMBRE_MODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del submódulo</mat-label>
                <mat-select [formControl]="submoduleNameSubmodulesControl">
                  <mat-option *ngFor="let submod of submodules.get(moduleNameSubmodulesControl.value!)" [value]="submod.IDSUBMODULO">
                    {{ submod.NOMBRESUBMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-slide-toggle class="mb-20" [formControl]="submoduleCustomIconSubmodulesControl" (change)="customIconStatusUpdated($event, 'S')">
                Icono personalizado
              </mat-slide-toggle>
            </div>
            <div class="element">
              @if (submoduleCustomIconSubmodulesControl.value) {
                <input type="file" name="custom_icon" class="hidden" #custom_icon_submod (change)="checkFileSVG($event, 'S')"
                accept="image/svg+xml">
                <button mat-flat-button class="animated fadeIn mb-20" (click)="custom_icon_submod.click()">
                  <mat-icon>upload</mat-icon> Cargar icono personalizado
                </button>
              } @else {
                <mat-form-field appearance="outline" class="animated fadeIn w-100">
                  <mat-label>Icono del submódulo</mat-label>
                  <mat-select [formControl]="submoduleIconSubmodulesControl" #iconSelSub (valueChange)="updateModuleIcon(iconSelSub.value, 'S')">
                    <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                      <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                        <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                      </mat-option>
                    </mat-optgroup>
                  </mat-select>
                  <mat-hint align="end">
                    <a [ngClass]="{ hint_button_disabled: submoduleIconSubmodulesControl.disabled, 
                    hint_button: submoduleIconSubmodulesControl.enabled }" (click)="openGridIcons('S')">
                      Abrir diálogo de selección
                    </a>
                  </mat-hint>
                </mat-form-field>
              }
            </div>
            @if (submodulesSubmoduleSelected != null) {
              <div class="element module_preview">
                @if (submodulesSubmoduleSelected.ICONO_PERSONALIZADO == 'S' && !uploadingCustomIcon) {
                  <mat-icon [svgIcon]="submodulesSubmoduleSelected.ICONOSUBMODULO"></mat-icon>
                } @else if (submodulesSubmoduleSelected.ICONO_PERSONALIZADO == 'N' && !uploadingCustomIcon) {
                  <mat-icon>{{ submodulesSubmoduleSelected.ICONOSUBMODULO }}</mat-icon>
                } @else {
                  <div class="icon_placeholder">
                    <div class="loader_container">
                    </div>
                  </div>
                }
                <p>{{ submodulesSubmoduleSelected.NOMBRESUBMODULO }}</p>
              </div>
            }
            <div class="save-politics-container">
              <button mat-flat-button (click)="saveSubmodules()" [disabled]="uploadingCustomIcon">
                Guardar configuración
              </button>
            </div>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!submodulesIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Funciones">
          <div class="form-pass-container animated fadeIn" *ngIf="functionsIconsEditEnabled">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="moduleNameFunctionsControl">
                  <mat-option *ngFor="let mod of modules" [value]="mod.ID_MODULO">
                    {{ mod.NOMBRE_MODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            @if (moduleNameFunctionsControl.value == null || moduleNameFunctionsControl.value == undefined || moduleNameFunctionsControl.value == '' || submodules.has(moduleNameFunctionsControl.value!)) {
              <div class="element animated fadeIn">
                <mat-form-field appearance="outline" style="width: 100%;">
                  <mat-label>Nombre del submódulo</mat-label>
                  <mat-select [formControl]="submoduleNameFunctionsControl">
                    <mat-option *ngFor="let submod of submodules.get(moduleNameFunctionsControl.value!)" [value]="submod.IDSUBMODULO">
                      {{ submod.NOMBRESUBMODULO }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            }
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre de la función</mat-label>
                <mat-select [formControl]="functionNameFunctionsControl">
                  @if (functionsPerSubmodule.has(moduleNameFunctionsControl.value!)) {
                    @if (functionsPerSubmodule.get(moduleNameFunctionsControl.value!)!.has(submoduleNameFunctionsControl.value!)) {
                      <mat-option *ngFor="let func of functionsPerSubmodule.get(moduleNameFunctionsControl.value!)!.get(submoduleNameFunctionsControl.value!)" [value]="func.IDFUNCION">
                        {{ func.NOMBREFUNCION }}
                      </mat-option>
                    }
                  } @else if (functionsPerModule.has(moduleNameFunctionsControl.value!)) {
                    <mat-option *ngFor="let func of functionsPerModule.get(moduleNameFunctionsControl.value!)" [value]="func.IDFUNCION">
                      {{ func.NOMBREFUNCION }}
                    </mat-option>
                  } @else {
                    <mat-option [disabled]="true">No se encontraron opciones.</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-slide-toggle class="mb-20" [formControl]="functionCustomIconFunctionsControl" (change)="customIconStatusUpdated($event, 'F')">
                Icono personalizado
              </mat-slide-toggle>
            </div>
            <div class="element">
              @if (functionCustomIconFunctionsControl.value) {
                <input type="file" name="custom_icon" class="hidden" #custom_icon_func (change)="checkFileSVG($event, 'F')"
                accept="image/svg+xml">
                <button mat-flat-button class="animated fadeIn mb-20" (click)="custom_icon_func.click()">
                  <mat-icon>upload</mat-icon> Cargar icono personalizado
                </button>
              } @else {
                <mat-form-field appearance="outline" class="animated fadeIn w-100">
                  <mat-label>Icono de la función</mat-label>
                  <mat-select [formControl]="functionIconFunctionsControl" #iconSelFun (valueChange)="updateModuleIcon(iconSelFun.value, 'F')">
                    <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                      <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                        <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                      </mat-option>
                    </mat-optgroup>
                  </mat-select>
                  <mat-hint align="end">
                    <a [ngClass]="{ hint_button_disabled: functionIconFunctionsControl.disabled, 
                    hint_button: functionIconFunctionsControl.enabled }" (click)="openGridIcons('F')">
                      Abrir diálogo de selección
                    </a>
                  </mat-hint>
                </mat-form-field>
              }
            </div>
            @if (functionsFunctionSelected != null) {
              <div class="element module_preview">
                @if (functionsFunctionSelected.ICONO_PERSONALIZADO == 'S' && !uploadingCustomIcon) {
                  <mat-icon [svgIcon]="functionsFunctionSelected.ICONOFUNCION"></mat-icon>
                } @else if (functionsFunctionSelected.ICONO_PERSONALIZADO == 'N' && !uploadingCustomIcon) {
                  <mat-icon>{{ functionsFunctionSelected.ICONOFUNCION }}</mat-icon>
                } @else {
                  <div class="icon_placeholder">
                    <div class="loader_container">
                    </div>
                  </div>
                }
                <p>{{ functionsFunctionSelected.NOMBREFUNCION }}</p>
              </div>
            }
            <div class="save-politics-container">
              <button mat-flat-button (click)="saveFunctions()" [disabled]="uploadingCustomIcon">
                Guardar configuración
              </button>
            </div>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!functionsIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Prioridades de las órdenes de mantenimiento">
          <div class="order-priorities-container animated fadeIn" *ngIf="orderPrioritiesEnabled">
            <div class="order-priorities-row">
              <mat-form-field appearance="outline" style="width: 320px;">
                <mat-label>Prioridad</mat-label>
                <mat-select value="1" #priority>
                  <mat-option *ngFor="let priority of orderPrioritiesArr" [value]="priority.value">
                    {{ priority.value }} - <span [style.color]="priority.color" style="font-weight: 500;">{{ priority.label }}</span>
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <button mat-button color="primary" style="margin: 0 0 22px 8px;" (click)="editPriority(priority.value)">Editar prioridad</button>
            </div>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!orderPrioritiesEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Edición de formularios">
          <div class="form-pass-container animated fadeIn" *ngIf="formsManagementEnabled">
            <section class="override-section">
              <nav class="override-nav">
                <div class="override-actions pt-8">
                  <mat-form-field appearance="outline" class="w-300p mr-8">
                    <mat-label>Buscador</mat-label>
                    <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')" placeholder="Ingrese la palabra a buscar" />
                    <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
                    <mat-icon *ngIf="txtBuscador.length > 0" class="clickable" matTooltip="Eliminar filtro" (click)="applyFilter('', 'EST')" matSuffix>close</mat-icon>
                  </mat-form-field>
                  <div class="override-buttons">
                    <app-btn-resize 
                      class="mr-8"
                      (click)="openForm('R')"
                      [disabled]="isLoading || isLoadingForm"
                      backgroundColor="primary" 
                      textColor="white_font" 
                      nameButton="Nuevo" 
                      [icon]="'add'"/>

                    <button mat-mini-fab class="orange_primary_background white_font override_no_shadow mr-10" matTooltip="Actualizar datos" (click)="obtenerFormularios()">
                      <mat-icon>refresh</mat-icon>
                    </button>
                  </div>
                </div>
              </nav>

              <div>
                <div class="is-loading animated fadeIn fast" *ngIf="isLoadingFormDynamic">
                  <mat-spinner align="center"></mat-spinner>
                  <h3>Cargando datos ...</h3>
                </div>
              </div>

              <div class="override-table">
                <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" *ngIf="!isLoadingFormDynamic">
                  <ng-container matColumnDef="CODIGO_FORMULARIO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Código del formulario</th>
                    <td mat-cell *matCellDef="let element">#{{ element.CODIGO_FORMULARIO }}</td>
                  </ng-container>
                  <ng-container matColumnDef="TITULO_REGISTRO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Título de registro</th>
                    <td mat-cell *matCellDef="let element">{{ element.TITULO_REGISTRO }}</td>
                  </ng-container>
                  <ng-container matColumnDef="TITULO_MODIFICACION">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Título de modificación</th>
                    <td mat-cell *matCellDef="let element">{{ element.TITULO_MODIFICACION }}</td>
                  </ng-container>
        
                  <ng-container matColumnDef="MODULO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Módulo</th>
                    <td mat-cell *matCellDef="let element">{{ element.MODULO }}</td>
                  </ng-container>
        
                  <ng-container matColumnDef="FECHA_MODIFICA">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Última modificación</th>
                      <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICA }} </td>
                  </ng-container>
        
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
                    <td mat-cell *matCellDef="let element">
                      <button mat-flat-button class="white_font " [class]="chipColor(element.ESTADO)">
                        {{ element.ESTADO }}
                      </button>
                    </td>
                  </ng-container>
        
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef>Acciones</th>
                    <td mat-cell *matCellDef="let element">
                      <button
                        mat-mini-fab
                        color="primary"
                        class="override_no_shadow mr-4 orange_primary_background white_font"
                        [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm"
                        (click)="openForm('M', element.CODIGO_FORMULARIO)"
                        matTooltip="Editar">
                        <mat-icon>edit</mat-icon>
                      </button>
                    </td>
                  </ng-container>
        
                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        
                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-20 align-center" colspan="12">
                      <object data="assets/img/empty_data.svg" width="150"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </section>
            <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator" style="width:100%"></mat-paginator>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!formsManagementEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Información fiscal">
          <div style="overflow: auto; height: calc(100vh - 330px);" class="animated fadeIn" *ngIf="taxInformationEnabled">
            <form class="override_content_flex" [formGroup]="formGroupTax">

              <div class="col-flex-12">
                <span class="title-card">Información Fiscal</span>
              </div>

              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Nombre Fiscal</mat-label>
                  <input matInput formControlName="NOMBRE_FISCAL">
                  <mat-icon matSuffix>business</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NOMBRE_FISCAL'].hasError('required')" title="El campo Nombre Fiscal es obligatorio.">El campo <b>Nombre Fiscal</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>R.F.C.</mat-label>
                  <input matInput formControlName="RFC" onkeyup="this.value = this.value.toUpperCase();">
                  <mat-icon matSuffix>subtitles</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['RFC'].hasError('required')" title="El campo R.F.C. es obligatorio.">El campo <b>R.F.C.</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupTax.controls['RFC'].hasError('pattern')" title="El campo R.F.C. no es válido.">El campo <b>R.F.C.</b> no es válido.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Correo Electrónico</mat-label>
                  <input matInput formControlName="CORREO_ELECTRONICO">
                  <mat-icon matSuffix>email</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['CORREO_ELECTRONICO'].hasError('required')" title="El campo Correo electrónico es obligatorio.">El campo <b>Correo Electrónico</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupTax.controls['CORREO_ELECTRONICO'].hasError('email')" title="El campo Correo electrónico no es válido.">El campo <b>Correo Electrónico</b> no es válido.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Régimen Fiscal</mat-label>
                  <input matInput placeholder="Ingrese su Régimen Fiscal" [matAutocomplete]="autocompleteTaxRegime" formControlName="REGIMEN_FISCAL">
                  <mat-autocomplete autoActiveFirstOption #autocompleteTaxRegime>
                    <mat-option *ngFor="let taxRegimeStr of filteredTaxRegime | async" [value]="taxRegimeStr">
                      {{ taxRegimeStr }}
                    </mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>account_balance_wallet</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['REGIMEN_FISCAL'].hasError('required')" title="El campo Régimen Fiscal es obligatorio.">El campo <b>Régimen Fiscal</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-1">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput formControlName="LADA1" [matAutocomplete]="autocompleteLada1">
                  <mat-autocomplete autoActiveFirstOption #autocompleteLada1>
                    <mat-option *ngFor="let lada1 of filteredLadas1 | async" [value]="lada1">
                      {{ lada1 }}
                    </mat-option>
                  </mat-autocomplete>
                  <mat-error *ngIf="formGroupTax.controls['LADA1'].hasError('required')" title="El campo Lada es obligatorio.">El campo <b>Lada</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Teléfono Fijo</mat-label>
                  <input matInput formControlName="TELEFONO_FIJO" type="number" maxlength="10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                  <mat-icon matSuffix>call</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TELEFONO_FIJO'].hasError('required')" title="El campo Teléfono Fijo es obligatorio.">El campo <b>Teléfono Fijo</b> es obligatorio.</mat-error>
                  <mat-hint align="end">{{ formGroupTax.controls['TELEFONO_FIJO'].value.toString().length }} /10</mat-hint>
                </mat-form-field>
              </div>
              <div class="col-flex-1">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput formControlName="LADA2" [matAutocomplete]="autocompleteLada2">
                  <mat-autocomplete autoActiveFirstOption #autocompleteLada2>
                    <mat-option *ngFor="let lada2 of filteredLadas2 | async" [value]="lada2">
                      {{ lada2 }}
                    </mat-option>
                  </mat-autocomplete>
                  <!-- <mat-icon matSuffix>tag</mat-icon> -->
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Teléfono Movil</mat-label>
                  <input matInput formControlName="TELEFONO_MOVIL" type="number" maxlength="10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                  <mat-icon matSuffix>smartphone</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TELEFONO_MOVIL'].hasError('required')" title="El campo Teléfono Movil es obligatorio.">El campo <b>Teléfono Movil</b> es obligatorio.</mat-error>
                  <mat-hint align="end">{{ formGroupTax.controls['TELEFONO_MOVIL'].value.toString().length }} / 10</mat-hint>
                </mat-form-field>
              </div>

              <div class="col-flex-12">
                <span class="title-card">Dirección Fiscal</span>
              </div>

              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Tipo de Vialidad</mat-label>
                  <mat-select formControlName="TIPOVIALIDAD">
                    <mat-option value="CALLE">Calle</mat-option>
                    <mat-option value="AVENIDA">Avenida</mat-option>
                    <mat-option value="BOULEVARD">Boulevard</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TIPOVIALIDAD'].hasError('required')" title="El campo Tipo de Vialidad es obligatorio.">El campo <b>Tipo de Vialidad</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Nombre de Vialidad</mat-label>
                  <input matInput formControlName="NOMBRE_VIALIDAD">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NOMBRE_VIALIDAD'].hasError('required')" title="El campo Nombre de Vialidad es obligatorio.">El campo <b>Nombre de Vialidad</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Número Exterior</mat-label>
                  <input matInput formControlName="NUMERO_EXTERIOR">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NUMERO_EXTERIOR'].hasError('required')" title="El campo Número Exterior es obligatorio.">El campo <b>Número Exterior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Número Interior</mat-label>
                  <input matInput formControlName="NUMERO_INTERIOR">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NUMERO_INTERIOR'].hasError('required')" title="El campo Número Interior es obligatorio.">El campo <b>Número Interior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Entre Calle</mat-label>
                  <input matInput formControlName="ENTRE_CALLE">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['ENTRE_CALLE'].hasError('required')" title="El campo Entre Calle es obligatorio.">El campo <b>Entre Calle</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Y Calle</mat-label>
                  <input matInput formControlName="Y_CALLE">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['Y_CALLE'].hasError('required')" title="El campo Y Calle es obligatorio.">El campo <b>Y Calle</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingAddress ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingAddress">
                  <mat-label>Código Postal</mat-label>
                  <input matInput formControlName="CODIGO_POSTAL" placeholder="" (ngModelChange)="searchZipCode()" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="5">
                  <mat-icon matSuffix>travel_explore</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['CODIGO_POSTAL'].hasError('required')" title="El campo Código Postal es obligatorio.">El campo <b>Código Postal</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingAddress"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingSettings ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingSettings">
                  <mat-label>Colonia</mat-label>
                  <input matInput formControlName="COLONIA" [matAutocomplete]="autocompleteSetting" (input)="checkColony()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteSetting (optionSelected)="checkColony()">
                    <mat-option *ngFor="let settingStr of filteredSettings | async" [value]="settingStr">{{ settingStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['COLONIA'].hasError('required')" title="El campo Colonia es obligatorio.">El campo <b>Colonia</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingSettings"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingTowns ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingTowns">
                  <mat-label>Localidad</mat-label>
                  <input matInput formControlName="LOCALIDAD" [matAutocomplete]="autocompleteTown">
                  <mat-autocomplete autoActiveFirstOption #autocompleteTown>
                    <mat-option *ngFor="let townStr of filteredTowns | async" [value]="townStr"> {{ townStr }} </mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['LOCALIDAD'].hasError('required')" title="El campo Localidad es obligatorio.">El campo <b>Localidad</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingTowns"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingCities ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingCities">
                  <mat-label>Municipio</mat-label>
                  <input matInput formControlName="MUNICIPIO" [matAutocomplete]="autocompleteCity" (input)="checkCity()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteCity (optionSelected)="checkCity()">
                    <mat-option *ngFor="let cityStr of filteredCities | async" [value]="cityStr">{{ cityStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['MUNICIPIO'].hasError('required')" title="El campo Municipio es obligatorio.">El campo <b>Municipio</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingCities"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingStates ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingStates">
                  <mat-label>Entidad Federativa</mat-label>
                  <input matInput formControlName="ENTIDAD_FEDERATIVA" [matAutocomplete]="autocompleteState" (input)="checkEntity()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteState (optionSelected)="checkEntity()">
                    <mat-option *ngFor="let stateStr of filteredStates | async" [value]="stateStr">{{ stateStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['ENTIDAD_FEDERATIVA'].hasError('required')" title="El campo Entidad es obligatorio.">El campo <b>Entidad</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingStates"></mat-progress-bar>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>País</mat-label>
                  <input matInput formControlName="PAIS" [matAutocomplete]="autocompleteCountry" (input)="checkIfAddress()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteCountry (optionSelected)="checkIfAddress()">
                    <mat-option *ngFor="let countryStr of filteredCountries | async" [value]="countryStr">{{ countryStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['PAIS'].hasError('required')" title="El campo País es obligatorio.">El campo <b>País</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-12" align="center">
                <button mat-flat-button class="raised-button-background white_font" [disabled]="formGroupTax.invalid" (click)="alert('CONFIRM')">
                  Guardar configuración
                </button>
              </div>
            </form>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!taxInformationEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Magnitudes y unidades">
          <div class="measures-units-container animated fadeIn" *ngIf="unitsMagnitudesEnabled">
            <div class="measures-container">
              <div class="measures-actions-container">
                <mat-form-field class="w-300p" appearance="outline">
                  <mat-label>Filtrar magnitudes</mat-label>
                  <input matInput #magnitudesFilt (input)="filterMagnitudesUnits(magnitudesFilt.value, 'input', 'magnitudes')" id="magnitudesFilt">
                  <mat-icon matSuffix *ngIf="magnitudesFilt.value == ''">search</mat-icon>
                  <button mat-icon-button matSuffix *ngIf="magnitudesFilt.value.length > 0" 
                  (click)="filterMagnitudesUnits(magnitudesFilt.value, 'clear', 'magnitudes')">
                    <mat-icon>close</mat-icon>
                  </button>
                </mat-form-field>
                <div class="measures-buttons-container">
                  <button mat-flat-button class="animated fadeIn raised-button-background" color="primary" (click)="openMagnitudeForm('nuevo')" *ngIf="!btnSmall" >
                    <mat-icon>add</mat-icon> Registrar magnitud
                  </button>
                  <button mat-mini-fab class="override_no_shadow animated fadeIn" color="primary" (click)="openMagnitudeForm('nuevo')" *ngIf="btnSmall " class="override_no_shadow raised-button-background"
                  matTooltip="Registrar magnitud">
                    <mat-icon>add</mat-icon>
                  </button>
                </div>
              </div>
              <div class="measures-titles">
                <div class="A"></div>
                <div class="B">Magnitud</div>
                <div class="C">Unidades</div>
                <div class="D">Acciones</div>
              </div>
              <mat-progress-bar mode="indeterminate" *ngIf="searchingMagnitudes" class="w-100"></mat-progress-bar>
              <div style="font-weight: 500; text-align: center;" *ngIf="magnitudes.length == 0 && !searchingMagnitudes">
                No se encontraron magnitudes registradas.
              </div>
              <div *ngIf="magnitudes.length > 0 && !searchingMagnitudes" class="magnitudes-list-container">
                <mat-radio-group (change)="getUnitsByMagnitude($event)" #magnitudeSel>
                  <div class="magnitudes-list-item" *ngFor="let magnitude of magnitudes">
                    <div class="A">
                      <mat-radio-button [value]="magnitude.ID_MAGNITUD" [disabled]="searchingMagnitudes"></mat-radio-button>
                    </div>
                    <div class="B">{{ magnitude.MAGNITUD }}</div>
                    <div class="C">{{ magnitude.UNIDADES_RELACIONADAS }}</div>
                    <div class="D">
                      <button mat-mini-fab class="override_no_shadow mr-4 white_font orange_primary_background" color="primary" (click)="openMagnitudeForm('editar', magnitude.ID_MAGNITUD)">
                        <mat-icon>edit</mat-icon>
                      </button>
                      <button mat-mini-fab class="override_no_shadow white_font red_primary_background" color="warn" (click)="openDeleteAlertDialog('magnitude', magnitude.ID_MAGNITUD)">
                        <mat-icon>delete</mat-icon>
                      </button>
                    </div>
                  </div>
                </mat-radio-group>
              </div>
            </div>
            <div class="measures-container">
              <div class="measures-actions-container">
                <mat-form-field class="w-300p" appearance="outline">
                  <mat-label>Filtrar unidades</mat-label>
                  <input matInput #units (input)="filterMagnitudesUnits(units.value, 'input', 'units')" id="unitsFilt" 
                  [disabled]="magnitudeSelected == ''">
                  <mat-icon matSuffix *ngIf="units.value == ''">search</mat-icon>
                  <button mat-icon-button matSuffix *ngIf="units.value.length > 0" 
                  (click)="filterMagnitudesUnits(units.value, 'clear', 'units')">
                    <mat-icon>close</mat-icon>
                  </button>
                </mat-form-field>
                <div class="measures-buttons-container">
                  <button mat-flat-button class="animated fadeIn" color="primary" [disabled]="magnitudeSelected == ''" *ngIf="!btnSmall"  
                  (click)="openUnitForm('nuevo')">
                    <mat-icon>add</mat-icon> Registrar unidad
                  </button>
                  <button mat-mini-fab class="override_no_shadow animated fadeIn" color="primary" [disabled]="magnitudeSelected == ''" *ngIf="btnSmall" 
                  (click)="openUnitForm('nuevo')" matTooltip="Registrar unidad">
                    <mat-icon>add</mat-icon>
                  </button>
                </div>
              </div>
              <div class="measures-titles">
                <div class="E">Unidad</div>
                <div class="F">Acrónimo</div>
                <div class="G">Acciones</div>
              </div>
              <mat-progress-bar mode="indeterminate" *ngIf="searchingUnits" class="w-100"></mat-progress-bar>
              <div style="font-weight: 500; text-align: center;" *ngIf="magnitudeSelected == '' && !searchingUnits">
                Aún no se ha seleccionado ningúna magnitud
              </div>
              <div style="font-weight: 500; text-align: center;" *ngIf="magnitudeSelected != '' && unitsByMagnitude.length == 0 && !searchingUnits">
                No se encontraron unidades asociadas.
              </div>
              <div *ngIf="unitsByMagnitude.length > 0 && !searchingUnits" class="magnitudes-list-container">
                <div class="magnitudes-list-item" *ngFor="let unit of unitsByMagnitude">
                  <div class="E">{{ unit.NOMBRE_UNIDAD }}</div>
                  <div class="F">{{ unit.ACRONIMO_UNIDAD }}</div>
                  <div class="G">
                    <button mat-mini-fab color="primary" class="override_no_shadow mr-4" (click)="openUnitForm('editar', unit.ID_UNIDAD)">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-mini-fab color="warn" class="override_no_shadow" (click)="openDeleteAlertDialog('unit', unit.ID_UNIDAD)">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!unitsMagnitudesEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Planos de estaciones">
          <div class="plan-management">
            <div class="form-row w-100 pv-8">
              <div class="form-cell C04">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label>Estación</mat-label>
                  <mat-select #selectedStation (valueChange)="searchPlanes(selectedStation.value)">
                    @for(item of viaPositions; track item) {
                      @if(item.type == 'E') {
                        <mat-option [value]="item.stationInd">
                          {{ item.name }}
                        </mat-option>
                      }
                    }
                  </mat-select>
                </mat-form-field>
              </div>
              <div class="form-cell C02">
                <button mat-flat-button class="mb-20 w-100" (click)="openPlaneUploader(selectedStation.value)"
                [disabled]="selectedStation.value == null || selectedStation.value == undefined || selectedStation.value == '' || searchingStationPlans">
                  Agregar plano <mat-icon>add</mat-icon>
                </button>
              </div>
            </div>
            <h3 class="mh-16" style="text-align: center;" *ngIf="!searchingStationPlans && stationInd == null">
              Aún no se ha seleccionado ningúna estación.
            </h3>
            <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn fast" *ngIf="searchingStationPlans"></mat-progress-bar>
            <div class="w-100 plans-table-container" [ngClass]="{ hidden: searchingStationPlans || stationInd == null }">
              <table mat-table [dataSource]="stationPlanesDataSource" matSort class="animated fadeIn">
                <ng-container matColumnDef="ID">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
                  <td mat-cell *matCellDef="let element">#{{ element.ID_PLANO }}</td>
                </ng-container>

                <ng-container matColumnDef="ESTACION">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Estación</th>
                  <td mat-cell *matCellDef="let element">{{ element.ID_ESTACION }}</td>
                </ng-container>

                <ng-container matColumnDef="ARCHIVO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Archivo relacionado</th>
                  <td mat-cell *matCellDef="let element">{{ element.ARCHIVO_RELACIONADO }}</td>
                </ng-container>

                <ng-container matColumnDef="NIVEL">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Nivel</th>
                  <td mat-cell *matCellDef="let element">
                    @if (element.NIVEL == 'V') {
                      Vestíbulo
                    } @else if (element.NIVEL == 'A') {
                      Andén
                    } @else {
                      -
                    }
                  </td>
                </ng-container>
      
                <ng-container matColumnDef="ESTADO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
                  <td mat-cell *matCellDef="let element">
                    <button mat-flat-button class="white_font " [class]="chipColor(element.ESTADO)">
                      {{ element.ESTADO }}
                    </button>
                  </td>
                </ng-container>
      
                <ng-container matColumnDef="USUARIO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuario última modificación</th>
                  <td mat-cell *matCellDef="let element"> {{ element.USUARIO_MOD == null ? element.USUARIO_REG : element.USUARIO_MOD }} </td>
                </ng-container>
      
                <ng-container matColumnDef="FECHA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Última modificación</th>
                  <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICACION == null ? element.FECHA_REGISTRO : element.FECHA_MODIFICACION }} </td>
                </ng-container>
      
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef>Acciones</th>
                  <td mat-cell *matCellDef="let element">
                    <button mat-mini-fab color="primary" class="override_no_shadow mr-4 transparent_background gray_dark_font"  [disabled]="element.ESTADO == 'Eliminado'"
                    matTooltip="Ver opciones" [matMenuTriggerFor]="planesMenu">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #planesMenu>
                      <button mat-menu-item (click)="openPlaneViewer(element.ARCHIVO_RELACIONADO)">
                        <mat-icon>visibility</mat-icon>
                        <span>Abrir plano</span>
                      </button>
                      <button mat-menu-item>
                        <mat-icon>download</mat-icon>
                        <span>Descargar archivo</span>
                      </button>
                      <button mat-menu-item>
                        <mat-icon>block</mat-icon>
                        <span>Obsoletar</span>
                      </button>
                      <button mat-menu-item>
                        <mat-icon>delete</mat-icon>
                        <span>Elminar plano</span>
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
      
                <tr mat-header-row *matHeaderRowDef="stationPlanesDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: stationPlanesDisplayedColumns"></tr>
      
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell p-20 align-center" colspan="12">
                    <object data="assets/img/empty_data.svg" width="150"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>