/* Estilos del dashboard */
@import url('cssjw.css'); /* JW-like icon shim (safe, local) */
@import url('theme.css'); /* Theme: prefers-color-scheme + override */
:root {
	/* Colors come from theme.css; keep sensible fallbacks */
	--dash-bg: var(--app-bg, #0d1117);
	--dash-surface: var(--app-surface, #161b22);
	--dash-text: var(--app-text, #e6edf3);
	--dash-muted: var(--app-muted, #8b949e);
	--dash-accent: #0d6efd;
	--dash-accent-rgb: 13,110,253;
  --radius: 14px;
  --gradient: linear-gradient(135deg, rgba(var(--dash-accent-rgb),0.25) 0%, rgba(56,189,248,0.25) 100%);
	--shadow: var(--app-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%, color-mix(in srgb, var(--dash-surface) 40%, transparent), var(--dash-bg));
  color: var(--dash-text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  /* Android: keep text sizing consistent across devices/browsers */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Dashboard home base type (fixed px so desktop cards don't depend on html font-size scaling) */
body.dashboard-home { font-size: clamp(16.5px, 1.35vw, 18.5px); }

/* Dashboard card typography tokens (single source of truth)
  - Used by both dashboard-home and dashm-page quick cards.
  - Consumers should use var(..., fallback) to preserve behavior if overridden elsewhere. */
body.dashboard-home{
  --dash-qc-h5-size: 1.15em;
  --dash-qc-h5-letter: .2px;
  --dash-qc-h5-lh: 1.2;
  --dash-qc-p-size: 1.0em;
  --dash-qc-p-lh: 1.35;
  --dash-qc-btntile-size: 1.0em;
  --dash-qc-small-size: 1.02em;
  --dash-qc-small-lh: 1.35;
  --dash-qc-badge-size: .95em;
  --dash-qc-bsbtn-size: 1em;
}

/* Dash mobile/testing page: keep existing sizing but defined here */
body.dashm-page{
  --dash-qc-card-font-size: .88rem;
  --dash-qc-card-padding: .85rem .85rem .75rem;
  --dash-qc-card-gap: .28rem;
  --dash-qc-card-shadow: none;
  --dash-qc-h5-size: 1.0em;
  --dash-qc-h5-letter: .15px;
  --dash-qc-h5-lh: 1.2;
  --dash-qc-p-size: .92em;
  --dash-qc-p-lh: 1.3;
  --dash-qc-small-size: .84em;
  --dash-qc-small-lh: 1.25;
  --dash-qc-badge-size: .76em;
  --dash-qc-bsbtnsm-size: .76rem;
  --dash-qc-bsbtnsm-lh: 1.1;
}

.nav-glass { backdrop-filter: blur(10px) saturate(160%); background: var(--nav-bg); border: 1px solid var(--nav-border); 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 var(--dash-card-border, 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: var(--dash-card-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),.55); transform: translateY(-4px); box-shadow: var(--dash-card-shadow-hover, 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.1em; letter-spacing:.35px; display:flex; align-items:center; gap:.6rem; }
.quick-card p { margin:0; font-size:.9em; color: var(--dash-muted); }
.dash-icon { width: 1.9em; height: 1.9em; object-fit: contain; flex: 0 0 auto; display: inline-block; }
.dash-icon--light { display: none; }
.nav-quick .btn-icon .dash-icon { width: 24px; height: 24px; margin-right: 0 !important; }
.btn-quick .dash-icon { width: 1.35rem; height: 1.35rem; }
.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:.6rem 1rem; border-radius: 10px; font-size:.9em; letter-spacing:.2px; transition: background .3s, color .3s; border:1px solid rgba(var(--dash-accent-rgb),.4); }

/* Keep Bootstrap button sizing inside cards tied to card font-size (not root rem scaling) */
body.dashboard-home .quick-card .btn{ font-size: var(--dash-qc-bsbtn-size, 1em); }

/* IMPORTANT: card text sizing should follow the dashboard-home base font size.
  Use em-based overrides to avoid fixed rem sizes on Android. */
body.dashboard-home .quick-card h5{ font-size: 1.15em; letter-spacing: .2px; line-height: 1.2; }
body.dashboard-home .quick-card h5{ font-size: var(--dash-qc-h5-size, 1.15em); letter-spacing: var(--dash-qc-h5-letter, .2px); line-height: var(--dash-qc-h5-lh, 1.2); }
body.dashboard-home .quick-card p{ font-size: var(--dash-qc-p-size, 1.0em); line-height: var(--dash-qc-p-lh, 1.35); }
body.dashboard-home .quick-card a.btn-tile{ font-size: var(--dash-qc-btntile-size, 1.0em); }
body.dashboard-home .quick-card .small,
body.dashboard-home .quick-card small{ font-size: var(--dash-qc-small-size, 1.02em) !important; line-height: var(--dash-qc-small-lh, 1.35); }
body.dashboard-home .quick-card .badge{ font-size: var(--dash-qc-badge-size, .95em); }
.quick-card a.btn-tile:hover { background: var(--tile-bg-hover); color:#fff; }

/* Desktop: slightly larger cards */
@media (min-width: 992px){
	body.dashboard-home .quick-card{ font-size: 1.06em; }
	body.dashboard-home .quick-card{ padding: 1.25rem 1.25rem 1.1rem; }
}

/* Dashboard: bloques de asignaciones dentro de tarjetas (p.ej. Servicio/Limpieza/Reservas) */
.dash-asg-item{ padding: .25rem 0 .55rem; margin: 0; border-bottom: 1px solid color-mix(in srgb, var(--dash-card-border, rgba(255,255,255,.10)) 60%, transparent); }
.dash-asg-item:last-child{ border-bottom: 0; padding-bottom: 0; }
.dash-asg-meta{ display:flex; flex-wrap:wrap; align-items:center; gap: .4rem .45rem; margin-bottom: .2rem; font-size: .92em; }
.dash-asg-meta .badge{ font-size: .88em; }
.dash-asg-place{ font-weight: 650; line-height: 1.2; }
.dash-asg-item .text-secondary.small{ font-size: .94em !important; }

/* 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--vym { border-color: rgba(14,165,233,.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%); }
.quick-card--vym::before { background: linear-gradient(145deg, rgba(14,165,233,.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:.8rem; text-align:center; color: var(--dash-muted); }

/* Boost secondary text contrast a bit (Android screens tend to wash out grays) */
.dashboard-home .text-secondary { color: color-mix(in srgb, var(--dash-muted) 65%, var(--dash-text)) !important; }

/* Responsive tweaks */
@media (max-width: 600px){
  .quick-cards { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
  .quick-card { padding: .9rem .9rem .75rem; }
  body.dashboard-home { font-size: 19px; }
  .quick-card h5 { font-size: var(--dash-qc-h5-size, 1.05em); }
}

/* Mobile: always one column of cards (prevents 2 narrow columns on some Android/Xiaomi viewports) */
@media (max-width: 767.98px){
	body.dashboard-home .quick-cards{ grid-template-columns: 1fr !important; }

  /* Mobile: reduce card typography (users can increase via global font control). */
  body.dashboard-home .quick-card{ font-size: .72em; }

  /* Dashboard admin card: keep actions tidy (2 columns) */
  body.dashboard-home .quick-card--admin .action{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.dashboard-home .quick-card--admin .action > a.btn-tile{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Mobile collapsed view (icons only) */
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded){
    min-height: 68px;
    padding: .75rem;
    gap: .35rem;
    align-items: center;
    justify-content: center;
  }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) > :not(h5){
    display: none !important;
  }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) h5{
    margin: 0;
    width: 100%;
    justify-content: center !important;
    align-items: center;
    gap: .55rem;
    font-size: 1rem !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) h5 button{ display:none !important; }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) h5 .text-secondary{ display:none !important; }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) h5 .dash-icon{
    width: 34px;
    height: 34px;
    margin-right: 0 !important;
  }
  body.dashboard-home.ccg-dash-collapsed .quick-card:not(.ccg-dash-expanded) h5 i.bi{
    font-size: 34px !important;
    margin-right: 0 !important;
  }

  /* Expanded card inside collapsed mode behaves normally */
  body.dashboard-home.ccg-dash-collapsed .quick-card.ccg-dash-expanded h5{
    font-size: inherit !important;
    justify-content: space-between !important;
  }
  body.dashboard-home.ccg-dash-collapsed .quick-card.ccg-dash-expanded h5 button{ display:inline-flex !important; }
}

/* 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; }

/* Light theme: make PNG/SVG icons dark for contrast */
html[data-bs-theme="light"] .quick-card .dash-icon,
html[data-theme="light"] .quick-card .dash-icon,
html[data-bs-theme="light"] .dropdown-quick .dash-icon,
html[data-theme="light"] .dropdown-quick .dash-icon,
html[data-bs-theme="light"] .nav-quick .btn-icon .dash-icon,
html[data-theme="light"] .nav-quick .btn-icon .dash-icon {
  filter: brightness(0) saturate(100%);
  opacity: .95;
}

/* Light theme: do NOT darken explicit light variants */
html[data-bs-theme="light"] .quick-card .dash-icon--light,
html[data-theme="light"] .quick-card .dash-icon--light,
html[data-bs-theme="light"] .dropdown-quick .dash-icon--light,
html[data-theme="light"] .dropdown-quick .dash-icon--light,
html[data-bs-theme="light"] .nav-quick .btn-icon .dash-icon--light,
html[data-theme="light"] .nav-quick .btn-icon .dash-icon--light {
  filter: none;
  opacity: 1;
}

/* Theme-specific icon variants (optional): name.png + name-light.png */
html[data-bs-theme="light"] .dash-icon--dark,
html[data-theme="light"] .dash-icon--dark { display: none; }
html[data-bs-theme="light"] .dash-icon--light,
html[data-theme="light"] .dash-icon--light { display: inline-block; filter: none; opacity: 1; }

/* Light theme: quick grid tiles should use dark text/icons */
html[data-bs-theme="light"] .dropdown-quick .btn-quick,
html[data-theme="light"] .dropdown-quick .btn-quick {
  color: var(--app-text) !important;
}

/* 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 var(--quick-btn-border);
  background: var(--quick-btn-bg); border-color: var(--quick-btn-border); color: var(--dash-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.nav-quick .btn-icon:hover { filter: brightness(1.03); }
.dropdown-quick { min-width: 280px; background: var(--quick-bg); border:1px solid var(--quick-border); 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;
  touch-action: manipulation;
}
.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; }

/* Navbar: this app uses the quick-grid, not the hamburger collapse */
.nav-glass.navbar .navbar-toggler { display: none !important; }

/* Mobile: show only quick grid; keep layout clean */
@media (max-width: 991.98px){
  /* Keep the quick grid visible even without the hamburger toggler */
  .nav-glass.navbar{ flex-wrap: nowrap; }
  .nav-glass.navbar .navbar-collapse{
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    justify-content: center;
  }
  .nav-glass.navbar .navbar-nav{
    flex-direction: row !important;
    width: 100%;
    justify-content: center;
    margin-bottom: 0 !important;
  }
  .nav-glass.navbar .navbar-nav.ms-auto{ margin-left: 0 !important; }
  .nav-glass.navbar .nav-user > li:not(.nav-quick){ display: none !important; }

  /* Touch-first: make the quick grid feel like a modal panel */
  .nav-quick .dropdown-menu.dropdown-quick{
    position: fixed;
    top: 64px;
    left: 50%;
    right: auto !important;
    transform: translateX(-50%);
    width: min(560px, 94vw);
    max-height: calc(100vh - 84px);
    overflow: auto;
  }
  .dropdown-quick .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
  /* Mobile: make tiles perfectly square */
  .btn-quick{ justify-content: center; padding: 0; min-height: 0; aspect-ratio: 1 / 1; }
  .btn-quick i{ font-size: 1.1rem; }
  .btn-quick .dash-icon{ width: 1.45rem; height: 1.45rem; }
  .btn-quick .iconLink-icon{ transform: scale(1.0); transform-origin: center; }
}

@media (max-width: 575.98px){
  .dropdown-quick{ min-width: 0; }
  .dropdown-quick .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .btn-quick{ border-radius: 14px; }
}

/* 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.05rem; }
  .btn-quick .iconLink-icon{ transform: scale(1.0); transform-origin: center; }
}

/* Estado selects in task cards - dark, subtle, and on-brand */
.estado-select, .subestado-select {
  background-color: var(--dash-control-bg, rgba(22,27,34,0.7)) !important;
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-control-border, 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: color-mix(in srgb, var(--dash-surface) 70%, transparent) !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: var(--quick-bg);
  border-color: var(--quick-border);
}

/* 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: color-mix(in srgb, var(--dash-surface) 70%, transparent) !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: color-mix(in srgb, var(--dash-text) 14%, transparent) !important; border: 1px solid var(--app-border); color: var(--dash-text) !important; }

/* Extras chips (assignees) spacing and look */
.extras-chips .badge { background: color-mix(in srgb, var(--dash-muted) 18%, transparent) !important; border: 1px solid color-mix(in srgb, var(--dash-muted) 35%, transparent); color: var(--dash-text) !important; }
.extras-chips .badge.bg-dark { background: color-mix(in srgb, var(--dash-text) 10%, transparent) !important; border-color: var(--app-border); color: var(--dash-text) !important; }

/* 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; }