@charset "UTF-8";

@import url('./material-design-iconic-font.min.css');
@import url('./normalize.css');
@import url('./bootstrap.min.css');
@import url('./sweetalert2.min.css');

@font-face{
    font-family: "Titulos";
    src: url("../fonts/AlegreyaSansSC-Regular.ttf"), url("../fonts/AlegreyaSansSC-Regular.eot"), url("../fonts/AlegreyaSansSC-Regular.woff"), url("../fonts/AlegreyaSansSC-Regular.woff2"), url("../fonts/AlegreyaSansSC-Regular.svg");
}
@font-face{
    font-family: "Parrafos";
    src: url("../fonts/OpenSans-CondLight.ttf"), url("../fonts/OpenSans-CondLight.eot"), url("../fonts/OpenSans-CondLight.woff"), url("../fonts/OpenSans-CondLight.woff2"), url("../fonts/OpenSans-CondLight.svg");
}


  :root {
    --mu-negro: #101722;
    --mu-grafito: #1b2532;
    --mu-grafito-claro: #354151;
    --mu-acento: #7186ff;
    --mu-acento-hover: #5c71eb;
    --mu-fondo: #f1f3f6;
    --mu-blanco: #ffffff;
    --mu-texto: #222b37;
    --mu-texto-suave: #77808e;
    --mu-borde: #e1e5eb;
    --mu-desactivado: #aeb5bf;
  }

  * {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
  }

  body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--mu-texto);
    background:
      radial-gradient(
        circle at 5% 15%,
        rgba(113, 134, 255, 0.08),
        transparent 24%
      ),
      radial-gradient(
        circle at 95% 90%,
        rgba(16, 23, 34, 0.08),
        transparent 26%
      ),
      var(--mu-fondo);

   /* font-family: "Segoe UI", Arial, sans-serif; */
  }


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    /*
    font-size: 16px;
    font-family: "Parrafos" !important;
    */
   /* background-color: #fff; */

    font-family: Source Sans Pro,sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;


     /* ir a la seccion suamente */
     scroll-behavior: smooth;


  }






  /* =====================================================
     UTILIDAD PARA OCUPAR TODO EL ANCHO
     ===================================================== */

  .full-width {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
  }


  /*=======================================================
   BOTONES DE OPCIONES
  ========================================================*/
  
.aui-application-list-generic-header {
  display:flex;
  grid-gap:16px;
  align-items:center;
  background-color:#f7f9fa;
  flex-wrap:wrap;
  justify-items:center;
  padding:16px
}

.aui-application-list-generic-header-button {
  display:flex;
  flex-grow:1;
  flex-wrap:wrap;
  gap:16px
}

.aui-kit-actionbutton-icon {
  height:16px;
  margin-right:5px;
  min-height:16px;
  min-width:16px;
  width:16px
}
.aui-kit-actionbutton-only-icon {
  padding:0 11px
}
.aui-kit-actionbutton-only-icon-icon {
  height:20px;
  margin:0;
  width:20px
}

.aui-kit-actionbutton-template-action-bar {
  align-items:center;
  background-color:#fff;
  border:1px solid #d2d7dc;
  border-radius:6px;
  color:#000;
  display:flex;
  height:36px;
  justify-content:center;
  padding:0;
  width:56px
}
.aui-kit-actionbutton-template-action-bar:hover {
  background-color:#fff;
  color:#000
}
.aui-kit-actionbutton-template-action-bar:active {
  background-color:#f0f1f3
}
.aui-kit-actionbutton-template-action-bar.aui-kit-actionbutton-disabled {
  background-color:#fff;
  color:#d2d7dc
}
.aui-kit-actionbutton-template-action-bar .aui-kit-actionbutton-icon {
  height:20px;
  margin:0;
  width:20px
}

@media(max-width:767.98px) {
  .aui-application-list-generic-header {
    align-items:flex-start;
    flex-direction:column
  }
}



/*=========================================
  PROCESOS COMUNES
=============================================*/

  .active
  {
    cursor: pointer;
  }

.noactive
{
   pointer-events: none;  /* desactiva clics */
  opacity: 0.5;
  color: #969393;
  
}




.loading {
    text-align: center;

}



#saving
{
  text-align: center;
  background-color: red;
  color: white;
  width: 100%;
  height: auto;
}



.lp-alert
{
  text-align: center;
  background-color: red;
  color: white;
  width: 100%;
  height: auto;
}


  /* =====================================================
     BARRA SUPERIOR
     ===================================================== */

  .navbar-user-top {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 82px;

    background:
      radial-gradient(
        circle at 20% 0%,
        rgba(113, 134, 255, 0.15),
        transparent 32%
      ),
      linear-gradient(
        115deg,
        #0d1621 0%,
        #283443 55%,
        #485363 100%
      );

    border-top: 2px solid rgba(113, 134, 255, 0.8);
    box-shadow: 0 8px 24px rgba(16, 23, 34, 0.18);
  }

  .navbar-user-top::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
  }

  .navbar-user-top ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 clamp(20px, 3vw, 52px);

    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
  }

  .navbar-user-top ul li {
    float: none !important;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Logo */
  .navbar-user-top ul li:first-child {
    order: 0;
    margin-right: auto;
  }

  .navbar-user-top ul li:first-child img {
    display: block;

    width: auto;
    height: 56px;
    max-width: 175px;
    margin: 0 !important;

    object-fit: contain;
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.2));
  }

  /* Orden de los botones */
  .navbar-user-top .btn-home {
    order: 1;
  }

  .navbar-user-top .btn-nav-user-action {
    order: 2;
  }

  .navbar-user-top .btn-exit-system {
    order: 3;
  }

  /* Botones del encabezado */
  .navbar-user-top .btn-home,
  .navbar-user-top .btn-nav-user-action,
  .navbar-user-top .btn-exit-system {
    width: 47px;
    height: 47px;

    color: rgba(255, 255, 255, 0.92);
    border: 1px solid transparent;
    border-radius: 13px;

    cursor: pointer;

    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  .navbar-user-top .btn-home:hover,
  .navbar-user-top .btn-nav-user-action:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
  }

  .navbar-user-top .btn-exit-system:hover {
    color: #ffffff;
    background: rgba(235, 65, 82, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  .navbar-user-top li i {
    display: block;
    margin: 0;

    font-size: 29px;
    line-height: 1;
  }

  /* =====================================================
     CONTENIDO PRINCIPAL
     ===================================================== */

  #main-desktop {
    width: 100%;
    max-width: 1700px;
    min-height: calc(100vh - 82px);
    margin: 0 auto !important;
    padding:
      clamp(28px, 3vw, 48px)
      clamp(18px, 3.5vw, 58px)
      55px !important;

    text-align: left !important;
  }

  /* Título creado desde CSS */
  #main-desktop::before {
    content: "Menú principal";

    display: block;
    margin-bottom: 25px;

    color: var(--mu-negro);
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.4px;
  }


  /* =====================================================
     CUADRÍCULA DEL MENÚ
     ===================================================== */

  #main-desktop .main-menu {
    width: 100%;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 23px;

    align-items: stretch;
  }

  /* =====================================================
     TARJETAS
     ===================================================== */

  #main-desktop .main-menu .tile {
    position: relative;
    isolation: isolate;

    float: none !important;
    width: auto !important;
    min-width: 0;
    height: 205px !important;
    margin: 0 !important;
    padding: 23px 20px 17px;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    color: var(--mu-texto);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--mu-borde) !important;
    border-radius: 17px;
    box-shadow:
      0 7px 20px rgba(16, 23, 34, 0.07),
      0 2px 5px rgba(16, 23, 34, 0.03);

    text-align: center;
    overflow: hidden;
    cursor: pointer;

    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      background-color 0.25s ease;
  }

  /* Línea de acento superior */
  #main-desktop .main-menu .tile::before {
    content: "";
    position: absolute;
    top: 0;
    right: 28%;
    left: 28%;

    height: 3px;

    background: var(--mu-acento);
    border-radius: 0 0 4px 4px;
    opacity: 0;

    transition:
      right 0.25s ease,
      left 0.25s ease,
      opacity 0.25s ease;
  }

  #main-desktop .main-menu .tile:hover {
    background: #ffffff;
    border-color: rgba(113, 134, 255, 0.42) !important;
    box-shadow:
      0 17px 35px rgba(16, 23, 34, 0.13),
      0 4px 9px rgba(16, 23, 34, 0.05);

    transform: translateY(-6px);
  }

  #main-desktop .main-menu .tile:hover::before {
    right: 0;
    left: 0;
    opacity: 1;
  }

  /* =====================================================
     ICONO DE LA TARJETA
     ===================================================== */

  #main-desktop .main-menu .tile-icon {
    flex: 0 0 auto !important;

    width: 67px !important;
    height: 67px !important;
    margin: 0 0 17px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;
    background:
      radial-gradient(
        circle at 25% 20%,
        rgba(255, 255, 255, 0.15),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        var(--mu-negro),
        var(--mu-grafito-claro)
      );

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 19px;
    box-shadow: 0 8px 17px rgba(16, 23, 34, 0.2);

    font-size: 0 !important;
    line-height: 1 !important;

    transition:
      transform 0.25s ease,
      background 0.25s ease,
      box-shadow 0.25s ease;
  }

  #main-desktop .main-menu .tile-icon i {
    display: block;

    color: #ffffff !important;
    font-size: 36px !important;
    line-height: 1 !important;

    transition: transform 0.25s ease;
  }

  #main-desktop .main-menu .tile:hover .tile-icon {
    background: linear-gradient(
      145deg,
      #42559d,
      var(--mu-acento)
    );

    box-shadow: 0 10px 22px rgba(92, 113, 235, 0.3);
    transform: translateY(-2px) rotate(-2deg);
  }

  #main-desktop .main-menu .tile:hover .tile-icon i {
    transform: scale(1.07);
  }

  /* =====================================================
     NOMBRE DE LA TARJETA
     ===================================================== */

  #main-desktop .main-menu .tile-name {
    flex: 0 0 auto !important;

    width: 100% !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 0 5px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    color: var(--mu-texto) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    font-size: 13px !important;
    font-weight: 750;
    line-height: 1.35 !important;
    letter-spacing: 0.35px;
    text-align: center;
    text-transform: uppercase;

    transition: color 0.2s ease;
  }

  #main-desktop .main-menu .tile:hover .tile-name {
    color: #33488f !important;
  }

  /* =====================================================
     PARTE INFERIOR: ABRIR MÓDULO
     ===================================================== */

  #main-desktop .main-menu .tile-num {
    flex: 0 0 auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 25px !important;
    margin: auto 0 0 !important;
    padding: 10px 3px 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    color: var(--mu-texto-suave) !important;
    background: transparent !important;
    border-top: 1px solid #edf0f3 !important;

    font-size: 10px !important;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    transition: color 0.2s ease;
  }

  #main-desktop .main-menu .tile-num::before {
    content: "Abrir módulo";
  }

  #main-desktop .main-menu .tile-num::after {
    content: "→";

    color: var(--mu-acento);
    font-size: 17px;
    font-weight: 700;

    transition: transform 0.2s ease;
  }

  #main-desktop .main-menu .tile:hover .tile-num {
    color: #4f5d72 !important;
  }

  #main-desktop .main-menu .tile:hover .tile-num::after {
    transform: translateX(4px);
  }

  /* =====================================================
     MÓDULO DESACTIVADO: AJUSTES
     ===================================================== */

  #main-desktop .main-menu .tile[data-href="ajustes"] {
    background: rgba(235, 238, 242, 0.85);
    border-color: #dfe3e8 !important;
    box-shadow: none;

    opacity: 0.72;
    cursor: not-allowed;
  }

  #main-desktop .main-menu .tile[data-href="ajustes"]::after {
    content: "No disponible";
    position: absolute;
    top: 12px;
    right: 12px;

    padding: 4px 7px;

    color: #737b87;
    background: #e1e5ea;
    border-radius: 20px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-icon {
    color: #ffffff !important;
    background: linear-gradient(
      145deg,
      #9aa2ad,
      #bec4cc
    );
    box-shadow: none;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-icon
    i {
    color: #ffffff !important;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-name {
    color: #818995 !important;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-num {
    color: #9da4ae !important;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-num::before {
    content: "Módulo desactivado";
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]
    .tile-num::after {
    content: "—";
    color: #9da4ae;
  }

  #main-desktop .main-menu .tile[data-href="ajustes"]:hover {
    border-color: #dfe3e8 !important;
    box-shadow: none;
    transform: none;
  }

  #main-desktop
    .main-menu
    .tile[data-href="ajustes"]:hover::before {
    opacity: 0;
  }

  /* =====================================================
     PANTALLAS MEDIANAS
     ===================================================== */

  @media (max-width: 1399px) {
    #main-desktop .main-menu {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px;
    }
  }

  @media (max-width: 1150px) {
    #main-desktop .main-menu {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* =====================================================
     TABLET
     ===================================================== */

  @media (max-width: 900px) {
    #main-desktop {
      padding: 30px 25px 45px !important;
    }

    #main-desktop .main-menu {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    #main-desktop .main-menu .tile {
      height: 195px !important;
    }
  }

  @media (max-width: 680px) {
    .navbar-user-top {
      height: 72px;
    }

    .navbar-user-top ul {
      padding: 0 15px;
      gap: 4px;
    }

    .navbar-user-top ul li:first-child img {
      width: auto;
      height: 46px;
      max-width: 135px;
    }

    .navbar-user-top .btn-home,
    .navbar-user-top .btn-nav-user-action,
    .navbar-user-top .btn-exit-system {
      width: 42px;
      height: 42px;
      border-radius: 11px;
    }

    .navbar-user-top li i {
      font-size: 25px;
    }

    #main-desktop {
      min-height: calc(100vh - 72px);
      padding: 25px 16px 40px !important;
    }

    #main-desktop::before {
      margin-bottom: 20px;
    }

    #main-desktop .main-menu {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #main-desktop .main-menu .tile {
      height: 182px !important;
      padding: 19px 13px 14px;
      border-radius: 14px;
    }

    #main-desktop .main-menu .tile-icon {
      width: 58px !important;
      height: 58px !important;
      margin-bottom: 14px !important;
      border-radius: 16px;
    }

    #main-desktop .main-menu .tile-icon i {
      font-size: 31px !important;
    }

    #main-desktop .main-menu .tile-name {
      min-height: 37px !important;
      padding: 0 !important;
      font-size: 11px !important;
      letter-spacing: 0.2px;
    }

    #main-desktop .main-menu .tile-num {
      padding-top: 8px !important;
      font-size: 8px !important;
      letter-spacing: 0.5px;
    }

    /* En móvil no elevamos la tarjeta */
    #main-desktop .main-menu .tile:hover {
      transform: none;
    }
  }

  /* =====================================================
     MÓVILES MUY PEQUEÑOS
     ===================================================== */

  @media (max-width: 390px) {
    .navbar-user-top ul {
      padding: 0 10px;
    }

    .navbar-user-top ul li:first-child img {
      height: 41px;
      max-width: 105px;
    }

    .navbar-user-top .btn-home,
    .navbar-user-top .btn-nav-user-action,
    .navbar-user-top .btn-exit-system {
      width: 38px;
      height: 38px;
    }

    .navbar-user-top li i {
      font-size: 23px;
    }

    #main-desktop {
      padding-right: 11px !important;
      padding-left: 11px !important;
    }

    #main-desktop .main-menu {
      gap: 10px;
    }

    #main-desktop .main-menu .tile {
      min-width: 0;
      height: 175px !important;
      padding-right: 9px;
      padding-left: 9px;
    }

    #main-desktop .main-menu .tile-name {
      font-size: 10px !important;
    }

    #main-desktop .main-menu .tile-num::before {
      content: "Abrir";
    }

    #main-desktop
      .main-menu
      .tile[data-href="ajustes"]
      .tile-num::before {
      content: "Desactivado";
    }
  }

  /* =====================================================
     ACCESIBILIDAD
     ===================================================== */

  @media (prefers-reduced-motion: reduce) {
    #main-desktop .main-menu .tile,
    #main-desktop .main-menu .tile-icon,
    #main-desktop .main-menu .tile-icon i,
    #main-desktop .main-menu .tile-num::after,
    .navbar-user-top li {
      transition: none !important;
    }
  }