/* Página del superusuario: misma paleta que el panel (tokens.css) y los
   mismos botones, avisos y etiquetas (componentes.css). */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-base);
    font-size: var(--tamanio-texto-base);
    line-height: 1.5;
}

h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: var(--tamanio-texto-xl); }
h2 { font-size: var(--tamanio-texto-md); }

.barra {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
    padding: var(--espaciado-lg) 16px var(--espaciado-md);
    max-width: 1100px;
    margin: 0 auto;
}

.volver { color: var(--color-texto-2); text-decoration: none; font-size: var(--tamanio-texto-sm); }
.volver:hover { color: var(--color-primario); }

.contenido {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 48px;
    display: grid;
    gap: var(--espaciado-xl);
}

/* ---- Alta ---- */
.alta {
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espaciado-lg);
}

.form-alta {
    margin-top: var(--espaciado-md);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--espaciado-md);
    align-items: end;
}

label {
    display: grid;
    gap: 4px;
    color: var(--color-texto-2);
    font-size: var(--tamanio-texto-sm);
}

input, textarea {
    width: 100%;
    font: inherit;
    color: var(--color-texto);
    background: var(--color-panel-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    min-height: var(--alto-toque);
    padding: 9px 12px;
}
input:focus, textarea:focus { border-color: var(--color-primario); }
textarea { min-height: 90px; resize: vertical; }

/* Los topes van sueltos en la grilla del formulario. */
.topes-alta { display: contents; }

.ayuda { grid-column: 1 / -1; margin: 0; color: var(--color-texto-3); font-size: var(--tamanio-texto-sm); }

.btn-borde, .btn-lleno { white-space: nowrap; }
.btn-lleno.btn-rojo { background: var(--color-error); border-color: var(--color-error); color: var(--color-sobre-error); }
.btn-peligro { color: var(--color-error); border-color: var(--color-error); }
.btn-peligro:hover { background: var(--color-error-suave); }

.aviso { margin: 0; }

/* ---- Lista ---- */
.lista-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-md);
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--espaciado-md);
}
.lista-cabecera input { max-width: 320px; }

.cuentas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaciado-sm); }

/* La barra de la izquierda dice el estado de un vistazo: verde activa,
   roja dada de baja. */
.cuenta {
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio-md);
    padding: var(--espaciado-md) var(--espaciado-lg);
    display: grid;
    gap: var(--espaciado-sm);
}
.cuenta.de-baja { border-left-color: var(--color-error); }

.cuenta-cabecera { display: flex; flex-wrap: wrap; gap: var(--espaciado-sm) var(--espaciado-md); align-items: baseline; }
.cuenta-email { font-weight: 600; font-size: var(--tamanio-texto-md); word-break: break-all; }
.cuenta-nombre { color: var(--color-texto-2); }

.baja-motivo { margin: 0; color: var(--color-error); font-size: var(--tamanio-texto-sm); }
.invitado-en { margin: 0; font-size: var(--tamanio-texto-sm); }

.topes { display: flex; flex-wrap: wrap; gap: var(--espaciado-xs); margin: 0; padding: 0; list-style: none; }
.topes li {
    background: var(--color-panel-2);
    border-radius: var(--radio-sm);
    padding: 3px 10px;
    font-size: var(--tamanio-texto-sm);
    color: var(--color-texto-2);
}
.topes strong { color: var(--color-texto); font-weight: 600; }
.topes .lleno strong { color: var(--color-atencion); }

.dispositivos { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--tamanio-texto-sm); }
.dispositivos li { display: flex; flex-wrap: wrap; gap: var(--espaciado-sm); align-items: center; color: var(--color-texto-2); }
.dispositivos .sin-sesion { opacity: 0.6; }

.acciones { display: flex; flex-wrap: wrap; gap: var(--espaciado-xs); }

.vacio { color: var(--color-texto-2); padding: var(--espaciado-lg) 0; }

/* ---- Diálogo ---- */
dialog {
    width: min(440px, calc(100vw - 32px));
    background: var(--color-panel);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espaciado-lg);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* minmax(0, 1fr): un email larguísimo en el título no ensancha el diálogo
   ni empuja los botones afuera. */
#form-dialogo, #dialogo-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaciado-md); }
#dialogo-titulo { overflow-wrap: anywhere; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: var(--espaciado-sm); }

@media (prefers-reduced-motion: no-preference) {
    dialog[open] { animation: aparecer 0.15s ease-out; }
    @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
}