.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Efecto Skeleton */
.skeleton-loader {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

  .skeleton-loader::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) );
    animation: shimmer 1.5s infinite;
  }

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

/* Animación suave para cuando aparece el canvas */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* El elemento "fantasma" que ocupa el espacio donde caerá el ítem */
.sortable-ghost {
  opacity: 0.4;
  background-color: #c8ebfb; /* Un azulito claro */
  border: 2px dashed #007bff;
}

/* El elemento que estás arrastrando actualmente */
.sortable-drag {
  cursor: grabbing;
  opacity: 1;
  background-color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: scale(1.02); /* Un poquito más grande para efecto 3D */
}

.cursor-pointer {
  cursor: pointer
}

.select-none {
  user-select: none;
}

:root {
  /* Paleta Personalizada - Modo Claro */
  --primary-color: #6366f1; /* Índigo moderno */
  --primary-hover: #4f46e5;
  --bg-sidebar: #f8f9fa;
  --text-sidebar: #343a40;
  --sidebar-width: 280px;
  --navbar-height: 60px;
}

[data-bs-theme="dark"] {
  /* Paleta Personalizada - Modo Oscuro */
  --primary-color: #818cf8; /* Un poco más claro para contraste oscuro */
  --primary-hover: #6366f1;
  --bg-sidebar: #1e1e2d; /* Oscuro con un toque azulado, no negro puro */
  --text-sidebar: #e9ecef;
  --bs-body-bg: #151521; /* Fondo principal oscuro */
}

/* Sobrescribir variables de Bootstrap para que tome nuestro color */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 99, 102, 241;
  --bs-link-color: var(--primary-color);
  --bs-link-hover-color: var(--primary-hover);
}

/* Estilos generales */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  transition: background-color 0.3s, color 0.3s; /* Suavizar cambio de tema */
}

/* Para congelar el scroll */
.scroll-locked {
  overflow: hidden !important;
  height: 100vh !important;
}

.border-right-colored {
  border-right: 1px solid var(--bs-border-color);
}

.border-left-colored {
  border-left: 1px solid var(--bs-border-color);
}

.border-top-colored {
  border-top: 1px solid var(--bs-border-color);
}

.border-bottom-colored {
  border-bottom: 1px solid var(--bs-border-color);
}

.border-colored {
  border: 1px solid var(--bs-border-color);
}

.background-colored {
  background-color: var(--bg-sidebar);
}

/* Sidebar (Escritorio) */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--bs-border-color);
  transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  /* Padding superior dinámico --- */
  /* Si hay notch, agrega espacio. Si no, agrega 0px */
  padding-top: env(safe-area-inset-top, 0px);
  /* Sumamos padding abajo para que los botones no tapen el footer del menú */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* --- NUEVO: Proteger el borde izquierdo del Sidebar --- */
  /* Esto empuja el contenido interno (links/logo) si el notch está a la izquierda */
  padding-left: env(safe-area-inset-left, 0px);
}

/* Sidebar Header */
.sidebar-header {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--bs-primary);
}

/* Links del Menú */
.nav-link {
  color: var(--text-sidebar);
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  margin: 0.2rem 0.8rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

  .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--primary-color);
  }

  .nav-link.active {
    background-color: var(--primary-color);
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(var(--bs-primary-rgb), 0.4);
  }

/* Área Principal */
.main-content {
  /* Margen izquierdo para cuando hay sidebar (Escritorio) */
  margin-left: var(--sidebar-width);
  /* Padding base (2rem) */
  padding: 2rem;
  min-height: 100vh;
  /* Aseguramos que el scroll llegue hasta el final visible */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: margin-left 0.3s ease-in-out;
  /* --- NUEVO: Protección Lateral del Contenido --- */
  /* Sumamos el área segura al padding existente */
  /* Derecha: Para que no choque con el notch o barra home lateral */
  padding-right: calc(2rem + env(safe-area-inset-right, 0px));
  /* Izquierda: IMPORTANTE para móvil landscape cuando no hay sidebar visible */
  /* En escritorio esto sumará 0px generalmente, así que no afecta el diseño */
  padding-left: calc(2rem + env(safe-area-inset-left, 0px));
}

/* Botón flotante para abrir menú en escritorio (cuando está cerrado) */
.desktop-toggler {
  position: fixed;
  top: 15px;
  /* --- NUEVO: Posición izquierda dinámica --- */
  /* 15px base + lo que mida el notch a la izquierda */
  left: calc(15px + env(safe-area-inset-left, 0px));
  z-index: 900; /* Menor que el sidebar (1000) */
  display: none; /* Oculto por defecto */
}

/* Opcional: Si usas algún botón flotante o footer fijo en el futuro */
.fixed-bottom {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* Topbar (Solo visible en móvil o para herramientas globales) */
.top-bar {
  /* --- La altura ahora es variable --- */
  /* Altura base (60px) + Altura del Notch/Barra Estado */
  height: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
  display: none; /* Oculto en escritorio por defecto */
  align-items: center; /* Esto centra verticalmente el contenido */
  padding: 0 1rem;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  z-index: 999;
  /* --- Empujar el contenido hacia abajo --- */
  padding-top: env(safe-area-inset-top, 0px);
  /* --- NUEVO: Padding lateral dinámico --- */
  /* Mantenemos el 1rem base y le sumamos el área segura */
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* --- CAMBIO IMPORTANTE: Aumentamos a 991.98px (Breakpoint LG de Bootstrap) --- */
/* Esto hará que en teléfonos horizontales y tablets verticales se use el menú móvil */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%); /* Ocultar sidebar a la izquierda */
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    /* Aseguramos que el margen sea siempre 0 en móvil, ignorando la clase .collapsed */
    margin-left: 0 !important;
  }

    .sidebar.show {
      transform: translateX(0); /* Mostrar sidebar */
    }

  .main-content {
    margin-left: 0 !important; /* Quitar margen */
    padding: 1rem;
  }

  .top-bar {
    display: flex; /* Mostrar barra superior en móvil */
    justify-content: space-between;
  }

  /* Overlay para cerrar el menú al hacer click afuera */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
    /* Bloquear toques en el fondo */
    touch-action: none;
  }

    .sidebar-overlay.show {
      display: block;
    }

  /* El botón desktop no se usa en móvil porque ya tenemos la TopBar */
  .desktop-toggler {
    display: none !important;
  }
}

/* En escritorio, mostramos el botón flotante si el sidebar está colapsado */
/* ================================================= */
/*  RANGO ESCRITORIO ( >= 992px )                    */
/* ================================================= */
@media (min-width: 992px) {
  /* AQUÍ MOVIMOS LA LÓGICA DE COLAPSAR */
  /* Solo aplicamos márgenes negativos si la pantalla es GRANDE */

  /* Sidebar Colapsado (Escritorio) */
  .sidebar.collapsed {
    margin-left: calc(var(--sidebar-width) * -1); /* Esconder a la izquierda */
  }

  /* Área Principal Expandida (cuando el sidebar está cerrado en escritorio) */
  .main-content.expanded {
    margin-left: 0; /* Expandir contenido */
  }

  .desktop-toggler.visible {
    display: block;
  }
}

/* TARJETAS DE HERRAMIENTAS (HOME) */
.tool-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1rem; /* Bordes redondeados modernos */
  background-color: var(--bs-body-bg);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
  text-decoration: none; /* Quitar subrayado del link */
  display: block;
  position: relative;
  overflow: hidden;
}

  .tool-card:hover {
    transform: translateY(-5px); /* Se eleva un poco */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Sombra suave */
    border-color: var(--primary-color); /* Borde se pinta del color primario */
  }

/* El contenedor del icono */
.icon-box {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  /* Fondo con el color primario pero muy transparente (efecto moderno) */
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--primary-color);
  transition: background-color 0.3s;
}

.tool-card:hover .icon-box {
  background-color: var(--primary-color);
  color: white;
}

/* Ajuste para modo oscuro en las cards */
[data-bs-theme="dark"] .tool-card {
  background-color: #1e1e2d; /* Un tono más claro que el fondo negro */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

  [data-bs-theme="dark"] .tool-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  }

/* --- BRAND LOGO --- */
.brand-logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  border-radius: 16px; /* Squircle (cuadrado redondeado) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.75rem;
}

/* Texto con gradiente (estilo Apple/Web3) */
.text-gradient {
  background: linear-gradient(135deg, var(--bs-body-bg-rgb), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--primary-color);
}

/* --- INPUTS MODERNOS --- */
.custom-input-group {
  background-color: rgba(var(--bs-secondary-rgb), 0.08);
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 4px 8px;
  transition: all 0.3s ease;
}

  .custom-input-group:focus-within {
    background-color: var(--bs-body-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
  }

.input-icon {
  font-size: 1.2rem;
  color: #a0aec0;
  padding: 0 8px 0 12px;
  transition: color 0.3s;
}

.custom-input-group:focus-within .input-icon {
  color: var(--primary-color);
}

.form-control {
  font-size: 0.95rem;
  padding: 0.8rem 0.5rem;
}

  .form-control::placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
  }

/* --- BOTONES Y TEXTOS --- */
.btn-primary-gradient {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  color: white;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

  .btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--bs-primary-rgb), 0.4);
  }

.text-primary-gradient-text {
  color: var(--primary-color);
  transition: opacity 0.2s;
}

  .text-primary-gradient-text:hover {
    opacity: 0.8;
  }

/* --- ANIMACIONES --- */
.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.animate-fade-in {
  animation: fadeIn 0.4s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- APAGAR LA VALIDACIÓN DE BOOTSTRAP FORZOSAMENTE --- */

/* Atacamos la combinación exacta que mostró tu inspector: .form-control.modified.invalid */
.custom-input-group input.form-control.valid,
.custom-input-group input.form-control.invalid,
.custom-input-group input.form-control.modified.valid,
.custom-input-group input.form-control.modified.invalid {
  /* 1. ELIMINAR EL ICONO (Check / Exclamación) */
  background-image: none !important;
  /* 2. ELIMINAR EL BORDE ROJO/VERDE y el RESPLANDOR */
  border: none !important;
  box-shadow: none !important;
  /* 3. RESTAURAR EL PADDING (Bootstrap lo altera para meter el icono) */
  padding-right: 0.75rem !important;
  /* 4. MANTENER FONDO TRANSPARENTE */
  background-color: transparent !important;
  outline: none !important;
}

  /* Asegurar que el focus tampoco traiga de vuelta el borde rojo/verde */
  .custom-input-group input.form-control:focus,
  .custom-input-group input.form-control.invalid:focus,
  .custom-input-group input.form-control.valid:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

/* --- (OPCIONAL) --- */
/* Si quieres que, aunque no tenga borde rojo el input, el texto del label cambie a rojo si hay error */
/*.mb-3:has(.form-control.invalid) .form-label {
  color: #dc3545 !important;
}*/

/* Estilo del mensaje de error debajo */
.validation-message {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 5px;
  margin-left: 5px;
  font-weight: 500;
}