/* ── usuarios.css — Vista de gestión de usuarios ─────────────────────────── */
/* Importar después de style.css en index.html                                */

/* ── Tarjeta de usuario ──────────────────────────────────────────────────── */
.user-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: .55rem;
  transition: background .15s, box-shadow .15s, transform .12s;
  animation: rowIn .3s both;
}

.user-card:hover {
  background: var(--row-hover);
  box-shadow: 0 4px 14px var(--shadow-soft);
  transform: translateY(-1px);
}

/* Info del usuario */
.user-info {
  flex: 1;
  min-width: 0;
}

/* Input inline para editar nombre */
.user-nombre-input {
  display: block;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  border: none;
  border-bottom: 1px dashed transparent;
  background: transparent;
  padding: 0 0 .1rem;
  outline: none;
  transition: border-color .15s;
}

.user-nombre-input::placeholder {
  font-weight: 400;
  color: var(--text-muted);
}

.user-nombre-input:hover {
  border-bottom-color: var(--border);
}

.user-nombre-input:focus {
  border-bottom-color: var(--accent);
}

.user-email {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .35rem;
  margin-top: .1rem;
}

.user-controls {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Selects de rol y estado — compactos y con color */
.user-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .3rem .75rem .3rem .6rem;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  background-repeat: no-repeat;
  background-position: right .4rem center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  padding-right: 1.6rem;
  transition: border-color .2s, box-shadow .2s;
}

.user-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}

/* Colores semánticos por rol */
.user-select.select-role {
  background-color: var(--info-bg);
  border-color: rgba(59,91,219,.35);
  color: var(--info-text);
}
.user-select.select-role:focus {
  border-color: rgba(59,91,219,.6);
  box-shadow: 0 0 0 3px rgba(59,91,219,.1);
}

/* Colores semánticos por estado */
.user-select.select-status[data-status="enabled"] {
  background-color: var(--success-bg);
  border-color: rgba(45,106,79,.35);
  color: var(--success-text);
}
.user-select.select-status[data-status="disabled"] {
  background-color: var(--danger-bg2);
  border-color: rgba(192,57,43,.35);
  color: var(--danger);
}
.user-select.select-status:focus {
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}

/* ── Staff de Destino Guaraní (reservas.staff) ──────────────────────────── */
.user-status-dot {
  font-size: .55rem;
  margin-left: .35rem;
  vertical-align: middle;
}

.btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(192,57,43,.35);
  background: var(--danger-bg2);
  color: var(--danger);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-icon-danger:hover {
  background: rgba(192,57,43,.18);
}
.btn-icon-danger:disabled {
  opacity: .5;
  cursor: default;
}

/* ── Sección "Nuevo usuario" — header mejorado ───────────────────────────── */
#view-usuarios .section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

#view-usuarios .section-title.with-count::after {
  content: attr(data-count);
  background: var(--bg2);
  border-radius: 20px;
  padding: .1rem .55rem;
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Botón guardar nuevo usuario — más compacto */
#view-usuarios .form-actions {
  padding-top: .4rem;
  padding-bottom: .5rem;
}

/* Estado vacío */
.users-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: .88rem;
}

.users-empty svg {
  display: block;
  margin: 0 auto .8rem;
  opacity: .35;
}

/* Feedback de guardado inline (reemplaza alert) */
.user-feedback {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .74rem;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.user-feedback.show { opacity: 1; }
.user-feedback.ok   { background: var(--success-bg); color: var(--success-text); }
.user-feedback.err  { background: var(--danger-bg2); color: var(--danger); }

.usuarios-view {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

/* ── Tabs: App / Selección de asientos ───────────────────────────────────── */
.usuarios-tabs {
  display: flex;
  gap: .3rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .3rem;
  margin-bottom: 1.25rem;
}

.usuarios-tab {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Roboto', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  padding: .55rem .8rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}

.usuarios-tab:hover {
  color: var(--text);
}

.usuarios-tab.active {
  background: var(--row-bg);
  color: var(--accent);
  box-shadow: 0 2px 8px var(--shadow-soft);
}

.usuarios-tab-panel {
  animation: rowIn .25s both;
}