@charset "UTF-8";
/* ==========================================================================
   custom-nv-order-manage.css — estilos específicos de mod_order_manage.
   Extraído del <style> inline del template (F4, 2026-06-01) para cumplir la
   regla de oro "no CSS inline". Contenido verbatim del bloque original
   (líneas 1110-1157). El rename ns-* → nv-* se hace en Stage 4.
   Cargar AL FINAL del layout (tras nv-system.css) para preservar la cascada
   que tenía el bloque inline (que vivía en el <body>, ganando a las hojas
   del <head>).
   ========================================================================== */

/* Fix botón btn-check + btn-outline-secondary: el primer radio "15 días" del
   modal #modal-self-suspend quedaba con texto invisible (contraste roto).
   Aseguramos color visible en estados :checked y default. (02-May-2026) */
#self-suspend-days-group .btn-outline-secondary { color: #182433 !important; border-color: #dadfe5 !important; background-color: #ffffff !important; }
#self-suspend-days-group .btn-check:checked + .btn-outline-secondary,
#self-suspend-days-group .btn-check:active + .btn-outline-secondary { background-color: #0054a6 !important; border-color: #0054a6 !important; color: #ffffff !important; }
.nv-om-plan-search-wrap { position: relative; }
.nv-om-plan-search { position: relative; display: flex; align-items: center; }
.nv-om-plan-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; z-index: 2; }
.nv-om-plan-search .form-control { padding-left: 44px !important; padding-right: 42px !important; height: 44px; font-size: 0.95rem; border-radius: 10px !important; border: 1.5px solid #e2e8f0; }
.nv-om-plan-search .form-control:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
.nv-om-plan-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #64748b; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.nv-om-plan-search-clear:hover { background: #f1f5f9; color: #1e293b; }
.nv-om-plan-search-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.nv-om-chip { background: #ffffff !important; border: 1.5px solid #e2e8f0 !important; color: #475569 !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all .15s ease; }
.nv-om-chip:hover { border-color: #0891b2 !important; color: #0891b2 !important; }
.nv-om-chip.is-active { background: #0891b2 !important; border-color: #0891b2 !important; color: #ffffff !important; }
.nv-om-empty-state-inline { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2rem 1rem; color: #64748b; text-align: center; background: #f8fafc; border-radius: 12px; border: 1px dashed #cbd5e1; margin-top: 1rem; }
.nv-om-empty-state-inline svg { color: #94a3b8; }
.nv-om-modal .modal-footer.nv-om-modal-footer-sticky { flex-direction: column !important; align-items: stretch !important; gap: 0.85rem !important; padding: 1rem 1.5rem !important; background: #f8fafc !important; border-top: 1px solid #e2e8f0; }
.nv-om-footer-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1rem; background: #ffffff; border: 1.5px solid #0891b2; border-radius: 10px; box-shadow: 0 2px 8px rgba(8,145,178,.08); }
.nv-om-footer-summary-compare { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; color: #475569; flex: 1 1 auto; min-width: 0; }
.nv-om-footer-summary-compare small { color: #94a3b8; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: .03em; margin-right: 3px; }
.nv-om-footer-summary-compare strong { color: #1e293b; font-weight: 600; }
.nv-om-footer-summary-compare svg { color: #0891b2; flex-shrink: 0; }
.nv-om-footer-summary-current, .nv-om-footer-summary-new { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.nv-om-footer-summary-total { display: inline-flex; align-items: baseline; gap: 0.75rem; padding-left: 1rem; border-left: 1px solid #e2e8f0; }
.nv-om-footer-summary-label { font-size: 0.82rem; color: #64748b; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.nv-om-footer-summary-amount { font-size: 1.35rem; font-weight: 700; color: #0891b2; line-height: 1; }
.nv-om-footer-summary-amount.is-charge { color: #0891b2; }
.nv-om-footer-summary-amount.is-credit { color: #10b981; }
.nv-om-footer-summary-amount.is-neutral { color: #64748b; }
.nv-om-footer-actions { display: flex; justify-content: flex-end; gap: 0.7rem; align-items: center; }
@media (max-width: 640px) {
    .nv-om-footer-summary { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .nv-om-footer-summary-total { padding-left: 0; border-left: none; border-top: 1px dashed #e2e8f0; padding-top: 0.5rem; justify-content: space-between; }
    .nv-om-footer-summary-current, .nv-om-footer-summary-new { max-width: none; }
}

/* DARK MODE — este archivo usa !important pervasivo y carga al final del
   layout, así que los overrides también necesitan !important para ganar. */
[data-bs-theme="dark"] #self-suspend-days-group .btn-outline-secondary {
    background-color: var(--nv-card-bg) !important;
    color: var(--nv-text) !important;
    border-color: var(--nv-border) !important;
}
[data-bs-theme="dark"] .nv-om-plan-search-clear:hover {
    background: var(--nv-border-soft);
    color: var(--nv-text-soft);
}
[data-bs-theme="dark"] .nv-om-chip {
    background: var(--nv-card-bg) !important;
    border-color: var(--nv-border) !important;
    color: var(--nv-text-soft) !important;
}
[data-bs-theme="dark"] .nv-om-empty-state-inline {
    background: var(--nv-page-bg);
    color: var(--nv-text-soft);
}
[data-bs-theme="dark"] .nv-om-modal .modal-footer.nv-om-modal-footer-sticky {
    background: var(--nv-page-bg) !important;
}
[data-bs-theme="dark"] .nv-om-footer-summary {
    background: var(--nv-card-bg);
}
