/* ============================================================================
   SMARTIN JOBS - Equipos y etiquetas.

   Dos cosas distintas en un mismo fichero porque van juntas en la cabeza de
   quien usa esto: "que se vea quien es quien" y "que las tareas se lean de un
   vistazo". Todo con unidades relativas y rejillas que se pliegan solas: la
   pantalla se usa igual en un movil que en el monitor de la oficina.
   ========================================================================== */

/* ---- la pantalla de equipos --------------------------------------------- */

.sj-eq__oculto { display: none !important; }

/* El listado de serie se esconde desde el PRIMER pintado, no cuando el guion
   termina de trabajar. Antes se veia la pantalla antigua y, medio segundo
   despues, cambiaba de golpe a la nueva: ese parpadeo es lo que se queria
   quitar. El selector se apoya en la clase que la aplicacion pone en <main>
   para cada ruta (`teams.index`), que es un unico token y por eso casa con ~=.

   Si el asistente no respondiera, `sj-eq-sin-datos` devuelve la vista de serie:
   mejor la pantalla antigua que ninguna. */
main[class~="teams.index"] .card { display: none; }
html.sj-eq-sin-datos main[class~="teams.index"] .card { display: block; }

.sj-eq {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.sj-eq__direccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: var(--sj-tinta, #0E1A2C);
}
.sj-eq__direccion .sj-eq__nombre { color: #fff; }
.sj-eq__direccion .sj-eq__nombre i { color: var(--sj-claro, #E8CB7A); }
.sj-eq__alcance {
  margin-left: auto;
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
}

/* Rejilla que se pliega sola: sin consultas de medios para el numero de
   columnas, lo decide el ancho disponible. */
.sj-eq__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.sj-eq__caja {
  padding: 1rem 1.05rem 1.1rem;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #E4DCCF);
  border-top: 3px solid var(--sj-azul, #B8862B);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(14, 26, 44, .05), 0 10px 24px rgba(14, 26, 44, .06);
  transition: transform 140ms cubic-bezier(.2, .7, .4, 1), box-shadow 140ms;
}
.sj-eq__caja:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(14, 26, 44, .07), 0 16px 34px rgba(14, 26, 44, .1);
}
html.dark .sj-eq__caja { background: #1B2C45; border-color: rgba(255,255,255,.12); }

.sj-eq__caja > header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .5rem;
}
.sj-eq__caja h3 {
  flex: 1;
  margin: 0;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sj-tinta, #0E1A2C);
}
html.dark .sj-eq__caja h3 { color: #F1ECE2; }
.sj-eq__cuenta {
  flex: none;
  font-size: .72rem;
  color: #8C8273;
  white-space: nowrap;
}
.sj-eq__desc {
  margin: 0 0 .7rem;
  font-size: .8rem;
  line-height: 1.5;
  color: #83796E;
}

.sj-eq__bloque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  padding-top: .6rem;
  border-top: 1px solid var(--sj-linea, #EEE7DB);
}
html.dark .sj-eq__bloque { border-color: rgba(255,255,255,.08); }
.sj-eq__rotulo {
  flex: 0 0 100%;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A39A8B;
}
.sj-eq__nada { font-size: .8rem; color: #A39A8B; }

.sj-eq__persona {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: 100%;
}
.sj-eq__avatar {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sj-eq__persona--jefe .sj-eq__avatar {
  width: 2rem;
  height: 2rem;
  font-size: .74rem;
  box-shadow: 0 0 0 2px var(--sj-claro, #E8CB7A);
}
.sj-eq__nombre {
  min-width: 0;
  font-size: .85rem;
  line-height: 1.25;
  color: var(--sj-tinta, #0E1A2C);
  overflow-wrap: anywhere;
}
html.dark .sj-eq__nombre { color: #E6DECF; }
.sj-eq__nombre i {
  display: block;
  font-style: normal;
  font-size: .68rem;
  color: #8C8273;
}

.sj-eq__pie {
  margin: 1.4rem 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: #83796E;
}
.sj-eq__ver {
  margin-left: .35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-azul, #B8862B);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- etiquetas al estilo de una lista de tareas moderna ------------------
   La almohadilla la pone el CSS, no el dato: asi el nombre guardado sigue
   siendo "dashboard" y se puede buscar y filtrar sin arrastrar el simbolo. */

.labels .tag,
.label-wrapper .tag {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: .12rem .5rem .12rem .42rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
}
.labels .tag::before,
.label-wrapper .tag::before {
  content: "#";
  margin-right: .12rem;
  opacity: .62;
  font-weight: 700;
}
/* El boton de quitar de dentro de la etiqueta no lleva almohadilla. */
.labels .tag .delete::before,
.label-wrapper .tag .delete::before { content: none; }

/* En el tablero las tarjetas son pequenas: etiquetas mas discretas para que no
   tapen el titulo, que es lo que se lee. */
.kanban-card .labels .tag,
.kanban-card .label-wrapper .tag {
  padding: .05rem .42rem .05rem .34rem;
  font-size: .66rem;
}

/* ---- que todo quepa en un movil ----------------------------------------- */

@media (max-width: 48rem) {
  .sj-eq { padding-left: .75rem; padding-right: .75rem; }
  .sj-eq__direccion { flex-direction: column; align-items: flex-start; }
  .sj-eq__alcance { margin-left: 0; }

  /* El tablero kanban de serie se sale a lo ancho en pantallas pequenas: que
     ruede el tablero, nunca la pagina entera. */
  .kanban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .kanban .bucket { scroll-snap-align: start; min-width: 15rem; }

  /* Las barras de herramientas de cada vista se apilan en vez de recortarse. */
  .project-header,
  .switch-view-container { flex-wrap: wrap; gap: .4rem; }

  /* Tablas anchas (vista Tabla) dentro de su propio desplazamiento. */
  .table-view, .has-horizontal-overflow { overflow-x: auto; }
}

/* Objetivos de pulsacion comodos con el dedo. Solo donde hace falta: una tarea
   que se marca sin querer es peor que un boton un poco mas grande. */
@media (pointer: coarse) {
  .sj-eq__ver { padding: .3rem 0; }
  .fancycheckbox, .task .fancycheckbox span { min-height: 1.6rem; }
}