/* El tema base (qompac-ui/customizer) define --bs-primary y --bs-blue en morado (#7016d0).
   Se sobreescriben aqui con la paleta azul del proyecto para que ningun componente
   que use var(--bs-primary)/var(--bs-blue) (sin regla especifica ya sobreescrita abajo)
   se vea morado. */
:root {
    --bs-blue: #24369e;
    --bs-primary: #24369e;
    --bs-primary-rgb: 36, 54, 158;
    --bs-primary-shade-20: #1d2b7e;
    --bs-primary-shade-40: #16205f;
    --bs-primary-shade-60: #0e163f;
    --bs-primary-shade-80: #070b20;
    --bs-primary-tint-20: #505eb1;
    --bs-primary-tint-40: #7c86c5;
    --bs-primary-tint-60: #a7afd8;
    --bs-primary-tint-80: #d3d7ec;
    --bs-primary-tint-90: #e9ebf5;
    --bs-purple: #24369e;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
}

/* --bs-secondary (#aca4bc, un lavanda/morado apagado) se usa como color de
   .text-muted y como fondo de .btn-secondary; se fuerza a gris neutro. */
.text-muted {
    color: #6c757d !important;
}

.progress {
    --bs-progress-bar-bg: #24369e;
}

.progress-bar {
    background-color: #24369e !important;
}

.bg-soft-primary {
    color: #16205f;
    background-color: rgba(36, 54, 158, 0.1) !important;
}

.bg-soft-secondary {
    color: #495057;
    background-color: rgba(108, 117, 125, 0.1) !important;
}

.sidebar .navbar-brand .logo-title {
    color: white !important;
}

.color-snap{
    background: #2d3440 !important;
    color: white !important;
}

.btn-primary{
  /* qompac-ui.css define .btn dos veces: una usa --bs-btn-*, la otra (mas abajo en el
     archivo, y por eso gana) usa --card-btn-*. Se sobreescriben ambos juegos de variables
     y ademas :hover/:focus/:active con !important para no depender de cual gane. */
  --bs-btn-color: #fff;
  --bs-btn-bg: #24369e;
  --bs-btn-border-color: #1B6771;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d2b7e;
  --bs-btn-hover-border-color: #16205f;
  --bs-btn-focus-shadow-rgb: 36, 54, 158;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #16205f;
  --bs-btn-active-border-color: #0e163f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #24369e;
  --bs-btn-disabled-border-color: #24369e;
  --card-btn-color: #fff;
  --card-btn-bg: #24369e;
  --card-btn-border-color: #1B6771;
  --card-btn-hover-color: #fff;
  --card-btn-hover-bg: #1d2b7e;
  --card-btn-hover-border-color: #16205f;
  --card-btn-focus-shadow-rgb: 36, 54, 158;
  --card-btn-active-color: #fff;
  --card-btn-active-bg: #16205f;
  --card-btn-active-border-color: #0e163f;
  --card-btn-disabled-color: #fff;
  --card-btn-disabled-bg: #24369e;
  --card-btn-disabled-border-color: #24369e;
  background-color: #24369e !important;
  border-color: #1B6771 !important;
  color: white ;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #1d2b7e !important;
  border-color: #16205f !important;
  color: #fff !important;
}

.btn-outline-primary {
  /* qompac-ui.css define .btn dos veces: una usa --bs-btn-*, la otra (mas abajo en el
     archivo, y por eso gana) usa --card-btn-*. Se sobreescriben ambos juegos de variables
     y ademas las propiedades directas para no depender de cual gane. */
  --bs-btn-color: #24369e;
  --bs-btn-border-color: #24369e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #24369e;
  --bs-btn-hover-border-color: #24369e;
  --bs-btn-focus-shadow-rgb: 36, 54, 158;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #24369e;
  --bs-btn-active-border-color: #24369e;
  --bs-btn-disabled-color: #24369e;
  --bs-btn-disabled-border-color: #24369e;
  --card-btn-color: #24369e;
  --card-btn-border-color: #24369e;
  --card-btn-hover-color: #fff;
  --card-btn-hover-bg: #24369e;
  --card-btn-hover-border-color: #24369e;
  --card-btn-focus-shadow-rgb: 36, 54, 158;
  --card-btn-active-color: #fff;
  --card-btn-active-bg: #24369e;
  --card-btn-active-border-color: #24369e;
  --card-btn-disabled-color: #24369e;
  --card-btn-disabled-border-color: #24369e;
  color: #24369e !important;
  border-color: #24369e !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: #24369e !important;
  border-color: #24369e !important;
}

.btn-secondary {
  /* --bs-secondary (#aca4bc) es un lavanda/morado apagado; se reemplaza por gris neutro. */
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
  --card-btn-color: #fff;
  --card-btn-bg: #6c757d;
  --card-btn-border-color: #6c757d;
  --card-btn-hover-color: #fff;
  --card-btn-hover-bg: #5c636a;
  --card-btn-hover-border-color: #565e64;
  --card-btn-focus-shadow-rgb: 130, 138, 145;
  --card-btn-active-color: #fff;
  --card-btn-active-bg: #565e64;
  --card-btn-active-border-color: #51585e;
  --card-btn-disabled-color: #fff;
  --card-btn-disabled-bg: #6c757d;
  --card-btn-disabled-border-color: #6c757d;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #5c636a !important;
  border-color: #565e64 !important;
  color: #fff !important;
}


.page-item .page-link{
  color: #1B6771 !important;
}

.page-item.active .page-link {
  background-color: #24369e !important;
    border-color: #24369e !important;
    color: #fff !important;
}

.nav-link:hover{
    box-shadow: unset;
    color: #24369e !important;
}

.sidebar.sidebar-default .nav-link:not(.static-item).active, .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true] {
    background: #24369e !important;
    color: #fff;
    -webkit-box-shadow: 0 10px 20px -10px rgba(var(--shadow-dark-color), 38%);
    box-shadow: 0 10px 20px -10px rgba(var(--shadow-dark-color), 38%);
}

.sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
    background: white;
    color: var(--bs-primary);
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
     background: white;
    color: var(--bs-primary);
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.cursor-pointer{
    color: #1B6771 !important;
}


.iq-nav-menu li .nav-link.active {
  background: #24369e !important;
  color :white;
}

.iq-nav-menu li .nav-link:hover {
    color: white !important;
    font-weight: 500;
    background: #24369e;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}
.sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded=true]) {
  color: white !important;
    font-weight: 500;
    background: #24369e;
    -webkit-border-radius: .25em;
    border-radius: .25em; 
}


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


.nav-slider .nav-slider-thumb {
    background:#24369e;
    color: white;
}

.nav-slider .nav-link.active {
    background:transparent;;
    color: white;
}
/** 
.nav-link:hover, .nav-link:focus {
    color: white !important;
    background-color: #1B6771 !important;
}*/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    
}

.accordion-button:not(.collapsed) {
    background: #24369e !important;
    color:  white;
}

.bg-primary{
 background: #24369e !important;
    color:  white;   
}


/* Estilos generales para la tabla con clase card-table */
.card-table {
  width: 100%;
  /*border-collapse: collapse;*/
}

.card-table thead {
  background-color: #333;
  color: #fff;
}

.card-table td, .card-table th {
  padding: 10px;
  /** border: 1px solid #ddd; */
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 600px) {
  .card-table, 
  .card-table thead, 
  .card-table tbody, 
  .card-table th, 
  .card-table td, 
  .card-table tr {
    display: block;
  }

  .card-table thead tr {
    display: none; /* Ocultar encabezados en móvil */
  }

  .card-table tr {
    margin-bottom: 15px;
  }

  .card-table td {
    text-align: left;
    padding-left: 10px;
    position: relative;
    border: none;
    border-bottom: 1px solid #ddd;
    display: block;
  }

  .card-table td::before {
    content: attr(data-label); /* Mostrar el encabezado desde data-label */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
    max-width: 10% !important;
    padding-right: 20px;
  }
  
  .card-table tr {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 10px;
  }
}


.auto-ajustable {
  white-space: nowrap; /* Evitar que el label se divida en varias líneas */
  flex-shrink: 0; /* Prevenir que el label se reduzca más allá de su contenido */
}

.bg-snap {
  background: #e5e7eb;
  color: black;
}

@media only screen and (max-width: 768px) {
    .div-hide {
        display: none;
    }
}


.container-input {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.iborrainputfile {
  font-size:16px; 
  font-weight:normal;
  font-family: 'Lato';
}

/* style 1 */

.inputfile-1 + label {
    
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
    
}


.input-mayus{
  text-transform:uppercase !important;
}


.form-control:focus,
.form-select:focus {
    border-color: #24369e !important;
}

.form-check-input:focus {
    border-color: #24369e !important;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #24369e !important;
    border-color: #24369e !important;
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: #24369e !important;
}
.nav-focus {
  color: white;
}

a:not(.btn):not(.nav-link) {
    color: #24369e !important;
    text-decoration: none; /* opcional */
}


::selection {
    background: #24369e;
    color: white;         
}

/* Quitar flechitas en Chrome, Edge, Safari */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Quitar flechitas en Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.cards-container{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.card-item{
    flex:1 1 calc(50% - 20px);
    min-width:400px;
}

/* para seguimiento de entregas*/


@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s infinite;
}

/* Pagina de acceso no autorizado (errors/permiso-denegado.blade.php) */
.rh-denied-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}
.rh-denied-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    gap: .75rem;
}
.rh-denied-card svg { color: #dc3545; }
.rh-denied-card h2 { margin: 0; font-size: 1.35rem; }
.rh-denied-card p { margin: 0; color: var(--rh-muted, #6c757d); }
.rh-denied-btn {
    margin-top: .5rem;
    padding: .55rem 1.25rem;
    border-radius: .5rem;
    background: #0d6efd;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.rh-denied-btn:hover { background: #0b5ed7; color: #fff; }