/* ======================================================
   GESTION PYME - TEMA CORPORATIVO
====================================================== */

:root {
    --bg-main: #0b0b0b;
    --bg-soft: #111111;
    --bg-card: #151515;
    --bg-card-2: #1b1b1b;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,196,0,0.28);
    --text-main: #ffffff;
    --text-soft: #cfcfcf;
    --text-muted: #9a9a9a;
    --dewalt: #ffc400;
    --lime: #b6ff00;
    --shadow: 0 10px 30px rgba(0,0,0,0.30);
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.20);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 10px;
}

/* BASE */
html,
body {
    background:
        linear-gradient(180deg, #0a0a0a 0%, #101010 100%) !important;
    color: var(--text-main) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    overflow-x: hidden !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(255,196,0,0.05), transparent 22%),
        radial-gradient(circle at top left, rgba(182,255,0,0.03), transparent 18%);
    z-index: 0;
}

main,
.container,
.container-fluid,
.dashboard-container,
.main-container {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* NAVBAR */
.navbar,
.topbar,
header,
.navbar-slt {
    background: #050505 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-soft) !important;
}

.navbar-brand,
.logo,
header h1,
header .titulo {
    color: var(--dewalt) !important;
    font-weight: 900 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    font-size: 1.35rem !important;
}

.usuario-navbar,
.user-info,
.usuario,
header span {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

/* TITULOS */
h1,
.titulo-dashboard {
    color: var(--text-main) !important;
    font-weight: 900 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 6px !important;
}

.subtitulo-dashboard,
p,
.card-text,
small,
.text-muted {
    color: var(--text-soft) !important;
}

/* BOTONES */
.btn,
button,
a.btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    transition: all .18s ease !important;
    box-shadow: none !important;
}

.btn-warning {
    background: var(--dewalt) !important;
    border-color: var(--dewalt) !important;
    color: #000 !important;
}

.btn-warning:hover {
    background: #ffd54a !important;
    border-color: #ffd54a !important;
    color: #000 !important;
}

.btn-primary,
.btn-success {
    background: #1e1e1e !important;
    border: 1px solid var(--lime) !important;
    color: var(--lime) !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--lime) !important;
    color: #000 !important;
    border-color: var(--lime) !important;
}

.btn-danger,
.btn-outline-slt,
.btn-outline-warning {
    background: transparent !important;
    border: 1px solid var(--dewalt) !important;
    color: var(--dewalt) !important;
}

.btn-danger:hover,
.btn-outline-slt:hover,
.btn-outline-warning:hover {
    background: var(--dewalt) !important;
    color: #000 !important;
}

/* CARDS GENERALES */
.card,
.card-modulo,
.card-resumen,
.dashboard-card,
.modulo,
.panel,
.box {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* quita los adornos exagerados anteriores */
.card::before,
.card::after,
.card-modulo::before,
.card-modulo::after,
.card-resumen::before,
.card-resumen::after,
.dashboard-card::before,
.dashboard-card::after,
.modulo::before,
.modulo::after,
.panel::before,
.panel::after,
.box::before,
.box::after {
    content: none !important;
}

/* línea superior sutil */
.card,
.card-modulo,
.card-resumen,
.dashboard-card,
.modulo {
    border-top: 3px solid rgba(255,196,0,0.55) !important;
}

.card:hover,
.card-modulo:hover,
.card-resumen:hover,
.dashboard-card:hover,
.modulo:hover,
.panel:hover,
.box:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,196,0,0.22) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.32) !important;
}

/* módulos */
.card-modulo {
    min-height: 160px !important;
}

.card-body,
.card-modulo .card-body,
.card-resumen .card-body {
    padding: 24px !important;
}

.card-title,
.card h2,
.card h3,
.card h4,
.card h5 {
    color: var(--text-main) !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

.card-title {
    font-size: 1.1rem !important;
}

/* punto verde sutil */
.card-title::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--lime);
    vertical-align: middle;
    box-shadow: none !important;
}

/* LINKS */
.modulo-link,
.modulo-link:hover,
a {
    color: inherit !important;
    text-decoration: none !important;
}

/* RESUMEN SUPERIOR */
.resumen-superior {
    gap: 14px !important;
}

.pill-superior {
    background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--dewalt) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-main) !important;
}

.pill-superior::before,
.pill-superior::after {
    content: none !important;
}

.pill-superior .label {
    display: inline-block !important;
    background: var(--dewalt) !important;
    color: #000 !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
}

.pill-superior .valor {
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 1.7rem !important;
}

.pill-superior .meta {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

/* ETIQUETAS */
.badge,
.label,
.tag,
.estado,
.etiqueta-resumen {
    background: rgba(182,255,0,0.12) !important;
    color: var(--lime) !important;
    border: 1px solid rgba(182,255,0,0.22) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

/* MONTOS */
.monto,
.total,
.valor,
.amount,
.monto-principal {
    color: #fff !important;
    font-weight: 900 !important;
}

.monto-principal {
    font-size: 2rem !important;
}

/* LISTAS */
.mini-lista {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.mini-item {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.mini-item strong {
    color: #fff !important;
    font-weight: 700 !important;
}

.mini-item small {
    color: var(--text-muted) !important;
}

/* montos lado derecho */
.badge-slt,
.monto-pendiente,
.valor-pendiente {
    background: rgba(182,255,0,0.10) !important;
    color: var(--lime) !important;
    border: 1px solid rgba(182,255,0,0.30) !important;
    border-radius: 999px !important;
    padding: 7px 13px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

/* TABLAS */
.table,
table {
    background: #141414 !important;
    color: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
}

thead,
.table thead,
table thead {
    background: #0a0a0a !important;
    color: var(--dewalt) !important;
}

tbody tr,
.table tbody tr,
table tbody tr {
    border-color: rgba(255,255,255,0.06) !important;
}

tbody tr:hover,
.table tbody tr:hover,
table tbody tr:hover {
    background: rgba(255,255,255,0.03) !important;
}

/* FORMULARIOS */
input,
select,
textarea,
.form-control,
.form-select {
    background: #101010 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--dewalt) !important;
    box-shadow: 0 0 0 3px rgba(255,196,0,0.16) !important;
    outline: none !important;
}

/* ALERTAS */
.alert {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* FONDOS CLAROS DE BOOTSTRAP */
.bg-light,
.bg-white {
    background: #151515 !important;
}

.text-dark {
    color: #fff !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .navbar .container-fluid,
    .navbar-slt .container-fluid {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .navbar-brand {
        width: 100% !important;
        font-size: 1.12rem !important;
    }

    .navbar .d-flex,
    .navbar-slt .d-flex {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .usuario-navbar {
        display: none !important;
    }

    .navbar .btn,
    .btn-outline-slt,
    .btn-danger {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 8px !important;
    }

    .container-fluid.py-4.px-4 {
        padding: 18px 14px !important;
    }

    h1,
    .titulo-dashboard {
        font-size: 2rem !important;
        line-height: 1.08 !important;
    }

    .resumen-superior {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .pill-superior {
        width: 100% !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col,
    .col-12,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .card,
    .card-modulo,
    .card-resumen,
    .dashboard-card,
    .modulo {
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    .card-modulo {
        min-height: 125px !important;
    }

    .card-body,
    .card-modulo .card-body,
    .card-resumen .card-body {
        padding: 18px !important;
    }

    .card-title {
        font-size: 1rem !important;
    }

    .monto-principal {
        font-size: 1.6rem !important;
    }

    .mini-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    table,
    .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .navbar .d-flex,
    .navbar-slt .d-flex {
        grid-template-columns: 1fr !important;
    }

    h1,
    .titulo-dashboard {
        font-size: 1.72rem !important;
    }
}

/* ======================================================
   GESTION PYME - BOTONES MÁS VISIBLES Y CORPORATIVOS
====================================================== */

/* Botones generales */
.btn,
button,
a.btn {
    border-radius: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    padding: 10px 18px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.18s ease-in-out !important;
    text-decoration: none !important;
}

/* Botón principal amarillo */
.btn-warning,
button.btn-warning,
a.btn-warning,
.btn-siguiente,
.btn-next,
button[type="submit"] {
    background: #ffc400 !important;
    color: #000000 !important;
    border: 2px solid #ffc400 !important;
    box-shadow: 0 6px 18px rgba(255,196,0,0.22) !important;
}

.btn-warning:hover,
button.btn-warning:hover,
a.btn-warning:hover,
.btn-siguiente:hover,
.btn-next:hover,
button[type="submit"]:hover {
    background: #ffd95a !important;
    border-color: #ffd95a !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
}

/* Botón verde de acción positiva */
.btn-success,
a.btn-success,
button.btn-success {
    background: #b6ff00 !important;
    color: #000000 !important;
    border: 2px solid #b6ff00 !important;
    box-shadow: 0 6px 18px rgba(182,255,0,0.20) !important;
}

.btn-success:hover,
a.btn-success:hover,
button.btn-success:hover {
    background: #ceff4a !important;
    border-color: #ceff4a !important;
    color: #000000 !important;
}

/* Botones secundarios */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: #3a3a3a !important;
    color: #ffffff !important;
    border-color: #ffc400 !important;
}

/* Botones con borde amarillo, como Volver, Historial, Configuración */
.btn-outline-slt,
.btn-outline-warning,
a.btn-outline-slt,
a.btn-outline-warning,
button.btn-outline-slt,
button.btn-outline-warning {
    background: rgba(255,196,0,0.08) !important;
    color: #ffc400 !important;
    border: 2px solid #ffc400 !important;
    box-shadow: none !important;
}

.btn-outline-slt:hover,
.btn-outline-warning:hover,
a.btn-outline-slt:hover,
a.btn-outline-warning:hover,
button.btn-outline-slt:hover,
button.btn-outline-warning:hover {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
}

/* Botones peligrosos: eliminar / vaciar */
.btn-danger,
a.btn-danger,
button.btn-danger {
    background: #3a1010 !important;
    color: #ffffff !important;
    border: 2px solid #ff4d4d !important;
}

.btn-danger:hover,
a.btn-danger:hover,
button.btn-danger:hover {
    background: #ff4d4d !important;
    color: #000000 !important;
    border-color: #ff4d4d !important;
}

/* Botones pequeños de tablas */
.table .btn,
table .btn,
.btn-sm {
    min-height: 34px !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
}

/* Botones del paso de cotización */
.pasos,
.steps,
.stepper {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.pasos button,
.pasos .btn,
.steps button,
.steps .btn,
.stepper button,
.stepper .btn {
    background: #1b1b1b !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    min-width: 110px !important;
}

.pasos button.active,
.pasos .btn.active,
.steps button.active,
.steps .btn.active,
.stepper button.active,
.stepper .btn.active,
.pasos .btn-warning,
.steps .btn-warning,
.stepper .btn-warning {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
}

/* Botón siguiente fijo visible */
button:contains("Siguiente"),
.btn-siguiente {
    background: #ffc400 !important;
    color: #000000 !important;
}

/* Inputs blancos que se ven fuera de tema */
input,
select,
textarea,
.form-control,
.form-select {
    background: #101010 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

input::placeholder,
textarea::placeholder {
    color: #777777 !important;
}

/* Panel claro del cliente seleccionado: lo dejamos oscuro empresarial */
.card-cliente,
.cliente-seleccionado,
#clienteSeleccionado,
.panel-cliente {
    background: #151515 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,196,0,0.28) !important;
}

.card-cliente *,
.cliente-seleccionado *,
#clienteSeleccionado *,
.panel-cliente * {
    color: inherit;
}

/* Botones en celular */
@media (max-width: 768px) {
    .btn,
    button,
    a.btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 0.95rem !important;
    }

    .pasos,
    .steps,
    .stepper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }
}


/* ======================================================
   CORRECCIÓN PASOS COTIZACIONES
   Hace visibles los botones superiores 1, 2, 3, 4
====================================================== */

/* Contenedor de pasos */
.pasos-cotizacion,
.pasos-cotizacion *,
.pasos,
.pasos *,
.steps,
.steps *,
.stepper,
.stepper * {
    box-sizing: border-box !important;
}

/* Botones de paso en cotizaciones */
.pasos-cotizacion button,
.pasos-cotizacion .btn,
.pasos-cotizacion a,
.pasos button,
.pasos .btn,
.pasos a,
.steps button,
.steps .btn,
.steps a,
.stepper button,
.stepper .btn,
.stepper a {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 196, 0, 0.45) !important;
    border-radius: 10px !important;
    min-width: 90px !important;
    height: 40px !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Texto interno de los pasos */
.pasos-cotizacion button *,
.pasos-cotizacion .btn *,
.pasos-cotizacion a *,
.pasos button *,
.pasos .btn *,
.pasos a *,
.steps button *,
.steps .btn *,
.steps a *,
.stepper button *,
.stepper .btn *,
.stepper a * {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Paso activo */
.pasos-cotizacion button.active,
.pasos-cotizacion .btn.active,
.pasos-cotizacion a.active,
.pasos-cotizacion button:first-child,
.pasos-cotizacion .btn:first-child,
.pasos-cotizacion a:first-child,
.pasos button.active,
.pasos .btn.active,
.pasos a.active,
.steps button.active,
.steps .btn.active,
.steps a.active,
.stepper button.active,
.stepper .btn.active,
.stepper a.active {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
    box-shadow: 0 6px 16px rgba(255,196,0,0.22) !important;
}

/* Pasos pendientes */
.pasos-cotizacion button:not(.active),
.pasos-cotizacion .btn:not(.active),
.pasos-cotizacion a:not(.active),
.pasos button:not(.active),
.pasos .btn:not(.active),
.pasos a:not(.active),
.steps button:not(.active),
.steps .btn:not(.active),
.steps a:not(.active),
.stepper button:not(.active),
.stepper .btn:not(.active),
.stepper a:not(.active) {
    background: #202020 !important;
    color: #ffffff !important;
}

/* Hover */
.pasos-cotizacion button:hover,
.pasos-cotizacion .btn:hover,
.pasos-cotizacion a:hover,
.pasos button:hover,
.pasos .btn:hover,
.pasos a:hover,
.steps button:hover,
.steps .btn:hover,
.steps a:hover,
.stepper button:hover,
.stepper .btn:hover,
.stepper a:hover {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
}

/* Corrección para botones deshabilitados */
.pasos-cotizacion button:disabled,
.pasos-cotizacion .btn.disabled,
.pasos-cotizacion a.disabled,
.pasos button:disabled,
.pasos .btn.disabled,
.pasos a.disabled,
.steps button:disabled,
.steps .btn.disabled,
.steps a.disabled,
.stepper button:disabled,
.stepper .btn.disabled,
.stepper a.disabled {
    background: #262626 !important;
    color: #bdbdbd !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    opacity: 1 !important;
}

/* En móvil se ordenan mejor */
@media (max-width: 768px) {
    .pasos-cotizacion,
    .pasos,
    .steps,
    .stepper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .pasos-cotizacion button,
    .pasos-cotizacion .btn,
    .pasos-cotizacion a,
    .pasos button,
    .pasos .btn,
    .pasos a,
    .steps button,
    .steps .btn,
    .steps a,
    .stepper button,
    .stepper .btn,
    .stepper a {
        width: 100% !important;
        min-width: 100% !important;
    }
}


/* ======================================================
   FIX DEFINITIVO - PASOS MÓDULO COTIZACIONES
====================================================== */

.gp-stepper-fix {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 18px 0 18px 0 !important;
}

.gp-stepper-fix .gp-step-fix {
    min-width: 135px !important;
    height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,196,0,0.45) !important;
    background: #1b1b1b !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
}

.gp-stepper-fix .gp-step-fix.gp-step-active {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
    box-shadow: 0 8px 18px rgba(255,196,0,0.20) !important;
}

.gp-stepper-fix .gp-step-fix:hover {
    background: #ffc400 !important;
    color: #000000 !important;
    border-color: #ffc400 !important;
}

/* Oculta los botones blancos originales si quedan duplicados */
.gp-stepper-original-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .gp-stepper-fix {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    .gp-stepper-fix .gp-step-fix {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .gp-stepper-fix {
        grid-template-columns: 1fr !important;
    }
}


/* ======================================================
   CORRECCIÓN DE CAPITALIZACIÓN EN FORMULARIOS
   Evita problemas como MuÑOz
====================================================== */

input,
textarea,
select,
.form-control,
.form-select {
    text-transform: none !important;
}

input[name="nombre"],
input[name="atencion"],
input[name="direccion"],
input[name="giro"],
input[name="correo"],
input[name="rut"],
input[name="telefono"],
textarea[name="nombre"],
textarea[name="atencion"],
textarea[name="direccion"],
textarea[name="giro"] {
    text-transform: none !important;
}


/* ======================================================
   COTIZACIONES - OCULTAR BOTONES INTERNOS
   Ahora el botón Siguiente confirma cada paso
====================================================== */

.btn-confirmar-interno,
.d-none.btn-confirmar-interno {
    display: none !important;
}


/* ======================================================
   COTIZACIONES - SIGUIENTE CONFIRMA TODO
====================================================== */

.btn-confirmar-interno {
    display: none !important;
}