/* Custom Logo CSS - Logo appears ONLY in header and login form */

/* ============================================
   LOGO IN HEADER - Barra azul superior
   ============================================ */
#header {
  position: static !important;
  min-height: 60px !important;
}

/* Logo en el header usando background-image */
#header > h1 {
    /*position: relative !important;*/
    padding-left: 130px !important;
    min-height: 50px !important;
    background-image: url("/images/logo.png") !important;
    background-size: 100px auto !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    justify-content: center !important;
   /* display: flex !important;*/
    align-items: center !important;
}

/* Separador "/" antes del primer elemento de texto del proyecto */
#header > h1 > .root:first-child::before,
#header > h1 > .ancestor:first-child::before,
#header > h1 > .current-project:first-child::before {
    content: "➚" !important;
    display: inline-block !important;
    margin-right: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.1em !important;
    font-weight: 300 !important;
    vertical-align: middle !important;
}

/* Si el primer elemento es un enlace root, agregar separador */
#header > h1 > a.root:first-child::before {
    content: "/" !important;
    display: inline-block !important;
    margin-right: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.1em !important;
    font-weight: 300 !important;
}

/* Asegurar que los elementos de texto tengan espacio y no se monten sobre el logo */
#header > h1 .root,
#header > h1 .ancestor,
#header > h1 .current-project {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Barra superior (Top Menu) - Mejoras visuales */
#top-menu {
  background: linear-gradient(135deg, rgba(52, 84, 116, 0.95) 0%, rgba(30, 50, 70, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(100, 140, 180, 0.2) !important;
  box-shadow: 0 2px 12px rgba(52, 84, 116, 0.2),
              0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  position: relative !important;
  z-index: 1000 !important;
  backdrop-filter: blur(10px) !important;
}

/* Efecto de brillo sutil en la parte superior */
#top-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(100, 140, 180, 0.4), 
    rgba(100, 140, 180, 0.6),
    rgba(100, 140, 180, 0.4),
    transparent) !important;
}

/* Mejora en los enlaces del top menu */
#top-menu a {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

#top-menu a:hover {
  color: #ffffff !important;
  background: rgba(100, 140, 180, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Texto "Conectado como" */
#top-menu #loggedas {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Ocultar botón "Registrar" sin alterar la estructura del header */
#top-menu a.register,
#top-menu .register,
#top-menu li:has(a.register) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   TARJETA DE BIENVENIDA CENTRADA - PÁGINA DE INICIO
   ============================================ */
.ezertech-welcome-card {
  max-width: 800px !important;
  margin: 30px auto !important;
  padding: 30px 35px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 40px rgba(52, 84, 116, 0.15),
              0 4px 12px rgba(0, 0, 0, 0.08) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(100, 140, 180, 0.1) !important;
}

/* Efecto de brillo sutil en la parte superior de la tarjeta */
.ezertech-welcome-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, 
    #648cb4, 
    #345474, 
    #648cb4) !important;
}

/* Icono de bienvenida */
.ezertech-welcome-icon {
  width: 70px !important;
  height: 70px !important;
  margin: 0 auto 18px !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(100, 140, 180, 0.3) !important;
  animation: pulse-icon 2s ease-in-out infinite !important;
}

@keyframes pulse-icon {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 8px 24px rgba(100, 140, 180, 0.3) !important;
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 12px 32px rgba(100, 140, 180, 0.4) !important;
  }
}

/* Título de bienvenida */
.ezertech-welcome-title {
  font-size: 2em !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Subtítulo */
.ezertech-welcome-subtitle {
  font-size: 1em !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 18px !important;
}

/* Contenido de bienvenida */
.ezertech-welcome-content {
  margin: 18px 0 !important;
  text-align: left !important;
}

.ezertech-welcome-content p {
  font-size: 0.95em !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

/* Características destacadas */
.ezertech-welcome-features {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 15px !important;
  margin-top: 25px !important;
  padding-top: 25px !important;
  border-top: 2px solid rgba(100, 140, 180, 0.1) !important;
}

.ezertech-welcome-features .ezertech-feature-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 12px !important;
  background: rgba(100, 140, 180, 0.05) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.ezertech-welcome-features .ezertech-feature-item:hover {
  background: rgba(100, 140, 180, 0.1) !important;
  transform: translateY(-3px) !important;
}

.ezertech-welcome-features .ezertech-feature-item i {
  font-size: 26px !important;
  color: #648cb4 !important;
}

.ezertech-welcome-features .ezertech-feature-item span {
  font-size: 0.85em !important;
  color: #475569 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Responsive para tarjeta de bienvenida */
@media (max-width: 768px) {
  .ezertech-welcome-card {
    margin: 40px 20px !important;
    padding: 40px 30px !important;
    border-radius: 16px !important;
  }
  
  .ezertech-welcome-icon {
    width: 80px !important;
    height: 80px !important;
    font-size: 35px !important;
  }
  
  .ezertech-welcome-title {
    font-size: 2em !important;
  }
  
  .ezertech-welcome-subtitle {
    font-size: 1.1em !important;
  }
  
  .ezertech-welcome-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }
}

/* ============================================
   MEJORAS VISUALES PARA PÁGINA DE ADMINISTRACIÓN
   ============================================ */
body.controller-admin #content,
body.controller-admin.action-index #content {
  padding: 30px 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Mejora del menú de administración */
#admin-menu {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 4px 16px rgba(52, 84, 116, 0.1) !important;
  border: 1px solid rgba(100, 140, 180, 0.15) !important;
  margin-bottom: 30px !important;
}

#admin-menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#admin-menu li {
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(100, 140, 180, 0.15) !important;
  position: relative !important;
}

#admin-menu li:last-child {
  border-bottom: none !important;
}

#admin-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  color: #475569 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  position: relative !important;
}

/* Flecha al final de cada opción */
#admin-menu a::after {
  content: "➜" !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: rgba(100, 140, 180, 0.5) !important;
  transition: all 0.3s ease !important;
  margin-left: auto !important;
  opacity: 0.6 !important;
  line-height: 1 !important;
}

#admin-menu a:hover {
  background: rgba(100, 140, 180, 0.08) !important;
  color: #345474 !important;
  border-left-color: #648cb4 !important;
  transform: translateX(3px) !important;
  padding-left: 20px !important;
}

#admin-menu a:hover::after {
  color: #648cb4 !important;
  opacity: 1 !important;
  transform: translateX(3px) !important;
}

#admin-menu a.selected {
  background: linear-gradient(90deg, rgba(100, 140, 180, 0.12), transparent) !important;
  color: #345474 !important;
  border-left-color: #648cb4 !important;
  font-weight: 600 !important;
}

#admin-menu a.selected::after {
  color: #648cb4 !important;
  opacity: 1 !important;
}

/* Mejora de las tablas en administración */
body.controller-admin table.list {
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(100, 140, 180, 0.1) !important;
}

body.controller-admin table.list th {
  background: linear-gradient(135deg, rgba(100, 140, 180, 0.1) 0%, rgba(52, 84, 116, 0.1) 100%) !important;
  color: #345474 !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid rgba(100, 140, 180, 0.2) !important;
}

body.controller-admin table.list td {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(100, 140, 180, 0.08) !important;
}

body.controller-admin table.list tr:hover {
  background: rgba(100, 140, 180, 0.03) !important;
}

/* Mejora de formularios en administración */
body.controller-admin fieldset {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 25px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(100, 140, 180, 0.1) !important;
  margin-bottom: 25px !important;
}

body.controller-admin fieldset legend {
  color: #345474 !important;
  font-weight: 600 !important;
  font-size: 1.2em !important;
  padding: 0 15px !important;
}

/* Mejora de botones en administración */
body.controller-admin input[type="submit"],
body.controller-admin button,
body.controller-admin .button {
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(100, 140, 180, 0.3) !important;
  cursor: pointer !important;
}

body.controller-admin input[type="submit"]:hover,
body.controller-admin button:hover,
body.controller-admin .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(100, 140, 180, 0.4) !important;
}

/* Títulos en administración */
body.controller-admin h2 {
  color: #345474 !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid rgba(100, 140, 180, 0.2) !important;
}

/* ============================================
   LOGO IN LOGIN FORM - Solo en el formulario de login
   ============================================ */
/* Logo SOLO dentro del formulario de login */
#login-form {
  position: relative !important;
}

#login-form::before {
  content: "" !important;
  display: block !important;
  width: 250px !important;
  height: 80px !important;
  margin: 0 auto 30px !important;
  background-image: url("/images/logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 10 !important;
}

/* ============================================
   PERSONALIZACIÓN MODERNA Y TECNOLÓGICA DEL LOGIN
   ============================================ */

/* Fondo moderno para la página de login */
body.action-login,
body.controller-account.action-login {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* Contenedor del formulario - Diseño moderno y tecnológico */
#login-form {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  padding: 50px 45px 45px 45px !important;
  max-width: 420px !important;
  margin: 80px auto !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efecto de brillo sutil en el borde */
#login-form::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(100, 140, 180, 0.5), 
    rgba(52, 84, 116, 0.5), 
    transparent) !important;
  animation: shimmer 3s infinite !important;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hover effect en el formulario */
#login-form:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

/* Logo mejorado con efecto */
#login-form::before {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) !important;
  margin-bottom: 35px !important;
  transition: transform 0.3s ease !important;
}

#login-form:hover::before {
  transform: scale(1.02) !important;
}

/* Campos de entrada modernos y tecnológicos */
#login-form input[type="text"],
#login-form input[type="password"] {
  background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05),
              inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  color: #1e293b !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Placeholder moderno */
#login-form input[type="text"]::placeholder,
#login-form input[type="password"]::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Focus state tecnológico y moderno */
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  outline: none !important;
  border-color: #648cb4 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(100, 140, 180, 0.1),
              0 4px 12px rgba(100, 140, 180, 0.15),
              inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* Labels modernos */
#login-form label {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* Botón moderno y tecnológico */
#login-form input[type="submit"],
#login-form button[type="submit"],
#login-submit {
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 16px 32px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(100, 140, 180, 0.4),
              0 2px 4px rgba(0, 0, 0, 0.1) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  width: 100% !important;
  margin-top: 10px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efecto de brillo en el botón */
#login-form input[type="submit"]::before,
#login-form button[type="submit"]::before,
#login-submit::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent) !important;
  transition: left 0.5s ease !important;
}

#login-form input[type="submit"]:hover::before,
#login-form button[type="submit"]:hover::before,
#login-submit:hover::before {
  left: 100% !important;
}

/* Hover effect en el botón */
#login-form input[type="submit"]:hover,
#login-form button[type="submit"]:hover,
#login-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(100, 140, 180, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
}

/* Active state del botón */
#login-form input[type="submit"]:active,
#login-form button[type="submit"]:active,
#login-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(100, 140, 180, 0.3) !important;
}

/* Link "Olvidaste la contraseña" moderno */
#login-form label > a {
  color: #345474  !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
  float: none !important;
  display: inline-block !important;
  margin-top: 4px !important;
  position: relative !important;
}

#login-form label > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #648cb4, #345474) !important;
  transition: width 0.3s ease !important;
}

#login-form label > a:hover {
  color: #648cb4 !important;
}

#login-form label > a:hover::after {
  width: 100% !important;
}

/* Checkbox moderno */
#login-form input[type="checkbox"] {
  width: auto !important;
  margin-right: 8px !important;
  cursor: pointer !important;
  accent-color: #648cb4 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Tabla del formulario */
#login-form table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

#login-form td {
  padding: 8px 0 !important;
}

/* Animación de entrada suave */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#login-form {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mejorar el contenido general de la página de login */
body.action-login #content,
body.controller-account.action-login #content {
  padding: 20px 0 !important;
}

/* ============================================
   PADDING PARA MENSAJES DE ERROR/FLASH
   ============================================ */
/* Agregar padding a los mensajes flash (error, warning, notice) */
.flash,
#flash_notice,
#flash_warning,
#flash_error,
.error,
.warning,
.notice {
  padding: 15px 20px !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

/* Mensajes flash específicos */
div.flash,
div#flash_notice,
div#flash_warning,
div#flash_error {
  padding: 15px 25px !important;
  margin: 10px 0 !important;
  border-radius: 8px !important;
}

/* Asegurar que los mensajes tengan espacio en los bordes */
body.action-login .flash,
body.controller-account.action-login .flash,
body.action-login #flash_notice,
body.controller-account.action-login #flash_notice,
body.action-login #flash_warning,
body.controller-account.action-login #flash_warning,
body.action-login #flash_error,
body.controller-account.action-login #flash_error {
  margin: 15px 20px !important;
  padding: 15px 25px !important;
  border-radius: 8px !important;
}

/* Mensajes de error en general */
.errorExplanation,
div.errorExplanation {
  padding: 20px 25px !important;
  margin: 15px 20px !important;
  border-radius: 8px !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  #login-form {
    margin: 40px 20px !important;
    padding: 40px 30px 35px 30px !important;
    border-radius: 16px !important;
  }
  
  body.action-login,
  body.controller-account.action-login {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
  }
}

/* ============================================
   OCULTAR LOGOS EN OTRAS UBICACIONES
   ============================================ */
/* Ocultar logo de la esquina superior izquierda */
body::after {
  display: none !important;
  content: none !important;
}

/* Ocultar logos duplicados en la página de login */
body.action-login #content::before,
body.controller-account.action-login #content::before,
body.action-login::before,
body.controller-account.action-login::before {
  display: none !important;
  content: none !important;
}

/* ============================================
   OCULTAR LOGOS POR DEFECTO DE REDMINE
   ============================================ */
#header img[src*="logo"],
#header img[alt*="Logo"],
#header img[alt*="logo"],
.redmine-logo,
.logo,
#logo {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   AJUSTES RESPONSIVOS
   ============================================ */
@media (max-width: 768px) {
  #header > h1 {
    padding-left: 180px !important;
    background-size: 150px auto !important;
  }
  
  #header::before {
    width: 150px !important;
    height: 45px !important;
  }
  
  #login-form::before {
    width: 200px !important;
    height: 64px !important;
  }
}

/* ============================================
   FORZAR VISIBILIDAD
   ============================================ */
#header > h1,
#header::before,
#login-form::before {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   PERSONALIZACIÓN DE LA PÁGINA DE INICIO
   Diseño moderno con tarjetas e iconos
   ============================================ */

/* Inyectar JavaScript directamente usando un script tag inline */
body.controller-welcome.action-index #content::before,
body:not([class*="controller-"]) #content::before,
#content:has(h1:contains("Inicio"))::before,
#content:has(h2:contains("Inicio"))::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Cargar el script JavaScript automáticamente */
body.controller-welcome.action-index #content::after,
body:not([class*="controller-"]) #content::after {
  content: '' !important;
  display: none !important;
}

/* Contenedor principal de la página de inicio */
body.controller-welcome.action-index #content,
body.controller-welcome.action-index .wiki,
#content:has(h1:contains("Inicio")),
#content:has(h2:contains("Inicio")) {
  padding: 15px 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* ============================================
   VISTA PERSONALIZADA PARA USUARIOS LOGUEADOS
   ============================================ */
/* Ocultar contenido personalizado de usuarios no logueados cuando hay usuario logueado */
body.user-logged-in .ezertech-custom-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ocultar contenido original de Redmine cuando hay vista personalizada */
body.user-logged-in .ezertech-logged-in-content ~ h1,
body.user-logged-in .ezertech-logged-in-content ~ h2,
body.user-logged-in .ezertech-logged-in-content ~ p {
  display: none !important;
}

/* Asegurar que NO se muestre contenido personalizado en páginas excluidas */
body.controller-settings .ezertech-logged-in-content,
body.controller-admin .ezertech-logged-in-content,
body.controller-projects.action-show .ezertech-logged-in-content,
body.controller-issues.action-show .ezertech-logged-in-content {
  display: none !important;
  visibility: hidden !important;
}

/* Hero Section para usuario logueado - más compacto */
.ezertech-logged-in-hero {
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 16px !important;
  padding: 30px 30px !important;
  margin-bottom: 25px !important;
  color: white !important;
  text-align: center !important;
  box-shadow: 0 8px 30px rgba(52, 84, 116, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ezertech-welcome-user {
  position: relative !important;
  z-index: 1 !important;
}

.ezertech-user-icon {
  font-size: 50px !important;
  margin-bottom: 12px !important;
  opacity: 0.9 !important;
  animation: pulse 2s ease-in-out infinite !important;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

.ezertech-logged-in-hero h1 {
  font-size: 1.8em !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.ezertech-logged-in-hero p {
  font-size: 1em !important;
  opacity: 0.95 !important;
  margin: 0 !important;
}

/* Secciones de módulos */
.ezertech-section-module {
  margin-bottom: 30px !important;
  padding: 0 !important;
}

.ezertech-section-title {
  font-size: 1.4em !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

.ezertech-section-title i {
  color: #648cb4 !important;
  font-size: 1.2em !important;
}

/* Grid de botones compactos */
.ezertech-buttons-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botones de módulo compactos */
.ezertech-module-button {
  background: white !important;
  border-radius: 12px !important;
  padding: 16px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 90px !important;
}

.ezertech-module-button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #648cb4, #345474) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.2s ease !important;
}

.ezertech-module-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.ezertech-module-button:hover::before {
  transform: scaleX(1) !important;
}

.ezertech-module-button i {
  font-size: 28px !important;
  color: #648cb4 !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
}

.ezertech-module-button:hover i {
  color: #345474 !important;
  transform: scale(1.1) !important;
}

.ezertech-module-button span {
  font-size: 0.85em !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

/* Grid de acceso rápido (mantener para compatibilidad) */
.ezertech-quick-access-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  margin: 40px 0 !important;
  padding: 0 !important;
}

/* Tarjetas de acceso rápido */
.ezertech-quick-access-card {
  background: white !important;
  border-radius: 16px !important;
  padding: 30px 25px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

.ezertech-quick-access-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #648cb4, #345474) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.ezertech-quick-access-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.ezertech-quick-access-card:hover::before {
  transform: scaleX(1) !important;
}

.ezertech-quick-access-icon {
  width: 65px !important;
  height: 65px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  font-size: 28px !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(100, 140, 180, 0.3) !important;
  transition: all 0.3s ease !important;
}

.ezertech-quick-access-card:hover .ezertech-quick-access-icon {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 6px 20px rgba(100, 140, 180, 0.4) !important;
}

.ezertech-quick-access-card h3 {
  font-size: 1.4em !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
}

.ezertech-quick-access-card p {
  color: #64748b !important;
  line-height: 1.6 !important;
  font-size: 0.95em !important;
  margin: 0 0 15px 0 !important;
}

.ezertech-card-arrow {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 35px !important;
  height: 35px !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  opacity: 0.8 !important;
}

.ezertech-quick-access-card:hover .ezertech-card-arrow {
  transform: translateX(5px) !important;
  opacity: 1 !important;
}

/* Sección de estadísticas */
.ezertech-stats-section {
  margin-top: 50px !important;
  padding: 40px 0 !important;
}

.ezertech-stats-section h2 {
  font-size: 2em !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
  margin-bottom: 35px !important;
}

.ezertech-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

.ezertech-stat-card {
  background: white !important;
  border-radius: 14px !important;
  padding: 25px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.ezertech-stat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.ezertech-stat-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.ezertech-stat-icon.stat-primary {
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
}

.ezertech-stat-icon.stat-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.ezertech-stat-icon.stat-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.ezertech-stat-icon.stat-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.ezertech-stat-content {
  flex: 1 !important;
}

.ezertech-stat-value {
  font-size: 2em !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1 !important;
  margin-bottom: 5px !important;
}

.ezertech-stat-label {
  font-size: 0.9em !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Responsive para usuarios logueados */
@media (max-width: 768px) {
  .ezertech-logged-in-hero {
    padding: 25px 20px !important;
  }
  
  .ezertech-logged-in-hero h1 {
    font-size: 1.5em !important;
  }
  
  .ezertech-user-icon {
    font-size: 40px !important;
  }
  
  .ezertech-buttons-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 10px !important;
  }
  
  .ezertech-module-button {
    padding: 12px 8px !important;
    min-height: 80px !important;
  }
  
  .ezertech-module-button i {
    font-size: 24px !important;
  }
  
  .ezertech-module-button span {
    font-size: 0.75em !important;
  }
  
  .ezertech-section-title {
    font-size: 1.2em !important;
  }
}

/* Hero Section */
.ezertech-hero {
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 16px !important;
  padding: 25px 30px !important;
  margin-bottom: 20px !important;
  color: white !important;
  text-align: center !important;
  box-shadow: 0 10px 40px rgba(52, 84, 116, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ezertech-hero::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  right: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
  animation: rotate 20s linear infinite !important;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ezertech-hero h1 {
  font-size: 1.8em !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

.ezertech-hero p {
  font-size: 0.95em !important;
  opacity: 0.95 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Grid de tarjetas */
.ezertech-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 15px !important;
  margin: 20px 0 !important;
  padding: 0 !important;
}

/* Tarjetas individuales */
.ezertech-card {
  background: white !important;
  border-radius: 12px !important;
  padding: 20px 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ezertech-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #648cb4, #345474) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.ezertech-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

.ezertech-card:hover::before {
  transform: scaleX(1) !important;
}

/* Iconos en las tarjetas */
.ezertech-card-icon {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  font-size: 24px !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(100, 140, 180, 0.3) !important;
  transition: all 0.3s ease !important;
}

.ezertech-card:hover .ezertech-card-icon {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 6px 20px rgba(100, 140, 180, 0.4) !important;
}

/* Títulos de las tarjetas */
.ezertech-card h3 {
  font-size: 1.1em !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

/* Texto de las tarjetas */
.ezertech-card p {
  color: #64748b !important;
  line-height: 1.5 !important;
  font-size: 0.85em !important;
  margin: 0 !important;
}

/* Sección de características - OCULTA para ahorrar espacio */
.ezertech-features {
  display: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.ezertech-features h2 {
  display: none !important;
}

/* Grid de características - OCULTO */
.ezertech-features-grid {
  display: none !important;
}

.ezertech-feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 25px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.ezertech-feature-item:hover {
  background: #f1f5f9 !important;
  transform: translateX(5px) !important;
}

.ezertech-feature-icon {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #648cb4 0%, #345474 100%) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.ezertech-feature-content h4 {
  font-size: 1.2em !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
}

.ezertech-feature-content p {
  color: #64748b !important;
  font-size: 0.95em !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .ezertech-hero {
    padding: 20px 20px !important;
    margin-bottom: 15px !important;
  }
  
  .ezertech-hero h1 {
    font-size: 1.5em !important;
    margin-bottom: 8px !important;
  }
  
  .ezertech-hero p {
    font-size: 0.85em !important;
    line-height: 1.3 !important;
  }
  
  .ezertech-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 15px 0 !important;
  }
  
  .ezertech-card {
    padding: 15px 12px !important;
  }
  
  .ezertech-card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  
  .ezertech-card h3 {
    font-size: 1em !important;
    margin-bottom: 6px !important;
  }
  
  .ezertech-card p {
    font-size: 0.8em !important;
    line-height: 1.4 !important;
  }
  
  .ezertech-features-grid {
    display: none !important;
  }
}

/* Animaciones de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ezertech-card,
.ezertech-feature-item {
  animation: fadeInUp 0.6s ease-out backwards !important;
}

.ezertech-card:nth-child(1) { animation-delay: 0.1s !important; }
.ezertech-card:nth-child(2) { animation-delay: 0.2s !important; }
.ezertech-card:nth-child(3) { animation-delay: 0.3s !important; }
.ezertech-card:nth-child(4) { animation-delay: 0.4s !important; }
.ezertech-card:nth-child(5) { animation-delay: 0.5s !important; }
.ezertech-card:nth-child(6) { animation-delay: 0.6s !important; }

/* ============================================
   CARGAR FONT AWESOME AUTOMÁTICAMENTE
   ============================================ */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');