/* El Blindaje — tema Vikunja idéntico al dashboard
   Paleta dashboard:
     fondo:    linear-gradient(180deg, #0a0a14 0%, #14142b 50%, #1a1a2e 100%)
     glass:    rgba(255,255,255,0.04) + blur(16px) + border rgba(255,255,255,0.08)
     primario: #0ea5e9 (blindaje-500)
     accent:   #e94560 (twothm-accent)
     texto:    #f5f5f7
*/

:root,
.dark {
  /* Color primario blindaje */
  --primary-h: 199deg;
  --primary-s: 89%;
  --primary-l: 48%;
  --primary-a: 1;
  --primary-invert: #ffffff;
  --primary-light-l: 92%;
  --primary-dark-l: 32%;

  --link-h: 199deg;
  --link-s: 89%;
  --link-l: 58%;
  --link-a: 1;

  /* Paleta de grises Vikunja → tonos del dashboard (dark-first) */
  --grey-50-hsl: 240, 30%, 6%;
  --grey-50: hsl(var(--grey-50-hsl));
  --grey-100-hsl: 240, 25%, 9%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: hsl(240, 20%, 12%);
  --grey-300: hsl(240, 15%, 18%);
  --grey-400: hsl(240, 10%, 32%);
  --grey-500-hsl: 217.9, 10.6%, 64.9%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(220, 12%, 80%);
  --grey-700: hsl(220, 14%, 88%);
  --grey-800: hsl(220, 16%, 94%);
  --grey-900-hsl: 0, 0%, 98%;
  --grey-900: hsl(var(--grey-900-hsl));

  --white: #f5f5f7;
  --text: #f5f5f7;
  --text-strong: #ffffff;
  --text-light: #94a3b8;
  --text-invert: #000;

  --site-background: transparent;
  --logo-text-color: #f5f5f7;
}

/* Fondo global del dashboard */
html,
body,
#app {
  background: linear-gradient(180deg, #0a0a14 0%, #14142b 50%, #1a1a2e 100%) !important;
  color: #f5f5f7 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
  min-height: 100vh;
}

/* Sin fondos extraños debajo */
.app-container,
.app-content,
.content,
main,
.main-content {
  background: transparent !important;
}

/* === Header superior (glass strong) === */
.navbar {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.navbar .username,
.navbar .trigger-button,
.navbar a {
  color: #f5f5f7 !important;
}

/* === Logo: oculta el SVG nativo (llama+Vikunja) y muestra escudo + "El Blindaje" === */
.logo,
.logo-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  max-block-size: 48px !important;
  text-decoration: none !important;
  cursor: pointer;
}
.logo svg,
.logo img,
.logo-link svg,
.logo-link img {
  display: none !important;
}
.logo::before,
.logo-link::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("/favicon.svg") center/contain no-repeat;
  flex: 0 0 36px;
}
.logo::after,
.logo-link::after {
  content: "El Blindaje";
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: linear-gradient(135deg, #38bdf8 0%, #e94560 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* En móvil, escondemos el texto y dejamos solo el escudo */
@media screen and (max-width: 768px) {
  .logo::after,
  .logo-link::after {
    display: none;
  }
  .logo::before,
  .logo-link::before {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
}

/* === Menú lateral (glass) === */
.namespace-container,
.menu-container,
aside.menu {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.namespace-title,
.menu-list a,
.menu-list .menu-list-link,
.menu-list span {
  color: #cbd5e1 !important;
}
.menu-list a:hover,
.menu-list .menu-list-link:hover {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #ffffff !important;
}
.menu-list a.router-link-active,
.menu-list .router-link-exact-active {
  background: rgba(14, 165, 233, 0.18) !important;
  border-left: 2px solid #0ea5e9 !important;
  color: #7dd3fc !important;
}
.menu-list .menu-list-link .icon {
  color: inherit !important;
}

/* "Con tecnología de Vikunja" → más sutil */
.poweredby,
.menu-footer,
[class*="poweredBy"],
[class*="poweredby"] {
  opacity: 0.4 !important;
  font-size: 0.7rem !important;
}

/* === Tarjetas / paneles con efecto glass === */
.card,
.panel,
.box,
.dropdown-content,
.modal-card,
.notification {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
}
.card-header,
.card-content,
.panel-heading,
.panel-block {
  background: transparent !important;
  color: #f5f5f7 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Títulos */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  color: #f5f5f7 !important;
}

/* === Botones === */
.button.is-primary,
button.is-primary {
  background-image: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600;
}
.button.is-primary:hover,
button.is-primary:hover {
  background-image: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
}
.button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}
.button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* === Inputs === */
.input,
.textarea,
.select select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}
.input::placeholder,
.textarea::placeholder {
  color: rgba(245, 245, 247, 0.45) !important;
}
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

/* Tablas */
table,
.table {
  background: transparent !important;
  color: #f5f5f7 !important;
}
.table th,
.table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}
.table tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Dropdowns / menús emergentes */
.dropdown-menu .dropdown-content {
  background: rgba(20, 20, 43, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px);
}
.dropdown-item {
  color: #f5f5f7 !important;
}
.dropdown-item:hover {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #ffffff !important;
}

/* Iconos */
.icon,
svg {
  color: inherit;
}

/* Tags / pills */
.tag {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #7dd3fc !important;
}

/* Estado vacío / "No encontrado" → estética dashboard */
.notfound,
.empty,
[class*="notfound"] {
  color: #94a3b8 !important;
}

/* === Página de login: ocultar todo lo de llamas/Vikunja === */

/* Mascota llama "cool" en la esquina */
.llama-cool,
[class*="llama"],
img[src*="llama"],
img[src*="no-auth-image"] {
  display: none !important;
}

/* Imagen lateral del login "Welcome Back!" — la sustituimos por un panel con escudo */
.login,
.login-page,
[class*="login-page"],
.no-auth-wrapper {
  background: transparent !important;
}

/* La columna izquierda con la imagen → escudo + degradado del Blindaje */
.no-auth-wrapper > div:first-child,
.login-wrapper > div:first-child,
.login > div:first-child,
[class*="welcome"],
.welcome,
.welcomeText,
.welcomeBack,
[class*="welcome-back"] {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(233, 69, 96, 0.15) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  position: relative;
}
.no-auth-wrapper > div:first-child::before,
.login-wrapper > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/favicon.svg") center/120px no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

/* Reemplazar el texto "Welcome Back!" si aparece como span/h1 */
[class*="welcome"] h1,
[class*="welcome"] h2,
[class*="hello"] {
  color: #f5f5f7 !important;
}

/* Texto de info "Using Vikunja installation at..." → más sutil */
.message.is-info,
.notification.is-info,
.api-config,
[class*="api-config"] {
  background: rgba(14, 165, 233, 0.08) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* Asegura que la card del formulario de login tenga el aspecto glass */
.box,
.card,
.login-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Labels y textos en el form de login */
label,
.label {
  color: #f5f5f7 !important;
}

/* === RESPONSIVE === */

/* Móvil: ajustes generales */
@media screen and (max-width: 768px) {
  /* Header móvil: padding cómodo, sin que el escudo quede pegado al borde */
  .navbar {
    padding-inline: 0.75rem !important;
    min-height: 56px;
  }

  /* La página de login: una sola columna, sin imagen lateral grande */
  .no-auth-wrapper,
  .login-wrapper,
  .login {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1rem;
  }
  .no-auth-wrapper > div:first-child,
  .login-wrapper > div:first-child,
  .login > div:first-child {
    min-height: 120px;
    max-height: 140px;
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* Cards y formularios ocupan todo el ancho */
  .card,
  .box,
  .panel {
    border-radius: 10px !important;
  }

  /* Tablas: scroll horizontal si no caben */
  table,
  .table-container {
    overflow-x: auto;
    max-width: 100%;
  }

  /* Modales con margen seguro */
  .modal-card,
  .modal .card {
    margin: 0.75rem !important;
    max-width: calc(100vw - 1.5rem);
  }

  /* Reducir tipografía de títulos largos */
  h1, .title {
    font-size: 1.4rem !important;
  }
}

/* Tablet (769-1024px): mantener layout normal con algunos ajustes */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .logo::after,
  .logo-link::after {
    font-size: 1.05rem;
  }
}

/* Asegura que el contenedor de la app no genere scroll horizontal */
html, body, #app {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Reset de prefers-reduced-motion respetado (no forzar animaciones) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}