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

/* Pill de descripción centrado, reemplaza el título h1 de la vista.
   Mismo patrón visual que .fact-desc-pildora (facturas.css). */
.usuarios-desc-pildora {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text-mid);
  font-size: .8rem;
  line-height: 1.3;
  text-align: center;
}

/* ── Tarjeta de usuario ──────────────────────────────────────────────────── */
/* <details> nativo: colapsable accesible sin JS extra (teclado, lector de
   pantalla, aria-expanded automático). El estado abierto/cerrado lo maneja
   el navegador vía el atributo [open]. */
.user-card {
  display: block;
  padding: 0;
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: .6rem;
  transition: background .15s, box-shadow .15s, transform .12s;
  animation: rowIn .3s both;
}

.user-card:hover {
  box-shadow: 0 4px 14px var(--shadow-soft);
}

.user-card[open] {
  background: var(--row-hover);
}

/* Header = <summary>: quitar el marker/triángulo nativo del navegador,
   ya que usamos un chevron SVG propio que rota con [open]. */
.user-card-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.user-card-header::-webkit-details-marker,
.user-card-header::marker {
  display: none;
  content: "";
}

.user-card-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 14px;
}

/* Wrapper posiciona el dot de presencia como badge sobre el avatar
   (patrón estándar: absolute sobre un contenedor relative), en vez de
   depender de márgenes negativos ligados al gap del flex padre. */
.user-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--info-bg);
  color: var(--info-text);
  font-family: 'Roboto', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iniciales de respaldo: ocultas mientras la <img> carga bien; el atributo
   onerror inline las revela quitando la imagen rota (ver renderAvatar en
   usuarios.js). Sin avatar_url, no hay <img> en absoluto y esto no aplica. */
.user-avatar-fallback {
  display: none;
}

.user-avatar.fallback .user-avatar-fallback {
  display: block;
}

/* Dot de presencia (verde = conectado en los últimos 15 min), superpuesto
   sobre el borde inferior derecho del avatar. */
.user-presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: .6;
  border: 2px solid var(--row-bg);
}

.user-presence-dot.online {
  background: var(--success-text, #2d6a4f);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(45,106,79,.15);
}

/* Info del usuario: nombre + última conexión, siempre visibles */
.user-info {
  flex: 1;
  min-width: 0;
}

/* Chevron indicador de expandido/colapsado */
.user-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}

.user-card[open] .user-chevron {
  transform: rotate(180deg);
}

/* Cuerpo colapsable: correo + controles de rol/estado.
   Se anima con el patrón nativo de <details> (interpolate-size + calc-size),
   soportado en navegadores Chromium/Edge recientes. Donde no hay soporte,
   el contenido igual aparece/desaparece de forma instantánea y funcional
   — es una mejora progresiva, no una dependencia. */
.user-card-body {
  padding: 0 1.1rem 1rem;
  overflow: hidden;
}

@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }

  .user-card-body {
    height: 0;
    transition: height .22s ease, padding-block .22s ease, opacity .18s ease;
    opacity: 0;
    padding-block: 0;
  }

  .user-card[open] .user-card-body {
    height: auto;
    opacity: 1;
    padding-block: 0 1rem;
  }

  @starting-style {
    .user-card[open] .user-card-body {
      height: 0;
      opacity: 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: .7rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}

.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);
}

/* Wrapper: posiciona el <select> real invisible exactamente encima del
   badge visual, para que el toque caiga sobre el control nativo. Esto es
   más robusto que showPicker()/focus() solo, porque showPicker() no existe
   en Safari/iOS — con el select superpuesto, el tap abre el picker nativo
   en TODOS los navegadores sin depender de esa API. */
.user-field-wrap {
  position: relative;
  display: inline-flex;
}

.user-badge {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .3rem .8rem;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg2);
  color: var(--text);
  pointer-events: none; /* el select superpuesto recibe el toque, no el botón */
}

.user-badge.badge-role {
  background-color: var(--info-bg);
  border-color: rgba(59,91,219,.35);
  color: var(--info-text);
}

.user-badge.badge-status[data-status="enabled"] {
  background-color: var(--success-bg);
  border-color: rgba(45,106,79,.35);
  color: var(--success-text);
}
.user-badge.badge-status[data-status="disabled"] {
  background-color: var(--danger-bg2);
  border-color: rgba(192,57,43,.35);
  color: var(--danger);
}

.user-select-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
  /* No display:none / visibility:hidden: en iOS eso desactiva el select */
}

.user-select-hidden:focus-visible + .user-badge,
.user-field-wrap:has(.user-select-hidden:focus-visible) .user-badge {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Footer: última conexión (ahora dentro del header colapsado, debajo del
   nombre — sin border-top, ya que no separa secciones de la tarjeta) */
.user-card-footer {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .15rem;
  font-size: .76rem;
  color: var(--text-muted);
}

.user-card-footer svg {
  flex-shrink: 0;
  opacity: .7;
}

/* ── 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;
}

/* ── Tarjeta de usuario SIN colapso (reservas.staff) ─────────────────────
   Mismo lenguaje visual que .user-card (avatar, header, controles), pero
   todo el contenido siempre visible: no hay <details>/<summary> porque acá
   no hay nada que ocultar (sin selects de "estado" ni cuerpo secundario). */
.user-card-flat {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.1rem;
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: .6rem;
  transition: background .15s, box-shadow .15s;
  animation: rowIn .3s both;
}

.user-card-flat:hover {
  box-shadow: 0 4px 14px var(--shadow-soft);
}

.user-card-flat .user-info {
  flex: 1;
  min-width: 0;
}

.user-card-flat .user-email {
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
}

.user-card-flat .user-controls {
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: .5rem;
  position: relative;
}

/* El email es un contenedor flex: el ellipsis tiene que ir en el span
   interno (un nodo de texto suelto no se trunca dentro de un flex). */
.user-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card-flat .user-status-dot {
  flex-shrink: 0;
}

/* El feedback "✓ Guardado" se superpone en vez de empujar el layout */
.user-card-flat .user-feedback {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: .2rem;
  white-space: nowrap;
  z-index: 1;
}

/* Avatar de solo-iniciales (sin foto/dot: reservas.staff no tiene
   avatar_url ni last_seen). Mismo tamaño y tipografía que .user-avatar
   para que ambas vistas se vean del mismo módulo. */
.user-avatar-static {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--info-bg);
  color: var(--info-text);
  font-family: 'Roboto', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 480px) {
  .user-card-flat {
    flex-wrap: wrap;
    padding: .8rem .9rem;
  }
  .user-card-flat .user-info {
    flex: 1 1 0;
  }
  .user-card-flat .user-controls {
    justify-content: space-between;
    margin-left: calc(40px + .7rem); /* alinea con el email, no con el avatar */
    width: calc(100% - 40px - .7rem);
  }
  .usuarios-tab {
    padding: .55rem .4rem;
    font-size: .78rem;
    line-height: 1.2;
  }
  #view-usuarios .section-title {
    line-height: 1.3;
    flex-wrap: wrap;
  }
  .user-card-flat .user-controls .user-select {
    flex: 1;
    min-height: 36px;
    font-size: .82rem;
  }
  .user-card-flat .btn-icon-danger {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
}

/* ── Botón "Agregar usuario" / "Dar acceso" — toggle centrado ────────────
   <details> nativo, igual patrón que .user-card: sin JS de estado, con
   teclado y aria-expanded gratis. El <summary> se ve como un botón pill
   centrado; al abrirlo, el form aparece inline debajo. */
.user-add-toggle {
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: .9rem;
  overflow: hidden;
}

.user-add-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .8rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Roboto', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}

.user-add-summary::-webkit-details-marker,
.user-add-summary::marker {
  display: none;
  content: "";
}

.user-add-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.user-add-summary:hover {
  background: var(--surface-hover);
}

.user-add-summary svg {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.user-add-toggle[open] .user-add-summary svg {
  transform: rotate(45deg); /* + → × */
}

.user-add-body {
  padding: .2rem 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
  animation: rowIn .2s both;
}