/* ============================================================
   MEDEL VAULT v2 — App shell · Glass · Brutal redesign
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --accent: #0066ff;
  --accent-2: #4d8bff;
  --accent-3: #6e0bff;
  --accent-glow: rgba(0, 102, 255, 0.45);
  --danger: #ff3b30;
  --danger-glow: rgba(255, 59, 48, 0.4);
  --success: #30d158;
  --warning: #ff9f0a;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --blur-1: blur(20px) saturate(160%);
  --blur-2: blur(32px) saturate(180%);
  --blur-3: blur(48px) saturate(200%);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t1: 0.16s;
  --t2: 0.28s;
  --t3: 0.45s;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  --sidebar-w: 264px;

  /* Paleta de colores para iconos por servicio */
  --c0: #0066ff; /* azul */
  --c1: #6e0bff; /* violeta */
  --c2: #ff2d55; /* rojo */
  --c3: #ff9f0a; /* naranja */
  --c4: #30d158; /* verde */
  --c5: #00c8ff; /* cian */
  --c6: #ff3b9f; /* rosa */
  --c7: #ffd60a; /* amarillo */
}

:root,
[data-theme="dark"] {
  --bg-base: #050811;
  --bg-mesh-1: rgba(0, 102, 255, 0.40);
  --bg-mesh-2: rgba(110, 11, 255, 0.32);
  --bg-mesh-3: rgba(0, 200, 255, 0.20);
  --bg-mesh-4: rgba(255, 0, 170, 0.14);

  --surface: rgba(14, 18, 32, 0.55);
  --surface-2: rgba(20, 26, 44, 0.78);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --highlight: rgba(255, 255, 255, 0.06);

  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.50);
  --text-4: rgba(255, 255, 255, 0.32);

  --field-bg: rgba(255, 255, 255, 0.05);
  --field-bg-hover: rgba(255, 255, 255, 0.08);
  --field-border: rgba(255, 255, 255, 0.10);

  --shadow-1: 0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 16px 50px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 30px 90px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  --bg-base: #eef2fa;
  --bg-mesh-1: rgba(0, 102, 255, 0.20);
  --bg-mesh-2: rgba(110, 11, 255, 0.16);
  --bg-mesh-3: rgba(0, 200, 255, 0.18);
  --bg-mesh-4: rgba(255, 100, 200, 0.08);

  --surface: rgba(255, 255, 255, 0.55);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(255, 255, 255, 0.55);
  --surface-hover: rgba(10, 14, 26, 0.05);
  --border: rgba(10, 14, 26, 0.08);
  --border-strong: rgba(10, 14, 26, 0.14);
  --highlight: rgba(255, 255, 255, 0.85);

  --text-1: #060912;
  --text-2: rgba(6, 9, 18, 0.72);
  --text-3: rgba(6, 9, 18, 0.55);
  --text-4: rgba(6, 9, 18, 0.38);

  --field-bg: rgba(255, 255, 255, 0.6);
  --field-bg-hover: rgba(255, 255, 255, 0.9);
  --field-border: rgba(10, 14, 26, 0.08);

  --shadow-1: 0 4px 16px rgba(0, 50, 130, 0.06);
  --shadow-2: 0 16px 50px rgba(0, 50, 130, 0.10);
  --shadow-3: 0 30px 90px rgba(0, 50, 130, 0.14);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font) !important;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg-base) !important;
  color: var(--text-1) !important;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  transition: background var(--t2) var(--ease), color var(--t2) var(--ease);
}

/* Mesh gradient + grain */
body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 18%, var(--bg-mesh-1) 0%, transparent 36%),
    radial-gradient(circle at 88% 22%, var(--bg-mesh-2) 0%, transparent 38%),
    radial-gradient(circle at 50% 88%, var(--bg-mesh-3) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, var(--bg-mesh-4) 0%, transparent 35%);
  filter: blur(30px);
  animation: meshFloat 32s var(--ease) infinite alternate;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.30;
  pointer-events: none;
  mix-blend-mode: overlay;
}

[data-theme="light"] body::after { opacity: 0.14; }

@keyframes meshFloat {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(2%, -3%) rotate(2deg); }
  100% { transform: translate(-2%, 2%) rotate(-2deg); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent); text-decoration: none; transition: color var(--t1) var(--ease); }
a:hover { color: var(--accent-2); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--text-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; color: var(--text-2); }

/* ============================================================
   APP SHELL — sidebar fija + main scrolleable
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

@media (max-width: 992px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
}

/* ----- SIDEBAR (desktop) ----- */
.v-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background:
    linear-gradient(180deg,
      rgba(0, 102, 255, 0.06) 0%,
      transparent 30%,
      rgba(110, 11, 255, 0.05) 100%),
    var(--surface-2);
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border-right: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  z-index: 50;
  overflow: hidden;
}

/* Glow lateral decorativo del sidebar */
.v-sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-glow) 30%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 992px) {
  .v-sidebar { display: none; }
}

/* ============================================================
   BRAND — logo + pulse
   ============================================================ */
.v-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.v-brand__logo {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: transform var(--t1) var(--ease);
}

.v-brand__logo:hover { transform: translateX(2px); }

.v-brand__logo img {
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 102, 255, 0.30));
}

/* Alterna logo / wordmark según tema */
[data-theme="dark"]  .v-brand__logo-light,
[data-theme="dark"]  .v-brand__wordmark-light { display: none !important; }
[data-theme="light"] .v-brand__logo-dark,
[data-theme="light"] .v-brand__wordmark-dark  { display: none !important; }

/* Wordmark fallback (cuando no hay logo subido para ese tema) */
.v-brand__wordmark {
  display: inline-block;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  line-height: 1;
}

.v-brand--compact .v-brand__wordmark { font-size: 16px; }

.v-brand__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.6);
  animation: pulseDot 2.4s var(--ease) infinite;
}

.v-brand--compact {
  padding: 0;
  margin: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.v-brand--compact img {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 102, 255, 0.25));
}

.v-brand--compact .v-brand__logo-dark,
.v-brand--compact .v-brand__logo-light { height: 30px; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

/* ============================================================
   NAV ITEMS
   ============================================================ */
/* Mata el background salmón #ee6e73 que Materialize aplica al <nav> */
nav.v-sidebar__nav,
.v-sidebar__nav {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
  width: auto !important;
  padding: 0 !important;
  color: inherit !important;
}

.v-nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px !important;
  border-radius: var(--r-md);
  color: var(--text-2) !important;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  transition: all var(--t1) var(--ease);
  position: relative;
  text-decoration: none;
  background: transparent !important;
  border: 1px solid transparent;
  outline: none !important;
  height: auto !important;
  line-height: 1.2 !important;
}

.v-nav-item:hover {
  background: var(--surface-hover) !important;
  color: var(--text-1) !important;
  border-color: var(--border);
}

.v-nav-item:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

.v-nav-item.is-active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%) !important;
  color: #fff !important;
  border-color: transparent;
  box-shadow:
    0 8px 24px rgba(0, 102, 255, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.v-nav-item.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}

.v-nav-item i.material-icons {
  font-size: 21px !important;
  color: inherit !important;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.v-nav-item span {
  position: relative;
  z-index: 1;
  flex: 1;
}

.v-nav-item__chevron {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  opacity: 0.7;
  flex: 0 0 auto !important;
}

.v-nav-item__chevron i { font-size: 18px !important; }

/* ============================================================
   STATUS CARD (relleno del hueco con info)
   ============================================================ */
.v-status-card {
  margin: 14px 4px 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(48, 209, 88, 0.08), transparent 60%),
    var(--surface-soft);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v-status-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.v-status-card__label {
  font-weight: 700;
  color: var(--text-1);
  font-size: 12.5px;
  letter-spacing: -0.005em;
}

.v-status-card__value {
  font-family: var(--mono);
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.v-status-card__icon {
  font-size: 14px !important;
  color: var(--text-3);
}

.v-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5);
  animation: pulseDot 2.4s var(--ease) infinite;
  flex-shrink: 0;
}

.v-sidebar__divider {
  height: 1px;
  background: var(--border);
  margin: 10px 4px;
}

.v-sidebar__bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.v-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  margin-bottom: 4px;
}

.v-user-card img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
}

.v-user-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.v-user-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-user-card__email {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- TOPBAR mobile ----- */
.v-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: var(--surface);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  border-bottom: 1px solid var(--border);
  z-index: 50;
  /* 3 columnas: hamburguesa | logo centrado | toggle tema */
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

@media (max-width: 992px) {
  .v-topbar { display: grid; }
}

.v-topbar__menu {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-1) !important;
  flex-shrink: 0;
  text-decoration: none;
}

.v-topbar__menu i { font-size: 22px; }

/* Brand centrado en la columna 2 */
.v-topbar__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  text-decoration: none;
  min-width: 0;
}

/* Logo dentro del topbar — limita altura y permite que se reduzca si no cabe */
.v-topbar__brand img {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.v-topbar__brand .v-brand__wordmark {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Theme toggle del topbar — mismo tamaño que la hamburguesa, alineado a la derecha */
.v-topbar__theme {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-1) !important;
  flex-shrink: 0;
  justify-self: end;
  text-decoration: none;
  padding: 0;
  transition: all var(--t1) var(--ease);
}
.v-topbar__theme:hover {
  background: var(--surface-hover) !important;
  transform: scale(1.06) rotate(15deg);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.v-topbar__theme .material-icons { font-size: 20px !important; color: var(--text-1) !important; }

/* Mobile drawer (Materialize sidenav reused) */
.sidenav {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border-right: 1px solid var(--border-strong) !important;
  width: 290px !important;
  padding: 22px 14px !important;
}

.sidenav li {
  background: transparent !important;
  list-style: none;
  line-height: 1 !important;
  margin-bottom: 3px;
}

.sidenav li > a {
  background: transparent !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 11px 14px !important;
  color: var(--text-2) !important;
  font-family: var(--font) !important;
}

.sidenav li.active,
.sidenav li:hover,
.sidenav li > a:hover {
  background: transparent !important;
}

.sidenav li > a > i.material-icons,
.sidenav li > a > i {
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}

.sidenav .v-nav-item.is-active { color: #fff !important; }
.sidenav .v-sidebar__divider { height: 1px; background: var(--border); margin: 8px 6px; }

.sidenav-overlay { background: rgba(0, 0, 0, 0.55) !important; }

/* ============================================================
   MAIN AREA
   ============================================================ */
.v-main {
  min-width: 0;
  padding: 32px 40px 80px;
  position: relative;
}

@media (max-width: 992px) {
  .v-main { padding: 84px 18px 100px; }
}

@media (max-width: 600px) {
  .v-main { padding: 80px 14px 100px; }
}

/* ----- Page header ----- */
.v-pageheader {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title actions"
    "search search";
  align-items: center;
  gap: 20px 24px;
  margin-bottom: 28px;
}

.v-pageheader__title {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.v-pageheader__actions {
  grid-area: actions;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.v-pageheader__search {
  grid-area: search;
  display: flex;
  justify-content: center;
}

.v-pageheader__search .v-search {
  width: 100%;
  max-width: 520px;
  flex: none;
}

@media (max-width: 760px) {
  .v-pageheader {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "search"
      "actions";
  }
  .v-pageheader__actions { justify-content: stretch; }
  .v-pageheader__actions .v-btn { flex: 1; }
}

.v-pageheader h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, var(--text-1) 0%, var(--text-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ----- Search ----- */
.v-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  display: flex;
  align-items: center;
}

.v-search input,
input.searchMedel {
  width: 100% !important;
  height: 48px !important;
  padding: 0 48px 0 52px !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  font-family: var(--font) !important;
  font-size: 14.5px !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all var(--t1) var(--ease);
}

.v-search input::placeholder,
input.searchMedel::placeholder { color: var(--text-3); }

.v-search input:focus,
input.searchMedel:focus {
  border-color: var(--accent) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 0 0 4px var(--accent-glow) !important;
}

.v-search__icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-2) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  pointer-events: none;
  z-index: 2;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.v-search__clear,
.clear-icon {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px !important;
  left: auto !important;
  z-index: 2;
  padding: 0 !important;
  transition: all var(--t1) var(--ease);
}

.v-search__clear i.material-icons,
.clear-icon i.material-icons {
  font-size: 18px !important;
  color: inherit !important;
}

.v-search__clear:hover,
.clear-icon:hover {
  background: var(--accent);
  color: #fff !important;
}

/* ===== Botón de ordenar dentro del search ===== */
.v-search input[type="text"],
.v-search input[type="search"],
.v-search input.searchMedel {
  /* Reservamos espacio a la derecha para los 2 botones (clear + sort) */
  padding-right: 80px !important;
}

.v-search__sort-btn {
  position: absolute;
  right: 44px; /* Justo a la izquierda del clear */
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: all var(--t1) var(--ease);
}
.v-search__sort-btn i.material-icons,
.v-search__sort-btn .material-symbols-outlined { font-size: 20px; color: inherit; }
.v-search__sort-btn:hover {
  background: var(--surface-hover);
  color: var(--accent);
}

/* Menú dropdown del sort */
.v-search__sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 240px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: none;
}
.v-search__sort-menu.is-open { display: block; animation: vSortIn .18s var(--ease); }
@keyframes vSortIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v-search__sort-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: left;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.v-search__sort-menu button i.material-icons {
  font-size: 18px;
  color: var(--text-3);
}
.v-search__sort-menu button:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.v-search__sort-menu button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
}
.v-search__sort-menu button.is-active i.material-icons { color: #fff; }

/* ============================================================
   BOTONES
   ============================================================ */
.v-btn,
.btn,
.btn-large {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface-soft);
  color: var(--text-1) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: all var(--t1) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.v-btn:hover,
.v-btn:focus,
.v-btn:active {
  background: var(--surface-hover) !important;
  color: var(--text-1) !important;
  box-shadow: none !important;
  transform: none !important;
}
.v-btn--ghost:hover,
.v-btn--ghost:focus { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; }

.v-btn--primary,
.btnSave,
.btn.btnSave {
  background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 4px var(--accent-glow) !important;
  border-color: transparent !important;
}

/* Hover suave: sin "salto" de translate, solo brilla un pelín la sombra
   y el gradiente se aclara con filter brightness. */
.v-btn--primary:hover,
.v-btn--primary:focus,
.btnSave:hover,
.btnSave:focus {
  background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
  color: #fff !important;
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 2px 6px var(--accent-glow) !important;
  transform: none !important;
}

.v-btn--ghost,
.btnCancel,
.btnCancelEdit {
  background: var(--surface-soft) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-strong) !important;
}

.v-btn--ghost:hover,
.btnCancel:hover,
.btnCancelEdit:hover {
  background: var(--surface-hover) !important;
  color: var(--text-1) !important;
}

.v-btn--danger {
  background: rgba(255, 59, 48, 0.10) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 59, 48, 0.18) !important;
}

.v-btn--danger:hover {
  background: var(--danger) !important;
  color: #fff !important;
}

.v-btn i.material-icons {
  font-size: 18px !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Icon button */
.v-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--t1) var(--ease);
  padding: 0;
  flex-shrink: 0;
}

.v-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--accent);
}

.v-icon-btn:active { transform: scale(0.92); }

.v-icon-btn i.material-icons {
  font-size: 19px !important;
  color: inherit !important;
}

.v-icon-btn--danger:hover {
  background: rgba(255, 59, 48, 0.12);
  color: var(--danger);
}

/* Theme toggle */
.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-1) !important;
  transition: all var(--t1) var(--ease);
  text-decoration: none;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--surface-hover) !important;
  transform: scale(1.06) rotate(15deg);
  box-shadow: 0 6px 18px var(--accent-glow);
}

.theme-toggle .material-icons { font-size: 20px !important; color: var(--text-1) !important; }

/* ============================================================
   GRID DE CARDS
   ============================================================ */
.v-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

@media (max-width: 600px) {
  .v-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   CARD
   ============================================================ */
.v-card {
  background: var(--surface);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--t2) var(--ease),
              box-shadow var(--t2) var(--ease),
              border-color var(--t2) var(--ease);
  animation: cardIn 0.4s var(--ease) backwards;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--highlight), transparent 50%);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--t2) var(--ease);
}

.v-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.v-card:hover::before { opacity: 0.85; }

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

.v-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 12px;
}

.v-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 102, 255, 0.14);
  color: var(--accent);
  font-size: 20px;
  position: relative;
  overflow: hidden;
}

.v-card__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}

.v-card__icon i,
.v-card__icon .fa,
.v-card__icon [class^="fa-"],
.v-card__icon [class*=" fa-"] {
  color: inherit !important;
  font-size: 19px !important;
}

.v-card__icon[data-color="0"] { background: rgba(0,102,255,0.18); color: var(--c0); }
.v-card__icon[data-color="1"] { background: rgba(110,11,255,0.18); color: var(--c1); }
.v-card__icon[data-color="2"] { background: rgba(255,45,85,0.18); color: var(--c2); }
.v-card__icon[data-color="3"] { background: rgba(255,159,10,0.20); color: var(--c3); }
.v-card__icon[data-color="4"] { background: rgba(48,209,88,0.18); color: var(--c4); }
.v-card__icon[data-color="5"] { background: rgba(0,200,255,0.20); color: var(--c5); }
.v-card__icon[data-color="6"] { background: rgba(255,59,159,0.18); color: var(--c6); }
.v-card__icon[data-color="7"] { background: rgba(255,214,10,0.22); color: var(--c7); }

.v-card__heading {
  flex: 1;
  min-width: 0;
}

.v-card__title,
.v-card .card-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block !important;
}

.v-card__date {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.v-card__head-action {
  flex-shrink: 0;
}

.v-card__body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v-field {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  transition: background var(--t1) var(--ease);
}

.v-field:hover { background: var(--field-bg-hover); }

.v-field__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.v-field__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.v-field__value {
  flex: 1;
  min-width: 0;
  color: var(--text-1) !important;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  word-break: break-all;
  white-space: normal;
  display: block;
  cursor: pointer;
}

.v-field__value--secret { letter-spacing: 0.05em; }

.v-card__foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.v-card__foot .v-btn,
.v-card__foot button {
  flex: 1;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ============================================================
   FAB (mobile)
   ============================================================ */
.medelBtn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
  color: #fff !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.2) !important;
  z-index: 60;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0 !important;
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 992px) {
  .medelBtn { display: flex !important; }
}

.medelBtn:hover {
  transform: translateY(-3px) scale(1.04);
}

.medelBtn i.material-icons {
  font-size: 26px !important;
  color: #fff !important;
}

/* ============================================================
   ESTADOS VACÍOS
   ============================================================ */
.v-empty {
  text-align: center;
  padding: 80px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.v-empty__icon {
  width: 100px;
  height: 100px;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 12px 40px var(--accent-glow);
}

.v-empty__icon i.material-icons,
.v-empty__icon i.fa { font-size: 48px !important; color: inherit !important; }

.v-empty h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v-empty p {
  color: var(--text-2);
  font-size: 15px;
  max-width: 480px;
}

/* ============================================================
   MODALES (Materialize re-skin)
   ============================================================ */
.modal {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-3) !important;
  max-width: 540px !important;
  width: 92% !important;
  max-height: 92vh !important;
  top: 50% !important;
  transform: translate(0, -50%) scale(1) !important;
  overflow: hidden !important;
  color: var(--text-1) !important;
}

/* Animación al abrir: aplicada al .modal-content (que Materialize NO toca
   con inline styles, a diferencia del .modal exterior). Esto garantiza que
   el keyframe se vea sin que Materialize lo sobrescriba.
   El cierre lo gestiona Materialize con fade nativo. */
.modal.open .modal-content {
  animation: modalContentIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes modalContentIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(-14px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

[data-theme="light"] .modal-overlay { background: rgba(20, 30, 60, 0.30) !important; }

.modal .modal-content {
  padding: 28px !important;
  max-height: 78vh;
  overflow-y: auto;
  background: transparent !important;
}

.modal .modal-content h4 {
  color: var(--text-1) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em;
  margin: 0 0 8px !important;
}

/* Icono-cabecera del modal — bloque azul redondeado, CENTRADO encima del h4.
   Aplica a:
     - <i> hijo directo de .modal-content (modales de editar)
     - <i> hijo directo de un <form> dentro de .modal-content (añadir; ignora el
       <input type="hidden"> del CSRF gracias a :first-of-type)
     - cualquier <i class="v-modal-icon"> (override explícito) */
.modal .modal-content > i.material-icons:first-child,
.modal .modal-content > form > i.material-icons:first-of-type,
.modal .modal-content i.material-icons.v-modal-icon,
.modal .modal-content i.material-symbols-outlined.v-modal-icon {
  color: var(--accent) !important;
  font-size: 28px !important;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(0,102,255,0.18), rgba(110,11,255,0.10));
  border: 1px solid rgba(0,102,255,0.20);
  border-radius: 18px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px !important;
  box-shadow: 0 6px 18px rgba(0,102,255,0.18);
}
/* La fuente Material Symbols Outlined viene de Google Fonts; preserva su
   font-family al haber especificidad cuando usamos .v-modal-icon. */
.modal .modal-content i.material-symbols-outlined.v-modal-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-feature-settings: 'liga';
}

/* h4 inmediatamente después del icono → centrado también para que la cabecera
   sea coherente. Aplica a cualquier icono (material-icons clásico o
   material-symbols-outlined) que esté antes del h4. */
.modal .modal-content > i.material-icons:first-child + h4,
.modal .modal-content > i.material-symbols-outlined:first-child + h4,
.modal .modal-content > form > i.material-icons:first-of-type ~ h4,
.modal .modal-content > form > i.material-symbols-outlined:first-of-type ~ h4,
.modal .modal-content .v-modal-icon + h4 {
  text-align: center;
}

/* Subtítulo opcional debajo del h4 */
.v-modal-sub {
  text-align: center;
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}

/* Botones de acción centrados (orden: primario primero, ghost después) */
.v-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.v-modal-actions--center { justify-content: center; }
.v-modal-actions .v-btn { min-width: 140px; }

/* Modal de carpeta: ancho un poco mayor para el icon picker */
.v-folder-modal { max-width: 600px !important; }
/* Esconde el <input type="color"> nativo dentro del label custom */
#folder-editor-custom-color {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

.modal .card-title.titleWrite {
  color: var(--text-1) !important;
  font-size: 22px !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  display: block !important;
  padding: 12px 14px !important;
  margin: 0 0 22px 0 !important;
  background: var(--field-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--field-border);
  transition: all var(--t1) var(--ease);
  letter-spacing: -0.015em;
  outline: none !important;
}

.modal .card-title.titleWrite[contenteditable="true"]:hover {
  border-color: var(--border-strong);
  background: var(--field-bg-hover);
}

.modal .card-title.titleWrite[contenteditable="true"]:focus {
  border-color: var(--accent);
  background: var(--field-bg-hover);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.modal .modal-footer {
  background: var(--surface-soft) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 60px;
}

.modal .modal-footer .btn-flat {
  color: var(--accent) !important;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--r-pill) !important;
  text-transform: none !important;
}

/* Form layout dentro del modal */
.modal .card-content { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.modal .row { margin: 0 !important; }
.modal .col { padding: 0 !important; width: 100% !important; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.input-field {
  position: relative;
  margin: 16px 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

.input-field > label,
.input-field > label.active {
  order: -1;
  position: static !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3) !important;
  margin: 0 0 6px 4px !important;
  font-family: var(--font) !important;
  transform: none !important;
  pointer-events: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
}

.input-field > input,
.input-field > textarea { order: 0; }

.input-field > p { order: 1; margin: 6px 0 0 4px !important; font-size: 12px; color: var(--text-3); }

.input-field input[type="text"],
.input-field input[type="password"],
.input-field input[type="email"],
.input-field input[type="number"],
.input-field input[type="url"],
.input-field input[type="tel"],
.input-field input[type="search"],
.input-field input:not([type]),
.input-field textarea {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  height: auto !important;
  font-family: var(--font) !important;
  font-size: 14.5px !important;
  color: var(--text-1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: all var(--t1) var(--ease);
  margin: 0 !important;
  outline: 0 !important;
}

.input-field textarea {
  min-height: 90px !important;
  resize: vertical;
  line-height: 1.5;
}

.input-field input:focus,
.input-field textarea:focus,
.input-field input[type="url"]:focus,
.input-field input[type="tel"]:focus,
.input-field input[type="search"]:focus {
  background: var(--field-bg-hover) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.input-field input::placeholder,
.input-field textarea::placeholder,
.input-field input[type="url"]::placeholder,
.input-field input[type="tel"]::placeholder,
.input-field input[type="search"]::placeholder { color: var(--text-4); }

/* Anula el highlight amarillo del autofill de Chrome/Edge.
   Pintamos un box-shadow gigante del color del field para tapar el yellow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  -webkit-text-fill-color: var(--text-1) !important;
  caret-color: var(--text-1) !important;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s !important;
}

/* Variante focus: con anillo azul */
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg-hover) inset, 0 0 0 3px var(--accent-glow) !important;
}

.input-field input[type="hidden"],
.input-field input[hidden] { display: none !important; }

input[hidden] { display: none !important; }

/* Wrapper que contiene <input> + .actions juntos. Permite que las acciones
   queden centradas verticalmente respecto al input REAL, no respecto al
   .input-field entero (que incluye label arriba y mensajes/medidor abajo). */
.input-field__row { position: relative; width: 100%; }

.input-field__row .actions,
.input-field .actions {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  z-index: 2;
}

.input-field__row .actions .btn,
.input-field .actions .btn {
  background: transparent !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-3) !important;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease) !important;
}

.input-field__row .actions .btn:hover,
.input-field__row .actions .btn:focus,
.input-field .actions .btn:hover,
.input-field .actions .btn:focus {
  background: var(--surface-hover) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.input-field__row .actions .btn i.material-icons,
.input-field .actions .btn i.material-icons { font-size: 18px !important; color: inherit !important; }

.input-field.password input,
.input-field input[type="password"] { padding-right: 86px !important; }

/* ===== MEDIDOR DE CONTRASEÑA ===== */
.v-pwmeter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 4px 0;
}
.v-pwmeter[hidden] { display: none; }
.v-pwmeter__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex: 1;
}
.v-pwmeter__bars > span {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-hover);
  transition: background var(--t2) var(--ease);
}
.v-pwmeter__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-3);
  min-width: 64px;
  text-align: right;
  transition: color var(--t2) var(--ease);
}

/* Niveles: 0=débil, 1=regular, 2=buena, 3=fuerte, 4=excelente */
.v-pwmeter[data-score="1"] .v-pwmeter__bars > span:nth-child(-n+1) { background: var(--danger); }
.v-pwmeter[data-score="1"] .v-pwmeter__label { color: var(--danger); }
.v-pwmeter[data-score="2"] .v-pwmeter__bars > span:nth-child(-n+2) { background: var(--warning); }
.v-pwmeter[data-score="2"] .v-pwmeter__label { color: var(--warning); }
.v-pwmeter[data-score="3"] .v-pwmeter__bars > span:nth-child(-n+3) { background: #c0e74a; }
.v-pwmeter[data-score="3"] .v-pwmeter__label { color: #9bb71f; }
.v-pwmeter[data-score="4"] .v-pwmeter__bars > span { background: var(--success); }
.v-pwmeter[data-score="4"] .v-pwmeter__label { color: var(--success); }

/* Custom select */
.select-wrap label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3) !important;
  margin: 0 0 6px 4px !important;
}

.custom-select-wrapper { position: relative; width: 100%; margin-bottom: 16px; }

.custom-select-trigger {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 44px 14px 16px !important;
  font-family: var(--font), "Font Awesome 7 Brands", "FontAwesome", sans-serif !important;
  font-size: 14.5px !important;
  color: var(--text-1) !important;
  cursor: pointer;
  user-select: none;
  transition: all var(--t1) var(--ease);
}

.custom-select-trigger:hover { background: var(--field-bg-hover) !important; border-color: var(--border-strong) !important; }
.custom-select-wrapper.open .custom-select-trigger { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow); }

.custom-select-trigger::after {
  content: "▾" !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--text-3) !important;
  right: 16px !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.custom-select-wrapper.open .custom-select-trigger::after { transform: translateY(-50%) rotate(180deg) !important; }

.custom-options {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  margin-top: 6px;
  padding: 6px !important;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1100 !important;
  list-style: none;
}

.custom-option {
  padding: 10px 14px !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font), "Font Awesome 7 Brands", "FontAwesome", sans-serif !important;
  font-size: 14px !important;
  color: var(--text-1) !important;
  cursor: pointer;
  transition: background var(--t1) var(--ease);
}

.custom-option:hover { background: var(--accent) !important; color: #fff !important; }

.custom-option .icon-code,
.custom-select-trigger .icon-code {
  font-family: "Font Awesome 7 Brands", "FontAwesome", sans-serif !important;
  margin-right: 12px !important;
  display: inline-block;
  width: 22px;
  text-align: center;
  color: var(--accent);
}

.custom-option:hover .icon-code { color: #fff; }

/* Right align actions in modal */
.right-align {
  display: flex !important;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px !important;
  flex-wrap: wrap;
  text-align: right;
}

@media (max-width: 480px) {
  .right-align { flex-direction: column-reverse; }
  .right-align .btn { width: 100%; }
}

/* ============================================================
   TOGGLE SWITCH (estilo iOS futurista)
   Reemplaza el checkbox cuadrado en toda la app.

   HTML:
     <label class="v-toggle">
       <input type="checkbox" name="...">
       <span class="v-toggle__track"><span class="v-toggle__thumb"></span></span>
       <span class="v-toggle__label">Texto</span>
     </label>
   ============================================================ */
.v-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text-1);
  padding: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  position: relative;
}

.v-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.v-toggle__track {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  transition: all 0.25s var(--ease);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.v-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e9ecf4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 0.25s var(--ease-spring);
}

[data-theme="dark"] .v-toggle__thumb {
  background: linear-gradient(180deg, #f1f3f8, #c5c9d3);
}

/* ESTADO ON */
.v-toggle input[type="checkbox"]:checked ~ .v-toggle__track {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  border-color: transparent;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.10),
    0 0 0 4px var(--accent-glow);
}

.v-toggle input[type="checkbox"]:checked ~ .v-toggle__track .v-toggle__thumb {
  left: calc(100% - 22px);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255,255,255,0.4) inset;
}

/* Hover sutil */
.v-toggle:hover .v-toggle__track {
  border-color: var(--border-strong);
}
.v-toggle:hover input[type="checkbox"]:checked ~ .v-toggle__track {
  filter: brightness(1.05);
}

/* Focus para accesibilidad teclado */
.v-toggle input[type="checkbox"]:focus-visible ~ .v-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Disabled */
.v-toggle input[type="checkbox"]:disabled ~ .v-toggle__track {
  opacity: 0.4;
  cursor: not-allowed;
}

.v-toggle__label {
  flex: 1;
}

/* Mata el ::before/::after que Materialize aplica a [type="checkbox"] + span
   (dibuja su PROPIO checkbox + tick por encima del nuestro y lo tapa) */
.checkbox-container input[type="checkbox"] + span.checkmark::before,
.checkbox-container .checkmark::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
}

/* Checkbox modern — declarado con !important para ganar a Materialize */
.checkbox-container,
label.checkbox-container {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14.5px !important;
  color: var(--text-1) !important;
  user-select: none;
  position: relative;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-family: var(--font) !important;
  -webkit-tap-highlight-color: transparent;
}

.checkbox-container input[type="checkbox"] {
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

.checkbox-container .checkmark {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 7px !important;
  background: var(--field-bg) !important;
  border: 1.5px solid var(--field-border) !important;
  position: relative !important;
  transition: all var(--t1) var(--ease);
  flex: 0 0 22px !important;
  display: inline-block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.checkbox-container .checkmark::after {
  content: "✓" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: none !important;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease-spring);
  border: 0 !important;
  pointer-events: none;
}

.checkbox-container input:checked ~ .checkmark {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.checkbox-container input:checked ~ .checkmark::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox-container > span:not(.checkmark) {
  flex: 0 1 auto;
  line-height: 1.4;
}

[type="checkbox"] + span:not(.lever) { padding-left: 0 !important; }

/* Tooltip simple */
.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  color: var(--text-3);
}

.tooltip i.material-icons { font-size: 16px !important; color: inherit; }

.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background: var(--surface-2);
  backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  text-align: center;
  border-radius: var(--r-md);
  padding: 10px 12px;
  position: absolute;
  z-index: 100;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  transition: opacity var(--t1) var(--ease);
  pointer-events: none;
}

.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* ============================================================
   SNACKBAR / TOASTR
   ============================================================ */
#snackbar {
  visibility: hidden;
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong);
  color: var(--text-1) !important;
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 90vw;
  text-align: center;
}

#snackbar.show {
  visibility: visible;
  animation: snackIn 0.4s var(--ease-spring), snackOut 0.4s var(--ease) 2.6s forwards;
}

@keyframes snackIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes snackOut {
  to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
}

#toast-container > div {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  font-family: var(--font) !important;
  box-shadow: var(--shadow-2) !important;
}

/* ============================================================
   SWAL2
   ============================================================ */
.swal2-popup {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  color: var(--text-1) !important;
  font-family: var(--font) !important;
  box-shadow: var(--shadow-3) !important;
}

.swal2-title, .swal2-html-container { color: var(--text-1) !important; }

/* === Swal modal centrado: reemplazar el icono nativo (líneas SVG-like
   que se descentran fácil) por un Material Icon centrado. Mismo enfoque
   que ya usamos para toast. Limpio, siempre alineado. === */
.swal2-popup:not(.swal2-toast) .swal2-icon {
  width: 80px !important;
  height: 80px !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  margin: 8px auto 18px !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon > * { display: none !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon::before {
  font-family: 'Material Icons';
  font-size: 48px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swal2-popup:not(.swal2-toast).swal2-icon-success .swal2-icon { border-color: var(--success) !important; }
.swal2-popup:not(.swal2-toast).swal2-icon-success .swal2-icon::before { content: 'check'; color: var(--success); }
.swal2-popup:not(.swal2-toast).swal2-icon-error   .swal2-icon { border-color: var(--danger) !important; }
.swal2-popup:not(.swal2-toast).swal2-icon-error   .swal2-icon::before { content: 'close'; color: var(--danger); }
.swal2-popup:not(.swal2-toast).swal2-icon-warning .swal2-icon { border-color: var(--warning) !important; }
.swal2-popup:not(.swal2-toast).swal2-icon-warning .swal2-icon::before { content: 'priority_high'; color: var(--warning); }
.swal2-popup:not(.swal2-toast).swal2-icon-info    .swal2-icon { border-color: var(--accent) !important; }
.swal2-popup:not(.swal2-toast).swal2-icon-info    .swal2-icon::before { content: 'info'; color: var(--accent); }
.swal2-popup:not(.swal2-toast).swal2-icon-question .swal2-icon { border-color: var(--text-3) !important; }
.swal2-popup:not(.swal2-toast).swal2-icon-question .swal2-icon::before { content: 'help_outline'; color: var(--text-2); }

.swal2-confirm.swal2-styled {
  background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 22px var(--accent-glow) !important;
  padding: 12px 24px !important;
}

.swal2-cancel.swal2-styled {
  background: var(--surface-soft) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
}

.swal2-backdrop-show { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(8px); }

/* === Toast Swal2 (top-end) ===
   El icono nativo (líneas .swal2-success-line-tip + .swal2-success-line-long)
   se descentra fácilmente cuando el toast es pequeño porque usa em-units
   relativos al popup. Lo reemplazamos por un Material Icon dentro de un
   círculo: simple, siempre centrado, look limpio. */
/* Container del toast: transparente, sin backdrop-filter, sin atrapar clicks */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-end.swal2-backdrop-show {
  padding: 18px 18px 0 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.swal2-container.swal2-top-end .swal2-toast {
  pointer-events: auto;
}

/* Toast SÓLIDO (sin glass) — fondo opaco, sin backdrop-filter,
   así la página de detrás se ve nítida sin blur */
[data-theme="dark"]  .swal2-container.swal2-top-end > .swal2-popup.swal2-toast { background: #1a2138 !important; }
[data-theme="light"] .swal2-container.swal2-top-end > .swal2-popup.swal2-toast { background: #ffffff !important; }

.swal2-container.swal2-top-end > .v-toast,
.swal2-container.swal2-top-end > .swal2-popup.swal2-toast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  /* Sombra sutil — el blur grande creaba una "mancha" borrosa debajo */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  font-family: var(--font) !important;
  padding: 18px 22px !important;
  min-width: 340px;
  max-width: 460px;
  display: flex !important;
  align-items: center;
  gap: 16px;
}

[data-theme="dark"] .swal2-container.swal2-top-end > .swal2-popup.swal2-toast {
  /* En oscuro la sombra debe ser más visible para crear profundidad */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40) !important;
}

.swal2-container.swal2-top-end .swal2-toast .swal2-title {
  color: var(--text-1) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
}

/* OCULTAR los elementos del icono nativo y rebuilder con ::before */
.swal2-container.swal2-top-end .swal2-toast .swal2-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  margin: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  flex-shrink: 0;
}

/* Tapamos los hijos animados originales */
.swal2-container.swal2-top-end .swal2-toast .swal2-icon > * {
  display: none !important;
}

/* Material Icon pintado con ::before — siempre centrado */
.swal2-container.swal2-top-end .swal2-toast .swal2-icon::before {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 22px !important;
  line-height: 1 !important;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  display: inline-block;
}

.swal2-container.swal2-top-end .swal2-toast.swal2-icon-success .swal2-icon {
  border-color: var(--success) !important;
  color: var(--success) !important;
  background: rgba(48, 209, 88, 0.10) !important;
}
.swal2-container.swal2-top-end .swal2-toast.swal2-icon-success .swal2-icon::before { content: 'check'; color: var(--success); }

.swal2-container.swal2-top-end .swal2-toast.swal2-icon-error .swal2-icon {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: rgba(255, 59, 48, 0.10) !important;
}
.swal2-container.swal2-top-end .swal2-toast.swal2-icon-error .swal2-icon::before { content: 'close'; color: var(--danger); }

.swal2-container.swal2-top-end .swal2-toast.swal2-icon-warning .swal2-icon {
  border-color: var(--warning) !important;
  color: var(--warning) !important;
  background: rgba(255, 159, 10, 0.10) !important;
}
.swal2-container.swal2-top-end .swal2-toast.swal2-icon-warning .swal2-icon::before { content: 'priority_high'; color: var(--warning); }

.swal2-container.swal2-top-end .swal2-toast.swal2-icon-info .swal2-icon {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(0, 102, 255, 0.10) !important;
}
.swal2-container.swal2-top-end .swal2-toast.swal2-icon-info .swal2-icon::before { content: 'info'; color: var(--accent); }

.swal2-container.swal2-top-end .swal2-toast.swal2-icon-question .swal2-icon {
  border-color: var(--text-2) !important;
  color: var(--text-2) !important;
  background: var(--surface-soft) !important;
}
.swal2-container.swal2-top-end .swal2-toast.swal2-icon-question .swal2-icon::before { content: 'help_outline'; color: var(--text-2); }

.swal2-container.swal2-top-end .swal2-toast .swal2-timer-progress-bar {
  background: var(--accent) !important;
  height: 3px !important;
}

/* ============================================================
   DROPDOWN ACCOUNT (sidebar)
   ============================================================ */
.dropdown-content {
  background: var(--surface-2) !important;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 6px !important;
  min-width: 200px !important;
  z-index: 1100 !important;
}

.dropdown-content li { background: transparent !important; min-height: auto !important; border-radius: var(--r-sm); margin: 2px 0; }

.dropdown-content li > a {
  color: var(--text-1) !important;
  padding: 11px 14px !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-sm);
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  transition: all var(--t1) var(--ease);
  line-height: 1.2 !important;
}

.dropdown-content li > a:hover { background: var(--accent) !important; color: #fff !important; }
.dropdown-content li > a:hover i { color: #fff !important; }
.dropdown-content li.divider { background: var(--border) !important; height: 1px !important; margin: 4px 8px !important; }
.dropdown-content li > a > i.material-icons { margin: 0 !important; font-size: 18px !important; color: var(--text-3); }

/* ============================================================
   No-results de búsqueda
   ============================================================ */
#no-results-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-2);
  font-size: 15px;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  body::before { animation: none !important; }
}

/* Ocultar restos de Materialize */
.fixed-action-btn { display: none !important; }
.preloader-wrapper.small { width: 24px; height: 24px; }
.material-icons { vertical-align: middle; line-height: 1; }
.btn-floating { background-color: var(--accent); }
.waves-light .waves-ripple { background-color: rgba(255,255,255,0.45); }

/* ============================================================
   RICH TEXT EDITOR (notas)
   ============================================================ */
.v-rte {
  display: flex;
  flex-direction: column;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 4px;
  transition: all var(--t1) var(--ease);
}

.v-rte:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.v-rte__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.v-rte__toolbar button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  padding: 0;
  transition: all var(--t1) var(--ease);
}

.v-rte__toolbar button:hover {
  background: var(--surface-hover);
  color: var(--accent);
}

.v-rte__toolbar button:active {
  transform: scale(0.92);
}

.v-rte__toolbar button.is-active {
  background: rgba(0, 102, 255, 0.14);
  color: var(--accent);
}

.v-rte__toolbar button i.material-icons {
  font-size: 17px !important;
  color: inherit !important;
}

.v-rte__sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.v-rte__editor {
  min-height: 180px;
  max-height: 400px;
  overflow-y: auto;
  padding: 14px 16px;
  outline: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-1);
  word-wrap: break-word;
}

.v-rte__editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-4);
  pointer-events: none;
}

.v-rte__editor h2,
.v-rte__editor h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 8px 0 4px;
  color: var(--text-1);
}

.v-rte__editor ul,
.v-rte__editor ol {
  margin: 4px 0;
  padding-left: 24px;
}

.v-rte__editor li { margin: 2px 0; }

.v-rte__editor a {
  color: var(--accent);
  text-decoration: underline;
}

.v-rte__editor blockquote {
  border-left: 3px solid var(--accent);
  margin: 8px 0;
  padding: 4px 12px;
  color: var(--text-2);
  background: var(--surface-soft);
  border-radius: 0 8px 8px 0;
}

/* Render del HTML de notas en el card */
.v-note-content {
  font-family: var(--font) !important;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.v-note-content h2, .v-note-content h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 4px 0 2px;
  color: var(--text-1);
}

.v-note-content ul, .v-note-content ol {
  margin: 2px 0; padding-left: 18px;
}

.v-note-content a { color: var(--accent); text-decoration: underline; }

.v-note-content b, .v-note-content strong { font-weight: 700; }

/* Label genérico (para usar fuera de .input-field) */
.v-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 16px 0 6px 4px;
  font-family: var(--font);
}

/* Modal más ancho (para notas con editor rico) */
.modal.v-modal--wide {
  max-width: 720px !important;
}

/* ============================================================
   ICON PICKER (modal + grid)
   ============================================================ */
.v-iconpicker {
  margin: 16px 0;
  width: 100%;
}

.v-iconpicker > label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3) !important;
  margin: 0 0 6px 4px !important;
  font-family: var(--font) !important;
}

.v-iconpicker__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--t1) var(--ease);
  font-family: var(--font);
  text-align: left;
  color: var(--text-1);
}

.v-iconpicker__trigger:hover {
  background: var(--field-bg-hover);
  border-color: var(--border-strong);
}

.v-iconpicker__preview {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 102, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.v-iconpicker__preview i {
  font-size: 18px !important;
  color: inherit !important;
}

.v-iconpicker__label {
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
}

.v-iconpicker__modal {
  max-width: 640px !important;
}

.v-iconpicker__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  padding: 0 16px;
  height: 44px;
  margin: 12px 0;
}

.v-iconpicker__search i {
  font-size: 20px !important;
  color: var(--text-3);
}

.v-iconpicker__search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14.5px;
  height: 100%;
}

.v-iconpicker__categories {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.v-iconpicker__cat {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t1) var(--ease);
}

.v-iconpicker__cat:hover { border-color: var(--border-strong); color: var(--text-1); }

.v-iconpicker__cat.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.v-iconpicker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}

.v-iconpicker__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t1) var(--ease);
  font-family: var(--font);
  text-align: center;
  min-height: 86px;
}

.v-iconpicker__option:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.v-iconpicker__option i {
  font-size: 22px !important;
  color: var(--text-1);
  line-height: 1;
}

.v-iconpicker__option span {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.2;
  word-break: break-word;
}

.v-iconpicker__option--none i {
  color: var(--text-4) !important;
}

/* ============================================================
   INFINITE SCROLL — sentinel + status indicator
   ============================================================ */
.v-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.v-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 10px;
  padding: 14px 22px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-3);
  font-weight: 500;
}
.v-loadmore[hidden] { display: none !important; }

.v-loadmore .material-icons {
  font-size: 18px !important;
  color: var(--text-3);
}

.v-loadmore__label {
  letter-spacing: -0.01em;
}

.v-loadmore__count {
  font-size: 12.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

@keyframes vaultSpin { to { transform: rotate(360deg); } }
.material-icons.spin,
i.spin { animation: vaultSpin 1s linear infinite; display: inline-block; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.v-admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(0, 102, 255, 0.20);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
  flex-basis: 100%;
}

.v-admin-eyebrow i { font-size: 14px !important; }

/* Sección "Administración" en sidebar */
.v-sidebar__section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 14px 14px 4px;
  margin-top: 4px;
}

.v-nav-item--admin.is-active {
  background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 100%) !important;
}

/* ----- TABLA ADMIN ----- */
.v-admin-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v-admin-table__head {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.1fr 1.2fr 1.1fr 1.4fr;
  gap: 16px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.v-admin-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.1fr 1.2fr 1.1fr 1.4fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t1) var(--ease);
}

.v-admin-row:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.v-admin-row__user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.v-admin-row__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  background: var(--surface-soft);
  object-fit: cover;
}

.v-admin-row__id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

.v-admin-row__name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-admin-row__email {
  font-size: 12.5px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-admin-row__items {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.v-admin-row__items span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.v-admin-row__items i {
  font-size: 16px !important;
  color: var(--text-3);
}

.v-admin-row__ip,
.v-admin-row__date {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}

.v-admin-row__actions {
  display: flex;
  justify-content: flex-end;
}

.v-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface-soft);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.v-tag--ok    { background: rgba(48, 209, 88, 0.12); color: var(--success); border-color: rgba(48, 209, 88, 0.25); }
.v-tag--off   { background: rgba(255, 59, 48, 0.10); color: var(--danger); border-color: rgba(255, 59, 48, 0.20); }
.v-tag--warn  { background: rgba(255, 159, 10, 0.12); color: var(--warning); border-color: rgba(255, 159, 10, 0.25); }
.v-tag--admin { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; border-color: transparent; }

.v-btn--sm { height: 36px !important; padding: 0 14px !important; font-size: 13px !important; }

/* Responsive */
@media (max-width: 1100px) {
  .v-admin-table__head { display: none; }
  .v-admin-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .v-admin-row__items { flex-wrap: wrap; }
  .v-admin-row__ip, .v-admin-row__date { font-size: 12px; }
  .v-admin-row__actions { justify-content: flex-start; }
}

/* ----- ADMIN SETTINGS ----- */
.v-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 1100px) {
  .v-admin-grid { grid-template-columns: 1fr 1fr; }
  .v-admin-grid > section:nth-child(1) { grid-column: 1 / 2; }
  .v-admin-grid > section:nth-child(2) { grid-column: 2 / 3; }
  .v-admin-grid > section:nth-child(3) { grid-column: 1 / -1; }
}

.v-admin-section { padding: 22px 22px 18px; }
.v-admin-section__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.v-admin-section__head h2 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.v-admin-section__head p {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
}

.v-admin-form { display: flex; flex-direction: column; gap: 4px; }
.v-admin-form[hidden] { display: none !important; }

/* Form 2 columnas */
.v-form-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin-bottom: 8px;
}
.v-form-grid--2 .input-field { margin: 14px 0 !important; }
@media (max-width: 700px) {
  .v-form-grid--2 { grid-template-columns: 1fr; }
}

/* Sección que ocupa toda la fila del v-admin-grid */
.v-admin-section--full { grid-column: 1 / -1; }

/* Logos */
.v-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.v-logo-card__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   COLOR PICKER FUTURISTA — preset cards + hex inputs + shuffle
   ============================================================ */
.v-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.v-palette-card {
  position: relative;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: all 0.22s var(--ease-spring);
  display: flex;
  flex-direction: column;
}

.v-palette-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.v-palette-card.is-active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 12px 28px var(--accent-glow);
}

.v-palette-card__gradient {
  height: 78px;
  position: relative;
  display: block;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}

.v-palette-card__gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}

.v-palette-card__check {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.25s var(--ease-spring);
  z-index: 2;
}

.v-palette-card__check i {
  color: var(--accent);
  font-size: 22px !important;
}

.v-palette-card.is-active .v-palette-card__check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.v-palette-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
}

.v-palette-card__name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.v-palette-card__hex {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
}

/* ===== Builder simple ===== */
.v-palette-custom {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
}

.v-palette-custom__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.v-palette-custom label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.v-color-trigger {
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all var(--t1) var(--ease);
  overflow: hidden;
}

.v-color-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.20), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}

.v-color-trigger:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}

.v-palette-preview {
  height: 60px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
  transition: background 0.3s var(--ease);
}

/* ============================================================
   POPOVER CUSTOM DE COLOR — sustituye al modal nativo del navegador
   ============================================================ */
.v-cp {
  position: fixed;
  z-index: 10000;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface-2);
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: cpIn 0.18s var(--ease-spring);
}

.v-cp[hidden] { display: none !important; }

@keyframes cpIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* SL area: cuadrado donde X=saturación, Y=value (de claro arriba a oscuro abajo) */
.v-cp__sl {
  position: relative;
  width: 100%;
  height: 200px;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.v-cp__sl-sat {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.v-cp__sl-val {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, transparent);
}

.v-cp__sl-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: border-color 0.12s var(--ease);
}

.v-cp__sl-cursor.is-on-light { border-color: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.3); }

/* Hue slider */
.v-cp__hue {
  position: relative;
  margin: 14px 16px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(to right,
    hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%),
    hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%),
    hsl(360, 100%, 50%));
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.20);
}

.v-cp__hue-cursor {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.40);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Resultado: swatch + hex + cerrar */
.v-cp__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
}

.v-cp__swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #0066ff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.20);
}

.v-cp__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
}

.v-cp__hex {
  flex: 1;
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 10px !important;
  font-family: var(--mono) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1) !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  transition: all var(--t1) var(--ease);
}

.v-cp__hex:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.v-cp__hex::placeholder { color: var(--text-4); }

.v-cp__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  transition: all var(--t1) var(--ease);
  flex-shrink: 0;
}

.v-cp__close:hover { background: var(--accent); color: #fff; }
.v-cp__close i { font-size: 18px !important; color: inherit !important; }

.v-logo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-soft);
}

.v-logo-card__preview {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
}

.v-logo-card__preview--dark  { background: #060912; }
.v-logo-card__preview--light { background: #f0f4fb; }

.v-logo-card__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.v-logo-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
}

.v-logo-card__preview--light .v-logo-card__placeholder { color: rgba(10, 14, 26, 0.45); }

.v-logo-card__placeholder i { font-size: 28px !important; color: inherit !important; }

.v-logo-card__foot {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--surface);
}

.v-logo-card__foot strong {
  font-size: 13px;
  color: var(--text-1);
}

/* Stats */
.v-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}

.v-admin-stats > div {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.v-admin-stats dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.v-admin-stats dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}

/* ============================================================
   ACTIVITY LOG (admin + security)
   ============================================================ */
.v-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v-activity-row {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t1) var(--ease);
}

.v-activity-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.v-activity-row .v-card__icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.v-activity-row .v-card__icon i { font-size: 18px !important; }

.v-activity-row__main { flex: 1; min-width: 0; }

.v-activity-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.v-activity-row__action {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.v-activity-row__time {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.v-activity-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-2);
}

.v-activity-row__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.v-activity-row__meta i.material-icons {
  font-size: 14px !important;
  color: var(--text-3);
}

.v-activity-row__meta a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
}
.v-activity-row__meta a:hover { color: var(--accent); }

.v-activity-row__ua {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0 0;
}

.v-pagination__info {
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Select de filtro (estilo botón) */
.v-filter-select {
  height: 44px;
  padding: 0 36px 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all var(--t1) var(--ease);
}

.v-filter-select:hover { background-color: var(--surface-2); border-color: var(--border-strong); }
.v-filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Compatibilidad Materialize que ya no usamos pero por si acaso */
.row { margin: 0; }
.col { padding: 0 !important; }
/* Materialize aplica nav { background:#ee6e73; } por defecto — lo neutralizamos
   pero permitimos que .v-sidebar__nav, .v-tabs, .v-pagination y .home-* sobrescriban arriba */
nav:not(.v-sidebar__nav):not(.v-tabs):not(.v-pagination):not(.home-nav__links) { display: none; }

/* ============================================================
   ADMIN SETTINGS — sistema de pestañas + componentes nuevos
   ============================================================ */
.v-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  margin: 0 0 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.v-tabs::-webkit-scrollbar { display: none; }
.v-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.v-tabs__btn i.material-icons { font-size: 17px; opacity: 0.7; transition: opacity var(--t1) var(--ease); }
.v-tabs__btn:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.v-tabs__btn:hover i.material-icons { opacity: 1; }
.v-tabs__btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.v-tabs__btn.is-active i.material-icons { opacity: 1; color: #fff; }

.v-tab-panel { display: none; animation: vTabFade .25s ease both; }
.v-tab-panel.is-active { display: block; }
@keyframes vTabFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards de selección de método (radio cards) */
.v-method-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}
.v-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--t1) var(--ease);
}
.v-method-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.v-method-card.is-active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-glow), transparent 70%), var(--surface);
  box-shadow: 0 6px 22px var(--accent-glow);
}
.v-method-card input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Materialize aplica reglas agresivas a [type="radio"]+span (no al label):
     - padding-left: 35px → desplaza el icono
     - height: 25px / line-height: 25px → rompe el tamaño 40x40
     - ::before y ::after → dibuja los círculos del radio button
   Resetamos TODO eso para que el span vuelva a ser el contenedor 40x40 limpio. */
.v-method-card [type="radio"] + span,
.v-method-card [type="radio"]:checked + span,
.v-method-card [type="radio"]:not(:checked) + span {
  padding-left: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font-size: inherit !important;
  display: inline-flex !important;
  position: relative !important;
}
.v-method-card [type="radio"] + span::before,
.v-method-card [type="radio"] + span::after,
.v-method-card [type="radio"]:checked + span::before,
.v-method-card [type="radio"]:checked + span::after,
.v-method-card [type="radio"]:not(:checked) + span::before,
.v-method-card [type="radio"]:not(:checked) + span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}
.v-method-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent);
}
.v-method-card.is-active .v-method-card__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
}
.v-method-card__name {
  font-size: 15px; font-weight: 700; color: var(--text-1);
  letter-spacing: -0.01em;
}
.v-method-card__name code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
}
.v-method-card__desc { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* Sub-headings dentro de tabs */
.v-section-h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 22px 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}

/* Select que sigue el mismo design system que los inputs */
/* Select — alineado VISUALMENTE con los <input> de .input-field:
   mismo bg (var(--field-bg)), mismo border, mismo radius (--r-md),
   mismo padding vertical, misma fuente. La única diferencia visible es
   el padding-right extra para alojar el caret SVG. */
.v-select {
  width: 100%;
  padding: 14px 38px 14px 16px;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239aa1b1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  height: auto;
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  box-shadow: none;
  transition: all var(--t1) var(--ease);
  display: block;
  box-sizing: border-box;
}
.v-select:hover {
  background-color: var(--field-bg-hover);
  border-color: var(--border-strong);
}
.v-select:focus {
  background-color: var(--field-bg-hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* En tema claro el caret SVG en gris claro queda casi invisible.
   Lo cambiamos a un gris más oscuro para mantener contraste. */
[data-theme="light"] .v-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555f73' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
/* Las <option> heredan del browser; las pintamos coherente con el tema
   para que el menú desplegable no destelle en blanco sobre dark. */
.v-select option {
  background: var(--surface-2);
  color: var(--text-1);
}

/* Mini-tabs para plantillas — segmented control con pill activa */
.v-template-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  margin: 0 0 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-1);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.v-template-tabs::-webkit-scrollbar { display: none; }
.v-template-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.v-template-tabs__btn i.material-icons {
  font-size: 17px;
  opacity: 0.7;
  transition: opacity var(--t1) var(--ease);
}
.v-template-tabs__btn:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.v-template-tabs__btn:hover i.material-icons { opacity: 1; }
.v-template-tabs__btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.v-template-tabs__btn.is-active i.material-icons { opacity: 1; color: #fff; }

/* Editor de templates: textarea estilo "code" */
.v-template-editor {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  color: var(--text-1) !important;
  resize: vertical;
  outline: none !important;
  box-sizing: border-box;
  height: auto !important;
  min-height: 280px;
  box-shadow: none !important;
  margin: 6px 0 0 !important;
}
.v-template-editor:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.input-field code, .v-card code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--accent);
  border: 1px solid var(--border);
}

/* Campos SMTP condicionales */
.v-smtp-fields { animation: vTabFade .2s ease both; }

/* FAQ admin */
.v-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.v-faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 14px;
  transition: border-color var(--t1) var(--ease);
}
.v-faq-item:hover { border-color: var(--border-strong); }
.v-faq-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.v-faq-item__handle {
  color: var(--text-3);
  cursor: grab;
  font-size: 20px;
  user-select: none;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 6px;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.v-faq-item__handle:hover { color: var(--accent); background: var(--surface-hover); }
.v-faq-item__handle:active { cursor: grabbing; }

/* Estados del drag de SortableJS */
.v-faq-item--ghost {
  opacity: 0.4;
  background: var(--surface-hover) !important;
  border-style: dashed !important;
  border-color: var(--accent) !important;
}
.v-faq-item--chosen { box-shadow: 0 0 0 2px var(--accent); }
.v-faq-item--drag {
  box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 0 0 1px var(--accent);
  transform: scale(1.01);
}
.v-faq-item__q {
  flex: 1;
  height: 40px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  color: var(--text-1) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.v-faq-item__q:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.v-faq-item__a {
  width: 100%;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: var(--text-1) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical;
  height: auto !important;
  min-height: 80px;
  box-sizing: border-box;
  margin: 0 !important;
}
.v-faq-item__a:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Form grid base (sin modificador) */
.v-form-grid { display: flex; flex-direction: column; gap: 4px; }

/* Responsive: tabs y method-cards en móvil */
@media (max-width: 720px) {
  .v-tabs { padding: 4px; gap: 3px; }
  .v-tabs__btn { padding: 8px 10px; font-size: 12.5px; }
  .v-tabs__btn i.material-icons { font-size: 16px; }
  .v-method-cards { grid-template-columns: 1fr; }
  .v-template-tabs { width: 100%; }
  .v-template-tabs__btn { padding: 9px 12px; font-size: 12.5px; }
  .v-template-tabs__btn i.material-icons { font-size: 15px; }
}

/* ============================================================
   HOME PAGE — landing pública futurista
   ============================================================ */
.v-btn--lg { height: 52px !important; padding: 0 26px !important; font-size: 15px !important; }

.home-body {
  /* la home no usa app-shell, así que no tiene sidebar offset */
  padding: 0 !important;
}

/* Suaviza la mesh global cuando estamos en la home: blur masivo + opacidad
   menor evitan que se vean bandas duras donde se cruzan los gradientes */
body.home-body::before {
  filter: blur(120px);
  opacity: 0.7;
}
[data-theme="light"] body.home-body::before { opacity: 0.45; }

.home-container {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* ----- NAV ----- */
.home-nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: min(1180px, 92vw);
  margin: 12px auto 0;
  padding: 10px 14px 10px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-1);
}
.home-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-1);
}
.home-nav__brand img { height: 30px; width: auto; }
.home-nav__brand .v-brand__wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-nav__links {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.home-nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all var(--t1) var(--ease);
}
.home-nav__links a i { font-size: 13px; opacity: 0.8; transition: opacity var(--t1) var(--ease); }
.home-nav__links a:hover {
  color: var(--text-1);
  background: var(--surface-hover);
}
.home-nav__links a:hover i { opacity: 1; color: var(--accent); }

.home-nav__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;
}
.home-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t1) var(--ease);
}
.home-icon-btn:hover { background: var(--surface-hover); transform: rotate(15deg); }
.home-icon-btn i { font-size: 20px; }

.home-nav__burger { display: none; }

@media (max-width: 860px) {
  .home-nav { grid-template-columns: 1fr auto; padding: 8px 12px 8px 18px; }
  .home-nav__links { display: none; }
  .home-nav__cta { display: none !important; } /* gana al display: inline-flex !important de .v-btn */
  .home-nav__burger { display: inline-flex; }
}

/* ----- MOBILE DRAWER ----- */
.home-mobile {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(360px, 92vw);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 14px;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  box-shadow: var(--shadow-3);
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.home-mobile.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.home-mobile a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: var(--text-1);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: background var(--t1) var(--ease);
}
.home-mobile a:hover { background: var(--surface-hover); }
.home-mobile a i { font-size: 16px; color: var(--accent); width: 20px; text-align: center; }
.home-mobile hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.home-mobile__cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff !important;
  box-shadow: 0 6px 22px var(--accent-glow);
}
.home-mobile__cta i { color: #fff !important; }
.home-mobile__cta:hover { transform: translateY(-1px); }

/* Botón "Instalar app" del drawer móvil — estilo ghost, hereda layout de los <a> */
.home-mobile__install {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-1);
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t1) var(--ease), transform var(--t1) var(--ease);
  width: 100%;
  text-align: left;
}
.home-mobile__install i { font-size: 16px; color: var(--accent); width: 20px; text-align: center; }
.home-mobile__install:hover { background: var(--surface-hover); transform: translateY(-1px); }

/* ----- EYEBROW + GRADIENT TEXT ----- */
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.01em;
}
.home-eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.6);
  animation: homeDotPulse 2.4s var(--ease) infinite;
}
@keyframes homeDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

.home-grad {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

/* ----- HERO ----- */
.home-hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}
.home-hero__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.home-hero__orb {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(160px);
  opacity: 0.45;
  animation: homeOrbFloat 18s var(--ease) infinite alternate;
}
.home-hero__orb--1 { background: var(--accent);   top: -260px; left: -180px; }
.home-hero__orb--2 { background: var(--accent-3); top:  60px;  right: -240px; animation-delay: -6s; animation-duration: 22s; }
.home-hero__orb--3 { background: #00c8ff;         bottom: -260px; left: 25%; animation-delay: -12s; animation-duration: 26s; opacity: 0.22; }
[data-theme="light"] .home-hero__orb   { opacity: 0.22; }
[data-theme="light"] .home-hero__orb--3 { opacity: 0.14; }
@keyframes homeOrbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.08); }
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 60px;
}
.home-hero__title {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 18px 0 18px;
  color: var(--text-1);
}
.home-hero__sub {
  font-size: 17px;
  color: var(--text-2);
  max-width: 540px;
  line-height: 1.55;
  margin: 0 0 28px;
}

.home-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.home-trust {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.home-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 13px;
}
.home-trust i { font-size: 16px; color: var(--success); }

/* ----- HERO MOCKUP ----- */
.home-mockup {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 0;
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transform-origin: center;
  animation: homeMockupFloat 6s var(--ease) infinite alternate;
}
@keyframes homeMockupFloat {
  0%   { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  100% { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(-12px); }
}
.home-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.home-mockup__chrome > span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.4;
}
.home-mockup__chrome > span:nth-child(1) { background: #ff5f57; opacity: 0.85; }
.home-mockup__chrome > span:nth-child(2) { background: #febc2e; opacity: 0.85; }
.home-mockup__chrome > span:nth-child(3) { background: #28c840; opacity: 0.85; }
.home-mockup__chrome code {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--mono);
}
.home-mockup__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-mockup__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.home-mockup__row:hover { transform: translateX(4px); border-color: var(--border-strong); }
.home-mockup__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.home-mockup__row strong { display: block; font-size: 14px; color: var(--text-1); }
.home-mockup__row code {
  font-size: 12.5px; color: var(--text-3);
  letter-spacing: 0.05em; font-family: var(--mono);
}
.home-mockup__action { color: var(--text-3); font-size: 18px; }
.home-mockup__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.home-mockup__lock i { font-size: 14px; color: var(--success); }

@media (max-width: 920px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .home-mockup { transform: none; animation: none; max-width: 460px; margin: 0 auto; }
  /* Centrar todo el contenido del hero en móvil */
  .home-hero__content { text-align: center; }
  .home-hero__sub { margin-left: auto; margin-right: auto; }
  .home-cta-row { justify-content: center; }
  .home-trust { justify-content: center; }
  .home-eyebrow { margin-left: auto; margin-right: auto; }
}

/* ----- SECTIONS ----- */
.home-section {
  padding: 80px 0;
  position: relative;
}
.home-section--alt {
  background: linear-gradient(180deg, transparent, var(--surface-soft), transparent);
}
.home-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.home-section__head h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 12px;
  color: var(--text-1);
}
.home-section__head p {
  font-size: 16px;
  color: var(--text-3);
  max-width: 580px;
  margin: 0 auto;
}

/* ----- FEATURES GRID ----- */
.home-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.home-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.home-feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.home-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c0), var(--accent-3));
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px var(--accent-glow);
}
.home-feature__icon[data-color="2"] { background: linear-gradient(135deg, var(--c2), #ff9f0a); box-shadow: 0 8px 22px rgba(255, 45, 85, 0.35); }
.home-feature__icon[data-color="3"] { background: linear-gradient(135deg, var(--c3), var(--c2)); box-shadow: 0 8px 22px rgba(255, 159, 10, 0.35); }
.home-feature__icon[data-color="4"] { background: linear-gradient(135deg, var(--c4), var(--c5)); box-shadow: 0 8px 22px rgba(48, 209, 88, 0.35); }
.home-feature__icon[data-color="5"] { background: linear-gradient(135deg, var(--c5), var(--c0)); box-shadow: 0 8px 22px rgba(0, 200, 255, 0.35); }
.home-feature__icon[data-color="6"] { background: linear-gradient(135deg, var(--c6), var(--c1)); box-shadow: 0 8px 22px rgba(255, 59, 159, 0.35); }
.home-feature h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--text-1);
}
.home-feature p { font-size: 14px; color: var(--text-3); line-height: 1.55; }

@media (max-width: 920px) { .home-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .home-features { grid-template-columns: 1fr; } }

/* ----- SECURITY DEEP DIVE ----- */
.home-security {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.home-security h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 24px;
  color: var(--text-1);
}
.home-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-stack > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
}
.home-stack i {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.home-stack strong { display: block; font-size: 15px; color: var(--text-1); margin-bottom: 4px; }
.home-stack p { font-size: 14px; color: var(--text-3); margin: 0; }

.home-flow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px;
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  box-shadow: var(--shadow-2);
}
.home-flow__step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.home-flow__step--accent {
  background: linear-gradient(135deg, var(--accent-glow), transparent);
  border-color: var(--accent);
}
.home-flow__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.home-flow__step strong { font-size: 14px; color: var(--text-1); }
.home-flow__step code { font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.home-flow__arrow {
  display: block;
  text-align: center;
  margin: 6px auto;
  color: var(--text-3);
}

@media (max-width: 920px) {
  .home-security { grid-template-columns: 1fr; gap: 40px; }
}

/* ----- CATEGORIES ----- */
.home-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  transition: transform var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.home-cat:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.home-cat > i {
  font-size: 32px;
  width: 64px; height: 64px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c0), var(--accent-3));
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px var(--accent-glow);
}
.home-cat[data-color="3"] > i { background: linear-gradient(135deg, var(--c3), var(--c2)); box-shadow: 0 8px 22px rgba(255, 159, 10, 0.35); }
.home-cat[data-color="4"] > i { background: linear-gradient(135deg, var(--c4), var(--c5)); box-shadow: 0 8px 22px rgba(48, 209, 88, 0.35); }
.home-cat[data-color="6"] > i { background: linear-gradient(135deg, var(--c6), var(--c1)); box-shadow: 0 8px 22px rgba(255, 59, 159, 0.35); }
.home-cat h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--text-1); }
.home-cat p { font-size: 13.5px; color: var(--text-3); }

@media (max-width: 920px) { .home-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-cats { grid-template-columns: 1fr; } }

/* ----- FAQ (con animación de expansión vía grid-template-rows) ----- */
.home-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 22px;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  overflow: hidden;
}
.home-faq__item:hover { border-color: var(--border-strong); }
.home-faq__item.is-open {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 8px 28px var(--accent-glow);
}
.home-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.015em;
  user-select: none;
  text-align: left;
  outline: none;
}
.home-faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}
.home-faq__q i {
  transition: transform 0.4s var(--ease), color var(--t2) var(--ease);
  color: var(--text-3);
  flex-shrink: 0;
}
.home-faq__item.is-open .home-faq__q i { transform: rotate(180deg); color: var(--accent); }

.home-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.home-faq__a-inner {
  overflow: hidden;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.65;
}
.home-faq__a-inner b, .home-faq__a-inner strong { color: var(--text-1); }
.home-faq__a-inner a { color: var(--accent); }
.home-faq__item.is-open .home-faq__a { grid-template-rows: 1fr; }
.home-faq__item.is-open .home-faq__a-inner { padding: 0 0 22px; }
/* Fallback para navegadores sin soporte de grid-template-rows interpolation */
@supports not (grid-template-rows: 1fr) {
  .home-faq__a { display: block; max-height: 0; overflow: hidden; transition: max-height 0.42s var(--ease); }
  .home-faq__item.is-open .home-faq__a { max-height: 800px; }
}

/* ----- FINAL CTA ----- */
.home-final__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 60px 40px;
  text-align: center;
  overflow: hidden;
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
}
.home-final__glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 50% 100%, var(--accent-glow), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.home-final__card > * { position: relative; z-index: 1; }
.home-final__card h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--text-1), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-final__card p {
  color: var(--text-2);
  font-size: 16px;
  margin: 0 0 26px;
}
.home-final__card .home-cta-row { justify-content: center; }

/* ----- FOOTER ----- */
.home-footer {
  padding: 50px 0 30px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.home-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}
.home-footer__brand p {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-3);
}
.home-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.home-footer__links a {
  color: var(--text-2);
  font-size: 14px;
  transition: color var(--t1) var(--ease);
}
.home-footer__links a:hover { color: var(--accent); }
.home-footer__bottom {
  width: min(1180px, 92vw);
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-4);
}

@media (max-width: 720px) {
  .home-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .home-footer__links { justify-content: center; }
}

/* ----- FAB tema (oculto en desktop, visible en móvil donde nav no muestra toggle… aún así está) ----- */
.home-fab-theme {
  display: none;
}

/* ----- Reveal on scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FIX MATERIALIZE: button:focus { background-color: #2ab7a9 }
   Materialize pinta los <button> en color teal al hacer focus,
   lo que choca con nuestro tema. Lo anulamos globalmente para
   que cada botón conserve su background propio.
   ============================================================ */
button:focus,
button:focus-visible {
  background-color: inherit;
  outline: none;
}
.v-btn:focus,
.v-btn:focus-visible,
.v-folder-chip:focus,
.v-folder-chip:focus-visible,
.v-icon-btn:focus,
.v-icon-btn:focus-visible,
.v-tabs__btn:focus,
.v-tabs__btn:focus-visible,
.v-template-tabs__btn:focus,
.v-template-tabs__btn:focus-visible,
.home-icon-btn:focus,
.home-icon-btn:focus-visible {
  background-color: var(--surface-hover) !important;
}
/* Botones primarios: el background gradient permanece en focus */
.v-btn--primary:focus,
.v-btn--primary:focus-visible,
.v-folder-chip.is-active:focus,
.v-folder-chip.is-active:focus-visible,
.v-tabs__btn.is-active:focus,
.v-template-tabs__btn.is-active:focus {
  background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
}
.v-btn--danger:focus { background: rgba(255, 59, 48, 0.10) !important; }

/* ============================================================
   FOLDERS — chips horizontales + modal gestión + palette picker
   ============================================================ */
.v-folders-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 22px;
  padding: 4px 0 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.v-folders-bar::-webkit-scrollbar { height: 6px; }
.v-folders-bar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.v-folders-bar:empty { display: none; }

.v-folder-chip {
  --folder-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t1) var(--ease);
}
.v-folder-chip i { font-size: 13px; color: var(--folder-color); opacity: 0.85; }
.v-folder-chip:hover {
  background: var(--surface-hover);
  color: var(--text-1);
  border-color: var(--border-strong);
}
.v-folder-chip:hover i { opacity: 1; }
.v-folder-chip.is-active {
  background: var(--folder-gradient, linear-gradient(135deg, var(--folder-color), var(--accent-3)));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.v-folder-chip.is-active i { color: #fff; opacity: 1; }
.v-folder-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.v-folder-chip.is-active .v-folder-chip__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.v-folder-chip--ghost {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
}
.v-folder-chip--ghost i { color: var(--text-3); }
.v-folder-chip--ghost:hover { color: var(--accent); border-color: var(--accent); }
.v-folder-chip--ghost:hover i { color: var(--accent); }

@media (max-width: 600px) {
  .v-folders-bar { margin: -4px -16px 18px; padding: 4px 16px 12px; }
  .v-folder-chip { font-size: 12.5px; padding: 7px 12px; }
}

/* ===== Modal: editor de carpeta (Swal2) — icon picker + color picker ===== */
.v-fp-form {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  margin-top: 8px;
}
.v-fp-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3);
  margin: 18px 0 6px;
}
.v-fp-input {
  height: 44px;
  padding: 0 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.v-fp-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Buscador del icon picker — lupa a la DERECHA */
.v-fp-search-wrap {
  position: relative;
  margin-bottom: 4px;
}
.v-fp-search-wrap > i {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-3);
  pointer-events: none;
}
.v-fp-search-wrap input {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
}
.v-fp-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Lista de iconos scrollable */
.v-fp-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  background: var(--surface-soft);
}
.v-fp-list::-webkit-scrollbar { width: 6px; }
.v-fp-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.v-fp-cat-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3);
  margin: 8px 0 6px; padding: 0 4px;
}
.v-fp-cat-label:first-child { margin-top: 2px; }
.v-fp-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.v-fp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t1) var(--ease);
  padding: 0;
}
.v-fp-icon i { font-size: 14px; }
.v-fp-icon:hover { background: var(--surface-hover); color: var(--text-1); }
.v-fp-icon.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* Paleta de colores: 8 presets + custom picker = 9 botones, 9 cols. */
.v-fp-palette {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.v-fp-color {
  position: relative;
  height: 38px;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v-fp-color:hover { transform: scale(1.08); }
.v-fp-color.is-active {
  border-color: var(--text-1);
  box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 4px var(--accent);
  transform: scale(1.05);
}
/* Botón custom: por defecto gradiente arcoíris (indica "personalizado").
   Cuando el user elige un color (.has-color), pierde el arcoíris y muestra
   ese color sólido con un overlay del icono semi-transparente. */
.v-fp-color--custom {
  background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.v-fp-color--custom i { font-size: 18px; }
.v-fp-color--custom.has-color { text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.v-fp-color--custom.has-color i { opacity: 0.85; }

/* ===== Modal: gestionar carpetas ===== */
.v-folder-list {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.v-folder-row {
  display: grid;
  grid-template-columns: 24px 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.v-folder-row:hover { border-color: var(--border-strong); }

/* Handle de arrastre */
.v-folder-row__handle {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
  cursor: grab;
  user-select: none;
  transition: color var(--t1) var(--ease);
  /* Bloquea el scroll vertical del navegador cuando arrastras desde aquí
     (necesario en móvil para que touchmove no haga scroll de la página). */
  touch-action: none;
  -webkit-user-select: none;
  /* Hit-area más amplia en móvil para agarrar fácil con el dedo */
  min-width: 28px;
  min-height: 36px;
}
.v-folder-row__handle:active { cursor: grabbing; }
.v-folder-row__handle:hover { color: var(--text-1); }
.v-folder-row__handle i { font-size: 18px; }

/* Estados de drag & drop */
.v-folder-row.is-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}
.v-folder-row.is-drop-above {
  box-shadow: 0 -3px 0 var(--accent) inset, 0 0 0 1px var(--accent);
}
.v-folder-row.is-drop-below {
  box-shadow: 0 3px 0 var(--accent) inset, 0 0 0 1px var(--accent);
}
.v-folder-row__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
}
.v-folder-row__main { min-width: 0; }
.v-folder-row__main strong { display: block; font-size: 14px; color: var(--text-1); }
.v-folder-row__count { font-size: 12px; color: var(--text-3); }
.v-folder-row__actions { display: flex; gap: 4px; }

/* ============================================================
   MONITOR DE FILTRACIONES — /security
   ============================================================ */
.v-vault-health { }

.v-health-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.v-health-meta {
  font-size: 13px;
  color: var(--text-3);
}

/* En móvil: botones centrados, ancho completo y meta debajo, también centrado */
@media (max-width: 600px) {
  .v-health-summary {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .v-health-summary > .v-btn,
  .v-health-summary > .v-health-fix {
    width: 100%;
    justify-content: center;
  }
  .v-health-meta { text-align: center; width: 100%; }
}

.v-health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 14px;
}
.v-health-grid[hidden] { display: none !important; }

.v-health-stat {
  position: relative;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--t1) var(--ease);
  overflow: visible;
}
.v-health-stat__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.35;
}
.v-health-stat__icon i { font-size: 24px; }
.v-health-stat__num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.v-health-stat__label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Colores cuando hay hallazgos (num > 0) */
.v-health-stat[data-kind="compromised"] .v-health-stat__icon i { color: var(--danger); }
.v-health-stat[data-kind="reused"]      .v-health-stat__icon i { color: var(--warning); }
.v-health-stat[data-kind="weak"]        .v-health-stat__icon i { color: var(--accent); }

/* ============================================================
   TOOLTIP FUTURISTA — botón ? con popover glassmorphism
   ============================================================ */
.v-help {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  z-index: 5;
}
.v-help__btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  transition: all var(--t1) var(--ease);
}
.v-help__btn i { font-size: 14px; }
.v-help__btn:hover,
.v-help__btn:focus-visible {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: 0 0 14px var(--accent-glow);
}

.v-help__pop {
  position: absolute;
  top: calc(100% + 12px);
  left: -6px;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px 14px;
  /* Fondo TOTALMENTE opaco. !important para que ninguna regla lo pise.
     `isolation: isolate` rompe el stacking context heredado del backdrop-filter
     del .v-card padre, evitando que la transparencia del padre afecte aquí. */
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 1px var(--accent-glow),
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 0 40px var(--accent-glow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
  transition:
    opacity 0.18s var(--ease),
    transform 0.22s var(--ease);
  z-index: 100;
  /* Reset de herencias del label (uppercase, letter-spacing, color tenue) */
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-2);
  font-weight: 400;
  text-align: left;
}
[data-theme="dark"] .v-help__pop {
  background: #11162a !important;
  background-color: #11162a !important;
  box-shadow:
    0 0 0 1px var(--accent-glow),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px var(--accent-glow);
}
/* Cuando el popover está porteado al body (.is-mounted), siempre visible */
.v-help__pop.is-mounted {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Decoración: línea gradient luminosa en el top */
.v-help__pop-deco {
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-3), transparent);
  border-radius: 2px;
  filter: blur(0.5px);
}

.v-help__pop h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.v-help__pop h4 i {
  font-size: 18px;
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v-help__pop p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 8px;
}
.v-help__pop p:last-child { margin-bottom: 0; }
.v-help__pop strong { color: var(--text-1); font-weight: 600; }
.v-help__pop em { color: var(--accent); font-style: normal; font-weight: 600; }
.v-help__pop code {
  background: var(--surface-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--border);
}
.v-help__pop ul {
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.v-help__pop ul li { margin-bottom: 2px; }

/* Bloque "tech" — fondo más oscuro, monospace para los detalles técnicos */
.v-help__tech {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px !important;
  font-size: 11.5px !important;
  color: var(--text-3) !important;
  margin: 10px 0 8px !important;
}

/* Bloque "cta" — call-to-action en accent */
.v-help__cta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 80%);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  color: var(--text-1) !important;
  margin-top: 10px !important;
}
.v-help__cta i {
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Card específica del kind: el icono del tooltip h4 hereda el color */
.v-health-stat[data-kind="compromised"] .v-help__pop h4 i {
  background: linear-gradient(135deg, var(--danger), #ff6b6b);
  -webkit-background-clip: text; background-clip: text;
}
.v-health-stat[data-kind="reused"] .v-help__pop h4 i {
  background: linear-gradient(135deg, var(--warning), #ffb84d);
  -webkit-background-clip: text; background-clip: text;
}

/* Responsive: en móvil el popover puede salirse a la derecha → centramos */
@media (max-width: 600px) {
  .v-help__pop { left: -6px; right: auto; width: min(340px, calc(100vw - 48px)); }
}

/* Lista de items afectados */
.v-health-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.v-health-row {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.v-health-row:hover { border-color: var(--border-strong); background: var(--surface); }
.v-health-row__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--t1) var(--ease);
}
.v-health-row__title i { font-size: 18px; color: var(--text-3); }
.v-health-row__title:hover { color: var(--accent); }
.v-health-row__title:hover i { color: var(--accent); }

.v-health-row__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.v-health-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.v-health-tag i { font-size: 14px; }
.v-health-tag--danger {
  background: rgba(255, 59, 48, 0.10);
  color: var(--danger);
  border: 1px solid rgba(255, 59, 48, 0.20);
}
.v-health-tag--warn {
  background: rgba(255, 159, 10, 0.10);
  color: var(--warning);
  border: 1px solid rgba(255, 159, 10, 0.22);
}
.v-health-tag--info {
  background: rgba(0, 102, 255, 0.08);
  color: var(--accent);
  border: 1px solid rgba(0, 102, 255, 0.20);
}

/* Estado limpio: sin hallazgos */
.v-health-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  color: var(--success);
  background: rgba(48, 209, 88, 0.08);
  border: 1px solid rgba(48, 209, 88, 0.22);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.v-health-empty i { font-size: 22px; }

@media (max-width: 600px) {
  .v-health-grid { grid-template-columns: 1fr; }
  .v-health-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   HISTORIAL DE ESCANEOS
   ============================================================ */
.v-health-history__empty {
  text-align: center;
  color: var(--text-3);
  padding: 24px;
  font-size: 14px;
}
.v-health-history__head,
.v-health-history__row {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.8fr 0.9fr 0.7fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
}
.v-health-history__head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.v-health-history__row {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
  transition: border-color var(--t1) var(--ease);
}
.v-health-history__row:hover { border-color: var(--border-strong); }
.v-health-history__row strong { color: var(--text-1); font-weight: 600; }
.v-health-history__rel { color: var(--text-3); font-size: 12px; }
.v-health-history__dur { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.v-health-history__latest { color: var(--success); font-size: 9px; vertical-align: middle; }

.v-health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.v-health-pill--zero   { background: var(--surface-soft); color: var(--text-3); border-color: var(--border); }
.v-health-pill--danger { background: rgba(255, 59, 48, 0.12); color: var(--danger); border-color: rgba(255, 59, 48, 0.22); }
.v-health-pill--warn   { background: rgba(255, 159, 10, 0.12); color: var(--warning); border-color: rgba(255, 159, 10, 0.22); }
.v-health-pill--info   { background: rgba(0, 102, 255, 0.10); color: var(--accent); border-color: rgba(0, 102, 255, 0.20); }

@media (max-width: 720px) {
  .v-health-history__head { display: none; }
  .v-health-history__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
  }
  .v-health-history__row > span:nth-child(n+2)::before {
    content: attr(data-label);
    font-size: 11px;
    color: var(--text-3);
    margin-right: 8px;
  }
}

/* ============================================================
   FOCUS HIGHLIGHT en /accounts (cuando vienes desde /security)
   ============================================================ */
.v-card.is-flash {
  animation: vCardFlash 1.6s var(--ease);
}
.v-card.is-focused-card {
  box-shadow: 0 0 0 2px var(--accent), 0 8px 22px var(--accent-glow);
}
@keyframes vCardFlash {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 28px var(--accent-glow); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}

/* Banner del focus mode (visible cuando llegas con ?focus=ID al /accounts) */
.v-focus-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 80%), var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text-1);
}
.v-focus-banner > i.material-icons {
  color: var(--accent);
  font-size: 20px;
}
.v-focus-banner > span { flex: 1; min-width: 200px; }
.v-focus-banner strong { color: var(--text-1); font-weight: 700; }

/* Modo focus: vista limpia, solo banner + cards afectadas.
   - Oculta CTA "Nueva cuenta", buscador, sentinel y badge de total.
   - Mantiene auto-fill para que escale a 1/2/3/4+ columnas según ancho. */
body.is-focus-mode .v-grid > .v-card { animation: focusIn 0.4s var(--ease) both; }
body.is-focus-mode .v-pageheader__actions,
body.is-focus-mode .v-pageheader__search,
body.is-focus-mode #load-status,
body.is-focus-mode #load-sentinel,
body.is-focus-mode #no-results-message,
body.is-focus-mode .v-pageheader .v-badge {
  display: none !important;
}
@keyframes focusIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== /security · TAB PIN y Seguridad: lista de Sesiones iniciadas ===== */
.v-sessions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.v-session {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.v-session:hover { border-color: var(--border-strong); }
.v-session.is-current {
  background: linear-gradient(135deg, var(--accent-glow), transparent 70%), var(--surface);
  border-color: var(--accent);
}
.v-session__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.v-session.is-current .v-session__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
}
.v-session__icon i { font-size: 26px; }
.v-session__main { min-width: 0; }
.v-session__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.v-session__head strong {
  font-size: 14.5px;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.v-session__time { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.v-session__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12.5px;
  color: var(--text-3);
}
.v-session__meta span { display: inline-flex; align-items: center; gap: 4px; }
.v-session__meta i { font-size: 14px; }
.v-session__current-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--success);
  padding: 6px 12px;
  background: rgba(48, 209, 88, 0.10);
  border: 1px solid rgba(48, 209, 88, 0.22);
  border-radius: var(--r-pill);
}

@media (max-width: 600px) {
  .v-session { grid-template-columns: 44px 1fr; }
  .v-session__icon { width: 44px; height: 44px; }
  .v-session__icon i { font-size: 22px; }
  .v-session__actions { grid-column: 1 / -1; justify-self: end; }
}

/* ===== /security · TAB Estado de tu cuenta ===== */
.v-account-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px 6px;
}
.v-account-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  object-fit: cover;
}
.v-account-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.v-account-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.v-account-card__email {
  font-size: 13.5px;
  color: var(--text-3);
  word-break: break-word;
}
.v-account-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.v-account-card__tags .v-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.v-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.v-stat {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  transition: border-color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.v-stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.v-stat--accent {
  background: linear-gradient(135deg, var(--accent-glow), transparent 70%), var(--surface);
  border-color: var(--accent);
}
.v-stat__num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.v-stat__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.v-stat__label i { font-size: 14px; }

@media (max-width: 920px) {
  .v-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .v-stat--accent { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .v-account-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .v-account-card__avatar { width: 60px; height: 60px; }
}

/* Botón "Cambiar las N afectadas" en /security */
.v-health-fix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v-health-fix[hidden] { display: none !important; }
.v-health-fix .v-health-fix__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ADMIN USERS — empty state del buscador
   ============================================================ */
.v-admin-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
  font-size: 14.5px;
}

/* ============================================================
   MODAL CÓMO FUNCIONA — pasos numerados + tech blurb
   ============================================================ */
.v-howto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0 8px;
  text-align: left;
}
.v-howto__step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.v-howto__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.v-howto__step strong { display: block; font-size: 14.5px; color: var(--text-1); margin-bottom: 4px; }
.v-howto__step p { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
.v-howto__step em { font-style: normal; color: var(--accent); font-weight: 600; }

.v-howto-tech {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.55;
  text-align: left;
}
.v-howto-tech strong { color: var(--text-2); }

.v-howto-foot {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 14px 0 0;
  text-align: center;
}

/* ============================================================
   /settings · TAB Mantenimiento — toggle row + spacing
   ============================================================ */
.v-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 6px 0 18px;
}
.v-toggle-row .v-toggle { flex-shrink: 0; margin-top: 2px; }
.v-toggle-row strong { display: block; font-size: 14.5px; color: var(--text-1); margin-bottom: 4px; }
.v-toggle-row p { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 0; }
.v-toggle-row code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; font-family: var(--mono); color: var(--accent); }

/* ============================================================
   PÁGINA DE MANTENIMIENTO — full-screen elegante
   ============================================================ */
.maintenance-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--bg-base) !important;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.maintenance-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.maintenance-orb {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.4;
  animation: maintOrb 20s var(--ease) infinite alternate;
}
.maintenance-orb--1 { background: var(--accent);   top: -180px; left: -120px; }
.maintenance-orb--2 { background: var(--accent-3); bottom: -180px; right: -120px; animation-delay: -8s; }
[data-theme="light"] .maintenance-orb { opacity: 0.22; }
@keyframes maintOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.1); }
}

.maintenance {
  position: relative;
  z-index: 1;
  max-width: 540px;
  width: 100%;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 40px 32px 32px;
  backdrop-filter: var(--blur-3);
  -webkit-backdrop-filter: var(--blur-3);
  box-shadow: var(--shadow-3);
}
.maintenance__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.maintenance__brand img { height: 32px; width: auto; }
.maintenance__brand .v-brand__wordmark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.maintenance__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,102,255,0.18), rgba(110,11,255,0.10));
  border: 1px solid rgba(0,102,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px var(--accent-glow);
  animation: maintIcon 3s var(--ease) infinite;
}
.maintenance__icon i { font-size: 44px; color: var(--accent); }
@keyframes maintIcon {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-8deg); }
  40%      { transform: rotate(8deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(4deg); }
}
.maintenance__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--text-1);
}
.maintenance__message {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 22px;
}
.maintenance__eta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0 0 22px;
}
.maintenance__eta i { font-size: 16px; color: var(--accent); }
.maintenance__eta strong { color: var(--text-1); font-weight: 700; }
.maintenance__foot {
  margin: 28px 0 0;
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.maintenance__dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.6);
  animation: maintDot 2s var(--ease) infinite;
}
@keyframes maintDot {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

/* ============================================================
   AUTENTICADOR · TOTP/HOTP — DISEÑO FUTURISTA
   ============================================================
   - Cards holográficas con halo radial + borde animado en gradiente
   - Código grande monoespaciado, click para copiar
   - SVG ring countdown (TOTP) con dasharray decreciente
   - Estado is-warning (rojo cuando quedan <5s)
   - Estado is-tick (flip + glow al rotar)
   - Estado is-copied (flash verde tras copiar)
   - Modal de añadir con tabs Scan/Manual y scanner QR
   ============================================================ */
.v-totp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

@media (max-width: 600px) {
  .v-totp-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ===== Card ===== */
.v-totp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0,102,255,0.10), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(110,11,255,0.10), transparent 55%),
    var(--surface);
  backdrop-filter: var(--blur-2);
  -webkit-backdrop-filter: var(--blur-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t2) var(--ease),
              box-shadow var(--t2) var(--ease),
              border-color var(--t2) var(--ease);
  animation: cardIn 0.45s var(--ease) backwards;
}

/* Borde de gradiente (capa pseudo) */
.v-totp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(0,102,255,0.55),
    rgba(110,11,255,0.35) 45%,
    transparent 80%);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--t2) var(--ease);
  z-index: 0;
}

/* Halo de fondo sutil */
.v-totp-card::after {
  content: "";
  position: absolute;
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--t2) var(--ease);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

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

.v-totp-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.v-totp-card:hover::before { opacity: 1; }
.v-totp-card:hover::after  { opacity: 0.18; }

/* ===== Cabecera ===== */
.v-totp-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v-totp-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,102,255,0.18), rgba(110,11,255,0.18));
  color: var(--accent);
  font-size: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.v-totp-card__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
.v-totp-card__icon i,
.v-totp-card__icon .fa,
.v-totp-card__icon [class^="fa-"],
.v-totp-card__icon [class*=" fa-"] {
  color: inherit !important;
  font-size: 19px !important;
}

.v-totp-card__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v-totp-card__title strong {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v-totp-card__title span {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-totp-card__badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,159,10,0.16);
  color: var(--warning);
  border: 1px solid rgba(255,159,10,0.30);
  flex-shrink: 0;
}

.v-totp-card__menu {
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--t2) var(--ease),
              transform var(--t2) var(--ease);
}
.v-totp-card:hover .v-totp-card__menu,
.v-totp-card:focus-within .v-totp-card__menu {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 600px) {
  .v-totp-card__menu { opacity: 1; transform: none; }
}

/* ===== Botón principal con código ===== */
.v-totp-card__codebtn {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t1) var(--ease),
              background var(--t1) var(--ease),
              transform var(--t1) var(--ease);
  text-align: left;
}
.v-totp-card__codebtn:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg,
    rgba(0,102,255,0.08),
    rgba(110,11,255,0.04));
}
.v-totp-card__codebtn:active { transform: scale(0.99); }


/* Copiado: flash verde */
.v-totp-card.is-copied .v-totp-card__codebtn {
  border-color: var(--success);
  background: linear-gradient(180deg,
    rgba(48, 209, 88, 0.18),
    rgba(48, 209, 88, 0.05));
  animation: totpCopiedFlash 0.55s var(--ease);
}
/*.v-totp-card__codebtn::after {
  content: "content_copy";
  font-family: 'Material Icons';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  color: var(--text-3);
  font-size: 16px;
  opacity: 0;
  transition: opacity var(--t1) var(--ease),
              transform var(--t1) var(--ease);
  pointer-events: none;
}
.v-totp-card:hover .v-totp-card__codebtn::after {
  opacity: 0.55;
  transform: translateY(-50%) scale(1);
}
.v-totp-card.is-copied .v-totp-card__codebtn::after {
  content: "check";
  color: var(--success);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}*/

.v-totp-card .v-totp-card__ring,
.v-totp-card .v-totp-card__hotp-next { position: relative; z-index: 1; }

.v-totp-card__code {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-1);
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(77, 139, 255, 0.18);
  flex: 1;
  min-width: 0;
  user-select: all;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--t1) var(--ease);
}

/* SVG progress ring
   La rotación -90° (para que el progreso arranque en las 12) se aplica como
   atributo SVG-nativo sobre el <g> que envuelve los círculos en el markup
   generado por totp.js. NO se rota el <svg> ni el <text> con CSS porque
   transform-box: fill-box sobre <text> no funciona en muchos móviles
   (Safari iOS antiguo, webviews in-app) y el número se iba fuera del viewBox.*/
.v-totp-card__ring {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0, 102, 255, 0.35));
}
.v-totp-card__ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 2.5;
}
.v-totp-card__ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100.531; /* 2 * π * 16 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.95s linear,
              stroke var(--t1) var(--ease);
}
.v-totp-card__ring-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-2);
  /* sin transform: el <g> rota los círculos, el <text> se queda derecho */
}

/* ===== Estados ===== */
/* Aviso: <5 segundos */
.v-totp-card.is-warning .v-totp-card__code {
  background: linear-gradient(135deg, #ff7a85, #ff3b30 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(255, 59, 48, 0.35);
  animation: totpPulseCode 1s var(--ease) infinite;
}
.v-totp-card.is-warning .v-totp-card__ring-fg {
  stroke: var(--danger);
  filter: drop-shadow(0 0 6px var(--danger-glow));
}
.v-totp-card.is-warning .v-totp-card__ring {
  filter: drop-shadow(0 0 8px var(--danger-glow));
}

@keyframes totpPulseCode {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Tick: el código acaba de rotar */
.v-totp-card.is-tick .v-totp-card__code {
  animation: totpFlip 0.55s var(--ease);
}
@keyframes totpFlip {
  0%   { transform: rotateX(0deg);   filter: blur(0); }
  40%  { transform: rotateX(-90deg); filter: blur(2px); opacity: 0.4; }
  60%  { transform: rotateX(90deg);  filter: blur(2px); opacity: 0.4; }
  100% { transform: rotateX(0deg);   filter: blur(0); }
}


@keyframes totpCopiedFlash {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  100% { box-shadow: 0 0 0 18px rgba(48, 209, 88, 0); }
}

/* HOTP next button */
.v-totp-card__hotp-next {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t1) var(--ease),
              color var(--t1) var(--ease),
              transform var(--t1) var(--ease),
              border-color var(--t1) var(--ease);
  flex-shrink: 0;
}
.v-totp-card__hotp-next:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(60deg);
}
.v-totp-card__hotp-next i.material-icons { font-size: 18px; }

/* Light theme tweaks */
[data-theme="light"] .v-totp-card__codebtn {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.55));
}
[data-theme="light"] .v-totp-card__ring-bg {
  stroke: rgba(10,14,26,0.10);
}
[data-theme="light"] .v-totp-card::before { opacity: 0.35; }

/* ============================================================
   MODAL · AÑADIR ENTRADA — Tabs + Scanner + Manual
   ============================================================ */
.v-totp-method {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 10px 0 18px;
}
.v-totp-method__btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t1) var(--ease),
              color var(--t1) var(--ease),
              box-shadow var(--t1) var(--ease);
}
.v-totp-method__btn i.material-icons { font-size: 18px; }
.v-totp-method__btn:hover { color: var(--text-1); background: var(--surface-hover); }
.v-totp-method__btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.v-totp-panel { display: none; }
.v-totp-panel.is-active { display: block; animation: totpPanelIn 0.3s var(--ease); }
@keyframes totpPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scanner ===== */
.v-totp-scan {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
#totp-scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v-totp-scan__frame {
  position: absolute;
  inset: 14%;
  border-radius: 16px;
  pointer-events: none;
  /* Esquinas con gradiente animado */
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 28px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 28px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 28px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 28px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 28px no-repeat;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.v-totp-scan__frame::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: totpScanLine 2.4s ease-in-out infinite;
}
@keyframes totpScanLine {
  0%   { top: 0;     opacity: 0.2; }
  50%  { top: 100%;  opacity: 1;   }
  100% { top: 0;     opacity: 0.2; }
}
.v-totp-scan__status {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: rgba(5, 8, 17, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.v-totp-scan__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.v-totp-scan__hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.v-totp-scan__hint i.material-icons {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Opciones avanzadas */
.v-totp-advanced {
  margin-top: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  background: var(--surface-soft);
  transition: border-color var(--t1) var(--ease);
}
.v-totp-advanced[open] { border-color: var(--border-strong); }
.v-totp-advanced summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  user-select: none;
}
.v-totp-advanced summary::-webkit-details-marker { display: none; }
.v-totp-advanced summary::before {
  content: "tune";
  font-family: 'Material Icons';
  font-size: 16px;
  color: var(--accent);
}

/* Form grid 2 columnas */
.v-form-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .v-form-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   GENERADOR DE CONTRASEÑAS · MODAL #pwgen
   ============================================================
   - Preview grande monoespaciado con halo según fuerza.
   - Sliders, checks y "chips" de separador con estilo coherente
     con el resto de modales (icon-picker / folder-editor).
   - Reaprovecha .v-pwmeter para la barra de fuerza.
   ============================================================ */
.v-pwgen-modal .modal-content { max-width: 560px; }

/* === Preview === */
.v-pwgen-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 14px 14px;
  background: linear-gradient(135deg,
    rgba(0,102,255,0.10),
    rgba(110,11,255,0.06));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.v-pwgen-preview::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: blur(24px);
}
.v-pwgen-preview > * { position: relative; z-index: 1; }

.v-pwgen-preview__value {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-1);
  cursor: text;
  user-select: all;
  word-break: break-all;
  line-height: 1.4;
  outline: none;
  min-height: 1.4em;
}
[data-theme="dark"] .v-pwgen-preview__value {
  text-shadow: 0 0 16px rgba(77, 139, 255, 0.18);
}

.v-pwgen-preview__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Medidor + entropía */
.v-pwgen-meter {
  margin: 4px 4px 14px !important;
}
.v-pwgen-entropy {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  min-width: 60px;
  text-align: right;
  letter-spacing: -0.01em;
}

/* === Tabs === */
.v-pwgen-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.v-pwgen-tab {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t1) var(--ease),
              color var(--t1) var(--ease),
              box-shadow var(--t1) var(--ease);
}
.v-pwgen-tab i.material-icons { font-size: 17px; }
.v-pwgen-tab:hover { color: var(--text-1); background: var(--surface-hover); }
.v-pwgen-tab.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}

/* === Paneles === */
.v-pwgen-panel { display: none; }
.v-pwgen-panel.is-active {
  display: block;
  animation: totpPanelIn 0.25s var(--ease);
}

/* === Filas de control (slider con etiqueta + valor) === */
.v-pwgen-row {
  margin: 10px 0 14px;
}
.v-pwgen-row__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.v-pwgen-row__val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  padding: 2px 10px;
  background: rgba(0,102,255,0.10);
  border-radius: var(--r-pill);
  min-width: 34px;
  text-align: center;
}

/* === Range slider con accent gradient === */
.v-pwgen-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--surface-soft);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.v-pwgen-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
.v-pwgen-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
.v-pwgen-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
  margin-top: -6px;
  cursor: pointer;
  transition: transform var(--t1) var(--ease);
}
.v-pwgen-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
  cursor: pointer;
}
.v-pwgen-range:active::-webkit-slider-thumb { transform: scale(1.15); }

/* === Grid de checkboxes (2 cols) === */
.v-pwgen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 10px;
}
@media (max-width: 600px) {
  .v-pwgen-grid { grid-template-columns: 1fr; }
}

.v-pwgen-check {
  position: relative;        /* contiene el input absolutamente posicionado */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t1) var(--ease),
              background var(--t1) var(--ease),
              box-shadow var(--t1) var(--ease);
  user-select: none;
  min-height: 56px;
}
.v-pwgen-check:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
/* Estado "marcado" — borde + halo sutiles en accent para feedback visual */
.v-pwgen-check:has(input:checked) {
  border-color: rgba(0, 102, 255, 0.45);
  background: rgba(0, 102, 255, 0.06);
}
/* Foco accesible (teclado) */
.v-pwgen-check:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* El input real queda invisible pero clicable vía el <label> padre */
.v-pwgen-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

/* Caja: 20×20 con flexbox interno para centrar el check perfectamente */
.v-pwgen-check__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t1) var(--ease),
              border-color var(--t1) var(--ease),
              transform var(--t1) var(--ease-spring);
}
/* El check es un SVG inline (no rotación de bordes, no posicionamiento
   manual). Centrado automáticamente por el flex del padre. */
.v-pwgen-check__box::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #fff;
  /* Path de check (Material) en blanco — mask en lugar de background-image
     para que el color venga del background-color y se pueda animar */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></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='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
  transform: scale(0);
  opacity: 0;
  transition: transform var(--t1) var(--ease-spring),
              opacity var(--t1) var(--ease);
}
.v-pwgen-check input:checked ~ .v-pwgen-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.v-pwgen-check input:checked ~ .v-pwgen-check__box::after {
  transform: scale(1);
  opacity: 1;
}
/* Mini "bounce" al hacer click */
.v-pwgen-check:active .v-pwgen-check__box { transform: scale(0.92); }

/* Texto: dos líneas. El <strong> en mono ocupa solo lo necesario y queda
   por encima del label en gris. Sin overflow ni overlap. */
.v-pwgen-check__text {
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;             /* permite truncamiento en flex sin desbordar */
}
.v-pwgen-check__text strong {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.v-pwgen-check__text small {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.v-pwgen-check--row { display: flex; flex-direction: row; }

/* === Botones de separador (passphrase) === */
.v-pwgen-sep-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.v-pwgen-sep {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t1) var(--ease);
}
.v-pwgen-sep:hover {
  border-color: var(--accent);
  color: var(--text-1);
}
.v-pwgen-sep.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px var(--accent-glow);
}