/* Tema del CRM (clientes, prospectos, cotizaciones, citas…) alineado al diseño nuevo.
   Se carga después de style.css y del CSS de Tailwind, por eso usa !important. */
:root {
    --crm-header: #37b5d2;
    --crm-navy: #083a56;
    --crm-accent: #1f9fbe;
    --crm-accent-hover: #178aa6;
    --crm-accent-soft: #d3f0f6;
    --crm-accent-ink: #137f99;
    --crm-soft: #f5f9fb;
    --crm-line: #e3e8eb;
    --crm-ink: #0b3a57;
}

/* ---- Pestañas (Leads / Prospectos / Clientes / Cotizaciones / Citas) ---- */
nav.border-gray-300 { border-color: var(--crm-line) !important; border-radius: 12px; overflow: hidden; }
nav .bg-teal-400 { background-color: var(--crm-accent) !important; color: #fff !important; }
nav a.hover\:bg-gray-100:hover { background-color: var(--crm-accent-soft) !important; color: var(--crm-accent-ink) !important; }

/* ---- Botones principales ---- */
.bg-cyan-600 { background-color: var(--crm-accent) !important; }
.hover\:bg-cyan-700:hover { background-color: var(--crm-accent-hover) !important; }
.bg-teal-400.hover\:bg-teal-500:hover { background-color: var(--crm-accent-hover) !important; }

/* ---- Tablas ---- */
.bg-cyan-800 { background-color: var(--crm-navy) !important; }
.hover\:text-cyan-100:hover { color: var(--crm-accent-soft) !important; }
section table { border-collapse: separate; border-spacing: 0; }
section table tbody tr:nth-child(odd) td { background: #fff !important; }
section table tbody tr:nth-child(even) td { background: var(--crm-soft) !important; }
section table tbody tr:hover td { background: var(--crm-accent-soft) !important; }
section table tbody td { border-bottom: 1px solid var(--crm-line); color: #3d5666; }
section table tbody tr td:first-child { color: var(--crm-ink); font-weight: 500; }

/* ---- Paginación y foco ---- */
.text-blue-600.bg-blue-50 { background-color: var(--crm-accent-soft) !important; color: var(--crm-accent-ink) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--crm-accent) !important; }
.focus\:border-blue-500:focus { border-color: var(--crm-accent) !important; }

/* ---- Nav oscuro del vendedor (misma paleta que el modo vendedor del buscador) ---- */
nav.nav-seller-dark { background-color: #06141c !important; box-shadow: inset 0 -1px 0 #12303d !important; }
nav.nav-seller-dark .border-white\/15, nav.nav-seller-dark .border-white\/20 { border-color: #1a3643 !important; }
nav.nav-seller-dark .hover\:text-\[\#003a36\]:hover { color: #fff !important; }

/* ---- Cotizador (formulario) en modo oscuro ---- */
.qt-dark { background: #0c1a22 !important; color-scheme: dark; }
.qt-dark > p { color: #fff !important; }
.qt-dark > div { background: #122530 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; }
.qt-dark .bg-white { background: #122530 !important; }
.qt-dark label, .qt-dark .text-gray-700, .qt-dark .text-gray-800, .qt-dark .text-gray-900 { color: #e4eef3 !important; }
.qt-dark .text-gray-400, .qt-dark .text-gray-500, .qt-dark .text-gray-600 { color: #8ea2ad !important; }
.qt-dark input, .qt-dark select, .qt-dark textarea,
.qt-dark .bg-gray-50, .qt-dark .bg-gray-100 {
    background-color: #172d39 !important; color: #e4eef3 !important; border-color: #23404e !important;
}
.qt-dark input::placeholder, .qt-dark textarea::placeholder { color: #5f7784 !important; }
.qt-dark input:disabled, .qt-dark select:disabled { opacity: .6; }
.qt-dark .border-gray-300, .qt-dark .border-gray-200, .qt-dark .border-gray-100 { border-color: #23404e !important; }
.qt-dark input:focus, .qt-dark select:focus { border-color: #2cb3d2 !important; box-shadow: 0 0 0 2px rgba(44, 179, 210, .35) !important; }
/* botón secundario (Enviar por correo) y principal */
.qt-dark button.border { color: #6fd3ea !important; border-color: #2cb3d2 !important; }
.qt-dark button.bg-\[\#1e3a8a\], .qt-dark button[class*="bg-blue-9"], .qt-dark button[class*="bg-indigo-"] { background-color: #1f9fbe !important; color: #fff !important; }
/* vue-select */
.qt-dark .v-select { background: #172d39 !important; border-color: #23404e !important; --vs-controls-color: #8ea2ad; --vs-border-color: #23404e; --vs-dropdown-bg: #122530; --vs-dropdown-color: #e4eef3; --vs-selected-color: #e4eef3; --vs-search-input-color: #e4eef3; --vs-disabled-bg: #172d39; --vs-disabled-color: #5f7784; --vs-dropdown-option--active-bg: #1d3643; --vs-dropdown-option--active-color: #e4eef3; }
.qt-dark .vs__dropdown-menu { background: #122530 !important; color: #e4eef3 !important; border-color: #23404e !important; }
.qt-dark .vs__dropdown-option { border-color: #1d3643 !important; }
.qt-dark .vs__dropdown-option--highlight { background: #1d3643 !important; color: #e4eef3 !important; }
.qt-dark .vs__selected, .qt-dark .vs__search { color: #e4eef3 !important; }
.qt-dark .vs__open-indicator, .qt-dark .vs__clear { fill: #8ea2ad !important; }
.qt-dark .vs__no-options { color: #8ea2ad !important; }

/* ---- Registro de cliente / prospecto en modo oscuro ---- */
.form-dark { color-scheme: dark; }
.form-dark .form-background { background: #0c1a22 !important; }
.form-dark .form-background::before { opacity: .12; }
.form-dark .bg-white { background-color: #172d39 !important; }
.form-dark .form-card { background-color: #122530 !important; box-shadow: 0 20px 60px -15px rgba(0, 0, 0, .7) !important; }
.form-dark .form-card h1, .form-dark .text-cyan-600 { color: #fff !important; }
.form-dark .text-gray-900, .form-dark .text-gray-800, .form-dark .text-gray-700 { color: #e4eef3 !important; }
.form-dark .text-gray-600 { color: #c9d7de !important; }
.form-dark .text-gray-500, .form-dark .text-gray-400 { color: #8ea2ad !important; }
.form-dark .text-cyan-700, .form-dark .text-cyan-800 { color: #6fd3ea !important; }
.form-dark input, .form-dark select, .form-dark textarea {
    background-color: #172d39 !important; color: #e4eef3 !important; border-color: #23404e !important;
}
.form-dark input::placeholder, .form-dark textarea::placeholder { color: #5f7784 !important; }
.form-dark input:disabled, .form-dark select:disabled { opacity: .6; }
.form-dark input:focus, .form-dark select:focus, .form-dark textarea:focus { border-color: #2cb3d2 !important; box-shadow: 0 0 0 2px rgba(44, 179, 210, .35) !important; }
.form-dark .border-gray-300, .form-dark .border-gray-200, .form-dark .border-t, .form-dark .border-b-2 { border-color: #23404e !important; }
.form-dark .bg-gray-300, .form-dark .bg-gray-200, .form-dark .bg-gray-100 { background-color: #1d3643 !important; }
.form-dark .bg-gray-50, .form-dark .hover\:bg-gray-50:hover { background-color: #172d39 !important; }
.form-dark .bg-cyan-50 { background-color: #143f4b !important; }
.form-dark .bg-red-50 { background-color: #3a1d22 !important; }
.form-dark .text-red-700 { color: #ff9a9a !important; }
.form-dark .border-red-300 { border-color: #7a3a42 !important; }