/* ============================================================
   support.css — /support y la pestaña Support de /admin
   ------------------------------------------------------------
   Lo comparten las dos caras del soporte: el formulario de abrir
   un ticket, la lista, el HILO (mensajes de los dos lados con sus
   imagenes) y la caja de responder con adjuntos. Casi todo lo
   demas —.panel, .otable, .pill, .stat, .seg, .chip, .modal,
   .opager— es lo de app.css: el soporte tiene que sentirse la
   misma web, no un widget pegado.

   Archivo propio y no un bloque mas en app.css para que las dos
   paginas que lo cargan lo hagan a proposito y nada de aqui pueda
   pisar una regla de las otras.
   ============================================================ */

/* ---------- el estado de un ticket ----------
   Tres colores para tres significados, y el mismo en las dos caras:
     open     cian  — hay algo que contestar (la cola del equipo)
     waiting  ambar — "waiting response": la pelota esta en el usuario
     closed   gris  — resuelto
   Sobre `.pill` de app.css: solo cambia el color. */
.pill.tk-open    { color: var(--wire); }
.pill.tk-waiting { color: var(--watt); }
.pill.tk-closed  { color: var(--fg-3); }
/* En la tabla la etiqueta mas larga es "waiting response": 16 caracteres.
   La regla general de .otable .pill (9ch) la partiria en dos lineas. */
.otable .pill.tk-open, .otable .pill.tk-waiting, .otable .pill.tk-closed {
  min-width: calc(16ch + 1.5em + 14px); white-space: nowrap;
}

/* El punto de "hay respuesta nueva". Late como el del hero: es lo unico de
   la fila que pide un clic. */
.tk-new {
  display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  vertical-align: middle; background: var(--signal); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(53, 240, 160, .18); animation: pulse 2s infinite;
}

/* ---------- el formulario ---------- */
.field2 textarea {
  width: 100%; min-height: 128px; resize: vertical;
  background: var(--ink-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 11px 13px;
}
.field2 textarea:focus { outline: none; border-color: var(--signal); }
.field2 textarea::placeholder { color: var(--fg-3); }
.field2 textarea:disabled, .field2 input:disabled { opacity: .55; cursor: progress; }
/* Cuantos caracteres quedan: solo se pinta cuando importa (cerca del tope). */
.field2 .field__msg.is-warn { color: var(--watt); }
.field2 .field__msg.is-bad  { color: var(--pulse); }

/* Las categorias son chips excluyentes (los de .cats), no un <select>: cinco
   opciones caben a la vista, y un desplegable esconde cuatro de las cinco. */
.tkcats { margin-bottom: 0; }
.tkcats .chip { padding: 8px 10px; }

/* ---------- adjuntar imagenes ---------- */
/* El <input type="file"> nativo no se estiliza: va oculto y lo dispara un
   boton de los de siempre. Al lado, la letra pequeña con los limites. */
.attach { margin-bottom: 14px; }
.attach__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.attach__hint { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.attach__in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

.attach__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.attach__list:empty { display: none; }
.attach__i {
  position: relative; width: 96px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ink-2); padding: 5px;
}
.attach__i img {
  width: 100%; height: 64px; object-fit: cover; border-radius: 2px;
  background: var(--ink); image-rendering: auto;
}
.attach__i em {
  display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--fg-3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attach__x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--slate-2); color: var(--fg-2);
  font-family: var(--mono); font-size: 11px; line-height: 1;
}
.attach__x:hover { border-color: var(--pulse); color: var(--pulse); }

/* ---------- el hilo ---------- */
.thread { display: grid; gap: 10px; }
.msg {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-2); padding: 11px 13px; min-width: 0;
}
/* Quien habla se lee por el borde antes que por la etiqueta: cian el
   equipo, gris el usuario. Y no se alinean a izquierda y derecha como un
   chat: en 440px de tarjeta eso solo estrecha los dos. */
.msg--admin { border-left: 3px solid var(--wire); }
.msg--user  { border-left: 3px solid var(--line-2); }
.msg__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .09em; margin: 0 0 7px;
}
.msg__head b { font-weight: 500; color: var(--fg-2); }
.msg--admin .msg__head b { color: var(--wire); }
.msg__head time { margin-left: auto; text-transform: none; letter-spacing: 0; }
/* Texto tal cual se escribio: los saltos de linea se respetan, y una URL
   larga sin espacios envuelve en vez de salirse. */
.msg__body {
  margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg__atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg__att {
  display: block; width: 132px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ink); padding: 4px; text-decoration: none !important;
}
.msg__att:hover { border-color: var(--signal); }
.msg__att img { width: 100%; height: 88px; object-fit: cover; border-radius: 2px; image-rendering: auto; }
.msg__att em {
  display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--fg-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* El aviso de estado encima de la caja de responder: cerrado, o esperando. */
.tk-note {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 10px 12px; margin: 14px 0 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); line-height: 1.6;
}
.tk-note b { color: var(--fg-2); font-weight: 500; }

/* La caja de responder. */
.reply { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.reply .field2 { margin-bottom: 10px; }
.reply .field2 textarea { min-height: 88px; }
.reply__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reply__acts .grow { flex: 1; }

/* Los diálogos del hilo son mas anchos que los 440px de serie: un hilo con
   capturas y una caja de responder no cabe en columna de uno. */
#tkModal .modal__card, #atModal .modal__card { width: min(720px, 100%); }

/* La ficha del dueño dentro del panel de admin: una linea, no una tabla. */
.tk-who {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-3);
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.tk-who b { color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.tk-who button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--wire);
}
.tk-who button:hover { text-decoration: underline; }

/* La descripcion de la categoria en la tabla. */
.otable td .sub2.tk-cat { text-transform: none; }

@media (max-width: 560px) {
  .otable .pill.tk-open, .otable .pill.tk-waiting, .otable .pill.tk-closed { min-width: 0; }
  .msg__att { width: calc(50% - 4px); }
}

/* La cifra de la cola en la pestaña Support del panel: cuantos hay que
   contestar. Magenta como el contador de la campana: es lo mismo, "hay algo
   nuevo que te espera". Oculta a cero. */
.seg button .tabn {
  display: inline-block; margin-left: 6px; min-width: 17px; padding: 1px 5px;
  border-radius: 9px; background: var(--pulse); color: #12030A;
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1.4;
  vertical-align: middle;
}
.seg button .tabn[hidden] { display: none; }
/* La fila con respuesta nueva, en las dos tablas. */
.otable tr.is-new td { background: rgba(53, 240, 160, .04); }

/* ============================================================
   /support: DOS PESTAÑAS, Y EL FORMULARIO EN EL CENTRO
   ------------------------------------------------------------
   Abrir un ticket es la ACCIÓN de esta página y ocupa el centro;
   los tickets ya abiertos son consulta y viven detrás de una
   pestaña. Antes convivían en dos columnas y no funcionaba: la
   lista vacía medía un tercio de lo que mide el formulario, así
   que la fila entera dejaba medio panel de aire debajo, y la
   tabla —647px de ancho, medidos— nunca cabía en la columna que
   le quedaba.

   Separadas, cada una tiene el ancho que necesita: la tabla, el
   de la página; el formulario, el suyo. Y lo que se busca al
   entrar está delante en vez de al lado.

   LA PÁGINA ABRE SIEMPRE POR EL FORMULARIO. Cuando hay una
   respuesta esperando, no se cambia de pestaña por su cuenta: se
   pinta la barra de arriba (`.tkbar`) con el botón que lleva a
   ella. Cambiar de pestaña solo lo hace quien mira.
   ============================================================ */
.tk__sec[hidden] { display: none; }

/* El `.seg` de app.css reparte sus botones a partes iguales, que con seis
   pestañas (/admin) está bien y con dos deja cada una a media pantalla. */
.tk__tabs {
  display: inline-flex; width: auto; max-width: 100%;
  margin-bottom: var(--gap);
}
.tk__tabs button {
  flex: none; padding: 11px 20px; font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- el formulario ----------
   Acotado y alineado a la izquierda, como el párrafo de la cabecera: un
   campo de texto de mil cuatrocientos píxeles no lo quiere nadie, y centrar
   el bloque lo despegaría del borde que comparten las pestañas, el título y
   la letra pequeña. */
.tkform, .tkform__note { max-width: 880px; }
.tkform__note { margin-top: 14px; }
/* El botón, a su ancho: `btn--block` lo estiraba a los 880 del panel, que en
   una columna ancha se lee como una barra, no como un botón. El mensaje de
   error va a su lado y no debajo, donde dejaba un hueco permanente. */
.tkform__send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tkform__send .field__msg { margin: 0; flex: 1 1 220px; min-height: 0; }

/* ---------- "tienes respuesta" ----------
   Misma forma que el aviso de correo sin confirmar (`.verifybar` en
   app.css) y por lo mismo: ocupa su sitio y empuja, en vez de flotar encima
   de algo. En cian y no en ámbar porque no es un aviso de que algo va mal:
   es correo nuevo. */
.tkbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--gap); padding: 13px 16px;
  border: 1px solid var(--wire); border-radius: var(--r);
  background: rgba(76, 201, 240, .07);
}
.tkbar[hidden] { display: none; }
.tkbar__txt { min-width: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.tkbar__txt b { color: var(--wire); font-weight: 500; }

/* ---------- la lista ----------
   Un estado vacío de cien píxeles debajo de una cabecera y unos filtros se
   lee como un error de carga. Con algo de alto es una caja que dice lo que
   dice. */
.tklist > .emptystate {
  min-height: 180px; gap: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

@media (max-width: 620px) {
  /* Dos pestañas que ya no caben en una línea: que ocupen el ancho, que es
     lo que `.seg` hace de serie. */
  .tk__tabs { display: flex; width: 100%; }
  .tk__tabs button { flex: 1; justify-content: center; padding: 11px 8px; }
}