/* =========================================================
   CRM TRANSMIDIESEL — Estilo Visual y Animaciones
   ========================================================= */

:root {
    --accent: #0f3e68;
    --accent-bright: #2f6fa8;
    --glass-bg: rgba(15, 62, 104, 0.03);
    --glass-bg-strong: rgba(15, 62, 104, 0.06);
    --glass-border: rgba(15, 62, 104, 0.10);
    --shadow-soft: 0 20px 60px rgba(15, 62, 104, 0.10);
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

body {
    font-family: var(--font-body);
    background-color: #f7f9fb;
    color: #1a1a1a;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
}

/* Efecto Cristal (Glassmorphism) */
.glass-panel {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(15, 62, 104, 0.05);
}

/* Menú lateral oscuro */
.sidebar-glass {
    background: linear-gradient(180deg, #0f3e68 0%, #0a2a48 100%);
    color: #ffffff;
    border-right: 1px solid rgba(255,255,255,0.1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
}
.sidebar-glass a {
    transition: all 0.3s cubic-bezier(.22,.9,.32,1);
}
.sidebar-glass a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}
.sidebar-glass a.active {
    background: #ffffff;
    color: var(--accent);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Botones Neomórficos */
.btn-neu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--accent);
    background: linear-gradient(180deg, #ffffff, #f2f5f8);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 14px rgba(15, 62, 104, 0.08), inset 0 1px 0 rgba(255,255,255,0.65);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-neu:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 62, 104, 0.15), 0 0 0 1px var(--accent-dim);
}
.btn-neu.primary {
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    color: #ffffff;
    border: 1px solid #3d82c4;
    box-shadow: 0 6px 20px rgba(15, 62, 104, 0.25);
}
.btn-neu.primary:hover {
    box-shadow: 0 10px 30px rgba(15, 62, 104, 0.35);
}

/* Tarjetas del Kanban */
.kanban-card {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px;
    cursor: grab;
    transition: all 0.3s cubic-bezier(.22,.9,.32,1);
    box-shadow: 0 4px 12px rgba(15, 62, 104, 0.04);
}
.kanban-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px rgba(15, 62, 104, 0.12), 0 0 0 1px var(--accent-dim);
    border-color: var(--accent-bright);
}
.kanban-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}
.kanban-card.is-readonly,
.kanban-card.is-readonly:active {
    cursor: default;
    transform: none;
}
.crm-card-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.crm-card-action {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dbe4ee;
    border-radius: 11px;
    background: #fff;
    color: #64748b;
    box-shadow: 0 2px 5px rgba(15, 62, 104, 0.06);
    cursor: pointer;
    transition: transform .18s ease, color .18s ease, background-color .18s ease,
        border-color .18s ease, box-shadow .18s ease;
}
.crm-card-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}
.crm-card-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 13px rgba(15, 62, 104, 0.15);
}
.crm-card-action:active {
    transform: translateY(0) scale(.94);
}
.crm-card-action:focus-visible {
    outline: 3px solid rgba(14, 116, 189, .28);
    outline-offset: 2px;
}
.crm-card-action--view:hover { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.crm-card-action--edit:hover { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
.crm-card-action--reassign:hover { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.crm-card-action--delete:hover { color: #be123c; background: #fff1f2; border-color: #fecdd3; }
@media (prefers-reduced-motion: reduce) {
    .crm-card-action,
    .crm-card-action svg {
        transition: none;
    }
    .crm-card-action:hover,
    .crm-card-action:active {
        transform: none;
    }
}

/* Gráficos SVG navegables del dashboard */
.crm-chart-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.crm-journey-chart { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }
.crm-chart-grid { stroke: rgba(108, 122, 137, .18); stroke-width: 1; stroke-dasharray: 3 5; }
.crm-chart-axis { fill: var(--text-muted); font: 11px Inter, sans-serif; }
.crm-chart-value { fill: var(--primary); font: 700 12px Inter, sans-serif; }
.crm-chart-stage-label { font-size: 10px; }
.crm-chart-area { fill: rgba(15, 62, 104, .09); stroke: none; }
.crm-chart-route { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.crm-chart-point { cursor: pointer; outline: none; transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.crm-chart-point-halo { fill: var(--bg-base); stroke: rgba(15, 62, 104, .2); stroke-width: 2; transition: r .2s ease, fill .2s ease; }
.crm-chart-point-dot { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.crm-chart-point:hover .crm-chart-point-halo,
.crm-chart-point:focus-visible .crm-chart-point-halo { r: 12px; fill: #fff; stroke: var(--primary); }
.crm-chart-point:focus-visible .crm-chart-point-dot { r: 6px; }
.crm-phase-point { cursor: pointer; outline: none; }
.crm-phase-hit { fill: transparent; }
.crm-chart-bar { fill: var(--primary); transform-box: fill-box; transform-origin: center bottom; transition: fill .2s ease, filter .2s ease; }
.crm-phase-point:hover .crm-chart-bar,
.crm-phase-point:focus-visible .crm-chart-bar { fill: #28648f; filter: drop-shadow(0 4px 5px rgba(15, 62, 104, .25)); }
.crm-phase-point:focus-visible .crm-phase-hit { stroke: rgba(15, 62, 104, .35); stroke-width: 2; stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: reduce) {
    .crm-chart-point,
    .crm-chart-point-halo,
    .crm-chart-bar { transition: none; }
}

/* Navegación persistente con movimiento suave de aceleración y frenado */
.sidebar-glass nav a {
    transition: color .38s cubic-bezier(.4, 0, .2, 1),
        background-color .38s cubic-bezier(.4, 0, .2, 1),
        box-shadow .38s cubic-bezier(.4, 0, .2, 1),
        transform .46s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.sidebar-glass nav a:hover { transform: translateX(5px); }
.sidebar-glass nav a.active { transform: translateX(2px); }
.sidebar-glass nav { position: relative; isolation: isolate; }
.sidebar-glass nav a { position: relative; z-index: 1; }
.crm-nav-traveler {
    position: absolute;
    z-index: 2;
    left: 4px;
    right: 4px;
    height: 44px;
    pointer-events: none;
    border: 1px solid rgba(15, 62, 104, .32);
    border-radius: 13px;
    background: rgba(255, 255, 255, .22);
    box-shadow: 0 0 18px rgba(15, 62, 104, .22), inset 0 0 12px rgba(255, 255, 255, .62);
    will-change: top, transform;
}
.sidebar-glass nav a.nav-flight-stop {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, .2) !important;
    box-shadow: var(--neu-inset), 0 0 14px rgba(15, 62, 104, .14);
    transform: translateX(4px) scale(1.015);
}

@keyframes sidebarSettle {
    from { opacity: .82; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
@media (min-width: 768px) {
    .sidebar-glass {
        position: sticky !important;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        flex: 0 0 16rem;
        animation: sidebarSettle .5s cubic-bezier(.4, 0, .2, 1) both;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-glass { animation: none !important; }
    .crm-nav-traveler { display: none; }
    .sidebar-glass nav a,
    .sidebar-glass nav a:hover,
    .sidebar-glass nav a.active,
    .sidebar-glass nav a.nav-flight-stop { transform: none; will-change: auto; }
}
.card-dragging {
    opacity: 0.4;
    transform: rotate(3deg) scale(1.05);
}

/* Columnas del Kanban */
.kanban-col {
    background: rgba(15, 62, 104, 0.02);
    border: 1px dashed var(--glass-border);
    border-radius: 18px;
    transition: all 0.3s ease;
}
.kanban-col.drop-target {
    background: rgba(15, 62, 104, 0.08);
    border-color: var(--accent-bright);
    border-style: solid;
}

/* Tablas */
.table-glass {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table-glass th {
    background: var(--glass-bg-strong);
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 2px solid var(--glass-border);
}
.table-glass td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
    background: #ffffff;
    transition: background 0.2s ease;
}
.table-glass tr:hover td {
    background: var(--glass-bg);
}

/* Animación de entrada */
.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    animation: revealUp 0.6s cubic-bezier(.22,.9,.32,1) forwards;
}
@keyframes revealUp {
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   NUEVOS COMPONENTES: INPUTS Y ACORDEÓN FLOTANTE
   ========================================================= */

.input-glass {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    background: #ffffff;
    border: 1.5px solid rgba(15, 62, 104, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    color: #1a1a1a;
    transition: all 0.25s ease;
}
.input-glass:focus {
    outline: none;
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px rgba(47, 111, 168, 0.15);
}


/* =========================================
   DESPLEGABLES PERSONALIZADOS DEL CRM
   ========================================= */

/* Contenedor de cada campo */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    user-select: none;
    z-index: 1;
}

/* Campo desplegable cerrado */
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid rgba(15, 62, 104, 0.15);
    border-radius: 10px;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-select-trigger:hover {
    border-color: var(--accent-bright);
}

.custom-select-trigger.disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.75;
}

.custom-select-trigger.disabled:hover {
    border-color: rgba(15, 62, 104, 0.15);
}

.custom-select-wrapper.open {
    z-index: 10000 !important;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px rgba(47, 111, 168, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-trigger svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: #64748b;
}

.custom-select-wrapper.open .custom-select-trigger svg {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Lista de opciones flotante */
.custom-options {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: block;

    background: #ffffff;
    border: 1.5px solid var(--accent-bright);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 30px rgba(15, 62, 104, 0.22);

    z-index: 10001 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    max-height: min(260px, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.custom-option {
    display: block;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.custom-option:last-child {
    border-bottom: 0;
}

.custom-option:hover,
.custom-option.selected {
    color: #0f3e68;
    background: #eff6ff;
}

.custom-select-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Evita que los campos de filas posteriores se superpongan */
#dealForm .grid,
#dealForm > div {
    position: relative;
}

#dealForm .custom-select-wrapper {
    isolation: auto;
}

/* El campo que está abierto debe quedar por encima de los demás */
#dealForm .custom-select-wrapper.open {
    z-index: 10000 !important;
}

/* Mejora de desplazamiento de las opciones */
.custom-options::-webkit-scrollbar {
    width: 6px;
}

.custom-options::-webkit-scrollbar-thumb {
    background: rgba(15, 62, 104, 0.25);
    border-radius: 10px;
}

.custom-options::-webkit-scrollbar-track {
    background: #f1f5f9;
}


/* Las filas del formulario no deben tapar los desplegables */
#dealForm > .grid {
    z-index: auto;
}

/* El modal debe mantener una capa superior a la página */
#modal {
    z-index: 1000;
}

@media (max-width: 640px) {
    #dealForm {
        padding: 1rem;
    }

    #modalDetalle > div {
        max-height: calc(100dvh - 1rem);
    }

    #quoteReviewPanel,
    #quoteUploadArea {
        min-width: 0;
    }

    #quoteReviewPanel iframe,
    #quoteUploadArea iframe {
        max-width: 100%;
    }

    .kanban-card {
        padding: 12px;
    }
}

#modal > div {
    position: relative;
    isolation: auto;
}
.crm-deal-modal {
    flex: 0 0 auto;
    margin: 1rem auto;
}

@media (max-width: 640px) {
    #modal {
        align-items: flex-start;
        padding: 0.75rem;
    }

    .crm-deal-modal {
        margin: 0.25rem auto;
    }

    #dealForm {
        padding: 1rem;
    }

    #dealForm .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #dealForm button[type="submit"],
    #dealForm button[type="button"] {
        min-height: 42px;
    }
}

/* =========================================================
   SISTEMA SOFT UI / NEUMÓRFICO DEL CRM
   Capa exclusivamente visual; conserva estructura y lógica.
   ========================================================= */
:root {
    --bg-base: #E8EEF5;
    --primary: #0F3E68;
    --text-main: #343434;
    --text-muted: #6C7A89;
    --light-shadow: #F5F7FA;
    --dark-shadow: #B8C4D0;
    --accent: var(--primary);
    --accent-bright: var(--primary);
    --glass-bg: #e2e9f1;
    --glass-bg-strong: #dfe7ef;
    --glass-border: transparent;
    --shadow-soft: 6px 6px 12px var(--dark-shadow), -6px -6px 12px var(--light-shadow);
    --neu-outset: 6px 6px 12px var(--dark-shadow), -6px -6px 12px var(--light-shadow);
    --neu-inset: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
    --neu-transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

body,
body.bg-slate-100,
body.bg-slate-50,
body.bg-slate-900 {
    background: var(--bg-base) !important;
    color: var(--text-main);
    transition: var(--neu-transition);
}

body :where(a, button, input, select, textarea, [role="button"], .custom-select-trigger) {
    transition: var(--neu-transition);
}

body :where(p, label, small, time) { color: inherit; }
body :where(.text-slate-700, .text-slate-800, .text-slate-900) { color: var(--text-main); }
body :where(.text-slate-500, .text-slate-600, .text-slate-400) { color: var(--text-muted); }
.sidebar-glass ~ div.bg-slate-50 { background: var(--bg-base) !important; }
.sidebar-glass ~ div > header {
    color: var(--text-main);
    background: var(--bg-base) !important;
    box-shadow: 0 4px 10px rgba(184, 196, 208, .32);
}
body > main { background: var(--bg-base); }
body.bg-slate-900 .bg-white.rounded-2xl {
    color: var(--text-main);
    background: var(--bg-base) !important;
    border: 0;
    box-shadow: var(--neu-outset);
}
body.bg-slate-900 input[type="email"],
body.bg-slate-900 input[type="password"] {
    color: var(--text-main);
    background: var(--bg-base);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--neu-inset);
}
body.bg-slate-900 input:focus {
    outline: none;
    box-shadow: var(--neu-inset), inset 0 0 0 1px rgba(15, 62, 104, .42), 0 0 0 3px rgba(15, 62, 104, .10);
}
body.bg-slate-900 button[type="submit"] {
    color: #fff;
    background: var(--primary) !important;
    border: 0;
    border-radius: 12px;
    box-shadow: 4px 4px 10px rgba(15, 62, 104, .4), -4px -4px 10px rgba(245,247,250,.72);
    transition: var(--neu-transition);
}
body.bg-slate-900 button[type="submit"]:hover { transform: translateY(-2px); }
body.bg-slate-900 button[type="submit"]:active { transform: translateY(0); box-shadow: var(--neu-inset); }

/* Superficies elevadas y paneles */
.glass-panel,
.kanban-card,
.metric-card,
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl,
main section.rounded-xl,
main section.rounded-2xl,
main .rounded-2xl.border.bg-white,
.crm-deal-modal {
    background: var(--bg-base) !important;
    border: 0 !important;
    border-radius: 20px;
    box-shadow: var(--neu-outset);
}

.glass-panel { transition: var(--neu-transition); }
.glass-panel:hover,
.metric-card:hover,
main .bg-white.rounded-xl:hover,
main .bg-white.rounded-2xl:hover {
    box-shadow: 4px 4px 9px var(--dark-shadow), -4px -4px 9px var(--light-shadow);
}

.kanban-card { transition: var(--neu-transition); }
.kanban-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 8px 8px 16px var(--dark-shadow), -6px -6px 14px var(--light-shadow);
}
.kanban-card:active { transform: translateY(0); box-shadow: var(--neu-inset); }
.kanban-col {
    background: rgba(232, 238, 245, .6);
    border-color: #d5dee8;
}
.kanban-col.drop-target { background: #dfe8f1; border-color: var(--primary); }

/* Navegación lateral clara, con opción actual hundida */
.sidebar-glass {
    background: var(--bg-base) !important;
    color: var(--text-main) !important;
    border: 0;
    box-shadow: 6px 0 14px rgba(184, 196, 208, .45);
}
.sidebar-glass > div:first-child,
.sidebar-glass > div:last-child { border-color: rgba(108, 122, 137, .16) !important; }
.sidebar-glass nav a {
    color: var(--text-muted) !important;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}
.sidebar-glass nav a:hover {
    color: var(--primary) !important;
    background: var(--bg-base) !important;
    box-shadow: var(--neu-outset);
    transform: translateX(2px);
}
.sidebar-glass nav a.active {
    color: var(--primary) !important;
    background: var(--bg-base) !important;
    box-shadow: var(--neu-inset);
}
.sidebar-glass nav a.crm-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 50px;
    font-size: 15px;
    font-weight: 600;
}
.crm-nav-icon {
    display: block;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), color .3s ease;
}
.sidebar-glass nav a:hover .crm-nav-icon { transform: scale(1.12) rotate(-3deg); }
.sidebar-glass nav a.active .crm-nav-icon { stroke-width: 2.1; }
.user-actions { white-space: nowrap; }
.user-action-btn {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    border: 0;
    border-radius: 14px;
    background: var(--bg-base, #e8eef5);
    box-shadow: var(--neu-outset, 4px 4px 9px #b8c4d0, -4px -4px 9px #f5f7fa);
    cursor: pointer;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, color .28s ease;
}
.user-action-btn:hover { transform: translateY(-3px) scale(1.04); }
.user-action-btn:active { transform: translateY(0) scale(.97); box-shadow: var(--neu-inset, inset 3px 3px 6px #b8c4d0, inset -3px -3px 6px #f5f7fa); }
.edit-user-btn { color: var(--primary, #0f3e68); }
.edit-user-btn:hover { color: #087bb5; }
.delete-user-btn { color: #c23b50; }
.delete-user-btn:hover { color: #a82038; }
.user-action-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-neu.text-xs .user-action-icon { width: 19px; height: 19px; }
.view-contacts-btn { color: #18805e; text-decoration: none; }
.view-contacts-btn:hover { color: #0d6247; }
.client-search-icon { display: inline-flex; align-items: center; color: var(--primary, #0f3e68); }
.client-search-icon svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.user-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
}
.user-status svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.user-status.is-active { color: #15805c; }
.user-status.is-inactive { color: #be3448; }
.sidebar-glass > div:last-child > p:first-child { color: var(--text-main) !important; }
.sidebar-glass > div:last-child > p:nth-child(2) { color: var(--primary) !important; }

/* Botones estándar, acciones primarias y presión */
.btn-neu,
main button.rounded-lg.border,
main button.rounded-xl.border {
    color: var(--text-main);
    background: var(--bg-base);
    border: 0;
    box-shadow: var(--neu-outset);
    transition: var(--neu-transition);
}
.btn-neu:hover,
main button.rounded-lg.border:hover,
main button.rounded-xl.border:hover {
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 4px 4px 9px var(--dark-shadow), -4px -4px 9px var(--light-shadow);
}
.btn-neu:active,
main button.rounded-lg.border:active,
main button.rounded-xl.border:active {
    transform: translateY(0);
    box-shadow: var(--neu-inset);
}
.btn-neu.primary,
.btn-neu.primary:hover,
.btn-neu.primary:active {
    color: #fff;
    background: var(--primary);
    border: 0;
    box-shadow: 4px 4px 10px rgba(15, 62, 104, .4), -4px -4px 10px rgba(245,247,250,.72);
}
.btn-neu.primary:hover { transform: translateY(-2px); }
.btn-neu.primary:active { transform: translateY(0); box-shadow: inset 4px 4px 8px rgba(5, 27, 47, .38), inset -4px -4px 8px rgba(74, 125, 169, .35); }
main button:not(.crm-card-action) {
    border-radius: 12px;
    box-shadow: var(--neu-outset);
    transition: var(--neu-transition);
}
main button:not(.crm-card-action):hover { transform: translateY(-2px); }
main button:not(.crm-card-action):active { transform: translateY(0); box-shadow: var(--neu-inset); }

/* Campos hundidos, con realce interior al enfocar */
.input-glass,
.custom-select-trigger,
main input:not([type="checkbox"]):not([type="radio"]),
main select,
main textarea {
    color: var(--text-main);
    background: var(--bg-base);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--neu-inset);
    transition: var(--neu-transition);
}
.input-glass:focus,
.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger,
main input:not([type="checkbox"]):not([type="radio"]):focus,
main select:focus,
main textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: var(--neu-inset), inset 0 0 0 1px rgba(15, 62, 104, .42), 0 0 0 3px rgba(15, 62, 104, .10);
}
.input-glass::placeholder,
main input::placeholder,
main textarea::placeholder { color: var(--text-muted); opacity: .75; }
.custom-select-trigger.disabled { background: #e1e8ef; }
.custom-options {
    background: var(--bg-base);
    border-color: #cbd6e1;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--neu-outset);
}
.custom-option { color: var(--text-main); border-color: rgba(108, 122, 137, .12); }
.custom-option:hover,
.custom-option.selected { color: var(--primary); background: #dfe8f1; }

/* Tablas y listados */
.table-glass { border-collapse: separate; border-spacing: 0 6px; }
.table-glass th { color: var(--text-muted); background: transparent; border: 0; }
.table-glass td {
    color: var(--text-main);
    background: var(--bg-base);
    border: 0;
    box-shadow: 0 2px 5px rgba(184, 196, 208, .35);
}
.table-glass tr td:first-child { border-radius: 12px 0 0 12px; }
.table-glass tr td:last-child { border-radius: 0 12px 12px 0; }
.table-glass tr:hover td { background: #e3eaf2; box-shadow: var(--neu-inset); }
main table tbody tr { transition: var(--neu-transition); }
main table tbody tr:hover { background: #e3eaf2; }

/* Paneles de cotización, análisis y gráficos */
#dealForm #analysisFields,
#dealForm #advancedFields,
main .bg-slate-50.rounded-xl,
main .bg-slate-50.rounded-2xl,
main [class*="bg-sky-50"],
main [class*="bg-amber-50"] {
    box-shadow: var(--neu-inset);
}
main [role="progressbar"],
main .progress,
main canvas { border-radius: 14px; box-shadow: var(--neu-inset); }

/* Acciones de tarjeta: misma superficie y estado presionado */
.crm-card-action {
    color: var(--text-muted);
    background: var(--bg-base);
    border: 0;
    box-shadow: 3px 3px 7px var(--dark-shadow), -3px -3px 7px var(--light-shadow);
}
.crm-card-action:hover { transform: translateY(-2px); box-shadow: 2px 2px 5px var(--dark-shadow), -2px -2px 5px var(--light-shadow); }
.crm-card-action:active { transform: scale(.96); box-shadow: var(--neu-inset); }

/* Aparición de modales y popups sin cambiar su apertura/cierre */
.crm-deal-modal > div:first-child,
#modalDetalle > div,
#modalReasignar > form,
#modalCambioPass > div {
    color: var(--text-main);
    background: var(--bg-base) !important;
    border: 0;
    box-shadow: var(--neu-outset);
}
#modal .border-b,
#modalDetalle .border-b { border-color: rgba(108, 122, 137, .18) !important; }
#modal:not(.hidden) > div,
#modalDetalle:not(.hidden) > div,
#modalReasignar:not(.hidden) > form,
#modalCambioPass > div {
    animation: softModalIn .24s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes softModalIn {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

/* Switch de permisos: conserva checkbox, teclado y eventos existentes */
#matrix input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-base);
    box-shadow: var(--neu-inset);
    cursor: pointer;
}
#matrix input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 2px 2px 4px rgba(108, 122, 137, .4);
    transition: var(--neu-transition);
}
#matrix input[type="checkbox"]:checked { background: var(--primary); box-shadow: inset 2px 2px 5px rgba(4, 25, 44, .35), 0 0 8px rgba(15, 62, 104, .18); }
#matrix input[type="checkbox"]:checked::before { transform: translateX(18px) rotate(360deg); }
#matrix input[type="checkbox"]:focus-visible { outline: 3px solid rgba(15, 62, 104, .2); outline-offset: 3px; }
#matrix input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }

/* Bienvenida al entrar: saludo puntual asociado al inicio de sesión */
#welcomeModal { animation: welcomeFadeIn .2s ease-out both; }
.crm-welcome-card {
    color: var(--text-main);
    background: var(--bg-base);
    box-shadow: 12px 12px 26px rgba(20, 38, 58, .28), -6px -6px 16px rgba(245, 247, 250, .62);
    animation: welcomePopIn .42s cubic-bezier(.18, .82, .28, 1.18) both;
}
@keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomePopIn { from { opacity: 0; transform: scale(.82) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
#modalCreateCompany:not(.hidden),
#clientCreatedConfirmation:not(.hidden) { animation: clientPopupFade .2s ease-out both; }
#modalCreateCompany:not(.hidden) .client-create-pop,
#clientCreatedConfirmation:not(.hidden) .client-created-pop { animation: clientPopupScale .38s cubic-bezier(.18,.82,.28,1.18) both; }
.client-create-pop,
.client-created-pop { color: var(--text-main); background: var(--bg-base); box-shadow: 12px 12px 26px rgba(20,38,58,.28), -6px -6px 16px rgba(245,247,250,.62); }
.client-created-check { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#2cb889,#16835e); box-shadow: 5px 5px 12px rgba(22,131,94,.3), -4px -4px 10px rgba(245,247,250,.62); animation: clientCheckPop .45s cubic-bezier(.18,.82,.28,1.2) both; }
#modalCreateCompany { z-index: 1100 !important; }
#clientCreatedConfirmation { z-index: 1150 !important; pointer-events: none; }
.client-created-check svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.company-empty-result { color: var(--text-muted); }
@keyframes clientPopupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes clientPopupScale { from { opacity: 0; transform: scale(.82) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes clientCheckPop { from { opacity: 0; transform: scale(.45) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
    body :where(a, button, input, select, textarea, [role="button"], .custom-select-trigger),
    #matrix input[type="checkbox"]::before,
    #modal:not(.hidden) > div,
    #modalDetalle:not(.hidden) > div,
    #modalReasignar:not(.hidden) > form,
    #modalCambioPass > div,
    #welcomeModal,
    #welcomeModal .crm-welcome-card,
    #modalCreateCompany,
    #modalCreateCompany .client-create-pop,
    #clientCreatedConfirmation,
    #clientCreatedConfirmation .client-created-pop,
    .client-created-check {
        transition: none !important;
        animation: none !important;
    }
}