/* ============================================
   Vista al Lago — Identidad de marca
   Celeste lago #267FA0 (primario) · Arena/sol #D9B36A (acento, como el sol del logo)
   Variables en formato "R G B" para Tailwind: rgb(var(--primary-600) / <alpha>)
   ============================================ */

:root,
:root[data-scheme="vistalago"] {
    --primary-50:  240 249 252;
    --primary-100: 211 238 247;
    --primary-200: 168 222 240;
    --primary-300: 118 200 228;
    --primary-400:  72 175 210;
    --primary-500:  48 151 187;
    --primary-600:  38 127 160; /* #267FA0 — marca (celeste lago) */
    --primary-700:  31 103 131;
    --primary-800:  26  82 105;
    --primary-900:  21  65  84;

    --accent-50:  250 246 236;
    --accent-100: 243 233 209;
    --accent-300: 229 205 149;
    --accent-500: 217 179 106; /* #D9B36A — arena / sol */
    --accent-600: 190 150  74;
    --accent-700: 152 117  53;
}

/* ── Fondo de la app: degradado celeste tipo lago ────── */
.app-bg {
    background: linear-gradient(165deg,
        rgb(var(--primary-50)) 0%,
        rgb(var(--primary-100)) 45%,
        rgb(var(--primary-200)) 100%);
    background-attachment: fixed;
}
.dark .app-bg,
.dark.app-bg {
    background: linear-gradient(165deg, #0b1f2a 0%, #0f2836 45%, #111827 100%);
    background-attachment: fixed;
}

/* ── Badges de estado de lote ────────────────────────── */
.badge-disponible { background: rgb(var(--primary-100)); color: rgb(var(--primary-800)); }
.badge-reservado  { background: rgb(var(--accent-100));  color: rgb(var(--accent-700)); }
.badge-vendido    { background: #e5e7eb; color: #374151; }
.badge-no_vendible{ background: #fee2e2; color: #991b1b; }

.dark .badge-disponible { background: rgba(var(--primary-500), 0.25); color: rgb(var(--primary-200)); }
.dark .badge-reservado  { background: rgba(var(--accent-500), 0.25);  color: rgb(var(--accent-300)); }
.dark .badge-vendido    { background: #374151; color: #d1d5db; }
.dark .badge-no_vendible{ background: rgba(153,27,27,0.3); color: #fecaca; }

/* ── Transicion suave del contenido al navegar (router) ── */
#app-content { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#app-content.is-loading { opacity: .5; pointer-events: none; transition: opacity .12s; }

/* ── Scrollbar discreto ─────────────────────────────── */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }
.dark .thin-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

[x-cloak] { display: none !important; }

/* ── Selects nativos consistentes (Safari ignora el estilo nativo) ──
   Quita el chrome del SO y dibuja un chevron propio; el color y fondo
   siguen viniendo de las clases Tailwind (bg-white / dark:bg-gray-700). */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1rem 1rem;
    padding-right: 2.25rem !important;
    print-color-adjust: exact;
}
.dark select:not([multiple]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
select:not([multiple])::-ms-expand { display: none; }

/* ── Impresión: solo el contenido (cotización, reportes) ── */
@media print {
    aside, header, footer, .no-print { display: none !important; }
    #app-content { padding: 0 !important; }
    body, html { background: #fff !important; }
    .shadow-sm, .shadow-xl { box-shadow: none !important; }
    .border, .rounded-xl { border-color: #e5e7eb !important; }
    table { font-size: 11px; }
    .print\:block { display: block !important; }
}