/* This file is reserved for overriding and extending the template styles. */

.to-blink {
    animation: blink 1s steps(1, end) infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* estilo para que tome efecto cuando se copia al portapapeles */
.tmc_copy_to_clipboard {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.tmc_copy_to_clipboard.tmc_copied {
    background-color: #515151 !important;
    border: 1px solid #1c1c1c !important;
    border-radius: 4px;
    padding: 2px 4px;
}

/**** MENU ****/
html[data-placement=horizontal] .nav-container .menu-container .menu ul {
    padding: 0.1rem;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li > a.active, html[data-placement=horizontal] .nav-container .menu-container .menu > li > a:hover {
    box-shadow: 0 4px 10px rgb(47 47 47) !important;
    background: inherit !important;
}

/** ENTRADAS **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-entradas {
    margin: 3px;
    border-radius: 0 5px 0 5px;
    background-color: #ff4a46;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-entradas ul {
    background-color: #ff4a46 !important;
}
/** ROMANEOS **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-romaneos {
    margin: 3px;
    color: black !important;
    border-radius: 0 5px 0 5px;
    background-color: #ffed4a;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-romaneos a span {
    color: black !important;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-romaneos ul {
    background-color: #ffed4a !important;
}

/** EXPORTACIONES **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-exportaciones {
    margin: 3px;
    color: black !important;
    border-radius: 0 5px 0 5px;
    background-color: #00b3ff;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-salidas a span {
    color: white !important;
}

/** HOMOGENEIZADO **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-homogeneizado {
    margin: 3px;
    color: #ffffff !important;
    border-radius: 0 5px 0 5px;
    background-color: #a92400;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-salidas a span {
    color: white !important;
}

/** SALIDAS **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-salidas {
    margin: 3px;
    color: black !important;
    border-radius: 0 5px 0 5px;
    background-color: #00c851;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-exportaciones a span {
    color: white !important;
}
/** BOXES **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-boxes {
    margin: 3px;
    color: black !important;
    border-radius: 0 5px 0 5px;
    background-color: #c835b7;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-boxes a span {
    color: white !important;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-boxes ul {
    background-color: #c835b7 !important;
}

/** ANALISIS **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-analisis {
    margin: 3px;
    color: black !important;
    border-radius: 0 5px 0 5px;
    background-color: #8ba1af;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-analisis ul {
    background-color: #8ba1af !important;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-analisis a span {
    color: white !important;
}

/** REMITOS **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-remitos {
    margin: 3px;
    color: #f9fdff !important;
    border-radius: 0 5px 0 5px;
    background-color: #ff5b00;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-remitos a span {
    color: white !important;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-remitos ul {
    background-color: #ff5b00 !important;
}

/** ADUANA **/
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-aduana {
    margin: 3px;
    color: #f9fdff !important;
    border-radius: 0 5px 0 5px;
    background-color: #0048ff;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-aduana a span {
    color: white !important;
}
html[data-placement=horizontal] .nav-container .menu-container .menu > li.bg-menu-aduana ul {
    background-color: #0048ff !important;
}

/** LISTADOS **/

.table>thead {
    vertical-align: bottom;
    background-color: #253a52;
    color: white;
    border: #43566c;
}
.bg-listado-muestras {
    background-color: #253a52 !important;
    border-color: #265a73 !important;
}
.bg-listado-entradas {
    background-color: #ff4a46 !important;
    border-color: #dc423e !important;
}
.bg-listado-romaneos {
    background-color: #ffed4a !important;
    border-color: #d7c542 !important;
    color: #0c0c0c !important;
}
.bg-listado-exportaciones {
    background-color: #00b3ff !important;
    border-color: #00c9ff !important;
}
.bg-listado-salidas {
    background-color: #00c851 !important;
    border-color: #5dd97b !important;
}
.bg-listado-boxes {
    background-color: #c835b7 !important;
    border-color: #c852bb !important;
}

.bg-listado-remitos {
    background-color: #ff5b00 !important;
    border-color: #ff8a09 !important;
}

.bg-listado-analisis {
    background-color: #8ba1af !important;
    border-color: #a5becc !important;
}

.bg-listado-homogeneizado {
    background-color: #a92401 !important;
    border-color: #6e1a01 !important;
}

/** homogeneizado **/
.btn-homogeneizado,
.btn-homogeneizado:not(:disabled):not(.disabled):focus,
.btn-homogeneizado:not(:disabled):not(.disabled).focus {
    background-color: #a92401 !important;
    border-color: #6e1a01 !important;
}
.btn-homogeneizado:hover,
.btn-homogeneizado:not(:disabled):not(.disabled):focus:hover,
.btn-homogeneizado:not(:disabled):not(.disabled).focus:hover {
    background-color: #ff6b45 !important;
}

.btn-homogeneizado:not(:disabled):not(.disabled):active,
.btn-homogeneizado:not(:disabled):not(.disabled).active,
.show > .btn-homogeneizado:not(:disabled):not(.disabled)[data-bs-toggle=dropdown][aria-expanded=true],
.show > .btn-homogeneizado:not(:disabled):not(.disabled).dropdown-toggle[aria-expanded=true] {
    background-color: #681700 !important;
}
.btn-homogeneizado.disabled,
.btn-homogeneizado:disabled {
    background-color: #9e6b60;
}
/** homogeneizado */

/** aduana **/
.bg-listado-aduana {
    background-color: #0048ff !important;
    border-color: #0080ff !important;
}

.btn-aduana,
.btn-aduana:not(:disabled):not(.disabled):focus,
.btn-aduana:not(:disabled):not(.disabled).focus {
    background-color: #0048ff !important;
    border-color: #0080ff !important;
}
.btn-aduana:hover,
.btn-aduana:not(:disabled):not(.disabled):focus:hover,
.btn-aduana:not(:disabled):not(.disabled).focus:hover {
    background-color: #1d5eff !important;
}

.btn-aduana:not(:disabled):not(.disabled):active,
.btn-aduana:not(:disabled):not(.disabled).active,
.show > .btn-aduana:not(:disabled):not(.disabled)[data-bs-toggle=dropdown][aria-expanded=true],
.show > .btn-aduana:not(:disabled):not(.disabled).dropdown-toggle[aria-expanded=true] {
    background-color: #00288c !important;
}
.btn-aduana.disabled,
.btn-aduana:disabled {
    background-color: #5e8fff;
}
/** btn aduana */

/*** bg colors rows ***/
.bg-row-danger {
    background-color: rgba(255, 74, 70, 0.3) !important;
    border-color: #dc423e !important;
}

/** para resaltar la fila de los tambores con color mayor a 50 **/
.row-color-mayor-a {
    font-family: monospace;
    /*font-family: system-ui;*/
    font-weight: bold;
}

/**** colors *****/
.bg-gradient-filters {
    background-image: linear-gradient(160deg, #ffffff, #fff9ba, #faf873) !important;
}

.bg-orange {
    color: #ffffff !important;
    background-color: #fd7e14 !important;
}

.bg-aduana {
    color: #ffffff !important;
    background-color: #1d5eff !important;
}

.bg-cyan {
    color: #ffffff !important;
    background-color: #0dcaf0 !important;
}


/**** tables *****/
.table>:not(caption)>*>* {
    padding: 0.2rem 0.2rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
}

table.dataTable.table-striped>tbody>tr.odd.selected>* {
    /*box-shadow: inset 0 0 0 9999px #3b557af2;*/
    box-shadow: none;
    background-color: #3b557a;
    color: white;
}
table.dataTable.table-striped>tbody>tr.even.selected>* {
    /*box-shadow: inset 0 0 0 9999px #3b557af2;*/
    box-shadow: none;
    background-color: #3b557a;
    color: white;
}


table.dataTable.table-striped.bg-boxes>tbody>tr.odd.selected>* {
    box-shadow: none;
    background-color: #c835b7;
    color: white;
}
table.dataTable.table-striped.bg-boxes>tbody>tr.even.selected>* {
    box-shadow: none;
    background-color: #c835b7;
    color: white;
}

table.dataTable.table-hover>tbody>tr:hover {
    cursor: pointer;
    background-color: #c7c7c7;
    color: white;
}

.modal-header, .modal-body, .modal-footer {
    padding: var(--card-spacing);
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.modal-left.large-30 .modal-dialog {
    max-width: 29%;
}
.modal-right.x-large .modal-dialog {
    max-width: 730px;
}
.modal-right.large-30 .modal-dialog {
    max-width: 29%;
}
.modal-right.large-70 .modal-dialog {
    max-width: 69%;
}
.modal-right.xx-large .modal-dialog {
    max-width: 80%;
}


.form-control:disabled,
.form-control[readonly] {
    background: #eeeeee !important;
    border-color: #dddddd !important;
    color: #2B2B2B;
    -webkit-text-fill-color: #4c4c4c !important;
}

[x-cloak] { display: none !important; }

/* ============ Notify v2 (drop-in) ============ */
/* Tokens base */
.notif{
    --n-bg:#ffffff;
    --n-fg:#0f172a;                 /* slate-900 */
    --n-muted:#475569;              /* slate-600 */
    --n-ring:rgba(2,6,23,.14);
    --n-shadow:0 10px 30px rgba(2,6,23,.16);
    --n-radius:16px;
    --n-pad-y:14px;
    --n-pad-x:16px;
    --n-icon-bg:rgba(0,0,0,.06);
    --n-progress-bg:rgba(0,0,0,.08);
    --n-progress-fg:currentColor;
    --n-blur:6px;
    --n-gap:12px;

    background:var(--n-bg);
    color:var(--n-fg);
    border:1px solid var(--n-ring);
    padding:var(--n-pad-y) var(--n-pad-x);
    border-radius:var(--n-radius);
    box-shadow:var(--n-shadow);
    backdrop-filter:saturate(140%) blur(var(--n-blur));
    width:360px; max-width:min(92vw, 420px);
    position:relative;
    transition:transform .24s ease, opacity .24s ease, box-shadow .24s ease, background-color .24s ease, color .24s ease;
    will-change:transform, opacity;
    transform:translateY(2px);
    opacity:.98;
}

/* Layout */
.notif-wrap{ display:flex; align-items:flex-start; gap:var(--n-gap); }
.notif-icon{
    width:38px; height:38px; flex:0 0 38px;
    border-radius:12px; display:grid; place-items:center;
    background:var(--n-icon-bg);
    font-size: x-large;
}
.notif-title{
    font-weight:700; margin:0; line-height:1.2;
    letter-spacing:.2px; font-size:1.02rem;
}
.notif-message{
    margin-top:4px; font-size:.95rem; line-height:1.4; color:var(--n-muted);
}

/* Close button accesible */
.notif .close{
    position:absolute; top:8px; right:10px;
    font-size:16px; opacity:.55; line-height:1; cursor:pointer;
    border-radius:8px; padding:4px;
    transition:opacity .2s ease, background-color .2s ease, transform .2s ease;
}
.notif .close:hover{ opacity:.95; background:rgba(0,0,0,.05); transform:scale(1.05); }
.notif .close:active{ transform:scale(.97); }
.notif .close:focus-visible{
    outline:2px solid transparent;
    box-shadow:0 0 0 3px rgba(59,130,246,.45); /* azul accesible */
}

/* Progreso */
.notif-progress{
    height:3px; border-radius:3px; margin-top:10px;
    background:var(--n-progress-bg); overflow:hidden;
}
.notif-progress>span{
    display:block; height:100%;
    background:linear-gradient(90deg, var(--n-progress-fg) 0%, transparent 100%);
    opacity:.5;
    animation:notif-progress-pulse 1.4s ease-in-out infinite;
}
@keyframes notif-progress-pulse{
    0%,100%{ transform:translateX(-10%); opacity:.35; }
    50%{ transform:translateX(10%); opacity:.6; }
}

/* Entradas/Salidas */
.notif.is-enter{ transform:translateY(0); opacity:1; }
.notif.is-exit{ transform:translateY(-4px); opacity:0; }

/* Tamaños opcionales */
.notif.sm{ --n-radius:12px; --n-pad-y:10px; --n-pad-x:12px; --n-gap:10px; }
.notif.lg{ --n-radius:18px; --n-pad-y:18px; --n-pad-x:20px; }

/* Variantes (mismos nombres que usabas) */
.notif-info    { --n-bg: #cce0f9; --n-fg: #0b3d91; --n-icon-bg: #a4bff9; }
.notif-success { --n-bg: #bcfbdd; --n-fg: #222222; --n-icon-bg: #49fdc3; }
.notif-warning { --n-bg: #f8f9b9; --n-fg: #63640d; --n-icon-bg: #f1fb57; }
.notif-danger  { --n-bg: #ffe6e6; --n-fg: #fb0000; --n-icon-bg: #ffb2b2; }

/* Modo oscuro */
.dark .notif{
    --n-bg:#0b1220; --n-fg:#e5e7eb; --n-muted:#cbd5e1;
    --n-ring:rgba(148,163,184,.22);
    --n-shadow:0 14px 36px rgba(0,0,0,.55);
    --n-icon-bg:rgba(255,255,255,.06);
    --n-progress-bg:rgba(255,255,255,.08);
    opacity:1;
}
.dark .notif-info    { --n-bg:#0b172a; --n-fg: #70b0fa; --n-icon-bg:rgba(59,130,246,.18); }
.dark .notif-success { --n-bg:#0f1a14; --n-fg: #6dfda2; --n-icon-bg:rgba(34,197,94,.18); }
.dark .notif-warning { --n-bg:#1b1707; --n-fg:#fde68a; --n-icon-bg:rgba(234,179,8,.22); }
.dark .notif-danger  { --n-bg:#1a0f12; --n-fg: #fa7878; --n-icon-bg:rgba(248,113,113,.22); }

/* Alta-contraste opcional */
@media (prefers-contrast: more){
    .notif{ border-color:rgba(2,6,23,.28); box-shadow:0 0 0 3px rgba(2,6,23,.08), var(--n-shadow); }
    .dark .notif{ box-shadow:0 0 0 3px rgba(148,163,184,.22), var(--n-shadow); }
}

/* Respeto por reduce motion */
@media (prefers-reduced-motion: reduce){
    .notif, .notif .close{ transition:none; }
    .notif-progress>span{ animation:none; }
}

/* Extras opcionales (modificadores) */
.notif.ghost{
    background:transparent; backdrop-filter:none;
    border-color:transparent; box-shadow:none;
}
.notif.outline{
    box-shadow:none; background:color-mix(in srgb, var(--n-bg) 90%, transparent);
}

/* Soporte “bar” compacto (toast arriba/abajo) */
.notif.bar{
    --n-radius:10px; --n-pad-y:10px; width:min(560px, 96vw);
}
.notif.bar .notif-icon{ width:32px; height:32px; border-radius:10px; }
.notif.bar .notif-title{ font-size:.98rem; }
.notif.bar .notif-message{ font-size:.93rem; }