/* ============================================================
   ESTILOS2.CSS  —  ARCHIVO MAESTRO DE OVERRIDES  (Metrilux / Factory.Net)
   ------------------------------------------------------------
   Se carga DESPUÉS de bootstrap5 + styles.css (SB Admin Pro).
   Acá va TODO lo propio del proyecto: ajustes de marca, parches
   y clases puente. Mantener este archivo como ÚNICO punto de
   consolidación facilita el rollback (basta con quitar este link).
   ============================================================ */

:root {
    /* Paleta Metrilux (heredada de Estilos.css original) */
    --MtxAzul: #0061a2;
    --MtxTurquesa: #09aebe;
    --MtxTurquesaClaro: #44d9e6;
    --MtxGris: #7F8C8D;
}

/* ---- 1. Encabezado de página ------------------------------
   Usamos el gradiente del diseño (styles.css: #0A0A0A → #227e87,
   oscuro→teal). No lo pisamos para que coincida 1:1 con el php. */

/* ---- 2. Botones primarios en color de marca -------------- */
.btn-primary {
    --bs-btn-bg: var(--MtxAzul);
    --bs-btn-border-color: var(--MtxAzul);
    --bs-btn-hover-bg: #004f85;
    --bs-btn-hover-border-color: #004f85;
    --bs-btn-active-bg: #004f85;
}

/* Botón de marca turquesa (ej. "Confirmar" el presupuesto) */
.btn-mtx-turquesa {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--MtxTurquesa);
    --bs-btn-border-color: var(--MtxTurquesa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #078c99;
    --bs-btn-hover-border-color: #078c99;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #067885;
    --bs-btn-active-border-color: #067885;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--MtxTurquesaClaro);
    --bs-btn-disabled-border-color: var(--MtxTurquesaClaro);
}

/* ---- 3. Densidad de UI (sistema de gestión, mucha tabla) -
   Reducimos un poco para acercarlo al look compacto original. */
body { font-size: 0.9rem; }
.card-header { font-weight: 600; }

/* ---- 4. Tarjeta de filtros (clase del diseñador) --------- */
.cardFilter {
    background: #fff;
    border: 1px solid rgba(0,0,0,.075);
    border-radius: .5rem;
}

/* ---- 5. Clases PUENTE -----------------------------------
   Equivalencias para que clases viejas del aspx no rompan el
   layout mientras se migra. Agregar acá según haga falta.   */
.TextAlignCenter { text-align: center; }
.Margin0Auto { margin: 0 auto; }
.DisplayInlineBlock { display: inline-block; }

/* ---- 6. Componente Token WhatsApp — rediseño según design system Metrilux (NuevosAjustes) ----
   Marca: turquesa #58C0D5 / negro / fondo cálido #F3F3ED. Sin verdes WhatsApp ni animación. */
:root {
    --mtx-ds-turquesa: #58C0D5;
    --mtx-ds-turquesa-hover: #2E6E7E;
    --mtx-ds-ink: #141414;
    --mtx-ds-ink-soft: #223344;
    --mtx-ds-warm: #F3F3ED;
    --mtx-ds-warm-deep: #E9E9E0;
    --mtx-ds-border: #A3A49E;
    --mtx-ds-border-subtle: #D9D9D2;
}
.token-container { background: #000; border: none; border-radius: 16px; padding: 0; margin: 10px 0; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.token-header { color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0; padding: 20px 24px 14px; background: linear-gradient(115deg, #050d0c 0%, #0d3a3a 45%, #1f7a7a 100%); }
.token-header::after { content: ""; display: block; width: 40px; height: 2px; background: var(--mtx-ds-turquesa); margin: 10px auto 0; border-radius: 999px; }
.token-body { background-color: #fff; border-radius: 16px 16px 0 0; padding: 24px 20px 20px; }
.token-value { font-family: ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace; font-size: 14px; font-weight: normal; color: var(--mtx-ds-ink); letter-spacing: normal; background-color: var(--mtx-ds-warm-deep); padding: 14px 16px; border-radius: 8px; border: 1.5px dashed var(--mtx-ds-turquesa); display: inline-block; margin-right: 10px; }
.btn-copiar { background-color: var(--mtx-ds-turquesa); border: 1px solid transparent; border-radius: 8px; padding: 12px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: 14px; transition: background .15s ease; vertical-align: middle; }
.btn-copiar:hover { background-color: var(--mtx-ds-turquesa-hover); transform: none; }
.btn-whatsapp { width: 100%; justify-content: center; background-color: #000; border: 1px solid transparent; border-radius: 8px; padding: 14px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; font-size: 15px; transition: background .15s ease; box-shadow: none; }
.btn-whatsapp:hover { background-color: var(--mtx-ds-ink-soft); transform: none; }
.mensaje-copiado { display: none; margin-top: 10px; color: var(--mtx-ds-turquesa-hover); font-size: 13px; font-weight: bold; background-color: #E9F6F9; padding: 8px 15px; border-radius: 5px; }
.token-footer { color: rgba(255,255,255,.65); font-size: 12px; margin: 0; padding: 14px 24px 20px; }
.whatsapp-icon { vertical-align: middle; margin-right: 6px; }

/* ---- 6b. Botonera de Presupuestación — toolbar según design system Metrilux (NuevosAjustes) ----
   Primario turquesa, Limpiar blanco con borde, Imprimir oscuro. Aplica a toda botonera .action-buttons. */
.action-buttons { background: #fff; border-bottom: 1px solid var(--mtx-ds-border-subtle); box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 8px; padding: 16px 20px; }
.action-buttons .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 8px; font-weight: 500; }
.action-buttons .btn-primary { background-color: var(--mtx-ds-turquesa); border-color: transparent; color: #fff; }
.action-buttons .btn-primary:hover { background-color: var(--mtx-ds-turquesa-hover); color: #fff; }
.action-buttons .btn-outline-secondary { background-color: #fff; border: 1px solid var(--mtx-ds-border); color: var(--mtx-ds-ink); }
.action-buttons .btn-outline-secondary:hover { background-color: var(--mtx-ds-warm); color: var(--mtx-ds-ink); }
.action-buttons .btn-secondary { background-color: var(--mtx-ds-ink-soft); border-color: transparent; color: #fff; }
.action-buttons .btn-secondary:hover { background-color: #000; color: #fff; }
.action-buttons .btn-mtx-turquesa { background-color: var(--mtx-ds-turquesa); border-color: transparent; color: #fff; }
.action-buttons .btn-mtx-turquesa:hover { background-color: var(--mtx-ds-turquesa-hover); color: #fff; }

/* ---- 6b2. Modal de mensajes ShowLog (div_master_alert): fondo blanco plano,
   sin el bg-waves.svg turquesa que el tema aplica a .card-body ---- */
#div_master_alert .card-body,
#div_master_alert .card-footer {
    background: #fff !important;
    background-image: none !important;
    color: var(--mtx-ds-ink);
}
#div_master_alert .card-footer { border-top: 1px solid var(--mtx-ds-border-subtle); }

/* ---- 6c. Dashboard Home: letras más grandes en tarjetas de indicadores (Ajustes 21/07, punto 5) ---- */
div[id$="div_indicadores"] .card .card-body .text-white { font-size: 1.15rem; }   /* etiquetas: Ventas mensuales, Líneas vendidas, etc. */
div[id$="div_indicadores"] .card .text-xl { font-size: 2.6rem; }                  /* valores: $ 199451, 4, etc. */
div[id$="div_indicadores"] .card .card-footer { font-size: .95rem; }              /* Ver detalle */

/* ---- 7. Sidenav con scroll: SB Admin usa overflow-y:overlay (deprecado, solo hover).
   Forzamos auto con la misma cadena de selectores + !important para ganar. ---- */
/* El wrapper del menú (div_menu, runat=server → id con prefijo) debe pasar los 100vh al .sidenav.
   Lo targeteo por estructura (div hijo directo del nav) para no depender del id renderizado. */
#layoutSidenav #layoutSidenav_nav > div { height: 100%; }
body.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav .sidenav-menu {
    overflow-y: auto !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
    max-height: calc(100vh - 56px) !important; /* acota al viewport: scroll seguro aunque falle la cadena de altura */
}

/* ---- 8. Panel de alertas: tamaño/posición usable ---- */
.div_alertas {
    position: fixed !important;
    bottom: 115px !important;
    right: 30px !important;
    width: 340px !important;
    height: auto !important;
    max-height: 60vh !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.28) !important;
    padding: 14px !important;
    overflow-y: auto !important;
    z-index: 2100 !important;
    text-align: left !important;
}

/* ---- 9. Compactar separación vertical en formularios migrados ---- */
.card-body .row { --bs-gutter-y: 0.45rem; }
.card-body .form-label { margin-bottom: 0.15rem; }

/* ---- 10. Grillas: botón "Editar" es un <input type=button> (no soporta ::before).
   Se oculta el texto y se pinta el lápiz como background SVG. ---- */
.table td .btn-outline-primary {
    font-size: 0 !important;
    width: 2.2rem !important;
    height: 1.9rem;
    padding: 0 !important;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d6efd'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: .95rem !important;
}
.table td .btn-outline-primary:hover { background-color: #cfe2ff !important; }

/* ---- 11. Grillas: badge de estado (lo envuelve el script del master) ---- */
.table .badge-estado { font-weight: 600; }

/* ---- 11b. Fila seleccionada (GridSelectedItemStyle): resalte visible.
   La clase legacy no tenía estilo en el diseño nuevo y table-striped la tapaba. ---- */
tr.GridSelectedItemStyle,
tr.GridSelectedItemStyle > td,
tr.GridSelectedItemStyle > th {
    background-color: rgba(9, 174, 190, 0.16) !important;
    color: #212529 !important;
    box-shadow: inset 3px 0 0 0 var(--MtxTurquesa);
    font-weight: 600;
}
tr.GridSelectedItemStyle a { color: var(--MtxAzul) !important; }

/* ---- 11c. Modal lateral (slide desde la derecha) para CUALQUIER modal .fade-slide-right.
   styles.css lo tenía scopeado solo a #modalEDIT/#modalADD; lo generalizamos a la clase. ---- */
.modal.fade-slide-right.show .modal-content { transform: translateX(0%) !important; }
.modal.fade-slide-right .modal-dialog-scrollable .modal-content { max-height: unset; height: 100vh !important; }
.modal.fade-slide-right .modal-dialog-right {
    position: fixed; top: 0; right: 0; margin: 0; height: 100vh; width: 100vw; max-width: none;
}
@media (min-width: 768px) { .modal.fade-slide-right .modal-dialog-right { width: 40vw; } }
@media (min-width: 992px) { .modal.fade-slide-right .modal-dialog-right { width: 30vw; } }
.modal.fade-slide-right .modal-dialog-right .modal-content {
    border-radius: 0; border-top-left-radius: .3rem; border-bottom-left-radius: .3rem;
    transform: translateX(100%); transition: all .3s ease-in-out;
}
/* Botón cerrar (X) bien visible en TODOS los modales laterales: círculo turquesa + X blanca
   dibujada por CSS (no depende del SVG de Bootstrap, que quedaba casi invisible). */
.modal.fade-slide-right .modal-header .btn-close {
    opacity: 1 !important;
    width: 2rem; height: 2rem; padding: 0; margin: 0; flex: 0 0 auto;
    background: var(--MtxTurquesa, #09aebe) !important;
    border-radius: 50%; position: relative; box-shadow: none;
}
.modal.fade-slide-right .modal-header .btn-close:hover { background: var(--MtxAzul, #034f5c) !important; }
.modal.fade-slide-right .modal-header .btn-close::before,
.modal.fade-slide-right .modal-header .btn-close::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 1rem; height: 2px; background: #fff; border-radius: 2px;
}
.modal.fade-slide-right .modal-header .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal.fade-slide-right .modal-header .btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---- 12. Pestañas del editor (clases reales del JS: DivTabs / DivTabsActive) → barra subrayada.
   Acotado a la barra de tabs para no afectar el stub oculto (div_presupuestos_buscar_tab). ---- */
.d-flex.flex-wrap > .DivTabs,
.d-flex.flex-wrap > .DivTabsActive {
    display: inline-flex !important;
    align-items: center;
    float: none !important;            /* anula FloatLeftRelative */
    padding: .65rem 1.1rem !important; /* anula Padding5 */
    margin: 0 !important;
    cursor: pointer;
    border: 0 !important;              /* anula Border1px */
    border-radius: 0 !important;       /* anula BorderRadiusTop5px */
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 3px solid transparent !important;
    color: #6c757d;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.d-flex.flex-wrap > .DivTabs:hover { color: var(--MtxAzul); }
.d-flex.flex-wrap > .DivTabsActive {
    color: var(--MtxAzul) !important;
    border-bottom: 3px solid var(--MtxTurquesa) !important;
    background: transparent !important;
    font-weight: 700;
}
.DivTabs .LabelTexto100Left, .DivTabsActive .LabelTexto100Left { width: auto !important; font-weight: 600; }
.card-body > .d-flex.flex-wrap:has(> .DivTabs),
.card-body > .d-flex.flex-wrap:has(> .DivTabsActive) {
    border-bottom: 1px solid #dee2e6;
    justify-content: flex-start !important;
    gap: .25rem;
    margin-bottom: 1rem;
}

/* ---- 12b. Normalizar campos: anchos/altos inline viejos no deben romper el grid BS ---- */
.card-body .form-select,
.card-body .form-control,
.cardFilter .form-select,
.cardFilter .form-control { width: 100% !important; }
.card-body input.form-control,
.card-body select.form-select,
.cardFilter input.form-control,
.cardFilter select.form-select { height: calc(1.5em + .75rem + 2px) !important; }
/* ListBox multi-fila (select con size > 1) NO debe forzarse a una línea: respeta su alto. */
.card-body select.form-select[size]:not([size="1"]),
.cardFilter select.form-select[size]:not([size="1"]) { height: auto !important; min-height: 300px; }
/* Dentro de un input-group, BS reparte con flex y necesita width:1% (si no, cada campo
   pide 100% y se van a renglones distintos). Restauramos ese comportamiento. */
.card-body .input-group > .form-control,
.card-body .input-group > .form-select,
.cardFilter .input-group > .form-control,
.cardFilter .input-group > .form-select { width: 1% !important; height: auto !important; }

/* ---- 12d. asp:CheckBox dentro de .form-switch → look de switch (el <input> no recibe
   la clase form-check-input desde el markup, así que lo estilamos por tipo). ---- */
.form-switch input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 2.2em;
    height: 1.15em;
    margin-top: 0;
    margin-right: .4em;
    vertical-align: -0.2em;
    background-color: #dee2e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 2em;
    cursor: pointer;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
}
.form-switch input[type="checkbox"]:checked {
    background-color: var(--MtxAzul);
    border-color: var(--MtxAzul);
    background-position: right center;
}

/* ---- 12e. Botones: ancho automático para que el texto no se corte (anula Width inline viejo).
   Se excluye .w-100 (botones full-width intencionales); el lápiz de grillas mantiene su ancho. ---- */
.btn:not(.w-100) { width: auto !important; white-space: nowrap; }

/* ---- 12c. Paneles del editor: el JS los muestra como inline-block (shrink-to-fit).
   Forzamos el panel VISIBLE a block/ancho completo; los ocultos (display:none) no matchean. ---- */
.tab-content > div[style*="inline-block"] { display: block !important; width: 100% !important; }

/* ---- 12f. Buscador movido a tarjeta colapsable superior: el JS de tabs intenta ocultarlo
   (display:none) al cambiar de pestaña. Lo forzamos siempre visible; el colapso lo maneja
   el accordion de Bootstrap (oculta el contenedor padre). ---- */
.buscador-panel { display: block !important; }

/* ---- 13. Sin sesión: el code-behind oculta div_menu (no se renderiza .sidenav).
   El contenido conserva el padding que reserva el menú y queda corrido a la derecha.
   Si no hay .sidenav, quitamos ese padding y ocultamos el nav vacío. Logueado no se
   afecta porque ahí .sidenav sí existe. ---- */
body.nav-fixed #layoutSidenav:not(:has(.sidenav)) #layoutSidenav_content {
    padding-left: 0 !important;
    margin-left: 0 !important;   /* SB Admin pone margin-left:-15rem en <992px; sin menú hay que cancelarlo */
}
#layoutSidenav:not(:has(.sidenav)) #layoutSidenav_nav {
    display: none !important;
}

/* ---- 14. Responsive móvil: evitar desborde horizontal y contenido fuera de pantalla.
   #layoutSidenav_content es flex-item con min-width:auto por defecto, no se encoge y
   desborda en pantallas chicas; además forzamos que títulos/textos largos envuelvan. ---- */
html, body { overflow-x: hidden; max-width: 100%; }
#layoutSidenav_content { min-width: 0 !important; }
#layoutSidenav_content > main,
#layoutSidenav_content > main > .container-xxl,
.content-wrapper { min-width: 0 !important; max-width: 100% !important; }
.content-wrapper .card { max-width: 100%; }
/* Que los textos largos (ej. "DEBE INICIAR SESIÓN...") envuelvan en vez de desbordar */
.content-wrapper h1, .content-wrapper h2, .content-wrapper h3,
.content-wrapper h4, .content-wrapper h5, .content-wrapper .h5,
.content-wrapper label, .content-wrapper .card-body span {
    white-space: normal !important;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    #layoutSidenav_content > main > .container-xxl { padding-left: .75rem !important; padding-right: .75rem !important; }
    .content-wrapper .card-body.p-4 { padding: 1rem !important; }
    /* Logo de bienvenida que no empuje el ancho */
    .content-wrapper img.LogoPrincipal { max-width: 100% !important; height: auto !important; }
}

/* ---- 15. Overrides puntuales del proyecto ----------------- */
/* (agregar acá los ajustes que vayan surgiendo en cada página) */