/* Estilos para el contenedor principal */
#container-main--info {


  .container-main--header{


    .main-header {
      padding: 4px;
      display: flex;
      gap: 10px;
      border-bottom: 0.5px solid var(--color-border-S360);
      background-color: var(--color-td-level-3);
      width: 100%;

      .header-user {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 48.5%;

        .material-symbols-outlined {
          font-size: 22px;
          color: var(--color-bnt-consult-S360);
        }

        .input-rol{
          width: 100%;
          font-size: var(--font-size-normal-S360);
          color: var(--color-text);

          .basic-input{
            border: none;
            background-color: var(--background-S360);
            height: 25px;
          }
        }

        .name-rol{
          color: var(--color-bnt-consult-S360);
          font-size: var(--font-size-normal-S360);
          padding-left: 10px;
          padding-right: 10px;
          font-weight: 500;

        }
      }

      .header-user-ms {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 20%;

        .material-symbols-outlined {
          font-size: 22px;
          color: var(--color-bnt-consult-S360);
        }

        .input-rol{
          width: 100%;

          .basic-input{
            border: none;
            background-color: var(--background-S360);
            height: 25px;
          }
        }

        .name-rol{
          color: var(--color-bnt-consult-S360);
          font-size: var(--font-size-normal-S360);
          padding-left: 10px;
          padding-right: 10px;
          font-weight: 500;

        }
      }

      .header-selector {
        display: flex;
        align-items: center;
        width: 50%;

        .name-ctg{
          color: var(--color-bnt-consult-S360);
          padding-left: 10px;
          padding-right: 20px;
          font-weight: 500;
          font-size: var(--font-size-normal-S360);
        }

        .selector-ctg {
          width: 100%;
          .select-menu {
            .select-btn{
              border: none;
              height: 25px;
              .sBtn-text{
                padding-top: 0;
              }
            }
          }
        }
      }

      .header-selector-ms {
        display: flex;
        align-items: center;
        width: 50%;



        .name-ctg{
          color: var(--color-bnt-consult-S360);
          padding-left: 10px;
          padding-right: 20px;
          font-weight: 500;
          font-size: var(--font-size-normal-S360);
        }

        .selector-ctg {
          width: 100%;
          .select-menu {
            .select-btn{
              border: none;
              height: 25px;
              .sBtn-text{
                padding-top: 0;
              }
            }
          }
        }
      }
    }

    .table-info {
      margin: 4px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      border: 0.5px solid var(--color-border-S360);
      border-radius: var(--border-radius-S360);
      padding: 5px;

      /* margin-bottom: 10px; */

      .table-info-title{
        font-size: var(--font-size-normal-S360);
        font-weight: 600;
        color: var(--color-text-S360);
        padding-left: 10px;
      }

      .table-info-container{
        font-size: var(--font-size-normal-S360);
        color: var(--color-text-S360);

        .editable-description {
          font-size: var(--font-size-small-S360);
          padding: 5px;
          width: 100%;
          height: 35px;
          border: none;
          border-radius: 5px;
          background-color: var(--color-suite-background);
          color: var(--color-text);
          resize: unset;
          box-sizing: border-box;
        }
        .editable-description:focus {
          outline: none;
          border-color: none;
        }

      }
    }

  }


  .container-main-table{
    max-height: 100%;
  }

}

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  margin-right: 4px;

  .content-button{
    min-width: 140px;
    max-width: 15%;
    height: 30px;

    .button-opc{
      padding: 2px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

}