/* ==========================================================================
   DESIGN TOKENS — CRM
   Sistema centralizado de colores para modo claro y oscuro.
   Importar DESPUÉS de Tailwind para que las variables CSS estén disponibles
   en todo el proyecto.

   ESTRUCTURA:
   1.  Tokens globales del sistema (raíz)
   2.  Modo oscuro (html.dark / @media prefers-color-scheme)
   3.  Layouts (application, auth)
   4.  Sidebar / Navegación lateral
   5.  Dashboard de mensajes (dashmsj)
   6.  Mensajes — burbuja / hilo de conversación
   7.  Formulario de envío de mensajes
   8.  Clientes — tablero Kanban
   9.  Admin — tablas de usuarios
   10. Autenticación (login, registro, OTP/contraseña)
   11. Notificaciones y badges
   12. Correos (Devise mailer)
   13. Utilidades globales compartidas (shared/)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS GLOBALES — :root (modo claro por defecto)
   ========================================================================== */

:root {

  /* ——— Marca / Brand ——— */
  --color-brand-primary:        #FF8C21;   /* Naranja principal — sidebar hover, botones CTA   */
  --color-brand-primary-hover:  #EF7B17;   /* Naranja hover                                    */
  --color-brand-primary-dark:   #e67e1d;   /* Naranja oscuro — pressed / active                */
  --color-brand-pwa:            #317EFB;   /* Azul barra PWA (theme-color meta)                */

  /* ——— Neutrales / Grises ——— */
  --color-neutral-50:           #f8fafc;   /* Fondo tabla header, superficies ultra-claras     */
  --color-neutral-100:          #f1f5f9;   /* Fondo filas tabla, separadores suaves            */
  --color-neutral-200:          #e2e8f0;   /* Badges de rol (admin), scrollbar columna         */
  --color-neutral-300:          #cbd5e1;   /* Scrollbar thumb Kanban                           */
  --color-neutral-400:          #94a3b8;   /* Scrollbar hover Kanban, texto secundario         */
  --color-neutral-500:          #64748b;   /* Etiquetas (admin), textos de apoyo               */
  --color-neutral-600:          #6b7280;   /* Botón cancelar SweetAlert, ícono inactivo        */
  --color-neutral-700:          #374151;   /* Texto medio                                      */
  --color-neutral-800:          #1f2937;   /* Texto oscuro                                     */
  --color-neutral-900:          #111827;   /* Texto casi negro                                 */

  /* ——— Azules ——— */
  --color-blue-400:             #60a5fa;   /* Kanban drag-over border / scrollbar              */
  --color-blue-500:             #3b82f6;   /* Botón primario, barra de progreso, focus rings   */
  --color-blue-600:             #2563eb;   /* Login button, links activos                      */
  --color-blue-700:             #1d4ed8;   /* Links hover, archivos adjuntos asesor            */
  --color-blue-bg-light:        #eff6ff;   /* Kanban drag-over background                      */
  --color-blue-bg-100:          #dbeafe;   /* Lead seleccionado, mensajes Messenger (light)    */
  --color-blue-bg-900:          #1e3a5f;   /* Mensajes Messenger (dark)                        */

  /* ——— Verdes ——— */
  --color-green-500:            #10b981;   /* Email unlock, play button cliente                */
  --color-green-600:            #059669;   /* Green hover, archivos adjuntos cliente           */
  --color-green-bg-100:         #d1fae5;   /* Mensajes WhatsApp (light)                        */
  --color-green-bg-900:         #064e3b;   /* Mensajes WhatsApp (dark)                         */

  /* ——— Rojos / Error ——— */
  --color-red-500:              #ef4444;   /* Borde error                                      */
  --color-red-600:              #dc2626;   /* Botón eliminar SweetAlert, badge no-leído        */
  --color-red-700:              #b91c1c;   /* Texto error                                      */
  --color-red-bg-50:            #fff1f2;   /* Fondo error suave                                */
  --color-red-bg-100:           #fee2e2;   /* Fondo error (inputs, banners)                    */
  --color-red-border:           #fecaca;   /* Borde error claro                                */

  /* ——— Rosas — Instagram ——— */
  --color-pink-bg-100:          #fce7f3;   /* Mensajes Instagram (light)                       */
  --color-pink-border:          #ec4899;   /* Borde burbuja Instagram                          */

  /* ——— Amarillo / Advertencia ——— */
  --color-yellow-500:           #eab308;   /* Indicador mensaje programado                     */

  /* ——— Naranjas — fondo suave ——— */
  --color-orange-bg-50:         #fff7ed;   /* Separador de fecha (light)                       */
  --color-orange-bg-100:        #ffedd5;   /* Fondo ícono OTP (light)                          */

  /* ——— Índigo ——— */
  --color-indigo-700:           #4338ca;   /* Etiqueta pestaña activa (lead details)           */


  /* ------------------------------------------------------------------
     SEMÁNTICOS — lo que realmente se usa en componentes
     Cambia SOLO estos valores para ajustar el tema.
     ------------------------------------------------------------------ */

  /* Superficies / Fondos */
  --bg-body:                    #f1f5f9;   /* Fondo general de la app (layouts)                */
  --bg-surface:                 #ffffff;   /* Cards, modales, paneles                          */
  --bg-surface-alt:             #f8fafc;   /* Fila alterna, zona secundaria                    */
  --bg-overlay:                 rgba(0, 0, 0, 0.5);  /* Overlays y modales                    */
  --bg-photoswipe:              rgba(11, 20, 26, 0.98); /* Galería de imágenes (WhatsApp style) */

  /* Texto */
  --text-primary:               #111827;   /* Texto principal                                  */
  --text-secondary:             #6b7280;   /* Texto secundario, fechas, metadatos              */
  --text-muted:                 #94a3b8;   /* Texto deshabilitado, placeholder                 */
  --text-on-brand:              #ffffff;   /* Texto sobre fondo naranja/azul (botones)         */
  --text-link:                  #2563eb;   /* Links                                            */
  --text-link-hover:            #1d4ed8;   /* Links hover                                      */

  /* Bordes */
  --border-default:             #e5e7eb;   /* Bordes generales                                 */
  --border-strong:              #d1d5db;   /* Bordes más visibles                              */
  --border-focus:               var(--color-brand-primary); /* Focus ring color               */

  /* Sidebar */
  --sidebar-bg:                 #ffffff;
  --sidebar-text:               #1f2937;
  --sidebar-icon-hover:         var(--color-brand-primary);
  --sidebar-border:             #d1d5db;
  --sidebar-mobile-bg:          #ffffff;
  --sidebar-mobile-icon:        #6b7280;

  /* Dashboard Mensajes (dashmsj) */
  --dashmsj-bg:                 #ffffff;
  --dashmsj-panel-list:         #93c5fd;   /* bg-blue-300 — panel lista chats                  */
  --dashmsj-border:             #d1d5db;
  --dashmsj-header-bg:          #ffffff;
  --dashmsj-lead-hover:         #f3f4f6;
  --dashmsj-lead-selected-bg:   #dbeafe;
  --dashmsj-lead-selected-border: #3b82f6;
  --dashmsj-lead-time:          #9ca3af;
  --dashmsj-lead-preview:       #4b5563;

  /* Mensajes — burbujas */
  --msg-text:                   #111827;
  --msg-timestamp:              #6b7280;
  --msg-whatsapp-bg:            #d1fae5;
  --msg-whatsapp-border:        #10b981;
  --msg-messenger-bg:           #dbeafe;
  --msg-messenger-border:       #3b82f6;
  --msg-instagram-bg:           #fce7f3;
  --msg-instagram-border:       #ec4899;
  --msg-default-bg:             #f3f4f6;
  --msg-default-border:         #9ca3af;
  --msg-audio-bg:               #ffffff;
  --msg-audio-shadow:           rgba(0, 0, 0, 0.1);
  --msg-play-advisor:           #3b82f6;
  --msg-play-advisor-hover:     #2563eb;
  --msg-play-client:            #10b981;
  --msg-play-client-hover:      #059669;
  --msg-date-sep-bg:            #fff7ed;
  --msg-date-sep-text:          #4b5563;
  --msg-scheduled-color:        #eab308;

  /* Formulario envío mensajes */
  --form-msg-bg:                #ffffff;
  --form-msg-border:            #e5e7eb;
  --form-msg-input-bg:          #f3f4f6;
  --form-msg-input-text:        #374151;
  --form-msg-label:             #4b5563;
  --form-msg-icon:              #6b7280;
  --form-msg-icon-hover:        #3b82f6;
  --form-msg-submit:            #2563eb;
  --form-msg-submit-hover:      #1d4ed8;
  --form-msg-progress-track:    #e5e7eb;
  --form-msg-progress-fill:     #3b82f6;

  /* Kanban — Clientes */
  --kanban-bg:                  #f1f5f9;
  --kanban-col-bg:              #ffffff;
  --kanban-col-border:          #e5e7eb;
  --kanban-card-bg:             #ffffff;
  --kanban-card-border:         #e5e7eb;
  --kanban-card-hover:          #f9fafb;
  --kanban-drag-over-bg:        #eff6ff;
  --kanban-drag-over-border:    #60a5fa;
  --kanban-scrollbar-track:     transparent;
  --kanban-scrollbar-thumb:     #cbd5e1;
  --kanban-scrollbar-hover:     #94a3b8;
  --kanban-col-scrollbar:       #e2e8f0;
  --kanban-heading:             #1f2937;
  --kanban-subtitle:            #6b7280;
  --kanban-icon:                #2563eb;
  --kanban-btn-text:            #374151;
  --kanban-btn-border:          #e5e7eb;
  --kanban-btn-hover-bg:        #f9fafb;
  --kanban-btn-hover-border:    #d1d5db;
  --kanban-del-hover-bg:        #fff1f2;
  --kanban-del-hover-border:    #fecaca;
  --kanban-del-hover-text:      #dc2626;
  --kanban-error-bg:            #fff1f2;
  --kanban-error-border:        #fecaca;
  --kanban-error-text:          #b91c1c;

  /* Admin — tablas */
  --admin-table-bg:             #ffffff;
  --admin-table-border:         #e5e7eb;
  --admin-table-header-bg:      #f8fafc;
  --admin-table-row-border:     #f1f5f9;
  --admin-badge-bg:             #e2e8f0;
  --admin-status-bg:            #f1f5f9;
  --admin-empty-bg:             #ffffff;
  --admin-empty-border:         #cbd5e1;
  --admin-label:                #64748b;
  --admin-detail-bg:            #ffffff;
  --admin-detail-border:        #e5e7eb;

  /* Autenticación */
  --auth-input-border:          #d1d5db;
  --auth-input-focus:           #3b82f6;
  --auth-btn-bg:                #2563eb;
  --auth-btn-text:              #ffffff;
  --auth-btn-hover:             #EF7B17;
  --auth-google-hover:          #f3f4f6;
  --auth-forgot-color:          #ef4444;
  --auth-helper:                #6b7280;

  /* OTP / Contraseña */
  --otp-accent:                 #FF8C21;
  --otp-accent-hover:           #e67e1d;
  --otp-icon-bg:                #ffedd5;

  /* Notificaciones / Badges */
  --badge-unread-bg:            #dc2626;
  --badge-unread-text:          #ffffff;
  --notif-success-bg:           #d1fae5;

  /* SweetAlert */
  --swal-delete-btn:            #dc2626;
  --swal-cancel-btn:            #6b7280;
}


/* ==========================================================================
   2. MODO OSCURO — html.dark  (toggling manual via JS)
      También respeta la preferencia del sistema si no hay clase explícita.
   ========================================================================== */




/* Cuando la clase .dark está en html, tiene precedencia sobre @media */
html.dark :root {
  color-scheme: dark;
}


/* ==========================================================================
   3. LAYOUTS — application.html.erb / auth.html.erb
   ========================================================================== */

/* Fondo y tipografía base del body */
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

/* Layout contenedor principal */
.layout-main {
  background-color: var(--bg-body);
  color: var(--text-primary);
}


/* ==========================================================================
   4. SIDEBAR / NAVEGACIÓN LATERAL — side/_sidebar.html.erb
   ========================================================================== */

.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-color: var(--sidebar-border);
}

/* Íconos y links del menú */
.sidebar-link {
  color: var(--sidebar-text);
}

.sidebar-link:hover,
.sidebar-link:focus {
  color: var(--sidebar-icon-hover);  /* Naranja brand */
}

/* Separadores internos del sidebar */
.sidebar-divider {
  border-color: var(--sidebar-border);
}

/* Navbar móvil (bottom bar) */
.sidebar-mobile-nav {
  background-color: var(--sidebar-mobile-bg);
  border-color: var(--border-default);
}

.sidebar-mobile-icon {
  color: var(--sidebar-mobile-icon);
}


/* ==========================================================================
   5. DASHBOARD DE MENSAJES — dashmsj/dashmsj.html.erb
   ========================================================================== */

/* Contenedor principal del chat */
.dashmsj-container {
  background-color: var(--dashmsj-bg);
  color: var(--text-primary);
}

/* Panel izquierdo — lista de conversaciones */
.dashmsj-panel-list {
  background-color: var(--dashmsj-panel-list);
  border-color: var(--dashmsj-border);
}

/* Header de conversación activa */
.dashmsj-header {
  background-color: var(--dashmsj-header-bg);
  border-color: var(--dashmsj-border);
}

/* Ítem de lead en lista */
.dashmsj-lead-item {
  color: var(--text-primary);
}

.dashmsj-lead-item:hover {
  background-color: var(--dashmsj-lead-hover);
}

.dashmsj-lead-item.selected {
  background-color: var(--dashmsj-lead-selected-bg);
  border-left-color: var(--dashmsj-lead-selected-border);
}

/* Texto auxiliar de lead */
.dashmsj-lead-time   { color: var(--dashmsj-lead-time); }
.dashmsj-lead-preview { color: var(--dashmsj-lead-preview); }

/* Badge de mensajes no leídos */
.dashmsj-badge-unread {
  background-color: var(--badge-unread-bg);
  color: var(--badge-unread-text);
}

/* Nombre del lead — en dark resalta con el naranja de marca */
html.dark .dashmsj-lead-name {
  color: var(--color-brand-primary);
}

/* Separador de tabs activo */
.dashmsj-tab-active {
  border-bottom-color: var(--color-brand-primary);
  color: var(--color-indigo-700);
}

/* Checkbox accent */
.dashmsj-checkbox {
  accent-color: var(--color-brand-primary);
}


/* ==========================================================================
   6. MENSAJES — BURBUJAS — messages/_message.html.erb
   ========================================================================== */

/* Texto base del mensaje */
.message-bubble {
  color: var(--msg-text);
}

/* WhatsApp */
.message-bubble--whatsapp {
  background-color: var(--msg-whatsapp-bg);
  border-left-color: var(--msg-whatsapp-border);
}

/* Facebook Messenger */
.message-bubble--messenger {
  background-color: var(--msg-messenger-bg);
  border-left-color: var(--msg-messenger-border);
}

/* Instagram */
.message-bubble--instagram {
  background-color: var(--msg-instagram-bg);
  border-left-color: var(--msg-instagram-border);
}

/* Otros / Defecto */
.message-bubble--default {
  background-color: var(--msg-default-bg);
  border-left-color: var(--msg-default-border);
}

/* Timestamp */
.message-timestamp {
  color: var(--msg-timestamp);
}

/* Indicador mensaje programado */
.message-scheduled {
  color: var(--msg-scheduled-color);
}

/* Reproductor de audio */
.message-audio-player {
  background-color: var(--msg-audio-bg);
  box-shadow: 0 1px 3px var(--msg-audio-shadow);
}

/* Botón play — asesor */
.message-play--advisor {
  background-color: var(--msg-play-advisor);
}
.message-play--advisor:hover {
  background-color: var(--msg-play-advisor-hover);
}

/* Botón play — cliente */
.message-play--client {
  background-color: var(--msg-play-client);
}
.message-play--client:hover {
  background-color: var(--msg-play-client-hover);
}

/* Link de archivo adjunto — asesor */
.message-file-link--advisor {
  color: var(--msg-messenger-border);
}

/* Link de archivo adjunto — cliente */
.message-file-link--client {
  color: var(--msg-whatsapp-border);
}

/* Separador de fecha entre mensajes */
.message-date-separator {
  background-color: var(--msg-date-sep-bg);
  color: var(--msg-date-sep-text);
}


/* ==========================================================================
   7. FORMULARIO DE ENVÍO — messages/_form.html.erb
   ========================================================================== */

.msg-form {
  background-color: var(--form-msg-bg);
  border-top-color: var(--form-msg-border);
}

.msg-form__input {
  background-color: var(--form-msg-input-bg);
  color: var(--form-msg-input-text);
}

.msg-form__label {
  color: var(--form-msg-label);
}

.msg-form__icon {
  color: var(--form-msg-icon);
}

.msg-form__icon:hover {
  color: var(--form-msg-icon-hover);
}

.msg-form__submit {
  color: var(--form-msg-submit);
}

.msg-form__submit:hover {
  color: var(--form-msg-submit-hover);
}

/* Barra de progreso de carga */
.msg-form__progress-track {
  background-color: var(--form-msg-progress-track);
}

.msg-form__progress-fill {
  background-color: var(--form-msg-progress-fill);
}

/* Mensajes de error en el formulario */
.msg-form__error {
  background-color: var(--color-red-bg-100);
  color: var(--color-red-700);
}


/* ==========================================================================
   8. CLIENTES — TABLERO KANBAN — clientes/main.html.erb
   ========================================================================== */

/* Fondo del tablero */
.kanban-board {
  background-color: var(--kanban-bg);
}

/* Columna */
.kanban-column {
  background-color: var(--kanban-col-bg);
  border-color: var(--kanban-col-border);
}

.kanban-column__heading {
  color: var(--kanban-heading);
}

.kanban-column__subtitle {
  color: var(--kanban-subtitle);
}

/* Scrollbar de columna */
.kanban-column::-webkit-scrollbar-thumb {
  background: var(--kanban-col-scrollbar);
}

/* Card de cliente */
.kanban-card {
  background-color: var(--kanban-card-bg);
  border-color: var(--kanban-card-border);
}

.kanban-card:hover {
  background-color: var(--kanban-card-hover);
}

/* Estado drag-over activo */
.kanban-column--drag-over {
  background-color: var(--kanban-drag-over-bg);
  box-shadow: inset 0 0 0 2px var(--kanban-drag-over-border);
}

/* Scrollbar del tablero general */
.kanban-board::-webkit-scrollbar-thumb {
  background: var(--kanban-scrollbar-thumb);
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--kanban-scrollbar-hover);
}

/* Ícono de encabezado */
.kanban-icon { color: var(--kanban-icon); }

/* Botón acción dentro de columna */
.kanban-btn {
  color: var(--kanban-btn-text);
  border-color: var(--kanban-btn-border);
}

.kanban-btn:hover {
  background-color: var(--kanban-btn-hover-bg);
  border-color: var(--kanban-btn-hover-border);
}

/* Botón eliminar */
.kanban-btn--delete:hover {
  background-color: var(--kanban-del-hover-bg);
  border-color: var(--kanban-del-hover-border);
  color: var(--kanban-del-hover-text);
}

/* Banner de error en kanban */
.kanban-error-banner {
  background-color: var(--kanban-error-bg);
  border-color: var(--kanban-error-border);
  color: var(--kanban-error-text);
}


/* ==========================================================================
   9. ADMIN — TABLAS DE USUARIOS — admin/users/index.html.erb
   ========================================================================== */

/* Contenedor de tabla */
.admin-table-wrapper {
  background-color: var(--admin-table-bg);
  border-color: var(--admin-table-border);
}

/* Encabezado de tabla */
.admin-table-header {
  background-color: var(--admin-table-header-bg);
  border-bottom-color: var(--admin-table-border);
}

/* Filas */
.admin-table-row {
  border-bottom-color: var(--admin-table-row-border);
}

/* Badge de rol */
.admin-badge-role {
  background-color: var(--admin-badge-bg);
}

/* Badge de estado */
.admin-badge-status {
  background-color: var(--admin-status-bg);
}

/* Estado vacío (sin resultados) */
.admin-empty-state {
  background-color: var(--admin-empty-bg);
  border-color: var(--admin-empty-border);
}

/* Etiqueta / Label de detalle */
.admin-detail-label {
  color: var(--admin-label);
}

/* Contenedor de detalles */
.admin-detail-container {
  background-color: var(--admin-detail-bg);
  border-color: var(--admin-detail-border);
}


/* ==========================================================================
   10. AUTENTICACIÓN — users/ (login, registro, OTP)
   ========================================================================== */

/* Inputs de formulario */
.auth-input {
  border-color: var(--auth-input-border);
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

.auth-input:focus {
  border-color: var(--auth-input-focus);
  ring-color: var(--auth-input-focus);
}

/* Botón principal auth */
.auth-btn-primary {
  background-color: var(--auth-btn-bg);
  color: var(--auth-btn-text);
}

.auth-btn-primary:hover {
  background-color: var(--auth-btn-hover);  /* Naranja en hover */
}

/* Botón Google */
.auth-btn-google:hover {
  background-color: var(--auth-google-hover);
}

/* Link "Olvidé contraseña" */
.auth-link-forgot {
  color: var(--auth-forgot-color);
}

/* Texto de ayuda */
.auth-helper-text {
  color: var(--auth-helper);
}

/* ——— OTP / Contraseña ——— */

/* Franja superior de acento */
.otp-accent-bar {
  background-color: var(--otp-accent);
}

/* Borde de tarjeta OTP */
.otp-card {
  border-top-color: var(--otp-accent);
}

/* Ícono con fondo */
.otp-icon-wrapper {
  background-color: var(--otp-icon-bg);
  color: var(--otp-accent);
}

/* Input OTP */
.otp-input:focus {
  border-color: var(--otp-accent);
  outline-color: var(--otp-accent);
}

/* Botón OTP */
.otp-btn {
  background-color: var(--otp-accent);
  color: #ffffff;
}

.otp-btn:hover {
  background-color: var(--otp-accent-hover);
}

/* Link cancelar */
.otp-link-cancel {
  color: var(--text-muted);
}

.otp-link-cancel:hover {
  color: var(--otp-accent);
}


/* ==========================================================================
   11. NOTIFICACIONES Y BADGES
   ========================================================================== */

/* Badge de mensajes no leídos (lead/_lead_badge.html.erb) */
.badge-unread {
  background-color: var(--badge-unread-bg);
  color: var(--badge-unread-text);
}

/* Notificación success (dashmsj) */
.notification-success {
  background-color: var(--notif-success-bg);
}


/* ==========================================================================
   12. CORREOS TRANSACCIONALES — devise/mailer/
       (Inline styles en HTML — estos estilos son referencia documental;
        los emails usan style="" directo por compatibilidad con clientes de correo)
   ========================================================================== */

/*
   confirmation_instructions.html.erb:
   -- Botón confirmar: background-color: #3b82f6  (var --color-blue-500)

   unlock_instructions.html.erb:
   -- Botón desbloquear: background-color: #10b981  (var --color-green-500)

   NOTA: Los estilos inline en emails NO pueden usar variables CSS.
         Si cambias el color de marca, actualiza manualmente esos archivos también.
*/


/* ==========================================================================
   13. UTILIDADES GLOBALES COMPARTIDAS — shared/
   ========================================================================== */

/* Superficie genérica de card */
.surface {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Superficie secundaria */
.surface-alt {
  background-color: var(--bg-surface-alt);
}

/* Texto */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

/* Borde estándar */
.border-default { border-color: var(--border-default); }
.border-strong  { border-color: var(--border-strong); }

/* Focus ring de marca */
.focus-brand:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Overlay genérico */
.overlay {
  background-color: var(--bg-overlay);
}

/* ——— Scrollbar global ——— */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kanban-scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--kanban-scrollbar-hover);
}