/* ==========================================================================
   MARCA JULIÁN PELUSO — Negocios Inmobiliarios
   Paleta oficial (manual de identidad): pizarra #2F414A · verde #677C5D · gris claro #EDEDED
   Tipografías: Jost (títulos, equivalente libre de Sanseriffic) y Outfit (textos y negritas,
   equivalente libre de Product Sans). Se carga después de styles.css / portal.css / asesor.css.
   ========================================================================== */

:root {
  /* Web pública */
  --primary-navy: #2f414a; --navy-dark: #24333a; --navy-light: #3d525c;
  --accent-gold: #677c5d; --accent-gold-hover: #56694d; --accent-gold-light: #eef1ec;
  --border-gold: rgba(103, 124, 93, 0.3); --shadow-gold: 0 6px 20px rgba(103, 124, 93, 0.25);
  --accent-blue: #2f414a;
  --bg-page: #f4f4f4; --bg-card-subtle: #ededed;

  /* CRM, modo oscuro: verde oscuro de la marca con detalles en pizarra azulada */
  --bg-primary: #18221a; --bg-secondary: #1f2c21; --bg-tertiary: #283829; --card-bg: #1f2c21;
  --card-border: rgba(126, 160, 176, 0.3);
  --accent-primary: #a9c19e; --accent-success: #b9e3bf;
  --accent-secondary: #8fb0c0;
  --grad-primary: linear-gradient(135deg, #4a6573 0%, #2f414a 100%);
  --grad-premium: linear-gradient(135deg, #677c5d 0%, #2f414a 100%);
  --grad-dark: radial-gradient(circle at 20% 20%, rgba(126, 160, 176, 0.14) 0%, rgba(24, 34, 26, 0.97) 55%, #111912 100%);
  --text-secondary: #d6dfd3; --text-muted: #a5b3a3;
  --notif-bg: #1f2c21; --notif-accent: #a9c8d8;
  --font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Títulos con la tipografía primaria de la marca */
.hero-title, .section-title, .login-main-title, .hero-brand-name, .content-header h1, .header-title h1 {
  font-family: 'Jost', 'Outfit', system-ui, sans-serif !important;
}

/* Portada de la web: velo con la paleta de la marca */
.hero-video-overlay {
  background: linear-gradient(135deg, rgba(47, 65, 74, 0.82) 0%, rgba(103, 124, 93, 0.5) 55%, rgba(36, 51, 58, 0.74) 100%);
}

/* ─── CRM, modo oscuro ─────────────────────────────────────────────────────── */
/* el área de los módulos va en el verde de la marca; el menú lateral queda oscuro */
body:not(.light-theme) { background: #677c5d !important; }
body:not(.light-theme) .sidebar { background: rgba(17, 25, 18, 0.96) !important; border-right: 1px solid rgba(126, 160, 176, 0.32) !important; }
body:not(.light-theme) .content-header { background: rgba(47, 65, 74, 0.55) !important; border-bottom: 1px solid rgba(126, 160, 176, 0.28) !important; }
body:not(.light-theme) .metric-card { background: #1f2c21 !important; border: 1px solid rgba(126, 160, 176, 0.32) !important; }
body:not(.light-theme) .metric-icon { background: rgba(126, 160, 176, 0.18) !important; color: #a9c8d8 !important; }
body:not(.light-theme) .menu-item.active { background: linear-gradient(90deg, rgba(74, 101, 115, 0.55) 0%, rgba(74, 101, 115, 0.05) 100%) !important; border-left: 3px solid #7ea0b0 !important; }
body:not(.light-theme) .menu-item.active i, body:not(.light-theme) .menu-item.active svg { color: #a9c8d8 !important; }
body:not(.light-theme) ::-webkit-scrollbar-thumb { background: rgba(126, 160, 176, 0.5); }
body:not(.light-theme) ::placeholder { color: rgba(255, 255, 255, 0.6) !important; }
body:not(.light-theme) .glow-sphere { display: none !important; }

/* ─── CRM, modo claro: gris claro de la marca, menú en pizarra ─────────────── */
.light-theme {
  --bg-primary: #ededed; --bg-secondary: #ffffff; --bg-tertiary: #f6f6f6; --card-bg: #ffffff;
  --card-border: #d9dcdc; --card-border-hover: #c4c9ca;
  --accent-primary: #677c5d; --accent-primary-hover: #56694d;
  --accent-secondary: #2f414a; --accent-info: #2f414a; --accent-success: #4f7a45;
  --grad-primary: linear-gradient(135deg, #677c5d 0%, #2f414a 100%);
  --grad-premium: linear-gradient(135deg, #2f414a 0%, #3d525c 100%);
  --grad-dark: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  --text-primary: #22313a; --text-secondary: #3d4d55; --text-muted: #6b787e;
  --notif-bg: #ffffff; --notif-header-bg: #ededed; --notif-accent: #2f414a;
}
body.light-theme, .light-theme .app-container { background: #ededed !important; }
body.light-theme { color: #22313a !important; }
.light-theme .sidebar { background: #2f414a !important; }

/* ─── Login del CRM: izquierda gris claro con el isologotipo; derecha verde → pizarra ─── */
.welcome-panel-left.integrated-brand-panel { background: #ededed !important; }
.welcome-panel-left .bg-watermark-monogram, .welcome-panel-left .hero-brand-name,
.welcome-panel-left .hero-brand-tagline, .welcome-panel-left .hero-gold-line { display: none !important; }
.welcome-panel-left .hero-logo-frame { width: 360px; height: 300px; filter: none; }
.welcome-panel-left .hero-logo-frame img { border-radius: 0; }
.welcome-panel-left .panel-footer-note { color: #6b787e; }
.welcome-panel-left .panel-left-badge.luxury-badge { background: rgba(103, 124, 93, 0.14); color: #4f6347; border-color: rgba(103, 124, 93, 0.4); box-shadow: none; }
.welcome-panel-right { background: linear-gradient(150deg, #677c5d 0%, #56694d 38%, #3e5560 70%, #2f414a 100%) !important; }
.welcome-panel-right .login-brand-badge.logo-badge-black { background: #2f414a !important; }
.welcome-panel-right .login-main-title, .welcome-panel-right .field-label, .welcome-panel-right .link-forgot-pass,
.welcome-panel-right .link-back-portal { color: #ededed !important; }
.welcome-panel-right .login-sub-brand { color: #dfe5db !important; }
.welcome-panel-right .field-input-box { background: rgba(237, 237, 237, 0.14) !important; border-color: rgba(237, 237, 237, 0.4) !important; }
.welcome-panel-right .field-input-box input { color: #ffffff !important; }
.welcome-panel-right .field-input-box input::placeholder { color: rgba(237, 237, 237, 0.7) !important; }
.welcome-panel-right .field-icon, .welcome-panel-right .btn-toggle-eye { color: #ededed !important; }
.welcome-panel-right .btn-login-submit { background: #ededed !important; color: #2f414a !important; box-shadow: 0 8px 24px rgba(20, 30, 35, 0.3) !important; }
.welcome-panel-right .btn-login-submit:hover { background: #ffffff !important; }

/* Títulos finos, como el logotipo */
.hero-title, .section-title { font-weight: 500 !important; letter-spacing: 0.01em; }

/* Modo claro: ítem activo del menú legible sobre el pizarra */
.light-theme .menu-item.active { background: rgba(103, 124, 93, 0.45) !important; color: #ffffff !important; }
.light-theme .menu-item.active i, .light-theme .menu-item.active svg { color: #ffffff !important; }

/* Modo oscuro: botones de la barra de Propiedades legibles sobre el verde (tenían colores fijos en línea) */
body:not(.light-theme) #btn-toggle-bulk-select,
body:not(.light-theme) #btn-import-excel-properties,
body:not(.light-theme) #btn-property-drafts {
  background: #2f414a !important; border: 1px solid rgba(237, 237, 237, 0.35) !important; color: #ededed !important;
}
body:not(.light-theme) #btn-toggle-bulk-select:hover,
body:not(.light-theme) #btn-import-excel-properties:hover,
body:not(.light-theme) #btn-property-drafts:hover { background: #3d525c !important; }

/* Encabezado de la web: logo horizontal completo (casa + JP + nombre + "Negocios inmobiliarios") */
#main-header .brand-logo-img { height: 62px; max-width: none; border-radius: 0; }
#main-header .brand-text { display: none; }
@media (max-width: 768px) { #main-header .brand-logo-img { height: 40px; } }

/* Barra de módulos: el isologo de la marca como marca de agua abajo (reemplaza al monograma genérico) */
.sidebar-watermark-svg { display: none !important; }
.sidebar-watermark-monogram {
  width: 210px !important; height: 220px !important; left: 50% !important; right: auto !important;
  bottom: 70px !important; transform: translateX(-50%);
  background: url('marca/isologo-oscuro.png') center / contain no-repeat;
  opacity: 0.16 !important;
}
.light-theme .sidebar-watermark-monogram { opacity: 0.2 !important; }

/* Modo claro: arriba de la barra de módulos (pizarra), el isologotipo completo en su versión para fondo oscuro */
.light-theme .sidebar-brand .brand-icon, .light-theme .sidebar-brand .brand-text { display: none !important; }
.light-theme .sidebar-brand::before {
  content: ''; display: block; flex: 1; height: 150px;
  background: url('marca/logo-oscuro.png') center / contain no-repeat;
}

/* Modo oscuro: arriba de la barra, el isologotipo para fondo oscuro, sin recuadro: se funde con la barra (igual que en modo claro) */
body:not(.light-theme) .sidebar-brand .brand-icon, body:not(.light-theme) .sidebar-brand .brand-text { display: none !important; }
body:not(.light-theme) .sidebar-brand::before {
  content: ''; display: block; flex: 1; height: 150px;
  background: url('marca/logo-oscuro.png') center / contain no-repeat;
}

/* Login (CRM y copiloto): campos de usuario y contraseña con un color sólido de la marca. El
   autocompletado del navegador pinta el fondo del campo (blanco o celeste); se tapa con el mismo color. */
.welcome-panel-right .field-input-box { background: #5d7058 !important; }
.welcome-panel-right .field-input-box:focus-within { background: #64785e !important; border-color: #ededed !important; box-shadow: 0 0 0 3px rgba(237, 237, 237, 0.18) !important; }
.welcome-panel-right .field-input-box input,
.welcome-panel-right .field-input-box input:focus { background: transparent !important; color-scheme: dark; }
.welcome-panel-right .field-input-box input:-webkit-autofill,
.welcome-panel-right .field-input-box input:-webkit-autofill:hover,
.welcome-panel-right .field-input-box input:-webkit-autofill:focus,
.welcome-panel-right .field-input-box input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #5d7058 inset !important; box-shadow: 0 0 0 1000px #5d7058 inset !important;
  -webkit-text-fill-color: #ffffff !important; caret-color: #ededed !important;
}
.welcome-panel-right .field-input-box:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #64785e inset !important; box-shadow: 0 0 0 1000px #64785e inset !important;
}
/* Chrome pinta un recuadro blanco con los datos guardados antes de tocar el campo (vista previa del
   autocompletado): se frena el cambio de fondo del navegador y se cubre también el estado :autofill estándar. */
.welcome-panel-right .field-input-box input {
  transition: background-color 600000s 0s, color 600000s 0s !important;
  -webkit-transition: background-color 600000s 0s, color 600000s 0s !important;
}
.welcome-panel-right .field-input-box input:autofill {
  box-shadow: 0 0 0 1000px #5d7058 inset !important; -webkit-text-fill-color: #ffffff !important;
}
.welcome-panel-right .field-input-box:focus-within input:autofill { box-shadow: 0 0 0 1000px #64785e inset !important; }
.welcome-panel-right .field-icon { color: #ededed !important; }

/* Celular: los avisos aparecen arriba de la barra de navegación de abajo, no encima */
@media (max-width: 768px) {
  #toast-notification { bottom: calc(132px + env(safe-area-inset-bottom)) !important; right: 12px !important; left: 12px !important; }
}