/* ============================================================
 *  css/helpdesk_soporte.css · 49cb.132c
 *
 *  Estilos de la Bandeja del Helpdesk (página `helpdesk-soporte`).
 *
 *  Refactorizado fuera del template literal `m.innerHTML = `...``
 *  en sesión 49cb.132c tras tres SyntaxErrors causados por backticks
 *  dentro de comentarios CSS rompiendo el template. Aquí los backticks
 *  son texto inerte y se pueden usar libremente.
 *
 *  Cargado vía <link rel="stylesheet"> desde index.html — siempre en
 *  el documento, no se duplica al re-pintar la página.
 * ============================================================ */

/* 49cb.132b · Layout viewport-fit. Toda la pantalla del helpdesk
   ocupa exactamente la altura disponible del contenedor `.content`.
   - Header / banner urgentes / KPIs ocupan altura natural (flex:0).
   - `.hd-grid` ocupa el resto (flex:1) → lista + detalle siempre visibles.
   - El detalle hereda flex column: thread (flex:1) / splitter / input.
   - El banner urgentes es plegable (auto-colapsa al abrir un ticket).

   IMPORTANTE: el selector incluye `.active` porque el sistema SPA
   de páginas oculta las inactivas con `.page { display:none }` y
   un ID solo (`#page-helpdesk-soporte`) tendría mayor especificidad
   y haría que el helpdesk se renderice ENCIMA de la página activa.
   Solo aplicamos el layout flex cuando esta página está activa. */
#page-helpdesk-soporte.active {
  display:flex; flex-direction:column;
  height:100%; min-height:520px; box-sizing:border-box;
}
#page-helpdesk-soporte.active > .shdr,
#page-helpdesk-soporte.active > .hd-banner,
#page-helpdesk-soporte.active > .hd-kpis { flex:0 0 auto }

#page-helpdesk-soporte .hd-kpis { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin-bottom:14px }
@media (max-width: 1100px) { #page-helpdesk-soporte .hd-kpis { grid-template-columns:repeat(3, 1fr) } }
#page-helpdesk-soporte .hd-k { background:#fff; border:1px solid var(--bdr); border-radius:8px; padding:11px 14px; cursor:pointer; transition:.15s }
#page-helpdesk-soporte .hd-k:hover { border-color:var(--pri); transform:translateY(-1px) }
#page-helpdesk-soporte .hd-k .l { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--tx3) }
#page-helpdesk-soporte .hd-k .v { font-family:var(--font-display, Georgia, serif); font-weight:300; font-size:24px; color:var(--tx); letter-spacing:-.02em; margin-top:2px }
#page-helpdesk-soporte .hd-k.urg .v { color:#991b1b }
#page-helpdesk-soporte .hd-k.nuevo .v { color:#1e40af }

#page-helpdesk-soporte .hd-grid {
  display:grid; grid-template-columns:420px 1fr; gap:14px;
  flex:1 1 0; min-height:0;   /* ocupa lo que sobra del page · sin min-height fijo */
}
@media (max-width: 1100px) { #page-helpdesk-soporte .hd-grid { grid-template-columns:1fr } }
#page-helpdesk-soporte .hd-side { background:#fff; border:1px solid var(--bdr); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-height:0 }
#page-helpdesk-soporte .hd-tools { padding:10px 12px; background:#fafaf7; border-bottom:1px solid var(--bdr); display:flex; gap:6px; flex-wrap:wrap }
#page-helpdesk-soporte .hd-tools select, #page-helpdesk-soporte .hd-tools input { font-size:11.5px; padding:5px 8px }
#page-helpdesk-soporte .hd-list { overflow-y:auto; flex:1 }
#page-helpdesk-soporte .hd-tk { padding:11px 14px; cursor:pointer; border-bottom:1px solid #f3f1ea; transition:.12s }
#page-helpdesk-soporte .hd-tk:hover { background:var(--pri-bg) }
#page-helpdesk-soporte .hd-tk.active { background:var(--pri-bg); border-left:3px solid var(--pri); padding-left:11px }
#page-helpdesk-soporte .hd-tk .empresa { font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.4px }
#page-helpdesk-soporte .hd-tk .t { font-weight:600; font-size:13px; color:var(--tx); margin:2px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#page-helpdesk-soporte .hd-tk .s { font-size:11px; color:var(--tx3); display:flex; gap:6px; align-items:center; flex-wrap:wrap }

#page-helpdesk-soporte .hd-chip { padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; letter-spacing:.3px }
#page-helpdesk-soporte .hd-chip.nuevo            { background:#dbeafe; color:#1e40af }
#page-helpdesk-soporte .hd-chip.en_proceso       { background:#fef3c7; color:#92400e }
#page-helpdesk-soporte .hd-chip.esperando_cliente{ background:#fce7f3; color:#9f1239 }
#page-helpdesk-soporte .hd-chip.resuelto         { background:#dcfce7; color:#166534 }
#page-helpdesk-soporte .hd-chip.cerrado          { background:#e5e7eb; color:#374151 }
#page-helpdesk-soporte .hd-chip.urgente          { background:#fee2e2; color:#991b1b }
#page-helpdesk-soporte .hd-chip.alta             { background:#fed7aa; color:#9a3412 }
#page-helpdesk-soporte .hd-chip.normal           { background:#e0e7ff; color:#3730a3 }
#page-helpdesk-soporte .hd-chip.baja             { background:#f1f5f9; color:#475569 }

#page-helpdesk-soporte .hd-main { background:#fff; border:1px solid var(--bdr); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-height:0 }
/* 49cb.132 · El wrapper #hds-detalle debe propagar el flex column
   del .hd-main para que .hd-thread/.hd-splitter/.hd-input se
   repartan el alto. Sin esto el splitter no funciona porque el
   padre intermedio rompe la cadena. */
#page-helpdesk-soporte #hds-detalle { display:flex; flex-direction:column; flex:1 1 0; min-height:0 }
#page-helpdesk-soporte .hd-main .hd-header { padding:14px 18px; border-bottom:1px solid var(--bdr); background:#fafaf7; flex:0 0 auto }
#page-helpdesk-soporte .hd-asunto { font-family:var(--font-display, Georgia, serif); font-weight:400; font-size:20px; letter-spacing:-.01em; color:var(--tx); margin:0 0 6px }
#page-helpdesk-soporte .hd-acciones { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px }
#page-helpdesk-soporte .hd-acciones select, #page-helpdesk-soporte .hd-acciones button { font-size:11.5px; padding:5px 10px }

/* 49cb.132 · Layout vertical redimensionable.
   - `.hd-thread` crece con flex:1; `.hd-input` ocupa una altura fija
     controlada por el splitter (persistida en localStorage).
   - El textarea del editor crece con flex:1 dentro de `.hd-input`
     para aprovechar TODO el espacio que le des con el splitter. */
#page-helpdesk-soporte .hd-thread { flex:1 1 0; overflow-y:auto; padding:14px 18px; min-height:80px }
#page-helpdesk-soporte .hd-msg { margin-bottom:14px }
#page-helpdesk-soporte .hd-msg .b { padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.55; white-space:pre-wrap }
#page-helpdesk-soporte .hd-msg.cliente .b  { background:#f1efe8; color:var(--tx); border:1px solid var(--bdr) }
#page-helpdesk-soporte .hd-msg.soporte .b  { background:var(--pri-bg); color:var(--tx); border:1px solid var(--pri-soft); border-left:3px solid var(--pri) }
#page-helpdesk-soporte .hd-msg.interno .b  { background:#fff7e6; color:#7a4a00; border:1px dashed #f0a020 }
#page-helpdesk-soporte .hd-msg .meta { font-size:10.5px; color:var(--tx3); margin-top:4px; padding:0 4px }

/* Splitter draggable entre thread y editor (49cb.132).
   Grosor 12px para agarre cómodo con ratón / touchpad.
   `touch-action:none` impide que el navegador trate el drag como scroll. */
#page-helpdesk-soporte .hd-splitter {
  flex:0 0 12px; cursor:row-resize; background:#f5f4ef;
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
  touch-action:none; user-select:none;
}
#page-helpdesk-soporte .hd-splitter::before {
  content:''; width:48px; height:4px; border-radius:2px; background:#c8c4b0;
  transition:background .15s;
}
#page-helpdesk-soporte .hd-splitter:hover { background:#ece9dc }
#page-helpdesk-soporte .hd-splitter:hover::before { background:#8a8060 }
#page-helpdesk-soporte .hd-splitter.dragging { background:#eee9d0 }
#page-helpdesk-soporte .hd-splitter.dragging::before { background:#7a7050 }

#page-helpdesk-soporte .hd-input {
  flex:0 0 230px;  /* altura inicial · sobrescrita por el splitter desde localStorage */
  padding:12px 16px; background:#fafaf7;
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden; min-height:120px;
}
#page-helpdesk-soporte .hd-input textarea {
  width:100%; resize:none; flex:1 1 0; min-height:50px;
  padding:9px 12px; border:1px solid var(--bdr); border-radius:8px;
  font-family:inherit; font-size:13px; outline:none; box-sizing:border-box;
}
#page-helpdesk-soporte .hd-input textarea:focus { border-color:var(--pri) }
#page-helpdesk-soporte .hd-input .row { display:flex; gap:8px; align-items:center; flex:0 0 auto }
#page-helpdesk-soporte .hd-input button { background:var(--pri); color:#fff; border:0; border-radius:8px; padding:7px 18px; font-weight:600; cursor:pointer; font-size:12.5px }
#page-helpdesk-soporte .hd-empty { padding:60px 30px; text-align:center; color:var(--tx3) }

/* 49cb.131 · Filtros profesionales · pills + grupos */
#page-helpdesk-soporte .hd-filtros {
  display:flex; flex-direction:column; gap:10px;
  padding:14px 14px 12px 14px;
  background: linear-gradient(180deg, #FAFAF7 0%, #F5F3EE 100%);
  border-bottom: 1px solid var(--bdr);
}
#page-helpdesk-soporte .hd-fila { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#page-helpdesk-soporte .hd-lbl {
  font-size:9.5px; font-weight:600; color:var(--tx3);
  text-transform:uppercase; letter-spacing:.5px;
  margin-right:4px; white-space:nowrap;
}
#page-helpdesk-soporte .hd-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--bdr);
  font-size:11.5px; font-weight:500; color:var(--tx);
  cursor:pointer; transition: all .12s;
  white-space:nowrap;
}
#page-helpdesk-soporte .hd-pill:hover { border-color:var(--pri); background:var(--pri-bg); }
#page-helpdesk-soporte .hd-pill[data-active="1"] {
  background: linear-gradient(135deg, #2D2580 0%, #4A3FB8 100%);
  color:#fff; border-color:#2D2580;
  box-shadow: 0 2px 6px rgba(45,37,128,.25);
}
#page-helpdesk-soporte .hd-pill[data-active="1"]:hover {
  background: linear-gradient(135deg, #2D2580 0%, #4A3FB8 100%);
}
#page-helpdesk-soporte .hd-pill-count {
  background: rgba(0,0,0,.06); padding:1px 7px; border-radius:8px;
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600;
}
#page-helpdesk-soporte .hd-pill[data-active="1"] .hd-pill-count {
  background: rgba(255,255,255,.22); color:#fff;
}
#page-helpdesk-soporte .hd-buscador {
  position:relative; flex:1; min-width:160px;
}
#page-helpdesk-soporte .hd-buscador input {
  width:100%; box-sizing:border-box;
  padding:7px 12px 7px 30px;
  background:#fff; border:1px solid var(--bdr); border-radius:8px;
  font-size:12px; font-family:inherit;
  transition: border-color .12s, box-shadow .12s;
}
#page-helpdesk-soporte .hd-buscador input:focus {
  outline:none; border-color:var(--pri);
  box-shadow: 0 0 0 3px rgba(74,63,184,.12);
}
#page-helpdesk-soporte .hd-buscador-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.4; pointer-events:none;
}

/* 49cb.131 · Banner urgentes + SLA + plantillas */
#page-helpdesk-soporte .hd-banner {
  background: linear-gradient(135deg, #0A0F1C 0%, #2D2580 70%, #4A3FB8 100%);
  color:#fff; border-radius:14px; padding:18px 22px; margin-bottom:14px;
  box-shadow: 0 4px 20px rgba(45,37,128,.18);
}
#page-helpdesk-soporte .hd-banner-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px; flex-wrap:wrap; cursor:pointer;
  user-select:none;
}
#page-helpdesk-soporte .hd-banner-head .hd-banner-chev {
  font-size:11px; opacity:.7; margin-left:6px; transition: transform .2s;
  display:inline-block;
}
/* Colapsado: ocultar cuerpo, quitar margin-bottom de head y compactar
   el banner para que ocupe ~52px (solo título + contador). */
#page-helpdesk-soporte .hd-banner.collapsed { padding-top:12px; padding-bottom:12px; margin-bottom:10px; }
#page-helpdesk-soporte .hd-banner.collapsed .hd-banner-head { margin-bottom:0 }
#page-helpdesk-soporte .hd-banner.collapsed .hd-urgentes,
#page-helpdesk-soporte .hd-banner.collapsed .hd-banner-empty { display:none }
#page-helpdesk-soporte .hd-banner.collapsed .hd-banner-chev { transform: rotate(-90deg) }
#page-helpdesk-soporte .hd-banner-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 20px; letter-spacing: -.018em; margin: 0;
}
#page-helpdesk-soporte .hd-banner-title em { color:#FFC857; font-style:italic; }
#page-helpdesk-soporte .hd-banner-count {
  background: rgba(255,255,255,.16); padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.5px;
}
#page-helpdesk-soporte .hd-urgentes { display:grid; gap:8px; }
#page-helpdesk-soporte .hd-urgente {
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:10px 14px; cursor:pointer;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  transition: background .15s, transform .05s;
}
#page-helpdesk-soporte .hd-urgente:hover {
  background: rgba(255,255,255,.16);
}
#page-helpdesk-soporte .hd-urgente:active { transform: translateY(1px); }
#page-helpdesk-soporte .hd-urgente-rank {
  font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:300;
  color:#FFC857; min-width:24px; text-align:center;
}
#page-helpdesk-soporte .hd-urgente-info { flex:1; min-width:240px; }
#page-helpdesk-soporte .hd-urgente-asunto {
  font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
#page-helpdesk-soporte .hd-urgente-meta {
  font-size:11px; color: rgba(255,255,255,.7); margin-top:3px;
}
#page-helpdesk-soporte .hd-banner-empty {
  padding:20px; text-align:center; color: rgba(255,255,255,.7); font-size:13px;
}

/* SLA badge en la lista lateral */
#page-helpdesk-soporte .hd-sla {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px;
  margin-left:auto; font-family:'JetBrains Mono',monospace;
}
#page-helpdesk-soporte .hd-sla.ok    { background:#dcfce7; color:#166534; }
#page-helpdesk-soporte .hd-sla.warn  { background:#fef3c7; color:#92400e; }
#page-helpdesk-soporte .hd-sla.alert { background:#fee2e2; color:#991b1b; }

/* Plantillas en el editor */
#page-helpdesk-soporte .hd-plantillas {
  display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px 0 16px;
  max-height: 78px; overflow-y:auto;
}
#page-helpdesk-soporte .hd-plant {
  background:#fff; border:1px solid var(--bdr); border-radius:999px;
  padding:5px 11px; font-size:11.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  transition: border-color .15s, background .15s;
}
#page-helpdesk-soporte .hd-plant:hover {
  border-color: var(--pri); background: var(--pri-bg);
}
#page-helpdesk-soporte .hd-plant.macro {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFAF0 100%);
  border-color:#BA7517; color:#7C5610; font-weight:600;
}
#page-helpdesk-soporte .hd-plant.macro:hover {
  background: linear-gradient(135deg, #FCD34D 0%, #FEF3C7 100%);
}
#page-helpdesk-soporte .hd-plantillas-lbl {
  font-size:10px; font-weight:600; color:var(--tx3); letter-spacing:.5px;
  text-transform:uppercase; padding: 12px 16px 0 16px;
}

/* Mejor header */
#page-helpdesk-soporte .stitle {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 26px; letter-spacing: -.02em;
}