/* ════════════════════════════════════════════════════════════════════════
   MOD-284 · SUCURSALES DE EMPRESA — 4.3.240
   ------------------------------------------------------------------------
   Dos paletas a propósito, y no es un descuido:

   · Lo que se pinta DENTRO de la ficha (`#mo-emp-det` / `#mo-con-det`) usa la
     paleta `--crm-*` que MOD-260 declara sobre esos dos modales. Es la que
     tienen al lado los contactos, los deals y los productos; si aquí usara
     otra, la pestaña Sucursales sería la única que desentona, y el remapeo de
     NOCHE de 260 no la tocaría.
   · La ventana de alta/edición (`#mo-suc284`) cuelga de <body>, es HERMANA de
     esos modales y no hereda ninguna `--crm-*`. Usa las variables GLOBALES del
     tema (`--bg2`, `--border`, `--text`, `--dim`, `--accent`), que sí viven en
     el <html> y ya vienen remapeadas para día y noche. Cero hex cableados: un
     `var()` sin definir invalida la declaración entera y deja bordes y fondos
     en nada (el incidente de r4.3.185 en este mismo CRM).

   Desktop-first: el grueso va dentro del @media de escritorio, igual que 260.
   ════════════════════════════════════════════════════════════════════════ */

/* Mostrar/ocultar el panel NO se redefine aquí a propósito. El panel de
   sucursales sale con `class="crm260-pane"` y MOD-260 ya decide cuándo se ve
   (`display:none` global + `.active` sólo en escritorio). Una regla propia,
   por ser más específica, ganaría y se saltaría ese criterio en anchos
   estrechos: la pestaña nueva sería la única visible en un móvil. */

@media (min-width:1024px){

  /* ── Cabecera de la sección ────────────────────────────────────────── */
  #mo-emp-det .suc284-head-acts{display:flex;gap:8px;flex:none}
  /* La tarjeta vacía va PEGADA al encabezado: son una sola pieza, como la
     lista de contactos de MOD-260. */
  #mo-emp-det .crm260-empty.suc284-pegada{border-radius:0 0 10px 10px;border-top:0;min-height:150px}

  /* ── Lista de sucursales ───────────────────────────────────────────── */
  #mo-emp-det .suc284-list{
    background:var(--crm-surface);
    border:1px solid var(--crm-line);
    border-radius:0 0 10px 10px;
    border-top:0;
    overflow:hidden;
  }
  #mo-emp-det .suc284-row{
    align-items:center;
    border-bottom:1px solid var(--crm-line);
    color:var(--crm-text);
    display:flex;
    gap:11px;
    min-height:62px;
    padding:10px 14px;
  }
  #mo-emp-det .suc284-row:last-child{border-bottom:0}
  #mo-emp-det .suc284-row:hover{background:var(--crm-hover)}
  /* Inactiva: se atenúa, no se esconde. Sigue siendo un dato de la empresa. */
  #mo-emp-det .suc284-row.off{opacity:.62}
  #mo-emp-det .suc284-ic{
    align-items:center;
    background:var(--crm-blue-soft);
    border:1px solid var(--crm-blue-line);
    border-radius:9px;
    color:var(--crm-blue);
    display:inline-flex;
    flex:none;
    font-size:11px;
    height:34px;
    justify-content:center;
    width:34px;
  }
  #mo-emp-det .suc284-tx{flex:1;min-width:0}
  #mo-emp-det .suc284-tx b,
  #mo-emp-det .suc284-tx small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mo-emp-det .suc284-tx b{font-size:12px}
  #mo-emp-det .suc284-tx small{color:var(--crm-muted);font-size:10px;margin-top:3px}
  #mo-emp-det .suc284-act{
    align-items:center;
    background:var(--crm-surface);
    border:1px solid var(--crm-line-strong);
    border-radius:8px;
    color:var(--crm-text-2);
    cursor:pointer;
    display:inline-flex;
    flex:none;
    font-size:11px;
    height:32px;
    justify-content:center;
    width:32px;
  }
  #mo-emp-det .suc284-act:hover{background:var(--crm-bg);color:var(--crm-text)}
  #mo-emp-det .suc284-act.del{color:var(--crm-red)}
  #mo-emp-det .suc284-act.del:hover{background:var(--crm-red-soft);border-color:var(--crm-red-line)}

  /* ── Fila del selector en la ficha del contacto ────────────────────── */
  #mo-con-det .suc284-nota{color:var(--crm-muted);font-size:12.5px;line-height:1.45;padding:6px 0}
}

/* ════════════════════════════════════════════════════════════════════════
   VENTANA DE ALTA / EDICIÓN — variables globales del tema
   ════════════════════════════════════════════════════════════════════════ */
/* Centrada como las demás ventanas del CRM (240 y 241 hacen lo mismo). */
#mo-suc284.mo,#mo-suc284-con.mo{align-items:center}
:is(#mo-suc284,#mo-suc284-con) .suc284-box{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 60px var(--dash-shadow, rgba(15,23,42,.32));
  color:var(--text);
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  max-height:92vh;
  overflow:hidden;
  text-transform:none;
  width:min(560px,94vw);
}
:is(#mo-suc284,#mo-suc284-con) .suc284-box *{box-sizing:border-box;text-transform:none}
:is(#mo-suc284,#mo-suc284-con) .suc284-head{
  align-items:center;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:10px;
  padding:17px 20px;
}
:is(#mo-suc284,#mo-suc284-con) .suc284-head i{color:var(--accent)}
:is(#mo-suc284,#mo-suc284-con) .suc284-head b{font-size:15px;font-weight:800}
:is(#mo-suc284,#mo-suc284-con) .suc284-x{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:16px;line-height:1;margin-left:auto;padding:4px;
}
:is(#mo-suc284,#mo-suc284-con) .suc284-x:hover{color:var(--text)}
:is(#mo-suc284,#mo-suc284-con) .suc284-body{overflow-y:auto;padding:18px 20px}
:is(#mo-suc284,#mo-suc284-con) .suc284-grid{display:grid;gap:13px 16px;grid-template-columns:1fr 1fr}
:is(#mo-suc284,#mo-suc284-con) .suc284-f{display:flex;flex-direction:column;gap:5px;min-width:0}
:is(#mo-suc284,#mo-suc284-con) .suc284-f.w2{grid-column:1 / -1}
:is(#mo-suc284,#mo-suc284-con) .suc284-f label{color:var(--dim);font-size:12px;font-weight:500}
:is(#mo-suc284,#mo-suc284-con) .suc284-in{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  padding:8px 11px;
  width:100%;
}
:is(#mo-suc284,#mo-suc284-con) textarea.suc284-in{min-height:66px;resize:vertical}
:is(#mo-suc284,#mo-suc284-con) .suc284-in:focus{border-color:var(--accent);outline:none}
:is(#mo-suc284,#mo-suc284-con) .suc284-in::placeholder{color:var(--dim)}
:is(#mo-suc284,#mo-suc284-con) .suc284-f.chk{gap:4px}
:is(#mo-suc284,#mo-suc284-con) .suc284-f.chk label{
  align-items:center;color:var(--text);cursor:pointer;display:flex;
  font-size:13.5px;font-weight:600;gap:9px;
}
:is(#mo-suc284,#mo-suc284-con) .suc284-f.chk span{color:var(--dim);font-size:11.5px;line-height:1.4}
:is(#mo-suc284,#mo-suc284-con) .suc284-foot{
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 20px;
}
/* La ventana es hermana de los modales del CRM y NO hereda sus `--crm-*`:
   los botones se repintan aquí con el tema global para que no salgan sin
   borde ni fondo (declaración invalidada por `var()` indefinida). */
:is(#mo-suc284,#mo-suc284-con) .crm260-btn{
  align-items:center;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;color:var(--text2);cursor:pointer;display:inline-flex;
  font-family:var(--font);font-size:12px;font-weight:600;gap:7px;height:36px;
  justify-content:center;padding:0 14px;white-space:nowrap;
}
:is(#mo-suc284,#mo-suc284-con) .crm260-btn:hover{background:var(--bg3);color:var(--text)}
:is(#mo-suc284,#mo-suc284-con) .crm260-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:is(#mo-suc284,#mo-suc284-con) .crm260-btn.primary:disabled{cursor:default;opacity:.6}

/* ── 4.3.354 · una sucursal por empresa, y la ventana de contactos ─────── */
.suc284-row{cursor:pointer}
.suc284-row:hover{background:var(--bg2)}
.suc284-aviso{margin:0 0 10px;color:var(--yellow);border:1px solid var(--yellow);border-radius:6px;padding:8px 10px;font-size:12px;text-transform:none}
.suc284-aviso i{margin-right:6px}
.suc284-linea{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.suc284-linea:last-child{margin-bottom:0}
.suc284-emp{font-size:10px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.suc284-sub{margin-left:8px;font-size:12px;color:var(--dim);font-weight:400}
.suc284-sec{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text2)}
.suc284-sec:first-child{margin-top:0}
.suc284-sec span{font-size:10px;padding:1px 7px;border:1px solid var(--border);border-radius:999px;color:var(--dim);font-weight:600}
.suc284-sec-warn{color:var(--yellow)}
.suc284-sec-warn span{border-color:var(--yellow);color:var(--yellow)}
.suc284-crow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.suc284-crow:last-child{border-bottom:0}
/* Dentro de una fila, el selector va a su tamaño y el nombre se queda el resto. Con id, a
   propósito: la regla de la ventana (`:is(#mo-suc284,#mo-suc284-con) .suc284-in`, ancho 100 %)
   lleva uno, le ganaba a la de la fila y dejaba el nombre en 0 px (vista viva 4.14.2). */
#mo-suc284-con .suc284-crow .suc284-in{flex:none;width:auto;min-width:180px;height:32px;padding:0 8px}
.suc284-clink{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text);font-family:var(--font)}
.suc284-clink b{font-size:13px;font-weight:600}
.suc284-clink small{font-size:11px;color:var(--dim)}
.suc284-clink:hover b{color:var(--turq)}
#mo-suc284-con .crm260-btn{align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text2);cursor:pointer;display:inline-flex;font-family:var(--font);font-size:12px;font-weight:600;gap:7px;height:36px;justify-content:center;padding:0 14px;white-space:nowrap}
#mo-suc284-con .crm260-btn:hover{background:var(--bg3);color:var(--text)}
:is(#mo-suc284,#mo-suc284-con) .suc284-legado{color:var(--warning,#E3B341);font-weight:400;margin-left:4px}
.suc284-mapa{color:var(--turq);font-weight:600;white-space:nowrap}

/* ── 4.14.2 · una o varias sucursales por contacto ─────────────────────
   Casillas en forma de pastilla: la ficha del contacto (#mo-con-det), el
   modal de alta (#mo-contacto) y la ventana de la sucursal. Sólo variables
   GLOBALES del tema (viven en <html>, día y noche): valen en los tres sitios. */
.suc284-chips{display:flex;flex-wrap:wrap;gap:6px}
.suc284-chip{
  align-items:center;background:var(--bg);border:1px solid var(--border);
  border-radius:999px;color:var(--text2);cursor:pointer;display:inline-flex;
  font-family:var(--font);font-size:12px;font-weight:500;gap:6px;line-height:1.2;
  padding:5px 11px;text-transform:none;
}
.suc284-chip:hover{border-color:var(--accent);color:var(--text)}
.suc284-chip i{color:var(--dim);font-size:12px}
.suc284-chip.on{border-color:var(--accent);color:var(--text);font-weight:600}
.suc284-chip.on i{color:var(--accent)}
.suc284-chip.off{opacity:.7}
.suc284-chip small{color:var(--dim);font-size:10px}
.suc284-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.suc284-otras{color:var(--dim);font-size:11px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suc284-sumar{margin:10px 0 2px}
#mo-suc284-con .suc284-sumar .suc284-in{width:100%;height:34px;padding:0 8px}
/* Dentro de la ficha del contacto (#mo-con-det) manda la paleta `--crm-*` de MOD-260,
   como todo lo demás de la ficha (cabecera de este archivo): con las globales, en el
   tema de noche la casilla marcada salía en el carmesí de --accent dentro de una
   ficha azul (auditoría 4.14.2). */
#mo-con-det .suc284-chip{background:var(--crm-surface);border-color:var(--crm-line-strong);color:var(--crm-text-2)}
#mo-con-det .suc284-chip:hover{border-color:var(--crm-blue-line);color:var(--crm-text)}
#mo-con-det .suc284-chip i,#mo-con-det .suc284-chip small{color:var(--crm-muted)}
#mo-con-det .suc284-chip.on{background:var(--crm-blue-soft);border-color:var(--crm-blue-line);color:var(--crm-text)}
#mo-con-det .suc284-chip.on i{color:var(--crm-blue)}
#mo-con-det .suc284-chip:focus-visible{outline-color:var(--crm-blue)}