/* ==========================================================================
   Kuper - Tema estilo MeisterTask para Vikunja (frontend propio v2.4.0)
   Filtros/vistas teletransportados al topbar (#header-toolbar)
   ========================================================================== */

:root{
  --kuper-accent:#2f6df6;
  --kuper-accent-soft:rgba(47,109,246,.14);
  --kuper-radius:12px;
}
html,body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

img.logo{height:auto!important;inline-size:auto!important;max-inline-size:150px!important;max-block-size:34px!important;object-fit:contain!important;display:block!important}

/* ======================================================================
   TOPBAR: logo | menu | titulo (izq) | barra vistas+filtros | usuario
   ====================================================================== */
.navbar{
  background:var(--site-background)!important;
  border-bottom:1px solid var(--card-border-color)!important;
  gap:.4rem!important;padding-inline:1rem!important;
}
.navbar .menu-button{margin:0 .25rem 0 0!important}
.navbar .project-title-wrapper{margin:0!important;padding-inline:.35rem!important;flex:0 0 auto!important}
.navbar .project-title{font-size:1.15rem!important;font-weight:700!important;color:var(--text-strong)!important}
.navbar .project-title-button{color:var(--text-muted)!important}

/* contenedor destino del teleport (ocupa el centro/derecha del topbar) */
.navbar .header-toolbar{
  flex:1 1 auto!important;min-inline-size:0!important;
  display:flex!important;align-items:center!important;align-self:center!important;
  justify-content:flex-end!important;gap:.5rem!important;padding-inline:.75rem!important;
}
/* la barra teletransportada dentro del topbar */
#header-toolbar .switch-view-container{
  margin:0!important;min-block-size:auto!important;inline-size:100%!important;
  flex:1 1 auto!important;gap:.75rem!important;
}
.navbar-end .base-button:hover,.navbar-end button:hover,.navbar .username-dropdown-trigger:hover{background:var(--kuper-accent-soft)!important;border-radius:9px!important}

/* control segmentado de vistas */
.switch-view{display:inline-flex!important;gap:2px!important;padding:3px!important;background:var(--scheme-main-ter)!important;border:1px solid var(--card-border-color)!important;border-radius:11px!important;box-shadow:none!important}
.switch-view-button{padding:.3rem .8rem!important;margin:0!important;border-radius:8px!important;font-weight:600!important;color:var(--text-muted)!important;background:transparent!important;border:none!important;transition:all .12s ease!important}
.switch-view-button:hover{color:var(--text-strong)!important;background:var(--kuper-accent-soft)!important}
.switch-view-button.is-active{background:var(--kuper-accent)!important;color:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.22)!important}
.switch-view-dropdown-trigger{background:var(--kuper-accent)!important;color:#fff!important;border-radius:9px!important}
.switch-view-container .button{border-radius:9px!important}

/* ======================================================================
   SIDEBAR compacta y moderna
   ====================================================================== */
.menu-container{background:var(--site-background)!important;border-right:1px solid var(--card-border-color)!important;padding:.5rem .35rem!important}
.menu-container .menu + .menu{padding-block-start:.35rem!important;margin-block-start:.35rem!important}
.menu-container .menu-label{text-transform:uppercase!important;font-size:.66rem!important;letter-spacing:.09em!important;font-weight:700!important;color:var(--text-muted)!important;padding-inline-start:.7rem!important;margin-block:.6rem .2rem!important}
.top-menu .menu-list li>a,.top-menu .menu-list .list-menu-link{padding:.5rem .65rem!important;margin:1px .2rem!important;border-radius:9px!important;transition:background .12s ease,color .12s ease,box-shadow .12s ease!important}
.top-menu .menu-list li>a:hover{background:var(--kuper-accent-soft)!important;color:var(--kuper-accent)!important}
.top-menu .menu-list li>a.router-link-active,.top-menu .menu-list li>a.router-link-exact-active{background:var(--kuper-accent-soft)!important;color:var(--kuper-accent)!important;font-weight:700!important;box-shadow:inset 3px 0 0 var(--kuper-accent)!important}
.menu-list .navigation-item{border-radius:9px!important;margin:1px .2rem!important;transition:background .12s ease,box-shadow .12s ease!important}
.menu-list .navigation-item:hover{background:var(--kuper-accent-soft)!important}
.menu-list .list-menu-link{padding:.45rem .55rem!important;border-radius:9px!important;font-weight:500!important}
.menu-list .navigation-item:has(.router-link-exact-active){background:var(--kuper-accent-soft)!important;box-shadow:inset 3px 0 0 var(--kuper-accent)!important}
.menu-list .navigation-item:has(.router-link-exact-active) .list-menu-link,.menu-list .navigation-item:has(.router-link-exact-active) .project-menu-title{color:var(--kuper-accent)!important;font-weight:700!important}

/* ======================================================================
   KANBAN - columnas transparentes
   ====================================================================== */
.kanban .bucket{background:transparent!important;border:none!important;box-shadow:none!important;overflow:visible!important;padding:0!important}
.kanban .bucket .bucket-header{background:transparent!important;border:none!important;font-weight:700!important;color:var(--text-strong)!important;text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.25);padding:.5rem .25rem!important}
.kanban .bucket .bucket-header .title{font-weight:700!important}
.kanban .bucket .task-item{background:transparent!important;background-color:transparent!important;padding:.25rem 0!important}
.kanban .bucket .tasks{background:transparent!important}
.kanban .bucket .task{background:var(--white)!important;border:1px solid var(--card-border-color)!important;border-radius:10px!important;box-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12)!important;padding:.7rem .8rem!important;margin:0!important;transition:transform .12s ease,box-shadow .12s ease!important}
.kanban .bucket .task:hover{transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(0,0,0,.28)!important}
.kanban .bucket .task .kanban-card__title-link{font-weight:600!important;color:var(--text-strong)!important}
.kanban .bucket .bucket-footer{background:transparent!important;background-color:transparent!important;border:none!important;box-shadow:none!important}
.kanban .bucket .bucket-footer .button{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:9px!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kanban .bucket .bucket-footer .button:hover{background:rgba(255,255,255,.22)!important}

.tag{border-radius:6px!important;font-weight:600!important;letter-spacing:.01em}

/* ======================================================================
   DETALLE DE TAREA
   ====================================================================== */
.task-view.is-modal,.modal-content .task-view{border-radius:16px!important;box-shadow:0 24px 60px rgba(0,0,0,.28)!important;overflow:hidden}
.task-view{color:var(--text)!important}
.task-view .detail-title,.task-view .heading .title{font-weight:700!important;color:var(--text-strong)!important;letter-spacing:-.01em}
.task-view .detail-content h3,.task-view .details h3{font-weight:700!important;color:var(--text-strong)!important}
.task-view .tiptap__task-description{background:var(--scheme-main-bis)!important;border:1px solid var(--card-border-color)!important;border-radius:10px!important;padding:.85rem 1rem!important}
.task-view .action-buttons .action-heading{text-transform:uppercase!important;font-size:.68rem!important;letter-spacing:.09em!important;font-weight:700!important;color:var(--text-muted)!important;margin-top:1.1rem!important}
.task-view .action-buttons .button{justify-content:flex-start!important;text-align:left!important;text-transform:none!important;font-weight:600!important;border-radius:9px!important;background:var(--white)!important;border:1px solid var(--card-border-color)!important;color:var(--text-strong)!important;box-shadow:none!important}
.task-view .action-buttons .button:hover{background:var(--kuper-accent-soft)!important;border-color:var(--kuper-accent)!important;color:var(--kuper-accent)!important}
.task-view .action-buttons .button--mark-done,.task-view .button--mark-done{background:#22a06b!important;border:none!important;color:#fff!important;font-weight:700!important}
.task-view .action-buttons .button--mark-done:hover,.task-view .button--mark-done:hover{background:#1c8b5c!important}

.card{border-radius:12px!important;border:1px solid var(--card-border-color)!important}
.input,.textarea,.select select{border-radius:9px!important}