:root{
  --bg:#0b1020; --panel:#111827; --panel-2:#0f172a;
  --ink:#e5e7eb; --muted:#9ca3af; --line:#1f2937;
  --acc:#22d3ee; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,Segoe UI,Roboto,Arial}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.topbar{position:sticky;top:0;background:rgba(11,16,32,.95);border-bottom:1px solid var(--line);z-index:201}
.topbar .wrap{display:flex;align-items:center;gap:12px;position:relative}
.logo{font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.quick-links{display:flex;gap:8px;flex-wrap:wrap}
.quick-links a{color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.quick-links a:hover{border-color:var(--acc)}
.nav{
  position:fixed;top:0;left:0;height:100vh;width:260px;
  display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border-right:1px solid var(--line);
  padding:72px 14px 16px;
  transform:translateX(-100%);
  transition:transform .3s ease;
  box-shadow:8px 0 18px rgba(0,0,0,.3);
  z-index:200;
  overflow-y:auto;
}
.nav.active{transform:translateX(0)}
.nav a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);width:100%;display:block;font-weight:600;font-size:14px;text-align:left;min-height:38px;display:flex;align-items:center}
.nav a:hover{border-color:var(--acc)}

.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s;z-index:150}
.nav-overlay.active{opacity:1;pointer-events:auto}

.hamburger{display:flex;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer;padding:8px;margin-left:8px}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:1px;transition:all 0.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(10px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-10px)}
.hamburger .chevron{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--ink);margin-top:4px;align-self:center;transition:transform .3s}
.hamburger.active .chevron{transform:rotate(180deg)}

@media(max-width:640px){
  .nav{width:240px}
  .nav a{padding:10px 12px}
  .quick-links{width:100%}
}

@media(min-width:1024px){
  body:not(.no-nav){padding-left:260px}
  body:not(.no-nav) .nav{
    position:fixed;top:0;left:0;height:100vh;width:260px;
    transform:none;transition:none;
    padding:72px 14px 16px;
    box-shadow:8px 0 18px rgba(0,0,0,.25);
  }
  body:not(.no-nav) .nav.active{transform:none}
  body:not(.no-nav) .nav-overlay{display:none}
  body:not(.no-nav) .hamburger{display:none}
}
.userchip{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted)}
.link{color:var(--acc);text-decoration:none}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 0}
.card h2{margin:0 0 8px;font-size:20px}
.card h3{margin:12px 0 6px;font-size:16px;color:#93c5fd}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.table th{color:var(--muted);font-weight:600}

input,select,textarea{
  width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
  background:#0b1220;color:var(--ink);outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(135deg,#ffdd33,#ff8a00);color:#fff;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer
}
.btn:visited{color:#fff}
.btn.secondary{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
.btn.secondary:visited{color:var(--ink)}
.btn.danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn.danger:visited{color:var(--err)}

.flash{padding:10px 12px;border-radius:10px;margin:10px 0;border:1px solid var(--line)}
.flash.ok{border-color:var(--ok)}
.flash.err{border-color:var(--err)}
.flash.warn{border-color:var(--warn)}

.footer{color:var(--muted);border-top:1px solid var(--line)}

/* ------------------------------------------------------------
  App shell (solo WebView) - ajustes visuales sin afectar web
  Se activa con cookie/query: app=1
------------------------------------------------------------ */
.app-shell .wrap{padding:12px}
.app-shell .topbar{position:static}
.app-shell .footer{display:none}

/* En app: dejar margen para la barra de estado (Android/iOS) y evitar superposiciones */
.app-shell .topbar .wrap{padding-top:calc(12px + 16px + env(safe-area-inset-top));flex-wrap:wrap}

/* En login dentro de app: ocultar topbar (queda solo el logo grande del contenido) */
.app-shell.page-login .topbar{display:none}

/* En app: evitar que el header crezca por wrap; y sacar el texto TICKEX del nav */
.app-shell .topbar .logo{display:none}

/* En app (cliente): mantener accesos rápidos post-login */
.app-shell.app-client .quick-links{display:flex}
/* En app (cliente): header en una sola línea */
.app-shell.app-client .topbar .wrap{flex-wrap:nowrap}
.app-shell.app-client .quick-links{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* En app (admin): mostrar botón menú para poder abrir el nav */
.app-shell.app-admin .topbar .wrap{flex-wrap:nowrap}
.app-shell.app-admin .quick-links{display:none}
.app-shell.app-admin .hamburger{display:flex}

/* Contenedores de acciones en fila (panel usuario) */
.app-shell .app-row-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.app-shell .app-row-actions .btn{white-space:nowrap}

/* Perfil (panel usuario) en app: apilar info y evitar header largo */
.app-shell .app-profile{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.app-shell .app-hello{color:var(--muted)}
.app-shell .app-email{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.app-shell .app-email-text{color:var(--muted)}
.app-shell .app-meta{color:var(--muted);font-size:13px}
.app-shell .app-badge{padding:2px 8px;border-radius:999px;font-size:12px;color:#fff}
.app-shell .app-badge-ok{background:#1b8a3a}
.app-shell .app-badge-err{background:#b34747}

/* Botones de acciones más compactos en app */
.app-shell .app-row-actions .btn.secondary{padding:7px 10px;font-size:12px;letter-spacing:.04em}

/* Toggle switch */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{position:relative;width:44px;height:24px;border-radius:999px;background:var(--line);transition:background .2s ease;border:1px solid var(--line)}
.switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#d1d5db;transition:transform .2s ease,background .2s ease}
.switch input:checked + .switch-track{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:#16a34a}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(20px);background:white}
.switch input:not(:checked) + .switch-track{background:linear-gradient(135deg,#b91c1c,#ef4444);border-color:#b91c1c}
.switch input:not(:checked) + .switch-track .switch-thumb{background:white}