/* =========================================================================
   PORTAL DE CLIENTES — Estimate Pro Build (PROTOTIPO)
   Hereda la identidad visual del sitio principal (style.css): mismos
   colores, tipografias y sensacion "glass" oscura, mostrados aqui como
   una aplicacion SaaS con sidebar + header + contenido.
   ========================================================================= */

:root {
  --primary: #34a8e2;
  --primary-dark: #2178a3;
  --primary-glow: rgba(52, 168, 226, 0.4);
  --gradient: linear-gradient(135deg, #34a8e2 0%, #2178a3 100%);

  /* Acento "obra/construcción" -- naranja de casco/señalización, combinado
     con el azul de marca en vez de reemplazarlo. Se usa en detalles
     puntuales (algunos iconos del grid de la app, el botón flotante de
     onboarding) para dar variedad tipo "caja de herramientas", no como
     color dominante. */
  --accent: #f2711c;
  --accent-dark: #c9590f;
  --accent-glow: rgba(242, 113, 28, 0.4);
  --gradient-accent: linear-gradient(135deg, #f2871c 0%, #c9590f 100%);

  --dark: #0b0f15;
  --dark-card: #161b22;
  --dark-elevated: #1c232c;
  --dark-sunken: #060a0f;

  --text-main: #e2e8f0;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --white: #ffffff;

  --success: #3fb950;
  --success-bg: rgba(63, 185, 80, 0.12);
  --warning: #f0b429;
  --warning-bg: rgba(240, 180, 41, 0.12);
  --danger: #f85149;
  --danger-bg: rgba(248, 81, 73, 0.12);
  --info: #58a6ff;
  --info-bg: rgba(88, 166, 255, 0.12);

  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);

  --font-head: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --sidebar-w: 264px;
  --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body.portal-body { max-width: 100%; overflow-x: hidden; }

body.portal-body {
  background: var(--dark);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dark-sunken); }
::-webkit-scrollbar-thumb { background: #263140; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* =========================================================================
   LOGIN
   ========================================================================= */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  background:
    radial-gradient(circle at 15% 15%, rgba(52, 168, 226, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(52, 168, 226, 0.1) 0%, transparent 45%),
    var(--dark);
}

.login-shell {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55);
}

.login-side {
  padding: 56px 48px;
  background:
    linear-gradient(160deg, rgba(52, 168, 226, 0.18), rgba(11, 15, 21, 0.6)),
    url("../../system.jpg") center/cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 15, 0.72);
}
.login-side > * { position: relative; z-index: 2; }

.login-side .logo-mark { height: 84px; filter: brightness(0) invert(1); margin: 0 auto 40px; display: block; }
.login-side .logo-mark-link { display: block; text-align: center; }
.login-side h2 { font-family: var(--font-head); font-size: 1.9rem; line-height: 1.25; margin-bottom: 16px; color: #fff; }
.login-side p { color: #cbd5e1; font-size: 0.95rem; max-width: 380px; }
.login-side-list { list-style: none; margin-top: 32px; display: grid; gap: 14px; }
.login-side-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: #cbd5e1; }
.login-side-list i { color: var(--primary); margin-top: 3px; }

.login-form-wrap { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.login-form-wrap .form-eyebrow {
  color: var(--primary); font-weight: 800; font-size: 0.75rem; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.login-form-wrap h1 { font-family: var(--font-head); font-size: 1.7rem; margin-bottom: 6px; }
.login-form-wrap .sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 30px; }

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.field .field-input-wrap { position: relative; }
.field .field-input-wrap i.field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); font-size: 0.9rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-main); font-size: 0.95rem; outline: none; transition: 0.2s;
  font-family: var(--font-body);
}
.field .field-input-wrap input { padding-left: 40px; }
.field .field-input-wrap .toggle-visibility {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(52, 168, 226, 0.15);
}
.field textarea { resize: vertical; min-height: 110px; }

/* Menus desplegables (<select>): el navegador pinta las <option> con su
   propio tema (fondo blanco) por defecto; forzamos fondo oscuro y texto
   claro para que sean legibles sobre el diseño del portal. */
.field select { cursor: pointer; }
.field select option {
  background-color: var(--dark-elevated);
  color: var(--text-main);
  padding: 10px;
}
.field select option:checked,
.field select option:hover {
  background-color: var(--primary);
  color: #ffffff;
}
.field-hint { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }
.field-error { font-size: 0.78rem; color: var(--danger); margin-top: 6px; display: none; }

.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.remember-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.remember-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.link-ghost { color: var(--primary); font-size: 0.85rem; text-decoration: none; font-weight: 600; background: none; border: none; cursor: pointer; }
.link-ghost:hover { text-decoration: underline; }

.login-alert {
  display: none; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--danger-bg); border: 1px solid rgba(248, 81, 73, 0.3); color: #ffb4af;
  font-size: 0.85rem; margin-bottom: 18px;
}
.login-alert.show { display: flex; }

.demo-creds {
  margin-top: 28px; padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(52, 168, 226, 0.06); border: 1px dashed rgba(52, 168, 226, 0.35);
  font-size: 0.8rem; color: var(--text-muted);
}
.demo-creds strong { color: var(--text-main); }
.demo-creds .cred-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-family: monospace; }
.demo-creds .cred-row button { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.75rem; }

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-form-wrap { padding: 40px 26px; }
}

/* =========================================================================
   SHELL: SIDEBAR + HEADER + CONTENT
   ========================================================================= */
.portal-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--dark-card);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform 0.3s ease;
}
.sidebar-brand { padding: 24px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-soft); }
.sidebar-brand img { height: 34px; filter: brightness(0) invert(1); }
.sidebar-brand .brand-tag { font-size: 0.65rem; letter-spacing: 1px; color: var(--primary); font-weight: 800; text-transform: uppercase; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 18px 14px; }
.sidebar-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); font-weight: 700; margin: 18px 10px 8px; }
.sidebar-nav a.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; margin-bottom: 4px;
  transition: 0.2s;
}
.sidebar-nav a.nav-item i { width: 18px; text-align: center; font-size: 0.95rem; }
.sidebar-nav a.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-main); }
.sidebar-nav a.nav-item.active { background: var(--gradient); color: white; box-shadow: 0 6px 16px var(--primary-glow); }
.sidebar-nav a.nav-item .item-badge {
  margin-left: auto; background: rgba(255, 255, 255, 0.12); color: white; font-size: 0.68rem;
  padding: 2px 7px; border-radius: 20px; font-weight: 700;
}
/* Item de sidebar bloqueado por el plan del cliente -- sigue siendo un
   link real (la página lo bloquea al cargar), solo se atenúa un poco y
   muestra un candado a la derecha para que se note antes de entrar. */
.sidebar-nav a.nav-item.nav-item-locked { opacity: 0.62; }
.sidebar-nav a.nav-item.nav-item-locked:hover { opacity: 0.9; }
.sidebar-nav a.nav-item .nav-item-lock-icon { margin-left: auto; font-size: 0.75rem; color: var(--text-dim); width: auto; }
.sidebar-nav a.nav-item.active.nav-item-locked .nav-item-lock-icon { color: rgba(255, 255, 255, 0.8); }

.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-soft); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.sidebar-user .avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gradient); display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; color: white; flex-shrink: 0;
}
.sidebar-user .user-meta { min-width: 0; }
.sidebar-user .user-meta .u-name { font-size: 0.85rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .user-meta .u-role { font-size: 0.72rem; color: var(--text-dim); }
.sidebar-logout {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 10px;
  background: rgba(248, 81, 73, 0.08); border: 1px solid rgba(248, 81, 73, 0.2); color: #ff9d97;
  border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.sidebar-logout:hover { background: rgba(248, 81, 73, 0.16); }
.sidebar-account-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 10px;
  background: rgba(52, 168, 226, 0.08); border: 1px solid rgba(52, 168, 226, 0.2); color: var(--primary);
  border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.sidebar-account-btn:hover { background: rgba(52, 168, 226, 0.16); }

.sidebar-close-mobile { display: none; }

.main-col { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; position: relative; }

/* Fondos con imagen (igual estilo que la web principal: foto + overlay
   oscuro) para que el portal no se sienta tan plano/oscuro como una app
   generica. El overlay mantiene el contraste y la legibilidad del texto. */
.main-col.client-bg {
  background:
    linear-gradient(180deg, rgba(11,15,21,0.94) 0%, rgba(11,15,21,0.97) 100%),
    url('../../growth.jpg') center/cover fixed no-repeat;
}
.main-col.admin-bg {
  background:
    linear-gradient(180deg, rgba(11,15,21,0.94) 0%, rgba(11,15,21,0.97) 100%),
    url('../../Consultant.jpg') center/cover fixed no-repeat;
}
@media (max-width: 1080px) {
  .main-col.client-bg, .main-col.admin-bg { background-attachment: scroll; }
}

.portal-header {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--border); background: rgba(11, 15, 21, 0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 100; gap: 20px;
}
.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-main); font-size: 1.3rem; cursor: pointer; }
.header-title { min-width: 0; }
.header-title h1 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-title p { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; position: relative; transition: 0.2s; font-size: 0.95rem;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--dark-card); animation: semaforoPulse 1.6s infinite; }

/* Campana de notificaciones (panel administrativo) */
.notif-wrap { position: relative; }
.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 12px); right: 0; width: 340px; max-width: 90vw;
  background: var(--dark-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); z-index: 500; overflow: hidden;
}
.notif-wrap.open .notif-dropdown { display: block; animation: fadeInTab 0.18s ease; }
.notif-dropdown-head { padding: 14px 18px; font-weight: 800; font-size: 0.85rem; color: var(--text-main); border-bottom: 1px solid var(--border-soft); }
.notif-dropdown-list { max-height: 340px; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(52,168,226,0.05); }
.notif-item-icon {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(52,168,226,0.12); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-text { font-size: 0.82rem; color: var(--text-body); line-height: 1.45; }
.notif-item-date { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; }
.notif-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 5px; }
.notif-empty { padding: 30px 18px; text-align: center; font-size: 0.82rem; color: var(--text-dim); }
.notif-dropdown-foot {
  display: block; text-align: center; padding: 12px; font-size: 0.78rem; font-weight: 700; color: var(--primary);
  text-decoration: none; border-top: 1px solid var(--border-soft);
}
.notif-dropdown-foot:hover { background: rgba(255,255,255,0.03); }

/* Campanita que se "sacude" ante una notificación nueva de alta prioridad
   (ver shakeBell/playNotifDing en portal.js -- hoy solo "solicitud de
   página web" para Admin/claudio.deliz). Se agrega/quita por JS, nunca
   queda animando indefinidamente. */
@keyframes notifBellShake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70% { transform: rotate(-16deg); }
  20%, 40%, 60%, 80% { transform: rotate(16deg); }
  90% { transform: rotate(-6deg); }
}
#headerNotifBtn.notif-bell-shake i.fa-bell { display: inline-block; animation: notifBellShake 0.8s ease-in-out 2; transform-origin: 50% 0%; }

.header-license-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 50px;
  background: var(--success-bg); border: 1px solid rgba(63, 185, 80, 0.3); color: var(--success);
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.header-license-pill .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; }

/* Interruptor de idioma de toda la plataforma (ES / EN) */
.lang-toggle {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 50px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); flex-shrink: 0;
}
.lang-toggle button {
  border: none; background: none; color: var(--text-dim); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.3px; padding: 6px 12px; border-radius: 50px; cursor: pointer; transition: 0.2s;
}
.lang-toggle button:hover { color: var(--text-main); }
.lang-toggle button.active { background: var(--primary); color: #fff; }
.proj-details-arrow { transition: transform 0.18s ease; font-size: 0.7rem; }
.lang-toggle-floating { position: fixed; top: 20px; right: 20px; z-index: 400; display: flex; align-items: center; gap: 10px; }
.lang-toggle-floating .portal-theme-toggle { position: static !important; width: 40px; height: 40px; box-shadow: none !important; }
.lang-toggle-floating .lang-toggle { background: var(--dark-elevated); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }

/* Interruptor "Con materiales / Sin materiales" -- Calculadora, Estimación
   rápida y Estimar desde PDF (ver EPB_PRICING.buildTieredEstimate). */
.materials-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(52, 168, 226, 0.06); border: 1px solid var(--border); }
.materials-toggle button {
  border: none; background: none; color: var(--text-muted); font-size: 0.82rem; font-weight: 700;
  padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: 0.2s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.materials-toggle button:hover { color: var(--text-main); }
.materials-toggle button.active { background: linear-gradient(135deg, #34a8e2 0%, #1c6fa0 100%); color: #fff; box-shadow: 0 4px 10px rgba(28, 111, 160, 0.3); }
/* Variante para grupos con más de 2 opciones (ej. filtros de estado en
   "Enviar estimación") -- en vez de forzar todo en una sola fila más ancha
   que la pantalla, se puede deslizar horizontalmente sin romper el layout. */
.materials-toggle.scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.materials-toggle.scroll-x button { flex-shrink: 0; }

/* Botón flotante "Completa tu Onboarding" -- ver mountOnboardingReminder.
   Usa el naranja de acento (no el azul de marca) a propósito: es un
   llamado de atención puntual, se distingue mejor así del resto de la UI. */
.onboarding-reminder-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  background: var(--gradient-accent);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 0.85rem;
  padding: 15px 22px; border-radius: 999px; box-shadow: 0 12px 28px var(--accent-glow);
  animation: onboardingReminderFloat 2.6s ease-in-out infinite;
  transition: box-shadow 0.2s;
}
.onboarding-reminder-btn i { font-size: 1.05rem; }
.onboarding-reminder-btn:hover { animation-play-state: paused; box-shadow: 0 14px 32px rgba(242, 113, 28, 0.55); }
@keyframes onboardingReminderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 640px) {
  .onboarding-reminder-btn span { display: none; }
  .onboarding-reminder-btn { padding: 15px; right: 16px; bottom: 16px; }
}
/* Popup recurrente "Consigue tu página web profesional" (ver
   startWebsitePromoTimer en portal.js) -- a la IZQUIERDA a propósito: el
   lado derecho ya está ocupado por "Completa tu Onboarding" y el botón de
   guía de voz, y este es un aviso puntual, no debe tapar ni competir con
   esos. */
.website-promo-toast {
  position: fixed; left: 20px; bottom: 24px; z-index: 210; max-width: 320px;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--dark-card); border: 1px solid rgba(52,168,226,0.35);
  border-radius: var(--radius-lg); padding: 16px 34px 16px 18px; box-shadow: 0 16px 36px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.website-promo-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.website-promo-toast .website-promo-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--gradient);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.website-promo-toast .website-promo-body { flex: 1; min-width: 0; }
.website-promo-toast .website-promo-title { font-family: var(--font-head); font-weight: 800; font-size: 0.92rem; color: var(--text-main); margin-bottom: 4px; }
.website-promo-toast p { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; }
.website-promo-close {
  position: absolute; top: 8px; right: 8px; border: none; background: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.85rem; padding: 4px;
}
.website-promo-close:hover { color: var(--text-main); }
@media (max-width: 640px) {
  .website-promo-toast { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}
body.app-mode .website-promo-toast { bottom: 110px; }

[data-theme="light"] .lang-toggle-floating .lang-toggle { box-shadow: 0 10px 24px rgba(15,23,42,0.14); }
@media (max-width: 640px) {
  .lang-toggle-floating { top: 12px; right: 12px; }
}

.content-area { padding: 30px 32px 60px; flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 190; }
.sidebar-overlay.show { display: block; }
/* La barra inferior de la app (z-index 250, ver mas abajo) queda por
   encima del sidebar normal (200) -- sin esto, al abrir el menu "Mas" en
   la app, la tab bar tapaba el pie del menu (boton "Cerrar sesion") y
   parecia que no existiera. */
.sidebar.open { z-index: 260; }

@media (max-width: 1080px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-col { margin-left: 0; }
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  .header-license-pill span.pill-label { display: none; }
  .content-area { padding: 22px 16px 50px; }
  .sidebar-close-mobile { display: block; position: absolute; top: 18px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
  .autodesk-workspace { left: 0; }
  .aw-sidebar-toggle { display: none; }
}

/* =========================================================================
   BARRA INFERIOR DE ACCESOS RAPIDOS -- solo dentro de la app de Android
   (body.app-mode, montada por EPB_UI.renderShell cuando existe window.Capacitor).
   El sitio web normal nunca recibe esta clase, asi que este bloque no le
   afecta en nada.
   ========================================================================= */
body.app-mode .content-area { padding-bottom: 100px; animation: appContentIn 0.3s ease; }
/* El titulo repetido junto al boton hamburguesa (ej. "Dashboard") sobra
   dentro de la app -- cada pantalla ya se identifica por su contenido y
   por el tab activo abajo. */
body.app-mode .header-title { display: none; }
body.app-mode .onboarding-reminder-btn { bottom: 162px; }
/* Logo de Estimate Pro Build, visible siempre en el encabezado de la app
   (el sidebar con el mismo logo vive detrás del botón de hamburguesa, así
   que sin esto no se veía marca ninguna hasta abrir el menú). */
.header-app-logo { height: 52px; width: auto; }
@keyframes appContentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  display: flex; background: var(--dark-card); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
}
.app-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 2px; border: none; background: none; cursor: pointer;
  color: var(--text-dim); text-decoration: none; font-family: var(--font-body);
  border-radius: var(--radius-sm); transition: color 0.2s ease, transform 0.15s ease;
}
.app-tab i { font-size: 1.15rem; transition: transform 0.2s ease; }
.app-tab span { font-size: 0.65rem; font-weight: 700; }
.app-tab:active { transform: scale(0.9); }
.app-tab.active { color: var(--primary); }
.app-tab.active i { transform: translateY(-2px); }

/* Cuadricula de accesos tipo "app" en la primera pantalla (dashboard),
   solo dentro de la app de Android -- ver appGridHtml() en dashboard.html. */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.app-grid-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 18px 6px; border-radius: var(--radius-lg); background: var(--dark-card); border: 1px solid var(--border);
  text-decoration: none; color: var(--text-main); cursor: pointer; font-family: var(--font-body);
  transition: transform 0.15s ease; opacity: 0; animation: appGridTileIn 0.4s ease forwards;
}
.app-grid-tile:active { transform: scale(0.93); }
.app-grid-tile:hover { transform: translateY(-3px); border-color: rgba(52,168,226,0.4); }
@keyframes appGridTileIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Resalta la tarjeta "Solicita tu página web" para que motive a tocarla en
   vez de perderse entre el resto de accesos rápidos. */
@keyframes agtHighlightRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,168,226,0.35); } 50% { box-shadow: 0 0 0 6px rgba(52,168,226,0); } }
.agt-tile-highlight { border-color: rgba(52,168,226,0.45); animation: appGridTileIn 0.4s ease forwards, agtHighlightRing 2.6s ease-in-out 0.6s infinite; }
.agt-icon {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff; background: var(--gradient); transition: background 0.2s ease;
}
.agt-icon.agt-icon-accent { background: var(--gradient-accent); }
.agt-label { font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.2; }

/* Banner "Portal de clientes / Bienvenido" con degradado azul, solo dentro
   de la app (ver heroBlockHtml en dashboard.html) -- los accesos rápidos
   (app-grid) se sobreponen a su borde inferior como tarjetas flotantes en
   vez de quedar en una lista plana debajo, para que la app se sienta más
   nativa/profesional. El sitio web normal nunca usa esta clase, así que no
   le afecta en nada. */
.app-hero-header {
  background: linear-gradient(135deg, #1c6fa0 0%, #2178a3 48%, #34a8e2 100%);
  border-radius: var(--radius-lg);
  padding: 26px 22px 50px;
  margin-bottom: -34px;
  box-shadow: 0 16px 36px rgba(28,111,160,0.4);
  position: relative;
  overflow: hidden;
}
.app-hero-header::after {
  content: ""; position: absolute; top: -60px; right: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); pointer-events: none;
}
.app-hero-header .page-eyebrow { color: rgba(255,255,255,0.85); }
.app-hero-header h2 { color: #fff; }
.app-hero-tiles-wrap { position: relative; z-index: 2; margin-bottom: 22px; }
.app-hero-tiles-wrap .app-grid { margin-bottom: 0; }

/* Tarjeta compacta "estado de activacion" (solo app) -- reemplaza el
   banner + 4 tarjetas + lista larga por algo chico y tocable; el detalle
   completo vive en el modal #activationDetailModal. */
.app-status-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: var(--radius-lg); background: var(--gradient);
  border: none; cursor: pointer; margin-bottom: 20px; position: relative; overflow: hidden;
  font-family: var(--font-body); transition: transform 0.15s ease;
  box-shadow: 0 10px 26px var(--primary-glow);
}
.app-status-card:active { transform: scale(0.98); }
/* Franja de brillo en loop, mismo truco que la pantalla de arranque --
   le da vida a la tarjeta sin depender de una imagen o video. */
.app-status-card::after {
  content: ""; position: absolute; top: -60%; left: -40%; width: 35%; height: 220%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(10deg); animation: appStatusShine 3.2s ease-in-out infinite;
}
@keyframes appStatusShine { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.app-status-card > i { color: rgba(255,255,255,0.85); font-size: 0.9rem; position: relative; z-index: 1; }
.asc-ring {
  position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,0.28) 0);
  display: flex; align-items: center; justify-content: center;
}
.asc-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--primary-dark); }
.asc-ring span { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 800; color: #fff; }
.asc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.asc-text strong { font-size: 0.9rem; color: #fff; }
.asc-text span { font-size: 0.76rem; color: rgba(255,255,255,0.85); }

/* =========================================================================
   FONDO AZUL DE SECCIÓN + TARJETAS FLOTANTES (solo app, body.app-mode)
   El encabezado de cada pantalla deja de ser una tarjeta y pasa a ser un
   fondo azul de extremo a extremo (mismo degradado de siempre), y el primer
   bloque de la pantalla sube y queda levemente superpuesto sobre él. Solo
   cambia distribución/espaciado -- colores, tarjetas e iconos son los
   mismos. El sitio web normal nunca recibe app-mode, no le afecta.
   ========================================================================= */
body.app-mode .content-area { --app-bleed-x: 16px; --app-bleed-top: 22px; }
@media (min-width: 1081px) {
  body.app-mode .content-area { --app-bleed-x: 32px; --app-bleed-top: 30px; }
}
body.app-mode .content-area > .page-header:first-child:not(.app-hero-header),
body.app-mode .content-area > div:first-child > .page-header:first-child,
body.app-mode .content-area > .assistant-hero:first-child {
  margin: calc(var(--app-bleed-top) * -1) calc(var(--app-bleed-x) * -1) 0;
  padding: 26px calc(var(--app-bleed-x) + 8px) 62px;
  background: linear-gradient(135deg, #1c6fa0 0%, #2178a3 48%, #34a8e2 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  position: relative; overflow: hidden;
}
body.app-mode .content-area > .page-header:first-child:not(.app-hero-header)::after,
body.app-mode .content-area > div:first-child > .page-header:first-child::after,
body.app-mode .content-area > .assistant-hero:first-child::after {
  content: ""; position: absolute; top: -60px; right: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); pointer-events: none;
}
body.app-mode .content-area > .page-header:first-child .page-eyebrow,
body.app-mode .content-area > div:first-child > .page-header:first-child .page-eyebrow { color: rgba(255,255,255,0.85); }
body.app-mode .content-area > .page-header:first-child h2,
body.app-mode .content-area > div:first-child > .page-header:first-child h2,
body.app-mode .content-area > .assistant-hero:first-child h2 { color: #fff; }
body.app-mode .content-area > .page-header:first-child .lead,
body.app-mode .content-area > div:first-child > .page-header:first-child .lead,
body.app-mode .content-area > .assistant-hero:first-child .lead,
body.app-mode .content-area > .page-header:first-child .lead i,
body.app-mode .content-area > div:first-child > .page-header:first-child .lead i { color: rgba(255,255,255,0.88); }
/* El ícono del asistente conserva su degradado, con un aro claro para que
   no se funda con el fondo azul. */
body.app-mode .content-area > .assistant-hero:first-child .assistant-hero-icon {
  position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 10px 22px rgba(0,0,0,0.18);
}
body.app-mode .content-area > .assistant-hero:first-child > div { position: relative; z-index: 1; }

/* El primer bloque después del fondo azul sube y flota sobre su borde. */
body.app-mode .content-area > .page-header:first-child:not(.app-hero-header) + *,
body.app-mode .content-area > div:first-child > .page-header:first-child + * {
  position: relative; z-index: 2; margin-top: -40px;
}
/* Asistente IA: en la app no se muestra la barra de voz, así que el
   contenido de la herramienta es el que queda sobre el borde azul. */
body.app-mode .content-area > .assistant-hero:first-child ~ .assistant-shell {
  position: relative; z-index: 2; margin-top: -40px;
}
/* Sombra de "tarjeta flotante" para lo que queda superpuesto. */
body.app-mode .content-area > .page-header:first-child + .card,
body.app-mode .content-area > .page-header:first-child + .grid > .card,
body.app-mode .content-area > .page-header:first-child + .grid > div > .card:first-child,
body.app-mode .content-area > .page-header:first-child + .training-progress-summary,
body.app-mode .content-area > div:first-child > .page-header:first-child + .card,
body.app-mode .content-area > div:first-child > .page-header:first-child + .grid > .card,
body.app-mode .content-area > .page-header:first-child + .grid .video-frame,
body.app-mode .content-area > .assistant-hero:first-child ~ .assistant-shell .tab-panel.active > .card:first-child,
body.app-mode .app-hero-tiles-wrap .app-grid-tile {
  box-shadow: 0 16px 34px rgba(0,0,0,0.38);
}
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .card,
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .grid > .card,
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .grid > div > .card:first-child,
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .training-progress-summary,
[data-theme="light"] body.app-mode .content-area > div:first-child > .page-header:first-child + .card,
[data-theme="light"] body.app-mode .content-area > div:first-child > .page-header:first-child + .grid > .card,
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .grid .video-frame,
[data-theme="light"] body.app-mode .content-area > .assistant-hero:first-child ~ .assistant-shell .tab-panel.active > .card:first-child,
[data-theme="light"] body.app-mode .app-hero-tiles-wrap .app-grid-tile {
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
}
/* Asistente IA: los pasos del PDF y el aviso de uso de "Estimación rápida"
   no tienen fondo propio -- sobre el azul se leerían mal, así que en la app
   flotan dentro de una tarjeta (el aviso conserva su tinte encima). */
body.app-mode .assistant-hero ~ .assistant-shell #pdfWizardRoot > .simple-steps:first-child,
body.app-mode .assistant-hero ~ .assistant-shell #panel-rapida > #statusBanner {
  background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px rgba(0,0,0,0.38);
}
[data-theme="light"] body.app-mode .assistant-hero ~ .assistant-shell #pdfWizardRoot > .simple-steps:first-child,
[data-theme="light"] body.app-mode .assistant-hero ~ .assistant-shell #panel-rapida > #statusBanner { box-shadow: 0 14px 30px rgba(15,23,42,0.12); }
body.app-mode .assistant-hero ~ .assistant-shell #pdfWizardRoot > .simple-steps:first-child { padding: 16px 8px 12px; }
body.app-mode .assistant-hero ~ .assistant-shell #panel-rapida > #statusBanner { margin-bottom: 24px; }
body.app-mode .assistant-hero ~ .assistant-shell #panel-rapida > #statusBanner > .disclaimer-box { margin-bottom: 0; }

/* Configuración: las pestañas flotan como una barra propia sobre el azul
   (mismos botones y mismo indicador activo). */
body.app-mode .content-area > .page-header:first-child + .tabs-bar {
  background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 4px 6px; box-shadow: 0 16px 34px rgba(0,0,0,0.38);
}
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .tabs-bar { box-shadow: 0 14px 30px rgba(15,23,42,0.12); }
body.app-mode .content-area > .page-header:first-child + .tabs-bar { scrollbar-width: none; }
body.app-mode .content-area > .page-header:first-child + .tabs-bar::-webkit-scrollbar { display: none; }
/* Avisos (disclaimer-box) con fondo translúcido que quedan sobre el azul:
   base sólida de tarjeta + el mismo tinte azul suave encima, para que el
   texto se lea (el !important vence el estilo en línea del aviso). */
body.app-mode .content-area > .page-header:first-child + .disclaimer-box {
  background: linear-gradient(rgba(52,168,226,0.06), rgba(52,168,226,0.06)), var(--dark-card) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.38);
}
[data-theme="light"] body.app-mode .content-area > .page-header:first-child + .disclaimer-box { box-shadow: 0 14px 30px rgba(15,23,42,0.12); }

/* Dashboard: el banner deja de ser una tarjeta y se vuelve el fondo de la
   sección, de borde a borde; los accesos rápidos flotan sobre su curva. */
body.app-mode .app-hero-header {
  margin: calc(var(--app-bleed-top) * -1) calc(var(--app-bleed-x) * -1) -56px;
  padding: 30px calc(var(--app-bleed-x) + 8px) 84px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: none;
}
body.app-mode .app-hero-tiles-wrap { margin-bottom: 24px; }

.mini-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.mini-stat { background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px; }
.mini-stat-value { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--text-main); }
.mini-stat-label { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

/* Boton flotante de guia de voz (solo app) -- mismo lado (derecha) que el
   de "Completa tu Onboarding", pero abajo del todo -- el de onboarding
   queda apilado encima, no al reves. */
.app-voice-fab {
  position: fixed; right: 24px; bottom: 92px; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gradient-accent); color: #fff; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px var(--accent-glow); transition: transform 0.15s ease;
}
.app-voice-fab:active { transform: scale(0.92); }
/* En el sitio web no hay tab bar abajo: el botón baja a la esquina y el de
   "Completa tu Onboarding" se apila encima (en la app ya está arriba). */
body.has-voice-fab:not(.app-mode) .app-voice-fab { bottom: 24px; }
body.has-voice-fab:not(.app-mode) .onboarding-reminder-btn { bottom: 92px; }
/* Mientras la guía habla, el botón "respira" con ondas. */
body.voice-speaking .app-voice-fab { animation: voiceFabPulse 1.6s ease-out infinite; }
@keyframes voiceFabPulse {
  0% { box-shadow: 0 10px 24px var(--accent-glow), 0 0 0 0 rgba(242,135,28,0.45); }
  100% { box-shadow: 0 10px 24px var(--accent-glow), 0 0 0 16px rgba(242,135,28,0); }
}
/* Botón chico "repetir instrucciones", al lado del de voz (solo con la guía prendida). */
.app-voice-repeat {
  position: fixed; right: 88px; bottom: 98px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--dark-card); color: var(--primary); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform 0.15s ease;
}
.app-voice-repeat[hidden] { display: none; }
.app-voice-repeat:active { transform: scale(0.9); }
[data-theme="light"] .app-voice-repeat { box-shadow: 0 8px 20px rgba(15,23,42,0.14); }
body.has-voice-fab:not(.app-mode) .app-voice-repeat { bottom: 30px; }

/* Burbuja del asistente de voz: subtítulo de la frase que va diciendo. */
.voice-bubble {
  position: fixed; right: 24px; bottom: 92px; z-index: 4000; width: 380px; max-width: calc(100vw - 32px);
  background: var(--dark-card); border: 1px solid rgba(52,168,226,0.35); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4); padding: 12px 14px 14px;
  opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
[data-theme="light"] .voice-bubble { box-shadow: 0 18px 40px rgba(15,23,42,0.16); }
body.voice-speaking .voice-bubble { opacity: 1; transform: none; pointer-events: auto; }
body.app-mode .voice-bubble { left: 16px; right: 16px; width: auto; max-width: none; bottom: 158px; }
.vb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vb-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--gradient); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.vb-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); flex: 1; min-width: 0; }
.vb-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.vb-wave i { width: 3px; border-radius: 2px; background: var(--primary); animation: vbWave 0.9s ease-in-out infinite; }
.vb-wave i:nth-child(2) { animation-delay: 0.15s; }
.vb-wave i:nth-child(3) { animation-delay: 0.3s; }
.vb-wave i:nth-child(4) { animation-delay: 0.45s; }
@keyframes vbWave { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.vb-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.vb-btn:hover { color: var(--primary); border-color: var(--primary); }
.vb-text { font-size: 0.9rem; line-height: 1.5; color: var(--text-main); margin: 0; max-height: 30vh; overflow-y: auto; }

/* =========================================================================
   TOASTS
   ========================================================================= */
.toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--dark-elevated); border: 1px solid var(--border); box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  font-size: 0.86rem; font-weight: 600; color: var(--text-main); min-width: 260px; max-width: 360px;
  animation: toastIn 0.25s ease; transform-origin: bottom right;
}
.toast i { color: var(--success); font-size: 1.05rem; }
.toast.toast-error i { color: var(--danger); }
.toast.toast-info i { color: var(--info); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* =========================================================================
   PAGE HEADERS / SECTIONS
   ========================================================================= */
.page-header { margin-bottom: 28px; }
.page-eyebrow { color: var(--primary); font-weight: 800; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }

/* Aviso de "mejora tu plan" que reemplaza el contenido de una página
   bloqueada (ver EPB_UI.planLockedHtml). */
.plan-locked-card {
  max-width: 480px; margin: 40px auto; text-align: center; padding: 40px 32px;
  background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.plan-locked-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--gradient);
  color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
}
.plan-locked-card h2 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; color: var(--text-main); }
.plan-locked-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 22px; }
.page-header h2 { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; margin-bottom: 8px; }
.page-header .lead { color: var(--text-muted); font-size: 0.98rem; max-width: 720px; }

.section-block { margin-bottom: 34px; }
.section-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.section-block-head h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; }
.section-block-head p.sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; }

/* =========================================================================
   CARDS
   ========================================================================= */
.card {
  background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px;
}
.card-glass {
  background: rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
}
@media (max-width: 640px) {
  .card, .card-glass { padding: 18px; }
}
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* Columnas asimetricas (video+card, tabla+resumen, etc.) -- usar esta clase
   con --split-ratio en vez de grid-template-columns inline: un valor
   inline nunca se puede "sobrescribir" en una media query (misma
   especificidad), asi que esas paginas quedaban forzadas a 2 columnas
   angostas en el celular/la app. Con --split-ratio como variable, la regla
   de abajo sí puede colapsarlas a 1 columna en pantallas angostas. */
.grid-split { grid-template-columns: var(--split-ratio, 1.3fr 1fr); }
@media (max-width: 900px) { .grid-split { grid-template-columns: 1fr; } }

.stat-card { display: flex; flex-direction: column; gap: 10px; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: center; background: rgba(52, 168, 226, 0.12); color: var(--primary); font-size: 1.1rem;
}
.stat-card .stat-value { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--text-main); }
.stat-card .stat-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.stat-card .stat-delta { font-size: 0.75rem; font-weight: 700; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* Welcome banner */
.welcome-banner {
  background: linear-gradient(120deg, rgba(52,168,226,0.14), rgba(22,27,34,0.5)), var(--dark-card);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 34px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.welcome-banner::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(52,168,226,0.18), transparent 70%);
  top: -140px; right: -80px;
}
.welcome-banner .wb-text { position: relative; z-index: 2; max-width: 620px; }
.welcome-banner h2 { font-family: var(--font-head); font-size: 1.7rem; margin-bottom: 8px; }
.welcome-banner p { color: var(--text-muted); font-size: 0.95rem; }
.welcome-banner .wb-visual { position: relative; z-index: 2; flex-shrink: 0; }

/* =========================================================================
   PROGRESS
   ========================================================================= */
.progress-track { width: 100%; height: 12px; border-radius: 20px; background: rgba(255,255,255,0.06); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 20px; background: var(--gradient); transition: width 0.6s ease; }
.progress-track.thin { height: 7px; }

/* Tractor decorativo sobre una barra de progreso -- mismo motivo que la
   pantalla de arranque y el splash de Autodesk, reusado en cualquier
   barra de progreso de la app (lectura de PDF/zip, etc.). El wrapper es
   mas alto que la barra para que el tractor no se recorte. */
.tractor-track-wrap { position: relative; width: 100%; height: 45px; }
.tractor-track-wrap .progress-track { position: absolute; left: 0; right: 0; bottom: 2px; }
.tractor-track-wrap .tractor-icon {
  position: absolute; bottom: 0; left: -6px; width: 51px; height: auto;
  transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Aviso "toca aqui" para el boton principal recien aparecido tras un
   analisis (ej. "Continuar" despues de leer un PDF) -- vibra un par de
   veces y sigue con un pulso suave hasta que el contratista interactua. */
@keyframes btnAttentionShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes btnAttentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,168,226,0.5); }
  50% { box-shadow: 0 0 0 9px rgba(52,168,226,0); }
}
.btn-attention {
  animation: btnAttentionShake 0.6s ease-in-out 2, btnAttentionPulse 1.3s ease-in-out 1.2s 5;
}

.activation-list { list-style: none; display: grid; gap: 14px; margin-top: 20px; }
.activation-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.activation-list .step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.activation-list .step-icon.done { background: var(--success-bg); color: var(--success); }
.activation-list .step-icon.pending { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.activation-list .step-icon.active { background: rgba(52,168,226,0.14); color: var(--primary); }
.activation-list li.is-active { border-color: rgba(52,168,226,0.3); background: rgba(52,168,226,0.04); }
.activation-list .step-body { flex: 1; }
.activation-list .step-title { font-weight: 700; font-size: 0.9rem; color: var(--text-main); }
.activation-list .step-sub { font-size: 0.78rem; color: var(--text-dim); }

/* =========================================================================
   BADGES / STATUS
   ========================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 50px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.badge-new { background: rgba(52,168,226,0.16); color: var(--primary); }
.badge-new i { animation: badgeNewBlink 1.4s ease-in-out infinite; }
@keyframes badgeNewBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.badge i { font-size: 0.65rem; }

/* Fila resaltada de la estimacion recien creada, para que el
   contratista la ubique de un vistazo apenas entra al listado. */
.estimate-row-new { background: rgba(52,168,226,0.06); }
.estimate-row-new:hover { background: rgba(52,168,226,0.1); }

/* Modo seleccion (mantener presionada una fila en "Enviar estimacion")
   -- user-select:none evita que se marque texto mientras se sostiene. */
.estimate-row { user-select: none; -webkit-user-select: none; }
.estimate-row-selected { background: rgba(52,168,226,0.14) !important; }

/* Semaforo de capacitacion (para el panel administrativo) */
.semaforo {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 800; white-space: nowrap;
}
.semaforo-green { background: var(--success-bg); color: var(--success); }
.semaforo-yellow { background: var(--warning-bg); color: var(--warning); }
.semaforo-red { background: var(--danger-bg); color: var(--danger); }
.semaforo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.semaforo-green .semaforo-dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.semaforo-yellow .semaforo-dot { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.semaforo-red .semaforo-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: semaforoPulse 1.4s infinite; }
@keyframes semaforoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; padding: 12px 22px; transition: 0.25s;
  font-family: var(--font-body); text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--gradient); color: white; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px var(--primary-glow); }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(52, 168, 226, 0.1); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-main); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: rgba(248, 81, 73, 0.12); color: #ff9d97; border: 1px solid rgba(248,81,73,0.25); }
.btn-danger:hover { background: rgba(248, 81, 73, 0.2); }
.btn-sm { padding: 8px 14px; font-size: 0.78rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-icon-only { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); }

/* =========================================================================
   TABLES
   ========================================================================= */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--dark-card); }
table.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
table.data-table thead th {
  text-align: left; padding: 15px 18px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim); font-weight: 800; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data-table tbody td { padding: 15px 18px; font-size: 0.88rem; color: var(--text-body); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.cell-primary { font-weight: 700; color: var(--text-main); }
.cell-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================================
   ACCIONES DEL CLIENTE (admin/clientes.html) -- botones circulares tipo
   Apple, como un menú de ancho completo DEBAJO de cada cliente (fila
   .client-actions-row) en vez de una columna a la derecha -- así el
   administrador tiene todo a la mano sin desplazarse horizontalmente.
   Clases nuevas y propias de esta tabla: no tocan .btn/.btn-ghost/
   .table-actions, que sigue usando el resto de la plataforma tal cual
   estaba. Cada acción tiene su propio color para ubicarla de un vistazo;
   usa las variables de tema (--dark-card, --border, etc.) así que se ve
   bien en modo claro y oscuro sin reglas aparte, y funciona igual en
   cualquier navegador/SO porque son solo box-shadow + transform, sin nada
   propietario.
   ========================================================================= */
/* table.data-table tbody td (más específica que tr.client-row td a
   secas) ya trae border-bottom -- hay que igualar esa especificidad para
   que el "sin borde" realmente gane y las dos filas de un cliente se
   vean como una sola sección continua. */
table.data-table tbody tr.client-row td { border-bottom: none; }
tr.client-actions-row td { padding: 2px 18px 16px; }
tr.client-row:hover, tr.client-row:hover + tr.client-actions-row, tr.client-actions-row:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] tr.client-row:hover, [data-theme="light"] tr.client-row:hover + tr.client-actions-row, [data-theme="light"] tr.client-actions-row:hover { background: rgba(15, 23, 42, 0.025); }
.client-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-action-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--dark-elevated); color: var(--text-muted);
  font-size: 0.76rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.client-action-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.07); box-shadow: 0 6px 14px rgba(15,23,42,0.2); }
.client-action-btn:active:not(:disabled) { transform: scale(0.93); }
.client-action-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; transform: none; }
.client-action-btn.act-ver:hover:not(:disabled) { color: var(--info); border-color: var(--info); }
.client-action-btn.act-editar:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.client-action-btn.act-acceso:hover:not(:disabled) { color: var(--warning); border-color: var(--warning); }
.client-action-btn.act-capacitacion:hover:not(:disabled) { color: #a78bfa; border-color: #a78bfa; }
.client-action-btn.act-cuota:hover:not(:disabled) { color: #2dd4bf; border-color: #2dd4bf; }
.client-action-btn.act-plan:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.client-action-btn.act-borrar { background: var(--danger-bg); color: var(--danger); border-color: rgba(248,81,73,0.25); }
.client-action-btn.act-borrar:hover:not(:disabled) { background: rgba(248,81,73,0.22); border-color: var(--danger); }
@media (max-width: 480px) {
  .client-actions { gap: 6px; }
  .client-action-btn { width: 27px; height: 27px; font-size: 0.7rem; }
}

/* =========================================================================
   MODALS
   ========================================================================= */
.pmodal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(6, 10, 15, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  z-index: 3000; align-items: center; justify-content: center; padding: 20px;
}
.pmodal-overlay.show { display: flex; }
.pmodal {
  background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  animation: pmodalIn 0.25s ease;
}
.pmodal.pmodal-lg { max-width: 800px; }
@keyframes pmodalIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pmodal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--border-soft); gap: 16px; }
.pmodal-head h3 { font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 4px; }
.pmodal-head p { font-size: 0.85rem; color: var(--text-dim); }
.pmodal-close { background: rgba(255,255,255,0.05); border: none; color: var(--text-muted); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; flex-shrink: 0; }
.pmodal-close:hover { color: white; background: rgba(255,255,255,0.1); }
.pmodal-body { padding: 24px 26px; }
.pmodal-foot { padding: 18px 26px 26px; display: flex; justify-content: flex-end; gap: 12px; }

/* =========================================================================
   TABS
   ========================================================================= */
.tabs-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 26px; overflow-x: auto; }
.tab-btn {
  background: none; border: none; padding: 12px 18px; color: var(--text-muted); font-weight: 700;
  font-size: 0.86rem; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: 0.2s;
}
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeInTab 0.25s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================================
   TRAINING MODULES
   ========================================================================= */
.module-card {
  display: flex; gap: 18px; padding: 22px; background: var(--dark-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); align-items: center; transition: 0.25s;
}
.module-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 20px 45px rgba(52,168,226,0.12); }
.module-card .mod-num {
  width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; flex-shrink: 0;
}
.mod-num.done { background: var(--success-bg); color: var(--success); }
.mod-num.in_progress { background: rgba(52,168,226,0.14); color: var(--primary); }
.mod-num.locked { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.module-card .mod-body { flex: 1; min-width: 0; }
.module-card h4 { font-size: 1rem; margin-bottom: 4px; color: var(--text-main); }
.module-card p { font-size: 0.84rem; color: var(--text-dim); }
.module-card .mod-meta { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.module-card .mod-actions { flex-shrink: 0; }

/* Tarjetas de leccion estilo "YouTube": miniatura 16:9 con boton de play,
   duracion, insignia de estado, y titulo/descripcion a la derecha. */
.yt-module-card {
  display: flex; gap: 18px; background: var(--dark-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px; align-items: flex-start; transition: 0.25s;
}
.yt-module-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 20px 45px rgba(52,168,226,0.12); }
.yt-module-card:hover { border-color: rgba(52,168,226,0.4); }
.yt-thumb {
  position: relative; width: 240px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 16 / 9; background: #000; cursor: pointer;
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.72); transition: 0.3s; }
.yt-thumb.locked img { filter: brightness(0.32) grayscale(0.5); }
/* Miniatura "Estamos trabajando..." de un módulo sin video: menos oscura para que se lea. */
.yt-thumb img.thumb-placeholder { filter: brightness(0.9); }
.yt-thumb.locked img.thumb-placeholder { filter: brightness(0.55) grayscale(0.3); }
.yt-module-card:hover .yt-thumb img { filter: brightness(0.85); transform: scale(1.03); }
.yt-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(11,15,21,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem;
  border: 2px solid rgba(255,255,255,0.6); transition: 0.2s;
}
.yt-module-card:hover .yt-play-btn { background: var(--primary); border-color: var(--primary); transform: translate(-50%, -50%) scale(1.08); }
.yt-duration-badge {
  position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.82); color: #fff;
  font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.yt-order-badge {
  position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.78rem; color: #fff;
}
.yt-order-badge.done { background: var(--success); }
.yt-order-badge.in_progress { background: var(--primary); }
.yt-order-badge.locked { background: rgba(0,0,0,0.65); }
.yt-status-ribbon {
  position: absolute; top: 8px; right: 8px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 3px 9px; border-radius: 20px; color: #fff;
}
.yt-status-ribbon.done { background: var(--success); }
.yt-status-ribbon.in_progress { background: var(--primary); }
.yt-status-ribbon.locked { background: rgba(0,0,0,0.7); }
.yt-body { flex: 1; min-width: 0; padding: 2px 2px 2px 0; }
.yt-body h4 { font-size: 1.02rem; margin-bottom: 6px; color: var(--text-main); }
.yt-body p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.55; }
.yt-meta-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.yt-actions { margin-top: 14px; }
@media (max-width: 640px) {
  .yt-module-card { flex-direction: column; }
  .yt-thumb { width: 100%; }
}

.training-progress-summary {
  display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--dark-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 24px; flex-wrap: wrap;
}
.training-progress-summary .tps-num { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--primary); }
.training-progress-summary .tps-track { flex: 1; min-width: 180px; }

/* Video player */
.video-frame {
  width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: black; border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.video-frame video { width: 100%; display: block; max-height: 480px; background: black; }
/* Imagen "Estamos trabajando para darte el mejor contenido" mientras el video real no existe. */
.video-frame img.video-placeholder { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: white; }

/* Quiz */
.quiz-question { background: var(--dark-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 18px; }
.quiz-question .q-index { color: var(--primary); font-weight: 800; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.quiz-question h4 { font-size: 1.05rem; margin-bottom: 16px; color: var(--text-main); }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: 0.2s; font-size: 0.9rem;
}
.quiz-option:hover { border-color: var(--primary); background: rgba(52,168,226,0.05); }
.quiz-option input { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.quiz-option.selected { border-color: var(--primary); background: rgba(52,168,226,0.08); }
.quiz-option.correct { border-color: var(--success); background: var(--success-bg); }
.quiz-option.incorrect { border-color: var(--danger); background: var(--danger-bg); }

.quiz-result-hero { text-align: center; padding: 50px 30px; position: relative; overflow: hidden; }
.quiz-result-hero .result-icon {
  width: 84px; height: 84px; border-radius: 50%; background: var(--success-bg); color: var(--success);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 22px;
  position: relative; z-index: 2; animation: resultPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz-result-hero h2 { font-family: var(--font-head); font-size: 1.7rem; margin-bottom: 10px; position: relative; z-index: 2; animation: resultFadeUp 0.6s ease 0.15s both; }
.quiz-result-hero .result-score {
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--primary); margin: 14px 0;
  position: relative; z-index: 2; animation: resultFadeUp 0.6s ease 0.3s both;
}
.quiz-result-hero .result-breakdown {
  display: flex; justify-content: center; gap: 20px; margin-top: 10px; position: relative; z-index: 2;
  animation: resultFadeUp 0.6s ease 0.4s both;
}
.quiz-result-hero .result-breakdown span { font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.quiz-result-meta { display: flex; justify-content: center; gap: 26px; margin-top: 20px; flex-wrap: wrap; position: relative; z-index: 2; animation: resultFadeUp 0.6s ease 0.5s both; }
.quiz-result-meta div { text-align: left; }
.quiz-result-meta .rm-label { font-size: 0.7rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.5px; }
.quiz-result-meta .rm-value { font-weight: 700; color: var(--text-main); font-size: 0.92rem; }

@keyframes resultPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes resultFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Confeti — piezas de colores que caen desde arriba del panel de resultado */
.confetti-piece {
  position: absolute; top: -20px; width: 8px; height: 14px; opacity: 0.9;
  animation: confettiFall 2.6s ease-in forwards; z-index: 1; border-radius: 2px;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) rotate(540deg); opacity: 0; }
}

/* =========================================================================
   ONBOARDING (mock scheduler)
   ========================================================================= */
.calendar-mock { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; }
.calendar-mock .cal-dow { text-align: center; font-size: 0.68rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; padding-bottom: 6px; }
.calendar-mock .cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft); font-size: 0.85rem; color: var(--text-muted);
  cursor: pointer; transition: 0.15s;
}
.calendar-mock .cal-day.disabled { opacity: 0.25; cursor: not-allowed; }
.calendar-mock .cal-day.available:hover { border-color: var(--primary); color: var(--text-main); }
.calendar-mock .cal-day.selected { background: var(--gradient); color: white; font-weight: 800; border-color: transparent; }
.calendar-mock .cal-day.available.selected:hover { color: white; }
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 14px; }
.time-slot { padding: 11px; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 0.85rem; cursor: pointer; color: var(--text-muted); transition: 0.15s; }
.time-slot:hover { border-color: var(--primary); color: var(--text-main); }
.time-slot.selected { background: var(--gradient); color: white; border-color: transparent; font-weight: 700; }
.time-slot.disabled { cursor: not-allowed; opacity: 0.45; text-decoration: line-through; }
.time-slot.disabled:hover { border-color: var(--border); color: var(--text-muted); }

.onboarding-confirm { text-align: center; padding: 40px 20px; }
.onboarding-confirm .oc-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; }
.onboarding-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 420px; margin: 26px auto 0; text-align: left; }
.onboarding-detail-grid div { background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px; }
.onboarding-detail-grid .od-label { font-size: 0.68rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.5px; margin-bottom: 4px; }
.onboarding-detail-grid .od-value { font-weight: 700; color: var(--text-main); font-size: 0.92rem; }

/* =========================================================================
   AI ASSISTANT
   ========================================================================= */
.ai-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 1080px) { .ai-layout { grid-template-columns: 1fr; } }
.ai-loading { display: none; align-items: center; gap: 12px; padding: 16px 18px; background: rgba(52,168,226,0.08); border: 1px solid rgba(52,168,226,0.25); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--primary); font-weight: 600; margin-bottom: 18px; }
.ai-loading.show { display: flex; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(52,168,226,0.25); border-top-color: var(--primary); animation: spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.estimate-result { display: none; }
.estimate-result.show { display: block; animation: fadeInTab 0.3s ease; }
.estimate-line { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border-soft); gap: 12px; }
.estimate-line:last-child { border-bottom: none; }
.estimate-line .el-name { font-weight: 600; color: var(--text-main); font-size: 0.88rem; }
.estimate-line .el-qty { font-size: 0.76rem; color: var(--text-dim); }
.estimate-line .el-amount { font-weight: 700; color: var(--text-main); font-size: 0.9rem; white-space: nowrap; }
.estimate-total-row { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--border); }
.estimate-total-row.grand { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--primary); }

.quote-preview { background: white; color: #1e293b; border-radius: var(--radius-lg); padding: 34px; }
@media (max-width: 640px) { .quote-preview { padding: 18px; } }
.quote-preview h3 { color: #0f172a; font-family: var(--font-head); }
.quote-preview .qp-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #34a8e2; padding-bottom: 18px; margin-bottom: 18px; }
.quote-preview .qp-header img { height: 34px; }
.quote-preview table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.quote-preview table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: #64748b; padding: 8px 6px; border-bottom: 1px solid #e2e8f0; }
.quote-preview table td { padding: 10px 6px; font-size: 0.85rem; border-bottom: 1px solid #f1f5f9; color: #334155; }
.quote-preview .qp-total { text-align: right; font-size: 1.3rem; font-weight: 800; color: #1e293b; margin-top: 14px; }

/* Vista previa editable del estimado (se ve como el PDF real, pero cada
   campo se puede corregir antes de descargar). */
.qp-editable {
  width: 100%; border: 1px dashed transparent; border-radius: 6px; background: transparent;
  color: inherit; font: inherit; padding: 3px 6px; margin: -3px -6px; transition: 0.15s;
}
.qp-editable:hover { border-color: #cbd5e1; background: #f8fafc; }
.qp-editable:focus { outline: none; border-color: #34a8e2; background: #f0f9ff; border-style: solid; }
.qp-li-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.qp-li-table { width: 100%; min-width: 380px; border-collapse: collapse; margin-top: 0; }
.qp-li-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; padding: 8px 6px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.qp-li-table td { padding: 6px 4px; font-size: 0.85rem; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.qp-li-table .qp-li-name { min-width: 130px; }
.qp-li-table .qp-li-num { width: 64px; }
.qp-li-table .qp-li-num input { text-align: right; width: 100%; }
.qp-li-table .qp-li-amount { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
  .qp-li-table .qp-li-name { min-width: 110px; }
  .qp-li-table .qp-li-num { width: 54px; }
}
.qp-li-remove { width: 30px; height: 30px; border: none; background: rgba(248,81,73,0.08); color: #dc2626; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.qp-li-remove:hover { background: #dc2626; color: white; }
.qp-detail-box { background: #f0f9ff; border: 1px solid #cfe8fb; border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.qp-detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: start; padding: 5px 0; font-size: 0.85rem; }
.qp-detail-row span.qp-dr-label { color: #64748b; font-size: 0.78rem; padding-top: 4px; }
.qp-edit-badge { font-size: 0.68rem; color: #34a8e2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; display: flex; align-items: center; gap: 5px; }

.ai-assist-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #34a8e2 0%, #1c6fa0 100%);
  border: none; border-radius: 12px; padding: 16px 18px; margin: 16px 0;
  box-shadow: 0 10px 24px rgba(28, 111, 160, 0.28);
}
.ai-assist-trigger p { font-size: 0.78rem; color: rgba(255, 255, 255, 0.88); margin: 6px 0 0; }
.ai-assist-trigger-btn {
  border: none; border-radius: 999px; background: #fff; color: #1c6fa0;
  font-weight: 700; font-size: 0.85rem; padding: 9px 18px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.15s, box-shadow 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.ai-assist-trigger-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.ai-assist-trigger-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.ai-assist-box { background: #fff; border: 1px solid rgba(52, 168, 226, 0.25); border-radius: 12px; padding: 16px 18px; margin: 16px 0; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); }
.ai-assist-box .qp-edit-badge { color: #1c6fa0; }
.ai-assist-summary { font-size: 0.85rem; color: #334155; line-height: 1.5; margin: 8px 0 10px; }
.ai-assist-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ai-assist-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 0.78rem; color: #334155; }
.ai-assist-chip button { border: none; background: linear-gradient(135deg, #34a8e2 0%, #1c6fa0 100%); color: #fff; border-radius: 999px; width: 22px; height: 22px; cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
.ai-assist-chip button:disabled { background: #94a3b8; cursor: default; }
.ai-assist-chip.added { opacity: 0.6; }
.ai-assist-tips { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; color: #334155; line-height: 1.6; }
.ai-assist-tips li { margin-bottom: 4px; }
.ai-assist-send-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.82rem; font-weight: 600; color: #1c6fa0; text-decoration: none; }
.ai-assist-send-hint:hover { text-decoration: underline; }

/* =========================================================================
   ESTIMATE DOCUMENT PREVIEW -- vista previa del BID/estimado tal como se ve
   en el PDF final (encabezado de marca, tipo de partida, secciones de
   Assumptions/Exclusions/RFIs/Pricing Basis, resumen Labor/Materiales).
   Vive siempre dentro de .quote-preview (fondo blanco fijo, sin importar el
   tema oscuro/claro de la plataforma) -- ver enviar-estimacion.html y las
   3 pestañas de asistente-ia.html.
   ========================================================================= */
.qp-doc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid #34a8e2; padding-bottom: 16px; margin-bottom: 18px; }
.qp-doc-brand { display: flex; align-items: center; gap: 12px; }
.qp-doc-brand img { height: 42px; width: 42px; object-fit: contain; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
.qp-doc-brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #0f172a; }
.qp-doc-brand-slogan { font-size: 0.76rem; color: #64748b; margin-top: 2px; }
.qp-doc-meta { text-align: right; }
.qp-doc-meta .qp-doc-title { font-family: var(--font-head); font-weight: 800; font-size: 0.92rem; color: #1c6fa0; text-transform: uppercase; letter-spacing: 0.5px; }
.qp-doc-meta .qp-doc-date { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.qp-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; }
.qp-status-pill.draft { background: rgba(240,180,41,0.15); color: #92600a; }
.qp-status-pill.final { background: rgba(63,185,80,0.15); color: #196c31; }

.qp-section-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 0.84rem; color: #0f172a; margin: 24px 0 10px; padding-left: 10px; border-left: 3px solid #34a8e2; }
.qp-section-title:first-child { margin-top: 4px; }

.qp-li-table .qp-li-type { width: 116px; }
.qp-li-table select.qp-editable { padding: 5px 6px; background: #fff; cursor: pointer; appearance: auto; }

.qp-bullet-editor {
  width: 100%; min-height: 78px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;
  color: #334155; font: inherit; font-size: 0.85rem; padding: 10px 12px; resize: vertical; line-height: 1.65;
}
.qp-bullet-editor:hover { border-color: #94a3b8; }
.qp-bullet-editor:focus { outline: none; border-color: #34a8e2; border-style: solid; background: #f0f9ff; }
.qp-bullet-hint { font-size: 0.74rem; color: #94a3b8; margin-top: 5px; }

.qp-cost-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.qp-cost-tile { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.qp-cost-tile .qp-cost-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; font-weight: 700; }
.qp-cost-tile .qp-cost-value { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-top: 4px; }

@media (max-width: 640px) {
  .qp-doc-header { flex-direction: column; align-items: flex-start; }
  .qp-doc-meta { text-align: left; }
}

/* =========================================================================
   AUTODESK / MI PLATAFORMA
   ========================================================================= */
.autodesk-card {
  display: flex; align-items: center; gap: 26px; padding: 32px; background: linear-gradient(120deg, rgba(52,168,226,0.1), rgba(22,27,34,0.4)), var(--dark-card);
  border: 1px solid var(--border); border-radius: var(--radius-xl); flex-wrap: wrap;
}
.autodesk-logo-box { width: 84px; height: 84px; border-radius: var(--radius-lg); background: #0b0f15; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.autodesk-logo-box i { font-size: 2.2rem; color: var(--primary); }

/* Splash de conexion — pantalla de bienvenida animada antes de abrir BuildingConnected.
   Se confina al area de contenido (igual que .autodesk-workspace) para que el
   sidebar y el header sigan visibles detras, y usa variables de tema para
   verse bien tanto en oscuro como en claro. */
.autodesk-splash {
  position: fixed; top: var(--header-h); left: var(--sidebar-w); right: 0; bottom: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--dark-card) 0%, var(--dark-sunken) 75%);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
}
.autodesk-splash.show { opacity: 1; visibility: visible; }
.autodesk-splash-inner {
  text-align: center; max-width: 460px; padding: 20px;
  opacity: 0; transform: translateY(10px) scale(0.97);
  transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s;
}
.autodesk-splash.show .autodesk-splash-inner { opacity: 1; transform: translateY(0) scale(1); }
.autodesk-splash-logos { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 30px; }
.asl-logo {
  width: 88px; height: 88px; border-radius: var(--radius-lg); background: var(--dark-card);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--primary-glow); animation: aslPulseBox 2.2s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
}
.asl-epb img { width: 50px; height: auto; }
.asl-autodesk { background: #ffffff; animation-delay: 1.1s; }
.asl-autodesk-word { font-family: var(--font-head); font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; color: #0b0f15; }
@keyframes aslPulseBox { 0%,100% { box-shadow: 0 0 0 0 var(--primary-glow); } 50% { box-shadow: 0 0 0 10px rgba(52,168,226,0); } }
.autodesk-splash-logos.connected .asl-logo { animation: none; box-shadow: 0 0 0 4px rgba(63,185,80,0.25); }
.asl-connector { display: flex; gap: 6px; align-items: center; justify-content: center; width: 34px; }
.asl-connector span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: 0.3; animation: aslDot 1.2s ease-in-out infinite; transition: opacity 0.2s ease, transform 0.2s ease; }
.asl-connector span:nth-child(2) { animation-delay: 0.2s; }
.asl-connector span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aslDot { 0%,100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.asl-connector.connected span { animation: none; opacity: 0; transform: scale(0); }
.asl-connector.connected::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--success);
  font-size: 0.85rem; animation: aslCheckPop 0.35s ease;
}
@keyframes aslCheckPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.autodesk-splash-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
.autodesk-splash-sub { font-size: 0.92rem; color: var(--text-muted); min-height: 22px; margin-bottom: 26px; transition: color 0.2s ease; }
.autodesk-splash-sub.done { color: var(--success); font-weight: 600; }
/* Envoltorio mas alto que la barra en si (que sigue con overflow:hidden
   para el relleno) para que el tractor no se recorte -- avanza encima,
   sincronizado en JS con el mismo % que el relleno (ver plataforma.html). */
.autodesk-splash-road { position: relative; width: 100%; height: 34px; }
.autodesk-splash-bar { position: absolute; left: 0; right: 0; bottom: 2px; height: 5px; border-radius: 4px; background: var(--border); overflow: hidden; }
.autodesk-splash-bar-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--gradient); transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
.autodesk-splash-bar-fill.done { background: var(--success); }
.autodesk-splash-tractor {
  position: absolute; bottom: 0; left: -4px; width: 38px; height: auto;
  transition: left 0.9s cubic-bezier(0.4,0,0.2,1);
}

@media (max-width: 1080px) {
  .autodesk-splash { left: 0; }
}

/* Vista incrustada — BuildingConnected "dentro" de Estimate Pro Build.
   Se posiciona debajo del header y a la derecha del sidebar (no los tapa),
   para que se sienta como un panel mas de la app y no una pantalla ajena. */
.autodesk-workspace {
  position: fixed; top: var(--header-h); left: var(--sidebar-w); right: 0; bottom: 0; z-index: 150;
  display: flex; flex-direction: column; background: var(--dark);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, left 0.3s ease;
}
.autodesk-workspace.show { opacity: 1; visibility: visible; }
.autodesk-workspace.sidebar-hidden { left: 0; }
/* Dentro de la app (Android): pantalla completa de verdad, el panel
   reemplaza al header y sidebar del portal en vez de convivir con ellos. */
.autodesk-workspace.app-fullscreen { top: 0; left: 0; z-index: 300; }
.sidebar.epb-collapsed { transform: translateX(-100%); }
.aw-topbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--dark-elevated);
  border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 48px;
}
.aw-topbar-app { padding-top: max(8px, env(safe-area-inset-top)); gap: 10px; }
.aw-app-logo { height: 24px; width: auto; }
.aw-sidebar-toggle i { transition: transform 0.25s ease; }
.aw-sidebar-toggle.collapsed i { transform: rotate(180deg); }
.aw-badge-label { font-size: 0.78rem; font-weight: 700; color: var(--text-dim); }
.aw-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aw-frame-wrap { flex: 1; position: relative; }
/* Panel "conectado" -- reemplaza al iframe embebido de Autodesk (bloqueado
   por su propio login, ver comentarios en plataforma.html): solo confirma
   que la sesión se abrió en una ventana aparte y ofrece traerla al frente. */
.aw-connected-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; height: 100%; color: var(--text-muted); text-align: center; padding: 30px;
}
.aw-connected-icon { font-size: 2.6rem; color: var(--success, #16a34a); }
.aw-connected-panel h3 { font-family: var(--font-head); font-size: 1.15rem; color: var(--text-main); margin: 0; }
.aw-connected-panel p { max-width: 420px; font-size: 0.88rem; line-height: 1.6; margin: 0; }
.aw-blocked-notice {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px;
  padding: 16px 20px; border-radius: var(--radius-sm); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
}
.aw-blocked-notice[hidden] { display: none; }
.aw-blocked-notice i { font-size: 1.4rem; color: #ef4444; }
.aw-blocked-notice p { max-width: 320px; font-size: 0.82rem; margin: 0; }

/* =========================================================================
   PAGINA WEB -- comparación de planes (Básica / Premium)
   ========================================================================= */
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 800px) { .tier-grid { grid-template-columns: 1fr; } }
@keyframes tierCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tierBadgePulse { 0%, 100% { box-shadow: 0 6px 16px rgba(28,111,160,0.4); } 50% { box-shadow: 0 8px 26px rgba(52,168,226,0.7); } }
.tier-card {
  position: relative; display: flex; flex-direction: column; background: var(--dark-card);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 30px 26px;
  animation: tierCardIn 0.55s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tier-card:hover { transform: translateY(-6px); border-color: rgba(52,168,226,0.4); box-shadow: 0 22px 44px rgba(28,111,160,0.24); }
.tier-card.featured {
  border-color: rgba(52,168,226,0.55); background: linear-gradient(160deg, rgba(52,168,226,0.08), rgba(22,27,34,0.4)), var(--dark-card);
  box-shadow: 0 20px 48px rgba(28,111,160,0.22);
}
.tier-card.featured:hover { box-shadow: 0 26px 54px rgba(28,111,160,0.32); }
.tier-card-badge {
  position: absolute; top: -13px; left: 26px; background: var(--gradient); color: #fff;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 5px 14px; border-radius: 999px; animation: tierBadgePulse 2.4s ease-in-out infinite;
}
.tier-card-name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.tier-card-price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.tier-card-price .amount { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--primary); line-height: 1; }
.tier-card-price .period { font-size: 0.8rem; color: var(--text-dim); }
.tier-card-market { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 18px; }
.tier-card-market .market-strike { text-decoration: line-through; opacity: 0.75; }
.tier-savings-badge {
  display: inline-block; background: rgba(63,185,80,0.15); color: var(--success); font-weight: 800;
  font-size: 0.7rem; padding: 3px 10px; border-radius: 999px; margin-left: 8px;
}
.tier-card-features { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--text-body); line-height: 1.4; }
.tier-card-features li i { color: var(--success); font-size: 0.85rem; margin-top: 3px; flex-shrink: 0; }
.tier-card .btn { width: 100%; justify-content: center; transition: transform 0.15s ease; }
.tier-card .btn:hover { transform: scale(1.03); }
@media (max-width: 640px) {
  .tier-card { padding: 24px 20px; }
}

/* Tarjetas "por qué tener tu página web" -- misma .card compartida pero con
   entrada escalonada + hover, sin tocar el estilo base de .card (usado en
   toda la plataforma). Solo en pagina-web.html (ver .perk-card ahí). */
@keyframes perkCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.perk-card { animation: perkCardIn 0.5s ease both; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.perk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15,23,42,0.12); }
.perk-card .stat-icon { transition: transform 0.25s ease; }
.perk-card:hover .stat-icon { transform: scale(1.12) rotate(-4deg); }

/* Banner final de llamada a la acción -- "página web" (móvil y web). Fondo
   degradado de marca con un brillo animado sutil, para que se sienta menos
   plano que una tarjeta blanca más y empuje a contratar. */
@keyframes ctaGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.web-cta-banner {
  position: relative; overflow: hidden; margin-top: 24px; padding: 34px 30px; border-radius: var(--radius-xl);
  background: var(--gradient); color: #fff; text-align: center; animation: perkCardIn 0.6s ease both;
}
.web-cta-banner::before {
  content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
  animation: ctaGlow 3.2s ease-in-out infinite;
}
.web-cta-banner > * { position: relative; z-index: 1; }
.web-cta-banner h3 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 8px; }
.web-cta-banner p { font-size: 0.9rem; opacity: 0.92; max-width: 520px; margin: 0 auto 20px; }
.web-cta-banner .btn { background: #fff; color: var(--primary-dark, #1a5f82); border: none; font-weight: 800; padding: 12px 26px; transition: transform 0.15s ease; }
.web-cta-banner .btn:hover { transform: scale(1.05); }

/* =========================================================================
   RESOURCES
   ========================================================================= */
.resource-card { display: flex; flex-direction: column; gap: 14px; }
.resource-card .res-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(52,168,226,0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.resource-card h4 { font-size: 1rem; color: var(--text-main); }
.resource-card p { font-size: 0.84rem; color: var(--text-dim); flex: 1; }
.resource-card .res-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

/* =========================================================================
   SETTINGS
   ========================================================================= */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border-soft); gap: 16px; }
.detail-row:last-child { border-bottom: none; }
.detail-row .dr-label { font-size: 0.82rem; color: var(--text-dim); }
.detail-row .dr-value { font-weight: 700; color: var(--text-main); font-size: 0.9rem; text-align: right; }

.connection-status { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 0.86rem; font-weight: 700; margin-top: 4px; }
.connection-status.ok { background: var(--success-bg); color: var(--success); border: 1px solid rgba(63,185,80,0.25); }
.connection-status.off { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border); }

.disclaimer-box { background: rgba(240,180,41,0.08); border: 1px solid rgba(240,180,41,0.25); border-radius: var(--radius-md); padding: 16px 18px; font-size: 0.83rem; color: #f3cd6c; display: flex; gap: 12px; align-items: flex-start; }
.disclaimer-box i { margin-top: 2px; }

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.empty-state i { font-size: 2.4rem; color: var(--text-dim); margin-bottom: 16px; display: block; }
.empty-state p { font-size: 0.9rem; }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-30 { margin-top: 30px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.fw-700 { font-weight: 700; }
.w-full { width: 100%; }
.flex-wrap { flex-wrap: wrap; }
.hide-mobile { display: block; }
@media (max-width: 640px) { .hide-mobile { display: none; } }
.text-center { text-align: center; }

/* =========================================================================
   ASISTENTE IA . SUBIDA DE PDF, TARJETAS DE PROYECTO Y NIVELES DE PRECIO
   ========================================================================= */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  padding: 44px 24px; text-align: center; transition: 0.2s;
  background: rgba(255, 255, 255, 0.015);
}
.dropzone.dragover { border-color: var(--primary); background: rgba(52, 168, 226, 0.06); }
.dropzone-icon { font-size: 2.4rem; color: var(--primary); }

.project-card { transition: 0.2s; }
.project-card.selected, .project-card[style*="border-color"] { border-color: var(--primary); }

/* Lista de documentos de un .zip, agrupados por categoría detectada */
.zipdoc-group { margin-bottom: 22px; }
.zipdoc-group:last-child { margin-bottom: 0; }
.zipdoc-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.zipdoc-group-head i { color: var(--primary); font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; }
.zipdoc-group-head strong { font-size: 0.85rem; color: var(--text-main); }
.zipdoc-group-head .badge { margin-left: auto; }
.zipdoc-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
.zipdoc-row:last-child { border-bottom: none; }
.zipdoc-row input[type="checkbox"] { flex-shrink: 0; }
.zipdoc-row .zipdoc-name { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zipdoc-row .zipdoc-size { font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; }

.tier-option {
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; text-align: center; cursor: pointer; transition: 0.2s;
  background: rgba(255, 255, 255, 0.015);
}
.tier-option:hover { border-color: rgba(52, 168, 226, 0.5); }
.tier-option.selected { border-color: var(--primary); background: rgba(52, 168, 226, 0.08); box-shadow: 0 0 0 1px var(--primary); }
/* Precio sugerido editable dentro de la tarjeta de nivel -- el cliente
   puede escribir su propio total en vez del que calculó la plataforma. */
.tier-price-edit { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 6px; }
.tier-price-edit .tier-price-currency { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.tier-price-edit .tier-price-input {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; text-align: left;
  width: 9ch; border: 1px dashed transparent; border-radius: 6px; background: transparent;
  color: var(--text-main); padding: 2px 4px; margin: -2px -4px; transition: 0.15s;
}
.tier-price-edit .tier-price-input:hover { border-color: #cbd5e1; }
.tier-price-edit .tier-price-input:focus { outline: none; border-color: #34a8e2; background: rgba(52,168,226,0.08); border-style: solid; }
.tier-price-reset {
  border: none; background: none; cursor: pointer; color: var(--primary); font-size: 0.72rem; font-weight: 700;
  padding: 2px 4px; margin-top: 2px;
}
.tier-price-reset:hover { text-decoration: underline; }

.logo-preview { display: block; }

/* --- Encabezado amigable del Asistente IA --- */
.assistant-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.assistant-hero-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gradient);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  color: #fff; flex-shrink: 0; box-shadow: 0 8px 20px var(--primary-glow);
}
.assistant-hero h2 { margin-bottom: 2px; }

/* --- Menú grande de herramientas (reemplaza pestañas de texto) --- */
.assistant-shell { display: block; }

.tool-nav-list { display: grid; gap: 12px; }
.tool-nav-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--dark-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; transition: 0.2s; text-align: left; width: 100%; font-family: var(--font-body);
}
.tool-nav-item:hover { border-color: rgba(52, 168, 226, 0.45); transform: translateY(-1px); }
.tool-nav-item.active { border-color: var(--primary); background: rgba(52, 168, 226, 0.08); box-shadow: 0 0 0 1px var(--primary); }
.tool-nav-icon {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.tool-nav-icon.icon-red { background: var(--danger-bg); color: var(--danger); }
.tool-nav-icon.icon-blue { background: rgba(52, 168, 226, 0.14); color: var(--primary); }
.tool-nav-icon.icon-amber { background: var(--warning-bg); color: var(--warning); }
.tool-nav-icon.icon-teal { background: var(--info-bg); color: var(--info); }
.tool-nav-body { flex: 1; min-width: 0; }
.tool-nav-title { font-weight: 800; font-size: 0.98rem; color: var(--text-main); }
.tool-nav-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
.tool-nav-arrow { color: var(--text-dim); flex-shrink: 0; font-size: 0.85rem; }
.tool-nav-item.active .tool-nav-arrow { color: var(--primary); }

/* --- Pasos horizontales simples (wizard del PDF) --- */
.simple-steps { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 24px; flex-wrap: wrap; }
.simple-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; flex: 1; min-width: 84px; }
.simple-step-icon {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; background: rgba(255, 255, 255, 0.04); border: 2px solid var(--border);
  color: var(--text-dim); transition: 0.2s;
}
.simple-step.done .simple-step-icon { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.simple-step.active .simple-step-icon { background: var(--gradient); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(52, 168, 226, 0.18); }
.simple-step-label { font-size: 0.76rem; font-weight: 700; color: var(--text-main); line-height: 1.25; }
.simple-step.pending .simple-step-label { color: var(--text-dim); }
.simple-step-connector { color: var(--border); font-size: 1.3rem; margin-top: 11px; flex: 0 0 auto; }

/* --- Guía de voz --- */
.voice-guide-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-guide-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 50px;
  background: rgba(255, 255, 255, 0.04); border: 1.5px solid var(--border); color: var(--text-muted);
  font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: 0.2s; font-family: var(--font-body);
}
.voice-guide-toggle:hover { border-color: var(--primary); color: var(--text-main); }
.voice-guide-toggle.active { background: rgba(52, 168, 226, 0.12); border-color: var(--primary); color: var(--primary); }
.voice-guide-lang { display: flex; gap: 6px; }
.voice-guide-lang button {
  padding: 7px 14px; border-radius: 50px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid var(--border);
  color: var(--text-muted); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: 0.2s; font-family: var(--font-body);
}
.voice-guide-lang button.active { background: var(--gradient); border-color: transparent; color: #fff; }
.simple-step-clickable { cursor: pointer; }
.simple-step-clickable:hover .simple-step-icon { box-shadow: 0 0 0 4px rgba(63, 185, 80, 0.18); transform: translateY(-1px); }
.simple-step-clickable:hover .simple-step-label { color: var(--primary); }
@media (max-width: 640px) { .simple-step-connector { display: none; } .simple-step { min-width: 64px; } }

/* =========================================================================
   SELECTOR DE MODO CLARO / OSCURO
   -- en las páginas con shell (sidebar) vive como botón de ícono en el
   encabezado, junto a los demás (.header-theme-btn, ver buildHeader() en
   portal.js). En login.html (que no tiene encabezado) sigue siendo un
   botón flotante, pero ahora comparte fila con el selector de idioma
   dentro de .lang-toggle-floating para que nunca se encimen.
   ========================================================================= */
.portal-theme-toggle {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark-card); border: 1px solid var(--border);
  color: var(--text-main); cursor: pointer; transition: 0.25s; font-size: 1.05rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.portal-theme-toggle:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 0 22px var(--primary-glow);
}
.portal-theme-toggle .fa-sun, .header-theme-btn .fa-sun { display: none; }
[data-theme="light"] .portal-theme-toggle .fa-moon, [data-theme="light"] .header-theme-btn .fa-moon { display: none; }
[data-theme="light"] .portal-theme-toggle .fa-sun, [data-theme="light"] .header-theme-btn .fa-sun { display: inline-block; }
[data-theme="light"] .portal-theme-toggle { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); }

/* =========================================================================
   MODO CLARO (LIGHT THEME) — prioritario en el Portal de Clientes
   =========================================================================
   El panel decorativo del login (foto + overlay) y los fondos oscuros de
   modales/scrims se mantienen como acentos de marca; el resto de la
   aplicación (sidebar, header, tarjetas, tablas, formularios) cambia a una
   superficie clara, profesional, con sombras suaves y los mismos
   degradados azules de marca.
*/
:root[data-theme="light"] {
  --dark: #f2f6fb;
  --dark-card: #ffffff;
  --dark-elevated: #ffffff;
  --dark-sunken: #e7edf5;
  --text-main: #0f172a;
  --text-body: #334155;
  --text-muted: #52607a;
  --text-dim: #7c8aa0;
  --white: #0f172a;
  --border: rgba(15, 23, 42, 0.1);
  --border-soft: rgba(15, 23, 42, 0.06);
  --gradient: linear-gradient(135deg, #34a8e2 0%, #1c6fa0 100%);
}

/* .disclaimer-box usa #f3cd6c (dorado claro) porque nació pensado para el
   fondo oscuro original del portal -- sobre el fondo casi blanco del modo
   claro (prioritario, ver theme-init.js) ese mismo texto casi no se lee.
   Aquí se le da un ámbar oscuro con contraste real. */
[data-theme="light"] .disclaimer-box { color: #8a5c0b; }

[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccd6e4; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* Login: el panel de la izquierda conserva su foto + overlay oscuro a
   propósito (acento de marca); los campos del formulario sí cambian. */
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .field select option { background-color: #ffffff; color: var(--text-main); }

/* Sidebar */
[data-theme="light"] .sidebar { box-shadow: 4px 0 24px rgba(15, 23, 42, 0.05); }
[data-theme="light"] .sidebar-brand img { filter: none; }
[data-theme="light"] .sidebar-nav a.nav-item:hover { background: rgba(15, 23, 42, 0.045); }
/* Sin esto, pasar el mouse sobre el item ya activo (misma página en la
   que estás) le gana por especificidad al fondo azul de .active y deja
   el texto blanco casi invisible sobre un fondo casi blanco. */
[data-theme="light"] .sidebar-nav a.nav-item.active:hover { background: var(--gradient); color: #fff; }

/* Header + fondo del área principal (se retira la foto de fondo: en modo
   claro una superficie lisa se ve más profesional que la textura oscura) */
[data-theme="light"] .portal-header {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .icon-btn { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .main-col.client-bg,
[data-theme="light"] .main-col.admin-bg { background: var(--dark); }

/* Tarjetas y superficies: sombra suave en vez de translucidez sobre fondo oscuro */
[data-theme="light"] .card,
[data-theme="light"] .table-wrap,
[data-theme="light"] .module-card,
[data-theme="light"] .yt-module-card,
[data-theme="light"] .quiz-question,
[data-theme="light"] .pmodal,
[data-theme="light"] .notif-dropdown,
[data-theme="light"] .toast,
[data-theme="light"] .welcome-banner,
[data-theme="light"] .training-progress-summary,
[data-theme="light"] .video-frame {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .card-glass { background: rgba(15, 23, 42, 0.025); }
[data-theme="light"] .welcome-banner {
  background: linear-gradient(120deg, rgba(52, 168, 226, 0.12), rgba(255, 255, 255, 0.5)), var(--dark-card);
}
[data-theme="light"] .autodesk-card {
  background: linear-gradient(120deg, rgba(52, 168, 226, 0.1), rgba(255, 255, 255, 0.6)), var(--dark-card);
}

/* Pequeños "washes" translúcidos pensados para fondo oscuro → versión clara */
[data-theme="light"] .notif-dropdown-foot:hover { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .progress-track { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .activation-list li { background: rgba(15, 23, 42, 0.025); }
[data-theme="light"] .activation-list .step-icon.pending { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .badge-muted { background: rgba(15, 23, 42, 0.07); }
[data-theme="light"] .btn-ghost { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] table.data-table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
[data-theme="light"] .pmodal-close { background: rgba(15, 23, 42, 0.05); color: var(--text-muted); }
[data-theme="light"] .pmodal-close:hover { background: rgba(15, 23, 42, 0.1); color: var(--text-main); }
[data-theme="light"] .mod-num.locked { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .calendar-mock .cal-day { background: rgba(15, 23, 42, 0.035); }
[data-theme="light"] .calendar-mock .cal-day.selected { background: var(--gradient); color: #fff; }
[data-theme="light"] .onboarding-detail-grid div { background: rgba(15, 23, 42, 0.035); }
[data-theme="light"] .connection-status.off { background: rgba(15, 23, 42, 0.045); }

/* Asistente IA: subida de PDF, tarjetas de proyecto y niveles de precio */
[data-theme="light"] .dropzone { background: rgba(15, 23, 42, 0.015); }
[data-theme="light"] .dropzone.dragover { background: rgba(52, 168, 226, 0.06); }
[data-theme="light"] .tier-option { background: rgba(15, 23, 42, 0.015); }
[data-theme="light"] .tier-option.selected { background: rgba(52, 168, 226, 0.06); }
[data-theme="light"] #logoPlaceholder { background: rgba(15, 23, 42, 0.04) !important; }
[data-theme="light"] .tool-nav-item { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); }
[data-theme="light"] .simple-step-icon { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .voice-guide-toggle { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .voice-guide-toggle.active { background: rgba(52, 168, 226, 0.12); }
[data-theme="light"] .voice-guide-lang button { background: rgba(15, 23, 42, 0.03); }

/* =========================================================================
   TOUR GUIADO (driver.js, cargado por CDN en portal.js/startClientTour)
   -- tarjetas azules 3D con el degradado de marca en vez del popover
   blanco/plano por defecto de la librería. driver.css se inyecta en el
   <head> DESPUÉS de este archivo, así que todo aquí lleva !important para
   ganarle sin depender del orden de carga.
   ========================================================================= */
/* El recorrido nunca traba la página: driver.css desactiva los clics en
   todo (".driver-active *") menos la tarjeta. Aquí se devuelven, y la capa
   oscura deja pasar los toques; portal.js cierra el recorrido con
   cualquier toque fuera de la tarjeta. */
body.driver-active *, html.driver-active * { pointer-events: auto !important; }
.driver-overlay, .driver-overlay * { pointer-events: none !important; }
body.driver-active .driver-popover .driver-popover-btn-disabled { pointer-events: none !important; }

.driver-popover {
  background: linear-gradient(150deg, #4dbdf0 0%, #2f93cc 45%, #145a86 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px !important;
  padding: 22px 22px 18px !important;
  min-width: 280px !important;
  max-width: 340px !important;
  box-shadow:
    0 24px 48px rgba(10, 40, 60, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.25) inset,
    0 -22px 40px rgba(0, 0, 0, 0.12) inset !important;
  position: relative;
  overflow: hidden;
}
.driver-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 15% -10%, rgba(255, 255, 255, 0.32), transparent 60%);
  pointer-events: none;
}
.driver-popover-title {
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  position: relative;
  z-index: 1;
}
.driver-popover-description {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-top: 8px !important;
  position: relative;
  z-index: 1;
}
.driver-popover-close-btn {
  top: 12px !important;
  right: 12px !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.driver-popover-close-btn:hover, .driver-popover-close-btn:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18);
}
.driver-popover-footer {
  margin-top: 18px !important;
  position: relative;
  z-index: 1;
}
.driver-popover-progress-text {
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.driver-popover-footer button {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
}
.driver-popover-navigation-btns button + button { margin-left: 10px !important; }
.driver-popover-footer button:active { transform: translateY(1px); }
.driver-popover-prev-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.driver-popover-prev-btn:hover, .driver-popover-prev-btn:focus {
  background: rgba(255, 255, 255, 0.22) !important;
}
.driver-popover-next-btn {
  background: #fff !important;
  color: #1c6fa0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}
.driver-popover-next-btn:hover, .driver-popover-next-btn:focus {
  background: #f0f8ff !important;
  transform: translateY(-1px);
}
.driver-popover-footer .driver-popover-btn-disabled { opacity: 0.35 !important; }
.driver-popover-arrow { border-color: #2f93cc !important; }
.driver-popover-arrow-side-left { border-right-color: transparent !important; border-bottom-color: transparent !important; border-top-color: transparent !important; }
.driver-popover-arrow-side-right { border-left-color: transparent !important; border-bottom-color: transparent !important; border-top-color: transparent !important; }
.driver-popover-arrow-side-top { border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }
.driver-popover-arrow-side-bottom { border-left-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; }

/* =========================================================================
   VENTANA DE BIENVENIDA (assets/welcome.js): video arriba, configuración
   de la cuenta abajo, bloqueada hasta que termina el video.
   ========================================================================= */
.pmodal-overlay.welcome-overlay { z-index: 4000; }
.welcome-modal { max-width: 860px; }
.welcome-modal .pmodal-head h3 { margin-top: 4px; }
.welcome-modal .pmodal-close:disabled { opacity: 0.35; cursor: not-allowed; }
.welcome-media {
  border-radius: var(--radius-lg); overflow: hidden; background: black;
  border: 1px solid var(--border); aspect-ratio: 16 / 9;
}
.welcome-media img, .welcome-media video { width: 100%; height: 100%; display: block; object-fit: cover; background: black; }
.welcome-media video { object-fit: contain; }
.welcome-progress { margin-top: 12px; }
.welcome-progress .progress-fill { transition: width 0.25s linear; }
.welcome-progress .field-hint { margin-top: 8px; }

.welcome-setup {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-soft);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.welcome-setup.is-locked { opacity: 0.45; filter: grayscale(0.6); }
.welcome-setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.welcome-setup-head h4 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 4px; }
.welcome-setup-head p { font-size: 0.85rem; }
.welcome-lock-badge { flex-shrink: 0; }
.welcome-setup:not(.is-locked) .welcome-lock-badge { display: none; }
.welcome-setup fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.welcome-lang { display: flex; gap: 8px; }
.welcome-lang .btn.active { border-color: var(--primary); color: var(--primary); background: rgba(52,168,226,0.1); }
.welcome-logo-box {
  width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: contain;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
}
.welcome-logo-box.is-empty { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--text-dim); }
.disclaimer-box.welcome-agent-notice, [data-theme="light"] .disclaimer-box.welcome-agent-notice { background: rgba(52,168,226,0.06); border-color: rgba(52,168,226,0.25); color: var(--text-muted); }
.welcome-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

[data-theme="light"] .welcome-logo-box { background: rgba(15,23,42,0.03); }

@media (max-width: 640px) {
  .welcome-setup-head { flex-direction: column; }
  .welcome-actions .btn { flex: 1; justify-content: center; }
}

/* =========================================================================
   SITIO WEB SIMPLIFICADO (Inicio y Estimar): pocas opciones, letra grande
   y tarjetas amplias, pensado para contratistas que no manejan mucha
   tecnología. Solo aplica fuera de la app (body sin .app-mode).
   ========================================================================= */
body:not(.app-mode) .sidebar-nav a.nav-item { font-size: 1rem; padding: 14px 16px; gap: 14px; margin-bottom: 6px; }
body:not(.app-mode) .sidebar-nav a.nav-item i { width: 22px; font-size: 1.1rem; }

.home-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.home-head h2 { font-family: var(--font-head); font-size: 2rem; line-height: 1.2; }
.home-head .lead { font-size: 1.1rem; color: var(--text-muted); margin-top: 4px; }
.simple-header h2 { font-size: 2rem; }
.simple-header .lead { font-size: 1.1rem; }

/* Semáforo: tres luces; la encendida lleva un degradado sólido y brillo. */
.semaforo {
  display: inline-flex; flex-direction: column; gap: 5px; padding: 7px 6px;
  border-radius: 14px; background: #0d1117; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); flex-shrink: 0;
}
.semaforo i { width: 14px; height: 14px; border-radius: 50%; display: block; opacity: 0.18; }
.semaforo .sl-red { background: linear-gradient(145deg, #ff6b6b 0%, #c92a2a 100%); }
.semaforo .sl-yellow { background: linear-gradient(145deg, #ffd43b 0%, #e8a100 100%); }
.semaforo .sl-green { background: linear-gradient(145deg, #51cf66 0%, #2b8a3e 100%); }
.semaforo-red .sl-red { opacity: 1; box-shadow: 0 0 12px rgba(250,82,82,0.75); }
.semaforo-yellow .sl-yellow { opacity: 1; box-shadow: 0 0 12px rgba(252,196,25,0.75); }
.semaforo-green .sl-green { opacity: 1; box-shadow: 0 0 12px rgba(64,192,87,0.75); }

.status-light-btn {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--dark-card);
  color: var(--text-main); cursor: pointer; text-align: left; font: inherit;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.status-light-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.status-light-btn.status-red:hover { border-color: rgba(250,82,82,0.5); }
.status-light-btn.status-yellow:hover { border-color: rgba(252,196,25,0.5); }
.status-light-btn.status-green:hover { border-color: rgba(64,192,87,0.5); }
.status-light-btn .slb-text { display: flex; flex-direction: column; gap: 2px; }
.status-light-btn .slb-text strong { font-family: var(--font-head); font-size: 1rem; }
.status-light-btn .slb-text span { font-size: 0.9rem; color: var(--text-muted); }
.status-light-btn > .fa-chevron-right { color: var(--text-dim); margin-left: 6px; }

.status-modal-head { display: flex; align-items: center; gap: 16px; }
.status-progress { height: 10px; margin-bottom: 18px; }
.status-progress.status-red .progress-fill { background: linear-gradient(90deg, #ff6b6b, #c92a2a); }
.status-progress.status-yellow .progress-fill { background: linear-gradient(90deg, #ffd43b, #e8a100); }
.status-progress.status-green .progress-fill { background: linear-gradient(90deg, #51cf66, #2b8a3e); }
.status-steps { list-style: none; display: grid; gap: 10px; }
.status-step {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02);
}
.status-step-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.85rem; background: rgba(148,163,184,0.15); color: var(--text-dim);
}
.status-step-done .status-step-icon { background: linear-gradient(145deg, #51cf66, #2b8a3e); color: white; }
.status-step-active .status-step-icon { background: linear-gradient(145deg, #ffd43b, #e8a100); color: #3b2a00; }
.status-step-pending .status-step-icon i { font-size: 0.5rem; }
.status-step-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-step-body strong { font-size: 0.98rem; }
.status-step-body span { font-size: 0.88rem; color: var(--text-muted); }

/* Tarjetas grandes (Inicio y Estimar). */
.big-tiles { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.big-tiles.big-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.big-tiles.big-tiles-1 { grid-template-columns: minmax(0, 420px); }
.big-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 28px;
  min-height: 220px; border-radius: var(--radius-xl); border: 1px solid var(--border);
  background: var(--dark-card); color: var(--text-main); text-decoration: none; overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.big-tile::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient);
  opacity: 0; transition: opacity 0.2s;
}
.big-tile:hover { transform: translateY(-4px); border-color: rgba(52,168,226,0.45); box-shadow: 0 20px 44px rgba(0,0,0,0.28); }
.big-tile:hover::after { opacity: 1; }
.big-tile-icon {
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: var(--gradient); color: white; font-size: 1.6rem; margin-bottom: 10px;
  box-shadow: 0 10px 24px var(--primary-glow);
}
.big-tile-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; }
.big-tile-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.45; }
.big-tile-go { margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.big-tile-progress { margin-top: auto; }
.big-tile-progress .progress-fill { display: block; height: 100%; }

[data-theme="light"] .status-step { background: rgba(15,23,42,0.02); }
[data-theme="light"] .big-tile:hover, [data-theme="light"] .status-light-btn:hover { box-shadow: 0 16px 36px rgba(15,23,42,0.12); }

@media (max-width: 900px) {
  .big-tiles, .big-tiles.big-tiles-2 { grid-template-columns: minmax(0, 1fr); }
  .big-tile { min-height: 0; }
  .home-head h2 { font-size: 1.6rem; }
  .status-light-btn { width: 100%; }
}