@mixin fullcont-mode-view-dark {
  // Inicio

  .mode-view {
    // --- Estilos para los botones de acción flotante (FAB) ---
    & > .fab-to-edit {
      position: absolute; // Corregido de 'display: absolute'
    }

    & > .fab-to-update,
    & > .fab-to-add {
      display: none;
    }

    & .fab-to-readOnly {
      transform: scale(0);
    }

    // --- Estilos base para la página ---
    & > .page {
      .row {
        pointer-events: none;

        & > div {
          pointer-events: none;
        }

        & > div > .card {
          pointer-events: auto !important;
        }
      }

      .checkbox > input {
        border-color: $md-dark-text-primary;
      }
    }

    // --- Estilos para el componente Textfield ---
    & .page .textfield {
      @include selectNo;
      font-family: roboto;

      & > .trailing,
      & > .helper,
      & > .counter,
      & > .indicador {
        display: none;
      }

      & > .elem {
        border-bottom: none;
        background: none;
        pointer-events: none;
        @include font(subtitle2, $d-f-lg);

        &::placeholder {
          opacity: 0;
        }
      }

      & > .label {
        @include font(caption, $d-f-lg);
        color: darken($md-dark-text-primary, 50%) !important;
        pointer-events: none;
      }

      .card .row & {
        &.c100 .textfield {
          background-color: $md-dark-surface !important;
          input::placeholder {
            color: $md-dark-text-primary !important;
          }
        }
        &.c50 .textfield .label {
          color: darken($md-dark-text-primary, 50%) !important;
        }
      }
    }

    & .page .radio {
      padding: 0px;
      min-height: 20px;
      margin-top: 2px;
      @include selectNo;

      & > div {
        margin-top: 0px;
        padding: 0px !important;
        min-height: 8px;

        & > label {
          margin-left: 8px;
          top: 2px;
          margin-right: 8px;
        }

        & > input {
          top: 0px;
          width: 18px;
          height: 18px;
          border-radius: 0px;
          border: 2px solid $c-w;
          opacity: 1;

          &::before {
            top: 2px;
            left: 2px;
            border-radius: 0%;
            width: 8px;
            height: 8px;
          }

          &:checked {
            background: $c-w url(svg/check.svg) no-repeat;
          }
        }
      }
    }

    // --- Estilos para el componente Checkbox ---
    & .page .checkbox {
      @include selectNo;

      & > input {
        border: 2px solid $c-b;
        opacity: 1;

        &:checked {
          background: $c-b url(svg/check.svg) no-repeat;
          &::before {
            display: none;
          }
        }

        &::before {
          opacity: 0;
          transform: scale(0);
        }
      }
    }

    // --- Estilos para la línea de firma ---
    & .page .signature-line {
      & label {
        display: none;
      }
      & span {
        visibility: visible;
      }

      &::after {
        position: absolute;
        display: inline-block;
        content: "";
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: transparent url("./svg/view.svg") no-repeat center;
        background-size: auto;
      }
    }

    // --- Estilos para el componente Multitable ---
    & .page .multitable {
      @include interaction-surface();

      &:hover {
        background-color: $d-e1 !important;
      }

      & > .cont {
        @include selectNo;

        & > .line {
          @include interaction-white;
          background-color: $md-dark-surface;

          & > .removeLine {
            display: none;
          }

          .checkbox-mini {
            label {
              margin-top: 2px;
            }
            input {
              margin-top: 1px;
            }
          }

          .textfield {
            top: 1px;
            height: 20px !important;

            & .elem {
              height: 20px !important;
              top: 2px;
              color: $md-dark-text-primary;
              left: 6px;
              background-color: $md-dark-surface;
            }

            & > .chip-cont {
              top: -16px;

              & > .chip {
                height: 16px;
                background: transparent;

                & > label {
                  left: 2px;
                  top: -4px;
                  font-size: 12px !important;
                  font-weight: 400 !important;
                  letter-spacing: 0.5px !important;
                }

                & > span {
                  display: none;
                }
              }
            }
          }
        }
      }

      & > .btn {
        @include selectNo;
      }
    }

    // --- Estilos para el componente Textfield Autocomplete ---
    & .page .textfield-autocomplete {
      & > .chip-cont {
        & > .chip {
          background: transparent;

          & > label {
            font-weight: 500 !important;
          }

          & > span {
            display: none; /* remove */
          }
        }

        & > .label {
          color: darken($md-dark-text-primary, 50%) !important;
        }

        & > .elem {
          color: $md-dark-text-primary;
          background-color: $md-dark-surface !important;
        }
      }
    }

    // --- Anulaciones y estilos específicos de la página ---
    & .page {
      .font-card-title {
        color: darken($md-dark-text-primary, 50%) !important;
      }

      // Anidaciones profundas refactorizadas para mayor claridad
      .multitable .line .row,
      .card .row,
      .row {
        .checkbox input[type="checkbox"] {
          border-color: $md-dark-text-primary !important;
        }

        .textfield .chip-cont .chip label,
        .textfield input {
          color: $md-dark-text-primary !important;
        }
      }

      .c100 {
        background-color: $md-dark-surface;
      }

      .c50 .card {
        &
          .row
          .c50
          .textfield
          input[type="date"]::-webkit-calendar-picker-indicator {
          filter: invert(1);
        }

        & .checkbox label {
          color: darken($md-dark-text-primary, 50%) !important;
        }

        & .checkbox input[type="checkbox"]:checked {
          background-color: $md-dark-text-primary !important;
        }
      }

      div .row .c14 .card,
      .c50 .row .c50 .card,
      div .pl-28 .row #cont_main .row .c100 {
        background-color: #121212;
      }

      div .pl-28 .row #cont_main .row .c100 .font-caption {
        color: darken($md-dark-text-primary, 50%) !important;
      }
    }
  }
  
  & .mt-8 {
    & .multitable {
      & .cont {
        & .line {
          background-color: $md-dark-surface;
          & .multitable-grid-purchase {
            & .multitable-flex-purchase {
              & .mx-5 {
                & .textfield {
                  & .textfield::after {
                    color: $md-dark-text-primary !important;
                  }
                  color: darken($md-dark-text-primary, 50%) !important;
                  & input {
                    color: $md-dark-text-primary !important;
                  }

                  & ::after {
                    color: $md-dark-text-primary !important;
                  }
                }
              }
              & .row {
                & .c66 {
                  & .textfield {
                    & .chip-cont {
                      & .chip {
                        & label {
                          color: darken($md-dark-text-primary, 50%) !important;
                        }
                      }
                    }
                  }
                }
                & .c33 {
                  & .textfield {
                    & .chip-cont {
                      & .chip {
                        & label {
                          color: darken($md-dark-text-primary, 50%) !important;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      & .cont-bottom {
        & .line {
          & .multitable-grid-purchase {
            & .multitable-flex-purchase {
              & .mx-title-5 {
                & .textfield {
                  & input {
                    color: $md-dark-text-primary !important;
                  }
                }
              }
            }
          }
          & .row {
            & .c25 {
              & .textfield {
                & input {
                  color: $md-dark-text-primary !important;
                }
              }
            }
          }
        }
      }
    }
    & .font-card-title {
      color: darken($md-dark-text-primary, 50%) !important;
    }

    & .row {
      & .c75 {
        & .row {
          & .c14 {
            & .card {
              background-color: #121212;
            }
          }
        }
      }
    }
  }
  & .pl-28 {
    & .multitable-grid-purchase {
      & .multitable-flex-purchase {
        & .mx-title-3 {
          & .font-caption {
            color: $md-dark-text-primary !important;
          }
        }
        & .mx-title-7 {
          & .font-caption {
            color: $md-dark-text-primary !important;
          }
        }
        & .mx-title-5 {
          & .font-caption {
            color: $md-dark-text-primary !important;
          }
        }
      }
    }

    & .row {
      & .c25 {
        & .font-caption {
          color: $md-dark-text-primary !important;
        }
      }
      & .c50 {
        & .row {
          & .c75 {
            & .font-caption {
              color: $md-dark-text-primary !important;
            }
          }
          & .c33 {
            & .font-caption {
              color: $md-dark-text-primary !important;
            }
          }
        }
      }
      & .c33 {
        & .font-caption {
          color: $md-dark-text-primary !important;
        }
      }
      & .c14 {
        & .font-caption {
          color: $md-dark-text-primary !important;
        }
      }
    }
  }
  & .mt-28 {
    & .card-click {
      background-color: #121212;
      & .row {
        & .c100 {
          background-color: #121212;
        }
      }
    }
  }

  // Fin
}