/*
 * Oficina -- consola de operaciones.
 *
 * Un solo archivo a proposito: Propshaft sirve los assets tal cual, sin
 * bundling, asi que partir esto en varios significaria varias peticiones y
 * tener que cuidar el orden de la cascada a mano.
 */

/* -- Tokens ------------------------------------------------------------- */

:root {
  --fondo:         #0e1014;
  --panel:         #15181f;
  --panel-alto:    #1c202a;
  --panel-hover:   #222734;
  --borde:         #262b36;
  --borde-claro:   #313848;
  --borde-suave:   #1e222c;

  --texto:         #e7eaf0;
  --tenue:         #939cad;
  --muy-tenue:     #6b7385;

  --acento:        #6ea8fe;
  --acento-fuerte: #8ebbff;
  --acento-tenue:  #6ea8fe22;

  --ok:            #46c46a;
  --trabajo:       #e0a72c;
  --error:         #f7736a;

  --radio:         10px;
  --radio-chico:   7px;
  --sombra:        0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 24%);

  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* -- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-fuerte); text-decoration: underline; }

::selection { background: var(--acento-tenue); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* -- Estructura --------------------------------------------------------- */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 54px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.logo {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radio-chico);
}

.barra__derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tenue);
  font-size: 13px;
}

/* La conversacion al centro, los empleados al costado. */
.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  min-height: 0;
}

/* -- Conversacion con el gerente ---------------------------------------- */

.chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border-right: 1px solid var(--borde);
}

.chat__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--borde-suave);
}

.chat__titulo { font-size: 15px; }

.chat__mensajes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* El bloque de escritura entero: la raya y el respiro van aca, no en el
   formulario, para que las fichas de los archivos elegidos queden adentro del
   bloque y no pegadas contra la linea divisoria. */
.compositor {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--borde-suave);
}

.chat__form {
  display: flex;
  gap: 10px;
}

/* -- Mensajes ----------------------------------------------------------- */

.msg {
  display: flex;
  flex-direction: column;
  max-width: min(680px, 78%);
}

/* "in" es lo que entra al sistema, o sea lo que escribe Felipe: va a la
   derecha, como en cualquier chat. "out" es la respuesta del gerente. */
.msg--in  { align-self: flex-end; align-items: flex-end; }
.msg--out { align-self: flex-start; align-items: flex-start; }

/* Salvo el canal "sistema", que tambien "entra" pero no lo escribio Felipe:
   es un empleado avisando que termino. Puesto a la derecha se lee como si lo
   hubiera dicho el, y entonces la respuesta del gerente parece no existir.
   Va a la izquierda como todo lo que no sale de su teclado. */
.msg--sistema { align-self: flex-start; align-items: flex-start; }

.msg__burbuja {
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

/* -- Markdown adentro de una burbuja ------------------------------------ */

/* Los agentes contestan en markdown. Todo esto es para que se lea como un
   mensaje y no como un documento: sin margenes que separen de mas, sin
   titulos gigantes, y con el codigo distinguible sin gritar. */
.msg__burbuja > :first-child { margin-top: 0; }
.msg__burbuja > :last-child  { margin-bottom: 0; }

.msg__burbuja p { margin: 0 0 .6em; }

.msg__burbuja ul,
.msg__burbuja ol { margin: 0 0 .6em; padding-left: 1.35em; }

.msg__burbuja li { margin: .15em 0; }

.msg__burbuja h1,
.msg__burbuja h2,
.msg__burbuja h3,
.msg__burbuja h4 {
  margin: .8em 0 .35em;
  font-size: 1em;
  font-weight: 600;
}

.msg__burbuja code {
  padding: .1em .35em;
  border-radius: 5px;
  background: rgb(255 255 255 / 8%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .89em;
}

.msg__burbuja pre {
  margin: 0 0 .6em;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 8px;
  background: rgb(0 0 0 / 32%);
}

/* Adentro de un bloque el codigo ya tiene su fondo: no lleva el suyo. */
.msg__burbuja pre code { padding: 0; background: none; }

.msg__burbuja blockquote {
  margin: 0 0 .6em;
  padding-left: .8em;
  border-left: 2px solid var(--borde-claro);
  color: var(--tenue);
}

.msg__burbuja table {
  margin: 0 0 .6em;
  border-collapse: collapse;
  font-size: .93em;
}

.msg__burbuja th,
.msg__burbuja td {
  padding: 4px 9px;
  border: 1px solid var(--borde);
  text-align: left;
}

.msg__burbuja hr {
  margin: .7em 0;
  border: 0;
  border-top: 1px solid var(--borde);
}

/* En la burbuja azul (lo que escribe Felipe) el celeste de link no contrasta. */
.msg--in .msg__burbuja a { color: #dce8ff; text-decoration: underline; }
.msg--in .msg__burbuja code { background: rgb(255 255 255 / 16%); }

.msg--in .msg__burbuja {
  border-color: transparent;
  border-bottom-right-radius: 5px;
  background: linear-gradient(160deg, #37649f, #2d5387);
  color: #f2f6ff;
}

.msg--out .msg__burbuja { border-bottom-left-radius: 5px; }

.msg--sistema .msg__burbuja {
  background: var(--panel-alto);
  border-style: dashed;
  color: var(--tenue);
  font-size: 13px;
  /* Un mensaje de sistema puede ser `in` (un empleado avisando que termino) y
     entonces hereda de `.msg--in` la esquina recortada del lado derecho. Como
     ahora va a la izquierda, la colita tiene que ir del otro lado. */
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 5px;
}

/* A que respondio Felipe en Telegram: una linea, tenue, arriba de la burbuja. */
.msg__cita {
  max-width: 100%;
  margin-bottom: 4px;
  padding: 0 4px;
  overflow: hidden;
  color: var(--muy-tenue);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 0 4px;
  color: var(--muy-tenue);
  font-size: 11.5px;
}

.canal {
  padding: 1px 7px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* La linea de "en que anda": se distingue de un mensaje porque no es algo que
   alguien dijo, es el sistema mostrando trabajo en curso. */
.paso {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 13px;
  border: 1px dashed var(--borde);
  border-radius: 12px;
  color: var(--tenue);
  font-size: 12.5px;
}

.paso__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--trabajo);
  animation: latido 1.8s ease-out infinite;
}

.paso__texto { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .paso__punto { animation: none; }
}

/* -- Panel de empleados ------------------------------------------------- */

/* Una fila por hijo: gerente, cabecera y lista. El `1fr` tiene que caer en la
   lista, que es lo unico que crece y scrollea. Si agregas un hijo y no agregas
   su fila, el `1fr` se corre al bloque de arriba: ese engorda con todo el
   sobrante y la lista se va contra el fondo del panel. */
.empleados {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  background: var(--panel);
}

.empleados__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 20px 12px;
}

.empleados__titulo {
  color: var(--tenue);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empleados__conteo { color: var(--muy-tenue); font-size: 12px; }

.empleados__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}

.empleados__lista {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 14px 18px;
  overflow-y: auto;
}

/* El gerente vive fuera de la lista, arriba de todo. Su bloque le da el peso
   visual que corresponde a lo que es -- con quien hablas, no uno mas del
   equipo -- y ademas lo saca del orden alfabetico, donde caia entre medio. */
.gerente {
  padding: 14px 14px 0;
}

/* La barra de acento va como sombra INTERIOR y no como `border-left`: un borde
   de 3px sobre una tarjeta redondeada no acompana la curva y se ve como una
   astilla suelta al costado, ademas de correr el contenido 2px respecto de las
   otras tarjetas. La sombra respeta el radio y no ocupa lugar. */
.gerente .empleado {
  box-shadow: inset 3px 0 0 var(--acento);
  border-color: var(--acento-tenue);
}

/* Separa al gerente del titulo EMPLEADOS que viene abajo, sin meter una regla
   horizontal: el espacio ya dice que son dos cosas distintas. */
.gerente + .empleados__cabecera {
  padding-top: 16px;
}

/* La tarjeta es un enlace: hay que apagarle el subrayado y el color de link
   (`a:hover` de mas arriba le gana en especificidad a una sola clase, asi
   que el estado hover necesita su propio `color: inherit` para no heredar
   el celeste de link), y marcar cual conversacion esta abierta. */
.empleado {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel-alto);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.empleado:hover {
  background: var(--panel-hover);
  border-color: var(--borde-claro);
  color: inherit;
  text-decoration: none;
}

.empleado--abierto {
  border-color: var(--acento);
  background: var(--panel-hover);
}

/* Sin esto, pasar el mouse por la tarjeta abierta le devuelve el borde
   neutro de `.empleado:hover` (misma especificidad, pero declarado antes) y
   el indicador de "conversacion abierta" desaparece justo cuando el
   usuario la esta mirando. */
.empleado--abierto:hover {
  border-color: var(--acento);
  background: var(--panel-hover);
}

.empleado__fila { display: flex; align-items: center; gap: 9px; }

.empleado__nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empleado__tarea {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 7px 0 0;
  color: var(--tenue);
  font-size: 12.5px;
}

.empleado__pie {
  display: flex;
  gap: 12px;
  margin-top: 9px;
  color: var(--muy-tenue);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* -- Estado ------------------------------------------------------------- */

.punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muy-tenue);
}

.punto--corriendo {
  background: var(--trabajo);
  box-shadow: 0 0 0 0 rgb(224 167 44 / 60%);
  animation: latido 1.8s ease-out infinite;
}

.punto--encolada,
.punto--esperando_aprobacion { background: var(--acento); }
.punto--lista   { background: var(--ok); }
.punto--fallida { background: var(--error); }

@keyframes latido {
  70%  { box-shadow: 0 0 0 7px rgb(224 167 44 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(224 167 44 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .punto--corriendo { animation: none; }
  .chat__mensajes { scroll-behavior: auto; }
}

.pastilla {
  padding: 2px 9px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--panel);
  color: var(--tenue);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pastilla--corriendo { border-color: #6a5117; background: #2a2210; color: #f0cf7a; }
.pastilla--lista     { border-color: #23532f; background: #12251a; color: #7ee39a; }
.pastilla--fallida   { border-color: #5d2a27; background: #291614; color: #ff9a92; }
.pastilla--libre     { color: var(--muy-tenue); }

/* -- Controles ---------------------------------------------------------- */

.campo {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campo::placeholder { color: var(--muy-tenue); }

.campo:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

.boton {
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--acento);
  color: #0b0f16;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}

.boton:hover  { filter: brightness(1.09); }
.boton:active { filter: brightness(0.95); }

.boton--tenue {
  padding: 6px 12px;
  border-color: var(--borde);
  background: transparent;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 500;
}

.boton--tenue:hover {
  background: var(--panel-alto);
  color: var(--texto);
  filter: none;
}

/* -- Vacios ------------------------------------------------------------- */

.vacio {
  padding: 22px 16px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  color: var(--tenue);
  font-size: 12.5px;
  text-align: center;
}

.vacio--chat {
  margin: auto;
  max-width: 380px;
  border: none;
  font-size: 13.5px;
}

/* -- Acceso ------------------------------------------------------------- */

.acceso {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
}

.acceso__caja {
  width: 100%;
  max-width: 370px;
  padding: 30px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--sombra);
}

.acceso__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
}

.acceso__marca .logo { width: 30px; height: 30px; }

.acceso__form { display: flex; flex-direction: column; gap: 11px; }
.acceso__form .campo { flex: none; width: 100%; }
.acceso__form .boton { margin-top: 5px; }

.acceso__pie { margin: 18px 0 0; text-align: center; font-size: 12.5px; }

/* -- Avisos ------------------------------------------------------------- */

.aviso {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font-size: 13px;
}

.aviso--error { border-color: #5d2a27; background: #291614; color: #ff9a92; }
.aviso--ok    { border-color: #23532f; background: #12251a; color: #7ee39a; }

/* -- Angosto ------------------------------------------------------------ */

@media (max-width: 860px) {
  .tablero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .chat { border-right: none; }

  .empleados {
    grid-template-rows: auto auto auto;
    max-height: 42dvh;
    border-top: 1px solid var(--borde);
  }

  .empleados__lista { flex-direction: row; overflow-x: auto; }
  .empleado { min-width: 230px; }
}

/* Turbo agrega tarjetas y mensajes sin quitar el cartel de "todavia no hay
   nada". Que el cartel se muestre solo cuando de verdad esta solo evita
   tener que coordinar dos acciones de stream por cada alta. */
.empleados__lista .vacio:not(:only-child),
.chat__mensajes .vacio:not(:only-child) { display: none; }

/* `turbo_stream_from` inserta un <turbo-cable-stream-source> en el DOM. Es
   invisible pero por defecto participa del layout, y adentro de un grid se
   come una fila: en el tablero empujaba las tarjetas y los mensajes al fondo
   de la columna. No tiene nada que mostrar, asi que no debe ocupar lugar. */
turbo-cable-stream-source { display: none; }

/* La conversacion se lee de abajo hacia arriba: con pocos mensajes tienen que
   quedar junto al campo de escritura, no flotando arriba. `margin-top: auto`
   en el primero y no `justify-content: flex-end` en el contenedor, porque este
   ultimo recorta el principio cuando el contenido desborda. */
/* El segundo selector cubre el momento en que Turbo agrega el primer mensaje:
   el cartel de vacio sigue en el DOM (oculto) y se lleva el :first-child. */
.chat__mensajes > :first-child,
.chat__mensajes > .vacio + * { margin-top: auto; }

.msg__adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.adjunto--imagen img {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: .5rem;
  object-fit: cover;
}

.adjunto--archivo {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  text-decoration: none;
}

.adjunto__peso {
  font-size: .8em;
  opacity: .7;
}

/* -- Adjuntar archivos -------------------------------------------------- */

/* El input nativo se esconde pero NO con display:none ni visibility:hidden:
   asi deja de ser enfocable con el teclado y el label pierde su target. Se lo
   colapsa a un punto adentro del label, que es clickeable y sigue anunciandose
   bien en un lector de pantalla. */
.clip__entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.clip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--tenue);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.clip:hover {
  background: var(--panel-hover);
  border-color: var(--borde-claro);
  color: var(--texto);
}

/* El foco del teclado cae en el input escondido, asi que el anillo lo tiene
   que dibujar el label. */
.clip:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
  color: var(--texto);
}

.clip svg {
  width: 18px;
  height: 18px;
}

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--panel-alto);
  font-size: 12.5px;
}

.ficha__mini {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: cover;
}

.ficha__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha__peso {
  flex: 0 0 auto;
  color: var(--muy-tenue);
  font-size: 11.5px;
}

.ficha__x {
  flex: 0 0 auto;
  padding: 2px 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muy-tenue);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.ficha__x:hover {
  background: var(--panel-hover);
  color: var(--texto);
}

/* Un archivo que no va a entrar se ve distinto desde antes de mandarlo. */
.ficha--pesada {
  border-color: #5a2b30;
  background: #2a1a1d;
}

.ficha--pesada .ficha__peso { color: var(--error); }

/* -- Contexto de la sesion ---------------------------------------------- */

.chat__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* No es un limite del modelo: es cuanto arrastra la sesion de este empleado
   hoy. Solo sube, hasta que se compacte. */
.contexto {
  color: var(--muy-tenue);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.contexto strong {
  color: var(--tenue);
  font-weight: 600;
}

.contexto--alto strong { color: var(--trabajo); }

.chat__acciones .boton--tenue { padding: 5px 11px; font-size: 12px; }