/* ESTILOS RECICLOM 2026 */

:root {
	--color-body-claro: #FFFFFF; /* var(--color-body-claro) */
	--color-claro: #FFFFFF; /* var(--color-claro) */
	--color-oscuro: #7D7B7C; /* var(--color-oscuro) */
	--color-deshabilitado: #CCCCCC; /* var(--color-deshabilitado)  */
	--color-verde-oscuro: #2B4531; /* var(--color-verde-oscuro) */
	--color-verde-claro: #A9C6AF; /* var(--color-verde-claro) */
	--color-fondo-resaltado: #EDF3EE; /* var(--color-fondo-resaltado) */
	--color-fondo-alert: #EEEEEE; /* var(--color-fondo-alert) */
	--color-danger: #D83F31; /* var(--color-danger) */
	--color-warning: #EAB825; /* var(--color-warning) */
	--color-info: #048789; /* var(--color-info) */
	--color-success: #A3C57B; /* var(--color-success) */
	--color-primary: #2F5C5C; /* var(--color-primary) */
	--color-negro: #000; /* var(--color-negro) */
	--color-blanco: #FFF; /* var(--color-blanco) */
}

body:not(#login) {
	background: none !important;
	background-color: var(--color-body-claro) !important;
	color: var(--color-oscuro);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--color-oscuro);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

a img {
	opacity: 1;
	transition: 0.3s;
  will-change: opacity;
}
a:hover img {
	opacity: 0.8;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}
.no-gutters > .col, 
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

/* GRID MIN */
@media (min-width: 576px) { /* SM */ }
@media (min-width: 768px) { /* MD */ }
@media (min-width: 992px) { /* LG */ }
@media (min-width: 1200px) { /* XL */ }
/* GRID MAX */
@media (max-width: 1199px){ /* 992 a 1199 - Large (lg) */ }
@media (max-width: 991px){ /* 768 a 991 - Medium (md) */ }
@media (max-width: 767px){ /* 576 a 767 - Small (sm) */ }
@media (max-width: 575px){ /* 0 a 575 - Extra Small (sin identificador) */ }


/* BOTONES */
.btn {
	opacity: 1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.btn:hover {
	opacity: 0.85;
}
.btn-default {
  background-color: var(--color-oscuro);
  border-color: var(--color-oscuro);
  color: var(--color-claro) !important;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
  background-color: var(--color-oscuro);
  border-color: var(--color-oscuro);
  color: var(--color-claro) !important;
}
.btn-light {
	background-color: var(--color-body-claro);
	border-color: var(--color-oscuro);
	color: var(--color-oscuro);
}
.btn-light:hover,
.btn-light:active,
.btn-light.hover {
  background-color: var(--color-claro);
	border-color: var(--color-oscuro);
	color: var(--color-oscuro);
}
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-claro) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-claro) !important;
}
.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-claro) !important;
}
.btn-success:hover,
.btn-success:active,
.btn-success.hover {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-claro) !important;
}
.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-claro) !important;
}
.btn-info:hover,
.btn-info:active,
.btn-info.hover {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-claro) !important;
}
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-claro) !important;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-claro) !important;
}
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-claro) !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.hover {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-claro) !important;
}
.btn-primary.disabled.focus, 
.btn-primary.disabled:focus, 
.btn-primary.disabled:hover, 
.btn-primary[disabled].focus, 
.btn-primary[disabled]:focus, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary.focus, 
fieldset[disabled] .btn-primary:focus, 
fieldset[disabled] .btn-primary:hover {
  background-color: var(--color-claro);
  border-color: var(--color-deshabilitado);
  color: var(--color-deshabilitado);
}

.btn-adaptable {
  white-space: normal;
}


/* CORRECCIONES BOOTSTRAP */
.elemento-content-box {
	box-sizing: content-box;
}
.navbar-nav .dropdown-menu {
	top: 80% !important;
}
@media (min-width: 768px) {
	/* .dropdown:hover .dropdown-menu {
		display: block;
	 } */
	 .navbar-nav .dropdown-toggle:hover + .dropdown-menu {
		display: block;
	 }
	 .navbar-nav .dropdown-toggle + .dropdown-menu:hover {
		display: block;
	 }
}

.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-success { color: var(--color-success) !important; }

.alert { background-color: var(--color-fondo-alert);  }
.alert-outline-danger { color: var(--color-danger); border-color: var(--color-danger); }
.alert-outline-warning { color: var(--color-warning); border-color: var(--color-warning); }
.alert-outline-success { color: var(--color-success); border-color: var(--color-success); }
.alert-outline-info { color: var(--color-info); border-color: var(--color-info); }

.bg-primary {
	background-color: var(--color-verde-oscuro) !important;
}
.card .card-header.bg-primary {
	background-color: var(--color-verde-oscuro) !important;
	color: var(--color-blanco);
}

.topbar-nav .navbar {
	background: none;
	background-color: var(--color-verde-claro);
	color: var(--color-claro);
}

.topbar-nav .navbar.bg-dark {
	background: none;
	background-color: var(--color-verde-claro) !important;
	color: var(--color-claro);
}

.dropdown-menu {
  font-size: 15px;
  color: var(--color-oscuro);
  background-color: var(--color-claro);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}
.user-details .media .media-body,
.user-details .media .media-body .user-title,
.user-details .media .media-body .user-subtitle {
  color: var(--color-oscuro);
}
.dropdown-item.user-details {
  background-color: var(--color-fondo-resaltado);
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--color-claro);
  text-decoration: none;
  background-color: var(--color-oscuro);
}
.dropdown-item:hover {
  color: var(--color-claro);
  background-color: var(--color-oscuro);
}
.dropdown-item.user-details:hover .media .media-body,
.dropdown-item.user-details:hover .media .media-body .user-title,
.dropdown-item.user-details:hover .media .media-body .user-subtitle {
  color: var(--color-claro);
}
.dropdown-item:hover a {
  color: var(--color-claro);
  text-decoration: none;
}


.wrapper-logo-header {
	padding: 0em 2em 2em 2em;
}
.user-local {
	font-size: 0.8em;
	padding: 0.5em 0.5em 0.5em 0;
}

#sidebar-wrapper {
	background: none;
	background-color: var(--color-verde-oscuro);
	color: var(--color-claro);
}

.sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: var(--color-claro);
  text-decoration: none;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
  color: var(--color-claro);
  background: var(--color-verde-claro);
  border-left-color: var(--color-claro);
  text-decoration: none;
}

.card {
	background: none;
	background-color: var(--color-fondo-resaltado);
	color: var(--color-oscuro);
}
.card .card-header {
	color: var(--color-oscuro);
}
.card .card-body {
	color: var(--color-oscuro);
}

.card .card-body .dataTables_wrapper {
	color: var(--color-oscuro);
}
.card .card-body .dataTables_wrapper label {
	color: var(--color-oscuro);
}
.card .card-body .table {
	background-color: var(--color-body-claro);
}
.card .card-body .table tbody {
	background-color: var(--color-body-claro);
}

.card .card-body input.form-control,
.card .card-body select.form-control,
.card .card-body .select2-container {
	background-color: var(--color-claro);
	border: 1px solid var(--color-oscuro);
	color: var(--color-oscuro);
	border-radius: .25rem;
}
.card .card-body select.form-control {
	color: var(--color-oscuro) !important;
}

li.page-item {
	border: none;
	background-color: var(--color-verde-claro);
	color: var(--color-claro);
}
li.page-item.active {
	background-color: var(--color-verde-oscuro);
}
li.page-item.active .page-link {
	border: none;
	background-color: var(--color-verde-oscuro);
	color: var(--color-claro);
}
li.page-item.disabled {
	cursor: not-allowed;
}
li.page-item.disabled a.page-link {
	border: none;
	background-color: var(--color-deshabilitado);
	color: var(--color-claro);
	cursor: not-allowed;
}

.table thead th {
	background: none;
	background-color: var(--color-verde-oscuro);
	color: var(--color-claro);
}


legend {
	font-size: 0.9em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 1em;
	margin-top: 2em;
	margin-bottom: 2em;
}
label {
	color: var(--color-oscuro);
}
input.form-control,
select.form-control {
	color: var(--color-oscuro) !important;
}
input.form-control::placeholder,
select.form-control::placeholder {
	color: var(--color-primary) !important;
	color: var(--color-negro) !important;
	opacity: .95;
}
.select2_container {
	color: var(--color-oscuro) !important;
}
input.form-control-invisible,
.card .card-body input.form-control-invisible {
	border: none;
}
.input-group-text {
	background-color: var(--color-claro);
	color: var(--color-oscuro);
	border: 1px solid var(--color-oscuro);
}


/* MI CUENTA */

.usuario-fotos {
	line-height: 2em;
}
img.usuario-foto-perfil {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}
img.usuario-foto-half {
	width: 120px;
	height: auto;
}
img.usuario-foto-full {
	width: 240px;
	height: auto;
	margin-top: 5px;
}


/* SELECT2 */

/* .select2-container .select2-selection--single {
	height: auto;
} */


/* TABLAS */

.table td, .table th {
	/* white-space: nowrap; */
	white-space: normal !important;
}


/* DATATABLE */

.oculto-orden {
	display: none !important;
}
.td-oculta {
	display: none !important;
}

.dataTables_wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dataTables_wrapper .row {
	/* margin-left: 0 !important;
	margin-right: 0 !important; */
}


/* TABLA PARA MOSTRAR DATOS */

table.table-ver-datos {
	font-size: 1em;
}
table.tabla-chica {
	font-size: 0.8em;
}
@media (max-width: 1023px) {
	table.table-ver-datos {
		font-size: 0.9em;
	}
}
@media (max-width: 967px) {
	table.table-ver-datos {
		font-size: 0.8em;
	}
	.card table.table-ver-datos tr th,
	.card table.table-ver-datos tr td {
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media (max-width: 767px) {
	table.table-ver-datos {
		font-size: 0.7em;
	}
	.card table.table-ver-datos tr th,
	.card table.table-ver-datos tr td {
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media (max-width: 576px) {
	table.table-ver-datos {
		font-size: 0.8em;
	}
	.card table.table-ver-datos tr th,
	.card table.table-ver-datos tr td {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.card .table.tabla-chica td,
.card .table.tabla-chica th {
	padding: 0.5em 1em;
}

table.table-ver-datos tr.separador td {
	border: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	margin: 0.5em 0 0.5em 0;
}

tr.tr-estado {
	border: 1px solid var(--color-primary);
}
th.th-estado {
	border-top: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	font-size: 1.2em;
	font-weight: bold;
	color: var(--color-primary);
}
td.td-estado {
	border-top: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	font-size: 1.2em;
	color: var(--color-primary);
}

table.table-bitacora {
	font-size: 0.8em;
}


/* CONTENIDO */

.hidden {
	display: none;
}

.check-2x {
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
	padding: 0;
}
.radio-2x {
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
	padding: 0;
}


a:hover > div.card {
	opacity: 0.8;
}

.card.card-usados {
	font-size: 0.8em;
}
.card.card-usados .card-body {
	padding: 0.5em;
}


/* UPLOAD MÚLTIPLE IMAGENES */

.upload-thumb {
	max-height: 100px;
	width: auto;
	display: inline-block;
	margin: 0.5em;
}


/* CONTENIDO PÚBLICO */

.wrapper-publico {
	margin: 2em 0 2em 0;
}
.header-publico {
	margin: 0 0 1em 0;
}
.main-publico {
	
}
.page-title-publico {
	margin-bottom: 0;
}
@media (max-width: 576px) {
	.page-title-publico {
		margin-top: 1em;
	}
}



/* JQUERY VALIDATOR */

div.error {
	display: block;
	width: 100%;
	clear: both;
}


/* CLASES SUELTAS */
.margintop10 { margin-top: 10px; }
.margintop20 { margin-top: 20px; }
.margintop30 { margin-top: 30px; }
.margintop40 { margin-top: 40px; }
.margintop50 { margin-top: 50px; }
.marginbottom10 { margin-bottom: 10px; }
.marginbottom20 { margin-bottom: 20px; }
.marginbottom30 { margin-bottom: 30px; }
.marginbottom40 { margin-bottom: 40px; }
.marginbottom50 { margin-bottom: 50px; }


/******************/
/* MODAL IMPRIMIR */
/******************/


body.body-modal-imprimir {
	font-size: 0.9em;
	line-height: 2em;
	color: black;
	background-image: none;
	background-color: white;
	background: white url('../../imagenes/fondo-imprimir-2.png') no-repeat center right;
	background-size: auto;
}
body.body-modal-imprimir ::selection {
	background: #333;
	color: #eee;
}

.wrapper-modal-imprimir {
	margin: 0 2em 2em 2em;
	/* border: 1px dotted gray; */
	padding: 1em;
}

.carta-cliente-logo {
	text-align: right;
}
.carta-cliente-logo img {
	width: 75px;
	height: auto;
}
.carta-cliente-folio {
	text-align: right;
	font-weight: bold;
	font-size: 0.9em;
	margin: 0 0.2em 0 0;
}
.carta-cliente-titulo {
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	margin: 1em 0 2em 0;
}
.carta-cliente-contenido {

}
.carta-cliente-contenido p {
	
}
.carta-cliente-contenido p.p-datos {
	margin-left: 3em;
}
.carta-cliente-firma {
	text-align: right;
}
.carta-cliente-firma-caja {
	display: inline-block;
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	border-top: 1px solid black;
	padding: 0.5em 2em 0 2em;
	margin: 4em 5em 1em 1em;
}

.contenedor-boton-imprimir {
	text-align: center;
	margin: 2em;
}




/* === Nativo (Bootstrap) === */
.form-control:disabled,
.form-control[disabled] {
  opacity: 1 !important;            /* quita el “lavado” */
  background-color: #ffffff !important;
  color: #6c757d !important;         /* texto tipo placeholder */
  cursor: not-allowed !important;    /* mano prohibida */
}

/* === Select2 (tema default) === */
.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: #ffffff !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  border-color: #ced4da !important;  /* mismo borde que habilitado */
}

/* Texto "rendered" de Select2 en estado inicial */
.select2-container--default .select2-selection--single
  .select2-selection__rendered {
  color: #6c757d !important;         /* gris suave tipo placeholder */
}

/* Asegura altura/centrado bonito en Select2 */
.select2-container .select2-selection--single {
  height: 38px !important;
  display: flex;
  align-items: center;
}

/* Placeholder de la opción inicial si la usas */
#sucursal_id option[value="0"] {
  color: #6c757d;
}

/* LOGIN  */
body#login {
	background: none;
	background-color: var(--color-verde-claro) !important;
	color: var(--color-claro);
}
body#login .card .card-body {
	background: none;
	background-color: var(--color-verde-oscuro);
	color: var(--color-claro);
}
