* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f0f2f5; color:#333; }

/* Layout principal: sidebar + content */
#app { display:flex; height:100vh; }

/* Sidebar — ocupa toda la altura izquierda */
#sidebar {
  width:220px;
  min-width:220px;
  background:#1a3a2a;
  color:#fff;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  flex-shrink:0;
}
.sidebar-brand {
  font-size:1.2rem;
  font-weight:700;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
#sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:8px 0; flex:1; }
.nav-item {
  background:transparent;
  border:none;
  color:#fff;
  padding:10px 20px;
  text-align:left;
  font-size:.9rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .15s;
  width:100%;
}
.nav-item:hover { background:rgba(255,255,255,.1); }
.nav-item.active { background:rgba(255,255,255,.2); font-weight:600; }
.nav-icon { opacity:.6; width:20px; height:20px; flex:0 0 auto; display:inline-block; vertical-align:middle; }

/* Sidebar footer — usuario y logout */
#sidebar-footer {
  border-top:1px solid rgba(255,255,255,.1);
  padding:12px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}
#sidebar-user-info { font-size:.8rem; opacity:.8; }
#sidebar-logout {
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;
  padding:5px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:.8rem;
  text-align:center;
}
#sidebar-logout:hover { background:rgba(255,255,255,.25); }

/* Content area */
#content {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Header dentro del content */
#header {
  background:#fff;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:56px;
  border-bottom:1px solid #e0e0e0;
  flex-shrink:0;
}
#header h1 { font-size:1.1rem; font-weight:600; color:#1a3a2a; }
#auth-area { display:flex; gap:8px; align-items:center; }
#auth-area input { padding:6px 10px; border:1px solid #ccc; border-radius:4px; font-size:.85rem; }
#auth-status { font-size:.85rem; color:#666; }

/* Main scrollable content */
main {
  flex:1;
  padding:24px;
  overflow-y:auto;
}
.page { display:none; }
.page.active { display:block; }

/* Stats grid */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:24px;
}
.stat-card {
  background:#fff;
  border-radius:8px;
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  text-align:center;
}
.stat-value { font-size:2rem; font-weight:700; color:#1a3a2a; }
.stat-label { font-size:.8rem; color:#666; margin-top:4px; }

/* Info section */
.info-section {
  background:#fff;
  border-radius:8px;
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.info-section h3 { margin-bottom:12px; color:#1a3a2a; font-size:1rem; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.info-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eee; font-size:.85rem; }
.info-item .label { color:#666; }
.info-item .value { font-weight:600; color:#333; }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:.82rem; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
th, td { padding:10px; text-align:left; border-bottom:1px solid #eee; }
th { background:#f9f9f9; font-weight:600; color:#555; }
td button { padding:4px 10px; font-size:.75rem; background:#c62828; color:#fff; border:none; border-radius:4px; cursor:pointer; }
td button:hover { background:#b71c1c; }

/* User cards */
.user-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.user-card {
  background:#fff;
  border-radius:8px;
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.user-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.user-card-header h4 { font-size:1rem; color:#1a3a2a; }
.user-badge { font-size:.7rem; padding:2px 8px; border-radius:10px; font-weight:600; }
.badge-superadmin { background:#1a3a2a; color:#fff; }
.badge-admin { background:#1565c0; color:#fff; }
.badge-user { background:#757575; color:#fff; }
.user-field { font-size:.85rem; padding:4px 0; color:#555; }
.user-field strong { color:#333; }
.user-owner { color:#c62828; font-weight:600; }
.user-card-actions { display:flex; gap:8px; margin-top:12px; }
.user-card-actions button {
  padding:5px 12px;
  font-size:.8rem;
  border:none;
  border-radius:4px;
  cursor:pointer;
}
.btn-edit { background:#1565c0; color:#fff; }
.btn-edit:hover { background:#0d47a1; }
.btn-destroy { background:#c62828; color:#fff; }
.btn-destroy:hover { background:#b71c1c; }
.btn-assign { background:#2e7d32; color:#fff; }
.btn-assign:hover { background:#1b5e20; }

/* Role selector modal */
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
}
.modal {
  background:#fff;
  border-radius:8px;
  padding:24px;
  width:90%;
  max-width:400px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.modal h3 { margin-bottom:16px; color:#1a3a2a; }
.modal label { display:block; margin-bottom:8px; font-size:.85rem; }
.modal select, .modal input {
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:.85rem;
  margin-top:4px;
}
.modal-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }
.modal-actions button {
  padding:8px 16px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:.85rem;
}
.modal-actions .btn-cancel { background:#e0e0e0; color:#333; }
.modal-actions .btn-save { background:#1a3a2a; color:#fff; }

/* Forms */
.form-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.form-row label { display:flex; flex-direction:column; font-size:.8rem; gap:2px; }
.form-row input { padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:.85rem; }
button[type="submit"] { padding:6px 14px; background:#1a3a2a; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:.85rem; }
button[type="submit"]:hover { background:#245a3a; }

/* Toast */
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 20px; border-radius:6px; font-size:.9rem; opacity:0; transition:opacity .3s; }
#toast:empty { display:none; }

/* Search bar */
.search-bar {
  margin-bottom:16px;
  display:flex;
  gap:8px;
  align-items:center;
}
.search-bar input {
  flex:1;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:.85rem;
}

/* Empty state */
.empty-state {
  text-align:center;
  padding:40px;
  color:#999;
}

/* Responsive */
@media(max-width:768px) {
  #sidebar { width:170px; min-width:170px; }
  .sidebar-brand, .nav-item, #sidebar-footer { padding-left:12px; padding-right:12px; }
  main { padding:16px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .user-grid { grid-template-columns:1fr; }
}

/* Casilla del enlace de pruebas de los testers */
.tester-link-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed #c9a227;
  border-radius: 6px;
  background: #fffdf5;
}
.tester-link-input {
  width: 100%;
  padding: 8px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}
.tester-link-box .btn-primary {
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  background: #4caf50;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.tester-link-box .btn-primary:disabled {
  opacity: .6;
  cursor: default;
}
.tester-link-hint {
  margin: 6px 0 0;
  color: #666;
  font-size: 12px;
}

/* Badge de avisos pendientes en el menú (testers y comentarios) */
.pending-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #ffc107;
  color: #3a2a00;
  font-size: .7rem;
  font-weight: 700;
}

/* Comentarios de los probadores */
.comentario-texto {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f7f7f5;
  border-left: 3px solid #2f6b45;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0 8px;
  font-size: .9rem;
  color: #333;
}
.comentario-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .75rem;
  color: #777;
}
.comentario-nuevo {
  background: #2f6b45;
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 600;
}
.comentario-actions { display: flex; gap: 8px; margin-top: 10px; }
.comentario-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .8rem;
}
.btn-copy { background: #eceff1; color: #333; }
.btn-copy:hover { background: #dfe3e6; }
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:hover { background: #b71c1c; }
.btn-danger:disabled { opacity: .6; cursor: default; }

/* ---- Invitar a la prueba cerrada ---- */
.invite-warning { background:#fff6e5; border-left:4px solid #8a5a2b; padding:12px 14px; border-radius:8px; margin-bottom:18px; font-size:.88rem; line-height:1.55; color:#4a3a22; }
.invite-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.invite-panel { background:#fff; border:1px solid #e3e3e3; border-radius:12px; padding:16px; }
.invite-label { display:block; font-weight:600; font-size:.86rem; color:#333; margin:0 0 6px; }
.invite-label + .invite-input, .invite-label + .invite-textarea { margin-bottom:14px; }
.invite-input, .invite-textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d5d5d5; border-radius:8px; font-size:.92rem; font-family:inherit; }
.invite-textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.85rem; resize:vertical; line-height:1.5; }
.invite-message { font-family:inherit; font-size:.9rem; }
.invite-input:focus, .invite-textarea:focus { outline:2px solid #2f6b45; outline-offset:1px; border-color:#2f6b45; }
.invite-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:4px 0 12px; }
.invite-btn { padding:9px 16px; border-radius:8px; font-size:.9rem; font-weight:600; cursor:pointer; border:1px solid transparent; }
.invite-btn-primary { background:#2f6b45; color:#fff; }
.invite-btn-primary:hover:not(:disabled) { background:#245636; }
.invite-btn-primary:disabled { background:#b9c6bd; cursor:not-allowed; }
.invite-btn-secondary { background:#fff; color:#333; border-color:#cfcfcf; }
.invite-btn-secondary:hover { background:#f4f4f4; }
.invite-recipients { max-height:260px; overflow:auto; border:1px solid #eee; border-radius:8px; padding:8px; }
.invite-recipient { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:.85rem; }
.invite-recipient input { width:16px; height:16px; }
.invite-counter { margin:12px 0 8px; font-size:.88rem; }
.invite-hint { color:#777; font-size:.8rem; font-weight:400; }
.invite-confirm { display:flex; gap:10px; align-items:flex-start; font-size:.86rem; line-height:1.5; background:#f7f9f7; border:1px solid #e0e8e2; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.invite-confirm input { width:18px; height:18px; margin-top:2px; flex-shrink:0; }
.invite-result { border-radius:8px; padding:12px 14px; margin:12px 0; font-size:.86rem; line-height:1.55; }
.invite-result-ok { background:#e8f5e9; border:1px solid #a5d6a7; color:#245636; }
.invite-result-warn { background:#fff6e5; border:1px solid #f0c98a; color:#6b4a18; }
.invite-result code { background:rgba(0,0,0,.06); padding:1px 4px; border-radius:4px; }
.invite-result p { margin:0 0 8px; }
.invite-result p:last-child { margin-bottom:0; }
.invite-history { margin-top:26px; }
.invite-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.invite-table th, .invite-table td { text-align:left; padding:7px 8px; border-bottom:1px solid #eee; }
.invite-table th { background:#fafafa; font-weight:600; color:#444; }
.invite-warning#invite-blocked { background:#fdecea; border-left-color:#c62828; color:#7a1c1c; font-weight:600; }