/*esta parte para mostrar las celdas en color dependiendo del edificio */


 /* ================================
   Colores institucionales por edificio
   ================================ */

/* Edificio 1 */
.color-ed1        { background-color: #109DFA; color: #fff; }   /* base */
.color-ed1-p1     { background-color: #46b3e2; color: #fff; }   /* piso 1 */
.color-ed1-p2     { background-color: #136eac; color: #fff; }   /* piso 2 */

/* Edificio 2 */
.color-ed2        { background-color: #48d1b6; color: #000; }   /* base */
.color-ed2-p1     { background-color: #94e6d7; color: #000; }   /* piso 1 */
.color-ed2-p2     { background-color: #28917c; color: #fff; }   /* piso 2 */

/* Default */
.color-default    { background-color: #dfcf41; color: #000; }

/* Nueva ubicación */
.color-nueva {
  font-weight: bold;
  color: #d35400;             /* naranja */
  background-color: #fbe5d6;  /* fondo suave */
}

/* ================================
   Colores especiales por tipo de movimiento
   ================================ */
.color-agotado        { background-color: coral; color: #fff; }
.color-venta          { background-color: #d4af77; color: #000; }
.color-venta-sociedad { background-color: #00FFFF; color: #000; }

/* ================================
   Highlight al seleccionar en desplegado
   (limitado a selects de inventario)
   ================================ */
select option:checked,
select option:selected {
  background-color: #10fa5e !important;
  color: #fff !important;
}

/* ================================
   Aplicación a <select> y <td>
   ================================ */

/* Edificio 1 */
select.color-ed1, td.color-ed1        { background-color: #109DFA; color: #fff; }
select.color-ed1-p1, td.color-ed1-p1 { background-color: #46b3e2; color: #fff; }
select.color-ed1-p2, td.color-ed1-p2 { background-color: #136eac; color: #fff; }

/* Edificio 2 */
select.color-ed2, td.color-ed2        { background-color: #48d1b6; color: #000; }
select.color-ed2-p1, td.color-ed2-p1 { background-color: #94e6d7; color: #000; }
select.color-ed2-p2, td.color-ed2-p2 { background-color: #28917c; color: #fff; }

/* Default */
select.color-default, td.color-default { background-color: #dfcf41; color: #000; }

/* Movimientos especiales */
td.color-agotado        { background-color: coral; color: #fff; }
td.color-venta          { background-color: #d4af77; color: #000; }
td.color-venta-sociedad { background-color: #00FFFF; color: #000; }

.pagetitle1 {
  position: fixed;
  top: 50px; /* ajusta según la altura de tu header principal */
  left: 0;
  width: 100%;
  background-color: #fff; /* color de fondo para que no se vea transparente */
  z-index: 999; /* asegura que quede encima del contenido */
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}


.kdlcover {
  height: 80px;
  background-image: url(../img/Kendal2020.png);
  background-position:center;
  background-size: contain;
  background-color: blue;
  background-blend-mode: normal;
  color: white;
}

.k-container2{
  width: 1600px;
  max-width: auto;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  }
.k-container1{
  width: 98%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  }

.k-container{
  width: 100%;
  max-width: auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:  0 ;
  background-image: url(../img/kdl_fondo.jpg);
    padding: 1px;
  }

.k-container .card{
  width: 260px;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 10px;
  border: #109DFA 2px solid;
  text-align: center;
  transition: all 0.25s;
}

.k-container .card:hover{
  transform: translateY(-15px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

.k-container .card img{
  width: 250px;
  height: 250px;
  align-items: center;
}

.k-container .card h3{
  font-weight: 600;
  margin: 0;
  padding:0;
  background-color: #109DFA;
  color: #fff;
}
.k-container .card n2{
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  padding:0;
  color: #000;
}
.k-container .card h4{
  font-weight: 400;
  margin: 0;
  background-color: #109DFA;
  color: #fff;
}

.k-container .card p{
  padding: 0;
  font-size: 16px;
  font-weight: 300;
  margin:0;
}

.k-container .card a {
  font-weight: 500;
  text-decoration: none;
  color: #3498db;
}


.k-container .card1{
  width: 260px;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 10px;
  /*border: #109DFA 2px solid;*/
  border: darkblue 2px solid;
  text-align: center;
  transition: all 0.25s;
  align-items: center;
}

.k-container .card1:hover{
  transform: translateY(-15px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

.k-container .card1 img{
  height: auto;
  width: 250px;
  border-color: blue;
  align-items: center;
}

.k-container .card1 h3{
  font-weight: 600;
  margin: 0;
  padding:0;
  background-color: #109DFA;
  color: #fff;
}
.k-container .card1 n2{
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  padding:0;
  color: #000;
}
.k-container .card1 h4{
  font-weight: 400;
  margin: 0;
  background-color: #109DFA;
  color: #fff;
}

.k-container .card1 p{
  padding: 0;
  font-size: 16px;
  font-weight: 300;
  margin:0;
}

.k-container .card1 a {
  font-weight: 500;
  text-decoration: none;
  color: #3498db;
}


.kdlcard-container{
  width: 100%;
  max-width: 1600px;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0 auto;
}



/*Encabezado del catalogo KDL 
Tarjeta Pequeña kdlcard
*/


.kdlcard{
padding: 2;
border: #109DFA 2px solid;
border-radius: 40px;
background-position:center;
background-size: cover;
background-color: white;
background-blend-mode: normal;
width: 270px;
height: 520px;
margin: 4px;
overflow: hidden;
/*Añadido por Julián para optimización del mostrado del botón carrito*/
position: relative;
}


.kdlcard-body{
padding: 0;
border-radius: 0;
overflow: hidden;
}

.kdlcard-img{
border:none;
height: auto;
max-width: 270px;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2px 2px;
}

.kdlcard img {
height: 260px;
max-width: 270px;
padding:2px;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
background-position:center;
}


.kdlcard-title{
border:none;
min-height: 2rem;
padding: 1px 1px;
background-color: #109DFA;
border-radius: 0;
background-position:center;
background-size: cover;
text-align:center;
color: white;
margin-bottom:0;
}

.kdlcard-titleAgo{
min-height: 1rem;
padding: 1px 1px;
background-color: #109DFA;
border-radius: 0;
background-position:center;
background-size: cover;
text-align:center;
color: #990000;
margin-bottom:0;
}

 
.kdlcard-titleDis{
min-height: 1rem;
padding: 1px 1px;
background-color: #109DFA;
border-radius: 0;
background-position:center;
background-size: cover;
text-align:center;
color: #00FF00;
margin-bottom:0;
}

.kdlcard-titlePreventa{
min-height: 1rem;
padding: 1px 1px;
background-color: #0f13c9;
border-radius: 0;
background-position:center;
background-size: cover;
text-align:center;
color: #00FF00;
margin-bottom:0;
}

.kdlcard-title-text{
  border:none;
  min-height: 2rem;
  padding: 1px 1px;
  
  border-radius: 0;
  background-position:center;
  background-size: cover;
  text-align:center;
  color: white;
  margin-bottom:0;
  }

.kdlcard-text{
padding: 1px 0 0 0;
min-height: 11rem;
background-color: lightgrey;
background-position:center;
background-size: cover;
border-radius: 0;
color: black;
text-align:center;
margin-bottom:0;
overflow: hidden;
}




/*Encabezado del catalogo KDL 
Tarjeta Grande kdlcard1
*/
.kdlcard1{
 padding: 5;
 border: #109DFA 2px solid;
 border-radius: 40px;
 background-position:center;
 background-size: cover;
 background-color: white;
 background-blend-mode: normal;
 width: 460px;
 height: 520px;
 margin: 4px;
 overflow: hidden;
 /*Añadido por Julián para optimización del mostrado del botón carrito*/
 position: relative;
}


.kdlcard1-body{
padding: 0;
border-radius: 0;
overflow: hidden;
}

.kdlcard1-img{
 border:none;
 max-height: 380px;
 width: auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding: 2px 2px;
 }

.kdlcard1 img {
 height: 260px;
 width: 520px;
 padding:2px;
display: inline-block;
 flex-wrap: wrap;
 justify-content: center;
 background-position:center;
 }


.kdlcard1-title{
border:none;
min-height: 2rem;
padding: 1px 1px;
background-color: #109DFA;
border-radius: 0;
background-position:center;
background-size: cover;
text-align:center;
color: white;
margin-bottom:0;
}


.kdl_cover {
  height: 200px;
  background-image: url(../img/Kendal2020.png);
  background-position:center;
  background-size: auto;
  background-color: rgba(0,0,0,0.5);
  background-blend-mode: darken;
  color: white;
}

.kdl_cover-small {
  height: 200px;
  background-position:center;
  background-blend-mode: normal;
  color: white;
}



.kdlcard2{
    padding: 0;
    border: #109DFA 2px solid;
    border-radius: 20px;
    background-position:center;
    background-size: cover;
    background-color: white;
    background-blend-mode: normal;
    width: 350px;
    height: auto;
    margin: 12px;
    overflow: hidden;
  }

  .kdlcard2-body{
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  }

  .kdlcard2-img{
  border:none;
  height: 320px;
  max-width: 300;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2px 2px;
  }

  .kdlcard2 img {
    height: 300px;
    max-width: 300;
    padding:2px;
    display: inline-block;
    flex-wrap: wrap;
    justify-content: center;
    background-position:center;
    }



    .kdlcard2-title{
    border:none;
    min-height: 2rem;
    padding: 1px;
    background-color: #109DFA;
    border-radius: 0;
    background-position:center;
    background-size: cover;
    text-align:center;
    color: white;
    margin-bottom:0;
    }

    .kdlcard2-titleAgo{
    min-height: 1rem;
    padding: 1px 1px;
    background-color: #109DFA;
    border-radius: 0;
    background-position:center;
    background-size: cover;
    text-align:center;
    color: #990000;
    margin-bottom:0;
    }

    .kdlcard2-titleDis{
    min-height: 1rem;
    padding: 1px 1px;
    background-color: #109DFA;
    border-radius: 0;
    background-position:center;
    background-size: cover;
    text-align:center;
    color: #00FF00;
    margin-bottom:0;
    }

    .kdlcard2-text{
    padding: 1px 0 0 0;
    min-height: 7rem;
    background-color: lightgrey;
    background-position:center;
    background-size: cover;
    border-radius: 0;
    color: black;
    text-align:center;
    margin:0;
    overflow: hidden;

    }

    .kdlcard2-boton{
      padding: 20px;
      height: auto;
      background-color: lightgrey;
      background-position:center;
      background-size: cover;
      border-radius: 0;
      color: red;
      text-align:center;
      margin-bottom:6;
      overflow: hidden;
      }


  /*esta parte para usar para el carrito, aca mostrara axistencias a gerente */
  .kdlcard_pedido{
  padding: 2;
  border: #575e5e 3px solid;
  border-radius: 15px;
  background-position:center;
  background-size: cover;
  background-color: white;
  background-blend-mode: normal;
  width: 270px;
  margin: 4px;
  display : none;
  }


  .kdlcard_pedido-titleAgo{
  min-height: 1rem;
  padding: 1px 1px;
  background-color: #c6c9c9;
  border-radius: 0;
  background-position:center;
  background-size: cover;
  text-align:center;
  color: #eb0a0a;
  margin-bottom:0;
  }


  .kdlcard_pedido-titleDis{
  min-height: 1rem;
  padding: 1px 1px;
  background-color: #575e5e;
  border-radius: 0;
  background-position:center;
  background-size: cover;
  text-align:center;
  color: #00FF00;
  margin-bottom:0;
  }

  .toggle-kdlcard_pedido {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-kdlcard_pedido:hover {
  background-color: #e0e0e0;
}


      /* Card para Inventario Intranet */

      .kdlinvcard {
        padding: 0;
        border: #109DFA 4px solid;
        border-radius: 20px;
        background-position:center;
        background-color: white;
        width: 100%;
        max-width: 420px;
        margin: 6px auto;
        display: flex;
        flex-direction: column;
      }

      
      .kdlinvcard-body{
        padding: 0;
        border-radius: 0;
        overflow: hidden;
      }

      .kdlinvcard-img{
        border:none;
        height: 380px;
        max-width: 380px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2px 2px;
        align-items: center;
      }

      .kdlinvcard img {
        height: 380px;
        max-width: 380px;
        padding:2px;
        display: inline-block;
        justify-content: center;
        background-position:center;
      }
    
      .kdlinvcard-text{
        padding: 1px 0 0 0;
        min-height: 7rem;
        background-color: lightgrey;
        background-position:center;
        background-size: cover;
        border-radius: 0;
        color: black;
        text-align:center;
        margin-top: 20px;
    
        }
    
        .kdlinvcard-title{
        border:none;
        min-height: 2rem;
        padding: 1px;
        background-color: #109DFA;
        border-radius: 0;
        background-position:center;
        background-size: cover;
        text-align:center;
        color: white;
        margin-bottom:0;
        }



      .kdlinvcard1{
        padding: 0;
        border: #109DFA 4px solid;
        border-radius: 20px;
        background-position:center;
        background-size: cover;
        background-color: white;
        background-blend-mode: normal;
        width: 320px;
        height: auto;
        margin: 2px;
        overflow: hidden;
      }

      .kdlinvcardT{
        padding: 0;
        border: #109DFA 4px solid;
        border-radius: 20px;
        background-position:center;
        background-size: cover;
        background-color: white;
        background-blend-mode: normal;
        width: auto;
        height: auto;
        margin: 2px;
        overflow: hidden;
      }
    
 
    


      .kdlinvcard1 img{
        border:none;
        height: auto;
        max-width: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2px 2px;
        align-items: center;
        }
    

    
        .kdlinvcard-titleAgo{
        min-height: 1rem;
        padding: 1px 1px;
        background-color: #109DFA;
        border-radius: 0;
        background-position:center;
        background-size: cover;
        text-align:center;
        color: #990000;
        margin-bottom:0;
        }
    
        .kdlinvcard-titleDis{
        min-height: 1rem;
        padding: 1px 1px;
        background-color: #109DFA;
        border-radius: 0;
        background-position:center;
        background-size: cover;
        text-align:center;
        color: #00FF00;
        margin-bottom:0;
        }
    

    
        .kdlinvcard-boton{
          padding: 20px;
          height: auto;
          background-color: lightgrey;
          background-position:center;
          background-size: cover;
          border-radius: 0;
          color: red;
          text-align:center;
          margin-bottom:6;
          overflow: hidden;
          }


      #contenidoTabla{
      font-size: 12px;
      }

      td{
      font-size: 12px;
      }

      th{
      font-size: 12px;
      }


/*contenedor para buscarL */

.container-4{
  overflow: hidden;
  width: auto;
  vertical-align: middle;
  white-space: nowrap;
  top : 50%;
}
.container-4 input#search{
width: auto;
height: 35px;
background: #3498db;
border: none;
font-size: 10pt;
float: left;
color: #000;
padding-left: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.container-4 input#search::-webkit-input-placeholder {
 color: #000;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
 color: #65737e;
}


.container-4 input#search:-ms-input-placeholder {
 color: #65737e;
}

.container-4 button.icon{
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border: none;
background: #232833;
height: 34px;
width: 43px;
color: #e9ecef;
opacity: 0;
font-size: 10pt;

-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
  outline: none;
  opacity: 1;
  margin-left: -45px;
}

.container-4:hover button.icon:hover{
  background: black;
}



/* Estilos pata TAblas inventario  la uqe se usa en eml modal de registro */

/* Escritorio: tabla normal */
.tabla-inventario th,
.tabla-inventario td {
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
}






/* ==================================================
   Navbar 2026
   ================================================== */


   /* Ancho del navbar */
  /* Navbar al 90% y centrado */
  .custom-navbar {
    width: 95%;
    margin: 0 auto; /* centra horizontalmente */
  }

/* Forzar color blanco en todos los links del nav */
.custom-navbar .nav-link {
  color: #fff !important;
}

/* Pedido activo — dropdown táctil ───────────────────── */

/* ── 1. Trigger: el ícono de carrito ────────────────────────────────── */
.kdl-pedido-activo-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Target táctil mínimo 44x44px — evita errores de selección con dedos */
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
}

/* ── 2. Dot verde animado sobre el ícono ─────────────────────────────── */
.kdl-pedido-dot {
    position: absolute;
    top: 6px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none; /* el clic siempre pasa al trigger, nunca al dot */
    animation: kdl-pulso-dot 2s ease-in-out infinite;
}

@keyframes kdl-pulso-dot {
    0%,  100% { transform: scale(1);   opacity: 1;  }
    50%        { transform: scale(1.35); opacity: 0.7; }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .kdl-pedido-dot {
        animation: none;
    }
}

/* ── 3. Menú desplegable ─────────────────────────────────────────────── */
/* Solo Bootstrap puede mostrarlo, cuando agrega .show al hacer clic */
.kdl-pedido-menu {
    min-width: 300px;
    max-width: 340px;
    border-radius: 8px;
    border: none;
    border-top: 3px solid #2eca6a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 4px 0;
    background-color: #ffffff;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.kdl-pedido-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #ffffff !important;
}

/* Separadores: opacos */
.kdl-pedido-menu hr.dropdown-divider {
    border-color: #dee2e6 !important;
    opacity: 1 !important;
}

/* ── 4. Fila de resumen informativo ─────────────────────────────────── */
.kdl-pedido-menu-resumen {
    padding: 12px 16px;
    background-color: #f8f9fa !important; /* fondo levemente diferenciado */
    border-bottom: none;       /* la <hr> que sigue ya divide */
}
.kdl-pedido-resumen-texto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.kdl-pedido-icon-info {
    color: #6c757d;
    margin-top: 3px;
    flex-shrink: 0;
}
.kdl-pedido-resumen-parrafo {
    font-size: 0.875rem;  /* 14px — legible sin ser voluminoso */
    line-height: 1.45;
    color: #343a40;
    margin: 0;
}

/* ── 5. Filas de acción: target táctil ≥44px ────────────────────────── */
.kdl-pedido-accion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: #ffffff !important;
    color: #343a40;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kdl-pedido-accion:hover,
.kdl-pedido-accion:focus {
    background-color: #e9ecef !important;
    color: #000;
}
.kdl-pedido-accion:active {
    background-color: #dee2e6 !important;
}
.kdl-pedido-accion .fa {
    width: 16px;
    text-align: center;
    color: #6c757d;
}
/* Variante "Soltar activo": tono de advertencia suave */
.kdl-pedido-accion--soltar {
    color: #721c24;
}
.kdl-pedido-accion--soltar .fa {
    color: #c0392b;
}
.kdl-pedido-accion--soltar:hover,
.kdl-pedido-accion--soltar:focus {
    background-color: #f8d7da;
    color: #491217;
}



/* Por defecto: solo se ve Font Awesome */
.kdl-cart-fallback {
  display: none;
  width: 22px;
  height: 22px;
}


/* Menú desplegable del carrito: fondo sólido y caja clara */
.techmax-nav .navbar .navbar-nav .kdl-pedido-activo-item .kdl-pedido-menu {
    background-color: #ffffff;
    border: none;
    border-top: 3px solid #2eca6a;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 4px 0;
    min-width: 300px;
    max-width: 340px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute !important;
    top: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    inset: unset !important;
}

/* Estado visible — Bootstrap agrega .show */
.techmax-nav .navbar .navbar-nav .kdl-pedido-activo-item .kdl-pedido-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #ffffff !important;
}

/* Centrar el bloque de resumen del carrito */
.techmax-nav .navbar .navbar-nav .kdl-pedido-activo-item .kdl-pedido-menu-resumen {
    text-align: center;
}

/* El texto e icono dentro del resumen */
.techmax-nav .navbar .navbar-nav .kdl-pedido-activo-item .kdl-pedido-resumen-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

/* Las acciones (Abrir activo / Soltar activo) centradas */
.techmax-nav .navbar .navbar-nav .kdl-pedido-activo-item .kdl-pedido-accion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
}

/* ── Fin: pedido activo ─────────────────────────────────────── */

/* ── Menú de Perfil Desplegable ─────────────────── */
.kdl-header-nav .nav-kdl-profile img {
    max-height: 38px;   /* coherente con la altura del navbar */
    width: 38px;        /* proporción cuadrada para el círculo */
    object-fit: cover;  /* evita que la imagen se deforme */
    border: 2px solid rgba(255, 255, 255, 0.6); /* borde sutil */
}


/* Estado oculto: iguala el mecanismo del template */
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile {
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;   /* dejamos block, igual que el template */
    pointer-events: none;        /* evita clics accidentales cuando está invisible */
    top: 60px;                   /* ajuste según la altura real del navbar */
    left: auto;
    right: 0;
    width: auto;
    min-width: 220px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Estado visible: Bootstrap agrega .show al hacer clic */
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

/* Estilo general del menú de perfil */
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile {
    background-color: #ffffff;
    border: none;
    border-top: 3px solid #109DFA;   /* azul institucional */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 4px 0;
    text-align: center;
}

/* Cabecera del menú de perfil */
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile .dropdown-header {
    text-align: center;
    padding: 12px 16px 8px;
    background-color: #f0f7ff; /* azul muy claro */
}
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile .dropdown-header h6 {
    font-size: 16px;
    font-weight: 600;
    color: #012970;
    margin-bottom: 2px;
}
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile .dropdown-header span {
    font-size: 12px;
    color: #6c757d;
}

/* Ítem Salir */
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile .dropdown-item {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;        /* target táctil mínimo */
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #343a40;
    transition: background-color 0.15s ease;
}
.techmax-nav .navbar .navbar-nav .kdl-header-nav .dropdown-menu.profile .dropdown-item:hover {
    background-color: #e9ecef;
}


/* ── 6. Responsive: móvil y tablet ──────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Carrito en tablet/móvil (navbar blanco → ícono azul) */
  .fa-shopping-cart {
    display: inline-block !important;
    color: #1451ad; /* azul institucional */
  }
  .kdl-cart-fallback {
    display: none !important;
  }

  .kdl-pedido-menu,
  .dropdown-menu.profile {
    width: 100%;
    position: relative !important;
    margin-top: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
  }

  
  .kdl-pedido-activo-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 52px;
    min-height: 52px;
  }

  .kdl-pedido-accion {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 1rem;
  }

}







/* Responsive para móviles */@media (max-width: 576px) {
  .tabla-inventario thead {
    display: none;
  }

  .tabla-inventario tr {
    display: grid;
    grid-template-areas:
      "referencia referencia referencia referencia"
      "cantidad comentario accion accion";
    grid-template-columns: 1fr 1fr 0.5fr 0.5fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 0.5rem;
  }

  .tabla-inventario .celda-referencia {
    grid-area: referencia;
    width: 100%;
  }

  .tabla-inventario td[data-label="Cantidad"] {
    grid-area: cantidad;
  }

  .tabla-inventario td[data-label="Comentario"] {
    grid-area: comentario;
  }

  .tabla-inventario td[data-label="Acción"] {
    grid-area: accion;
    text-align: center;
  }

  .tabla-inventario td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 0.2rem;
  }
}