/* Estilos del dashboard */
@import url('cssjw.css'); /* JW-like icon shim (safe, local) */
:root {
  --dash-bg: #0d1117;
  --dash-surface: #161b22;
  --dash-accent: #0d6efd;
  --dash-accent-rgb: 13,110,253;
  --dash-text: #e6edf3;
  --dash-muted: #8b949e;
  --radius: 14px;
  --gradient: linear-gradient(135deg, rgba(var(--dash-accent-rgb),0.25) 0%, rgba(56,189,248,0.25) 100%);
  --shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
}

html, body { height:100%; }
body.dashboard-body { background: radial-gradient(circle at 20% 20%, #1e2530, var(--dash-bg)); color: var(--dash-text); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }

.nav-glass { backdrop-filter: blur(10px) saturate(160%); background: rgba(22,27,34,0.72); border: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow); }
.brand-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

.dashboard-wrapper { max-width: 1200px; margin: 0 auto; padding: clamp(1rem,2vw,2rem); }

.quick-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); margin-top: 2rem; }
.quick-card { position: relative; background: var(--dash-surface); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius); padding: 1.15rem 1.15rem 1rem; overflow: hidden; display:flex; flex-direction:column; gap:.4rem; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: border-color .25s, transform .25s, box-shadow .25s; }
.quick-card::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(var(--dash-accent-rgb),.08),transparent 60%); opacity:0; transition:opacity .35s; pointer-events:none; }
.quick-card:hover { border-color: rgba(var(--dash-accent-rgb),.6); transform: translateY(-4px); box-shadow: 0 6px 18px -4px rgba(var(--dash-accent-rgb),.5), 0 3px 8px rgba(0,0,0,.6); }
.quick-card:hover::before { opacity:1; }
.quick-card h5 { margin:0; font-size:1.05rem; letter-spacing:.5px; display:flex; align-items:center; gap:.6rem; }
.quick-card p { margin:0; font-size:.8rem; color: var(--dash-muted); }
.quick-card .action { margin-top: .5rem; }
.quick-card a.btn-tile { --tile-bg: rgba(var(--dash-accent-rgb),.15); --tile-bg-hover: rgba(var(--dash-accent-rgb),.25); display:inline-flex; align-items:center; gap:.5rem; background: var(--tile-bg); color: var(--dash-text); text-decoration:none; font-weight:500; padding:.55rem .9rem; border-radius: 10px; font-size:.8rem; letter-spacing:.25px; transition: background .3s, color .3s; border:1px solid rgba(var(--dash-accent-rgb),.4); }
.quick-card a.btn-tile:hover { background: var(--tile-bg-hover); color:#fff; }

/* Variantes de quick-card y btn-tile para alinear con la grilla */
.quick-card--tareas { border-color: rgba(var(--dash-accent-rgb), .5); }
.quick-card--agenda { border-color: rgba(56,189,248,.45); }
.quick-card--anuncios { border-color: rgba(251,191,36,.45); }
.quick-card--usuarios { border-color: rgba(244,114,182,.45); }
.quick-card--roles { border-color: rgba(168,85,247,.45); }
.quick-card--resp { border-color: rgba(34,197,94,.45); }
.quick-card--docs { border-color: rgba(255,99,64,.60); }
.quick-card--perfil { border-color: rgba(148,163,184,.35); }
.quick-card--dp { border-color: rgba(236,72,153,.45); }
.quick-card--tareas::before { background: linear-gradient(145deg, rgba(var(--dash-accent-rgb),.18), transparent 60%); }
.quick-card--agenda::before { background: linear-gradient(145deg, rgba(56,189,248,.18), transparent 60%); }
.quick-card--anuncios::before { background: linear-gradient(145deg, rgba(251,191,36,.18), transparent 60%); }
.quick-card--usuarios::before { background: linear-gradient(145deg, rgba(244,114,182,.18), transparent 60%); }
.quick-card--roles::before { background: linear-gradient(145deg, rgba(168,85,247,.18), transparent 60%); }
.quick-card--resp::before { background: linear-gradient(145deg, rgba(34,197,94,.18), transparent 60%); }
.quick-card--docs::before { background: linear-gradient(145deg, rgba(255,99,64,.30), transparent 60%); }
.quick-card--perfil::before { background: linear-gradient(145deg, rgba(148,163,184,.18), transparent 60%); }
.quick-card--dp::before { background: linear-gradient(145deg, rgba(236,72,153,.18), transparent 60%); }
/* Transporte */
.quick-card--transporte { border-color: rgba(2,132,199,.45); }
.quick-card--transporte::before { background: linear-gradient(145deg, rgba(2,132,199,.20), transparent 60%); }
/* Contabilidad */
.quick-card--conta { border-color: rgba(148,163,184,.45); }
.quick-card--conta::before { background: linear-gradient(145deg, rgba(148,163,184,.22), transparent 60%); }
.btn-quick--conta { background: rgba(148,163,184,.30); border-color: rgba(148,163,184,.45); }

.btn-tile--tareas { --tile-bg: rgba(var(--dash-accent-rgb),.15); --tile-bg-hover: rgba(var(--dash-accent-rgb),.25); border-color: rgba(var(--dash-accent-rgb), .4); }
.btn-tile--agenda { --tile-bg: rgba(56,189,248,.28); --tile-bg-hover: rgba(56,189,248,.38); border-color: rgba(56,189,248,.45); }
.btn-tile--anuncios { --tile-bg: rgba(251,191,36,.25); --tile-bg-hover: rgba(251,191,36,.35); border-color: rgba(251,191,36,.45); }
.btn-tile--usuarios { --tile-bg: rgba(244,114,182,.25); --tile-bg-hover: rgba(244,114,182,.35); border-color: rgba(244,114,182,.45); }
.btn-tile--roles { --tile-bg: rgba(168,85,247,.25); --tile-bg-hover: rgba(168,85,247,.35); border-color: rgba(168,85,247,.45); }
.btn-tile--resp { --tile-bg: rgba(34,197,94,.25); --tile-bg-hover: rgba(34,197,94,.35); border-color: rgba(34,197,94,.45); }
.btn-tile--perfil { --tile-bg: rgba(148,163,184,.25); --tile-bg-hover: rgba(148,163,184,.35); border-color: rgba(148,163,184,.35); }
.btn-tile--docs { --tile-bg: rgba(255,99,64,.25); --tile-bg-hover: rgba(255,99,64,.38); border-color: rgba(255,99,64,.55); }
.btn-tile--transporte { --tile-bg: rgba(2,132,199,.22); --tile-bg-hover: rgba(2,132,199,.32); border-color: rgba(2,132,199,.45); }
.btn-tile--dp { --tile-bg: rgba(236,72,153,.25); --tile-bg-hover: rgba(236,72,153,.35); border-color: rgba(236,72,153,.45); }

.footer-mini { margin-top:3rem; font-size:.7rem; text-align:center; color: var(--dash-muted); }

/* Responsive tweaks */
@media (max-width: 600px){
  .quick-cards { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
  .quick-card { padding: .9rem .9rem .75rem; }
  .quick-card h5 { font-size: .95rem; }
}

/* Fancy underline link */
.link-ghost { position:relative; text-decoration:none; color:var(--dash-text); }
.link-ghost::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:linear-gradient(90deg,var(--dash-accent),#38bdf8); transition:width .35s; border-radius:2px; }
.link-ghost:hover::after { width:100%; }

/* Avatar circle placeholder */
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--dash-accent),#38bdf8); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; letter-spacing:.5px; box-shadow:0 0 0 2px rgba(var(--dash-accent-rgb),.35),0 4px 8px -2px rgba(0,0,0,.6); overflow:hidden; position:relative; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar.has-image { background:#000; color:transparent; text-indent:-9999px; }

.nav-user { display:flex; align-items:center; gap:.75rem; }

/* Quick apps menu in navbar */
.nav-quick .btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,0.08);
  background: rgba(22,27,34,0.6); color: var(--dash-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.nav-quick .btn-icon:hover { background: rgba(22,27,34,0.9); }
.dropdown-quick { min-width: 280px; background: rgba(22,27,34,0.95); border:1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow); border-radius: 14px; }
.dropdown-quick .grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem; }
.btn-quick {
  display:flex; align-items:center; gap:.5rem; border-radius:12px; padding:.55rem .7rem; text-decoration:none; font-weight:600; letter-spacing:.2px;
  color:#fff; border:1px solid transparent; transition: transform .15s ease, filter .2s ease, border-color .2s;
}
.btn-quick:hover { transform: translateY(-2px); filter: brightness(1.05); }
/* Ocultar Inicio en la grilla */
.btn-quick--inicio { display: none !important; }
/* Color variants aligned with theme */
.btn-quick--tareas { background: rgba(var(--dash-accent-rgb), .35); border-color: rgba(var(--dash-accent-rgb), .5); }
.btn-quick--inicio { background: rgba(148,163,184,.30); border-color: rgba(148,163,184,.45); }
.btn-quick--agenda { background: rgba(56,189,248,.28); border-color: rgba(56,189,248,.45); }
.btn-quick--anuncios { background: rgba(251,191,36,.25); border-color: rgba(251,191,36,.45); }
.btn-quick--usuarios { background: rgba(244,114,182,.25); border-color: rgba(244,114,182,.45); }
.btn-quick--roles { background: rgba(168,85,247,.25); border-color: rgba(168,85,247,.45); }
.btn-quick--resp { background: rgba(34,197,94,.25); border-color: rgba(34,197,94,.45); }
.btn-quick--docs { background: rgba(255,99,64,.35); border-color: rgba(255,99,64,.60); }
.btn-quick--perfil { background: rgba(148,163,184,.25); border-color: rgba(148,163,184,.35); color: #e6edf3; }
.btn-quick--transporte { background: rgba(2,132,199,.30); border-color: rgba(2,132,199,.50); }
.btn-quick--dp { background: rgba(236,72,153,.28); border-color: rgba(236,72,153,.50); }
.btn-quick--vym { background: rgba(14,165,233,.22); border-color: rgba(14,165,233,.45); color:#e6edf3; }
.btn-quick i { font-size:1rem; }

/* Mobile: show only the grid quick menu (hide hamburger and legacy nav links) */
@media (max-width: 991.98px){
  .navbar .navbar-toggler { display: none !important; }
  .navbar .navbar-collapse { display: block !important; }
  .nav-user a.nav-link { display: none !important; }
  .nav-user > li:not(.nav-quick) { display: none !important; }
}

/* Desktop: centrar y ampliar la grilla del menú rápido */
@media (min-width: 992px){
  .dropdown-quick { min-width: 520px; }
  /* Centrar el menú rápido en escritorio */
  .nav-quick .dropdown-menu.dropdown-quick {
    position: fixed;
    top: 64px; /* aproximación a la altura del navbar */
    left: 50%;
    right: auto !important;
    transform: translateX(-50%);
    width: min(720px, 92vw);
  }
  /* Centrar el botón de la grilla en el navbar (escritorio) */
  .nav-quick { position: absolute; left: 50%; transform: translateX(-50%); }
  .dropdown-quick .grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .8rem;
    max-width: 640px;
    margin: 0 auto;
    justify-items: center;
  }
  .btn-quick { padding: .8rem 1rem; border-radius: 14px; }
  .btn-quick i { font-size: 1.25rem; }
}

/* Estado selects in task cards - dark, subtle, and on-brand */
.estado-select, .subestado-select {
  background-color: rgba(22,27,34,0.7) !important;
  color: var(--dash-text) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  padding-right: 2rem !important; /* room for arrow */
}
.estado-select:focus, .subestado-select:focus {
  border-color: rgba(var(--dash-accent-rgb), .6) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--dash-accent-rgb), .2) !important;
}
/* Slight hover lift */
.estado-select:hover, .subestado-select:hover { filter: brightness(1.03); }

/* Option menu colors (support varies by browser) */
.estado-select option, .subestado-select option {
  background-color: var(--dash-surface);
  color: var(--dash-text);
}

/* Accents per state (class applied via JS) */
.estado-select.estado-activo, .subestado-select.estado-activo {
  background-color: rgba(var(--dash-accent-rgb), .18) !important;
  border-color: rgba(var(--dash-accent-rgb), .55) !important;
}
.estado-select.estado-completo, .subestado-select.estado-completo {
  background-color: hsla(140, 70%, 35%, .22) !important;
  border-color: hsla(140, 70%, 45%, .6) !important;
}
.estado-select.estado-pendiente, .subestado-select.estado-pendiente {
  background-color: rgba(56,189,248, .22) !important; /* cyan-ish */
  border-color: rgba(56,189,248, .55) !important;
}
.estado-select.estado-bloqueado, .subestado-select.estado-bloqueado {
  background-color: hsla(30, 85%, 50%, .20) !important; /* amber/orange */
  border-color: hsla(30, 90%, 50%, .55) !important;
}
.estado-select.estado-otro, .subestado-select.estado-otro {
  background-color: rgba(255,255,255,.06) !important;
}

/* Neon/translucent task cards (mobile-safe) */
.neon-accent {
  background: rgba(22,27,34,0.6) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid var(--accent-bd, rgba(var(--dash-accent-rgb), .45)) !important;
  border-left: 4px solid var(--accent-bd, rgba(var(--dash-accent-rgb), .7)) !important;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 22px -6px var(--accent-shadow, rgba(var(--dash-accent-rgb), .25));
  color: var(--dash-text);
}
.neon-accent .card-body { background: transparent; }
.neon-accent .dropdown-menu.brand-menu {
  background: rgba(22,27,34,0.95);
  border-color: rgba(255,255,255,0.08);
}

/* Overdue pulsating accent */
.neon-pulse { position: relative; }
.neon-pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(220,53,69,.6);
  animation: neonPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes neonPulse {
  0% { box-shadow: 0 0 0 0 rgba(220,53,69,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(220,53,69,0); }
  100%{ box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* Team cards within horizontal scrollers */
.team-card { min-width: 86%; }
@media (min-width: 768px){ .team-card { min-width: 520px; } }

/* Ensure Bootstrap .card default white bg doesn't override on mobile */
.card.neon-accent { background-color: rgba(22,27,34,0.6) !important; }
.card.border-0.neon-accent { border: 1px solid var(--accent-bd, rgba(var(--dash-accent-rgb), .45)) !important; }

/* Task header badges readability */
.task-head .badge.bg-dark { background-color: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.12); }

/* Extras chips (assignees) spacing and look */
.extras-chips .badge { background: rgba(148,163,184,.25) !important; border: 1px solid rgba(148,163,184,.45); color: #e6edf3; }
.extras-chips .badge.bg-dark { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.2); color: #e6edf3; }

/* Keep task cards equal height and clamp preview text */
.card .desc-preview { max-height: 6.5em; overflow: hidden; }
.card .desc-preview p { margin: 0; }
.deck-scroll .card { height: 100%; }

/* Horizontal rows of team cards (no stacking/overlaying) */
.team-cards-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px){ .team-cards-scroll { grid-auto-columns: 520px; } }
.team-cards-scroll > .card { scroll-snap-align: start; }