/* ============================================================
   panel.css — Login staff, panel admin, control de ocupación,
   editor de estructura de asientos.
   ============================================================ */

/* ===== Acceso staff (botón discreto en home) ===== */
.staff-entry{
  position:fixed; right:calc(12px + var(--safe-right)); bottom:calc(20px + var(--safe-bottom));
  z-index:20; background:rgba(255,255,255,.85); border:1px solid #e5e7eb;
  border-radius:999px; padding:8px 14px; font-size:.78rem; font-weight:700;
  color:var(--muted); box-shadow:0 4px 12px rgba(17,24,39,.08); cursor:pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.staff-entry:hover{ background:#fff; color:var(--text); }
/* El botón es fixed y global (vive fuera de <main>), así que sin esto
   queda flotando sobre TODAS las vistas — incluidas las propias del
   panel de staff, donde no tiene sentido (ya estás adentro) y además
   tapa contenido real (ej. últimos asientos del croquis). Se oculta
   cuando la vista activa ya es de staff. */
main:has(#view-staff-login.active) ~ .staff-entry,
main:has(#view-panel.active) ~ .staff-entry,
main:has(#view-control.active) ~ .staff-entry,
main:has(#view-editor.active) ~ .staff-entry,
main:has(#view-passenger-list.active) ~ .staff-entry{
  opacity:0; transform:translateY(8px); pointer-events:none;
}

/* ===== Login staff ===== */
.staff-login-card{
  max-width:420px; margin:0 auto; background:var(--card); border-radius:16px;
  box-shadow:var(--shadow); padding:28px 22px; text-align:center;
}
.staff-login-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:14px;
  background:linear-gradient(145deg,#eef2ff,#e0e7ff); display:grid; place-items:center; color:#4f46e5;
}
.staff-login-msg{ color:var(--muted); font-size:.9rem; margin-bottom:18px; line-height:1.5; }
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; padding:12px;
  font-weight:600; width:100%; cursor:pointer;
}
.google-btn:hover{ background:#f9fafb; }

/* ===== Acceso denegado (logueado pero sin permisos en "staff") ===== */
.staff-denied-card{
  max-width:420px; margin:0 auto; background:var(--card); border-radius:16px;
  box-shadow:var(--shadow); padding:28px 22px; text-align:center;
  border:1.5px solid #fecaca;
}
.staff-denied-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:14px;
  background:linear-gradient(145deg,#fef2f2,#fee2e2); display:grid; place-items:center; color:#dc2626;
}
.staff-denied-msg{ color:var(--text); font-size:.9rem; margin-bottom:6px; line-height:1.5; font-weight:600; }
.staff-denied-hint{ color:var(--muted); font-size:.82rem; margin-bottom:18px; line-height:1.5; }

/* ===== Panel principal ===== */
.panel-header{ margin-bottom:20px; }
.panel-header-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel-user-info{ font-size:.82rem; color:var(--muted); }
.panel-role-badge{
  display:inline-flex; align-items:center; gap:5px; background:#e0e7ff; color:#3730a3; font-weight:700;
  font-size:.72rem; padding:5px 11px; border-radius:999px;
}
.panel-role-badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#4f46e5;
}
.panel-logout{ padding:8px 12px; font-size:.8rem; }

.panel-title{ text-align:left; margin-bottom:14px; font-size:1.2rem; }

/* Franja de KPIs rápidos (se llena desde JS) */
.panel-stats{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.panel-stat{
  flex:1; min-width:110px; background:var(--card); border-radius:14px; box-shadow:var(--shadow);
  padding:12px 14px; display:flex; flex-direction:column; gap:2px;
  animation: cardIn .35s ease both;
}
.panel-stat-value{ font-size:1.3rem; font-weight:800; line-height:1.1; color:var(--text); }
.panel-stat-label{ font-size:.72rem; color:var(--muted); font-weight:600; }
.panel-stat.accent .panel-stat-value{ color:#4f46e5; }

.panel-create-btn{ width:100%; justify-content:center; }

/* ===== Toggle "Ver archivados" ===== */
#panelArchivedToggle{ margin-bottom:12px; }
.panel-archived-chip{
  display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #e5e7eb;
  border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:700; color:var(--muted);
  cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.panel-archived-chip:hover{ border-color:#d1d5db; color:var(--text); }
.panel-archived-chip.active{ background:#111827; border-color:#111827; color:#fff; }

.panel-section-sep{
  display:flex; align-items:center; gap:10px; margin:18px 0 10px; color:var(--muted);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.panel-section-sep::before, .panel-section-sep::after{
  content:""; flex:1; height:1px; background:#e5e7eb;
}

/* ===== Tarjeta de viaje ===== */
.panel-trip-card{
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-radius:16px; box-shadow:var(--shadow);
  padding:16px; margin-bottom:12px;
  border-left:4px solid #60a5fa;
  animation: cardIn .35s ease both;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.panel-trip-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(17,24,39,.12); }
.panel-trip-card.doble-piso{ border-left-color:#f59e0b; }
.panel-trip-card.inactive{ opacity:.58; }
.panel-trip-card.inactive:hover{ transform:none; box-shadow:var(--shadow); }

.panel-trip-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }

.panel-trip-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(145deg, #eef2ff, #e0e7ff); color:#4f46e5;
  box-shadow: 0 3px 10px rgba(79,70,229,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
.panel-trip-icon svg{ width:20px; height:20px; }
.panel-trip-card.doble-piso .panel-trip-icon{
  background: linear-gradient(145deg, #fef3c7, #fde68a); color:#92400e;
  box-shadow: 0 3px 10px rgba(180,131,3,.16), inset 0 1px 0 rgba(255,255,255,.6);
}

.panel-trip-info{ flex:1; min-width:0; }
.panel-trip-name{
  font-weight:800; font-size:1rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; margin-bottom:2px;
}
.panel-trip-meta{ font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.panel-trip-meta .dot-sep::before{ content:"·"; margin-right:6px; color:#d1d5db; }

.panel-trip-status{
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px;
}
.panel-trip-status.active{ background:#d1fae5; color:#065f46; }
.panel-trip-status.active::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#10b981;
  animation: statusPulse 2s ease-in-out infinite;
}
.panel-trip-status.inactive{ background:#f3f4f6; color:#6b7280; }
.panel-trip-status.inactive::before{ content:""; width:6px; height:6px; border-radius:50%; background:#9ca3af; }
@keyframes statusPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(16,185,129,.45); }
  50%{ box-shadow:0 0 0 4px rgba(16,185,129,0); }
}

.panel-trip-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.panel-trip-actions .btn{ padding:9px 13px; font-size:.83rem; }
.panel-trip-actions .btn-primary-action{ flex:1 1 auto; min-width:140px; }
.panel-trip-actions .btn.icon-only{ padding:9px 10px; flex-shrink:0; }
.panel-trip-actions .btn.icon-only svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  .panel-trip-status.active::before{ animation:none; }
}

/* ===== Crear viaje ===== */
.create-trip-form .field{ margin-bottom:14px; }
.create-trip-form select{
  border:1px solid #e5e7eb; border-radius:10px; padding:12px; font-size:1rem;
  background:#fff; color:var(--text); width:100%;
}
.field-hint{
  display:block; margin-top:6px; font-size:.78rem; color:var(--muted);
}

/* ===== Tabs de planta (control / editor) ===== */
.planta-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.planta-tabs .btn{ padding:8px 14px; font-size:.85rem; }
.planta-tabs .btn.active-tab{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== Control de ocupación ===== */
.control-seat-label{
  font-size:.62rem; color:var(--muted); text-align:center; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

/* Asiento ocupado (solo en el grid de control): número + nombre apilados
   dentro del mismo botón, sin romper la grilla 2+2 (evita agregar
   elementos hermanos al lado del botón, que desalineaban las columnas). */
#grid-control .seat.ocupado{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; line-height:1.1; padding:4px 2px;
}
.control-seat-num{ font-size:.85rem; font-weight:800; }
.control-seat-name{
  font-size:.62rem; font-weight:600; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.control-move-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  padding:12px calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom));
  background:#111827; color:#fff;
}
.control-move-bar-inner{ max-width:560px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.control-move-text{ font-size:.85rem; font-weight:600; }

/* ===== Action sheet (asiento ocupado: mover/liberar) ===== */
.action-sheet{
  position:fixed; inset:0; background:rgba(17,24,39,.4); z-index:100;
  display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.action-sheet.show{ opacity:1; pointer-events:auto; }
.action-sheet-content{
  background:#fff; border-radius:18px 18px 0 0; padding:20px; width:100%;
  max-width:560px; margin:0 auto; transform:translateY(12px); transition:transform .18s ease;
}
.action-sheet.show .action-sheet-content{ transform:translateY(0); }
.sheet-seat-code{ font-weight:800; font-size:1.05rem; }
.sheet-seat-pasajero{ color:var(--muted); font-size:.9rem; margin-bottom:16px; }
.action-sheet-content .btn{ width:100%; margin-bottom:8px; }

/* ===== Editor de estructura ===== */
.editor-row-wrap{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.editor-row-label{ font-size:.75rem; font-weight:700; color:var(--muted); width:44px; flex-shrink:0; }
.editor-row-wrap .row{ flex:1; }
.editor-row-delete{ flex-shrink:0; padding:8px 10px; font-size:1rem; }
.editor-add-row{ margin-top:16px; text-align:center; }