/*
 * BackOffice de QuantumChat.
 *
 * La paleta sale de la marca real, no inventada: el fondo y los dos acentos son los
 * del favicon del producto (`#0a0e17`, `#3fd9c5`, `#7b8cff`), y el logotipo es el
 * atomo con la Q. Un panel interno con colores distintos a los del producto es como
 * se acaba dudando de si estas en el sitio correcto.
 *
 * Sin fuentes externas: la pila del sistema. Cargar una fuente de un CDN en un panel
 * de administracion es una peticion a un tercero desde la pantalla que mas cosas ve.
 */

:root {
  --fondo:        #0a0e17;
  --fondo-2:      #121826;
  --fondo-3:      #182238;
  --borde:        #23304a;
  --texto:        #e9eef7;
  --texto-suave:  #9aa8bf;
  --turquesa:     #3fd9c5;
  --indigo:       #7b8cff;
  --peligro:      #ff7a7a;
  --alerta:       #fbbf24;
  --ok:           #4ade80;
}

* { box-sizing: border-box; }

/*
 * ESTO NO ES OPCIONAL Y CUESTA UNA TARDE ENTENDERLO.
 *
 * El atributo `hidden` esconde un elemento porque el navegador le aplica
 * `display: none` en su hoja de estilos por defecto. Pero CUALQUIER regla de autor
 * que fije `display` gana sobre esa, aunque el elemento tenga `hidden`. Aqui pasaba
 * con `.entrada { display: flex }`: el JavaScript ponia `hidden` correctamente al
 * entrar, y la pantalla de login SEGUIA VISIBLE encima del panel.
 *
 * El sintoma enganaba del todo, porque parecia que el JavaScript no hacia su
 * trabajo cuando el problema estaba aqui.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- entrada ------------------------------------------------------------ */

.entrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(123, 140, 255, .16), transparent 60%),
    var(--fondo);
}

.tarjeta-entrada {
  width: 100%;
  max-width: 360px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
}

.tarjeta-entrada .logo { margin-bottom: 12px; }
.tarjeta-entrada h1 { margin: 0; font-size: 22px; letter-spacing: .3px; }
.tarjeta-entrada .sub { margin: 4px 0 24px; color: var(--texto-suave); font-size: 13px; }
.tarjeta-entrada label {
  display: block; text-align: left; margin: 14px 0 6px;
  font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .6px;
}
.tarjeta-entrada .pie { margin: 18px 0 0; font-size: 12px; color: var(--texto-suave); }

input[type="text"], input[type="password"], input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-size: 15px;
}
input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }

button {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--turquesa);
  color: #06231f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
#boton-entrar { width: 100%; margin-top: 22px; }

button.secundario { background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde); }
button.peligro { background: transparent; color: var(--peligro); border: 1px solid var(--peligro); padding: 5px 10px; font-size: 13px; }
button.peligro:hover:not(:disabled) { background: rgba(255, 122, 122, .12); }

/* --- panel -------------------------------------------------------------- */

.cabecera {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
}
.cabecera .sep { color: var(--texto-suave); }
.cabecera .titulo-seccion { color: var(--texto-suave); }
.cabecera .hueco { flex: 1; }
.cabecera .quien { font-size: 13px; color: var(--texto-suave); }

.pestanas { display: flex; gap: 4px; padding: 0 20px; background: var(--fondo-2); border-bottom: 1px solid var(--borde); }
.pestana {
  background: transparent; color: var(--texto-suave);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 10px 14px; font-weight: 500;
}
.pestana.activa { color: var(--turquesa); border-bottom-color: var(--turquesa); }

.contenido { padding: 22px 20px 60px; max-width: 1200px; margin: 0 auto; }
.barra { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cuenta { color: var(--texto-suave); font-size: 13px; margin-left: auto; }
.nota { color: var(--texto-suave); font-size: 13px; margin: 0 0 16px; }

/* --- tablas ------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.tabla th {
  text-align: left; padding: 10px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-suave); background: var(--fondo-3);
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: rgba(123, 140, 255, .05); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.atenuado { color: var(--texto-suave); }
.vacio { text-align: center; color: var(--texto-suave); padding: 28px 12px; }
.fila-alerta td:nth-child(3) { color: var(--alerta); }

/* --- alta y avisos ------------------------------------------------------ */

/*
 * UNA SOLA REGLA PARA LAS DOS CAJAS, no dos iguales.
 *
 * `.ficha` (el rango vigente) y `.formulario-alta` (el que lo cambia, y el de alta de
 * usuario) tienen que leerse como mitades de lo mismo. Escrito dos veces, cambiar una
 * deja la otra atras y nada avisa: es el mismo argumento por el que los limites de la
 * politica se piden al servidor en vez de copiarlos al panel.
 */
.formulario-alta, .ficha {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 10px; padding: 16px; margin-bottom: 16px; max-width: 420px;
}
.formulario-alta label { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .6px; }
.acciones-alta { display: flex; gap: 8px; margin-top: 16px; }

.error { color: var(--peligro); font-size: 13px; margin: 12px 0 0; }
.aviso {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .35); color: var(--ok);
}
.aviso-error { background: rgba(255, 122, 122, .12); border-color: rgba(255, 122, 122, .4); color: var(--peligro); }

/* --- politica de nombres ------------------------------------------------ */

/* La caja de `.ficha` se declara arriba junto a `.formulario-alta`, que es la misma. */
.ficha .etiqueta { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .6px; }
.ficha .dato { margin: 6px 0 0; font-size: 20px; font-weight: 600; color: var(--turquesa); }
.ficha .nota { margin: 12px 0 0; }

/* Son numeros de dos cifras: a ancho completo el campo promete otra cosa. */
#politica-minimo, #politica-maximo { max-width: 120px; }

@media (max-width: 700px) {
  .contenido { padding: 16px 12px 40px; }
  .tabla { font-size: 13px; }
  .cabecera .titulo-seccion, .cabecera .sep { display: none; }
}

/* --- confirmacion contextual (OP#196) ----------------------------------- */

/*
 * Es un `<dialog>` NATIVO: sin dependencias, con el foco atrapado y Escape gratis. Montar
 * un modal a mano habria significado escribir a mano la trampa de foco, que es donde se
 * cuela la accesibilidad rota y, peor, donde un Tab se escapa detras del velo y deja
 * pulsable justo el boton que el dialogo venia a proteger.
 */
.dialogo {
  background: var(--fondo-2);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  max-width: 34rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.dialogo::backdrop { background: rgba(4, 7, 13, .72); }
.dialogo h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.dialogo p { margin: .35rem 0; }
/* La consecuencia se destaca: es la frase que decide si alguien sigue o no. */
.dialogo .nota { color: var(--alerta); }

/* --- bloques plegables del detalle de autorizacion ---------------------- */

/*
 * Los permisos que una persona NO tiene son la mayoria, y desplegados convierten la
 * pantalla en una pared que nadie lee. Van plegados y con su cuenta en el resumen.
 */
#detalle-permisos details {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .5rem .75rem;
  margin: .5rem 0;
  background: var(--fondo-2);
}
#detalle-permisos summary { cursor: pointer; font-weight: 600; }
#detalle-permisos .nota { margin: .35rem 0 .35rem 1rem; }

/*
 * El aviso persistente lleva su boton de cerrar al lado. Sin `flex`, el boton cae debajo
 * del texto y se lee como otra cosa.
 */
#aviso { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
#aviso[hidden] { display: none; }