/* table {
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap:break-word;
    white-space: pre-wrap;
} */

/* Para que no salte linea */
table.dataTable tbody td {
    font-size: 14px !important;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap:break-word;
    white-space: pre-wrap;
}

#tbl_lst thead th {
    font-size: 16px !important;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap:break-word;
    white-space: pre-wrap;
}

#tbl_lst tbody th, #tbl_lst tbody td {
    padding: 5px;
}


/* Esta seccion para cambiar datos de la tabla */
#tbl_lst_syscom_producto thead th {
    font-size: 14px !important;
}

#tbl_lst_syscom_producto tbody th, #tbl_lst_syscom_producto tbody td {
    padding: 0px;
    font-size: 14px !important;
}
/* Esta seccion para cambiar datos de la tabla */


#tbl_lst_size thead th {
    font-size: 18px !important;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap:break-word;
    white-space: pre-wrap;
}

#tbl_lst_size tbody th, #tbl_lst_size tbody td {
    padding: 1px;
    font-size: 16px !important;
}



.addNew{
    background-color: #198754 !important;
    color: white !important;
}

/* .buttons-excel {
    background-color: #0d6efd !important;
    color: white !important;
} */

/* .buttons-print {
    background-color: #ffc107 !important;
    color: white !important;    
} */

.dt-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.sidebar-mini{
    height: 100vh !important;
}


.tamanio_liga_14 {
    font-size:14px;
}

.tamanio_liga {
    font-size:13px;
}

.tamanio_liga_peq {
    font-size:12px;
}

.tamanio_liga_peq_2 {
    font-size:10px;
}


.caracteristica_button_valida {
    text-decoration:none; 
    font-size:12px;
}

.ocultar {
    display: none;
}

.x{
    font-size: 20px !important;
}


.content {
    margin-top: 2rem;
}

[data-content] {
    display: none;
}

.active[data-content] {
    display: block;
}


.ui-autocomplete.ui-widget {
    font-size: 14px;
    font-family: Courier;
}





#tbl_producto thead th {
    font-size: 13px !important;
}

#tbl_producto tbody th, #tbl_producto tbody td {
    padding: 2px;
    font-size: 13px !important;
}

.AlignColTableRight {
    text-align: right; 
}

.AlignColTableLeft {
    text-align: left; 
}

.AlignColTableCenter {
    text-align: center; 
}



#tblLst thead th {
    font-size: 14px !important;
}

#tblLst tbody th, #tblLst tbody td {
    padding: 2px;
    font-size: 14px !important;
}


#tbl_lst_quote thead th {
    font-size: 14px !important;
}

#tbl_lst_quote tbody th, #tbl_lst_quote tbody td {
    padding: 2px;
    font-size: 14px !important;
}



.table-wrapper{
  width: 100%;
  height: 390px;          /* alto visible del contenedor */
  overflow: auto;         /* scroll vertical/horizontal si se requiere */
  position: relative;     /* referencia para sticky */
}

/* La tabla debe ocupar todo el ancho y sin margen inferior */
.table-wrapper .table{
  width: 100% !important; /* fuerza 100% (anula el width="80%") */
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;     /* o 'fixed' si quieres columnas más rígidas */
}

/* Encabezado fijo al hacer scroll */
.table-wrapper thead th{
  position: sticky;
  top: 0;
  z-index: 2;                 /* encima de las celdas al hacer scroll */
  background: #f8f9fa;        /* color del thead (Bootstrap table-light) */
  /* opcional: línea inferior para separar */
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}












.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
  
.bi {
    vertical-align: -.125em;
    fill: currentColor;
}
  
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
    border-radius: .75rem;
}
  
.icon-link {
    display: inline-flex;
    align-items: center;
}

.icon-link > .bi {
    margin-top: .125rem;
    margin-left: .125rem;
    transition: transform .25s ease-in-out;
    fill: currentColor;
}

.icon-link:hover > .bi {
    transform: translate(.25rem);
}
  
.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    border-radius: .75rem;
}
  
.rounded-4 { border-radius: .5rem; }
.rounded-5 { border-radius: 1rem; }
  
.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
  
.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.btnButtonDatatable {
    font-size: 12px !important;
}

.ulDropDownDataTable {
    font-size: 12px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}


.lidropdownDatatable {
    height: 20px !important;
}


.ajuste_font_start {
    font-size: clamp(1.28rem, 2vw, .57rem);
}




/* === Bootstrap 5: modal direcciones más compacto === */
#direccionesModal .modal-content{ font-size:.90rem; }          /* base */

#direccionesModal .badge{ font-size:.75rem; }                   /* chips header */

#direccionesModal .card-header{ padding:.35rem .5rem; }
#direccionesModal .card-header strong{ font-size:.90rem; }

#direccionesModal .table{ font-size:.88rem; }
#direccionesModal .table th,
#direccionesModal .table td{ padding:.35rem .5rem; }

#direccionesModal .form-label{ font-size:.82rem; margin-bottom:.15rem; }
#direccionesModal .form-control,
#direccionesModal .form-select{
  font-size:.85rem;
  padding:.25rem .5rem;
  height: calc(1.5em + .5rem + 2px);  /* altura compacta cross-BS5 */
}
#direccionesModal .input-group-text{ font-size:.85rem; padding:.25rem .5rem; }

#direccionesModal .btn{ font-size:.85rem; padding:.30rem .6rem; }





/* Panel suave para el lado del formulario (contactos y direcciones) */
#contactosModal .form-panel-soft,
#direccionesModal .form-panel-soft{
  /* Tinte muy sutil usando el color “success” del tema */
  background-color: rgba(129, 199, 232, 0.4);  /* gris oscuro (bs-dark) con .08 */
  border: 1px solid rgba(129, 199, 232, 0.4);
  border-radius: .75rem;
}

/* Mantener el header y body del card limpios sobre el fondo suave */
#contactosModal .form-panel-soft .card-header,
#direccionesModal .form-panel-soft .card-header{
  background: transparent;
  border-bottom-color: rgba(0,0,0,.05);
  padding: .5rem .75rem;
}
#contactosModal .form-panel-soft .card-body,
#direccionesModal .form-panel-soft .card-body{
  background: transparent;
}

/* Opcional: pequeña banda de acento a la izquierda del panel */
#contactosModal .form-panel-soft::before,
#direccionesModal .form-panel-soft::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:.75rem 0 0 .75rem;
  background: rgba(var(--bs-success-rgb), .5);
  opacity:.25;
}

/* Si lo prefieres NEUTRO en lugar de verde, usa este en vez del anterior:
#contactosModal .form-panel-soft,
#direccionesModal .form-panel-soft{
  background-color: #f7f9fb;
  border: 1px solid rgba(0,0,0,.06);
}
*/


/* FLIP CARD – pega esto al final de tus estilos */
.flip-card{
  position: relative;
  width: 100%;
  min-height: 380px;           /* alto base; puedes cambiarlo Antes: 340px */
  perspective: 1200px;
}

.flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.flip-card .feature{ height: 100%; }

/* ¡MUY IMPORTANTE! que las caras sean absolutas */
.flip-card .flip-face{
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card .flip-front{ transform: rotateY(0); }
.flip-card .flip-back { transform: rotateY(180deg); }

.flip-card.is-flipped .flip-inner{ transform: rotateY(180deg); }








/* Tema oscuro + compacto para BS 5.0.2 */
.popover.popover-dark { 
	background:#111; 
	color:#f8f9fa; 
	border-color:#111; 
	box-shadow:0 .6rem 1.2rem rgba(0,0,0,.45); max-width:220px; 
}

.popover.popover-dark .popover-body { 
	font-size:1.2rem; 
	line-height:1.2; 
	padding:.3rem .45rem; 
	white-space:nowrap; 
	color:#fff; 
}

.popover.popover-dark .popover-header { 
	background:#111; 
	color:#fff; 
	border-bottom-color:#222; 
	padding:.25rem .5rem; 
	font-size:1.82rem; 
	line-height:1.1; 
}

.popover.popover-dark .popover-arrow::before, 
.popover.popover-dark .popover-arrow::after { border-top-color:#111 !important; } /* ajusta según placement */







    /* --- Estilos para los botones de Regresar --- */

    /* Base común para ambos botones */
    .btn-regresar {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem; /* Espacio entre el icono y el texto */
        font-weight: 600;
        text-decoration: none;
        border-radius: 50rem; /* Forma de píldora */
        padding: 0.6rem 1.2rem;
        border: 2px solid transparent; /* Borde base transparente */
        transition: all 0.2s ease-in-out;
    }

    /* Efecto de "levantamiento" al pasar el mouse (hover) */
    .btn-regresar:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Opción 1: Botón Gris Sutil (para fondos blancos) */
    .btn-regresar-sutil {
        background-color: #f8f9fa; /* Fondo gris muy claro */
        color: #495057; /* Texto gris oscuro */
        border-color: #dee2e6; /* Borde sutil para definirlo */
        box-shadow: none; /* Sin sombra para un look más plano */
    }
    .btn-regresar-sutil:hover {
        background-color: #e9ecef; /* Un poco más oscuro al pasar el mouse */
        border-color: #ced4da;
    }


    /* Opción 2: Botón Azul Primario (sin cambios) */
    .btn-regresar-primario {
        background-color: #ffffffff;
        color: #fff;
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
    }
    .btn-regresar-primario:hover {
        background-color: #f6f6f6ff;
    }

    /* Opción 3: Estilo "Outline" o Fantasma */
    .btn-regresar-outline {
        background-color: transparent;
        border-color: #343a40; /* Borde oscuro */
        color: #343a40; /* Texto oscuro */
        box-shadow: none;
    }
    .btn-regresar-outline:hover {
        background-color: #343a40; /* Se rellena de color al pasar el mouse */
        color: #fff; /* El texto se vuelve blanco */
    }

    /* Opción 4: Estilo Oscuro / Contraste */
    .btn-regresar-dark {
        background-color: #343a40; /* Fondo gris oscuro / carbón */
        color: #fff; /* Texto blanco */
        border-color: #343a40; /* Borde del mismo color */
        box-shadow: none;
    }
    /* ⭐ [MODIFICADO] Hover blanco para el botón oscuro ⭐ */
    .btn-regresar-dark:hover {
        background-color: #fff; /* Fondo blanco al pasar el mouse */
        color: #343a40; /* Texto oscuro */
        border-color: #343a40; /* Mantenemos el borde oscuro */
    }




/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --- ESTILOS PARA VISTAS DE CATÁLOGO --- */
/* Contenedor del DataTable */
.vista-catalogo .dataTables_wrapper {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background-color: white; 
}

/* Tabla principal */
.vista-catalogo table.dataTable {
    border-top: none !important;
    border-bottom: none !important;
}

/* --- Estilos para la tabla con clase .tabla-contenido --- */
/* Encabezado de la tabla (TH) */
.vista-catalogo .tabla-contenido thead th {
    background-color: transparent !important;
    color: #000000;
    font-weight: 600;
    border-top: none !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Filas del cuerpo (TR) */
.vista-catalogo .tabla-contenido tbody tr {
    border-bottom: 1px solid #e9ecef;
}
.vista-catalogo .tabla-contenido tbody tr:last-child {
    border-bottom: none;
}

/* Celdas del cuerpo (TD) */
.vista-catalogo .tabla-contenido tbody td {
    vertical-align: middle;
}

/* --- Clases de alineación para DataTables --- */
.vista-catalogo .dt-cell-center { 
    text-align: center; 
    vertical-align: middle; 
}
.vista-catalogo .dt-cell-left { 
    text-align: left; 
    vertical-align: middle; 
}
.vista-catalogo .dt-cell-right { 
    text-align: right; 
    vertical-align: middle; 
}

.vista-catalogo {
    position: relative;
}

.tooltip-inner {
background-color: #000 !important; /* Fondo negro */
color: #fff !important;           /* Texto blanco */
opacity: 1 !important;            /* Asegura que no sea transparente */
}

/* 2. Define el color de la flecha (para 'bottom') */
.tooltip.bs-tooltip-bottom .arrow::before {
border-bottom-color: #000 !important; /* Flecha negra */
}

/* 3. (Recomendado) Define la flecha para otras posiciones */
.tooltip.bs-tooltip-top .arrow::before {
border-top-color: #000 !important;
}
.tooltip.bs-tooltip-right .arrow::before {
border-right-color: #000 !important;
}
.tooltip.bs-tooltip-left .arrow::before {
border-left-color: #000 !important;
}