:root{
  /* Zendesk-ish light (más compacto + flat) */
  --bg:#f4f6f8;
  --panel:#ffffff;
  --card:#ffffff;

  /* líneas algo más marcadas para look "enterprise" */
  --line:#dfe6ee;
  --line2:#cfd9e6;

  --text:#1f2a37;
  --muted:#6b7a90;

  --accent:#2b7cff;
  --accent2:#1e63d6;

  --danger:#e5484d;
  --warn:#f5a524;
  --ok:#18a957;

  /* ✅ menos redondeado */
  --radius:7px;

  /* ✅ sombras más sutiles (flat) */
  --shadow: 0 6px 14px rgba(18,38,63,.06);
  --shadow2: 0 3px 10px rgba(18,38,63,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: var(--bg);
  color:var(--text);

  /* importante para layout app */
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ===== Controls ===== */
select, textarea, input{
  width:100%;
  border:1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color:var(--text);
  padding:8px 10px;          /* ✅ más compacto */
  outline:none;
}
select{width:auto}
textarea{resize:vertical}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:8px 10px;          /* ✅ más compacto */
  border-radius:6px;         /* ✅ menos redondeo */
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:none;
}
.btn:hover{background:#f7f9fc}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.primary{
  border-color: rgba(43,124,255,.35);
  background: rgba(43,124,255,.10);
  color: var(--accent2);
}
.btn.primary:hover{background: rgba(43,124,255,.14)}
.btn.ghost{background:transparent}
.btn.compact{padding:7px 9px; white-space:nowrap}

.pill{
  border:1px solid var(--line);
  padding:7px 9px;
  border-radius:999px;
  background:#fff;
  display:inline-flex; align-items:center; gap:8px;
}

/* ===== Topbar ===== */
.topbar{
  height:56px;               /* ✅ un pelín más baja */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;            /* ✅ compacto */
  border-bottom:1px solid var(--line);
  background: var(--panel);
  position:sticky;
  top:0;
  z-index:50;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:34px;height:34px;border-radius:7px;
  border:1px solid rgba(43,124,255,.22);
  background: rgba(43,124,255,.10);
  display:flex;align-items:center;justify-content:center;
  color: var(--accent2);
}
.brand-title{font-weight:900; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-size:12px; margin-top:1px}
.top-actions{display:flex;align-items:center;gap:8px}

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns: 60px 340px 1fr 340px; /* ✅ más compacto */
  gap:10px;
  padding:10px;
  height: calc(100vh - 56px);
  overflow:hidden;
}

/* ===== Rail ===== */
.rail{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow2);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rail-btn{
  position:relative;
  width:100%;
  border:1px solid transparent;
  border-radius: 8px;
  padding:10px 0;            /* ✅ más compacto */
  background: transparent;
  cursor:pointer;
  color: var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.rail-btn:hover{background:#f3f6fb; color: var(--text)}
.rail-btn.active{
  background: rgba(43,124,255,.10);
  color: var(--accent2);
  border-color: rgba(43,124,255,.20);
}
.rail-btn.disabled{opacity:.35; cursor:not-allowed}
.rail-btn i{font-size:18px}

/* badges más “Zendesk”: más marcados y compactos */
.badge{
  position:absolute;
  top:6px; right:6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(43,124,255,.35);
  background: rgba(43,124,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color: var(--accent2);
}

/* ===== Inbox ===== */
.inbox{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}
.inbox-head{
  padding:8px;               /* ✅ compacto */
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#fff;
}
.inbox-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.search-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  padding:0 10px;
}
.search-wrap i{color:var(--muted)}
.search{
  border:none !important;
  background: transparent !important;
  padding:10px 0 !important; /* ✅ compacto */
}
.filters{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.view-pill{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 9px;           /* ✅ compacto */
  background:#fff;
}
.view-pill .count{
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(43,124,255,.10);
  color: var(--accent2);
  border: 1px solid rgba(43,124,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}

.inbox-list{
  overflow:auto;
  padding:6px;
  min-height:0;
}

/* item más “listado Zendesk”: menos padding, más recto, separador sutil */
.item{
  position:relative;
  border:1px solid transparent;
  border-radius:8px;
  padding:8px 8px;           /* ✅ compacto */
  display:flex;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.item + .item{ margin-top:4px; }
.item:hover{background:#f4f7fb}
.item.active{
  border-color: rgba(43,124,255,.28);
  background: rgba(43,124,255,.08);
}
.item .meta{flex:1; min-width:0}
.item .title{display:flex; justify-content:space-between; gap:8px; align-items:center}
.item .subject{
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;            /* ✅ más denso */
}
.item .preview{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.meta-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px
}

/* chips más “tag” y legibles */
.chip{
  font-size:11px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:#fff;
  line-height:1.25;
}

/* ✅ urgentes/pending más evidentes */
.chip.urgent{
  border-color: rgba(229,72,77,.35);
  background: rgba(229,72,77,.10);
  color: #a0181d;
  font-weight:800;
}
.chip.pending{
  border-color: rgba(245,165,36,.35);
  background: rgba(245,165,36,.12);
  color:#8a4c00;
  font-weight:800;
}
.chip.closed{
  opacity:.85;
  background:#f3f5f8;
}

.dot{
  width:9px; height:9px; border-radius:50%;
  background: rgba(43,124,255,.90);
  margin-top:6px;
  box-shadow: 0 0 0 3px rgba(43,124,255,.10);
}

/* ===== Pending visual ===== */
.item.pending{
  border-color: rgba(245,165,36,.22);
  background: rgba(245,165,36,.08);
}
.item.pending::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:3px;
  border-radius:999px;
  background: rgba(245,165,36,.85);
}

/* ===== Thread ===== */
.thread{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}
.thread-top{
  padding:8px 10px;          /* ✅ compacto */
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
}
.thread-subject{
  font-weight:900;
  font-size:14px;            /* ✅ compacto */
}
.thread-actions{display:flex; gap:8px; align-items:center}
.thread-actions .status-dd{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 8px;           /* ✅ compacto */
  background:#fff;
}

/* fondo más neutro, menos “crema” */
.messages{
  flex:1;
  overflow:auto;
  padding:10px;
  background:#f7f9fc;
  min-height:0;
}

/* ===== Chat bubbles ===== */
.msgwrap{
  display:flex;
  margin-bottom:8px;         /* ✅ compacto */
}
.msgwrap.mine{justify-content:flex-end;}
.msgwrap.theirs{justify-content:flex-start;}

.bubble{
  max-width: 78%;
  border:1px solid var(--line);
  border-radius: 10px;       /* ✅ menos redondo */
  padding:9px 10px;
  background:#fff;
  box-shadow: 0 1px 6px rgba(18,38,63,.05);
}
.msgwrap.mine .bubble{
  border-color: rgba(43,124,255,.24);
  background: rgba(43,124,255,.10);
}
.msgwrap.theirs .bubble{
  border-color: rgba(24,169,87,.18);
  background: rgba(24,169,87,.07);
}
.bubble .hdr{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;            /* ✅ más denso */
  margin-bottom:6px;
  gap:10px;
}
.bubble .body{white-space:pre-wrap; line-height:1.45; font-size:13px}

/* ===== Composer ===== */
.composer{
  border-top:1px solid var(--line);
  background:#fff;
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.compose-tabs{
  display:flex;
  gap:10px;
  padding:8px 10px 0 10px;   /* ✅ compacto */
}
.tab{
  border:none;
  background: transparent;
  cursor:pointer;
  padding:7px 9px;
  border-bottom:2px solid transparent;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
}
.tab.active{
  color: var(--accent2);
  border-bottom-color: rgba(43,124,255,.55);
}

.compose-box{ padding:8px 10px 10px 10px; }
.toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 6px;
  background:#fff;
  margin-bottom:8px;
}
.toolbtn{
  border:1px solid transparent;
  background: transparent;
  padding:6px 7px;
  border-radius:6px;
  cursor:pointer;
  color: var(--muted);
}
.toolbtn:hover{background:#f3f6fb; color: var(--text)}
.toolsep{width:1px; height:18px; background: var(--line); margin:0 4px}

.attach-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.attach-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 9px;
  background:#fff;
  color: var(--muted);
  font-size:12px;
}
.attach-chip button{
  border:none;
  background: transparent;
  cursor:pointer;
  color: var(--muted);
}
.attach-chip button:hover{color: var(--danger)}

.compose-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.toast{
  margin-left:auto;
  font-size:12px;
  color: var(--muted);
}

/* ===== Side ===== */
.side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  min-height:0;

  /* ✅ FIX scroll sidebar derecho */
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.side-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding:10px;              /* ✅ compacto */
  overflow:hidden;
}
.side-title{
  font-weight:950;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

/* listas laterales más densas */
.notes,.tasks{max-height:220px; overflow:auto}
.note{
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 8px;
  margin-bottom:6px;
  color:var(--muted);
  background:#fff;
  font-size:12px;
}
.task{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 8px;
  margin-bottom:6px;
  background:#fff;
  font-size:12px;
}
.task.done{opacity:.6; text-decoration:line-through}
.note-add textarea{min-height:58px}
.note-add, .task-add{display:flex; gap:8px; align-items:center; margin-top:8px}
.task-add input{flex:1}
.side-controls label{display:block; margin:8px 0 6px; color:var(--muted); font-size:12px}
.side-controls select{width:100%}
.side-controls button{width:100%; margin-top:8px}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999;
}
.modal{
  width: min(640px, calc(100vw - 24px));
  border:1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  box-shadow: 0 22px 60px rgba(18,38,63,.18);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
}
.modal-title{font-weight:950; display:flex; align-items:center; gap:10px}
.modal-body{padding:10px; display:flex; flex-direction:column; gap:10px}
.modal-body textarea{min-height:90px}
.modal-foot{
  padding:10px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* ===== Login ===== */
.login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.login-card{
  width:min(440px, calc(100vw - 24px));
  border:1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  box-shadow: var(--shadow);
  padding:18px;
}
.login-title{
  font-size:22px;
  font-weight:950;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--accent2);
}
.login-sub{color:var(--muted); margin:6px 0 14px}
.login-card label{display:block; margin-top:10px; margin-bottom:6px; color:var(--muted)}
.login-card button{width:100%; margin-top:14px}
.alert{
  border:1px solid rgba(229,72,77,.28);
  background: rgba(229,72,77,.08);
  color:#a0181d;
  border-radius: 10px;
  padding:10px 12px;
}
.login-foot{margin-top:12px; color:var(--muted); text-align:center}

/* Responsive */
@media (max-width: 1200px){
  .layout{grid-template-columns: 60px 320px 1fr}
  .side{display:none}
}
@media (max-width: 900px){
  .layout{grid-template-columns: 1fr}
  .rail, .inbox{display:none}
}
/* =========================================================
   FIX DEFINITIVO GRID + RIGHT SIDEBAR (NO SE CORTA NADA)
   ========================================================= */

/* 1) Usa unidades modernas para evitar “cortes” por 100vh en móvil */
:root{
  --topbar-h: 56px; /* tu topbar mide 56 */
}

/* 2) El body no scrollea nunca (bien), pero la app sí debe medir bien */
html, body{
  height: 100%;
}
body{
  overflow: hidden;
}

/* 3) El grid tiene una altura real y estable */
.layout{
  height: calc(100dvh - var(--topbar-h)) !important; /* 👈 clave */
  min-height: 0 !important;
  overflow: hidden !important;
}

/* 4) IMPORTANTÍSIMO en CSS Grid: que los hijos puedan “encogerse” */
.layout > aside,
.layout > section{
  min-height: 0 !important;
  min-width: 0 !important;
}

/* 5) Cada columna debe ser un contenedor flex con overflow controlado */
.inbox,
.thread,
.side{
  min-height: 0 !important;
  overflow: hidden; /* el scroll lo ponen sus zonas internas */
}

/* 6) Inbox: la lista scrollea */
.inbox{
  display:flex;
  flex-direction:column;
}
.inbox-list{
  min-height: 0 !important;
  overflow: auto !important;
}

/* 7) Thread: mensajes scrollean, composer fijo dentro */
.thread{
  display:flex;
  flex-direction:column;
}
.messages{
  min-height: 0 !important;
  overflow: auto !important;
}

/* 8) RIGHT SIDEBAR: el scroll vive aquí (no en las cards) */
.side{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;

  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  height: 100% !important;
  max-height: 100% !important;

  padding-right: 10px !important;
  padding-bottom: 16px !important;

  /* evita que el “scrollbar overlay” se coma botones */
  scrollbar-gutter: stable;
}

/* 9) Las cards NO deben crear comportamientos raros */
.side-card{
  flex: 0 0 auto !important;
  overflow: visible !important; /* <- para que nunca “corte” controles */
  position: relative;           /* <- evita glitches de pintado */
}

/* 10) En el sidebar, selects full width (tu CSS global los deja auto) */
.side select{
  width: 100% !important;
}

/* 11) Asegura que los bloques “add” no se rompen en flex */
.note-add, .task-add{
  display:flex;
  gap:8px;
  align-items:center;
}
.note-add textarea{flex:1; min-width:0;}
.task-add input{flex:1; min-width:0;}