@import url('fonts.css');

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Futura-Bold', sans-serif;
}

p,
label,
span,
a {
   font-family: 'Futura-Medium', sans-serif;
}

li {
   font-weight: 400;
   font-family: 'Futura-Medium', sans-serif;
}

body {
   background-color: #F5F5F5 !important;

}

.mw-auto {
   max-width: 150px !important;
   width: 100% !important;
   max-height: none !important;
}

.bg-concha {

   position: relative;
   background-image: url('../img/SHELL.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;

}
.log-cont{
      align-items: center;
   }
.trailer {
   background-size: cover;
   background-position: center !important;
   background-repeat: no-repeat;
   height: 100%;
}

.uno {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 150px;
}

.shell {
   position: absolute;
   bottom: 20px;
   right: 20px;
   width: 150px;
}


.form-control {
   font-size: 14px !important;
   font-weight: normal !important;
}

.sidenav {
   background-color: #FFC600 !important;
}

.f-14 {
   font-size: 14px;
   font-weight: normal;
}

.rojo-second {
   color: #C5000D;
}

/* colores */
:root {
   --wave-red: 220, 53, 69;
}

.navbar-main {
   display: none;
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_clientes.active .icon {
   background-image: linear-gradient(0deg, #ffb400 0%, #ffcc3f 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_rijino.active .icon {
   background-image: linear-gradient(0deg, #ff3b3b 0%, #ba0e0e4f 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_promotoras.active .icon {
   background-image: linear-gradient(0deg, #03ae3c 0%, #50cf0694 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_activaciones.active .icon {
   background-image: linear-gradient(0deg, #3bc1ff 0%, #0275aa 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_fachadas.active .icon {
   background-image: linear-gradient(0deg, #FFEB3B 0%, #d1a401 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_reembolsos.active .icon {
   background-image: linear-gradient(0deg, #FFEB3B 0%, #0000004f 90%);
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.btn_perfil.active .icon {
   background-image: linear-gradient(0deg, #a88bf3 0%, #6915c3d6 90%);
}

.btn_clientes_add {
   background-color: #ffb400;
   color: #000000;
}

.btn_clientes_add:hover {
   background-color: #ffcc3f;
   color: #000000;
}

.btn_rijino_add {
   background-color: #ff3b3b;
}

.btn_rijino_add:hover {
   background-color: #e10e0e !important;
}

.btn_promotoras_add {
   background-color: #17c651;
}

.btn_promotoras_add:hover {
   background-color: #40aa02 !important;
}

.btn_activaciones_add {
   background-color: #1797c6;
}

.btn_activaciones_add:hover {
   background-color: #0275aa !important;
}

.evidencias {
   margin: 0;
   padding: 0.5rem;
}

/* headers */
.card-header-line {
   display: flex;
   align-items: center;
   gap: 15px;
}

.header-line {
   flex-grow: 1;
   height: 3px;
   background: #f5b000;
   /* amarillo de la imagen */
   border-radius: 2px;
}


.card-inventario {
   display: flex;
   justify-content: space-between;
}

.img_inventario {
   max-height: 100px;
}

.bg-top {
   background: #ffffff;
   background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(250, 198, 2, 1) 100%);
}

.item-ppto h5 {
   border-radius: 1rem 1rem 0 0;
}

.item-ppto p {
   font-size: 20px;
   margin-bottom: 0;
}

.carditem-head {
   background-image: linear-gradient(310deg, #FF887B 0%, #DD1D21 100%);
}

.card-pricing {
   height: 100% !important;
   display: flex;
   flex-direction: column;
}

.card-body-flex {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.card-body-flex ul {
   flex-grow: 1;
}

.card-body-flex .btn {
   margin-top: auto;
}

/* titulos */
.title-section {
   color: #C5000D;
   font-size: 32px;
   font-family: 'Futura-Bold', sans-serif;
}

.title-form {
   color: #C5000D;
   font-size: 26px;
}

.dt-info {
   font-size: 12px;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current {
   background: transparent !important;
   border: none;
   font-size: 12px;
}

.bg-promos {
   background-image: linear-gradient(310deg, #0097A9 0%, #006B7B 100%);
}

.nav.nav-pills .nav-link.active {
   background-color: #FFC600 !important;
   font-family: 'Futura-Bold', sans-serif;
   color: #292929;
}

.nav.nav-pills .nav-link {
   font-size: 22px;
   background-color: #C0C0C0;
   color: #fff;
}

.bienvenido {
   color: #C5000D;
}

.burger {
   width: 28px;
   height: 22px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   cursor: pointer;
}

.burger span {
   display: block;
   height: 3px;
   width: 100%;
   background: #000;
   border-radius: 2px;
   transition: all 0.3s ease;
}

/* Estado activo = X */
.burger.active span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
   opacity: 0;
}

.burger.active span:nth-child(3) {
   transform: rotate(-45deg) translate(8px, -9px);
}



/* ===== MOBILE NAV ===== */
.mobile-navbar {
   display: none;
}

/* Sidebar default */
#sidenav-main {
   transition: all 0.3s ease;
}

.custom-tabs {
   display: flex;
   justify-content: center;
}

.tabs-container {
   position: relative;
   display: flex;
   background: #f9f9f9;
   border-radius: 50px;
   /* padding: 5px; */
   width: 100%;
   max-width: 600px;
}

.tab-btn {
   flex: 1;
   border: none;
   background: transparent;
   padding: 10px;
   border-radius: 50px;
   font-weight: 600;
   color: #a7a7a7;
   z-index: 2;
   transition: all 0.3s ease;
   cursor: pointer;
}

.tab-btn.active {
   color: #ff0404;
   font-family: 'Futura-Bold', sans-serif;
}

.tab-indicator {
   position: absolute;
   top: 5px;
   left: 5px;
   width: 50%;
   height: calc(100% - 10px);
   border-radius: 50px;
   transition: all 0.3s ease;
   z-index: 1;
}

.tab-content-box {
   display: none;
   animation: fadeIn 0.3s ease;
}

.tab-content-box.active {
   display: block;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(5px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}


/* MOBILE */
@media (max-width: 1100px) {

   /* Oculta sidebar por default */
   #sidenav-main {
      transform: translateX(-100%);
      position: fixed;
      z-index: 9999;
      width: 260px;
      height: 100vh;
      left: -20px;
      top: 35px;
   }

   .sidenav-header {
      display: none;
   }

   /* Sidebar activo */
   #sidenav-main.active {
      transform: translateX(0);
   }

   /* Overlay oscuro */
   .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 9998;
   }

   .sidebar-overlay.active {
      display: block;
   }

   /* Navbar mobile */
   .mobile-navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #FFC600;
      padding: 12px 16px;
      position: sticky;
      top: 0;
      z-index: 10000;
   }

   .mobile-navbar img {
      height: 35px;
   }

   .burger {
      font-size: 22px;
      cursor: pointer;
   }

   /* Ajuste contenido */
   .main-content {
      margin-left: 0 !important;
   }
}

@media (max-width: 980px) {
   .title-section {
      font-size: 24px;
   }
}

/* Estilos para el selector de acción - versión compacta */
#estatusSelect+.select2 {
   width: 250px !important;
   min-width: 200px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
   #estatusSelect+.select2 {
      width: 100% !important;
      min-width: auto;
   }
}

/* Mejorar la apariencia del select */
.select2-container--default .select2-selection--single {
   border-radius: 0.5rem !important;
   border-color: #d2d6da !important;
   height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 36px !important;
}

/* Estilo para registros no editables */
tr[data-status="aprobado"] .btn-edit-evidencia,
tr[data-status="rechazado"] .btn-edit-evidencia {
   display: none;
}

tr[data-status="aprobado"] td:last-child::before {
   content: "🔒 ";
   font-size: 12px;
   color: #28a745;
}

tr[data-status="rechazado"] td:last-child::before {
   content: "🔒 ";
   font-size: 12px;
   color: #dc3545;
}

/* Estilo para campos de solo lectura como texto plano */
.revision-field.readonly-mode {
   background-color: #f8f9fa !important;
   border: 1px solid #dee2e6 !important;
   color: #495057 !important;
   cursor: default !important;
}

.revision-field.readonly-mode:focus {
   outline: none !important;
   box-shadow: none !important;
   border-color: #dee2e6 !important;
}

@media (max-width: 640px) {
   .log-cont{
      flex-direction: column;
   }
   .trailer{
      height: 35%;
      background-image: url('../img/tmobile.jpg') !important;
   }
   .uno{display: none;}
   .shell{display: none;}
   .form-log{
      margin: 0 !important;
   }
   .salto{
      display: none;
   }
}