/* Web de transcripciones. Los colores son los de Discord a propósito: la
   conversación se leyó allí y se relee aquí, y que se parezca evita tener que
   traducir mentalmente quién dijo qué. */

:root {
  --fondo: #313338;
  --fondo-2: #2b2d31;
  --fondo-3: #1e1f22;
  --borde: #3f4147;
  --texto: #dbdee1;
  --texto-fuerte: #f2f3f5;
  --apagado: #949ba4;
  --azul: #5865f2;
  --azul-claro: #c9cdfb;
  --verde: #23a55a;
  --rojo: #f23f43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.375 "gg sans", "Noto Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: #00a8fc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- barra */

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--fondo-3);
  position: sticky; top: 0; z-index: 10;
}
.marca { color: var(--texto-fuerte); font-weight: 700; font-size: 17px; }
.marca:hover { text-decoration: none; }
.marca span { color: var(--apagado); font-weight: 400; }
.yo { display: flex; align-items: center; gap: 12px; font-size: 14px;
      color: var(--apagado); }
.salir { color: var(--apagado); font-size: 13px; }

.contenido { max-width: 880px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 22px; color: var(--texto-fuerte); margin: 0 0 6px; }
.apagado { color: var(--apagado); }
.vacio { color: var(--apagado); padding: 32px 0; text-align: center; }

.volver { display: inline-block; margin-bottom: 16px; font-size: 14px;
          color: var(--apagado); }

/* ---------------------------------------------------------------- entrar */

.centro { text-align: center; padding: 60px 20px; }
.centro p { max-width: 460px; margin: 12px auto 28px; }

.boton {
  display: inline-block; background: var(--azul); color: #fff;
  padding: 11px 22px; border-radius: 8px; font-weight: 500; font-size: 15px;
}
.boton:hover { background: #4752c4; text-decoration: none; }

/* ---------------------------------------------------------------- lista */

.lista { width: 100%; border-collapse: collapse; margin-top: 20px;
         font-size: 14px; }
.lista th {
  text-align: left; padding: 8px 10px; color: var(--apagado);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--borde);
}
.lista td { padding: 11px 10px; border-bottom: 1px solid var(--fondo-2); }
.lista tbody tr { cursor: pointer; }
.lista tbody tr:hover { background: var(--fondo-2); }
.lista .num { color: var(--apagado); font-variant-numeric: tabular-nums; }

.pill { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.pill.abierto { background: rgba(35,165,90,.15); color: var(--verde); }
.pill.cerrado { background: rgba(148,155,164,.15); color: var(--apagado); }

/* ---------------------------------------------------------------- ticket */

.cabecera { border-bottom: 1px solid var(--borde); padding-bottom: 16px;
            margin-bottom: 16px; }
.datos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px;
         color: var(--apagado); margin-top: 6px; }
.datos b { color: var(--texto); font-weight: 500; }

.formulario { background: var(--fondo-2); border-left: 4px solid var(--azul);
              border-radius: 4px; padding: 4px 16px; margin-bottom: 24px; }
.campo { padding: 10px 0; }
.campo + .campo { border-top: 1px solid var(--borde); }
.etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
            color: var(--apagado); margin-bottom: 3px; }
.valor { white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------- chat */

.chat { margin-top: 8px; }

.msg { display: flex; gap: 16px; padding: 3px 12px 3px 8px;
       margin-top: 17px; border-radius: 4px; }
.msg.seguido { margin-top: 0; }
.msg:hover { background: #2e3035; }

.avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
          margin-top: 2px; background: var(--fondo-3); }
.hueco { width: 40px; flex: 0 0 40px; text-align: right; }
.hora-mini { display: none; font-size: 11px; color: var(--apagado); }
.msg.seguido:hover .hora-mini { display: inline; }

.cuerpo { min-width: 0; flex: 1; }
.linea { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.autor { color: var(--texto-fuerte); font-weight: 500; }
.hora { color: var(--apagado); font-size: 12px; }
.etiqueta-bot { background: var(--azul); color: #fff; font-size: 10px;
                font-weight: 600; padding: 1px 5px; border-radius: 3px;
                letter-spacing: .02em; }

.texto { white-space: pre-wrap; word-break: break-word; }
.texto b { font-weight: 700; color: var(--texto-fuerte); }
.texto code { background: var(--fondo-3); padding: 2px 4px; border-radius: 3px;
              font-family: Consolas, "Courier New", monospace; font-size: 14px; }
.texto .bloque { background: var(--fondo-3); border: 1px solid #2b2d31;
                 border-radius: 4px; padding: 10px; overflow-x: auto;
                 font-family: Consolas, "Courier New", monospace;
                 font-size: 14px; white-space: pre; margin: 6px 0; }
.texto .mencion { background: rgba(88,101,242,.3); color: var(--azul-claro);
                  border-radius: 3px; padding: 0 2px; font-weight: 500; }
.texto .cita { display: block; border-left: 4px solid var(--borde);
               padding-left: 10px; margin: 2px 0; color: var(--texto); }
.texto .spoiler { background: var(--fondo-3); color: transparent;
                  border-radius: 3px; cursor: pointer; }
.texto .spoiler:hover { color: var(--texto); }
.texto .emoji { width: 22px; height: 22px; vertical-align: -4px; }
.texto .marca { background: var(--borde); border-radius: 3px; padding: 0 3px; }

/* ------------------------------------------------------------- adjuntos */

.adjunto-img, .adjunto-video { max-width: 100%; max-height: 380px;
  border-radius: 8px; margin-top: 6px; display: block; }
.adjunto-fichero { display: inline-block; background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px;
  margin-top: 6px; color: var(--texto); }
.adjunto-fichero:hover { text-decoration: none; border-color: var(--azul); }
.adjunto-perdido { display: inline-block; background: rgba(242,63,67,.08);
  border: 1px solid rgba(242,63,67,.3); border-radius: 8px; padding: 8px 12px;
  margin-top: 6px; color: var(--apagado); font-size: 14px; }

@media (max-width: 640px) {
  .contenido { padding: 16px 12px 48px; }
  .lista th:nth-child(5), .lista td:nth-child(5) { display: none; }
  .msg { gap: 10px; }
}