/*
 * SysTasks — Identidad visual Sysprovider
 * Enfoque sobrio: mesh Sysprovider en fondo, paneles claros, acento azul Sysprovider
 */

/* ═══════════════════════════════════════════════ VARIABLES ══ */
:root {
  --sys-blue:    #1111BB;
  --sys-blue-2:  #2828d8;
  --sys-violet:  #7473fd;
  --sys-grad:    linear-gradient(90deg, #1111BB 0%, #7473fd 100%);

  /* Fondo app */
  --bg-app:      #0a0a1f;
  --bg-app-2:    #11112e;

  /* Sidebar */
  --bg-side:     #14142e;
  --bg-side-hov: #1d1d40;
  --bg-side-act: #2a2a5a;

  /* Superficies claras */
  --s-main:      #f6f7fb;
  --s-card:      #ffffff;
  --s-card-soft: #fafbff;

  /* Bordes */
  --b-light:     #e1e4ee;
  --b-mid:       #c8ccdc;
  --b-dark:      rgba(255, 255, 255, 0.08);

  /* Texto */
  --t-dark:      #1a1d2e;
  --t-mid:       #5a5e75;
  --t-light:     #ffffff;
  --t-side:      #c5c8e0;
  --t-side-soft: #8e92b0;

  /* Mesh Sysprovider (misma URL que /branding/) */
  --sys-mesh: url("/branding/sysprovider-mesh-1920x1080-1.png");
}

/* ═══════════════════════════════════════════════ FONDO GLOBAL ══ */
html {
  min-height: 100%;
  background-color: var(--bg-app);
  /* Capa superior = velado para legibilidad; debajo = foto mesh Sysprovider */
  background-image:
    linear-gradient(180deg, rgba(8, 10, 28, 0.55) 0%, rgba(8, 12, 32, 0.48) 50%, rgba(8, 10, 28, 0.58) 100%),
    url("/branding/sysprovider-mesh-1920x1080-1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
/* Brillo sutil encima del mesh (no sustituye la foto) */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(17, 17, 187, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(116, 115, 253, 0.10) 0%, transparent 42%);
  pointer-events: none;
  z-index: 0;
}

body[tg-main], body { background: transparent !important; }
.wrapper             { background: transparent !important; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════ NAVBAR ══ */
.navbar {
  position: relative;
  z-index: 300;
  background: var(--bg-side) !important;
  border-bottom: 1px solid rgba(116, 115, 253, 0.15);
  height: 52px !important;
}

/* z-index dropdowns */
.navbar .topnav-dropdown-wrapper { position: relative; z-index: 310; }
.navbar .navbar-dropdown          { z-index: 320 !important; }

/* ── Logo ── */
.navbar .nav-left a.logo {
  display: inline-flex !important;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 1rem !important;
  margin-right: 0.5rem;
}
.navbar .nav-left a.logo svg { display: none !important; }
.navbar .nav-left a.logo::after {
  content: "";
  display: block;
  width: 110px;
  height: 26px;
  pointer-events: none;
  background: url("/branding/sysprovider-logo.svg") no-repeat left center / contain;
  filter: brightness(1.6);
}

/* ── Botón Proyectos (pill discreto, no gradient agresivo) ── */
[tg-dropdown-project-list] > a,
.dropdown-project-list > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--t-light) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.9rem !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  transition: background 0.15s, border-color 0.15s;
}
[tg-dropdown-project-list] > a:hover,
.dropdown-project-list > a:hover,
[tg-dropdown-project-list].active > a,
.dropdown-project-list.active > a {
  background: rgba(116, 115, 253, 0.22) !important;
  border-color: rgba(116, 115, 253, 0.45) !important;
}

/* ── Dropdown contenido ── */
.navbar .navbar-dropdown {
  background: #1a1a3a !important;
  border: 1px solid rgba(116, 115, 253, 0.20) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  padding: 0.5rem !important;
}
.navbar .navbar-dropdown a {
  color: var(--t-side) !important;
  background: transparent !important;
  border-radius: 4px !important;
  padding: 0.55rem 0.7rem !important;
}
.navbar .navbar-dropdown a:hover,
.navbar .navbar-dropdown .dropdown-project-list-link:hover,
.navbar .navbar-dropdown .dropdown-project-list-link.active {
  background: rgba(116, 115, 253, 0.18) !important;
  color: #ffffff !important;
}
/* Quitar la flechita verde original */
.navbar .navbar-dropdown:before,
.navbar .navbar-dropdown:after,
.dropdown-project-list .navbar-dropdown:before,
.dropdown-project-list .navbar-dropdown:after {
  border-bottom-color: #1a1a3a !important;
}

/* ── Iconos derecha ── */
.navbar .nav-right svg                                    { fill: #9aa0c8 !important; }
.navbar .nav-right .active svg,
.navbar .nav-right > .topnav-dropdown-wrapper:hover > a svg,
.navbar .nav-right > a:hover svg                          { fill: #ffffff !important; }
.navbar .nav-right [tg-dropdown-notifications] svg        { fill: var(--sys-violet) !important; }
.navbar [tg-dropdown-user]:hover .chevron svg             { fill: #ffffff !important; }

/* ═══════════════════════════════════════════════ SIDEBAR HOME ══ */
.menu-secondary {
  background: var(--bg-side) !important;
  border-right: 1px solid rgba(116, 115, 253, 0.10);
}
.menu-secondary li         { background: transparent !important; }
.menu-secondary li a       { color: var(--t-side) !important; }
.menu-secondary li:hover,
.menu-secondary li:hover a { background: var(--bg-side-hov) !important; color: #fff !important; }
.menu-secondary li.active  { background: var(--bg-side-act) !important; }
.menu-secondary li.active a { color: #fff !important; }
.menu-secondary .settings-nav { background: rgba(0, 0, 0, 0.20) !important; }

/* ═══════════════════════════════════════════════ SIDEBAR PROYECTO (tg-project-menu) ══ */
tg-project-menu {
  background-color: var(--bg-side) !important;
  border-right: 1px solid rgba(116, 115, 253, 0.10);
}

/* Cabecera (nombre del proyecto + icono) */
tg-project-menu .project-name,
tg-project-menu .project-list-link {
  color: var(--t-light) !important;
  background: transparent !important;
}
tg-project-menu .project-name:hover,
tg-project-menu .project-list-link:hover {
  background: var(--bg-side-hov) !important;
}

/* Items del menú (Kanban, Backlog, Issues, etc.) */
tg-project-menu li,
tg-project-menu .menu-item {
  background: transparent !important;
}
tg-project-menu li a,
tg-project-menu .menu-item a {
  color: var(--t-side) !important;
}
tg-project-menu li:hover,
tg-project-menu li:hover a,
tg-project-menu .menu-item:hover,
tg-project-menu .menu-item:hover a {
  background: var(--bg-side-hov) !important;
  color: #ffffff !important;
}

/* Item activo */
tg-project-menu li.active,
tg-project-menu .menu-item.active,
tg-project-menu li.selected,
tg-project-menu .menu-item.selected {
  background: var(--bg-side-act) !important;
  border-left: 3px solid var(--sys-violet) !important;
}
tg-project-menu li.active a,
tg-project-menu .menu-item.active a,
tg-project-menu li.selected a,
tg-project-menu .menu-item.selected a {
  color: #ffffff !important;
  background: transparent !important;
}

/* Iconos */
tg-project-menu svg,
tg-project-menu .icon { fill: var(--t-side) !important; }
tg-project-menu li:hover svg,
tg-project-menu li.active svg,
tg-project-menu .menu-item:hover svg,
tg-project-menu .menu-item.active svg { fill: #ffffff !important; }

/* Footer (Buscar, Equipo, Configuraciones, colapsar menú) */
tg-project-menu .menu-collapse,
tg-project-menu .collapse-menu,
tg-project-menu .sub-menu,
tg-project-menu footer {
  background: rgba(0, 0, 0, 0.20) !important;
  border-top: 1px solid rgba(116, 115, 253, 0.10) !important;
  color: var(--t-side-soft) !important;
}
tg-project-menu .menu-collapse a,
tg-project-menu .collapse-menu a { color: var(--t-side-soft) !important; }
tg-project-menu .menu-collapse a:hover,
tg-project-menu .collapse-menu a:hover { color: #ffffff !important; }

/* Separadores internos */
tg-project-menu hr,
tg-project-menu .menu-separator {
  border-color: rgba(116, 115, 253, 0.12) !important;
  background: rgba(116, 115, 253, 0.12) !important;
}

/* Cabecera del proyecto: fondo destacado sutil */
tg-project-menu .project-list-link,
tg-project-menu .project-header,
tg-project-menu > nav > a:first-child {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(116, 115, 253, 0.15) !important;
}
tg-project-menu .project-list-link:hover,
tg-project-menu .project-header:hover {
  background: rgba(116, 115, 253, 0.12) !important;
}

/* Mantener compatibilidad con .menu-tertiary (otras vistas: admin, etc.) */
.menu-tertiary {
  background: var(--bg-side) !important;
  border-right: 1px solid rgba(116, 115, 253, 0.10) !important;
}
.menu-tertiary ul li a              { color: var(--t-side) !important; }
.menu-tertiary ul li:hover,
.menu-tertiary ul li:hover a        { background: var(--bg-side-hov) !important; color: #fff !important; }
.menu-tertiary ul li.active         { background: var(--bg-side-act) !important; border-left: 3px solid var(--sys-violet) !important; }
.menu-tertiary ul li.active a       { background: transparent !important; color: #fff !important; }
.menu-tertiary ul li.active a:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════ ZONA PRINCIPAL ══ */
/*
 * No usar backdrop-filter aquí: en muchos navegadores el “cristal” no toma el
 * fondo del <html> y queda un gris plano (parece que no hay foto).
 * El mesh va como segunda capa bajo un velado claro (orden CSS = arriba primero).
 */
.main {
  color: var(--t-dark);
  background-color: var(--s-main) !important;
  background-image:
    linear-gradient(180deg, rgba(246, 247, 251, 0.74) 0%, rgba(236, 240, 250, 0.70) 100%),
    var(--sys-mesh) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover, cover !important;
  /* scroll: evita bugs con antepasados transform (fixed se “rompe” y deja color plano) */
  background-attachment: scroll, scroll !important;
}

/* Misma sección = .main (Taiga: class="main kanban"); refuerzo por si algún tema pisa .main */
.main.kanban,
.main.taskboard {
  background-color: var(--s-main) !important;
  background-image:
    linear-gradient(180deg, rgba(246, 247, 251, 0.74) 0%, rgba(236, 240, 250, 0.70) 100%),
    var(--sys-mesh) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover, cover !important;
  background-attachment: scroll, scroll !important;
}
.main h1 { color: var(--sys-blue) !important; }
.main h2,
.main h3 { color: var(--t-dark) !important; }

/* ═══════════════════════════════════════════════ DASHBOARD ══ */
.working-on, .watching, .watching-container {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light);
  border-radius: 8px;
  padding: 0.5rem 0.85rem 1rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.working-on p, .watching p, .watching-container p,
.create-project > p, .main .watching-empty { color: var(--t-mid) !important; }

.title-bar {
  background: var(--s-card-soft) !important;
  color: var(--t-dark) !important;
  border: 1px solid var(--b-light);
  border-radius: 6px;
  font-weight: 600;
}
.title-bar a, .title-bar .title { color: var(--sys-blue) !important; }

.home-project, .featured-project {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-project:hover, .featured-project:hover {
  border-color: var(--sys-violet) !important;
  box-shadow: 0 4px 16px rgba(17, 17, 187, 0.10);
  transform: translateY(-1px);
}

.highlighted-project {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 8px;
}
.list-itemtype-project {
  background: var(--s-card) !important;
  border-bottom: 1px solid var(--b-light) !important;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.list-itemtype-project:hover { background: var(--s-card-soft) !important; }

/* ═══════════════════════════════════════════════ KANBAN ══ */
.kanban {
  /* No forzar transparent: choca con .main en el mismo nodo (ver .main.kanban) */
  padding: 1.5rem 1rem 1rem !important;
}
.kanban-table-body { background: transparent !important; }

/* Header del tablero */
.kanban-header {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light);
  border-radius: 8px;
  padding: 0.6rem 1rem !important;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Cabecera columna */
.task-colum-name {
  background: var(--bg-side) !important;
  color: #ffffff !important;
  border-bottom: 3px solid var(--sys-violet) !important;
  border-radius: 6px 6px 0 0 !important;
}
.task-colum-name .title .name { color: #ffffff !important; }
.task-colum-name svg { fill: #c5c8e0 !important; }

/* Cuerpo columna — tablas en blanco */
.taskboard-column {
  background: #ffffff !important;
  border: 1px solid var(--b-light) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Swimlane / cajas */
.kanban-swimlane-title {
  background: var(--s-card) !important;
  border-bottom: 1px solid var(--b-light) !important;
}
.kanban-uses-box {
  background: #ffffff !important;
  border: 1px solid var(--b-light);
  border-radius: 6px;
}

/* Cards */
.card {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: border-color 0.13s, box-shadow 0.13s, transform 0.13s !important;
}
.card:hover {
  border-color: var(--sys-violet) !important;
  box-shadow: 0 4px 14px rgba(17, 17, 187, 0.12) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════ VISTA PROYECTO ══ */
.single-project .project-data {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.single-project .title {
  background: var(--s-card-soft) !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 6px;
}
.single-project .title h1,
.single-project .title .project-name { color: var(--sys-blue) !important; }

.profile-timeline {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px;
  padding: 0.4rem 0.75rem 1rem !important;
}
.profile-timeline .activity-item            { border-bottom: 1px solid var(--b-light) !important; }
.profile-timeline .activity-item:last-child { border-bottom: none !important; }
.main .profile-timeline .activity-item .activity-info,
.main .profile-timeline .activity-item .activity-date,
.main .profile-timeline .activity-member-view p { color: var(--t-mid) !important; }
.main .profile-timeline .activity-item a,
.main .profile-timeline .activity-item .username:first-child { color: var(--sys-blue) !important; }
.main .profile-timeline .activity-item a:hover { color: var(--sys-violet) !important; }
.main .activity-creator { color: #0a8a6f !important; }

.single-attachment {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 6px !important;
}
.single-attachment .attachment-name a,
.single-attachment .attachment-size,
.single-attachment span                 { color: var(--t-mid) !important; }
.single-attachment .icon,
.single-attachment .attachment-name svg { fill: var(--t-mid) !important; }

.single-project .involved-data {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem !important;
  align-self: flex-start;
}
.single-project .involved-data .team-header,
.single-project .team-header {
  background: var(--s-card-soft) !important;
  padding: 0.5rem !important;
  margin: 0 0 0.6rem !important;
  border-radius: 6px;
  border: 1px solid var(--b-light);
}
.single-project .looking-for-people {
  background: var(--s-card-soft) !important;
  border-radius: 6px;
  padding: 0.85rem !important;
  border: 1px solid var(--b-light);
}
.single-project .looking-for-people p { color: var(--t-mid) !important; }

/* ═══════════════════════════════════════════════ CREAR PROYECTO ══ */
.create-project {
  background: var(--s-card) !important;
  border: 1px solid var(--b-light);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  padding: 2rem 2.5rem !important;
  margin-top: 2rem !important;
}
.create-project-title       { color: var(--sys-blue) !important; }
.create-project-description { color: var(--t-mid) !important; }
.create-project-selector a {
  color: var(--t-dark) !important;
  border-bottom: 1px solid var(--b-light) !important;
}
.create-project-selector li:first-child { border-top: 1px solid var(--b-light) !important; }
.create-project-selector li:hover       { background: rgba(17, 17, 187, 0.05) !important; }
.create-project-selector-template       { color: var(--t-dark) !important; }
.create-project-selector-description    { color: var(--t-mid) !important; }
.create-project-selector-icon .icon,
.create-project-selector-icon svg       { fill: var(--sys-blue) !important; }
.create-project-selector-question svg   { fill: var(--t-mid) !important; }
.create-project-selector-question:hover svg { fill: var(--sys-violet) !important; }

/* ═══════════════════════════════════════════════ LOGIN / REGISTRO / INVITACIÓN ══ */
/* Selectores largos: el theme (.auth .logo, etc.) carga antes; reforzamos especificidad */
body[tg-main] .master .wrapper .auth,
body .master .wrapper .auth,
body .wrapper .auth,
.auth {
  align-items: center !important;
  justify-content: center !important;
  background-color: #0a0a1f !important;
  background-image:
    linear-gradient(180deg, rgba(8, 10, 28, 0.82) 0%, rgba(8, 12, 32, 0.75) 50%, rgba(8, 10, 28, 0.85) 100%),
    var(--sys-mesh) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body[tg-main] .master .wrapper .auth-container,
body .master .wrapper .auth-container,
body .wrapper .auth-container,
.auth-container {
  flex-basis: 30rem !important;
  max-width: 94vw !important;
  padding: 2.75rem 2.5rem 2.85rem !important;
  margin: 1.25rem !important;
  background: rgba(246, 247, 251, 0.97) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter:         blur(14px);
  border: 1px solid var(--b-light) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(116, 115, 253, 0.12) !important;
}

/* Logo Taiga (SVG inline) → marca Sysprovider */
body .wrapper .auth .logo-svg,
.auth .logo-svg {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body .wrapper .auth h1.logo,
.auth h1.logo {
  position: relative;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 0 0.5rem !important;
  min-height: 2.5rem;
  text-align: center !important;
}

body .wrapper .auth h1.logo::before,
.auth h1.logo::before {
  content: "";
  display: block;
  width: 168px;
  height: 40px;
  margin: 0 auto 1.15rem;
  background: url("/branding/sysprovider-logo.svg") no-repeat center / contain;
}

body .wrapper .auth h1.logo::after,
.auth h1.logo::after {
  content: "SysTasks";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--sys-blue) !important;
  letter-spacing: -0.02em;
}

/* Sustituye “AMA TU PROYECTO” / tagline Taiga */
body .wrapper .auth .tagline,
.auth .tagline {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 0 1.75rem !important;
  min-height: 0;
  text-transform: none !important;
}

body .wrapper .auth .tagline::after,
.auth .tagline::after {
  content: "El gestor de tareas y proyectos para clientes de Sysprovider";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--t-mid) !important;
  max-width: 24rem;
  margin: 0 auto;
  padding: 0 0.25rem;
  text-transform: none !important;
}

body .wrapper .auth .login-form-container,
body .wrapper .auth .login-form,
.login-form-container,
.login-form {
  background: transparent !important;
  padding-top: 0.5rem !important;
}

body .wrapper .auth .login-form,
.auth .login-form {
  border-right: 0 !important;
  padding: 0.85rem 0.35rem 1.1rem !important;
}

body .wrapper .auth .login-form fieldset,
.auth .login-form fieldset {
  margin-bottom: 0.95rem !important;
  text-align: left;
}

body .wrapper .auth .login-form input[type="text"],
body .wrapper .auth .login-form input[type="password"],
.auth .login-form input[type="text"],
.auth .login-form input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--b-light) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--t-dark) !important;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
}

body .wrapper .auth .login-form input[type="text"]:focus,
body .wrapper .auth .login-form input[type="password"]:focus,
.auth .login-form input[type="text"]:focus,
.auth .login-form input[type="password"]:focus {
  outline: none !important;
  border-color: var(--sys-violet) !important;
  box-shadow: 0 0 0 3px rgba(116, 115, 253, 0.18) !important;
}

body .wrapper .auth .login-form-container .forgot-pass,
body .wrapper .auth .login-form-container a.forgot-pass,
.auth .login-form-container .forgot-pass,
.auth .login-form-container a.forgot-pass {
  color: var(--sys-blue) !important;
  font-weight: 500 !important;
}

body .wrapper .auth .login-form-container .forgot-pass:hover,
.auth .login-form-container .forgot-pass:hover {
  color: var(--sys-violet) !important;
}

body .wrapper .auth .login-form fieldset.end,
.auth .login-form fieldset.end {
  justify-content: stretch !important;
  margin-top: 0.85rem !important;
}

body .wrapper .auth .login-form .btn-small.full,
body .wrapper .auth .login-form button[type="submit"].btn-small,
.auth .login-form .btn-small.full,
.auth .login-form button[type="submit"].btn-small {
  width: 100% !important;
  margin: 1rem 0 0 !important;
  padding: 0.95rem 1.1rem !important;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, var(--sys-blue) 0%, var(--sys-violet) 100%) !important;
  color: #ffffff !important;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(17, 17, 187, 0.35) !important;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}

body .wrapper .auth .login-form .btn-small.full:hover,
body .wrapper .auth .login-form button[type="submit"].btn-small:hover,
.auth .login-form .btn-small.full:hover,
.auth .login-form button[type="submit"].btn-small:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body .wrapper .auth .login-text,
body .wrapper .auth .register-text,
.auth .login-text,
.auth .register-text {
  color: var(--t-mid) !important;
}

body .wrapper .auth .login-text a,
body .wrapper .auth .register-text a,
.auth .login-text a,
.auth .register-text a {
  color: var(--sys-blue) !important;
}

body .wrapper .auth .login-text a:hover,
body .wrapper .auth .register-text a:hover,
.auth .login-text a:hover,
.auth .register-text a:hover {
  color: var(--sys-violet) !important;
}

/* ═══════════════════════════════════════════════ INVITADO — DESCUBRIR (solo home) ══ */
/* section.discover = discover-home; no aplica a discover-search (.discover-search) */
section.discover .discover-header {
  background:
    linear-gradient(180deg, rgba(246, 247, 251, 0.92) 0%, rgba(232, 234, 244, 0.95) 100%),
    var(--sys-mesh) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom, center center !important;
  background-size: auto, cover !important;
  border-bottom: 1px solid var(--b-light) !important;
}

section.discover .discover-header .discover-header-inner {
  padding-top: 0.5rem !important;
  padding-bottom: 0.25rem !important;
}

section.discover .discover-header h1.title {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 auto 0.65rem !important;
  max-width: 44rem;
}

section.discover .discover-header h1.title::before {
  content: "SysTasks";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 2.05rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--sys-blue) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

section.discover .discover-header h1.title::after {
  content: "El gestor de tareas y proyectos de Sysprovider. Si ya eres cliente, solicita acceso a tu espacio; si quieres serlo, contáctanos y te mostramos cómo organizar equipos, entregas e incidencias en un entorno dedicado para tu negocio.";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--t-mid) !important;
}

section.discover .discover-header p.project-number {
  display: none !important;
}

section.discover .discover-header .searchbox {
  margin-top: 0.35rem !important;
}

section.discover .highlighted .empty-highlighted-project {
  position: relative !important;
  padding: 1.75rem 1.5rem !important;
  border-color: rgba(17, 17, 187, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

section.discover .highlighted .empty-highlighted-project span {
  display: none !important;
}

section.discover .highlighted tg-most-liked .empty-highlighted-project {
  position: relative !important;
}

section.discover .highlighted tg-most-liked .empty-highlighted-project::after {
  content: "Cuando colabores en proyectos con Sysprovider, marca los que más te interesen como favoritos y los verás resumidos aquí.";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 22rem;
  margin: 0.35rem auto 0;
}

section.discover .highlighted tg-most-active .empty-highlighted-project {
  position: relative !important;
}

section.discover .highlighted tg-most-active .empty-highlighted-project::after {
  content: "La actividad reciente de los proyectos públicos aparecerá aquí. ¿Nuevo en SysTasks? Escríbenos: diseñamos tu espacio y formamos a tu equipo para sacarle partido desde el primer día.";
  display: block;
  font-family: Ubuntu, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 22rem;
  margin: 0.35rem auto 0;
}

section.discover .highlighted .empty-highlighted-project tg-svg {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════ BOTONES ══ */
.btn-big { box-shadow: 0 2px 8px rgba(17, 17, 187, 0.15); }