/* =========================================================================
   AutoNave MX — sistema visual "Panel profesional"
   Oscuro y elegante por defecto (con modo claro disponible), tarjetas
   redondeadas, sombras suaves, un acento azul confiable. Tipografía y
   contraste pensados para que lo use cómodamente cualquier persona,
   de cualquier edad.
   ========================================================================= */

:root{
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#EEF1F8;
  --surface-3:#E4E8F2;
  --text:#161B29;
  --text-dim:#5B6479;
  --text-faint:#8A93A6;
  --border:#E3E7F0;

  --accent:#3D7AF5;
  --accent-2:#6D5CE0;
  --accent-ink:#FFFFFF;
  --accent-soft-bg:#E8EFFE;

  --teal:#0D9488;
  --teal-bg:#E1F6F3;
  --green:#16A34A;
  --green-bg:#E7F7ED;
  --red:#DC3D3D;
  --red-bg:#FCEAEA;
  --amber:#C9820A;
  --amber-bg:#FDF3E0;

  --radius-lg:24px;
  --radius:18px;
  --radius-sm:14px;
  --nav-h:78px;

  --shadow-sm: 0 1px 3px rgba(23,32,60,.06), 0 1px 2px rgba(23,32,60,.06);
  --shadow-md: 0 10px 24px -8px rgba(23,32,60,.16);
  --shadow-lg: 0 18px 40px -12px rgba(23,32,60,.22);
  --shadow-accent: 0 10px 22px -6px rgba(61,122,245,.38);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --_dark:1; }
}

/* La app se ve oscura por defecto salvo que el sistema pida claro
   explícitamente y el usuario no haya forzado un tema. */
:root:not([data-theme="light"]){
  --bg:#0E1220;
  --surface:#171C2C;
  --surface-2:#1E2436;
  --surface-3:#262D42;
  --text:#F3F5F9;
  --text-dim:#9AA3B8;
  --text-faint:#6B7488;
  --border:#262D42;

  --accent:#4C8DFF;
  --accent-2:#8B7CFF;
  --accent-ink:#0B1226;
  --accent-soft-bg:#182642;

  --teal:#2DD4BF;
  --teal-bg:#0F2B29;
  --green:#34D399;
  --green-bg:#0F2A22;
  --red:#F87171;
  --red-bg:#331616;
  --amber:#FBBF24;
  --amber-bg:#332707;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 10px 26px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 44px -14px rgba(0,0,0,.55);
  --shadow-accent: 0 12px 26px -6px rgba(76,141,255,.35);
  color-scheme: dark;
}

:root[data-theme="dark"]{
  --bg:#0E1220;
  --surface:#171C2C;
  --surface-2:#1E2436;
  --surface-3:#262D42;
  --text:#F3F5F9;
  --text-dim:#9AA3B8;
  --text-faint:#6B7488;
  --border:#262D42;

  --accent:#4C8DFF;
  --accent-2:#8B7CFF;
  --accent-ink:#0B1226;
  --accent-soft-bg:#182642;

  --teal:#2DD4BF;
  --teal-bg:#0F2B29;
  --green:#34D399;
  --green-bg:#0F2A22;
  --red:#F87171;
  --red-bg:#331616;
  --amber:#FBBF24;
  --amber-bg:#332707;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 10px 26px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 44px -14px rgba(0,0,0,.55);
  --shadow-accent: 0 12px 26px -6px rgba(76,141,255,.35);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  font-size:15px;
  line-height:1.45;
}
button,input,select,textarea{font-family:inherit; color:inherit;}
a{color:var(--accent);}
h1,h2,h3,h4,p{margin:0;}
button{cursor:pointer; border:none; background:none;}

input,select,textarea{
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  width:100%;
  outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft-bg); }
input::placeholder{color:var(--text-faint); font-weight:400;}
label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px; font-weight:700;}
.field{margin-bottom:15px;}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; border-radius:var(--radius-sm); font-weight:700; font-size:15.5px;
  width:100%; border:1.5px solid transparent;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-accent); }
.btn-success{ background:var(--green); color:#06281A; }
.btn-danger{ background:var(--red); color:#fff; }
.btn-outline{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost{ background:transparent; color:var(--text-dim); }
.btn-ghost:active{ transform:none; opacity:.7; }
.btn-sm{ padding:10px 14px; font-size:13.5px; width:auto; }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface); color:var(--text); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:13px; font-weight:700; font-size:14.5px; width:100%;
}
.btn-google:active{ transform:scale(.97); }

#app{ min-height:100%; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 18px); }

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding: calc(14px + var(--safe-t)) 18px 14px;
  display:flex; align-items:center; gap:12px;
}
.topbar h1{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
.topbar .back{
  width:38px; height:38px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.topbar .spacer{flex:1;}
.topbar .action{
  width:38px; height:38px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-size:15px; position:relative;
}

.view{padding:0 18px 18px; max-width:640px; margin:0 auto;}

/* ---------- encabezado de saludo (home) ---------- */
.greeting-header{ display:flex; align-items:center; gap:12px; padding:calc(14px + var(--safe-t)) 18px 6px; }
.greeting-avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:17px;
  box-shadow:var(--shadow-accent);
}
.greeting-text{ flex:1; min-width:0; }
.greeting-hello{ font-size:12.5px; color:var(--text-dim); font-weight:700; }
.greeting-name{ font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.greeting-bell{
  width:42px; height:42px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; position:relative;
}
.greeting-bell .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--bg); }

.search-bar{
  display:flex; align-items:center; gap:10px; background:var(--surface); box-shadow:var(--shadow-sm);
  border-radius:999px; padding:13px 18px; margin:14px 18px 4px;
}
.search-bar input{background:none; border:none; padding:0; width:100%; font-size:15px;}
.search-bar .ic{ font-size:16px; color:var(--text-faint); }

/* ---------- carrusel horizontal ---------- */
.hscroll{
  display:flex; gap:12px; overflow-x:auto; padding:2px 18px 10px; margin:0 -18px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll > *{ scroll-snap-align:start; flex-shrink:0; }

.appt-card{
  width:250px; background:var(--surface); border-radius:var(--radius-lg); padding:16px;
  box-shadow:var(--shadow-md); text-align:left; display:flex; flex-direction:column; gap:10px;
}
.appt-card .top-row{ display:flex; align-items:center; gap:10px; }
.appt-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; background:var(--accent-soft-bg);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.appt-card .who{ flex:1; min-width:0; }
.appt-card .who .name{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-card .who .sub{ font-size:12px; color:var(--text-dim); font-weight:600; }
.appt-card .meta-row{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border); }
.appt-card .amount{ font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }

.empty-carousel{
  width:250px; border:1.5px dashed var(--border); border-radius:var(--radius-lg); padding:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--text-dim);
}
.empty-carousel .e{ font-size:26px; }
.empty-carousel .btn{ margin-top:4px; }

/* ---------- chips rápidos de tipo de vehículo (scroll horizontal) ------- */
.quick-row{ display:flex; gap:10px; overflow-x:auto; padding:2px 18px 6px; margin:0 -18px; -webkit-overflow-scrolling:touch; }
.quick-row::-webkit-scrollbar{display:none;}
.quick-chip{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  width:76px; padding:12px 6px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);
}
.quick-chip .e{
  width:42px; height:42px; border-radius:50%; background:var(--accent-soft-bg); display:flex; align-items:center; justify-content:center; font-size:19px;
}
.quick-chip .t{ font-size:11px; font-weight:700; color:var(--text-dim); text-align:center; line-height:1.25; }
.quick-chip:active{ transform:scale(.96); }

/* ---------- hero (resumen del día) ---------- */
.hero{
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding:22px 22px; color:#fff; margin-bottom:16px;
  box-shadow: var(--shadow-accent);
}
.hero .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; opacity:.85; }
.hero .amount{ font-size:34px; font-weight:800; margin-top:4px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero .sub{ font-size:13px; font-weight:600; margin-top:8px; opacity:.85; }

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}

.card{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:18px; margin-bottom:14px;
}
.card-tight{padding:13px 15px;}

.stat-card{
  background:var(--surface); border-radius:var(--radius); padding:15px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--accent);
}
.stat-card .icon{ font-size:19px; }
.stat-card .label{font-size:12px; color:var(--text-dim); margin-top:7px; font-weight:600;}
.stat-card .value{font-size:19px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums;}
.stat-card.blue{ border-left-color:var(--teal); }
.stat-card.green{ border-left-color:var(--green); }
.stat-card.purple{ border-left-color:var(--accent-2); }
.stat-card.orange{ border-left-color:var(--amber); }

.section-title{
  font-size:13.5px; font-weight:800; color:var(--text);
  margin:24px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.section-title .see-all{ font-size:12.5px; font-weight:700; color:var(--accent); }
.section-title:first-child{margin-top:0;}

.list{display:flex; flex-direction:column; gap:10px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.row + .row{margin-top:8px;}
.divider{height:1px; background:var(--border); margin:12px 0;}

/* ---------- fila de ticket (lista vertical: Historial, activos, etc.) --- */
.ticket-card{
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  width:100%; text-align:left;
}
button.ticket-card:active{ transform:scale(.985); }
.ticket-card.status-closed{ opacity:.86; }

.ticket-stub{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:var(--accent-soft-bg); display:flex; align-items:center; justify-content:center;
}
.ticket-emoji{font-size:21px;}
.ticket-perf{ display:none; }
.ticket-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ticket-id{ font-weight:800; font-size:14.5px; }
.ticket-meta{ font-size:12.5px; color:var(--text-dim); font-weight:600; }
.ticket-side{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ticket-amount{ font-weight:800; font-variant-numeric:tabular-nums; font-size:14.5px; }

.stamp{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.stamp-open{ background:var(--amber-bg); color:var(--amber); }
.stamp-closed{ background:var(--green-bg); color:var(--green); }

.badge{display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800;}
.badge.open{background:var(--amber-bg); color:var(--amber);}
.badge.closed{background:var(--green-bg); color:var(--green);}

.empty{ text-align:center; padding:44px 20px; color:var(--text-dim); }
.empty .big-emoji{font-size:44px; margin-bottom:10px;}
.empty h3{color:var(--text); margin-bottom:6px; font-size:16px; font-weight:800;}
.empty p{font-size:14px; line-height:1.5;}

/* ---------- navegación inferior: barra flotante con píldora activa ------ */
.bottom-nav{
  position:fixed; left:14px; right:14px; bottom: calc(12px + var(--safe-b)); z-index:30;
  background:var(--surface); border-radius:26px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; padding:8px; height:calc(var(--nav-h) - 12px);
}
.bottom-nav button{
  flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; font-weight:700; color:var(--text-faint); border-radius:18px;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.bottom-nav button .ic{ font-size:19px; line-height:1; }
.bottom-nav button .nav-label{ letter-spacing:.01em; }
.bottom-nav button.active{
  background:var(--accent-soft-bg); color:var(--accent);
}
.bottom-nav button:active{ transform:scale(.94); }

.fab{
  position:fixed; right:20px; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index:25;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(150deg, var(--accent), var(--accent-2)); color:#fff;
  font-size:28px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-accent);
  transition: transform .12s ease;
}
.fab:active{ transform:scale(.92); }

/* ---------- sheets (modales inferiores) ---------- */
.sheet-overlay{
  position:fixed; inset:0; background:rgba(8,10,20,.55); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  animation: fadeIn .15s ease;
}
.sheet{
  position:relative;
  background:var(--bg); width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  border-radius:28px 28px 0 0;
  padding-bottom: calc(20px + var(--safe-b));
  animation: slideUp .2s ease;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
}
.sheet-header{
  position:sticky; top:0; background:var(--bg); z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px; border-bottom:1px solid var(--border);
}
.sheet-header h2{font-size:16.5px; font-weight:800;}
.sheet-header .close{width:34px; height:34px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center;}
.sheet-body{padding:18px;}

@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes slideUp{from{transform:translateY(24px); opacity:.6} to{transform:translateY(0); opacity:1}}

.chip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.chip{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 6px;
  border-radius:var(--radius); border:1.5px solid var(--border); background:var(--surface);
  font-size:12.5px; font-weight:700; text-align:center;
}
.chip:active{ transform:scale(.96); }
.chip .e{ font-size:21px; }
.chip.selected{ background:var(--accent-soft-bg); border-color:var(--accent); color:var(--accent); }

.pill-row{display:flex; gap:8px; flex-wrap:wrap;}
.pill{
  padding:10px 16px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  font-size:13.5px; font-weight:700;
}
.pill:active{ transform:scale(.96); }
.pill.selected{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.addon-row{
  display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface); margin-bottom:8px;
}
.addon-row.on{ border-color:var(--accent); background:var(--accent-soft-bg); }
.addon-row .check{width:21px; height:21px; border-radius:7px; border:1.5px solid var(--text-faint); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; background:var(--surface);}
.addon-row.on .check{background:var(--accent); border-color:var(--accent); color:#fff;}
.addon-row .name{flex:1; font-weight:700; font-size:14.5px;}
.addon-row input{width:82px; text-align:right; padding:9px 10px;}

.totals-box{ background:var(--surface-2); border-radius:var(--radius); padding:16px; margin:16px 0; }
.totals-box .row{font-size:14px; color:var(--text-dim); font-weight:600;}
.totals-box .row.total{font-size:19px; font-weight:800; color:var(--text); margin-top:10px; padding-top:12px; border-top:1px solid var(--border);}

.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.menu-tile{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:18px 16px; display:flex; flex-direction:column; gap:9px; align-items:flex-start;
}
.menu-tile:active{ transform:scale(.97); }
.menu-tile .e{
  font-size:19px; width:40px; height:40px; border-radius:12px; background:var(--accent-soft-bg);
  display:flex; align-items:center; justify-content:center;
}
.menu-tile .t{font-weight:800; font-size:14.5px;}
.menu-tile .d{font-size:12px; color:var(--text-dim); line-height:1.4; font-weight:500;}

.toast-wrap{position:fixed; top:calc(12px + var(--safe-t)); left:0; right:0; z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
.toast{ background:var(--text); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-lg); max-width:88%; }
.toast.success{ background:var(--green); color:#06281A; }
.toast.error{ background:var(--red); color:#fff; }

.editable-list-item{display:flex; align-items:center; gap:11px; padding:12px 13px; background:var(--surface); box-shadow:var(--shadow-sm); border-radius:var(--radius-sm); margin-bottom:9px;}
.editable-list-item .e{font-size:20px; width:28px; text-align:center;}
.editable-list-item .name{flex:1; font-weight:700; font-size:14.5px;}
.editable-list-item input[type=number]{width:82px; text-align:right;}
.editable-list-item .del{color:var(--red); font-size:18px; padding:5px;}

.switch{position:relative; width:48px; height:28px; background:var(--surface-3); border-radius:999px; flex-shrink:0;}
.switch .knob{position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm); transition:.15s;}
.switch.on{background:var(--accent);}
.switch.on .knob{left:22px;}

.tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:999px; margin-bottom:16px;}
.tabs button{flex:1; padding:10px; border-radius:999px; font-size:13px; font-weight:700; color:var(--text-dim);}
.tabs button.active{background:var(--accent); color:var(--accent-ink);}

.bars{display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:6px;}
.bars .bar-wrap{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bars .bar{width:100%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius:7px 7px 3px 3px; min-height:3px;}
.bars .bar-label{font-size:10.5px; color:var(--text-faint); font-weight:700;}
.bars .bar-value{font-size:10.5px; color:var(--text-dim); font-weight:800;}

.ad-slot{
  margin:16px 0; padding:10px; border-radius:var(--radius-sm); border:1.5px dashed var(--border);
  text-align:center; color:var(--text-faint); font-size:11px; min-height:60px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

.install-banner{
  display:flex; align-items:center; gap:10px; background:var(--accent-soft-bg);
  border-radius:var(--radius); padding:13px 15px; margin-bottom:15px;
}
.install-banner .e{font-size:20px;}
.install-banner .t{flex:1; font-size:13.5px; font-weight:600;}

.subtext{font-size:13px; color:var(--text-dim); line-height:1.55; font-weight:500;}
.center{text-align:center;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt20{margin-top:20px;}
.mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;} .mb16{margin-bottom:16px;}
.flex{display:flex;} .gap8{gap:8px;} .gap10{gap:10px;} .gap12{gap:12px;}
.wfull{width:100%;}

/* ---------- login / onboarding / pantallas de estado ---------- */
.auth-screen{
  min-height:100vh; padding: calc(40px + var(--safe-t)) 20px 40px; display:flex; justify-content:center;
}
.auth-wrap{ width:100%; max-width:420px; text-align:center; }
.brand-mark{
  width:80px; height:80px; margin:0 auto 16px; border-radius:24px;
  background:linear-gradient(150deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-size:36px;
  box-shadow:var(--shadow-accent);
}
.loader-mark{ font-size:40px; animation: bob 1.1s ease-in-out infinite; margin-top:120px; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.auth-title{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin-top:4px; }
.auth-tagline{ font-size:14px; color:var(--text-dim); font-weight:500; margin-top:9px; line-height:1.55; }
.auth-card{ text-align:left; margin-top:24px; padding:22px; display:block; }
.auth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-faint); font-size:12.5px; font-weight:600; }
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* ---------- cuenta (Más) ---------- */
.account-strip{
  display:flex; align-items:center; gap:13px; background:var(--surface); box-shadow:var(--shadow-sm);
  border-radius:var(--radius-lg); padding:14px 16px; margin-bottom:20px;
}
.account-avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(150deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex-shrink:0; color:#fff;
}
.account-name{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-email{ font-size:12.5px; color:var(--text-dim); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.search-bar-inline{display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:999px; padding:11px 16px; margin-bottom:15px;}
.search-bar-inline input{background:none; border:none; padding:0; width:100%;}

::-webkit-scrollbar{width:0; height:0;}