/* 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: ajustes compactos para mostrar dos listados en una sola pantalla. */
.lote-homogeneizado-counter {
    font-size: 0.78rem;
}

.lote-homogeneizado-control-sm,
.lote-homogeneizado-filter,
.lote-homogeneizado-page .select2-container--bootstrap4 .select2-selection {
    height: 30px;
    min-height: 30px;
    font-size: 0.78rem;
}

.lote-homogeneizado-control-btn {
    align-items: center;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    min-height: 30px;
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

.lote-homogeneizado-filter {
    display: inline-block;
    margin-right: 0.15rem;
    width: 96px;
}

.lote-homogeneizado-filter-color {
    width: 68px;
}

.lote-homogeneizado-filter-short {
    width: 76px;
}

.lote-homogeneizado-filters .select2-container {
    display: inline-block;
    margin-right: 0.15rem;
    vertical-align: middle;
    width: 138px !important;
}

.lote-homogeneizado-filters .select2-container--bootstrap4 .select2-selection--single {
    align-items: center;
    display: flex;
    height: 30px;
    min-height: 30px;
    padding-right: 1.6rem;
    position: relative;
}

.lote-homogeneizado-filters .select2-container--bootstrap4 .select2-selection__rendered {
    line-height: 1.2;
    padding-left: 0.55rem;
    padding-right: 0;
}

.lote-homogeneizado-filters .select2-container--bootstrap4 .select2-selection__arrow {
    height: 30px;
    position: absolute;
    right: 0.35rem;
    top: 0;
    width: 0.8rem;
}

.lote-homogeneizado-filters .select2-container--bootstrap4 .select2-selection__arrow b {
    margin-top: -2px;
}

.lote-homogeneizado-state-filter .select2-container {
    display: inline-block;
    margin-left: 0.15rem;
    vertical-align: middle;
    width: 112px !important;
}

.lote-homogeneizado-state-filter .select2-container--bootstrap4 .select2-selection--single {
    align-items: center;
    display: flex;
    padding-right: 1.6rem;
    position: relative;
}

.lote-homogeneizado-state-filter .select2-container--bootstrap4 .select2-selection__rendered {
    line-height: 1.2;
    padding-left: 0.55rem;
    padding-right: 0;
}

.lote-homogeneizado-state-filter .select2-container--bootstrap4 .select2-selection__arrow {
    height: 30px;
    position: absolute;
    right: 0.35rem;
    top: 0;
    width: 0.8rem;
}

.lote-homogeneizado-state-filter .select2-container--bootstrap4 .select2-selection__arrow b {
    margin-top: -2px;
}

.table-lote-homogeneizado {
    font-size: 0.73rem;
}

.table-lote-homogeneizado.table > :not(caption) > * > * {
    padding: 0.16rem 0.28rem;
}

.table-lote-homogeneizado thead th,
.lote-homogeneizado-page .dtfc-fixed-right thead th {
    background-color: #a92401 !important;
    color: #ffffff !important;
    font-size: 0.68rem;
    line-height: 1.1;
    padding-bottom: 0.36rem !important;
    padding-top: 0.36rem !important;
    white-space: nowrap;
}

#table-lote-homogeneizado-procesados {
    font-weight: 600;
}

#table-lote-homogeneizado-pendientes th:nth-child(2),
#table-lote-homogeneizado-pendientes td:nth-child(2),
#table-lote-homogeneizado-procesados th:nth-child(2),
#table-lote-homogeneizado-procesados td:nth-child(2) {
    max-width: 180px !important;
    min-width: 180px !important;
    width: 180px !important;
}

#table-lote-homogeneizado-pendientes th:nth-child(6),
#table-lote-homogeneizado-pendientes td:nth-child(6),
#table-lote-homogeneizado-procesados th:nth-child(6),
#table-lote-homogeneizado-procesados td:nth-child(6) {
    min-width: 120px !important;
    width: 120px !important;
}

#table-lote-homogeneizado-pendientes th:last-child,
#table-lote-homogeneizado-pendientes td:last-child,
#table-lote-homogeneizado-procesados th:last-child,
#table-lote-homogeneizado-procesados td:last-child {
    min-width: 120px !important;
    width: 120px !important;
}

.lote-homogeneizado-page table.dataTable thead .dtfc-fixed-right,
.lote-homogeneizado-page table.dataTable thead th.dtfc-fixed-right,
.lote-homogeneizado-page .dtfc-fixed-right thead th,
.lote-homogeneizado-page .dtfc-right-top-blocker,
.lote-homogeneizado-page .dtfc-right-bottom-blocker {
    background-color: #a92401 !important;
    border-color: #6e1a01 !important;
    color: #ffffff !important;
}

.lote-homogeneizado-page table.dataTable thead th.dtfc-fixed-right {
    background-clip: border-box !important;
    border-bottom: 1px solid #6e1a01 !important;
    box-shadow: 0 1px 0 #6e1a01;
    overflow: hidden;
    z-index: 4;
}

.lote-homogeneizado-page .dataTables_scrollHead {
    overflow: hidden !important;
}

#table-lote-homogeneizado-pendientes tbody tr.odd > *,
#table-lote-homogeneizado-pendientes tbody tr.lote-homogeneizado-row-pendiente.odd > * {
    background-color: #f8e9bd !important;
    box-shadow: none !important;
}

#table-lote-homogeneizado-pendientes tbody tr.even > *,
#table-lote-homogeneizado-pendientes tbody tr.lote-homogeneizado-row-pendiente.even > * {
    background-color: #fff8e6 !important;
    box-shadow: none !important;
}

#table-lote-homogeneizado-procesados tbody tr.odd > * {
    background-color: #c9dcf6 !important;
    box-shadow: none !important;
    color: #10233d !important;
}

#table-lote-homogeneizado-procesados tbody tr.even > * {
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #10233d !important;
}

.lote-homogeneizado-row-action {
    align-items: center;
    display: inline-flex;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.35rem;
}

table.table-lote-homogeneizado.dataTable tbody tr.lote-homogeneizado-row-pendiente > * {
    box-shadow: none !important;
    color: #111111 !important;
    font-weight: 600;
}

.lote-homogeneizado-sita-link {
    color: #0a58ca;
    font-weight: 700;
    text-decoration: underline;
}

.lote-homogeneizado-status-dot {
    border-radius: 50%;
    display: inline-block;
    height: 0.62rem;
    min-width: 0.62rem;
    width: 0.62rem;
}

.lote-homogeneizado-status-dot-iniciado {
    background-color: #198754;
}

.lote-homogeneizado-status-dot-finalizado {
    background-color: #dc3545;
}

.table-lote-homogeneizado.dataTable tbody tr.selected > * {
    background-color: #0b5d83 !important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.02) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.table-lote-homogeneizado.dataTable tbody tr.selected .btn {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.lote-homogeneizado-page .dtfc-fixed-right {
    background-color: #ffffff !important;
    box-shadow: -5px 0 8px -7px rgba(0, 0, 0, 0.65);
}

.table-lote-homogeneizado.dataTable tbody tr.selected > .dtfc-fixed-right {
    background-color: #0b5d83 !important;
}

#table-lote-homogeneizado-pendientes tbody tr.selected > *,
#table-lote-homogeneizado-procesados tbody tr.selected > *,
#table-lote-homogeneizado-pendientes tbody tr.odd.selected > *,
#table-lote-homogeneizado-pendientes tbody tr.even.selected > *,
#table-lote-homogeneizado-procesados tbody tr.odd.selected > *,
#table-lote-homogeneizado-procesados tbody tr.even.selected > * {
    background-color: #0b5d83 !important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.03) !important;
    color: #ffffff !important;
    font-weight: 700;
}

#table-lote-homogeneizado-pendientes tbody tr.selected a,
#table-lote-homogeneizado-procesados tbody tr.selected a {
    color: #ffffff !important;
}

.lote-homogeneizado-page .dataTables_scrollBody {
    border-bottom: 1px solid #d6d6d6;
}

.lote-homogeneizado-modal {
    font-size: 0.82rem;
}

.lote-homogeneizado-modal-status {
    font-size: 0.8rem;
    min-width: 82px;
}

.lote-homogeneizado-modal-summary,
.lote-homogeneizado-modal-grid {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.lote-homogeneizado-modal-summary {
    grid-template-columns: minmax(185px, 0.85fr) minmax(285px, 1.6fr) minmax(170px, 0.9fr) repeat(auto-fit, minmax(130px, 1fr));
}

.lote-homogeneizado-modal-field {
    background-color: #f7f7f7;
    border: 1px solid #dddddd;
    padding: 0.35rem 0.45rem;
}

.lote-homogeneizado-modal-field-provider {
    min-width: 285px;
}

.lote-homogeneizado-modal-field-wide {
    grid-column: 1 / -1;
}

.lote-homogeneizado-modal-field span {
    color: #666666;
    display: block;
    font-size: 0.68rem;
    line-height: 1;
    text-transform: uppercase;
}

.lote-homogeneizado-modal-field strong {
    color: #111111;
    display: block;
    font-size: 0.86rem;
    line-height: 1.25;
    margin-top: 0.18rem;
    min-height: 1rem;
}

.lote-homogeneizado-modal-field-left strong {
    text-align: left;
}

.lote-homogeneizado-modal-field-center strong {
    text-align: center;
}

.lote-homogeneizado-modal-field-right strong {
    text-align: right;
}

.lote-homogeneizado-modal-observaciones {
    background-color: #f7f7f7;
    border: 1px solid #dddddd;
    margin-top: 0.45rem;
    padding: 0.45rem 0.55rem;
}

.lote-homogeneizado-modal-observaciones span {
    color: #666666;
    display: block;
    font-size: 0.68rem;
    line-height: 1;
    text-transform: uppercase;
}

.lote-homogeneizado-modal-observaciones strong {
    color: #111111;
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0.2rem;
    white-space: pre-wrap;
}

.lote-homogeneizado-modal-panel {
    border: 1px solid #d6d6d6;
    padding: 0.45rem;
}

.lote-homogeneizado-modal-panel-title {
    color: #222222;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.lote-homogeneizado-modal-empty {
    background-color: #f7f7f7;
    border: 1px dashed #c8c8c8;
    color: #555555;
    padding: 0.6rem;
}

.lote-homogeneizado-modal-table-wrap {
    max-height: 46vh;
}

.lote-homogeneizado-modal-table {
    margin-bottom: 0;
}

.lote-homogeneizado-modal-raw {
    background-color: #f7f7f7;
    border: 1px solid #dddddd;
    color: #333333;
    font-size: 0.72rem;
    margin: 0;
    max-height: 180px;
    overflow: auto;
    padding: 0.5rem;
}

/** 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; }