/* ============================================================================
   Accesos: quien es quien y que puede hacer (sj-accesos.js).

   Una lista y un formulario. Nada de tarjetas grandes ni color: esta pantalla
   se toca tres veces al ano y lo que importa es leer de un vistazo quien manda.
   El unico color es el del nivel, y solo porque distinguirlo rapido es el
   sentido de la pantalla.
   ========================================================================== */
#sj-accesos { margin: 26px 0 40px; }

.sj-acc__cab h2 {
  margin: 0 0 4px;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-acc__cab p {
  margin: 0 0 16px;
  color: var(--sj-tinta-2, #60738a);
  font-size: 0.92em;
}

.sj-acc__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio, 6px);
  background: var(--sj-papel, #fff);
  overflow: hidden;
}
.sj-acc__p {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sj-linea, #dce5ef);
}
.sj-acc__p:last-child { border-bottom: 0; }

.sj-acc__cara { width: 30px; height: 30px; border-radius: 50%; }
.sj-acc__nom { display: flex; flex-direction: column; line-height: 1.25; }
.sj-acc__nom small { color: var(--sj-tinta-3, #8094aa); font-size: 0.82em; }

.sj-acc__rol {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.sj-acc__rol--dueno   { color: var(--sj-azul, #087aa8); }
.sj-acc__rol--admin   { color: var(--sj-ambar, #9a6b12); }
.sj-acc__rol--usuario { color: var(--sj-tinta-3, #8094aa); }

.sj-acc__sel {
  padding: 5px 8px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.86em;
}
.sj-acc__sel:disabled { opacity: 0.5; }

/* ------------------------------------------------------------------- alta */

.sj-acc__alta {
  padding: 18px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio, 6px);
  background: var(--sj-fondo, #f5f8fc);
}
.sj-acc__alta h3 {
  margin: 0 0 12px;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.1em;
  font-weight: 400;
}
.sj-acc__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.sj-acc__campos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sj-tinta-2, #60738a);
}
.sj-acc__campos input,
.sj-acc__campos select {
  padding: 7px 10px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0b1930);
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}
.sj-acc__campos input:focus,
.sj-acc__campos select:focus {
  outline: none;
  border-color: var(--sj-azul, #087aa8);
}

.sj-acc__nota,
.sj-acc__cerrado {
  margin: 12px 0 0;
  color: var(--sj-tinta-2, #60738a);
  font-size: 0.86em;
}
.sj-acc__cerrado {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--sj-ambar, #9a6b12);
  background: var(--sj-papel, #fff);
}

.sj-acc__crear {
  margin-top: 12px;
  padding: 8px 18px;
  border: 1px solid var(--sj-azul, #087aa8);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}
.sj-acc__crear:hover { background: var(--sj-azul-alto, #066288); }

.sj-acc__estado {
  margin-left: 12px;
  font-size: 0.86em;
  color: var(--sj-tinta-2, #60738a);
}
.sj-acc__estado--mal { color: var(--sj-rojo, #c0444a); }