.bg-primary {
    background-color: var(--azul_claro) !important;
    color: white !important;
}
 
.table-sm {
    width: 100%;
}

.gn-menu-main {
    width: unset;
}

li#liparaelnombre {
    position: fixed;
    max-height: 60px;
    overflow: hidden;
    border: none;
    margin-left: 50px;
    background: white;
}

:root {
    --blanco: #ffffff;
    --gris: #838383;
    --grisoscuro: #5e5e5e;
    --negro: #000000;
    --azul: #293d60;
    --azul_claro: #337ab7;
    --naranja: #ff7514;
    --fondo_rojo: #ffe5e5;
    --fondo_rojo_oscuro: #c9302c;
    --rojo: #c9302c;
    --verde_claro: #e4f9e4;
    --verde_oscuro: #008000;
    --azul_negro: #00324b;
    --azul_menu: #0a0d8c;
    --amarillo: #ffc500;

}
.texto_grisoscuro{color:var(--grisoscuro);}
html {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.morado {
    background: #6c0080;
}

.boton1 {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px 5px 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 3px;
    border-width: 1px;
    cursor: pointer;
}

.card-header.bg-primary {
    background: var(--azul_negro) !important;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid #e3e3e3;
}

.nav.nav-tabs,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--azul_negro) !important;
    border-radius: 6px;
}

.nav.nav-tabs a.nav-link {
    color: white !important;
}

.nav.nav-tabs a.active {
    color: black !important;
}

.azul_claro {
    background: var(--azul_claro);
}

.boton1.naranja {
    background: var(--naranja);
    border-color: var(--azul_negro) !important;
}

.boton1.azul_negro {
    background: var(--azul_negro);
    border-color: var(--blanco) !important;
    color: white;
}

.boton1.verde {
    background: var(--verde_oscuro);
    border-color: var(--blanco) !important;
    color: white;
}

.boton1.morado {
    background: #6c0080;
    color: white;
}

.boton1.blanco {
    background: #ffffff;
    border-color: var(--azul_negro) !important;
    color: #006d8c;
    border-style: solid;
}

.boton1.rojo {
    background: var(--fondo_rojo_oscuro) !important;
    color: white;
}

.boton1.azul_claro {
    background: var(--azul_claro);
    color: white;
}

.alerta1 {
    border-style: solid;
    float: left;
    margin: 6px;
    padding: 6px;
    border-width: 1px;
    border-color: var(--fondo_rojo_oscuro);
    background: var(--fondo_rojo);
    font-weight: bold;
    color: var(--azul);
    text-align: center;
}

.alerta2 {
    position: fixed;
    top: 0;
    z-index: 12;
    right: 0;
    font-size: 11px;
    margin-right: 6px;
    margin-top: 2px;
    color: var(--azul);
}

.alertaverde {
    border-style: solid;
    float: left;
    margin: 6px;
    padding: 6px;
    border-width: 1px;
    border-color: var(--verde_oscuro);
    background: var(--verde_claro);
    font-weight: bold;
    color: var(--negro);
    text-shadow: 2px 1px 3px var(--blanco);
    text-align: center;
}

#alertatemporal {
    position: fixed;
    left: 41%;
    border-radius: 35px;
    padding: 0 6px;
    margin: 0;
    top: -2px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

#porubaimagen {
    -webkit-animation: 4s rotate linear infinite;
    animation: 4s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

tr.marcada,
td.marcada {
    color: var(--blanco);
    background: var(--azul);
    font-weight: bold;
}

tr.error {
    color: white;
    background: red;
    font-weight: bold;
}

.trrojo tr tr {
    color: black;
}

.cajas {
    font-size: 0.7em;
    color: #7f87ff;
}

.caja {
    box-shadow: 0px 0px 3px 1px #b9b9b9;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 12px;
    border-radius: 7px;
}

.caja2 {
    box-shadow: 0px 0px 3px 1px #b9b9b95c;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 12px;
    background: #f9f9f95c;
}

.sticker {
    display: flex;
    position: relative;
    top: -32px;
    left: 0px;
    width: 101%;
}

.btn-primary {
    background-color: #337ab7;
    border-color: #337ab7;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #337ab7;
}

.btn-group button {
    transition: transform 0.3s ease;
}

.btn-group button:hover {
    transform: scale(1.15);
}

.textogrisclaro {
    color: lightgray;
}

a {
    color: #337ab7;
    text-decoration: none;
    font-weight: normal;
}

.alerta1 a {
    font-size: 1.2rem;
}

.informe_fecha {
    min-width: 120px;
}

.descatalogado {
    margin-left: 1rem;
    font-weight: 600;
    color: var(--fondo_rojo_oscuro);
}

.text-right {
    text-align: right;
}

.margen20 {
    margin-top: 20px;
}

.mt-2,
.mb-2 {
    margin-top: 2rem;
}

.mt-3,
.mb-3 {
    margin-top: 3rem;
}

.mt-6,
.mb-6 {
    margin-top: 6rem;
}

.mt-7,
.mb-7 {
    margin-top: 7rem;
}

.mt-8,
.mb-8 {
    margin-top: 8rem;
}

.mt-9,
.mb-9 {
    margin-top: 9rem;
}

.mt-1,
.mb-10 {
    margin-top: 10rem;
}

.bordeverde,
.form-control.bordeverde {
    color: white !important;
    background: green !important;
    font-weight: bold;
}

#myModal,
.modaloscuro {
    background-color: var(--azul_negro);
}

@media (min-width: 600px) {
    #libuscar {
        margin-top: 12px;
        left: calc(100vw - 272px);
        position: relative;
    }
}

@media (max-width: 600px) {
    #libuscar {
        display: none !important;
    }
}

.dataTables_filter {
    margin-top: 8px;
}

.label-datatables {
    margin-bottom: 8px;
}

.input-datatables {
    float: right;
    margin-left: 5px;
    height: 31px;
    width: 90%;
    border-radius: 4px;
    border-color: #d7d7d7;
}

input.form-control.tdeditable {
    border-style: solid;
    background: none;
    padding: 0 5px;
    box-shadow: none;
    height: 35px;
    border-width: 1px;
    border-color: #e9e9e9;
}

.tablasinpadding td {
    padding: 0 !important;
}

.tablasinpadding input {
    border: 0 !important;
}

.oculto {
    display: none !important;
}

.selected td,
.selected .tdeditable,
tr.selected,
td.selected {
    background-color: var(--grisoscuro);
    color: white;
}

.modal-left .modal-dialog {
    position: fixed;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.modal-left {
    padding-right: 0 !important;
}

.modal-left.show .modal-dialog {
    transform: translateX(0);
}

.modal-left .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border: none;
}

.modal-left .modal-header {
    border-radius: 0;
}

.modal-left .modal-footer {
    border-radius: 0;
    margin-top: auto;
}

.modal-left .modal-body {
    overflow-y: auto;
}

.offcanvas-start {
    width: 300px;
}

.menu-items .nav-link {
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    padding: 8px 12px;
    color: var(--azul);
}

.menu-items .nav-link:hover {
    background-color: #f0f7ff;
    color: var(--azul_claro);
    transform: translateX(5px);
}

.menu-items .nav-link i {
    width: 20px;
    text-align: center;
}

.menu-items .nav-link.active {
    background-color: var(--azul_claro);
    color: white;
}
 

.notification.show {
    transform: translateY(0);
    opacity: 1;
} 
 
.alert {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.alert a {
    text-decoration: none;
    font-weight: 500;
}

.badge {
    font-weight: 500;
    padding: 0.4em 0.6em;
}

.btn {
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fade-transition {
    transition: all 0.3s ease;
}

table.table-modern {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

table.table-modern thead th {
    background-color: var(--azul_claro);
    color: white;
    border-bottom: none;
    font-weight: 500;
}

table.table-modern tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

table.table-modern tbody tr {
    transition: background-color 0.2s ease;
}

table.table-modern tbody tr:hover {
    background-color: rgba(51, 122, 183, 0.1);
}

.card {
    border-radius: 8px;
        margin-bottom: 18px;

     
    transition: all 0.3s ease;
}



.card-header {
    font-weight: 500;
    border-bottom: none;
}

.form-control {
    border-radius: 6px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--azul_claro);
    box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card {
        margin-bottom: 15px;
    }

    .table-responsive {
        box-shadow: none;
        border-radius: 0;
    }
}

.action-icon {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: var(--azul);
}

.action-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.2);
}

.action-icon-edit:hover {
    color: var(--azul_claro);
}

.action-icon-delete:hover {
    color: var(--rojo);
}

select.form-select {
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.stock-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

.stock-high {
    background-color: var(--verde_claro);
    color: var(--verde_oscuro);
}

.stock-medium {
    background-color: #fff3cd;
    color: #856404;
}

.stock-low {
    background-color: var(--fondo_rojo);
    color: var(--rojo);
}



/* Estilo específico para la card-1 */
		.card-1 {
			border-radius: 14px;
			box-shadow: 0 4px 18px rgba(51, 122, 183, 0.10), 0 1.5px 4px rgba(0,0,0,0.04);
			border: 1px solid #e3eafc;
			background: linear-gradient(120deg, #f8fbff 80%, #eaf1fb 100%);
			transition: box-shadow 0.2s;
		}
		.card-1:hover {
			box-shadow: 0 8px 32px rgba(51, 122, 183, 0.18), 0 2px 8px rgba(0,0,0,0.08);
		}
		.card-1 .card-header.bg-primary {
			background: linear-gradient(90deg, var(--azul_negro, #337ab7) 80%, #4f8edc 100%) !important;
			color: #fff !important;
			border-radius: 14px 14px 0 0;
			border-bottom: 1px solid #e3eafc;
			box-shadow: 0 2px 8px rgba(51, 122, 183, 0.04);
		}
		.card-1 .card-body {
			background: transparent;
			padding-top: 18px !important;
			padding-bottom: 12px !important;
		}
		.card-1 label.form-label {
			color: var(--azul_negro);
			font-weight: 500;
			letter-spacing: 0.01em;
		}
		.card-1 input.form-control,
		.card-1 select.form-select {
			border-radius: 7px;
			border: 1px solid #b6d0f7;
			background: #fafdff;
			transition: border-color 0.2s, box-shadow 0.2s;
		}
		.card-1 input.form-control:focus,
		.card-1 select.form-select:focus {
			border-color: #337ab7;
			box-shadow: 0 0 0 0.12rem rgba(51, 122, 183, 0.13);
			background: #f4faff;
		}
		.card-1 input.form-control::placeholder {
			color: #b0b8c9;
			font-size: 0.97em;
		}
		.card-1 h6.mb-0 {
			font-size: 1.15rem;
			font-weight: 600;
			letter-spacing: 0.01em;
			display: flex;
			align-items: center;
			gap: 0.5em;
		}
	
		.card-1 input.form-control::placeholder {
            color: #6c7a89; /* Un gris más oscuro para mayor contraste */
            font-size: 0.97em;
        }
		@media (max-width: 768px) {
			.card-1 .row.g-2 > div {
				margin-bottom: 10px;
			}
			.card-1 {
				padding: 0 2px;
			}
		}

                        /* Estilo específico para la card-2 en tonos verdes */
            .card-2 {
                border-radius: 14px;
                box-shadow: 0 2px 12px rgba(0, 80, 40, 0.10), 0 1.5px 4px rgba(0,0,0,0.03);
                border: 1px solid #d2f5e3;
                background: linear-gradient(120deg, #ffffff 80%, #eff4fc 100%);
                transition: box-shadow 0.2s;
                margin-bottom: 18px;
            }
            .card-2:hover {
                box-shadow: 0 8px 28px rgba(0, 80, 40, 0.16), 0 2px 8px rgba(0,0,0,0.07);
            }
            .card-2 .card-header.bg-primary {
                background: linear-gradient(90deg, var(--azul_negro, #337ab7) 80%, #4f8edc 100%) !important;
                color: #fff !important;
                border-radius: 14px 14px 0 0;
                border-bottom: 1px solid #d2f5e3;
                box-shadow: 0 2px 8px rgba(0, 128, 0, 0.04);
                font-size: 1.08rem;
                font-weight: 600;
            }
            .card-2 .card-body {
                background: transparent;
                padding-top: 16px !important;
                padding-bottom: 12px !important;
            }
            .card-2 label.form-label {
                color: var(--verde_oscuro, #008000);
                font-weight: 500;
                letter-spacing: 0.01em;
            }
            .card-2 input.form-control,
            .card-2 select.form-select {
                border-radius: 7px;
                border: 1px solid #a7e7c1;
                background: #fafdff;
                transition: border-color 0.2s, box-shadow 0.2s;
            }
            .card-2 input.form-control:focus,
            .card-2 select.form-select:focus {
                border-color: var(--verde_oscuro, #008000);
                box-shadow: 0 0 0 0.12rem rgba(0, 128, 0, 0.13);
                background: #f4fff7;
            }
            .card-2 input.form-control::placeholder {
                color: #49705a;
                font-size: 0.97em;
            }
            .card-2 h6.mb-0 {
                font-size: 1.12rem;
                font-weight: 600;
                letter-spacing: 0.01em;
                display: flex;
                align-items: center;
                gap: 0.5em;
            }
            @media (max-width: 768px) {
                .card-2 .row.g-2 > div {
                    margin-bottom: 10px;
                }
                .card-2 {
                    padding: 0 2px;
                }
            }