/* ARDE Tickets · Front profesional */
:root{
  --bg:#050508;
  --bg2:#09090f;
  --surface:#101018;
  --surface2:#151522;
  --surface3:#1b1b2a;
  --glass:rgba(255,255,255,.065);
  --glass2:rgba(255,255,255,.035);
  --text:#f7f3ee;
  --soft:#d8d0c9;
  --muted:#9b95a7;
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.17);
  --accent:#ff4d1d;
  --accent2:#ff8a00;
  --accent3:#ffd0b8;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --info:#8b5cf6;
  --shadow:0 24px 80px rgba(0,0,0,.55);
  --shadow2:0 14px 36px rgba(0,0,0,.35);
  --radius:24px;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,77,29,.22), transparent 31rem),
    radial-gradient(circle at 88% 7%, rgba(139,92,246,.13), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(255,138,0,.08), transparent 28rem),
    linear-gradient(180deg,#07070b 0%, #050508 100%);
  background-attachment:fixed;
  padding:18px;
  letter-spacing:-.01em;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 76%);
}
a{color:inherit}
button,input,select,textarea{font:inherit}
img{max-width:100%}
::selection{background:rgba(255,77,29,.35)}

.app-shell{
  width:min(1220px,100%);
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding:12px;
  position:sticky;
  top:12px;
  z-index:30;
  background:rgba(10,10,16,.78);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(18px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}
.brand img{
  width:46px;
  height:46px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 12px 30px rgba(255,77,29,.16);
}
.brand-title{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand-title strong{
  font-size:18px;
  letter-spacing:-.04em;
}
.brand-title span{
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
}

.nav-pills{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.nav-pills a,.pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--soft);
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  transition:.18s ease;
}
.nav-pills a:hover,.pill:hover{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(255,77,29,.42);
  background:rgba(255,77,29,.09);
}
.nav-pills a.active{
  color:#fff;
  border-color:rgba(255,77,29,.55);
  background:linear-gradient(135deg,rgba(255,77,29,.25),rgba(255,138,0,.13));
  box-shadow:0 12px 28px rgba(255,77,29,.13);
}
.nav-pills a.logout-pill{
  color:#ffd8cf;
  border-color:rgba(255,77,29,.22);
}

/* Layout */
.grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:16px;
  align-items:start;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.row-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

/* Cards */
.card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.037)),
    rgba(16,16,24,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top left,rgba(255,77,29,.12),transparent 18rem),
    radial-gradient(circle at bottom right,rgba(139,92,246,.07),transparent 18rem);
  opacity:.8;
}
.card > *{position:relative;z-index:1}
.card h1,.card h2,.card h3{margin:0 0 10px;letter-spacing:-.055em}
.card h1{
  font-size:clamp(28px,4vw,42px);
  line-height:.98;
}
.card h2{
  font-size:22px;
  line-height:1.05;
}
.card h3{
  font-size:17px;
  line-height:1.15;
}
.card p{line-height:1.45}

.muted{color:var(--muted)}
.small{font-size:12px}
b,strong{font-weight:850}

/* Forms */
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}
label{
  color:#e4ded8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.015em;
}
input,select,textarea{
  width:100%;
  min-height:46px;
  padding:13px 14px;
  color:var(--text);
  background:rgba(5,5,9,.74);
  border:1px solid var(--line);
  border-radius:16px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:.16s ease;
}
textarea{
  min-height:90px;
  resize:vertical;
}
input::placeholder,textarea::placeholder{color:rgba(216,208,201,.45)}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,77,29,.66);
  box-shadow:
    0 0 0 4px rgba(255,77,29,.12),
    inset 0 1px 0 rgba(255,255,255,.045);
  background:rgba(8,8,13,.9);
}

/* Buttons */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 16px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 14px 30px rgba(255,77,29,.22);
  transition:.16s ease;
}
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.btn:active{transform:translateY(0) scale(.99)}
.btn.secondary{
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:none;
}
.btn.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--soft);
  box-shadow:none;
}
.btn.bad{
  background:linear-gradient(135deg,#dc2626,#fb7185);
  box-shadow:0 14px 30px rgba(239,68,68,.16);
}
.btn.ok{
  background:linear-gradient(135deg,#059669,#22c55e);
  box-shadow:0 14px 30px rgba(34,197,94,.16);
}
.btn.full{width:100%}

/* Notices */
.notice{
  margin:10px 0;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  line-height:1.42;
}
.notice.ok{
  color:#dcfce7;
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.09);
}
.notice.warn{
  color:#fff7d6;
  border-color:rgba(245,158,11,.36);
  background:rgba(245,158,11,.09);
}
.notice.bad{
  color:#ffe4e6;
  border-color:rgba(239,68,68,.40);
  background:rgba(239,68,68,.10);
}

/* Stats */
.stat{
  position:relative;
  overflow:hidden;
  min-height:104px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right,rgba(255,77,29,.13),transparent 9rem),
    rgba(255,255,255,.045);
}
.stat b{
  display:block;
  margin-bottom:4px;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.06em;
  line-height:1;
}
.stat span{
  font-size:13px;
  font-weight:700;
}

/* Tables */
.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(5,5,9,.42);
}
table{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
}
th,td{
  padding:13px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
th{
  position:sticky;
  top:0;
  z-index:2;
  color:#eee7df;
  font-weight:900;
  background:rgba(20,20,31,.97);
  backdrop-filter:blur(10px);
}
tr:hover td{background:rgba(255,255,255,.025)}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.badge.activo{
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  border-color:rgba(34,197,94,.38);
}
.badge.ingresado{
  background:rgba(139,92,246,.14);
  color:#ddd6fe;
  border-color:rgba(139,92,246,.42);
}
.badge.cancelado{
  background:rgba(239,68,68,.13);
  color:#ffe4e6;
  border-color:rgba(239,68,68,.42);
}
.badge.pendiente,.badge.reservado{
  background:rgba(245,158,11,.12);
  color:#fef3c7;
  border-color:rgba(245,158,11,.38);
}

/* Ticket card */
.ticket-card{
  position:relative;
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:16px;
  align-items:start;
  margin:14px 0;
  padding:15px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at top left,rgba(255,77,29,.15),transparent 13rem),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
}
.ticket-card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.ticket-card img{
  display:block;
  width:150px;
  border-radius:18px;
  background:white;
  padding:8px;
  box-shadow:0 18px 42px rgba(0,0,0,.32);
}
.ticket-meta{
  display:grid;
  gap:7px;
  min-width:0;
}
.ticket-meta h3{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:2px;
}
.kv{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.kv b{color:var(--text)}

/* Login */
.login-page{
  min-height:calc(100vh - 36px);
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
}
.login-card{
  width:min(460px,100%);
  padding:28px;
  text-align:left;
  border-radius:30px;
}
.login-card:after{
  content:"Acceso seguro";
  position:absolute;
  right:22px;
  top:22px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,77,29,.30);
  color:#ffd0b8;
  background:rgba(255,77,29,.08);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.logo-big{
  width:82px;
  height:82px;
  display:block;
  margin:0 0 18px;
  border-radius:26px;
  box-shadow:0 22px 45px rgba(255,77,29,.20);
}
.login-card h1{
  font-size:42px;
  margin-bottom:8px;
}

/* Scanner */
.scan-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
  gap:16px;
  align-items:start;
}
#reader{
  min-height:360px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,77,29,.10),transparent),
    #000;
}
.scan-result{
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  border-radius:26px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
}
.scan-result h2{
  margin:0 0 10px;
  font-size:clamp(36px,5vw,58px);
  line-height:.92;
  letter-spacing:-.08em;
}
.scan-result.ok{
  color:#f0fdf4;
  border-color:rgba(34,197,94,.50);
  background:
    radial-gradient(circle at top,rgba(34,197,94,.28),transparent 14rem),
    rgba(34,197,94,.10);
}
.scan-result.bad{
  color:#fff1f2;
  border-color:rgba(239,68,68,.50);
  background:
    radial-gradient(circle at top,rgba(239,68,68,.28),transparent 14rem),
    rgba(239,68,68,.10);
}
.scan-result.warn{
  color:#fffbeb;
  border-color:rgba(245,158,11,.50);
  background:
    radial-gradient(circle at top,rgba(245,158,11,.28),transparent 14rem),
    rgba(245,158,11,.10);
}

/* Eventos / tandas */
.tanda-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(120px,.8fr) auto;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

/* Mobile */
@media (max-width:900px){
  body{padding:10px}
  .topbar{
    position:relative;
    top:auto;
    align-items:flex-start;
    flex-direction:column;
    border-radius:22px;
  }
  .brand img{width:44px;height:44px}
  .nav-pills{
    width:100%;
    justify-content:flex-start;
    gap:7px;
  }
  .nav-pills a{
    flex:1 1 auto;
    min-width:calc(33.333% - 8px);
    padding:10px 9px;
    font-size:12px;
  }
  .grid,.grid-3,.row,.row-3,.scan-layout{
    grid-template-columns:1fr;
  }
  .card{
    padding:15px;
    border-radius:22px;
  }
  .card h1{font-size:31px}
  .actions .btn{
    flex:1 1 auto;
  }
  .ticket-card{
    grid-template-columns:1fr;
  }
  .ticket-card img{
    width:210px;
    margin:auto;
  }
  .table-wrap{
    border-radius:18px;
  }
  th,td{
    padding:11px 10px;
  }
  #reader{min-height:300px}
  .scan-result{min-height:220px}
  .login-card{
    padding:24px;
  }
}
@media (max-width:520px){
  .nav-pills a{
    min-width:calc(50% - 7px);
  }
  .btn{
    width:100%;
  }
  .actions{
    width:100%;
  }
  .login-card h1{
    font-size:36px;
  }
  .stat{
    min-height:92px;
  }
}

/* =========================================================
   ARDE Tickets · Capa visual profesional v2
   Dark premium + aclaraciones verdes + mejor jerarquía
   ========================================================= */

:root{
  --arde-bg:#050507;
  --arde-card:#111117;
  --arde-card-2:#171720;
  --arde-orange:#ff4d1d;
  --arde-orange-2:#ff8a00;
  --arde-green:#24d47e;
  --arde-green-soft:rgba(36,212,126,.11);
  --arde-yellow:#fbbf24;
  --arde-red:#fb3f5f;
  --arde-line:rgba(255,255,255,.12);
  --arde-soft:#b8b1c6;
  --arde-white:#fff7ef;
}

body{
  background:
    radial-gradient(circle at 8% 0%, rgba(255,77,29,.24), transparent 32rem),
    radial-gradient(circle at 92% 8%, rgba(36,212,126,.11), transparent 26rem),
    radial-gradient(circle at 50% 100%, rgba(255,138,0,.08), transparent 30rem),
    linear-gradient(180deg,#07070b 0%,#050507 100%) !important;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

/* Topbar más app */
.topbar{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:rgba(10,10,15,.82) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.42) !important;
}

.brand img{
  border-radius:17px !important;
  box-shadow:0 14px 32px rgba(255,77,29,.22) !important;
}

.brand-title strong{
  letter-spacing:-.045em;
}

.nav-pills a{
  font-weight:850 !important;
  color:#e9e2da !important;
  transition:.18s ease !important;
}

.nav-pills a:hover{
  transform:translateY(-1px);
  background:rgba(255,77,29,.10) !important;
  border-color:rgba(255,77,29,.42) !important;
}

.nav-pills a.active{
  background:linear-gradient(135deg,rgba(255,77,29,.26),rgba(255,138,0,.12)) !important;
  border-color:rgba(255,77,29,.55) !important;
  color:#fff !important;
}

/* Cards más premium */
.card{
  position:relative;
  overflow:hidden;
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at top left,rgba(255,77,29,.13),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) !important;
  box-shadow:0 26px 75px rgba(0,0,0,.48) !important;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%);
  opacity:.55;
}

.card > *{
  position:relative;
  z-index:1;
}

.card h1{
  font-size:clamp(30px,4vw,46px) !important;
  line-height:.95 !important;
  letter-spacing:-.075em !important;
  margin-bottom:10px !important;
}

.card h2{
  font-size:24px !important;
  letter-spacing:-.055em !important;
}

.card h3{
  letter-spacing:-.035em !important;
}

.muted{
  color:#aaa4b8 !important;
}

/* Formularios más finos */
.field label,
label{
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  color:#eee8df !important;
}

input,select,textarea{
  min-height:48px !important;
  border-radius:17px !important;
  background:rgba(6,6,10,.82) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:#fff7ef !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(255,77,29,.72) !important;
  box-shadow:0 0 0 4px rgba(255,77,29,.13) !important;
}

/* Botones */
.btn{
  border-radius:17px !important;
  font-weight:950 !important;
  letter-spacing:-.025em !important;
  box-shadow:0 16px 35px rgba(255,77,29,.24) !important;
}

.btn.secondary{
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}

.btn.ghost{
  color:#e9e2da !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.025) !important;
  box-shadow:none !important;
}

/* Recuadritos verdes operativos */
.notice{
  position:relative;
  overflow:hidden;
  padding:15px 16px 15px 18px !important;
  border-radius:20px !important;
  border:1px solid rgba(36,212,126,.32) !important;
  background:
    radial-gradient(circle at top left,rgba(36,212,126,.16),transparent 14rem),
    rgba(36,212,126,.075) !important;
  color:#eafff3 !important;
  line-height:1.45 !important;
}

.notice::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#24d47e,#86efac);
}

.notice b{
  color:#ffffff !important;
}

.notice .muted,
.notice span{
  color:#ccefdc !important;
}

.notice.ok{
  border-color:rgba(36,212,126,.52) !important;
  background:
    radial-gradient(circle at top left,rgba(36,212,126,.22),transparent 14rem),
    rgba(36,212,126,.12) !important;
}

.notice.warn{
  border-color:rgba(251,191,36,.50) !important;
  background:
    radial-gradient(circle at top left,rgba(251,191,36,.20),transparent 14rem),
    rgba(251,191,36,.105) !important;
  color:#fff8dc !important;
}

.notice.warn::before{
  background:linear-gradient(180deg,#fbbf24,#fde68a);
}

.notice.bad{
  border-color:rgba(251,63,95,.55) !important;
  background:
    radial-gradient(circle at top left,rgba(251,63,95,.22),transparent 14rem),
    rgba(251,63,95,.11) !important;
  color:#ffe8ec !important;
}

.notice.bad::before{
  background:linear-gradient(180deg,#fb3f5f,#fda4af);
}

/* Stats tipo dashboard */
.stat{
  position:relative;
  overflow:hidden;
  border-radius:23px !important;
  padding:18px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at top right,rgba(36,212,126,.15),transparent 9rem),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)) !important;
}

.stat::before{
  content:"";
  position:absolute;
  inset:auto 14px 12px 14px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--arde-green),var(--arde-orange));
  opacity:.72;
}

.stat b{
  font-size:clamp(28px,3.4vw,40px) !important;
  line-height:.9 !important;
  letter-spacing:-.075em !important;
  color:#fff !important;
}

.stat span{
  font-size:12px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.035em;
  color:#bfb7cc !important;
}

/* Tickets generados: más entrada real */
.ticket-card{
  position:relative;
  overflow:hidden;
  border-radius:26px !important;
  padding:18px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at top left,rgba(255,77,29,.18),transparent 15rem),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)) !important;
}

.ticket-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--arde-orange),var(--arde-green));
}

.ticket-card img{
  border-radius:22px !important;
  padding:10px !important;
  background:#fff !important;
  box-shadow:0 18px 45px rgba(0,0,0,.38) !important;
}

.ticket-meta h3{
  font-size:21px !important;
  letter-spacing:-.055em !important;
}

.kv{
  color:#b8b1c6 !important;
}

/* Badges más claros */
.badge{
  border-radius:999px !important;
  padding:6px 10px !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
}

.badge.activo{
  background:rgba(36,212,126,.16) !important;
  color:#c6fbdc !important;
  border-color:rgba(36,212,126,.48) !important;
}

.badge.ingresado{
  background:rgba(139,92,246,.18) !important;
  color:#e8ddff !important;
}

.badge.cancelado{
  background:rgba(251,63,95,.17) !important;
  color:#ffe5eb !important;
}

/* Scanner más fuerte para puerta */
.scan-result{
  border-radius:30px !important;
  min-height:275px !important;
}

.scan-result h2{
  font-size:clamp(42px,6vw,72px) !important;
  letter-spacing:-.09em !important;
  line-height:.9 !important;
}

.scan-result.ok{
  border-color:rgba(36,212,126,.65) !important;
  background:
    radial-gradient(circle at top,rgba(36,212,126,.36),transparent 16rem),
    rgba(36,212,126,.16) !important;
  color:#edfff5 !important;
}

.scan-result.bad{
  border-color:rgba(251,63,95,.65) !important;
  background:
    radial-gradient(circle at top,rgba(251,63,95,.36),transparent 16rem),
    rgba(251,63,95,.16) !important;
}

.scan-result.warn{
  border-color:rgba(251,191,36,.65) !important;
  background:
    radial-gradient(circle at top,rgba(251,191,36,.34),transparent 16rem),
    rgba(251,191,36,.16) !important;
}

/* Tablas */
.table-wrap{
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:rgba(6,6,10,.48) !important;
}

th{
  background:rgba(20,20,28,.96) !important;
  color:#fff1e8 !important;
  font-weight:950 !important;
}

td{
  color:#eee8df !important;
}

tr:hover td{
  background:rgba(36,212,126,.035) !important;
}

/* Mobile */
@media (max-width:860px){
  body{
    padding:10px !important;
  }

  .topbar{
    border-radius:24px !important;
  }

  .card{
    border-radius:24px !important;
  }

  .card h1{
    font-size:34px !important;
  }

  .notice{
    border-radius:18px !important;
  }

  .ticket-card img{
    width:220px !important;
    margin:auto !important;
  }

  .actions .btn{
    width:100%;
  }
}



/* =========================================================
   ARDE Tickets · Ajuste general mobile app
   ========================================================= */
@media (max-width: 1024px) {
  html {
    background: #050507;
  }

  body {
    padding: 10px !important;
    overflow-x: hidden;
  }

  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
  }

  .topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 50 !important;
    border-radius: 24px !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .brand {
    width: 100%;
  }

  .brand img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  .brand-title strong {
    font-size: 16px !important;
  }

  .brand-title span {
    font-size: 11px !important;
  }

  .nav-pills {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .nav-pills a {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 5px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .card {
    padding: 15px !important;
    border-radius: 24px !important;
  }

  .card h1 {
    font-size: 32px !important;
    line-height: .96 !important;
  }

  .card h2 {
    font-size: 23px !important;
  }

  .row,
  .row-3,
  .grid,
  .grid-3,
  .scan-layout {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  .btn {
    min-height: 50px !important;
    font-size: 15px !important;
  }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .actions .btn,
  .btn.full {
    width: 100% !important;
  }

  .notice {
    border-radius: 19px !important;
    font-size: 13px !important;
  }

  .table-wrap {
    border-radius: 20px !important;
  }

  .ticket-card {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .ticket-card img {
    width: 210px !important;
    margin: 0 auto !important;
  }
}


/* =========================================================
   ARDE Tickets · Mobile Pro
   ========================================================= */

@media (min-width: 1025px) {
  .mobile-bottom-nav,
  .mobile-only-pro,
  .mobile-table-cards {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  html {
    background: #050507 !important;
  }

  body.mobile-enhanced {
    padding: 10px 10px calc(104px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    min-height: 100dvh !important;
    background:
      radial-gradient(circle at 20% -8%, rgba(255, 75, 31, .32), transparent 24rem),
      radial-gradient(circle at 100% 8%, rgba(53, 208, 127, .12), transparent 20rem),
      linear-gradient(180deg, #0b0b0e 0%, #050507 100%) !important;
  }

  body.mobile-enhanced .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.mobile-enhanced .topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 70 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;
    background: rgba(8,8,11,.78) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  }

  body.mobile-enhanced .topbar .nav-pills {
    display: none !important;
  }

  body.mobile-enhanced .brand {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.mobile-enhanced .brand img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    box-shadow: 0 12px 32px rgba(255,75,31,.22) !important;
  }

  body.mobile-enhanced .brand-title strong {
    font-size: 16px !important;
    letter-spacing: -.055em !important;
  }

  body.mobile-enhanced .brand-title span {
    font-size: 11px !important;
    max-width: 230px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 26px !important;
    background: rgba(8,8,11,.86) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.58) !important;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-width: 0 !important;
    min-height: 54px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: #f7f2ef !important;
    text-decoration: none !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 6px 3px !important;
    font: inherit !important;
  }

  .mobile-bottom-nav a span,
  .mobile-bottom-nav button span {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.07) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
  }

  .mobile-bottom-nav a b,
  .mobile-bottom-nav button b {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
  }

  .mobile-bottom-nav a.active {
    border-color: rgba(255,75,31,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,75,31,.25), transparent 4rem),
      rgba(255,75,31,.13) !important;
  }

  .mobile-bottom-nav a.active span {
    background: linear-gradient(135deg, #ff4b1f, #ff9068) !important;
    color: #190805 !important;
  }

  .mobile-bottom-nav .mobile-logout {
    cursor: pointer !important;
  }

  body.mobile-enhanced .hero,
  body.mobile-enhanced .grid-2,
  body.mobile-enhanced .grid-3,
  body.mobile-enhanced .grid-4,
  body.mobile-enhanced .row,
  body.mobile-enhanced .row-3 {
    grid-template-columns: 1fr !important;
  }

  body.mobile-enhanced .card {
    border-radius: 26px !important;
    padding: 16px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.30) !important;
  }

  body.mobile-enhanced .card h1 {
    font-size: 35px !important;
    line-height: .93 !important;
    letter-spacing: -.08em !important;
  }

  body.mobile-enhanced .card h2 {
    font-size: 24px !important;
    letter-spacing: -.065em !important;
  }

  body.mobile-enhanced .card h3 {
    font-size: 18px !important;
  }

  body.mobile-enhanced label {
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
  }

  body.mobile-enhanced input,
  body.mobile-enhanced select,
  body.mobile-enhanced textarea {
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 14px 14px !important;
    font-size: 16px !important;
    background: rgba(0,0,0,.30) !important;
  }

  body.mobile-enhanced textarea {
    min-height: 76px !important;
  }

  body.mobile-enhanced .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  body.mobile-enhanced .actions .btn,
  body.mobile-enhanced .actions a.btn,
  body.mobile-enhanced .actions button,
  body.mobile-enhanced .btn.full {
    width: 100% !important;
    min-height: 52px !important;
  }

  body.mobile-enhanced .btn {
    border-radius: 18px !important;
    min-height: 50px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body.mobile-enhanced .btn.primary,
  body.mobile-enhanced .btn-generar-pro {
    min-height: 58px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 36px rgba(255,75,31,.22) !important;
  }

  body.mobile-enhanced .notice {
    border-radius: 22px !important;
    padding: 14px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  body.mobile-enhanced .notice.ok,
  body.mobile-enhanced .badge.ok {
    border-color: rgba(53,208,127,.44) !important;
    background:
      radial-gradient(circle at top left, rgba(53,208,127,.18), transparent 12rem),
      rgba(53,208,127,.10) !important;
    color: #d8ffe9 !important;
  }

  .mobile-only-pro {
    display: block !important;
  }

  /* Vendedor mobile */
  body.page-vendedor .hero {
    margin: 0 0 10px !important;
    gap: 10px !important;
  }

  body.page-vendedor .hero .card.soft {
    display: none !important;
  }

  body.page-vendedor #formTicket {
    gap: 11px !important;
  }

  body.page-vendedor #duplicadosBox {
    margin-top: 4px !important;
  }

  body.page-vendedor aside.card {
    margin-top: 10px !important;
  }

  body.page-vendedor .mobile-ultimo-qr {
    font-size: 13px !important;
  }

  body.page-vendedor .ticket-card {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  body.page-vendedor .ticket-card img {
    width: 190px !important;
    height: 190px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    padding: 9px !important;
  }

  /* Lista mobile */
  body.page-resumen .desktop-table,
  body.page-resumen .table-wrap,
  body.page-admin .desktop-table,
  body.page-admin .table-wrap {
    display: none !important;
  }

  body.page-resumen .mobile-list,
  body.page-resumen .mobile-list-pro,
  body.page-admin .mobile-list,
  body.page-admin .mobile-list-pro {
    display: grid !important;
    gap: 11px !important;
  }

  .mobile-table-cards {
    display: grid !important;
    gap: 11px !important;
  }

  .mobile-data-card,
  body.page-resumen .ticket-card,
  body.page-admin .ticket-card {
    border: 1px solid rgba(255,255,255,.12) !important;
    background:
      radial-gradient(circle at top left, rgba(255,75,31,.10), transparent 11rem),
      rgba(255,255,255,.045) !important;
    border-radius: 24px !important;
    padding: 14px !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.26) !important;
  }

  body.page-resumen .ticket-card,
  body.page-admin .ticket-card {
    grid-template-columns: 74px 1fr !important;
    align-items: start !important;
  }

  body.page-resumen .ticket-card img,
  body.page-admin .ticket-card img {
    width: 74px !important;
    height: 74px !important;
    border-radius: 18px !important;
  }

  .mobile-data-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 11px !important;
  }

  .mobile-data-head strong {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .mobile-data-head small {
    display: block !important;
    color: var(--muted, #aaa) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
  }

  .mobile-data-body {
    display: grid !important;
    gap: 7px !important;
    margin: 10px 0 !important;
  }

  .mobile-data-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  .mobile-data-row span {
    color: var(--muted, #aaa) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
  }

  .mobile-data-row b {
    text-align: right !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  .mobile-data-actions {
    margin-top: 12px !important;
  }

  /* Scanner mobile */
  body.page-scan .scan-page,
  body.page-scan .app-shell {
    width: 100% !important;
  }

  body.page-scan .scan-hero {
    margin-bottom: 10px !important;
  }

  body.page-scan .reader-shell,
  body.page-scan #reader {
    min-height: 56dvh !important;
  }

  body.page-scan .scan-actions {
    grid-template-columns: 1fr !important;
  }

  body.page-scan .scan-result h2 {
    font-size: 48px !important;
  }

  body.page-scan .confirm-card {
    margin-bottom: 84px !important;
  }

  /* Login mobile */
  body.page-login {
    padding: 16px !important;
    display: grid !important;
    place-items: center !important;
    min-height: 100dvh !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(255,75,31,.30), transparent 22rem),
      radial-gradient(circle at 100% 100%, rgba(53,208,127,.10), transparent 18rem),
      linear-gradient(180deg, #09090c, #050507) !important;
  }

  body.page-login .app-shell {
    width: 100% !important;
    max-width: 440px !important;
    padding: 0 !important;
  }

  body.page-login .topbar {
    display: none !important;
  }

  body.page-login .card,
  body.page-login form {
    width: 100% !important;
    border-radius: 32px !important;
    padding: 22px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
      radial-gradient(circle at top left, rgba(255,75,31,.15), transparent 15rem),
      rgba(255,255,255,.055) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55) !important;
  }

  .login-brand-mobile {
    text-align: center !important;
    margin-bottom: 18px !important;
  }

  .login-brand-mobile img {
    width: 76px !important;
    height: 76px !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 46px rgba(255,75,31,.26) !important;
    margin-bottom: 12px !important;
  }

  .login-brand-mobile h1 {
    margin: 0 !important;
    font-size: 36px !important;
    line-height: .9 !important;
    letter-spacing: -.09em !important;
  }

  .login-brand-mobile p {
    margin: 10px auto 0 !important;
    color: var(--muted, #aaa) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-width: 320px !important;
  }
}


/* =========================================================
   ARDE Tickets · Mobile Fix V2
   Corrige navegación superior y tablas en celular
   ========================================================= */

@media (min-width: 1025px) {
  .arde-bottom-nav-v2,
  .arde-mobile-ticket-list-v2 {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.arde-mobile-v2 {
    padding: 10px 10px calc(104px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 20% -10%, rgba(255, 77, 29, .28), transparent 23rem),
      radial-gradient(circle at 100% 0%, rgba(36, 212, 126, .10), transparent 19rem),
      #07070a !important;
  }

  body.arde-mobile-v2 .app-shell,
  body.arde-mobile-v2 main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Header mobile: solo marca + salir chico */
  body.arde-mobile-v2 .topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 0 12px !important;
    border-radius: 24px !important;
    background: rgba(9, 9, 13, .82) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
  }

  body.arde-mobile-v2 .topbar nav,
  body.arde-mobile-v2 .topbar .nav,
  body.arde-mobile-v2 .topbar .nav-pills,
  body.arde-mobile-v2 .topbar .tabs,
  body.arde-mobile-v2 .topbar .menu,
  body.arde-mobile-v2 .topbar .actions {
    display: none !important;
  }

  body.arde-mobile-v2 .topbar a:not(.brand):not(.mobile-top-logout),
  body.arde-mobile-v2 .topbar button:not(.mobile-top-logout) {
    display: none !important;
  }

  body.arde-mobile-v2 .topbar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: auto !important;
    text-decoration: none !important;
  }

  body.arde-mobile-v2 .topbar .brand img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  body.arde-mobile-v2 .brand-title strong {
    display: block !important;
    font-size: 17px !important;
    line-height: 1 !important;
    letter-spacing: -.06em !important;
  }

  body.arde-mobile-v2 .brand-title span {
    display: block !important;
    max-width: 180px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    color: rgba(255,255,255,.58) !important;
  }

  body.arde-mobile-v2 .mobile-top-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #ffe9e4 !important;
    border: 1px solid rgba(255, 77, 29, .30) !important;
    background: rgba(255, 77, 29, .08) !important;
  }

  /* Bottom nav real */
  .arde-bottom-nav-v2 {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(8, 8, 12, .88) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.62) !important;
  }

  .arde-bottom-nav-v2 a {
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 6px 3px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    color: #f8f4f0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.045) !important;
  }

  .arde-bottom-nav-v2 a span {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.075) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
  }

  .arde-bottom-nav-v2 a b {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
  }

  .arde-bottom-nav-v2 a.active {
    border-color: rgba(255, 77, 29, .58) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.28), transparent 4rem),
      rgba(255,77,29,.12) !important;
  }

  .arde-bottom-nav-v2 a.active span {
    background: linear-gradient(135deg, #ff4d1d, #ff936c) !important;
    color: #190805 !important;
  }

  /* Evitar cualquier desborde horizontal */
  body.arde-mobile-v2 .card,
  body.arde-mobile-v2 section,
  body.arde-mobile-v2 article,
  body.arde-mobile-v2 div {
    max-width: 100% !important;
  }

  body.arde-mobile-v2 .card {
    border-radius: 26px !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  body.arde-mobile-v2 input,
  body.arde-mobile-v2 select,
  body.arde-mobile-v2 textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  body.arde-mobile-v2 .row,
  body.arde-mobile-v2 .row-2,
  body.arde-mobile-v2 .row-3,
  body.arde-mobile-v2 .grid,
  body.arde-mobile-v2 .grid-2,
  body.arde-mobile-v2 .grid-3,
  body.arde-mobile-v2 .grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.arde-mobile-v2 .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.arde-mobile-v2 .actions .btn,
  body.arde-mobile-v2 .actions button,
  body.arde-mobile-v2 .actions a {
    width: 100% !important;
    min-height: 50px !important;
  }

  /* Lista: ocultar tablas y mostrar tarjetas */
  body.arde-mobile-v2 .arde-desktop-table-hidden-mobile,
  body.arde-mobile-v2 .table-wrap,
  body.arde-mobile-v2 table {
    display: none !important;
  }

  .arde-mobile-ticket-list-v2 {
    display: grid !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .arde-ticket-card-v2 {
    width: 100% !important;
    border-radius: 24px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background:
      radial-gradient(circle at top left, rgba(255,77,29,.12), transparent 12rem),
      rgba(255,255,255,.045) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.28) !important;
  }

  .arde-ticket-card-head-v2 {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .arde-ticket-card-head-v2 small {
    display: block !important;
    color: rgba(255,255,255,.55) !important;
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .arde-ticket-card-head-v2 strong {
    display: block !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
    color: #fff6ef !important;
  }

  .arde-ticket-estado-v2 {
    flex: 0 0 auto !important;
  }

  .arde-ticket-estado-v2 .badge,
  .arde-ticket-estado-v2 span {
    white-space: nowrap !important;
  }

  .arde-ticket-data-v2 {
    display: grid !important;
    gap: 8px !important;
  }

  .arde-ticket-data-v2 div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
  }

  .arde-ticket-data-v2 span {
    color: rgba(255,255,255,.55) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .arde-ticket-data-v2 b {
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .arde-ticket-actions-v2 {
    margin-top: 13px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .arde-ticket-actions-v2 a,
  .arde-ticket-actions-v2 button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  .arde-empty-mobile {
    padding: 16px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.62) !important;
  }
}


/* =========================================================
   ARDE Tickets - Mobile final estructural
   No depende de arde-hard-mobile.js
   ========================================================= */
.mobile-tickets-list-final,
.arde-mobile-bottom-final,
.arde-mobile-logout-final {
  display: none;
}

@media (max-width: 1024px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding: 10px 10px calc(104px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 12% -10%, rgba(255,77,29,.24), transparent 22rem),
      radial-gradient(circle at 100% 0%, rgba(37,220,132,.10), transparent 18rem),
      #07070a !important;
  }

  .app-shell, main, section, .container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 80 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 10px !important;
    margin: 0 0 12px !important;
    border-radius: 24px !important;
    background: rgba(9,9,13,.88) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.42) !important;
  }

  .topbar .nav-pills,
  .topbar [data-nav] {
    display: none !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .brand img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    flex: 0 0 auto !important;
  }

  .brand-title strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: -.06em !important;
  }

  .brand-title span {
    display: block !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 11px !important;
  }

  .arde-mobile-logout-final {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 15px !important;
    color: #ffe9e4 !important;
    border: 1px solid rgba(255,77,29,.34) !important;
    background: rgba(255,77,29,.10) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  .arde-mobile-bottom-final {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 99999 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(8,8,12,.92) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.66) !important;
  }

  .arde-mobile-bottom-final a {
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 6px 3px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    color: #f8f4f0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.045) !important;
  }

  .arde-mobile-bottom-final a i {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.075) !important;
    font-style: normal !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  .arde-mobile-bottom-final a span {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
  }

  .arde-mobile-bottom-final a.active {
    border-color: rgba(255,77,29,.60) !important;
    background: radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem), rgba(255,77,29,.13) !important;
  }

  .arde-mobile-bottom-final a.active i {
    background: linear-gradient(135deg, #ff4d1d, #ff936c) !important;
    color: #190805 !important;
  }

  .row, .row-3, .grid, .grid-3, .grid-4, .scan-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  input, select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .actions .btn, .actions button, .actions a {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.page-resumen .table-wrap,
  body.page-admin .table-wrap {
    display: none !important;
  }

  .mobile-tickets-list-final {
    display: grid !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .mobile-ticket-card-final {
    width: 100% !important;
    border-radius: 24px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: radial-gradient(circle at top left, rgba(255,77,29,.13), transparent 12rem), rgba(255,255,255,.045) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.30) !important;
  }

  .mobile-ticket-head-final {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .mobile-ticket-head-final small {
    display: block !important;
    color: rgba(255,255,255,.55) !important;
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .mobile-ticket-head-final strong {
    display: block !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
    color: #fff6ef !important;
  }

  .mobile-ticket-status-final {
    flex: 0 0 auto !important;
    max-width: 45% !important;
    text-align: right !important;
  }

  .mobile-ticket-data-final {
    display: grid !important;
    gap: 8px !important;
  }

  .mobile-ticket-data-final div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
  }

  .mobile-ticket-data-final span {
    color: rgba(255,255,255,.55) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .mobile-ticket-data-final b {
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-ticket-actions-final {
    margin-top: 13px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mobile-ticket-actions-final a,
  .mobile-ticket-actions-final button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
}


/* =========================================================
   ARDE Tickets · Iconos reales navbar inferior
   ========================================================= */

@media (max-width: 1024px) {
  .arde-mobile-bottom-final a i.arde-nav-svg {
    width: 31px !important;
    height: 31px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    background:
      radial-gradient(circle at 35% 20%, rgba(255,255,255,.17), transparent 55%),
      rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .arde-mobile-bottom-final a i.arde-nav-svg svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: #f7f1ec !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .arde-mobile-bottom-final a.active i.arde-nav-svg {
    background:
      radial-gradient(circle at 35% 20%, rgba(255,255,255,.34), transparent 55%),
      linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
      0 10px 24px rgba(255,77,29,.30),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  .arde-mobile-bottom-final a.active i.arde-nav-svg svg {
    stroke: #190805 !important;
    stroke-width: 2.15 !important;
  }

  .arde-mobile-bottom-final a span {
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }
}

/* ==========================================================
   ARDE Tickets - Fix definitivo bottom nav / iconos gigantes
   Corrige íconos enormes que aparecen abajo en todas las páginas
   ========================================================== */

/* Por defecto, ninguna nav mobile debe aparecer en escritorio */
.arde-bottom-nav,
.mobile-bottom-nav,
.bottom-nav,
.arde-mobile-bottom-nav,
.arde-bottom-nav-v2,
.arde-hard-bottom-nav,
.arde-mobile-bottom-final,
.arde-bottom-nav-force,
.arde-mobile-bottom-pro,
.arde-quickbar,
.quickbar {
  display: none !important;
}

/* Cualquier SVG suelto dentro de navs queda limitado */
.arde-bottom-nav svg,
.mobile-bottom-nav svg,
.bottom-nav svg,
.arde-mobile-bottom-nav svg,
.arde-bottom-nav-v2 svg,
.arde-hard-bottom-nav svg,
.arde-mobile-bottom-final svg,
.arde-bottom-nav-force svg,
.arde-mobile-bottom-pro svg,
.arde-quickbar svg,
.quickbar svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
}

/* Mobile: dejamos solo una bottom nav correcta, compacta y profesional */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .arde-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 99999 !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;

    width: auto !important;
    height: auto !important;
    max-height: 84px !important;

    padding: 8px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 26px !important;
    background: rgba(8,8,12,.92) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.62) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    overflow: hidden !important;
  }

  .arde-bottom-nav a {
    min-width: 0 !important;
    min-height: 58px !important;
    max-height: 66px !important;

    display: grid !important;
    place-items: center !important;
    gap: 4px !important;

    padding: 6px 2px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 19px !important;
    background: rgba(255,255,255,.045) !important;

    color: #f8f2ec !important;
    text-decoration: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    overflow: hidden !important;
  }

  .arde-bottom-nav a i,
  .arde-bottom-nav a .icon,
  .arde-bottom-nav a .nav-icon {
    width: 28px !important;
    height: 28px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 13px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.09) !important;

    font-style: normal !important;
    overflow: hidden !important;
  }

  .arde-bottom-nav a svg {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;

    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .arde-bottom-nav a span {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .arde-bottom-nav a.active {
    border-color: rgba(255,77,29,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem),
      rgba(255,77,29,.13) !important;
  }

  .arde-bottom-nav a.active i,
  .arde-bottom-nav a.active .icon,
  .arde-bottom-nav a.active .nav-icon {
    color: #190805 !important;
    background: linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255,77,29,.30) !important;
  }
}

/* Seguridad extra: si algún SVG gigante quedó fuera de nav pero dentro de body al final */
body > svg {
  max-width: 32px !important;
  max-height: 32px !important;
}

/* ==========================================================
   ARDE Tickets - NAV MOBILE DEFINITIVA
   Corrige íconos gigantes y unifica navegación inferior.
   ========================================================== */

@media (min-width: 901px) {
  .arde-bottom-nav,
  .arde-bottom-nav-hard,
  .mobile-bottom-nav,
  .bottom-nav,
  .arde-mobile-bottom-nav,
  .arde-bottom-nav-v2,
  .arde-hard-bottom-nav,
  .arde-mobile-bottom-final,
  .arde-bottom-nav-force,
  .arde-bottom-nav-force,
  .arde-bottom-nav-force *,
  .arde-mobile-bottom-pro,
  .arde-quickbar,
  .quickbar {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .arde-bottom-nav,
  .arde-bottom-nav-hard {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 999999 !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;

    width: auto !important;
    height: auto !important;
    max-height: 86px !important;

    padding: 8px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.92) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;

    overflow: hidden !important;
  }

  .arde-bottom-nav a,
  .arde-bottom-nav-hard a {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    max-height: 68px !important;

    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;

    padding: 6px 2px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.045) !important;

    color: #f8f2ec !important;
    text-decoration: none !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;

    overflow: hidden !important;
  }

  .arde-bottom-nav a svg,
  .arde-bottom-nav-hard a svg,
  .arde-bottom-nav svg,
  .arde-bottom-nav-hard svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    transform: none !important;
  }

  .arde-bottom-nav a i,
  .arde-bottom-nav-hard a i,
  .arde-bottom-nav a .icon,
  .arde-bottom-nav-hard a .icon,
  .arde-bottom-nav a .nav-icon,
  .arde-bottom-nav-hard a .nav-icon {
    width: 30px !important;
    height: 30px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 13px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.09) !important;

    font-style: normal !important;
    overflow: hidden !important;
  }

  .arde-bottom-nav a span,
  .arde-bottom-nav-hard a span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .arde-bottom-nav a.active,
  .arde-bottom-nav-hard a.arde-active,
  .arde-bottom-nav-hard a.active {
    border-color: rgba(255,77,29,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem),
      rgba(255,77,29,.13) !important;
  }

  .arde-bottom-nav a.active i,
  .arde-bottom-nav-hard a.arde-active i,
  .arde-bottom-nav-hard a.active i,
  .arde-bottom-nav a.active .icon,
  .arde-bottom-nav-hard a.arde-active .icon,
  .arde-bottom-nav-hard a.active .icon {
    color: #190805 !important;
    background: linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255,77,29,.30) !important;
  }

  body > svg,
  main > svg,
  .app-shell > svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
}

/* ==========================================================
   ARDE Tickets - FIX REAL arde-unified-bottom
   La barra que estaba quedando con SVG gigantes en eventos.
   ========================================================== */

@media (min-width: 901px) {
  .arde-unified-bottom {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .arde-unified-bottom {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 999999 !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;

    width: auto !important;
    height: auto !important;
    min-height: 74px !important;
    max-height: 88px !important;

    padding: 8px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.92) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;

    overflow: hidden !important;
  }

  .arde-unified-bottom a,
  .arde-unified-bottom button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    max-height: 68px !important;

    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;

    padding: 6px 2px !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.045) !important;

    color: #f8f2ec !important;
    text-decoration: none !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;

    overflow: hidden !important;
  }

  .arde-unified-bottom a svg,
  .arde-unified-bottom button svg,
  .arde-unified-bottom svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    transform: none !important;
  }

  .arde-unified-bottom a b,
  .arde-unified-bottom a i,
  .arde-unified-bottom button b,
  .arde-unified-bottom button i,
  .arde-unified-bottom .icon,
  .arde-unified-bottom .nav-icon {
    width: 30px !important;
    height: 30px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 13px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.09) !important;

    font-style: normal !important;
    overflow: hidden !important;
  }

  .arde-unified-bottom a span,
  .arde-unified-bottom button span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .arde-unified-bottom a.active,
  .arde-unified-bottom button.active,
  .arde-unified-bottom a.arde-active,
  .arde-unified-bottom button.arde-active {
    border-color: rgba(255,77,29,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem),
      rgba(255,77,29,.13) !important;
  }

  .arde-unified-bottom a.active b,
  .arde-unified-bottom a.active i,
  .arde-unified-bottom button.active b,
  .arde-unified-bottom button.active i,
  .arde-unified-bottom a.arde-active b,
  .arde-unified-bottom a.arde-active i,
  .arde-unified-bottom button.arde-active b,
  .arde-unified-bottom button.arde-active i {
    color: #190805 !important;
    background: linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255,77,29,.30) !important;
  }
}

/* ==========================================================
   ARDE Tickets - Unificar navbar inferior
   Usar solo .arde-unified-bottom en todas las páginas
   ========================================================== */

.arde-bottom-nav-hard,
.arde-bottom-nav:not(.arde-unified-bottom),
.mobile-bottom-nav,
.arde-mobile-bottom-nav,
.arde-bottom-nav-v2,
.arde-hard-bottom-nav,
.arde-mobile-bottom-final,
.arde-bottom-nav-force,
.arde-bottom-nav-force *,
.arde-mobile-bottom-pro,
.arde-quickbar,
.quickbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  .arde-unified-bottom {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================
   ARDE Tickets - navbar única definitiva
   ========================================================== */

.arde-bottom-nav-hard,
.arde-bottom-nav:not(.arde-unified-bottom),
.mobile-bottom-nav,
.arde-mobile-bottom-nav,
.arde-bottom-nav-v2,
.arde-hard-bottom-nav,
.arde-mobile-bottom-final,
.arde-bottom-nav-force,
.arde-mobile-bottom-pro,
.arde-quickbar,
.quickbar {
  display: none !important;
}

@media (min-width: 901px) {
  .arde-unified-bottom {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .arde-unified-bottom {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 999999 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;

    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.94) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    overflow: hidden !important;
  }

  .arde-unified-bottom a {
    min-height: 62px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;

    padding: 6px 2px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.045) !important;

    color: #f8f2ec !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  .arde-unified-bottom a i {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    font-style: normal !important;
  }

  .arde-unified-bottom svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .arde-unified-bottom span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .arde-unified-bottom a.active,
  .arde-unified-bottom a.arde-active {
    border-color: rgba(255,77,29,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem),
      rgba(255,77,29,.13) !important;
  }

  .arde-unified-bottom a.active i,
  .arde-unified-bottom a.arde-active i {
    color: #190805 !important;
    background: linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255,77,29,.30) !important;
  }
}

/* ==========================================================
   ARDE Tickets - Mobile Nav Final
   Navbar inferior única, independiente de auth-ui.js
   ========================================================== */

.arde-mobile-nav-final {
  display: none;
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(106px + env(safe-area-inset-bottom)) !important;
  }

  .arde-mobile-nav-final {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 999999 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;

    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.94) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    overflow: hidden !important;
  }

  .arde-mobile-nav-final a {
    min-height: 62px !important;

    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;

    padding: 6px 2px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.045) !important;

    color: #f8f2ec !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  .arde-mobile-nav-final a i {
    width: 32px !important;
    height: 32px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.09) !important;

    font-style: normal !important;
  }

  .arde-mobile-nav-final svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .arde-mobile-nav-final span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .arde-mobile-nav-final a.active {
    border-color: rgba(255,77,29,.56) !important;
    background:
      radial-gradient(circle at top, rgba(255,77,29,.30), transparent 4rem),
      rgba(255,77,29,.13) !important;
  }

  .arde-mobile-nav-final a.active i {
    color: #190805 !important;
    background: linear-gradient(135deg, #ff4d1d, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255,77,29,.30) !important;
  }
}

/* ARDE Dashboard clean · acciones rápidas */
.quick-actions#accionesRapidas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-actions#accionesRapidas .btn {
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 1.15;
}

@media (max-width: 720px) {
  .quick-actions#accionesRapidas {
    grid-template-columns: 1fr;
  }

  .quick-actions#accionesRapidas .btn {
    min-height: 48px;
  }
}