:root {
  --axonia-primary: #0F172A; /* Slate 900 */
  --axonia-primary-dark: #020617; /* Slate 950 */
  --axonia-secondary: #3B82F6; /* Blue 500 para acentos más Stitch */
  --axonia-secondary-dark: #2563EB;  /* ── Backgrounds & Tiles ── */
  --axonia-bg: #FFFFFF; /* Slate 50 was producing a "black band" if body didn't cover html */
  --axonia-card-bg: #FFFFFF;
  --axonia-tile-bg: #f8fafc; /* Slate 50 */
  --axonia-white: #ffffff;
  --axonia-text: #334155; /* Slate 700 */
  --axonia-text-heading: #0F172A; /* Slate 900 */
  --axonia-muted: #94A3B8; /* Slate 400 */
  --axonia-border: #E2E8F0; /* Slate 200 */
  
  /* ── Tile Colors ── */
  --tile-ventas: #FEF3C7;    /* Amber 100 */
  --tile-ventas-txt: #D97706; /* Amber 600 */
  
  --tile-compras: #E0E7FF;   /* Indigo 100 */
  --tile-compras-txt: #4F46E5; /* Indigo 600 */
  
  --tile-inventarios: #DCFCE7; /* Green 100 */
  --tile-inventarios-txt: #16A34A; /* Green 600 */
  
  --tile-finanzas: #FCE7F3;  /* Pink 100 */
  --tile-finanzas-txt: #DB2777; /* Pink 600 */
  
  --tile-rrhh: #F3E8FF;      /* Purple 100 */
  --tile-rrhh-txt: #9333EA;  /* Purple 600 */
  
  --tile-produccion: #FFEDD5; /* Orange 100 */
  --tile-produccion-txt: #EA580C; /* Orange 600 */
  
  --tile-logistica: #E0F2FE; /* Light Blue 100 */
  --tile-logistica-txt: #0284C7; /* Light Blue 600 */
  
  --tile-activos: #F1F5F9;   /* Slate 100 */
  --tile-activos-txt: #475569; /* Slate 600 */

  /* ── Status Colors ── */
  /* Modern Soft Shadows */
  --axonia-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --axonia-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --axonia-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --axonia-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --axonia-shadow-tile: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.02);
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--axonia-bg) !important;
  color: var(--axonia-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.title,
.font-serif {
  font-family: "Outfit", sans-serif;
  color: var(--axonia-text-heading) !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── Bulma Overrides ── */
.is-primary {
  background-color: var(--axonia-primary) !important;
  color: white !important;
}
.is-secondary {
  background-color: var(--axonia-secondary) !important;
  color: white !important;
  font-weight: 600;
}

.button {
  font-family: "Inter", sans-serif;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
}

.button.is-primary {
  border: none;
  box-shadow: var(--axonia-shadow-sm);
}
.button.is-primary:hover {
  background-color: var(--axonia-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--axonia-shadow);
}

.button.is-secondary {
  border: none;
  box-shadow: var(--axonia-shadow-sm);
}
.button.is-secondary:hover {
  background-color: var(--axonia-secondary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--axonia-shadow);
}

/* ── Axonia Custom Components ── */
.axonia-card {
  background: var(--axonia-white);
  border-radius: 1rem;
  box-shadow: var(--axonia-shadow);
  padding: 1.5rem;
  border: 1px solid var(--axonia-border);
  transition: all 0.2s ease-in-out;
}

.axonia-card:hover {
  box-shadow: var(--axonia-shadow-md);
  border-color: rgba(148, 163, 184, 0.3);
}

.axonia-gradient-bg {
  background: linear-gradient(
    135deg,
    var(--axonia-primary) 0%,
    var(--axonia-primary-dark) 100%
  );
}

.hover-gold:hover {
  border-color: var(--axonia-secondary) !important;
}

/* ── Muted Forms & Inputs (Stitch Style) ── */
.input, .textarea, .select select {
  box-shadow: none !important;
  border: 2px solid transparent !important;
  background-color: #F1F5F9;
  border-radius: 4px !important;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--axonia-text-heading);
}
.input:hover, .textarea:hover, .select select:hover {
  background-color: #E2E8F0;
}
.input:focus, .textarea:focus, .select select:focus {
  background-color: #ffffff;
  border-color: var(--axonia-secondary) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  outline: none;
}
.label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

/* ── Tom Select Global Overrides ── */
.ts-control {
  background-color: #F1F5F9 !important;
  border: 2px solid transparent !important;
  border-radius: 4px !important;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: none !important;
  min-height: 2.5em;
  display: flex;
  align-items: center;
}
.ts-control, .ts-control input {
  color: var(--axonia-text-heading) !important;
}
.ts-control:hover {
  background-color: #E2E8F0 !important;
}
.ts-wrapper.single .ts-control::after {
  border-color: #94A3B8 transparent transparent transparent !important;
}
.ts-wrapper.focus .ts-control {
  background-color: #ffffff !important;
  border-color: var(--axonia-secondary) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}
.ts-dropdown {
  border: none !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  z-index: 1000 !important;
}
.ts-dropdown .option:hover, .ts-dropdown .option.active {
  background-color: #F1F5F9 !important;
  color: var(--axonia-primary) !important;
  font-weight: 600;
}

/* ── Modal Standardization (Stitch Style) ── */
.modal-card {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--axonia-shadow-lg) !important;
}
.modal-card-head {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--axonia-border) !important;
  padding: 1.5rem !important;
}
.modal-card-title {
  color: var(--axonia-text-heading) !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}
.modal-card-body {
  background-color: #ffffff !important;
  padding: 1.5rem !important;
}
.modal-card-foot {
  background-color: #F8FAFC !important;
  border-top: 1px solid var(--axonia-border) !important;
  padding: 1rem 1.5rem !important;
}
.modal-card .delete {
  background-color: rgba(100, 116, 139, 0.1) !important;
}
.modal-card .delete:hover {
  background-color: #ef4444 !important;
}
.label {
  color: var(--axonia-text-heading);
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 0.35em;
}

/* ── Axonia Tile Grid ── */
.axonia-tile {
  width: 124px;   /* Un poco más amplios para el estilo aireado Stitch */
  height: 124px;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--axonia-shadow-sm);
  background: white;
  border: 1px solid var(--axonia-border);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--axonia-text-heading);
}

/* Efecto Glass sutil en Hover */
.axonia-tile:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.axonia-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--axonia-shadow-tile);
  border-color: var(--axonia-secondary);
  color: var(--axonia-secondary);
}
.axonia-tile:hover:after {
    opacity: 1;
}

/* Quitar colores fijos de los tiles, dejarlos blancos para estandarización minimalista salvo contadas excepciones */
.axonia-tile.is-primary {
  background-color: var(--axonia-primary) !important;
  color: white !important;
  border-color: transparent;
}
.axonia-tile.is-secondary {
  background-color: var(--axonia-secondary) !important;
  color: white !important;
  border-color: transparent;
}
.axonia-tile.is-secondary:hover { color: white !important; }

.axonia-tile .material-symbols-outlined {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
  color: var(--axonia-muted);
}
.axonia-tile:hover .material-symbols-outlined {
  transform: scale(1.1) translateY(-2px);
  color: var(--axonia-secondary);
}

/* Modificadores para tiles que explícitamente tengan icono blanco (ej is-primary) */
.axonia-tile.has-text-white:hover .material-symbols-outlined,
.axonia-tile.is-primary:hover .material-symbols-outlined {
    color: white;
}
.axonia-tile.is-primary .material-symbols-outlined { color: white; }

/* ── Dynamic Tile Colors ── */

.axonia-tile.is-ventas { background: var(--tile-ventas); }
.axonia-tile.is-ventas .material-symbols-outlined, .axonia-tile.is-ventas .axonia-tile-label { color: var(--tile-ventas-txt) !important; }
.axonia-tile.is-ventas:hover { border-color: var(--tile-ventas-txt) !important; color: var(--tile-ventas-txt) !important; }

.axonia-tile.is-compras { background: var(--tile-compras); }
.axonia-tile.is-compras .material-symbols-outlined, .axonia-tile.is-compras .axonia-tile-label { color: var(--tile-compras-txt) !important; }
.axonia-tile.is-compras:hover { border-color: var(--tile-compras-txt) !important; color: var(--tile-compras-txt) !important; }

.axonia-tile.is-inventarios { background: var(--tile-inventarios); }
.axonia-tile.is-inventarios .material-symbols-outlined, .axonia-tile.is-inventarios .axonia-tile-label { color: var(--tile-inventarios-txt) !important; }
.axonia-tile.is-inventarios:hover { border-color: var(--tile-inventarios-txt) !important; color: var(--tile-inventarios-txt) !important; }

.axonia-tile.is-finanzas { background: var(--tile-finanzas); }
.axonia-tile.is-finanzas .material-symbols-outlined, .axonia-tile.is-finanzas .axonia-tile-label { color: var(--tile-finanzas-txt) !important; }
.axonia-tile.is-finanzas:hover { border-color: var(--tile-finanzas-txt) !important; color: var(--tile-finanzas-txt) !important; }

.axonia-tile.is-rrhh { background: var(--tile-rrhh); }
.axonia-tile.is-rrhh .material-symbols-outlined, .axonia-tile.is-rrhh .axonia-tile-label { color: var(--tile-rrhh-txt) !important; }
.axonia-tile.is-rrhh:hover { border-color: var(--tile-rrhh-txt) !important; color: var(--tile-rrhh-txt) !important; }

.axonia-tile.is-produccion { background: var(--tile-produccion); }
.axonia-tile.is-produccion .material-symbols-outlined, .axonia-tile.is-produccion .axonia-tile-label { color: var(--tile-produccion-txt) !important; }
.axonia-tile.is-produccion:hover { border-color: var(--tile-produccion-txt) !important; color: var(--tile-produccion-txt) !important; }

.axonia-tile.is-logistica { background: var(--tile-logistica); }
.axonia-tile.is-logistica .material-symbols-outlined, .axonia-tile.is-logistica .axonia-tile-label { color: var(--tile-logistica-txt) !important; }
.axonia-tile.is-logistica:hover { border-color: var(--tile-logistica-txt) !important; color: var(--tile-logistica-txt) !important; }

.axonia-tile.is-activos { background: var(--tile-activos); }
.axonia-tile.is-activos .material-symbols-outlined, .axonia-tile.is-activos .axonia-tile-label { color: var(--tile-activos-txt) !important; }
.axonia-tile.is-activos:hover { border-color: var(--tile-activos-txt) !important; color: var(--tile-activos-txt) !important; }

.axonia-tile-label {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem; /* Aumentado sustancialmente para legibilidad */
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── Tables ── */
.table {
  background-color: transparent;
  width: 100%;
}
.table thead th {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--axonia-muted);
  border-bottom: 1px solid var(--axonia-border);
  padding: 1rem 0.75rem;
}
.table tbody td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5); /* Faint slate-200 */
}

/* ── Animations ── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* ── Typography & Layout ── */
/* Notificaciones */
.relative { position: relative; }
.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--bulma-danger);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid transparent;
}

.notification-item.is-unread {
    background-color: rgba(201, 168, 76, 0.05);
    border-left-color: var(--axonia-secondary);
}

.notification-item:hover {
    transform: translateX(4px);
    box-shadow: var(--axonia-shadow-tile);
}

/* ── Sticky Actions & Forms ── */
.sticky-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.03);
}

.module-nav-wrapper {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
    transition: box-shadow 0.3s ease;
}

.module-nav-wrapper.is-scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.tab-link {
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.tab-link.is-active {
    color: var(--axonia-primary);
    border-bottom-color: var(--axonia-secondary);
}
.tracking-widest {
  letter-spacing: 0.15em;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Module Navigation ── */
.module-nav-wrapper {
    background: white;
    border-bottom: 1px solid var(--axonia-border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.module-top-bar {
    height: 3.5rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.module-tabs-bar {
    border-top: 1px solid rgba(0,0,0,0.02);
    padding: 0 1rem;
}
.tab-link {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    color: var(--axonia-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.tab-link:hover { color: var(--axonia-primary); }
.tab-link.is-active {
    color: var(--axonia-primary);
    border-bottom-color: var(--axonia-secondary);
}
.user-avatar-small {
    width: 28px; height: 28px; border-radius: 50%; background: var(--axonia-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem;
}