/* ============================================================
   WEDINSIDE v13 — ESTILOS DEFINITIVOS
   Regla fundamental: CERO colores gestionados por Tailwind dark:
   Todo color está aquí o en las clases wf-* del JS
   ============================================================ */

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    transition: background-color 0.2s, color 0.2s;
    -webkit-text-size-adjust: 100%;
}

/* Scrollbar oculta */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   MODO CLARO — COLOR BASE DE TODOS LOS TEXTOS: SLATE 700 (#334155)
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: #0f172a; }
p, span, label, li, td, th, a, button { color: #334155; }
input, select, textarea {
    color: #334155;
    background-color: #ffffff;
    border-color: #cbd5e1;
}
input::placeholder, textarea::placeholder { color: #94a3b8; }

/* ============================================================
   SIDEBAR — modo claro
   ============================================================ */
#app-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
}
#sidebar-logo-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}
#sidebar-logo-img { max-height: 32px; width: auto; object-fit: contain; }
#sidebar-logo-img, #avatar-logo-img, #login-logo-img { transition: all 0.2s ease; }

/* Nav buttons modo claro */
.nav-btn { color: #334155 !important; }

/* Hover modo claro: slate-100 con texto slate-700 */
.light-btn-hover:hover {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

/* ============================================================
   WF-CARD — componente principal de tarjeta
   ============================================================ */
.wf-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}

/* ============================================================
   CALENDARIO
   ============================================================ */
.wf-cal-cell {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.wf-cal-cell:hover { border-color: #7c3aed; }

/* ============================================================
   KANBAN
   ============================================================ */
.kanban-columna-contenedor {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}
.kanban-tarjeta-real {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.kanban-tarjeta-real:hover { border-color: #7c3aed; }
.kanban-tarjeta-real h4,
.kanban-tarjeta-real p,
.kanban-tarjeta-real span { color: #334155; }

/* Estado borders kanban */
.estado-nuevo        { border-left: 3px solid #8b5cf6; }
.estado-contacto     { border-left: 3px solid #3b82f6; }
.estado-presupuesto  { border-left: 3px solid #f59e0b; }
.estado-reservado    { border-left: 3px solid #10b981; }
.estado-descartado   { border-left: 3px solid #ef4444; }
.estado-caducado     { border-left: 3px solid #f97316; }

/* ============================================================
   RECORDATORIOS
   ============================================================ */
.recordatorio-urgente { border-left: 4px solid #ef4444; background-color: #fff1f2; }
.recordatorio-hoy     { border-left: 4px solid #f59e0b; background-color: #fffbeb; }

/* ============================================================
   COLABORACIONES / COLABORADORES — modo claro
   ============================================================ */
/* Tabs de colaboraciones */
.collab-tab-btn {
    color: #334155;
    background-color: transparent;
}
.collab-tab-btn:hover {
    background-color: #f1f5f9;
    color: #334155;
}
/* Recuadros de invitaciones */
.collab-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.collab-card:hover {
    background-color: #f1f5f9;
    border-color: #7c3aed;
    color: #334155;
}
.collab-card p, .collab-card span, .collab-card h4 { color: #334155; }

/* Tutorial colaboradores */
.collab-tutorial {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.collab-tutorial li, .collab-tutorial p, .collab-tutorial span { color: #334155; }
.collab-tutorial:hover { background-color: #e2e8f0; color: #334155; }

/* ============================================================
   MODO OSCURO — TODO CONTROLADO AQUÍ, NADA EN TAILWIND
   ============================================================ */
.dark {
    background-color: #090d16;
    color: #f1f5f9;
}
.dark body { background-color: #090d16 !important; }
.dark #app-main-content { background-color: #0c1120 !important; }

/* Todos los textos en oscuro */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #f1f5f9 !important; }
.dark p, .dark span, .dark label, .dark li,
.dark td, .dark th, .dark a { color: #e2e8f0 !important; }
.dark button { color: #e2e8f0 !important; }

/* Sidebar oscuro */
.dark #app-sidebar { background-color: #0f172a !important; border-right-color: #1e293b !important; }
.dark #sidebar-logo-container { border-color: #1e293b !important; }
.dark #app-sidebar .border-b,
.dark #app-sidebar .border-t { border-color: #1e293b !important; }
.dark .nav-btn { color: #94a3b8 !important; }

/* Hover en oscuro: slate-700 (#334155) con letra blanca — NO slate-100 sobre blanco */
.dark .light-btn-hover:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Header móvil oscuro */
.dark header { background-color: #0f172a !important; border-color: #1e293b !important; }

/* Inputs en oscuro */
.dark input, .dark select, .dark textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; }
.dark select option { background-color: #1e293b !important; color: #f1f5f9 !important; }

/* WF-CARD oscuro */
.dark .wf-card {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Fondos bg-white / bg-slate en oscuro */
.dark .bg-white   { background-color: #0f172a !important; border-color: #1e293b !important; }
.dark .bg-slate-50 { background-color: #0c1120 !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }
.dark .bg-slate-50.border-b { background-color: #0c1120 !important; border-color: #1e293b !important; }

/* Borders en oscuro */
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300 { border-color: #1e293b !important; }

/* Calendario oscuro */
.dark .wf-cal-cell { background-color: #0f172a !important; border-color: #1e293b !important; color: #f1f5f9 !important; }
.dark .wf-cal-cell:hover { border-color: #7c3aed !important; }
.dark #calendar-main-card { background-color: #0f172a !important; border-color: #1e293b !important; }

/* Kanban oscuro */
.dark .kanban-columna-contenedor { background-color: #0f172a !important; border-color: #1e293b !important; }
.dark .kanban-tarjeta-real {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark .kanban-tarjeta-real:hover { border-color: #7c3aed !important; }
.dark .kanban-tarjeta-real h4   { color: #f1f5f9 !important; }
.dark .kanban-tarjeta-real p    { color: #cbd5e1 !important; }
.dark .kanban-tarjeta-real span { color: #cbd5e1 !important; }

/* Badges de origen en kanban */
.dark .kanban-tarjeta-real .bg-violet-100 { background-color: #4c1d95 !important; color: #c4b5fd !important; }

/* Cards del dashboard identificadas por ID */
.dark #card-met-1, .dark #card-met-2, .dark #card-met-3, .dark #card-met-4,
.dark #panel-reminders, .dark #panel-chart, .dark #billing-table-card,
.dark #calendar-main-card, .dark #filter-bar-container,
.dark #config-modal-card, .dark #new-lead-modal-card,
.dark #lead-modal-card, .dark #cal-modal-card {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

/* Tabla billing oscuro */
.dark #billing-table-card thead th { background-color: #1e293b !important; color: #f1f5f9 !important; }
.dark #billing-table-body tr { border-bottom-color: #1e293b !important; }
.dark #billing-table-body td { color: #f1f5f9 !important; }

/* Lead modal header oscuro */
.dark #lead-modal-header { background-color: #0c1120 !important; border-color: #1e293b !important; }

/* Recordatorios oscuro */
.dark .recordatorio-urgente { background-color: #1a0a0a !important; border-left-color: #ef4444 !important; }
.dark .recordatorio-hoy     { background-color: #1a1200 !important; border-left-color: #f59e0b !important; }

/* Versión badge oscuro */
.dark #version-badge { background-color: #2e1065 !important; color: #c4b5fd !important; border-color: #4c1d95 !important; }

/* Colaboraciones oscuro */
.dark .collab-tab-btn { color: #94a3b8 !important; }
.dark .collab-tab-btn:hover { background-color: #334155 !important; color: #ffffff !important; }
.dark .collab-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark .collab-card:hover { background-color: #334155 !important; border-color: #7c3aed !important; }
.dark .collab-card p, .dark .collab-card span, .dark .collab-card h4 { color: #f1f5f9 !important; }
.dark .collab-tutorial { background-color: #1e293b !important; border-color: #334155 !important; }
.dark .collab-tutorial li, .dark .collab-tutorial p { color: #cbd5e1 !important; }

/* ============================================================
   MÓVIL — AJUSTES RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    /* Fuente base ligeramente mayor para legibilidad en móvil */
    body { font-size: 15px; }

    /* Sidebar en móvil: ancho fijo 280px con scroll */
    #app-sidebar {
        width: 280px !important;
        max-width: 85vw;
        overflow-y: auto;
    }

    /* Evitar zoom en inputs en iOS */
    input, select, textarea { font-size: 16px !important; }

    /* Main content: sin margen extra */
    #app-main-content { padding-bottom: env(safe-area-inset-bottom, 16px); }

    /* Kanban: scroll horizontal completo */
    .kanban-scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    /* Cards en móvil: padding reducido */
    .wf-card { border-radius: 12px; }

    /* Modales en móvil: ocupan más pantalla */
    #lead-modal-card,
    #new-lead-modal-card,
    #config-modal-card {
        max-height: 95vh !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Safe area en iPhone con notch */
    #app-main-content {
        padding-top: env(safe-area-inset-top, 0px);
    }
    header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
}

@media (max-width: 380px) {
    /* Pantallas muy pequeñas */
    .nav-btn span { font-size: 11px; }
    input, select, textarea { font-size: 16px !important; }
}