/* =======================================================================
   Influsxy · Hoja de estilos portada 1:1 desde el panel React (TanStack).
   Mismos tokens (oklch), mismos radios, mismas sombras y mismos componentes.
   ======================================================================= */
@import url("/assets/fonts/fonts.css");

:root {
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 6px);
  --radius-2xl: calc(var(--radius) + 12px);
  --radius-3xl: calc(var(--radius) + 20px);

  --background: oklch(0.16 0.018 286);
  --foreground: oklch(0.98 0.002 286);
  --card: oklch(0.21 0.022 286);
  --card-foreground: oklch(0.98 0.002 286);
  --popover: oklch(0.21 0.022 286);
  --popover-foreground: oklch(0.98 0.002 286);
  --primary: oklch(0.58 0.222 296);
  --primary-glow: oklch(0.68 0.19 300);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.26 0.026 286);
  --secondary-foreground: oklch(0.98 0.002 286);
  --muted: oklch(0.26 0.026 286);
  --muted-foreground: oklch(0.7 0.02 286);
  --accent: oklch(0.3 0.06 295);
  --accent-foreground: oklch(0.98 0.002 286);
  --destructive: oklch(0.62 0.22 22);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.72 0.17 155);
  --success-foreground: oklch(0.16 0.018 286);
  --warning: oklch(0.8 0.16 80);
  --border: oklch(0.3 0.024 286);
  --input: oklch(0.3 0.024 286);
  --ring: oklch(0.58 0.222 296);

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow));
  --gradient-surface: linear-gradient(160deg, oklch(0.24 0.03 288), oklch(0.19 0.02 286));
  --shadow-glow: 0 18px 40px -18px oklch(0.58 0.222 296 / 0.75);
  --shadow-card: 0 10px 30px -18px oklch(0 0 0 / 0.9);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

html.light {
  --background: oklch(0.985 0.003 286);
  --foreground: oklch(0.2 0.02 286);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.02 286);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.02 286);
  --primary: oklch(0.55 0.235 296);
  --primary-glow: oklch(0.6 0.22 300);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.95 0.01 286);
  --secondary-foreground: oklch(0.25 0.02 286);
  --muted: oklch(0.95 0.01 286);
  --muted-foreground: oklch(0.48 0.02 286);
  --accent: oklch(0.93 0.03 296);
  --accent-foreground: oklch(0.25 0.02 286);
  --destructive: oklch(0.58 0.22 22);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.58 0.15 155);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.66 0.15 70);
  --border: oklch(0.9 0.01 286);
  --input: oklch(0.9 0.01 286);
  --ring: oklch(0.55 0.235 296);

  --gradient-surface: linear-gradient(160deg, oklch(1 0 0), oklch(0.965 0.008 288));
  --shadow-glow: 0 18px 40px -20px oklch(0.55 0.235 296 / 0.45);
  --shadow-card: 0 10px 30px -22px oklch(0.3 0.02 286 / 0.5);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; }

/* ---------------------------------------------------------------- Shell */
.app {
  margin: 0 auto;
  display: flex;
  height: 100dvh;
  width: 100%;
  max-width: 28rem;
  flex-direction: column;
  overflow: hidden;
  background: var(--background);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: var(--background);
  padding: 12px 16px;
}

.topbar .brand { display: flex; align-items: center; gap: 8px; }
.topbar .brand img { height: 36px; width: 36px; object-fit: contain; }
.topbar .brand span { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.topbar .actions { display: flex; align-items: center; gap: 4px; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: var(--radius-lg);
  padding: 8px;
  cursor: pointer;
  transition: background-color .08s, color .08s;
}
.iconbtn:hover { background: var(--secondary); color: var(--foreground); }
.iconbtn.text { padding: 8px 10px; font-size: 12px; font-weight: 700; }

.page {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 128px;
}

/* --------------------------------------------------------------- Drawer */
.drawer-toggle { display: none; }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: color-mix(in oklab, var(--background) 75%, transparent);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 18rem;
  transform: translateX(100%);
  transition: transform .3s ease;
  border-left: 1px solid var(--border);
  background: var(--card);
  padding: 24px 8px;
  box-shadow: var(--shadow-card);
}
.drawer h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 700;
}
.drawer h4 img { height: 28px; width: 28px; object-fit: contain; }
.drawer a, .drawer button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xl);
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .08s;
}
.drawer a svg, .drawer button svg { color: var(--primary-glow); }
.drawer a:hover, .drawer button:hover { background: var(--secondary); }
.drawer .danger { margin-top: 8px; color: var(--destructive); }
.drawer .danger svg { color: var(--destructive); }
.drawer .close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--muted-foreground);
  width: auto;
  padding: 4px;
}
#drawer:checked ~ .drawer { transform: translateX(0); }
#drawer:checked ~ .drawer-backdrop { display: block; }

/* --------------------------------------------------------------- Tabbar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: 100%;
  max-width: 28rem;
  transform: translateX(-50%);
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: var(--card);
  overflow: visible;
}
.tabbar .row5 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 8px 8px 12px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color .08s;
}
.tab.active { color: var(--primary-glow); }
.fab-wrap { display: flex; justify-content: center; overflow: visible; }
.fab {
  position: relative;
  margin-top: -32px;
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-image: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-glow);
  overflow: visible !important;
}
.fab .count {
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: 50;
  display: flex;
  height: 20px;
  min-width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--destructive);
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--destructive-foreground);
  box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgb(0 0 0 / .4);
  border: none;
  animation: favPop .25s ease;
}
@keyframes favPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------- Tipografías */
.page-title { margin-bottom: 16px; text-align: center; position: relative; }
.page-title h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.page-title p { margin: 4px 0 0; font-size: 14px; color: var(--muted-foreground); }
.page-title .back {
  position: absolute;
  left: 0;
  top: 4px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px;
  color: var(--foreground);
  cursor: pointer;
}
.page-title .back:hover { background: var(--secondary); }

h3.section { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.muted { color: var(--muted-foreground); }
.pri { color: var(--primary-glow); }
.ok { color: var(--success); }
.bad { color: var(--destructive); }
.warn { color: var(--warning); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.space { display: flex; flex-direction: column; gap: 8px; }

/* ----------------------------------------------------------- Superficies */
.card, .panel {
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 16px;
  margin-bottom: 12px;
}
.card.flat { box-shadow: none; }
.panel .prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  padding: 10px 0;
}
.panel .prow:last-child { border-bottom: 0; }
.panel .prow span:first-child { font-size: 14px; color: var(--muted-foreground); }
.panel .prow span:last-child { font-size: 14px; font-weight: 600; }

.empty { padding: 40px 0; text-align: center; font-size: 14px; color: var(--muted-foreground); }

.notice {
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.notice.bad { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
.notice.ok { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); }

/* -------------------------------------------------------------- Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  background-image: var(--gradient-primary);
  color: var(--primary-foreground);
  padding: 0 16px;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  transition: filter .08s, opacity .08s;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.sec { background-image: none; background: var(--secondary); color: var(--secondary-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.btn.danger { background-image: none; background: var(--destructive); color: var(--destructive-foreground); }
.btn.ghostline {
  background-image: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
  color: var(--destructive);
  border-radius: var(--radius-2xl);
  height: 46px;
  font-size: 14px;
  font-weight: 600;
}
.btn.lg { height: 48px; border-radius: var(--radius-xl); font-size: 16px; font-weight: 800; }
.btn.sm { height: 32px; border-radius: var(--radius-md); font-size: 12px; padding: 0 12px; width: auto; }

/* --------------------------------------------------------------- Inputs */
input[type=text], input[type=password], input[type=number], input[type=email], input:not([type]), select, textarea {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  padding: 4px 12px;
  font-size: 14px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
  outline: none;
  transition: border-color .08s, box-shadow .08s;
}
textarea { height: auto; padding: 8px 12px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 6px; }

.search { position: relative; margin-bottom: 16px; }
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.search input { padding-left: 36px; height: 44px; border-radius: var(--radius-2xl); }

/* ------------------------------------------------------------ Segmentos */
.segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: var(--radius-xl);
  background: var(--secondary);
  padding: 4px;
  margin-bottom: 16px;
}
.segment a, .segment button {
  border: 0;
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
}
.segment .on { background-image: var(--gradient-primary); color: var(--primary-foreground); }
.segment.two { grid-template-columns: repeat(2, 1fr); }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius-3xl);
  background-image: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
  padding: 20px;
  color: var(--primary-foreground);
}
.hero .inner { position: relative; z-index: 10; }
.wallet-badge {
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--primary-foreground) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-foreground) 25%, transparent);
  backdrop-filter: blur(6px);
  color: var(--primary-foreground);
}
.hero .label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}
.hero .bal { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.hero .cur { margin: 0; font-size: 12px; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }
.hero .ghost-logo {
  position: absolute;
  right: -24px;
  top: -16px;
  height: 160px;
  width: 160px;
  opacity: .25;
  object-fit: contain;
}
.hero.saldo .ghost-logo { right: -32px; top: auto; bottom: -40px; height: 128px; width: 128px; opacity: .2; }
.hero.saldo .wallet-badge { position: absolute; right: 20px; top: 24px; }

/* -------------------------------------------------------- Tarjetas home */
.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 20px;
  transition: transform .06s;
}
.action:active { transform: scale(.95); }
.action .ico {
  display: flex;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-image: var(--gradient-primary);
  color: var(--primary-foreground);
}
.action b { font-size: 14px; font-weight: 700; }
.action small { font-size: 11px; color: var(--muted-foreground); }

/* ------------------------------------------------------ Redes / tarjetas */
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 16px;
  text-align: left;
  transition: transform .06s;
  cursor: pointer;
}
.tile:active { transform: scale(.97); }
.tile b { display: block; font-size: 14px; font-weight: 700; }
.tile small { font-size: 11px; color: var(--muted-foreground); }

.social {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl);
  color: #fff;
}
.social.round { border-radius: 999px; }
.social.instagram { background-image: linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.social.tiktok { background-image: linear-gradient(135deg, #25f4ee, #000 55%, #fe2c55); }
.social.youtube { background-image: linear-gradient(135deg, #ff5252, #c4302b); }
.social.facebook { background-image: linear-gradient(135deg, #3b82f6, #1877f2); }
.social.twitter { background-image: linear-gradient(135deg, #4b5563, #000); }
.social.telegram { background-image: linear-gradient(135deg, #37bbfe, #007dbb); }
.social.spotify { background-image: linear-gradient(135deg, #4ade80, #1db954); }
.social.twitch { background-image: linear-gradient(135deg, #c4a2ff, #9146ff 55%, #5c16c5); }
.social.whatsapp { background-image: linear-gradient(135deg, #5cf07d, #25d366 50%, #128c7e); }
.social.reddit { background-image: linear-gradient(135deg, #ff8b60, #ff4500 60%, #d93a00); }
.social.threads { background-image: linear-gradient(135deg, #52606d, #1a1a1a 60%, #000); }
.social.default, .social.otros { background-image: linear-gradient(135deg, #8b5cf6, #a855f7); }

/* ------------------------------------------------------ Filas de listado */
.listrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 14px;
  margin-bottom: 8px;
  transition: transform .06s;
}
.listrow:active { transform: scale(.98); }

.servicerow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 12px 10px 12px 16px;
  margin-bottom: 8px;
  contain: layout style;
}
.servicerow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--primary);
}
.servicerow .open {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: transform .06s;
}
.servicerow .open:active { transform: scale(.98); }
.servicerow .name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}
.servicerow .idx { margin-right: 6px; font-size: 11px; font-weight: 800; color: var(--muted-foreground); }
.quality {
  display: inline-block;
  margin-top: 4px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primary-glow);
}
.price {
  flex: none;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 6px 10px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-glow);
}
.price small { font-size: 9px; font-weight: 600; color: var(--muted-foreground); }
.fav-btn { flex: none; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--muted-foreground); display: flex; }
.fav-btn.on { color: var(--primary-glow); }
.fav-btn.on svg { fill: currentColor; }

/* --------------------------------------------------------- Tarjeta orden */
.order {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 80px;
  overflow: hidden;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: transform .06s;
  contain: layout style;
}
.order:active { transform: scale(.98); }
.order .num { margin: 0; font-size: 14px; font-weight: 800; }
.order .name {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.order .side {
  display: flex;
  min-width: 92px;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  border-left: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  padding-left: 10px;
}
.order .side .when { display: grid; gap: 4px; font-size: 9px; line-height: 1; color: var(--muted-foreground); }
.order .side .when span { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.order .side .total { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 900; color: var(--primary-glow); }
.order .stretch { position: absolute; inset: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}
.badge.warn { border-color: color-mix(in oklab, var(--warning) 20%, transparent); background: color-mix(in oklab, var(--warning) 10%, transparent); color: var(--warning); }
.badge.pri { border-color: color-mix(in oklab, var(--primary) 25%, transparent); background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary-glow); }
.badge.ok { border-color: color-mix(in oklab, var(--success) 20%, transparent); background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); }
.badge.bad { border-color: color-mix(in oklab, var(--destructive) 20%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }

/* ------------------------------------------------------------- Historial */
.txrow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  padding: 16px 12px;
}
.txrow:last-child { border-bottom: 0; }
.txrow .ico { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; border-radius: 999px; }
.txrow .ico.pri { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary-glow); }
.txrow .ico.ok { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.txrow .ico.bad { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); }
.txrow .ico.warn { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); }
.txrow .t { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txrow .m { margin: 0; font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txrow .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.txrow .tag { border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; }
.txrow .tag.pri { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary-glow); }
.txrow .tag.ok { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.txrow .tag.bad { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); }
.txrow .tag.warn { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); }
.txrow .date { font-size: 10px; color: var(--muted-foreground); }
.txrow .amt { white-space: nowrap; font-size: 14px; font-weight: 800; }

/* ------------------------------------------------------------- Progreso */
.progress { height: 8px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--secondary); }
.progress span { display: block; height: 100%; border-radius: 999px; background-image: var(--gradient-primary); }

/* ---------------------------------------------------------------- Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in oklab, var(--background) 82%, transparent);
}
.modal-backdrop.open { display: flex; }
.modal {
  width: 100%;
  max-width: 24rem;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius: var(--radius-3xl);
  padding: 20px;
  box-shadow: 0 0 40px -12px var(--primary);
  max-height: 90dvh;
  overflow-y: auto;
  contain: layout style;
}
.modal .cat { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--primary-glow); }
.modal .ttl { margin: 0; font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal .head .x { border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; padding: 6px; border-radius: var(--radius-md); }
.modal .hint { margin: 6px 0 16px; font-size: 11px; color: var(--muted-foreground); }
.modal .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--secondary) 50%, transparent);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.modal .total span:first-child { font-size: 14px; color: var(--muted-foreground); }
.modal .total span:last-child { font-size: 20px; font-weight: 800; }
.modal input { height: 48px; border-radius: var(--radius-xl); }
.modal .stat {
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: var(--secondary);
  padding: 12px;
  text-align: center;
}
.modal .stat small { display: block; font-size: 11px; color: var(--muted-foreground); }
.modal .stat b { font-size: 14px; font-weight: 800; color: var(--primary-glow); }

/* ----------------------------------------------------------------- Auth */
.auth {
  margin: 0 auto;
  display: flex;
  min-height: 100dvh;
  width: 100%;
  max-width: 28rem;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
}
.auth .logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
.auth .logo img { height: 64px; width: 64px; object-fit: contain; }
.auth .logo b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.auth .logo small { text-align: center; font-size: 14px; color: var(--muted-foreground); }
.auth .card { margin-bottom: 0; padding: 20px; }
.auth .segment { grid-template-columns: 1fr 1fr; }
.auth .segment a { font-size: 14px; }

/* -------------------------------------------------------------- Chat/API */
.chat { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chat p {
  max-width: 85%;
  border-radius: var(--radius-xl);
  padding: 8px 12px;
  font-size: 12px;
  margin: 0;
  background: var(--accent);
}
.chat p.mine { margin-left: auto; background: var(--secondary); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copyrow {
  display: flex;
  align-items: center;
  gap: 8px;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 12px;
  margin-bottom: 16px;
}
.copyrow button { border: 0; background: transparent; color: var(--primary-glow); cursor: pointer; display: flex; }

/* -------------------------------------------------------------- Recibo */
.receipt-card {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.receipt-head {
  background-image: var(--gradient-primary);
  color: #fff;
  padding: 20px 24px 18px;
  text-align: center;
}
.receipt-head .receipt-logo {
  width: 56px; height: 56px; border-radius: 999px;
  margin: 0 auto 8px; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.35);
}
.receipt-head .tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .85); }
.receipt-head .num { font-size: 30px; font-weight: 800; line-height: 1.15; margin-top: 6px; }
.receipt-head .date { font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.receipt-body { padding: 20px 24px 24px; }
.receipt-status { display: block; margin-bottom: 18px; }
.receipt-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.receipt-service { font-size: 16px; font-weight: 700; margin: 6px 0 16px; }
.receipt-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.receipt-link .at {
  width: 28px; height: 28px; flex: none;
  border-radius: 999px;
  background-image: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.receipt-link .txt { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 18px; }
.receipt-cols > div {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: 12px 6px;
}
.receipt-cols small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.receipt-cols b { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; }
.receipt-cols .mid b { color: var(--primary-glow); }
.receipt-progress-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground); margin-bottom: 6px;
}
.receipt-progress-row span:last-child { color: var(--primary-glow); }
.receipt-progress { height: 8px; border-radius: 999px; background: var(--secondary); overflow: hidden; margin-bottom: 18px; }
.receipt-progress span { display: block; height: 100%; border-radius: 999px; background-image: var(--gradient-primary); }
.receipt-total { display: flex; align-items: center; gap: 8px; margin: 6px 0 18px; }
.receipt-total .old { font-size: 13px; color: var(--muted-foreground); text-decoration: line-through; }
.receipt-total .now { font-size: 24px; font-weight: 800; }
.receipt-total .disc {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  color: var(--success); background: color-mix(in oklab, var(--success) 18%, transparent);
}
.receipt-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--border);
  padding-top: 14px; margin-top: 4px; margin-bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; color: var(--muted-foreground);
}

@media print {
  /* Forzar impresión a color (gradient violeta, badge verde/rojo, logo, etc.). */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .no-print, .topbar, .tabbar, .drawer, .drawer-backdrop, .sidebar, .sb-user { display: none !important; }
  html, body { background: #fff !important; }
  .app { height: auto; overflow: visible; }
  .page { padding: 0; }
  .receipt { display: block; }
  /* El comprobante ocupa toda la hoja al imprimir / guardar a PDF. */
  .receipt-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .receipt-head .receipt-logo { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* --------------------------------------------------------------- Perfil */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border-radius: var(--radius-2xl);
  background-image: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
  padding: 16px;
  color: var(--primary-foreground);
}
.profile-hero .avatar {
  display: flex;
  height: 48px;
  width: 48px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary-foreground) 20%, transparent);
}
.profile-hero .name { margin: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero .mail { margin: 0; font-size: 12px; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero .uid { margin: 0; font-size: 11px; color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); }

.linklist {
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background-image: var(--gradient-surface);
  padding: 0 16px;
}
.linklist a {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}
.linklist a:last-child { border-bottom: 0; }
.linklist a > svg:first-child { color: var(--primary-glow); flex: none; }
.linklist a > svg:last-child { color: var(--muted-foreground); flex: none; }
.linklist a div { flex: 1; min-width: 0; }
.linklist a .l { margin: 0; font-size: 14px; font-weight: 600; }
.linklist a .s { margin: 0; font-size: 11px; color: var(--muted-foreground); }

.security { margin-top: 16px; }
.security summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted-foreground); list-style: none; }
.security summary::-webkit-details-marker { display: none; }
.security form { margin-top: 12px; }
.btn.danger-outline {
  background-image: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
  color: var(--destructive);
}

/* =======================================================================
   Correcciones de paridad con React (admin, auth, API) + responsive
   ======================================================================= */

/* Contenedor genérico usado por el panel admin */
.wrap { width: 100%; min-width: 0; }
.wrap > h2 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Cabecera del admin (paridad con el header sticky del React) */
.admin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  min-width: 0;
}
.admin-head .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 999px;
  padding: 6px;
  color: var(--muted-foreground);
}
.admin-head .back:hover { background: var(--secondary); color: var(--foreground); }
.admin-head svg.lead { color: var(--primary-glow); flex: none; }
.admin-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; min-width: 0; }

/* Chips de navegación (React: rounded-full px-4 py-2 text-xs font-bold) */
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
  padding-bottom: 4px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button {
  flex: none;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .08s, color .08s;
}
.tabs > a.on, .tabs > button.on {
  border-color: transparent;
  background-image: var(--gradient-primary);
  color: var(--primary-foreground);
}

/* Pills de la página de API */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--secondary);
  color: var(--foreground);
}
.pill.pri { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary-glow); }

/* Segmento de autenticación (Ingresar / Crear cuenta) */
.authtabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  border-radius: var(--radius-xl);
  background: var(--secondary);
  padding: 4px;
  margin-bottom: 16px;
}
.authtabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color .08s, color .08s;
}
.authtabs a.active {
  background-image: var(--gradient-primary);
  color: var(--primary-foreground);
}

/* Campo de contraseña con ojo */
.pwd { position: relative; }
.pwd input { padding-right: 42px; }
.pwd button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  padding: 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
}
.pwd button:hover { color: var(--foreground); }

/* Filas de la página de API (paridad con React) */
.apirow {
  display: flex;
  align-items: center;
  gap: 8px;
  background-image: var(--gradient-surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-2xl);
  padding: 12px;
  margin-bottom: 12px;
  min-width: 0;
}
.apirow .val {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apirow button { border: 0; background: transparent; color: var(--primary-glow); cursor: pointer; display: flex; padding: 4px; }
.apilabel { margin: 0 0 8px; font-size: 14px; font-weight: 600; }

/* Autofill: evitar el fondo amarillo del navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--foreground);
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  caret-color: var(--foreground);
  transition: background-color 9999s ease-out;
}

/* ------------------------------------------------------------ Responsive */
.row { min-width: 0; flex-wrap: wrap; }
.wrap img, .wrap svg { max-width: 100%; }
.admin-list .item > *, .svc-item > * { min-width: 0; }
.svc-provider-url { overflow-wrap: anywhere; }
.svc-balance .v { white-space: nowrap; }
.kpi .v { overflow-wrap: anywhere; }
.svc-actionbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-modal-sheet input, .admin-modal-sheet select, .admin-modal-sheet textarea { max-width: 100%; }
@media (max-width: 380px) {
  .tabs > a, .tabs > button { padding: 8px 12px; }
  .grid4 { gap: 8px; }
}

/* Variantes de botón faltantes (paridad con shadcn/React) */
.btn.secondary {
  background-image: none;
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: none;
}
.btn.secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, var(--foreground) 6%); }
.btn.ghost {
  background-image: none;
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--secondary); color: var(--foreground); }

/* --------------------------------------- Modal descuentos por servicio */
.disc-tab {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--secondary);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.disc-tab.on { background-image: var(--gradient-primary); color: #fff; }

/* ------------------------------------------ Aviso de instalación (PWA) */
.install-prompt {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(calc(100vw - 32px), 420px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-glow, 0 12px 30px rgba(0,0,0,.45));
  animation: fadeUp .25s ease;
}
.install-prompt img { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.install-prompt .txt { min-width: 0; flex: 1; }
.install-prompt .t { margin: 0; font-size: 13px; font-weight: 800; }
.install-prompt .s { margin: 0; font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-prompt .x { flex: none; border: 0; background: transparent; color: var(--muted-foreground); font-size: 20px; line-height: 1; cursor: pointer; }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ------------------------- Chat de soporte (usuario) ------------------------- */
.chatbox { display: flex; flex-direction: column; gap: 8px; }
.chatbox .bubble { max-width: 85%; border-radius: 14px; padding: 8px 12px; }
.chatbox .bubble p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.chatbox .bubble .who { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; opacity: .85; }
.chatbox .bubble .at { display: block; margin-top: 3px; font-size: 9.5px; opacity: .7; }
.chatbox .bubble.from-me { margin-left: auto; background-image: var(--gradient-primary); color: var(--primary-foreground); border-bottom-right-radius: 5px; }
.chatbox .bubble.from-admin { margin-right: auto; background: var(--secondary); color: var(--foreground); border-bottom-left-radius: 5px; }

/* -------------------- Animaciones y selección violeta (panel usuario) ------- */
@keyframes pulseViolet {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 0%, transparent); }
}
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.tile, .listrow, .chip, .btn, .linklist a { transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.tile:active, .listrow:active, .linklist a:active { transform: scale(.975); }

/* ---- Focus accesible moderno (violeta) para TODOS los interactivos ---- */
/* Elimina el outline azul nativo (HTML viejo) y lo reemplaza por un anillo
   violeta coherente con el tema. Cubre botones, links, tabs, FAB, iconbtn,
   fav-btn, sidebar, drawer, acciones y elementos de formulario. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus {
  outline: none;
}
:where(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}
.tile:focus-visible, .listrow:focus-visible, .chip:focus-visible, .btn:focus-visible, .linklist a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--primary) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
}
.fav-btn:focus-visible, .fab:focus-visible, .iconbtn:focus-visible, .action:focus-visible,
.sb-link:focus-visible, .sb-slink:focus-visible, .sb-logout:focus-visible, .tab:focus-visible,
.drawer a:focus-visible, .drawer button:focus-visible, .drawer .close:focus-visible,
.install-prompt button:focus-visible, .order button:focus-visible, .servicerow .open:focus-visible,
.welcome-dot:focus-visible, .welcome-cta:focus-visible, .topbar .brand:focus-visible,
.maint-toggle:focus-visible, .chip:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 65%, transparent);
  outline-offset: 2px;
}
.fab:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--primary) 60%, transparent);
  outline-offset: 3px;
}
.tile.selected, .listrow.selected, .is-selected {
  border-color: color-mix(in oklab, var(--primary) 65%, transparent) !important;
  background-image: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%), var(--gradient-surface);
  animation: pulseViolet .7s ease;
}
.card, .listrow, .tile { animation: popIn .22s ease both; }
::selection { background: color-mix(in oklab, var(--primary) 45%, transparent); color: #fff; }

/* Comprobante: bloque interno de costos (solo admin) y pantalla completa */
.receipt-admin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed color-mix(in oklab, var(--primary) 45%, transparent);
  font-size: 11.5px;
}
.receipt-admin b { font-weight: 800; text-align: right; }
.receipt-card:fullscreen {
  width: min(100%, 560px);
  max-width: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: var(--gradient-surface);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.receipt-card:-webkit-full-screen {
  width: min(100%, 560px);
  max-width: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: var(--gradient-surface);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* ==========================================================================
   Chat de soporte (usuario y admin): burbujas con avatar, hora y estado.
   ========================================================================== */
.chat-thread { display: flex; flex-direction: column; gap: 14px; padding: 12px 2px; max-height: 60vh; overflow-y: auto; }
.chat-thread .msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-thread .msg.mine { flex-direction: row-reverse; }
.chat-thread .av { flex: none; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background-image: var(--gradient-primary); color: var(--primary-foreground); }
.chat-thread .msg.mine .av { background: color-mix(in oklab, var(--foreground) 92%, transparent); color: var(--background); }
.chat-thread .col { min-width: 0; max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.chat-thread .msg.mine .col { align-items: flex-end; }
.chat-thread .nm { font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); padding: 0 4px; }
.chat-thread .bubble { border-radius: 16px; padding: 9px 12px; font-size: 13px; line-height: 1.45; word-break: break-word; background: color-mix(in oklab, var(--secondary) 70%, transparent); color: var(--foreground); border-bottom-left-radius: 5px; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.chat-thread .msg.mine .bubble { background-image: var(--gradient-primary); color: var(--primary-foreground); border: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.chat-thread .bubble p { margin: 0; }
.chat-thread .meta { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted-foreground); padding: 0 4px; }
.chat-thread .meta svg { opacity: .9; }
.chat-empty { text-align: center; color: var(--muted-foreground); font-size: 12px; padding: 18px 0; }
.chat-bar { display: flex; align-items: center; gap: 8px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--secondary) 45%, transparent); border-radius: 999px; padding: 5px 6px 5px 14px; margin: 0; }
.chat-bar input[type="text"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 8px 0 !important; margin: 0 !important; font-size: 13px; color: var(--foreground); box-shadow: none !important; }
.chat-bar input[type="text"]:focus { outline: none; }
.chat-bar .send { flex: none; width: 38px; height: 38px; border-radius: 999px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background-image: var(--gradient-primary); color: var(--primary-foreground); }
.chat-bar .send:active { transform: scale(.94); }

/* ==========================================================================
   SHELL + SIDEBAR (desktop / PC / Samsung DeX) — v17
   .shell envuelve al sidebar + .app. En móvil el sidebar está oculto y .shell
   no aporta nada (display:block por defecto). En desktop (≥900px) .shell se
   vuelve un flex row: sidebar (260px) + .app (resto). El layout móvil no cambia.
   ========================================================================== */
.shell { display: block; }
.sidebar {
  display: none; /* oculto en móvil; el media query lo muestra en desktop */
}

/* Elemento de usuario en la topbar: oculto en móvil, visible en desktop */
.sb-user { display: none; }

/* ==========================================================================
   MEDIA QUERY DESKTOP — (min-width: 900px)
   Cubre: PC, modo escritorio del navegador, Samsung DeX (reporta ≥960px).
   En resoluciones <900px (teléfonos) TODO sigue igual que antes.
   ========================================================================== */
@media (min-width: 900px) {

  /* --- Shell: layout de 2 columnas (sidebar + área de contenido) --- */
  .shell {
    display: flex;
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
  }

  /* .app deja de limitarse a 28rem y ocupa el resto de la pantalla */
  .app {
    max-width: none;
    flex: 1;
    min-width: 0;
    height: 100dvh;
    overflow: hidden;
  }

  /* --- Sidebar --- */
  .sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    width: 260px;
    height: 100dvh;
    position: sticky;
    top: 0;
    border-right: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    background: var(--card);
    padding: 20px 14px 14px;
    overflow-y: auto;
  }
  .sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    text-decoration: none;
    color: var(--foreground);
  }
  .sb-brand img { height: 38px; width: 38px; object-fit: contain; }
  .sb-brand span { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

  .sb-nav { display: flex; flex-direction: column; gap: 4px; }
  .sb-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: background-color .08s, color .08s;
  }
  .sb-link svg { flex: none; color: var(--muted-foreground); transition: color .08s; }
  .sb-link:hover { background: var(--secondary); color: var(--foreground); }
  .sb-link:hover svg { color: var(--primary-glow); }
  .sb-link.active {
    background-image: var(--gradient-primary);
    color: var(--primary-foreground);
  }
  .sb-link.active svg { color: var(--primary-foreground); }
  .sb-link span:last-child { flex: 1; }
  .sb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--destructive);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  .sb-extra { margin-top: auto; padding-top: 18px; }
  .sb-nav-secondary { display: flex; flex-direction: column; gap: 2px; }
  .sb-slink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: background-color .08s, color .08s;
  }
  .sb-slink svg { color: var(--primary-glow); flex: none; }
  .sb-slink:hover { background: var(--secondary); color: var(--foreground); }

  .sb-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-xl);
    font-size: 13px;
    font-weight: 600;
    color: var(--destructive);
    text-decoration: none;
    transition: background-color .08s;
  }
  .sb-logout svg { color: var(--destructive); flex: none; }
  .sb-logout:hover { background: color-mix(in oklab, var(--destructive) 12%, transparent); }
  .sb-foot {
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 10.5px;
    color: var(--muted-foreground);
  }

  /* --- Topbar: ya no lleva botón de menú (el sidebar lo reemplaza) --- */
  .topbar {
    max-width: none;
  }
  .drawer-btn { display: none; } /* ocultar botón hamburguesa en desktop */
  .drawer-backdrop, .drawer { display: none !important; } /* drawer innecesario en desktop */

  /* Usuario en la topbar (visible solo en desktop) */
  .sb-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    text-decoration: none;
    color: var(--foreground);
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    transition: background-color .08s;
  }
  .sb-user:hover { background: var(--secondary); }
  .sb-user-av {
    display: flex;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    border-radius: 999px;
    background-image: var(--gradient-primary);
    color: var(--primary-foreground);
    font-size: 13px; font-weight: 800;
  }
  .sb-user-name { font-size: 12.5px; font-weight: 600; }

  /* --- Área de contenido: columna derecha que ocupa el resto --- */
  .page {
    flex: 1;
    min-width: 0;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 32px 48px;
    overflow-y: auto;
  }

  /* --- Tabbar oculto en desktop (lo reemplaza el sidebar) --- */
  .tabbar { display: none !important; }

  /* --- Hero de saldo más grande y espacioso --- */
  .hero {
    padding: 28px 32px;
    border-radius: var(--radius-3xl);
  }
  .hero .bal { font-size: 38px; }
  .hero .label { font-size: 13px; }
  .wallet-badge { height: 64px; width: 64px; }
  .hero .ghost-logo { height: 200px; width: 200px; right: -32px; top: -24px; }

  /* --- Grid de acciones: 4 columnas en desktop --- */
  .grid2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .action { padding: 24px 20px; }
  .action b { font-size: 15px; }
  .action small { font-size: 12px; }
  .action .ico { height: 52px; width: 52px; }

  /* --- Páginas internas: títulos y secciones más amplios --- */
  .page-title h2 { font-size: 26px; }
  .page-title p { font-size: 14px; }

  /* --- Admin (.wrap.wide): aprovecha el ancho disponible --- */
  .wrap.wide {
    max-width: none;
  }
  .wrap.wide > h2 { font-size: 22px; }
  .admin-head h2 { font-size: 20px; }

  /* Chips de tabs del admin: dejan de ser scroll horizontal, se acomodan en fila */
  .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Grids KPI del admin: 4 columnas */
  .grid4 { grid-template-columns: repeat(4, 1fr); }

  /* Modales admin: siempre centrados en desktop */
  .admin-modal-backdrop { align-items: center; padding: 24px; }
  .admin-modal-sheet { max-width: 560px; border-radius: 24px; }

  /* Tarjetas / tiles: mejor aire */
  .card, .panel { border-radius: var(--radius-2xl); }

  /* Listas largas: mejor legibilidad */
  .listrow, .tile { max-width: 100%; }

  /* Formularios de auth: centrados con ancho cómodo */
  .auth .card { max-width: 440px; margin-left: auto; margin-right: auto; }

  /* Soporte chat: hilos más anchos */
  .chat-thread { max-height: 68vh; }

} /* fin @media (min-width: 900px) */

/* --- Pantallas muy anchas (≥1280px): centra el contenido --- */
@media (min-width: 1280px) {
  .page { max-width: 960px; }
}

/* =============================================================== Recibo v24
   Comprobante de orden rediseñado — modo "Con marca de agua" / "Sin marca de agua".
   Fondo blanco, banner violeta con check, secciones con íconos, footer violeta.
   ======================================================================= */
.receipt { max-width: 420px; margin: 0 auto; padding-bottom: 24px; }
.receipt-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-3xl);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  /* Forzar texto oscuro sobre fondo blanco, sin importar si el panel está en tema oscuro */
  --foreground: #1a1530;
  --muted-foreground: #8a82a3;
  --border: #ede7f6;
  --secondary: #f7f4fc;
  --primary: oklch(0.55 0.235 296);
  --primary-glow: oklch(0.6 0.22 300);
  --gradient-primary: linear-gradient(135deg, oklch(0.55 0.235 296), oklch(0.6 0.22 300));
  --success: oklch(0.58 0.15 155);
  --radius: 14px;
  --radius-2xl: 26px;
  --radius-3xl: 34px;
  color: #1a1530;
}

/* ---- Header con logo (solo modo con marca de agua) ---- */
.rec-wm-header {
  padding: 20px 24px 14px;
  text-align: center;
  border-bottom: 1px solid #f0ecf7;
}
.rec-wm-logo-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rec-wm-logo {
  width: 40px; height: 40px; border-radius: 999px;
  object-fit: cover; flex: none;
  box-shadow: 0 3px 10px rgba(88,28,135,.25);
}
.rec-wm-brand {
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--primary);
}

/* ---- Banner violeta "¡Orden enviada!" ---- */
.rec-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  background-image: var(--gradient-primary);
  color: #fff;
}
.rec-banner-check {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.rec-banner-txt { line-height: 1.2; }
.rec-banner-title { font-size: 20px; font-weight: 800; margin: 0; }
.rec-banner-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); margin: 2px 0 0; }
/* El modo sin marca arranca directo con el banner (sin header), un poco más de aire arriba */
.rec-banner-clean { padding-top: 28px; }

/* ---- Cuerpo ---- */
.rec-body { padding: 8px 24px 20px; }
.rec-section { padding: 14px 0; border-bottom: 1px solid #f1edf8; }
.rec-section:last-of-type { border-bottom: 0; }
.rec-field-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground);
  margin: 0 0 8px;
}
.rec-field-val { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--foreground); }
.rec-ic {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: color-mix(in oklab, var(--primary) 12%, #ffffff);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.rec-service-row span:last-child { flex: 1; word-break: break-word; }
.rec-link-row { align-items: flex-start; }
.rec-link-txt {
  font-size: 13px; font-weight: 600; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-all;
}

/* ---- Antes → Después ---- */
.rec-before-after {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin-top: 4px;
}
.rec-ba-col {
  text-align: center;
  border-radius: var(--radius-2xl);
  background: #f7f4fc;
  border: 1px solid #ede7f6;
  padding: 14px 8px 12px;
}
.rec-ba-ic { color: var(--primary); display: flex; justify-content: center; margin-bottom: 6px; }
.rec-ba-col small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-foreground); }
.rec-ba-col b { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--foreground); }
.rec-ba-arrow { color: var(--primary-glow); display: flex; align-items: center; justify-content: center; }

/* ---- Total enviado ---- */
.rec-total-sent {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px;
  padding: 14px 16px;
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--primary) 10%, #ffffff);
  border: 1px solid color-mix(in oklab, var(--primary) 22%, #ffffff);
}
.rec-ts-ic { color: var(--primary); display: flex; }
.rec-ts-label { font-size: 13px; font-weight: 700; color: var(--muted-foreground); flex: 1; }
.rec-ts-val { font-size: 15px; font-weight: 800; color: var(--primary); }

/* ---- Precio (solo admin, modo con marca de agua) ---- */
.rec-wm-price {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed #e4dbf2;
}
.rec-wm-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-wm-price-row > span:first-child { font-size: 13px; font-weight: 700; color: var(--muted-foreground); }
.rec-old-price { font-size: 13px; color: var(--muted-foreground); text-decoration: line-through; }
.rec-now-price { font-size: 22px; font-weight: 800; color: var(--foreground); margin-left: auto; }
.rec-disc-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: var(--success); background: color-mix(in oklab, var(--success) 16%, transparent);
}
.rec-wm-cost {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 10px; font-size: 12px; color: var(--muted-foreground);
}
.rec-wm-cost b { color: var(--foreground); }

/* ---- Footer violeta ---- */
.rec-wm-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px;
  background-image: var(--gradient-primary);
  color: #fff;
  font-size: 11px; font-weight: 600;
}
.rec-wm-foot-left, .rec-wm-foot-right { display: flex; align-items: center; gap: 6px; }
.rec-wm-foot-right { text-align: right; }
.rec-wm-footer svg { opacity: .85; flex: none; }
.rec-clean-footer { /* mismo estilo que el footer con marca, sin cambios extra */ }

/* ---- Marca de agua (texto grande y tenue al fondo) ---- */
.rec-wm-watermark {
  position: absolute; left: 0; right: 0; bottom: 64px;
  text-align: center;
  font-size: 54px; font-weight: 900; letter-spacing: .04em;
  color: color-mix(in oklab, var(--primary) 7%, transparent);
  pointer-events: none; z-index: 0; white-space: nowrap;
  text-transform: uppercase;
}
/* El contenido del recibo queda por encima de la marca de agua */
.rec-wm-header, .rec-banner, .rec-body, .rec-wm-footer { position: relative; z-index: 1; }

/* ---- Controles (no se imprimen ni se capturan) ---- */
.rec-controls {
  max-width: 420px; margin: 18px auto 0; text-align: center;
}
.rec-mode-toggle { display: flex; gap: 8px; }
.rec-mode-btn { flex: 1; }
.rec-mode-btn.active { background-image: var(--gradient-primary); color: #fff; border-color: transparent; }
.rec-mode-hint {
  font-size: 12px; color: var(--muted-foreground);
  margin: 10px 4px 0; line-height: 1.4;
}

/* ---- Responsive: en pantallas anchas centra y limita el ancho ---- */
@media (min-width: 600px) {
  .receipt { max-width: 460px; }
  .rec-controls { max-width: 460px; }
}

/* ---- Print: el comprobante ocupa toda la hoja ---- */
@media print {
  .rec-controls, .topbar, .tabbar, .drawer, .drawer-backdrop, .sidebar, .sb-user { display: none !important; }
  .receipt-card { max-width: 100% !important; width: 100% !important; border-radius: 0 !important; box-shadow: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* =======================================================================
   EFECTO TAP VIOLETA RÁPIDO — v22
   Destello violeta + scale al tocar cualquier elemento interactivo.
   Respuesta inmediata (80ms) en toda la PWA, app y página.
   ======================================================================= */

/* --- Botones principales: destello violeta + presión --- */
.btn:active {
  filter: brightness(1.18) saturate(1.3);
  transform: scale(.96);
  box-shadow: 0 0 0 4px oklch(0.58 0.222 296 / 0.25);
}
.btn { transition: filter .08s, opacity .08s, transform .08s, box-shadow .08s; }

/* --- Tabs de la barra inferior: destello violeta al tocar --- */
.tab:active {
  color: var(--primary-glow);
  transform: scale(.88);
  background: oklch(0.58 0.222 296 / 0.12);
  border-radius: var(--radius-md);
}
.tab { transition: color .08s, transform .08s, background .08s; }

/* --- FAB (favoritos): pulso violeta al tocar --- */
.fab:active {
  transform: scale(.9);
  box-shadow: 0 0 0 8px oklch(0.58 0.222 296 / 0.3), var(--shadow-glow);
}
.fab { transition: transform .08s, box-shadow .08s; }

/* --- Iconos de la topbar: destello violeta --- */
.iconbtn:active {
  background: oklch(0.58 0.222 296 / 0.18);
  color: var(--primary-glow);
  transform: scale(.9);
}
.iconbtn { transition: background-color .08s, color .08s, transform .08s; }

/* --- Links del sidebar (desktop/DeX): highlight violeta al tocar --- */
.sb-link:active, .sb-slink:active, .sb-logout:active {
  transform: scale(.97);
}
.sb-link:active { background: oklch(0.58 0.222 296 / 0.15); }
.sb-link { transition: background-color .08s, color .08s, transform .08s; }

/* --- Tarjetas / tiles / listas: presión violeta --- */
.tile:active, .listrow:active, .order:active, .servicerow .open:active {
  transform: scale(.97);
  box-shadow: 0 0 0 2px oklch(0.58 0.222 296 / 0.2);
}
.tile, .listrow, .order { transition: transform .06s, box-shadow .06s; }

/* --- Action buttons (íconos de acción): destello violeta --- */
.action:active {
  transform: scale(.9);
  color: var(--primary-glow);
  background: oklch(0.58 0.222 296 / 0.15);
}
.action { transition: transform .06s, color .08s, background .08s; }

/* --- Links genéricos y enlaces de drawer: feedback violeta --- */
.drawer a:active, .drawer button:active {
  background: oklch(0.58 0.222 296 / 0.15);
  transform: scale(.97);
}
.drawer a, .drawer button { transition: background-color .08s, transform .08s; }

/* --- Inputs/select al foco: ring violeta más rápido --- */
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px oklch(0.58 0.222 296 / 0.25);
  outline: none;
  transition: border-color .08s, box-shadow .08s;
}

/* --- Botones secundarios/ghost: destello violeta al tocar --- */
.btn.sec:active, .btn.secondary:active, .btn.ghost:active {
  background: oklch(0.58 0.222 296 / 0.15);
  transform: scale(.96);
}
.btn.sec, .btn.secondary, .btn.ghost { transition: background .08s, transform .08s; }

/* --- Remove tap-delay en iOS: respuesta inmediata al toque --- */
* {
  -webkit-tap-highlight-color: oklch(0.58 0.222 296 / 0.18);
  touch-action: manipulation;
}

/* --- Ripple violeta universal (event delegation v32: la clase .ripple-violet
   se aplica por CSS a los elementos interactivos, sin escanear el DOM con JS) --- */
.ripple-violet {
  position: relative;
  overflow: hidden;
}
/* El FAB necesita overflow: visible para que su badge de contador no quede
   cortado. El ripple del FAB se ve circular gracias a border-radius: inherit. */
.fab.ripple-violet { overflow: visible !important; }
.ripple-violet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, oklch(0.68 0.19 300 / 0.35) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease-out, transform .3s ease-out;
  pointer-events: none;
}
.ripple-violet.rippling::after {
  opacity: 1;
  transform: scale(1.4);
  transition: opacity 0s, transform 0s;
}

/* ======================================================================= */
/* PANTALLA DE BIENVENIDA (onboarding carrusel)                            */
/* ======================================================================= */
.welcome {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--primary) 18%, var(--background)), var(--background) 60%);
}
.welcome-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.welcome-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; animation: blobFloat 14s ease-in-out infinite; }
.welcome-bg .blob.b1 { width: 360px; height: 360px; background: var(--primary); top: -120px; left: -80px; }
.welcome-bg .blob.b2 { width: 320px; height: 320px; background: var(--primary-glow); bottom: -120px; right: -60px; animation-delay: -4s; }
.welcome-bg .blob.b3 { width: 220px; height: 220px; background: var(--accent); top: 40%; left: 60%; opacity: .22; animation-delay: -8s; }
.welcome-bg .grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 60% at 50% 35%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 35%, #000 30%, transparent 75%);
  opacity: .4;
}
@keyframes blobFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-24px) scale(1.08); } }

.welcome-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 12px;
}
.welcome-brand { display: flex; align-items: center; gap: 10px; }
.welcome-brand img { height: 34px; width: 34px; object-fit: contain; }
.welcome-brand span { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.welcome-top-actions { display: flex; align-items: center; gap: 8px; }
.welcome-top-actions .iconbtn { height: 40px; width: 40px; border-radius: 999px; }
.welcome-link {
  font-size: 14px; font-weight: 700; color: var(--muted-foreground);
  padding: 0 12px; height: 40px; display: none; align-items: center; border-radius: 999px;
  transition: color .15s, background .15s;
}
.welcome-link:hover { color: var(--foreground); background: var(--secondary); }
.welcome-reg { height: 40px; width: auto; padding: 0 18px; border-radius: 999px; font-weight: 700; }

.welcome-main {
  position: relative; z-index: 1;
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 20px 16px; gap: 16px; min-height: 0;
  overflow: hidden;
}
.welcome-viewport { flex-shrink: 1; min-width: 0; overflow: hidden; width: 100%; }
.welcome-track { flex-shrink: 0; }
.welcome-slide { flex-shrink: 1; }
.slide-illustration { flex-shrink: 1; }
.welcome-side { flex-shrink: 0; }
.welcome-foot { flex-shrink: 0; }
.welcome-dots { flex-shrink: 0; }
.welcome-platforms { flex-shrink: 0; }
.welcome-track {
  display: flex; width: 100%;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.welcome-slide {
  flex: 0 0 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 2px 6px;
  opacity: .35; transition: opacity .45s ease;
}
.welcome-slide.active { opacity: 1; }
.slide-title {
  margin: 0; font-size: clamp(22px, 6vw, 32px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15; max-width: 18ch;
  background-image: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slide-sub { margin: 0; font-size: clamp(14px, 3.6vw, 16px); color: var(--muted-foreground); max-width: 34ch; line-height: 1.5; }

/* --- Ilustraciones (svg + chips) --- */
.slide-illustration {
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
  flex-shrink: 1;
}
.ill-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--primary) 45%, transparent), transparent 70%); filter: blur(18px); animation: glowPulse 3.4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .8; transform: scale(1.1); } }
.ill-rocket, .ill-wallet, .ill-timer, .ill-globe {
  position: relative; z-index: 1;
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-foreground);
  background-image: var(--gradient-primary);
  border-radius: 30px;
  box-shadow: var(--shadow-glow);
  animation: floatY 3.6s ease-in-out infinite;
}
.ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 48px; height: 48px; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ill-orbit { position: absolute; border: 2px solid color-mix(in oklab, var(--primary) 50%, transparent); border-radius: 50%; }
.ill-orbit.o1 { width: 156px; height: 156px; border-style: dashed; opacity: .5; animation: spin 18s linear infinite; }
.ill-orbit.o2 { width: 130px; height: 130px; opacity: .35; animation: spin 14s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.ill-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px;
  box-shadow: var(--shadow-card);
  animation: chipFloat 3s ease-in-out infinite;
}
.ill-chip .social { height: 26px; width: 26px; border-radius: 8px; }
.ill-chip .social.round { border-radius: 50%; }
.ill-chip svg { color: var(--foreground); }
.c-ig { top: 14px; left: 8px; animation-delay: -0.4s; }
.c-tk { top: 22px; right: 6px; animation-delay: -1.2s; }
.c-yt { bottom: 30px; left: 16px; animation-delay: -2s; }
.c-btc { top: 18px; left: 14px; animation-delay: -0.6s; color: #f7931a; }
.c-card { bottom: 26px; right: 18px; animation-delay: -1.4s; }
.c-mp { bottom: 18px; left: 24px; animation-delay: -2.2s; color: var(--primary-glow); }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ill-spark { position: absolute; color: var(--primary-glow); animation: twinkle 2.4s ease-in-out infinite; opacity: .8; }
.s1 { top: 6px; right: 24px; }
.s2 { bottom: 8px; right: 40px; animation-delay: -1s; }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.ill-check, .ill-cart {
  position: absolute; z-index: 2; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 8px; box-shadow: var(--shadow-card);
}
.ill-check { bottom: 18px; right: 16px; color: var(--success); animation: chipFloat 3s ease-in-out infinite -0.5s; }
.ill-check svg { width: 28px; height: 28px; }
.ill-cart { top: 16px; left: 12px; animation: chipFloat 3s ease-in-out infinite -1.5s; }
.ill-coin {
  position: absolute; z-index: 2; font-weight: 800; font-size: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px; box-shadow: var(--shadow-card);
  animation: chipFloat 3s ease-in-out infinite;
}
.coin-ars { top: 18px; left: 18px; }
.coin-usd { bottom: 22px; right: 22px; animation-delay: -1.3s; }

/* --- Dots --- */
.welcome-dots { display: flex; gap: 8px; z-index: 2; }
.welcome-dots .dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
  transition: width .25s ease, background .25s ease; padding: 0;
}
.welcome-dots .dot.on { width: 26px; background-image: var(--gradient-primary); }

/* --- Bloque inferior --- */
.welcome-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2; width: 100%; max-width: 360px; }
/* Panel lateral (dots + CTA + plataformas). En m\u00f3vil va en columna debajo
   del carrusel; en desktop va a la derecha (ver media queries m\u00e1s abajo). */
.welcome-side { display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; width: 100%; max-width: 360px; }
.welcome-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--success);
  background: color-mix(in oklab, var(--success) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
  padding: 6px 12px; border-radius: 999px;
}
.welcome-start { width: 100%; max-width: 320px; border-radius: var(--radius-2xl); animation: startPulse 2.6s ease-in-out infinite; }
@keyframes startPulse { 0%,100% { box-shadow: var(--shadow-glow); } 50% { box-shadow: 0 18px 50px -14px oklch(0.58 0.222 296 / 0.9); } }
.welcome-foot-sub { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: center; }

/* --- Plataformas --- */
.welcome-platforms { display: flex; gap: 10px; z-index: 2; flex-wrap: wrap; justify-content: center; }
.welcome-platforms .social { height: 36px; width: 36px; }
.welcome-platforms .social.round { border-radius: 50%; }

/* Responsive */
@media (min-width: 480px) {
  .welcome-link { display: inline-flex; }
}
@media (min-width: 640px) {
  .slide-illustration { width: 240px; height: 240px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 120px; height: 120px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 56px; height: 56px; }
  .ill-orbit.o1 { width: 180px; height: 180px; }
  .ill-orbit.o2 { width: 150px; height: 150px; }
  .welcome-top { padding: 20px 32px; }
}
/* Altura típica de móvil (~600-700px): compactar todo para que entre sin scroll */
@media (max-height: 700px) {
  .slide-illustration { width: 150px; height: 150px; margin-bottom: 0; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 80px; height: 80px; border-radius: 22px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 36px; height: 36px; }
  .ill-orbit.o1 { width: 120px; height: 120px; }
  .ill-orbit.o2 { width: 100px; height: 100px; }
  .ill-chip { padding: 4px; }
  .ill-chip .social { height: 18px; width: 18px; }
  .ill-check svg { width: 22px; height: 22px; }
  .ill-check, .ill-cart { padding: 6px; }
  .ill-coin { font-size: 12px; }
  .welcome-main { gap: 8px; padding: 2px 20px 12px; }
  .welcome-slide { gap: 8px; }
  .welcome-side { gap: 10px; }
  .welcome-foot { gap: 8px; }
  .slide-title { font-size: clamp(17px, 5vw, 24px); }
  .slide-sub { font-size: clamp(12px, 3vw, 14px); line-height: 1.4; }
  .welcome-platforms .social { height: 28px; width: 28px; }
  .welcome-platforms { gap: 8px; }
  .welcome-start { height: 42px; }
  .welcome-badge { font-size: 11px; padding: 4px 10px; }
  .welcome-foot-sub { font-size: 11px; }
  .welcome-dots .dot { width: 7px; height: 7px; }
  .welcome-dots .dot.on { width: 22px; }
  .welcome-top { padding: 10px 16px; }
}

/* Móvil pequeño en ancho: compactar */
@media (max-width: 380px) {
  .slide-illustration { width: 150px; height: 150px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 80px; height: 80px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 36px; height: 36px; }
  .ill-orbit.o1 { width: 120px; height: 120px; }
  .ill-orbit.o2 { width: 100px; height: 100px; }
  .welcome-main { gap: 8px; padding: 2px 14px 12px; }
  .welcome-top { padding: 10px 14px; }
  .welcome-brand img { height: 28px; width: 28px; }
  .welcome-brand span { font-size: 18px; }
  .welcome-platforms { gap: 7px; }
  .welcome-platforms .social { height: 28px; width: 28px; }
  .slide-title { font-size: clamp(18px, 7vw, 24px); }
  .slide-sub { font-size: clamp(12px, 4vw, 14px); }
}

/* Landscape en móvil: altura muy limitada, compactar todo */
@media (max-height: 500px) and (orientation: landscape) {
  .slide-illustration { width: 110px; height: 110px; margin-bottom: 0; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 62px; height: 62px; border-radius: 18px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 28px; height: 28px; }
  .ill-orbit.o1 { width: 86px; height: 86px; }
  .ill-orbit.o2 { width: 72px; height: 72px; }
  .ill-chip { padding: 3px; }
  .ill-chip .social { height: 14px; width: 14px; }
  .welcome-main { gap: 6px; padding: 2px 20px 10px; }
  .welcome-side { gap: 8px; }
  .welcome-foot { gap: 6px; }
  .slide-title { font-size: clamp(15px, 4vw, 20px); }
  .slide-sub { font-size: clamp(11px, 2.5vw, 13px); }
  .welcome-platforms .social { height: 24px; width: 24px; }
  .welcome-start { height: 38px; font-size: 14px; }
  .welcome-badge { font-size: 10px; padding: 3px 8px; }
  .welcome-foot-sub { display: none; }
  .welcome-dots .dot { width: 6px; height: 6px; }
  .welcome-dots .dot.on { width: 20px; }
  .welcome-top { padding: 6px 16px; }
}

/* ====================================================================== */
/* Bienvenida — adaptación a escritorio / PC (≥768px y ≥1024px)            */
/* En pantallas grandes usamos un layout de dos columnas: el carrusel a    */
/* la izquierda y el CTA + plataformas a la derecha. Las ilustraciones y   */
/* los textos escalan para aprovechar el espacio horizontal.               */
/* ====================================================================== */
@media (min-width: 768px) {
  .welcome-top { padding: 24px 48px; }
  .welcome-brand img { height: 40px; width: 40px; }
  .welcome-brand span { font-size: 24px; }
  .welcome-top-actions { gap: 12px; }
  .welcome-reg { height: 44px; padding: 0 24px; font-size: 15px; }
  .welcome-link { font-size: 15px; height: 44px; padding: 0 18px; }
  .welcome-top-actions .iconbtn { height: 44px; width: 44px; }

  /* Layout de dos columnas: carrusel | panel lateral */
  .welcome-main {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 12px 48px 20px;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
  }
  .welcome-viewport {
    flex: 1 1 0;
    max-width: 520px;
    min-height: 0;
  }
  .welcome-side {
    flex: 0 0 340px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .slide-illustration { width: 280px; height: 280px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 140px; height: 140px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 64px; height: 64px; }
  .ill-orbit.o1 { width: 210px; height: 210px; }
  .ill-orbit.o2 { width: 176px; height: 176px; }
  .slide-title { font-size: clamp(28px, 4vw, 38px); max-width: 22ch; }
  .slide-sub { font-size: clamp(15px, 2vw, 18px); max-width: 40ch; }

  /* Panel derecho: dots + CTA + plataformas */
  .welcome-dots { margin-bottom: 0; }
  .welcome-foot {
    width: 100%;
    max-width: none;
    align-items: stretch;
    gap: 16px;
  }
  .welcome-foot-sub { font-size: 13px; }
  .welcome-start { max-width: none; width: 100%; }
  .welcome-badge { font-size: 13px; }
  .welcome-platforms { gap: 14px; }
  .welcome-platforms .social { height: 44px; width: 44px; }
}

/* Desktop con poca altura (ej: inspector en modo móvil): compactar */
@media (min-width: 768px) and (max-height: 700px) {
  .welcome-main { gap: 24px; padding: 8px 48px 12px; }
  .slide-illustration { width: 200px; height: 200px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 100px; height: 100px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 46px; height: 46px; }
  .ill-orbit.o1 { width: 150px; height: 150px; }
  .ill-orbit.o2 { width: 124px; height: 124px; }
  .welcome-side { gap: 14px; }
  .welcome-foot { gap: 12px; }
  .slide-title { font-size: clamp(22px, 3vw, 30px); }
  .slide-sub { font-size: clamp(13px, 1.6vw, 16px); }
  .welcome-platforms .social { height: 36px; width: 36px; }
  .welcome-start { height: 46px; }
  .welcome-top { padding: 12px 48px; }
}
@media (min-width: 768px) and (max-height: 520px) {
  .welcome-main { gap: 16px; padding: 4px 48px 8px; }
  .slide-illustration { width: 140px; height: 140px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 72px; height: 72px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 34px; height: 34px; }
  .ill-orbit.o1 { width: 110px; height: 110px; }
  .ill-orbit.o2 { width: 90px; height: 90px; }
  .welcome-side { gap: 10px; }
  .welcome-foot { gap: 8px; }
  .slide-title { font-size: clamp(18px, 2.5vw, 24px); }
  .slide-sub { font-size: clamp(12px, 1.4vw, 14px); }
  .welcome-platforms .social { height: 28px; width: 28px; }
  .welcome-start { height: 40px; font-size: 14px; }
  .welcome-foot-sub { display: none; }
  .welcome-top { padding: 8px 48px; }
}

@media (min-width: 1024px) {
  .welcome-top { padding: 24px 64px; }
  .welcome-main { gap: 56px; max-width: 1200px; padding: 16px 64px 24px; }
  .welcome-viewport { max-width: 580px; }
  .welcome-side { flex-basis: 380px; }
  .slide-illustration { width: 320px; height: 320px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 160px; height: 160px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 72px; height: 72px; }
  .ill-orbit.o1 { width: 240px; height: 240px; }
  .ill-orbit.o2 { width: 200px; height: 200px; }
  .slide-title { font-size: clamp(32px, 3.5vw, 42px); }
  .welcome-start { height: 54px; font-size: 17px; }
  .welcome-platforms .social { height: 48px; width: 48px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .welcome-main { gap: 32px; padding: 10px 64px 14px; }
  .slide-illustration { width: 220px; height: 220px; }
  .ill-rocket, .ill-wallet, .ill-timer, .ill-globe { width: 112px; height: 112px; }
  .ill-rocket svg, .ill-wallet svg, .ill-timer svg, .ill-globe svg { width: 50px; height: 50px; }
  .ill-orbit.o1 { width: 166px; height: 166px; }
  .ill-orbit.o2 { width: 138px; height: 138px; }
  .slide-title { font-size: clamp(24px, 3vw, 32px); }
  .welcome-start { height: 46px; }
  .welcome-platforms .social { height: 38px; width: 38px; }
}

/* ======================================================================= */
/* PANTALLA DE MANTENIMIENTO                                               */
/* ======================================================================= */
.maint {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px; gap: 18px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--primary) 16%, var(--background)), var(--background) 65%);
  animation: maintIn .5s ease both;
}
@keyframes maintIn { from { opacity: 0; } to { opacity: 1; } }
.maint-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 460px; animation: maintRise .6s .1s cubic-bezier(.22,.61,.36,1) both; }
@keyframes maintRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.maint-gear {
  position: relative; width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.maint-gear .gear {
  width: 130px; height: 130px;
  background-image: var(--gradient-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 0 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.56 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 0 1 0-4h.09a1.7 1.7 0 0 0 1.56-1.11 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34H9a1.7 1.7 0 0 0 1-1.56V3a2 2 0 0 1 4 0v.09a1.7 1.7 0 0 0 1 1.56 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87V9a1.7 1.7 0 0 0 1.56 1H21a2 2 0 0 1 0 4h-.09a1.7 1.7 0 0 0-1.56 1Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 0 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.56 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 0 1 0-4h.09a1.7 1.7 0 0 0 1.56-1.11 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34H9a1.7 1.7 0 0 0 1-1.56V3a2 2 0 0 1 4 0v.09a1.7 1.7 0 0 0 1 1.56 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87V9a1.7 1.7 0 0 0 1.56 1H21a2 2 0 0 1 0 4h-.09a1.7 1.7 0 0 0-1.56 1Z'/></svg>") center/contain no-repeat;
  animation: gearSpin 9s linear infinite;
  filter: drop-shadow(0 14px 30px oklch(0.58 0.222 296 / .6));
}
@keyframes gearSpin { to { transform: rotate(360deg); } }
.maint-gear .wrench {
  position: absolute; width: 56px; height: 56px; color: var(--primary-foreground);
  animation: wrenchWiggle 2.4s ease-in-out infinite;
}
@keyframes wrenchWiggle { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.maint-spark { position: absolute; color: var(--primary-glow); animation: twinkle 2.2s ease-in-out infinite; }
.maint-spark.ms1 { top: -4px; right: 8px; }
.maint-spark.ms2 { bottom: 6px; right: -6px; animation-delay: -1s; }
.maint h1 { margin: 0; font-size: clamp(24px, 6vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); }
.maint p { margin: 0; font-size: clamp(15px, 4vw, 17px); color: var(--muted-foreground); max-width: 36ch; line-height: 1.55; }
.maint-brand { display: flex; align-items: center; gap: 8px; margin-top: 10px; opacity: .85; }
.maint-brand img { height: 26px; width: 26px; object-fit: contain; }
.maint-brand span { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.maint-progress { width: 200px; height: 5px; border-radius: 999px; background: var(--secondary); overflow: hidden; margin-top: 4px; }
.maint-progress span { display: block; height: 100%; width: 40%; border-radius: 999px; background-image: var(--gradient-primary); animation: maintBar 1.8s ease-in-out infinite; }
@keyframes maintBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* Overlay de mantenimiento inyectado en páginas logueadas (tiempo real) */
.maint-overlay { position: fixed; inset: 0; z-index: 99999; }

/* ========================================================================
   v29 — Modal "Cambiar proveedor / API" (svcswitch)
   Responsive: bottom-sheet en móvil, centrado en desktop.
   ======================================================================== */

/* Botón 🔄 dentro del modal "Editar servicio" que abre el cambio de ID */
.svc-edit-switch-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  color: var(--primary-glow);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.svc-edit-switch-link:active {
  background: color-mix(in oklab, var(--primary) 16%, transparent);
}
.svc-edit-switch-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-foreground);
}

/* El sheet del modal svcswitch es más ancho en desktop */
.svc-switch-sheet { max-width: 540px; }

/* Info del servicio actual */
.svc-switch-current {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: color-mix(in oklab, var(--secondary) 30%, transparent);
}
.svc-switch-current-name {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-switch-current-info {
  font-size: 11px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* Hint */
.svc-switch-hint {
  font-size: 11px;
  color: var(--muted-foreground);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Campos del form */
.svc-switch-form { display: flex; flex-direction: column; gap: 10px; }
.svc-switch-field { display: flex; flex-direction: column; gap: 4px; }
.svc-switch-field label { font-size: 12px; font-weight: 700; color: var(--foreground); }
.svc-switch-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--foreground);
}
/* Input de búsqueda dentro del modal svcswitch: padding completo
   con espacio a la izquierda para la lupa (hereda .svc-search input
   del CSS embebido que da padding-left:34px). */
.svc-switch-field .svc-search input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  font-size: 16px; /* >=16px evita zoom automático en iOS */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--foreground);
  -webkit-appearance: none;
  appearance: none;
}

/* Lista de servicios del proveedor */
.svc-switch-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Cada item de la lista (radio + info) */
.svc-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.svc-switch-item:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}
.svc-switch-item:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, transparent);
}
.svc-switch-item input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.svc-switch-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-switch-item-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-switch-item-meta {
  font-size: 10px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state */
.svc-switch-empty {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 12px;
  padding: 24px 0;
  margin: 0;
}

/* Botón refrescar */
.svc-switch-refresh {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Sección de confirmación */
.svc-switch-confirm {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-switch-selected {
  font-size: 11px;
  color: var(--muted-foreground);
  text-align: center;
}
.svc-switch-selected b {
  color: var(--primary-glow);
  font-size: 13px;
}
.svc-switch-submit {
  width: 100%;
  opacity: .5;
  transition: opacity .2s;
}
.svc-switch-submit.ready {
  opacity: 1;
}

/* --- Responsive: desktop (≥640px) --- */
@media (min-width: 640px) {
  .svc-switch-sheet { max-width: 560px; }
  .svc-switch-list { max-height: 320px; }
  .svc-switch-item-name { font-size: 13px; }
  .svc-switch-item-meta { font-size: 11px; }
}

/* --- Responsive: desktop grande (≥1024px) --- */
@media (min-width: 1024px) {
  .svc-switch-sheet { max-width: 600px; }
  .svc-switch-list { max-height: 380px; }
  .svc-switch-hint { font-size: 12px; }
}

/* v30 — Botón "Ver más" para paginación progresiva de servicios.
   Se usa tanto en la lista de importación como en el modal de cambio
   de Service ID. Carga 100 servicios más sin recargar la página. */
.svc-vermas {
  font-size: 12px;
  font-weight: 700;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.svc-vermas:active {
  transform: scale(.98);
}