/* ==========================================================
 ✈ VIASA Virtual Airlines — Panel Administrativo v7.1
 Unificado: dashboard en fila, sidebar acordeón, tablas, forms, toasts,
 modal (fix), dark mode, utilidades.
========================================================== */

/* ---------------------- Variables base ---------------------- */
:root{
  --blue-main:#013d7a; --blue-dark:#012b55;
  --accent-orange:#ff9800; --accent-green:#4caf50; --accent-red:#e53935;
  --bg-light:#f4f7fb; --bg-dark:#0d1117; --text-light:#1e1e1e; --text-dark:#e0e0e0;
  --card-light:#ffffff; --card-dark:#161b22; --border-color:#d1d5db;
  --input-bg:#ffffff; --input-focus-bg:#f9fbff; --text-primary:#222;
  --muted:#6b7280; --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 30px rgba(0,0,0,.15);
  --radius:12px; --speed:.25s; --table-stripe:#fafafa;
}

/* ---------------------- Dark mode ---------------------- */
:root[data-theme="dark"]{
  --bg-light:var(--bg-dark); --text-light:var(--text-dark);
  --card-light:var(--card-dark); --border-color:#334155;
  --input-bg:#1e293b; --input-focus-bg:#334155; --text-primary:#e0e0e0;
  --table-stripe:#0f1622; --shadow:none; --shadow-lg:0 8px 30px rgba(0,0,0,.35);
}

/* ---------------------- Base y layout ---------------------- */
html,body{
  margin:0; padding:0; font-family:"Inter","Segoe UI",Arial,sans-serif;
  background:var(--bg-light); color:var(--text-light);
  transition:background .3s,color .3s; overflow-x:hidden;
}
a{color:var(--blue-main); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; border:0}

/* ---------------------- Topbar ---------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:50px; background:var(--blue-dark); color:#fff;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; z-index:1000;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.topbar #menuToggle,.topbar .theme-toggle{
  background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer; line-height:1;
  padding:6px 10px; border-radius:8px;
}
.topbar .theme-toggle{border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18)}

/* ---------------------- Sidebar ---------------------- */
.sidebar{
  position:fixed; top:50px; left:0; bottom:0; width:250px; background:#011a35; color:#fff;
  display:flex; flex-direction:column; overflow-y:auto; z-index:999; transition:width .3s ease;
}
.sidebar-header{display:none}
.sidebar-menu{padding:6px 0}
.menu-group{border-bottom:1px solid rgba(255,255,255,.06)}
.menu-parent{
  width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:none; border:0; color:#fff; font-weight:700; font-size:14px; cursor:pointer;
  transition:background .2s; position:relative;
}
.menu-parent:hover{background:rgba(255,255,255,.08)}
.menu-parent::after{
  content:"▾"; margin-left:auto; opacity:.7; transform:rotate(-90deg); transition:transform .2s ease;
}
.menu-group.active>.menu-parent::after{transform:rotate(0deg)}

.menu-icon{
  width:18px; height:18px; object-fit:contain; flex-shrink:0;
  filter:brightness(0) invert(1); transition:transform .2s,opacity .2s;
}
.menu-parent:hover .menu-icon,.menu-sub a:hover .menu-icon,.logout-group a.logout:hover .menu-icon{
  transform:scale(1.05); opacity:.85;
}
/* En modo oscuro, los íconos siguen en blanco */
:root[data-theme="dark"] .menu-icon{filter:brightness(0) invert(1)}

.menu-sub{display:none; flex-direction:column; background:rgba(0,0,0,.12)}
.menu-group.active>.menu-sub{display:flex}
.menu-sub a{
  display:flex; align-items:center; gap:10px; color:#cbd5e1; padding:10px 40px; font-size:14px;
}
.menu-sub a:hover{background:rgba(255,255,255,.08); color:#fff}

/* Logout */
.logout-group{margin-top:auto; border-top:1px solid rgba(255,255,255,.08)}
.logout-group a.logout{
  display:flex; align-items:center; gap:10px; color:#f87171; font-weight:800; padding:12px 16px;
}
.logout-group a.logout:hover{background:rgba(255,255,255,.08); color:#fff}

/* Sidebar colapsado */
.sidebar.collapsed{width:70px}
.sidebar.collapsed .menu-parent,
.sidebar.collapsed .menu-sub a,
.sidebar.collapsed .logout-group a.logout{justify-content:center; gap:0; padding:12px 0}
.sidebar.collapsed .menu-parent span,
.sidebar.collapsed .menu-sub a span,
.sidebar.collapsed .logout span{display:none}
.sidebar.collapsed .menu-parent:hover::after,
.sidebar.collapsed .menu-sub a:hover::after,
.sidebar.collapsed .logout-group a.logout:hover::after{
  content:attr(data-label); position:fixed; left:80px; top:var(--yy,0); transform:translateY(-50%);
  background:rgba(0,0,0,.9); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px;
  white-space:nowrap; z-index:2000;
}
/* ---------------------- Contenido principal ---------------------- */

.admin-main {
  margin-left: 250px;
  margin-top: 50px;
  padding: 20px 22px;
  min-width: 0;
  box-sizing: border-box;
  transition: margin-left .3s ease;
}

/* Las secciones internas no deben volver a desplazar el contenido */
.admin-section {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* El dashboard es contenido interno del main */
.dashboard-grid {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Al colapsar el sidebar, solo se desplaza el contenedor principal */
.sidebar.collapsed ~ .admin-main {
  margin-left: 70px;
}

/* ---------------------- Cards + Dashboard ---------------------- */
.dashboard-grid{display:grid; grid-template-columns:2fr 1fr; gap:30px; align-items:start}
.metrics{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:16px;
}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.metrics{grid-template-columns:1fr}}

.card{
  background:var(--card-light); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 22px; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.card h2{margin:0 0 6px; font-size:1.05rem; color:var(--blue-dark)}
.card p{margin:0; font-size:1.9rem; font-weight:800; color:var(--blue-main)}
.card small{color:var(--muted); font-weight:500}
.sync-panel .card p{font-size:1.2rem}

/* ---------------------- Área de sincronización ---------------------- */
.sync-area{background:var(--card-light); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.sync-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sync-head h2{margin:0; font-size:1.05rem}
.sync-desc{margin:6px 0 10px; color:var(--muted); font-size:.95rem}
.sync-sep{border:0; border-top:1px solid var(--border-color); margin:10px 0}
.sync-history{width:100%; border-collapse:collapse; background:var(--card-light); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); font-size:14px}
.sync-history thead{background:var(--blue-main); color:#fff}
.sync-history th,.sync-history td{padding:10px 12px; border-bottom:1px solid #e5e7eb}
:root[data-theme="dark"] .sync-history th,:root[data-theme="dark"] .sync-history td{border-bottom:1px solid #223047}
.sync-history tbody tr:nth-child(even){background:var(--table-stripe)}
.sync-status{display:inline-block; padding:4px 10px; border-radius:6px; font-weight:700; font-size:11px; text-transform:uppercase}
.sync-status.success{background:#e8f5e9; color:#1b5e20}
.sync-status.manual,.sync-status.running{background:#fff8e1; color:#92400e}
.sync-status.warning{background:#fff4e5; color:#92400e}
.sync-status.failed,.sync-status.error{background:#ffebee; color:#b71c1c}

/* ---------------------- Botones ---------------------- */
.button{
  display:inline-flex; align-items:center; gap:8px; background:var(--blue-main); color:#fff;
  border:0; border-radius:8px; padding:10px 14px; font-weight:700; cursor:pointer;
  transition:background .2s,transform .05s;
}
.button:hover{background:var(--blue-dark)}
.button:active{transform:translateY(1px)}
.button.small{padding:7px 12px; border-radius:6px; font-size:.92rem}
.button.outline{background:transparent; color:var(--blue-main); border:2px solid var(--blue-main)}
.button.success{background:#2e7d32}
.button.warning{background:#ff9800}
.button.danger{background:#c62828}
a.button{color:#fff; text-decoration:none}

/* ---------------------- Formularios ---------------------- */
.admin-form,.filters{
  background:var(--card-light); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:15px;
}
.filters{justify-content:flex-start}
.admin-form label,.filters label{font-weight:700; color:var(--blue-dark); min-width:90px}
.admin-form select,.admin-form input[type="text"],.filters select,.filters input[type="text"]{
  background:var(--input-bg); border:1px solid var(--border-color); border-radius:8px;
  padding:8px 10px; font-size:14px; color:#333; transition:border-color .2s,box-shadow .2s; min-width:180px;
}
.admin-form select:focus,.admin-form input[type="text"]:focus,.filters select:focus,.filters input[type="text"]:focus{
  border-color:var(--blue-main); box-shadow:0 0 0 2px rgba(1,61,122,.12); outline:0; background:var(--input-focus-bg);
}

/* ---------------------- Tablas genéricas ---------------------- */
.table-container{background:var(--card-light); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.admin-table,.users-table{width:100%; border-collapse:collapse; font-size:14px}
.admin-table thead,.users-table thead{background:var(--blue-main); color:#fff}
.admin-table th,.admin-table td,.users-table th,.users-table td{padding:10px 12px; border-bottom:1px solid #e5e7eb; text-align:left}
:root[data-theme="dark"] .admin-table th,:root[data-theme="dark"] .admin-table td,
:root[data-theme="dark"] .users-table th,:root[data-theme="dark"] .users-table td{border-bottom:1px solid #223047}
.admin-table tbody tr:nth-child(even),.users-table tbody tr:nth-child(even){background:var(--table-stripe)}
.admin-table tbody tr:hover,.users-table tbody tr:hover{background:#f9fafb}
:root[data-theme="dark"] .admin-table tbody tr:hover,:root[data-theme="dark"] .users-table tbody tr:hover{background:#0f1622}
.sort-link{color:#fff; text-decoration:none; font-weight:700}
.sort-link:hover{text-decoration:underline}

/* ---------------------- Paginación ---------------------- */
.pagination{margin-top:16px; display:flex; justify-content:center; align-items:center; gap:10px}
.pagination .button.small{min-width:36px; justify-content:center}

/* ---------------------- Flash / Alerts ---------------------- */
.flash{padding:12px 15px; border-radius:8px; font-size:14px; font-weight:600; margin-bottom:15px}
.flash.success{background:#e1f8e9; color:#0f5132; border:1px solid #badbcc}
.flash.error{background:#f8d7da; color:#842029; border:1px solid #f5c2c7}

/* ---------------------- Modal (FIX DEFINITIVO) ---------------------- */
/* Estructura usada en las páginas:
   <div id="modalBackdrop" class="modal-backdrop" hidden></div>
   <div id="deleteModal"   class="modal"           hidden> ... </div>
*/
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  z-index:3000; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
}
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
  background:var(--card-light); color:var(--text-primary);
  border-radius:12px; padding:22px 26px; width:90%; max-width:420px;
  box-shadow:var(--shadow-lg); z-index:4000; opacity:0; pointer-events:none;
  transition:transform .25s, opacity .25s;
}
/* Estado visible basado en el hermano adyacente (backdrop visible) */
.modal-backdrop:not([hidden]){opacity:1; visibility:visible}
.modal-backdrop:not([hidden]) + .modal{
  opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important;
  pointer-events:auto !important;
}
.modal-card h3{margin-top:0; font-size:1.3rem; font-weight:600}
.modal-card p{margin-bottom:16px; line-height:1.4}
.modal-actions{display:flex; justify-content:flex-end; gap:10px}
:root[data-theme="dark"] .modal{background:#1e293b; color:#f1f5f9}

/* ---------------------- Modal sesion ---------------------- */

.session-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.session-card {
  background: var(--card-light);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  text-align: center;
  max-width: 360px;
}

.session-card h3 {
  margin-top: 0;
  color: var(--blue-dark);
}

.session-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

:root[data-theme="dark"] .session-card {
  background: var(--card-dark);
  color: var(--text-primary);
}

/* ---------------------- Toasts ---------------------- */
.toast-container{
  position:fixed; top:20px; right:20px; z-index:2500;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.toast{
  min-width:260px; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:700; color:#fff;
  opacity:0; transform:translateY(-10px); transition:opacity .3s,transform .3s; box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.success{background:#2e7d32}.toast.warning{background:#ff9800}.toast.error{background:#c62828}.toast.info{background:var(--blue-main)}
:root[data-theme="dark"] .toast{background:#1e3a8a; color:#f1f5f9; box-shadow:0 4px 12px rgba(0,0,0,.6)}

/* ---------------------- Utilidades ---------------------- */
.hidden{display:none!important}
.text-center{text-align:center}
.text-right{text-align:right}
.m-0{margin:0}.mb-0{margin-bottom:0}.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-16{margin-bottom:16px}
.p-0{padding:0}.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#eef2ff; color:#1e40af}
:root[data-theme="dark"] .badge{background:#0f172a; color:#93c5fd}

/* ---------------------- Responsive ---------------------- */
@media (max-width:1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-main {
    margin-left: 70px;
    padding: 18px;
  }

  .admin-section {
    margin: 0;
    padding: 0;
  }
}
/* ==========================================================
 ✈ LOGIN ADMINISTRATIVO — v6.4
========================================================== */

.login-body {
  font-family: "Inter", "Segoe UI", sans-serif;
  background: var(--bg-light);
  color: var(--text-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  transition: background .3s, color .3s;
}

.admin-login {
  background: var(--card-light);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 400px;
  padding: 40px 35px;
  text-align: center;
}

.admin-login h1 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--blue-main);
  font-weight: 800;
}

.admin-login input {
  width: 100%;
  padding: 10px;
  margin: 8px 0 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
  box-sizing: border-box;
}

.admin-login button {
  width: 100%;
  background: var(--blue-main);
  color: #fff;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  transition: background .2s;
}

.admin-login button:hover {
  background: var(--blue-dark);
}

.flash {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
.flash.error { background: #ffebee; color: #b71c1c; }
.flash.success { background: #e8f5e9; color: #1b5e20; }

footer {
  text-align: center;
  font-size: 13px;
  margin-top: 20px;
  color: #777;
}
/* Botón minimalista */
.mini-btn-edit {
  padding: 6px 12px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.2s;
}
.mini-btn-edit:hover {
  background: #1d4ed8;
}

/* Badges (roles / sistemas) */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-right: 4px;
}

.badge-superadmin { background: #7e22ce; }
.badge-admin      { background: #dc2626; }
.badge-user       { background: #475569; }

.badge-vatsim     { background: #0ea5e9; }
.badge-fs         { background: #16a34a; }

/* Pills de estado */
.status-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
}

.status-active    { background: #16a34a; }
.status-inactive  { background: #64748b; }
.status-suspended { background: #dc2626; }
.status-unknown   { background: #475569; }

th a {
        color: #fff !important;
        text-decoration: none;
    }
th a:hover {
        color: #61dafb !important; /* o el color hover que quieras */
        text-decoration: underline;
    }