/* El tema de la app. Viene de la cuenta de RukianLab con el estilo de la referencia elegida
   (títulos condensados rectos, botones rectangulares) y una paleta de tres colores con la
   regla 60-30-10: blanco para la página (60), azul marino Oxford para el menú y las ventanas
   de vidrio (30) y rojo solo para la marca y las acciones principales (10). El progreso y los
   datos van en azul (el rojo, en una cifra, se lee como peligro); verde para lo logrado y
   naranja suave para avisar. Todo color sale de estas variables: ninguna página fija los suyos.
   Lo toman todas las páginas (<body class="v">, <html data-theme="light">, sin botón para
   cambiarlo). Va después de cuenta.css: redefine sus colores y le da la letra y las formas. */

/* --- la paleta -------------------------------------------------------------- */
body.v {
  /* Azul marino (Oxford) y sus pasos */
  --marino: #14213d; --marino-rgb: 20, 33, 61; --marino-hondo: #0e182e; --marino-2: #1c2c4f; --marino-3: #26395f; --marino-4: #33486f;
  /* Rojo de la marca: botones, sección activa y acentos */
  --v-marca: #e63946; --v-marca-rgb: 230, 57, 70; --v-marca-hover: #ef5a66; --v-marca-3: #c92e3b;
  --v-sobre-marca: #ffffff;
  /* Los estados (siempre con texto o ícono, nunca solo el color) */
  --azul-dato: #4a93dc; --azul-dato-rgb: 74, 147, 220;
  --verde: #2fbf8f; --verde-rgb: 47, 191, 143;
  --aviso: #f2a65a; --aviso-rgb: 242, 166, 90;
  --disp: 'Barlow Condensed', 'Geist', sans-serif;
  --num: 'Unbounded', 'Geist', sans-serif;
  --radius-lg: 8px;
  /* Los colores de producto que trae la base de RukianLab, llevados a esta paleta: */
  --obra: var(--v-marca); --obra-rgb: var(--v-marca-rgb);           /* peligro */
  --crm: var(--aviso); --crm-rgb: var(--aviso-rgb);                  /* aviso */
  --gps: var(--azul-dato); --gps-rgb: var(--azul-dato-rgb);          /* información */
  --rfid: var(--azul-dato); --rfid-rgb: var(--azul-dato-rgb);
  --geo: var(--azul-dato); --geo-rgb: var(--azul-dato-rgb);
  --nube: var(--azul-dato); --nube-rgb: var(--azul-dato-rgb);
  --edu: var(--verde); --edu-rgb: var(--verde-rgb);
}

/* Sobre el azul marino: el menú y todas las ventanas de vidrio (y toda la página si algún
   día vuelve el tema oscuro). La lista de ventanas es la misma del vidrio en app.css. */
body.v, :root[data-theme="light"] body.v :is(.side, .tabbar, .card, .kpi, .herr, .hoy, .motiva, .abierta, .viendo, .ej, .dia, .ses, .comenzar, .interrumpida, .pausada, .barra-sesion, .descanso, .caja, .demo, .empty, .sum, .menu, .dlg, .codigo, .privado, .ejc, .edia, .barra-editor) {
  --v-acento: #ff7680;          /* el rojo como texto o línea sobre el azul (más claro, para que se lea) */
  --v-lado: var(--marino);      /* el menú lateral */
  --v-tab: rgba(var(--marino-rgb), .6);
  --v-velo: var(--marino-rgb);
  --bg: var(--marino-hondo); --bg-2: var(--marino-hondo); --surface: var(--marino-2); --surface-2: var(--marino-3); --surface-3: var(--marino-4);
  --text: #f4f6fb; --text-2: #b7c1d6; --text-3: #8c98b2;
  --tint: 244, 246, 251; --veil: var(--marino-rgb); --shadow: 6, 10, 22; --shadow-k: 1;
  --line: rgba(244, 246, 251, .09); --line-2: rgba(244, 246, 251, .15); --line-3: rgba(244, 246, 251, .26);
  --brand: var(--v-marca); --brand-rgb: var(--v-marca-rgb); --brand-ink: var(--v-acento);
  --btn-bg: var(--v-marca); --btn-fg: var(--v-sobre-marca); --btn-hover: var(--v-marca-hover);
  --accent: var(--v-marca); --accent-rgb: var(--v-marca-rgb); --accent-ink: var(--v-acento);
  --menu-bg: var(--marino-2); --nav-bg: var(--marino-hondo);
  /* Los mismos estados, en el tono que se lee sobre el azul */
  --obra-ink: #ff7680; --crm-ink: var(--aviso); --gps-ink: #8ec5ef; --rfid-ink: #8ec5ef; --geo-ink: #8ec5ef; --nube-ink: #8ec5ef; --edu-ink: var(--verde);
  --aviso-texto: var(--aviso); --bien-texto: var(--verde); --info-texto: #8ec5ef;
  --serie-1: var(--azul-dato); --serie-1-rgb: var(--azul-dato-rgb); --serie-2: #d95926;
  color: var(--text);
  color-scheme: dark;
}
body.v { background: var(--marino); }

/* La página: blanca. Lo que va directo sobre ella (títulos, filtros) usa estos colores: el
   texto en el mismo azul marino, y los estados en un tono más hondo para que se lean. */
:root[data-theme="light"] body.v {
  --v-acento: var(--v-marca-3);
  --v-tab: rgba(255, 255, 255, .7);
  --v-velo: 255, 255, 255;
  --bg: #ffffff; --bg-2: #f4f6fa; --surface: #f4f6fa; --surface-2: #eceff5; --surface-3: #e1e6ee;
  --text: var(--marino); --text-2: #4a5672; --text-3: #6e7a93;
  --tint: var(--marino-rgb); --veil: 255, 255, 255; --shadow: var(--marino-rgb); --shadow-k: .3;
  --line: rgba(var(--marino-rgb), .1); --line-2: rgba(var(--marino-rgb), .16); --line-3: rgba(var(--marino-rgb), .28);
  --menu-bg: #ffffff;
  --obra-ink: var(--v-marca-3); --crm-ink: #a85a16; --gps-ink: #2f6fb0; --rfid-ink: #2f6fb0; --geo-ink: #2f6fb0; --nube-ink: #2f6fb0; --edu-ink: #12805f;
  --aviso-texto: #a85a16; --bien-texto: #12805f; --info-texto: #2f6fb0;
  --serie-1: #2f75c2; --serie-1-rgb: 47, 117, 194; --serie-2: #eb6834;
  --vidrio: blur(18px) saturate(150%);
  background: #ffffff;
  color-scheme: light;
}

/* Cada producto de RukianLab llevaba su color; aquí todos van en el de la marca */
.v :is(.is-gps, .is-rfid, .is-nube, .is-geo, .is-crm, .is-edu, .is-obra) {
  --accent: var(--v-marca); --accent-rgb: var(--v-marca-rgb); --accent-ink: var(--v-acento);
}

/* --- armazón ---------------------------------------------------------------- */
.v .bell b { background: var(--v-marca); color: var(--v-sobre-marca); box-shadow: 0 0 0 2px var(--v-lado); }
/* Fondo sólido, sin desenfoque: el desenfoque encerraba el panel de avisos dentro del menú */
.v .side { background: var(--v-lado); }
.v .side__nav a:hover { background: rgba(var(--v-marca-rgb), .12); color: var(--text); }
.v .side__nav a[aria-current="page"] { background: var(--v-marca); color: var(--v-sobre-marca); }
.v .side__nav a[aria-current="page"] .ico { color: var(--v-sobre-marca); }
.v .main { padding-top: 28px; }
.v .main__inner { max-width: 1180px; gap: 34px; }

/* En computador la interfaz va un poco más chica (--escala): así se ven las
   separaciones que gustaron. Lo que mide la pantalla (alto del menú y de la
   página) se agranda en la misma proporción para seguir llenándola.
   En celular queda al 100%. */
@media (min-width: 1100px) {
  .v { --escala: .9; }
  .v .app { zoom: var(--escala); min-height: calc(100vh / var(--escala)); min-height: calc(100dvh / var(--escala)); }
  .v .side { height: calc(100vh / var(--escala)); height: calc(100dvh / var(--escala)); }
}

/* --- títulos ---------------------------------------------------------------- */
.v-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v-h h2 {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  font-family: var(--disp); font-weight: 900; font-size: clamp(38px, 4.4vw, 58px);
  line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
}
/* Como en la referencia: el título termina en un punto rojo. */
.v-h h2::after { content: '.'; color: var(--v-marca); margin-left: -14px; }
.v-h h2 small { font-family: var(--num); font-style: normal; font-size: 13px; font-weight: 700; color: var(--v-acento); letter-spacing: .04em; }

/* Los títulos de las demás páginas, con la misma letra */
.v .head h1, .v .done h1 {
  font-family: var(--disp); font-weight: 900; font-size: clamp(40px, 4.6vw, 60px);
  line-height: .92; letter-spacing: -.01em; text-transform: uppercase;
}
.v .head h1::after { content: '.'; color: var(--v-marca); }
/* Los que van junto a un avatar o al logo del producto: sin la barra verde */
.v :is(.who h1, .buy-head h1, .ficha h1) {
  font-family: var(--disp); font-weight: 900; font-size: clamp(34px, 3.6vw, 46px);
  line-height: .95; letter-spacing: -.005em; text-transform: uppercase;
}
.v .head .ficha h1::after { display: none; }
.v :is(.shelf__head h2, .card__head h2, .start__head h2, .empty h3, .dlg h2) {
  font-family: var(--disp); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.v .shelf__head h2 { font-weight: 900; font-size: 32px; }
.v :is(.card__head h3, .grupo__head h3, .prod__id h3, .opt__name, .dcard h3, .atajo__txt b) {
  font-family: var(--disp); font-weight: 800; font-size: 20px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
}
.v :is(.opt__price, .prod__stat b, .total__row--big b) { font-family: var(--num); font-weight: 700; letter-spacing: -.02em; }
.v .prod__stat b { font-size: 21px; }
.v .opt__price { font-size: 23px; }

/* --- pestañas y botones ----------------------------------------------------- */
.v-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.v-tab {
  height: 38px; padding: 0 18px; border: 1.5px solid var(--line-3); background: var(--v-tab); color: var(--text-2); cursor: pointer;
  font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 2px; transition: all .2s;
}
.v-tab span { display: inline-block; }
.v-tab:hover { color: var(--text); border-color: var(--v-marca); }
.v-tab[aria-pressed="true"] { background: var(--v-marca); border-color: var(--v-marca); color: var(--v-sobre-marca); }

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--v-marca); color: var(--v-sobre-marca);
  border-radius: 2px;
  transition: background .2s, transform .2s var(--ease);
}
.v-btn:hover { background: var(--v-marca-hover); transform: translateX(2px); color: var(--v-sobre-marca); }
.v-btn .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.v-btn--ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.v-btn--ghost:hover { background: rgba(var(--tint), .06); transform: translateX(2px); }
.v-btn--sm { height: 38px; padding: 0 18px; font-size: 16px; }

/* Los botones de las páginas (.btn) toman la misma forma: la figura inclinada va
   en un ::before, así el texto y los íconos quedan derechos. */
.v .btn {
  --b-fondo: transparent; --b-borde: transparent;
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase;
}
.v .btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background: var(--b-fondo); box-shadow: inset 0 0 0 1.5px var(--b-borde); transition: background .2s, box-shadow .2s;
}
.v .btn--sm { font-size: 15px; }
.v .btn:is(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--solid-danger):hover { background: none; box-shadow: none; }
.v .btn--primary { --b-fondo: var(--btn-bg); color: var(--btn-fg); }
.v .btn--primary:hover { --b-fondo: var(--btn-hover); }
.v .btn--accent { --b-fondo: var(--v-marca); color: var(--v-sobre-marca); }
.v .btn--accent:hover { --b-fondo: var(--v-marca-hover); }
.v .btn--ghost { --b-borde: var(--line-3); color: var(--text); }
.v .btn--ghost:hover { --b-borde: var(--v-acento); --b-fondo: rgba(var(--tint), .05); }
.v .btn--danger { --b-fondo: rgba(var(--obra-rgb), .12); --b-borde: rgba(var(--obra-rgb), .35); color: var(--obra-ink); }
.v .btn--danger:hover { --b-fondo: rgba(var(--obra-rgb), .2); }
.v .btn--solid-danger { --b-fondo: var(--obra); color: #fff; }

/* Filtros y opciones de a dos: como las pestañas de la vitrina */
.v .chip {
  position: relative; isolation: isolate; height: 36px; padding: 0 16px; border: 0; border-radius: 0; background: none; color: var(--text-2);
  font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.v .chip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  border: 1.5px solid var(--line-3); background: var(--v-tab); transition: background .2s, border-color .2s;
}
.v .chip:hover { color: var(--text); border-color: transparent; }
.v .chip:hover::before { border-color: var(--v-marca); }
.v .chip[aria-pressed="true"] { color: var(--v-sobre-marca); background: none; }
.v .chip[aria-pressed="true"]::before { background: var(--v-marca); border-color: var(--v-marca); }
.v .seg { border-radius: 4px; }
.v .seg button { border-radius: 2px; font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.v .seg button[aria-pressed="true"] { background: var(--v-marca); color: var(--v-sobre-marca); box-shadow: none; }
.v .seg button[aria-pressed="true"] em { color: var(--v-sobre-marca); }
.v .jump a { border-radius: 3px; font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.v .jump a.is-on { border-color: var(--v-marca); }

/* --- paneles: esquinas más secas ------------------------------------------- */
.v :is(.sum, .opt, .dcard, .atajo, .alerta, .codes, .side__help, .start li a, .note) { border-radius: 6px; }
.v :is(.menu, .dlg) { border-radius: 10px; }
.v :is(.input, .stepper) { border-radius: 4px; }
.v .search .input { border-radius: 4px; }
.v :is(.pill, .tag, .opt__badge) { border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; }
.v :is(.avatar, .sum__icon, .row__icon, .aviso__icon, .dlg__icon) { border-radius: 6px; }


/* En pantallas táctiles lo que se toca mide al menos 40 px, aunque se vea chico:
   los puntos del carrusel, los interruptores y los enlaces sueltos («¿La olvidaste?»). */
@media (pointer: coarse) {
  .v :is(.v-punto, .onoff, button.link) { position: relative; }
  .v .v-punto::after { content: ""; position: absolute; inset: -9px; }
  .v :is(.onoff, button.link)::before { content: ""; position: absolute; inset: -8px -4px; }
}