/* Prospeto — interfaz interna (mobile-first). Tokens de la marca. */
:root {
  --navy: #0B1324; --panel: #121C33; --mint: #2DD4BF; --mint-light: #5EEAD4;
  --teal: #0F766E; --teal-dark: #0b5953; --cream: #F7F6F2; --ink: #0B1324; --muted: #4B5565; --line: #E3E1D9;
  --brand: var(--teal); --brand-dark: var(--teal-dark); --slate: var(--ink);
  --tab-h: 64px; --top-h: 56px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-bg: var(--cream); --bs-body-color: var(--ink);
  --bs-primary: var(--teal); --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--teal); --bs-link-hover-color: var(--teal-dark);
  --bs-border-color: var(--line); --bs-border-radius: .75rem; --bs-border-radius-lg: 1rem;
}
body { background: var(--cream); color: var(--ink); -webkit-tap-highlight-color: transparent; }
h1, .h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
h3, .h3, h4, .h4, h5, .h5 { font-weight: 600; }
.text-brand, .text-primary-brand { color: var(--teal) !important; }
.text-secondary, .text-muted { color: var(--muted) !important; }

/* Botones y campos: objetivos táctiles >= 48px, 16px para evitar el zoom de iOS */
.btn { min-height: 48px; padding: .6rem 1.1rem; border-radius: .75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 40px; padding: .4rem .8rem; font-size: .9rem; }
.btn-brand { --bs-btn-color: var(--navy); --bs-btn-bg: var(--mint); --bs-btn-border-color: var(--mint);
  --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--mint-light); --bs-btn-hover-border-color: var(--mint-light);
  --bs-btn-active-color: var(--navy); --bs-btn-active-bg: var(--mint-light); --bs-btn-active-border-color: var(--mint-light); }
.btn-outline-brand { --bs-btn-color: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--teal-dark); --bs-btn-active-color: #fff; }
.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal-dark); --bs-btn-hover-border-color: var(--teal-dark); --bs-btn-active-bg: var(--teal-dark); }
.form-control, .form-select { min-height: 48px; font-size: 16px; border-radius: .75rem; border-color: #D4D1C6; background-color: #fff; }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(45, 212, 191, .3); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
.form-check-input { width: 1.3em; height: 1.3em; }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.input-group > .form-control, .input-group > .btn { min-height: 48px; }

/* Tarjetas, alertas, tablas */
.card { background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(11, 19, 36, .04); }
.card-header { background: transparent; border-bottom-color: var(--line); font-weight: 600; }
.alert { border-radius: .75rem; border: 0; }
.badge { font-weight: 600; border-radius: .5rem; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .75rem .75rem; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; border-bottom-color: var(--line); }
.table-responsive { border-radius: 1rem; }
.list-group-item { border-color: var(--line); }
.nav-pills .nav-link { color: var(--ink); border-radius: 999px; min-height: 40px; }
.nav-pills .nav-link.active { background: var(--navy); color: #fff; }
.pills { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pills::-webkit-scrollbar { display: none; }
.pills .pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.pills .pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pills .pill small { opacity: .7; }

/* Tarjeta de lista (reemplaza filas de tabla en móvil) */
.item-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 1rem; margin-bottom: .6rem; color: inherit; text-decoration: none; }
a.item-card:hover { border-color: var(--mint); color: inherit; }
.item-card .title { font-weight: 600; }
.item-card .meta { font-size: .85rem; color: var(--muted); }
.item-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.item-actions .btn { flex: 1; min-height: 44px; }
.btn-wa { background: #E7F8EF; color: #0b6b3a; border: 0; }
.btn-wa:hover { background: #d3f1e1; color: #0b6b3a; }
.btn-call { background: #EAF0FB; color: #1d3f8a; border: 0; }
.btn-call:hover { background: #dae5f8; color: #1d3f8a; }

/* Estructura */
.app-shell { display: block; min-height: 100vh; }
.app-top { position: sticky; top: 0; z-index: 1030; background: var(--navy); color: #fff; height: calc(var(--top-h) + var(--sat)); padding: var(--sat) 1rem 0; display: flex; align-items: center; justify-content: space-between; }
.app-top .brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; letter-spacing: -.01em; }
.app-top .bell { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.app-top .bell:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-top .bell .dot { position: absolute; top: 9px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid var(--navy); }
.app-sidebar { display: none; }
.app-main { padding: 1rem 1rem calc(var(--tab-h) + var(--sab) + 5.5rem); min-width: 0; max-width: 1100px; margin: 0 auto; }

/* Barra inferior */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--line); height: calc(var(--tab-h) + var(--sab)); padding-bottom: var(--sab); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; font-weight: 600; color: #6b7280; text-decoration: none; background: none; border: 0; padding: 0; }
.tabbar .tab svg { width: 24px; height: 24px; }
.tabbar .tab.active { color: var(--teal); }
.tabbar .tab.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--mint); }
.tabbar .badge-count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: .68rem; line-height: 18px; text-align: center; }

/* Botón flotante + */
.fab { position: fixed; right: 1rem; bottom: calc(var(--tab-h) + var(--sab) + 1rem); z-index: 1031; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--mint); color: var(--navy); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(11, 19, 36, .25); }
.fab svg { width: 26px; height: 26px; }
.fab:active { transform: scale(.96); }

/* Hojas inferiores (Más / Crear) */
.sheet.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 1.25rem 1.25rem 0 0; padding-bottom: var(--sab); }
.sheet .offcanvas-header { padding-bottom: 0; }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: #d6d3c8; margin: 0 auto .25rem; }
.sheet-list { list-style: none; margin: 0; padding: .5rem 1rem 1rem; }
.sheet-list a, .sheet-list button { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 52px; padding: 0 .5rem; color: var(--ink); text-decoration: none; font-weight: 600; background: none; border: 0; border-radius: .75rem; text-align: left; }
.sheet-list a:hover, .sheet-list button:hover { background: var(--cream); }
.sheet-list svg { width: 22px; height: 22px; color: var(--teal); flex-shrink: 0; }
.sheet-list .danger, .sheet-list .danger svg { color: #b42318; }
.sheet-ws { padding: 0 1.5rem; font-size: .85rem; color: var(--muted); }

/* Escritorio */
@media (min-width: 992px) {
  .app-shell { display: flex; }
  .app-top, .tabbar, .fab { display: none; }
  .app-sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 248px; flex-shrink: 0; background: var(--navy); padding: 1.25rem .75rem; overflow-y: auto; }
  .app-sidebar .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; padding: 0 .5rem 1.25rem; }
  .app-sidebar .nav-link { display: flex; align-items: center; gap: .75rem; color: #B4C0D6; border-radius: .75rem; padding: .65rem .85rem; font-weight: 500; position: relative; }
  .app-sidebar .nav-link svg { width: 20px; height: 20px; }
  .app-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
  .app-sidebar .nav-link.active { background: var(--panel); color: var(--mint-light); font-weight: 600; box-shadow: inset 3px 0 0 var(--mint); }
  .app-sidebar .badge-count { margin-left: auto; min-width: 20px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: 10px; background: #E5484D; color: #fff; font-size: .72rem; text-align: center; }
  .app-sidebar .foot { margin-top: auto; padding: 1rem .5rem 0; font-size: .85rem; color: #B4C0D6; }
  .app-main { padding: 2rem 2.5rem 3rem; flex: 1; margin: 0; max-width: none; }
  .app-main > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
  .desktop-bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
}
@media (max-width: 991.98px) { .desktop-bar { display: none; } }

/* Tablero de leads (escritorio) */
.kb { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kb-col { flex: 0 0 270px; background: #EFEDE6; border-radius: 1rem; padding: .5rem; transition: background .15s; }
.kb-col.kb-over { background: #cdf3ec; }
.kb-card { background: #fff; border: 1px solid var(--line); border-radius: .75rem; padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-head { display: flex; justify-content: space-between; align-items: center; padding: .25rem .4rem .5rem; font-weight: 600; font-size: .9rem; }

/* Pantallas de acceso: pantalla dividida */
.auth-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.auth-side { display: none; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(1.5rem + var(--sat)) 1.5rem calc(1.5rem + var(--sab)); background: var(--cream); position: relative; }
.auth-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.35rem; text-decoration: none; letter-spacing: -.01em; }
.auth-logo-m { color: var(--navy); align-self: flex-start; margin-bottom: 2rem; }
.auth-box { width: 100%; max-width: 400px; }
.auth-form > div { max-width: none !important; }
.auth-form h1 { font-size: 1.75rem; }
.auth-form .card { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
.auth-form .card-body { padding: 0; }
.auth-form .btn-brand { width: 100%; min-height: 52px; background: var(--navy); border-color: var(--navy); color: #fff; }
.auth-form .btn-brand:hover { background: var(--panel); border-color: var(--panel); color: var(--mint-light); }
.auth-form .form-control { background: #fff; }
.auth-alt { text-align: center; margin: 1.5rem 0 0; color: var(--muted); font-size: .95rem; }
.auth-alt a { font-weight: 600; }
.auth-legal { margin-top: 2rem; font-size: .8rem; color: var(--muted); }
.auth-legal a { color: var(--muted); }
@media (min-width: 992px) {
  .auth-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth-logo-m { display: none; }
  .auth-main { padding: 2rem; }
  .auth-side { display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3.5rem; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(900px 500px at 85% 0%, rgba(45, 212, 191, .22), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(15, 118, 110, .45), transparent 60%), var(--navy); }
  .auth-pitch h2 { color: #fff; font-size: 2.6rem; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; margin-bottom: 1rem; }
  .auth-pitch h2 span { color: var(--mint-light); }
  .auth-pitch p { color: #B4C0D6; font-size: 1.1rem; max-width: 30rem; }
  .auth-pitch ul { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .75rem; }
  .auth-pitch li { color: #fff; display: flex; align-items: center; gap: .7rem; font-weight: 500; }
  .auth-pitch li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(45, 212, 191, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235EEAD4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
  .auth-foot { color: #B4C0D6; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Cabeceras de página: título a ancho completo y acciones debajo en móvil */
@media (max-width: 575.98px) {
  .app-main > .d-flex.flex-wrap:first-child > h1, .app-main > .d-flex.flex-wrap:first-child > .h3 { flex: 1 1 100%; }
  .app-main > .d-flex.flex-wrap:first-child > .d-flex .btn { flex: 1; }
}
.lead-actions > a.btn-wa, .lead-actions > a.btn-call { flex: 1 1 calc(50% - .25rem); }
.lead-actions > form { flex: 1 1 auto; }
.lead-actions > form .btn { width: 100%; }

/* Mensajes: estilo chat */
.chat #msgs { overflow-y: auto; min-height: 260px; max-height: calc(100dvh - 400px); }
.chat .bubble-out { background: #CFF7EF; border-radius: 1rem 1rem .25rem 1rem !important; }
.chat #msgs .bg-white { border-radius: 1rem 1rem 1rem .25rem !important; }
.chat .card-footer { background: #fff; }
@media (min-width: 992px) { .chat #msgs { max-height: 55vh; } }

/* Super admin dentro de la cuenta de un asesor */
.imp-bar { position: sticky; top: 0; z-index: 1040; background: #F59E0B; color: #1b1300; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: calc(.5rem + var(--sat)) 1rem .5rem; font-size: .85rem; }
.imp-bar .btn { min-height: 36px; background: #1b1300; color: #fff; border: 0; white-space: nowrap; }
.imp-bar + .app-top { top: 0; }