/* =========================
   Base y contenedor
   ========================= */
:root{ --page-width: 980px; }

html, body{
  background: #0b1220;   /* oscuro global */
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{ max-width:var(--page-width); margin:0 auto; padding:0 16px 16px; }
.card{ max-width:var(--page-width); margin:12px auto; padding:14px; border-radius:12px; }

/* === Tipografía global === */
:root{
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html, body, button, input, select, textarea{
  font-family: var(--font-sans);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "kern" 1, "tnum" 0;
}

/* Números tabulares en tablas/badges (opcional) */
.table, .badge, .count, .k-num { font-variant-numeric: tabular-nums; }

/* =========================
   Topbar
   ========================= */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:8px 14px;
  background:#0f1a2b; color:#e5e7eb;
  border-bottom:1px solid #1f2937;
}
.topbar .brand{ font-weight:700; color:#fff; text-decoration:none; }
.topbar .search{ flex:1; display:flex; align-items:center; gap:8px; justify-content:center; }
.topbar .search .input{
  min-width:420px; max-width:680px; width:100%;
  background:#111827; color:#e5e7eb; border:1px solid #374151;
}
.topbar .button{ background:#111; color:#fff; border:1px solid #111; }
.topbar .button.secondary{ background:transparent; color:#e5e7eb; border:1px solid #374151; }
.topbar .top-actions{ display:flex; align-items:center; gap:8px; white-space:nowrap; }


/* =========================
   Botones
   ========================= */
.button{
  padding:4px 8px;
  font-size:13px; line-height:1.1;
  border-radius:8px;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #334155;
  background:#374151; color:#e5e7eb;
  text-decoration:none;
}
.button:hover{ filter:brightness(1.06); }
.button.secondary{ background:transparent; }
.button .count{
  margin-left:6px; padding:1px 6px; border-radius:9999px;
  font-size:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
}

/* WhatsApp icon button (sin fondo blanco) */
.button.whatsapp-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:9999px;
  background:#22c55e; border:1px solid #16a34a; color:#fff;
}
.button.whatsapp-icon:hover{ filter:brightness(1.05); }
.button.whatsapp-icon svg{ width:18px; height:18px; fill:#fff; display:block; }

/* =========================
   Inputs
   ========================= */
.input{
  padding:6px 10px; border-radius:8px;
  background:#0d1524; color:#e5e7eb; border:1px solid #334155;
  min-width:240px;
}
.input::placeholder{ color:#93a4b8; }

/* =========================
   Tabla
   ========================= */
.table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.table thead th{
  background:#0d1524; color:#e5e7eb; font-weight:600; font-size:13px;
  padding:12px 14px; border-bottom:1px solid #334155;
}
.table tbody tr{
  background:#0f1a2b; border:1px solid #334155; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.table tbody tr:hover{ transform:translateY(-1px); transition:.15s ease; }
.table tbody td{
  padding:12px 14px; background:inherit; color:inherit; border-top:1px solid #334155;
  vertical-align: middle; /* centra verticalmente todo el contenido */
}
.table tbody tr td:first-child{ border-radius:10px 0 0 10px; }
.table tbody tr td:last-child { border-radius:0 10px 10px 0; }

/* Ancho/centrado de la columna Etapa (7ma) */
.table thead th:nth-child(7),
.table tbody td:nth-child(7){
  width: 150px;          /* ajusta 130–160 a gusto */
  text-align: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Celda de acciones sin “caja blanca” */
.actions-cell{ background:inherit !important; white-space:nowrap; text-align:right; }

/* Evitar recortes de contenido flotante (select) */
.table-card .table td,
.table-card .table th{
  position: relative;
  overflow: visible;
}

/* Checkbox oscuros */
.table th:first-child input[type="checkbox"],
.table td:first-child input[type="checkbox"],
#checkAll{
  appearance:none; width:18px; height:18px; border:2px solid #3a4a62;
  background:#0f172a; border-radius:5px; display:inline-grid; place-content:center;
  cursor:pointer; transition:all .12s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#checkAll:hover,
.table th:first-child input[type="checkbox"]:hover,
.table td:first-child input[type="checkbox"]:hover{ border-color:#5a6b86; }
#checkAll:checked,
.table th:first-child input[type="checkbox"]:checked,
.table td:first-child input[type="checkbox"]:checked{
  background:#7c3aed; border-color:#7c3aed;
}
#checkAll:checked::after,
.table th:first-child input[type="checkbox"]:checked::after{
  content:""; width:10px; height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg);
}

/* =========================
   Chips y badges (etapas)
   ========================= */
.badge{
  padding:3px 10px; font-size:12px; border-radius:9999px;
  border:1px solid #334155; color:#cbd5e1; background:#1f2937;
}

/* Colores de etapa en tabla */
.badge.stage-Nuevo{      background:rgba(29,78,216,.18); border-color:#1d4ed8; color:#cfe0ff; }
.badge.stage-Contactado{ background:rgba(79,70,229,.18); border-color:#4f46e5; color:#e0dfff; }
.badge.stage-Perdido{    background:rgba(225,29,72,.18); border-color:#e11d48; color:#ffd5dd; }
.badge.stage-Ganado{     background:rgba(22,163,74,.18); border-color:#16a34a; color:#d9ffe7; }

/* Chips de etapas arriba */
.chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chips a.button{
  border-radius:9999px; background:#0f1623; border:1px solid #2b3340; color:#e5e7eb;
}
.chips a.button.active{ background:#1e293b; border-color:#476082; }
.stage-chip.stage-chip-all{        background:#334155; border-color:#475569; }
.stage-chip.stage-chip-nuevo{      background:#1d4ed8; border-color:#1e40af; }
.stage-chip.stage-chip-contactado{ background:#4f46e5; border-color:#4338ca; }
.stage-chip.stage-chip-perdido{    background:#e11d48; border-color:#be123c; }
.stage-chip.stage-chip-ganado{     background:#16a34a; border-color:#15803d; }

/* =========================
   Panel colapsable
   ========================= */
.collapsible summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-weight:600; user-select:none;
}
.collapsible summary::-webkit-details-marker{ display:none; }
.collapsible .chev{ display:inline-block; transform:rotate(0deg); transition:transform .2s ease; opacity:.7; }
.collapsible[open] .chev{ transform:rotate(90deg); }
.collapsible .collapse-body{
  margin-top:10px; display:grid; gap:8px;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;
  align-items:center;
}
@media (max-width:860px){ .collapsible .collapse-body{ grid-template-columns:1fr; } }

/* =========================
   UX de edición de etapa
   ========================= */
.js-stage{ cursor:pointer; }
.js-stage:hover{ filter:brightness(1.05); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }

/* Wrapper para posicionar el select exactamente sobre el badge sin ensanchar la columna */
.stage-editor{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

:root{--bg:#0a0f1a;--card:#121a2a;--muted:#aab6d3;--text:#e7ecf8;--accent:#56c2ff;--chip:#1b263b}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:20px}
.header{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}
.brand img{width:34px;height:34px;border-radius:999px;background:#0d1730;border:1px solid #24355e;padding:5px}

.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.input,.select{background:var(--card);border:1px solid #21304d;color:var(--text);border-radius:12px;padding:10px 12px;outline:none;min-width:160px}

.btn{padding:10px 14px;border-radius:12px;border:1px solid #234065;background:#0f1d33;color:var(--text);font-weight:600}
.btn.outline{background:#0f1d33;border:1px solid #2d4d7d}
.btn.whatsapp{background:#25D366;border-color:#1EA952;color:#06230f;font-weight:800}
.btn.market{background:#1a2236;border:1px solid #2a4f8a}

.view-toggle{display:flex;border:1px solid #21304d;border-radius:12px;overflow:hidden}
.view-toggle a{padding:8px 10px;color:var(--muted);background:var(--card)}
.view-toggle a.active{color:var(--text);background:#0f1d33}

.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid #1e2a45;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;position:relative}
@media(min-width:680px){ .card{grid-column:span 6} } 
@media(min-width:980px){ .card{grid-column:span 4} }

.thumb{position:relative;width:100%;aspect-ratio:16/10;background:#0c1424;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.badge-spec{position:absolute;top:10px;right:10px;background:#0f1d33;border:1px solid #274066;border-radius:999px;padding:6px 10px;font-size:12px}

/* --- NUEVO: sticker HOT --- */
.badge-hot{
  position:absolute;top:10px;left:10px;
  background:#2a0f10;border:1px solid #612a2a;border-radius:999px;
  padding:6px 10px;font-size:12px;color:#ffd7d7;display:flex;align-items:center;gap:6px
}
.badge-hot .ico{font-size:14px;line-height:1}

.wa-fab{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:999px;background:#1FAF38;display:flex;align-items:center;justify-content:center;border:2px solid rgba(0,0,0,.25);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.wa-fab svg{width:22px;height:22px;fill:#fff}

.body{padding:12px 12px 0}
.model{font-weight:700;margin:0 0 6px;font-size:15px}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{font-size:12px;background:var(--chip);border:1px solid #263552;padding:6px 10px;border-radius:999px;color:#aab6d3}

/* --- NUEVO: chip bono --- */
.chip.chip-bono{background:#2a2815;border-color:#5d531e;color:#fceaa6}

.priceWrap{display:flex;align-items:baseline;gap:8px;margin:6px 0 10px}
.priceLabel{font-size:13px;color:#aab6d3;background:transparent;border:none;padding:0;margin-right:2px}
.priceVal{font-size:20px;font-weight:800}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:12px;border-radius:8px;padding:6px 8px;border:1px solid #274066;background:#102039}
.tag.tag-green{background:#0a2f1c;border-color:#0f6133;color:#bff7d6}
/* --- NUEVO: tag azul para margen tienda --- */
.tag.tag-blue{background:#0b1f3a;border-color:#144a8a;color:#cfe6ff}

.actions{display:flex;gap:10px;padding:12px}
.actions .btn{flex:1;text-align:center}

/* ---------- Vista LISTA ---------- */
body.view-list .grid{display:flex;flex-direction:column;gap:14px}
body.view-list .card{grid-column:span 12;flex-direction:row}
body.view-list .thumb{width:320px;min-height:220px;aspect-ratio:auto;flex:0 0 320px}
body.view-list .body{padding:16px;flex:1;}
body.view-list .priceWrap{flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
body.view-list .priceVal{font-size:26px}
body.view-list .tags{flex-direction:column;align-items:flex-start;gap:8px;max-width:560px}
body.view-list .actions{width:260px;flex-direction:column;align-items:stretch;padding:16px}
body.view-list .actions .btn{flex:0 0 auto}

@media(max-width:800px){
  body.view-list .card{flex-direction:column}
  body.view-list .thumb{width:100%;min-height:180px}
  body.view-list .actions{width:100%}
}

/* El select queda centrado verticalmente sobre el badge y no empuja layout */
.stage-editor .js-stage-select{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1000;
  min-width: 120px;
  display: none;        /* visible cuando se edita */
}

/* =========================
   Tarjetas elevadas
   ========================= */
.card.elevated{
  background:#0f1a2b; border:1px solid #334155;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
}

/* Lectura sólo (detalle) */
.readonly input,
.readonly select,
.readonly textarea{
  pointer-events: none;
  opacity: .9;
}
body.dark .readonly input,
body.dark .readonly select,
body.dark .readonly textarea{
  background:#0d1524;
  color:#e5e7eb;
  border:1px solid #374151;
  filter: saturate(.95) brightness(.98);
}

/* ====== Brand / Logo redondo (index + login) ====== */
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none;
}
.brand .brand-name{ font-weight:700; }

.logo-badge{
  width:36px; height:36px; border-radius:9999px;
  background:#ffffff;              /* disco blanco */
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo-badge img{
  width:74%; height:74%; object-fit:contain; display:block;
}
.logo-badge .monogram{
  font-weight:800; font-size:14px; line-height:1;
  color:#0f172a; letter-spacing:.5px;
}

/* Variante login (un poco más grande) */
.login-header .logo-badge{ width:44px; height:44px; }
.login-header .brand .brand-name{ font-size:18px; }

/* =========================
   THEME OVERRIDES (dark/light)
   ========================= */

/* Paleta por variables */
:root,
:root[data-theme="dark"]{
  --bg:            #0b1220;
  --text:          #e5e7eb;
  --muted:         #93a4b8;

  --card:          #0f1a2b;
  --card-border:   #334155;
  --separator:     #1f2937;
  --thead:         #0d1524;

  --input-bg:      #0d1524;
  --input-border:  #334155;

  --btn-bg:        #374151;
  --btn-border:    #334155;
  --btn-color:     #e5e7eb;

  --btn-sec-bg:    transparent;
  --btn-sec-border:#374151;
  --btn-sec-color: #e5e7eb;

  --chip-bg:       #0f1623;
  --chip-border:   #2b3340;
  --badge-bg:      #1f2937;
  --badge-border:  #334155;

  --link:          #93c5fd;
}

/* Light */
:root[data-theme="light"]{
  --bg:            #f6f7fb;
  --text:          #0b1220;
  --muted:         #5b667a;

  --card:          #ffffff;
  --card-border:   #d6d9e0;
  --separator:     #e5e7eb;
  --thead:         #f1f2f7;

  --input-bg:      #ffffff;
  --input-border:  #cbd5e1;

  --btn-bg:        #1f2937;
  --btn-border:    #1f2937;
  --btn-color:     #ffffff;

  --btn-sec-bg:    transparent;
  --btn-sec-border:#94a3b8;
  --btn-sec-color: #1f2937;

  --chip-bg:       #eef2f7;
  --chip-border:   #cbd5e1;
  --badge-bg:      #eef2f7;
  --badge-border:  #cbd5e1;

  --link:          #2563eb;
}

/* Aplicación de variables sobre tus componentes (override) */
html, body{ background: var(--bg); color: var(--text); }

/* Topbar */
.topbar{
  background: var(--card);
  color: var(--text);
  border-bottom: 1px solid var(--separator);
}
.topbar .search .input{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}
.topbar .button{ background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-color); }
.topbar .button.secondary{ background: var(--btn-sec-bg); border: 1px solid var(--btn-sec-border); color: var(--btn-sec-color); }

/* Cards */
.card.elevated{
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
}

/* Inputs */
.input{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
}
.input::placeholder{ color: var(--muted); }

/* Botones genéricos */
.button{ background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-color); }
.button.secondary{ background: var(--btn-sec-bg); border: 1px solid var(--btn-sec-border); color: var(--btn-sec-color); }

/* Tabla */
.table thead th{
  background: var(--thead);
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}
.table tbody tr{
  background: var(--card);
  border: 1px solid var(--card-border);
}
.table tbody td{ color: var(--text); }

/* Chips + badges */
.chips a.button{
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--text);
}
.badge{
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text);
}

/* Links sueltos */
a{ color: var(--link); }

/* Botón del toggle visual */
.theme-toggle{
  width: 34px; height: 34px; display:inline-grid; place-items:center;
  border-radius: 8px; font-size: 15px; line-height: 1;
}

.disclaimer{ max-width:1200px; margin:14px auto 6px; }

/* === Fix logo CRM: menos borde blanco, mejor centrado === */
body.crm .logo-badge{
  width:65px; height:65px;
  border-radius:9999px;
  background:#fff;
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.crm .logo-badge img{
  width:100%;   /* antes ~74% → reduce el aro blanco */
  height:100%;
  object-fit:contain;
  display:block;
}

/* === Logo CRM responsive y centrado === */
:root{
  /* tamaño base del logo (se adaptará con media queries) */
  --crm-logo: 48px;
}

@media (min-width: 1200px){
  :root{ --crm-logo: 64px; }
}

@media (min-width: 1600px){
  :root{ --crm-logo: 72px; }
}

body.crm .logo-badge{
  width: var(--crm-logo);
  height: var(--crm-logo);
  border-radius: 9999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.crm .logo-badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;    /* mantiene márgenes internos del SVG si existieran */
  display: block;
}

/* Alineación del texto de marca con el logo grande */
body.crm .topbar .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.crm .topbar .brand .brand-name{
  line-height: 1;
}

/* ===== CRM: chips con controles a la derecha en la MISMA fila ===== */
body.crm .chips{
  display:grid !important;
  grid-template-columns: 1fr auto;   /* izquierda: chips | derecha: controles */
  align-items:center;
  gap:8px 10px;
  padding-top:4px;
  padding-bottom:6px;
}

/* Todos los botones de etapa van en la columna izquierda */
body.crm .chips > a.button{
  grid-column: 1;
  padding:6px 10px;
  border-radius:9999px;
  flex:0 0 auto;
}

/* El bloque con el selector de usuario y “+ Nueva solicitud” va a la derecha */
body.crm .chips > .user-filter-wrap{
  grid-column: 2;
  margin-left:0;
  display:flex;
  align-items:center;
  gap:8px;
  justify-self:end;           /* pegado a la derecha */
  white-space:nowrap;
}

body.crm .chips .user-filter{  /* “Todos los usuarios” */
  min-width:220px;
  height:34px;
  padding:6px 10px;
}
body.crm .chips .user-filter-wrap .button{  /* “+ Nueva solicitud” */
  height:34px;
  padding:6px 12px;
}

/* En pantallas estrechas: que salte a dos filas, pero manteniendo columnas */
@media (max-width: 860px){
  body.crm .chips{
    grid-template-columns: 1fr;     /* apila: chips arriba, controles abajo */
  }
  body.crm .chips > .user-filter-wrap{
    grid-column: 1;
    justify-self: end;
    flex-wrap:wrap;
    row-gap:6px;
  }
}