/* Paleta inspirada en Abanca (ver design.md) + estado funcional de dataviz */
:root {
  color-scheme: light;
  --page: #F8F8F8;
  --surface: #FFFFFF;
  --text-primary: #181B20;
  --text-secondary: #333333;
  --text-muted: #6B6F76;
  --border: #E4E4E4;
  --primary: #5A85D7;
  --primary-hover: #3E63A8;
  --primary-tint: #EAF0FB;
  --status-good: #0ca30c; --status-good-bg: rgba(12,163,12,0.12);
  --status-warning: #b8790a; --status-warning-bg: rgba(250,178,25,0.20);
  --status-critical: #d03b3b; --status-critical-bg: rgba(208,59,59,0.12);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #101317; --surface: #1A1E24; --text-primary: #FFFFFF; --text-secondary: #C4C8CE;
    --text-muted: #8B909A; --border: #2A2E35; --primary: #7FA3E6; --primary-hover: #A3C0F0;
    --primary-tint: #202A3B;
    --status-warning: #fab219; --status-warning-bg: rgba(250,178,25,0.16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101317; --surface: #1A1E24; --text-primary: #FFFFFF; --text-secondary: #C4C8CE;
  --text-muted: #8B909A; --border: #2A2E35; --primary: #7FA3E6; --primary-hover: #A3C0F0;
  --primary-tint: #202A3B;
  --status-warning: #fab219; --status-warning-bg: rgba(250,178,25,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page); color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
}
a { color: var(--primary); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

.demo-banner {
  background: var(--status-warning-bg); color: var(--text-primary); text-align: center;
  font-size: 12.5px; padding: 6px 10px; border-bottom: 1px solid var(--border);
}

nav.topnav {
  position: sticky; top: 0; z-index: 10; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
nav.topnav .inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center;
  gap: 22px; height: 56px;
}
nav.topnav .brand { font-weight: 700; color: var(--primary); font-size: 16px; text-decoration: none; }
nav.topnav a.link {
  color: var(--text-secondary); text-decoration: none; font-size: 13.5px; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
nav.topnav a.link:hover, nav.topnav a.link.active { color: var(--primary); border-bottom-color: var(--primary); }

.group-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--primary-tint); color: var(--primary); text-decoration: none;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.group-pill:hover, .group-pill.active { border-color: var(--primary); }
.group-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); }

h1 { font-size: 21px; margin: 26px 0 4px; }
h2 { font-size: 16px; margin: 0 0 4px; }
.subtitle { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 20px;
}
.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 20px 0 30px;
}
.tool-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  text-decoration: none; color: var(--text-primary); display: block; transition: border-color .15s;
}
.tool-card:hover { border-color: var(--primary); }
.tool-card .icon { font-size: 22px; margin-bottom: 8px; display: block; }
.tool-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.tool-card p { margin: 0; color: var(--text-muted); font-size: 12.5px; }

form .field { margin-bottom: 16px; }
form label.field-label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; }
input[type=file], select, input[type=text], input[type=date], input[type=number], textarea {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 8px; padding: 8px 10px; font-size: 13.5px; width: 100%; max-width: 420px;
}
textarea { font-family: inherit; resize: vertical; }
input[type=date], input[type=number] { max-width: 200px; }
.checklist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--page);
  max-height: 260px; overflow-y: auto;
}
.checklist label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.checklist input { accent-color: var(--primary); }
.radio-row { display: flex; gap: 18px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }

button, .btn {
  border: none; background: var(--primary); color: #fff; border-radius: 8px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--primary-hover); }
.btn.ghost {
  background: transparent; color: var(--primary); border: 1px solid var(--primary);
}
.btn.ghost:hover { background: var(--primary-tint); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.kpi .label { color: var(--text-muted); font-size: 11.5px; }
.kpi .value { font-size: 22px; font-weight: 700; }
.kpi .value.good { color: var(--status-good); }
.kpi .value.critical { color: var(--status-critical); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .02em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
tbody tr:hover td { background: var(--page); }
.table-scroll { overflow-x: auto; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 999px; }
.badge.good { color: var(--status-good); background: var(--status-good-bg); }
.badge.good .dot { background: var(--status-good); }
.badge.warning { color: var(--status-warning); background: var(--status-warning-bg); }
.badge.warning .dot { background: var(--status-warning); }
.badge.critical { color: var(--status-critical); background: var(--status-critical-bg); }
.badge.critical .dot { background: var(--status-critical); }

.diff-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.diff-list li { margin-bottom: 2px; }
.diff-list .before { color: var(--status-critical); text-decoration: line-through; }
.diff-list .after { color: var(--status-good); font-weight: 600; }

.help-box {
  background: var(--primary-tint); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 18px;
}
.errors-list { font-size: 12.5px; color: var(--status-critical); margin: 4px 0 0; padding-left: 18px; }

/* Sincronizacion entre etiqueta de columna y estado de la tarea */
.opcion-lista { display: flex; flex-direction: column; gap: 10px; }
.opcion-lista label { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; }
.opcion-lista input { accent-color: var(--primary); margin-top: 3px; }
.field-row { margin-bottom: 12px; font-size: 13.5px; color: var(--text-secondary); }
.field-row select { max-width: 280px; margin-left: 8px; }
.sync-table .before { color: var(--text-muted); text-decoration: line-through; }
.sync-table .after { color: var(--status-good); font-weight: 600; }
/* Una fila que no se puede aplicar sigue a la vista, pero apagada: lo que
   falta por emparejar es informacion, no ruido que haya que esconder. */
.sync-table tr.row-off td { opacity: .55; }
.sync-table tr.row-warn td { background: var(--status-critical-bg); }
.sync-table tr.row-warn:hover td { background: var(--status-critical-bg); }
.btn.danger, button.danger { background: var(--status-critical); }
.btn.danger:hover, button.danger:hover { filter: brightness(0.92); }

iframe.report-frame { width: 100%; height: 82vh; border: 1px solid var(--border); border-radius: 12px; }

.progress-track { background: var(--page); border: 1px solid var(--border); border-radius: 999px; height: 14px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px; width: 0%; transition: width .3s ease; }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; background: var(--page); border: 1px solid var(--border); border-radius: 10px; }

/* Secciones plegables (cabecera de card con flechita y contador) */
details.section > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: '\25B8'; font-size: 11px; color: var(--text-muted); }
details.section[open] > summary::before { content: '\25BE'; }
details.section > summary:hover .sec-title { color: var(--primary); }
details.section > summary .sec-title { font-size: 16px; font-weight: 600; }
details.section > summary .sec-count {
  margin-left: auto; background: var(--page); color: var(--text-muted);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
details.section > .section-body { margin-top: 12px; }

/* Controles y celdas usados por las tablas interactivas */
.tracking-select, .text-filter {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; width: auto; max-width: 320px;
}
.title-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titulo de tarea enlazado a GitLab. Va del color de enlace de la web, como
   cualquier otro enlace: un enlace que solo se descubre al pasar por encima no
   se encuentra, y el titulo es justo lo que se busca para abrir la tarea. */
.task-link { color: var(--primary); text-decoration: none; }
.task-link:hover, .task-link:focus-visible { text-decoration: underline; }
.empty-state { color: var(--text-muted); font-size: 13px; padding: 14px 2px; }
.export-btn {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-weight: 500;
}
.export-btn:hover { border-color: var(--primary); background: var(--page); }
.export-btn:disabled { opacity: .5; cursor: default; }
.export-btn:disabled:hover { border-color: var(--border); }

/* --- Visualizacion: tabla con filtros por columna -------------------------- */
.viz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.viz-toolbar .spacer { margin-left: auto; }
.viz-count { color: var(--text-muted); font-size: 12.5px; }

.viz-drop-btn {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.viz-drop-btn:hover { background: var(--page); border-color: var(--primary); }
.viz-drop-btn .n {
  background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px;
  min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex;
  align-items: center; justify-content: center;
}
.viz-drop-btn .n[hidden] { display: none; }

/* El panel es fixed y cuelga de <body>: dentro de un <th> lo recortaria el
   scroll horizontal de la tabla (overflow-x:auto fuerza overflow-y:auto). */
.viz-panel {
  position: fixed; width: 262px; max-height: 340px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.viz-panel[hidden] { display: none; }
.viz-panel-search {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%; max-width: none;
}
.viz-panel-actions { display: flex; gap: 6px; }
.viz-panel-actions button {
  flex: 1; border: 1px solid var(--border); background: var(--page); color: var(--text-secondary);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 500; cursor: pointer;
}
.viz-panel-actions button:hover { border-color: var(--primary); color: var(--primary); background: var(--page); }
.viz-panel-options { overflow-y: auto; max-height: 232px; display: flex; flex-direction: column; }
.viz-option {
  display: flex; align-items: center; gap: 8px; padding: 4px; font-size: 13px;
  border-radius: 6px; cursor: pointer;
}
.viz-option:hover { background: var(--page); }
.viz-option input { accent-color: var(--primary); flex: none; }
.viz-option .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-option .cnt { margin-left: auto; color: var(--text-muted); font-size: 11.5px; flex: none; }
.viz-option.disabled { opacity: .55; cursor: default; }
.viz-panel-empty { color: var(--text-muted); font-size: 12.5px; padding: 6px 4px; }

.viz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.viz-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--primary-tint);
  color: var(--primary); border: 1px solid transparent; border-radius: 999px;
  padding: 3px 6px 3px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.viz-chip:hover { border-color: var(--primary); }
.viz-chip .x {
  color: var(--text-muted); font-weight: 700; padding: 0 4px; border-radius: 999px;
}
.viz-chip .x:hover { color: var(--status-critical); }

/* Scroll propio (no el de la pagina): un ancestro con overflow-x:auto se
   convierte en el contenedor de referencia del sticky, asi que la cabecera
   solo se queda fija si es este div el que scrollea en vertical. */
.viz-table-wrap { overflow: auto; max-height: 68vh; }
.viz-table th, .viz-table td { white-space: nowrap; }
.viz-head-row th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
}
.viz-head-row th .inner { display: flex; align-items: center; gap: 4px; }
.viz-filter-row th {
  position: sticky; top: var(--viz-head-h, 30px); z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 4px 8px 8px; text-transform: none; letter-spacing: normal; vertical-align: top;
}
.viz-th-sort { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.viz-th-sort:hover { color: var(--primary); }
.viz-th-sort .arrow { opacity: .45; font-size: 9px; }
.viz-th-sort .arrow.on { opacity: 1; color: var(--primary); }
.viz-th-hide { margin-left: auto; color: var(--text-muted); cursor: pointer; opacity: 0; padding: 0 2px; }
.viz-head-row th:hover .viz-th-hide { opacity: 1; }
.viz-th-hide:hover { color: var(--status-critical); }

/* max-width:none anula el max-width:420px que app.css da a los inputs */
.viz-range { display: flex; gap: 4px; }
.viz-range input, .viz-th-text, .viz-th-pick {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 400;
  width: 100%; max-width: none; min-width: 0;
}
.viz-range input { width: 92px; }
.viz-th-text { min-width: 130px; }
.viz-th-pick { text-align: left; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.viz-th-pick:hover { border-color: var(--primary); background: var(--page); }
.viz-th-pick .lbl { overflow: hidden; text-overflow: ellipsis; }
.viz-th-pick .caret { margin-left: auto; color: var(--text-muted); font-size: 9px; }
.viz-th-pick.on { border-color: var(--primary); color: var(--primary); }

.viz-cell-desc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.viz-more { text-align: center; padding: 14px 12px 2px; color: var(--text-muted); font-size: 12.5px; }
.viz-more button { margin-left: 8px; }

/* --- Gestion de sprint V2: tabla iteraciones x personas y su modal --------- */
/* Celda pulsable: es un boton para que funcione con teclado, pero no debe
   parecer uno (la tabla se llenaria de botones azules). */
.matrix-cell-btn {
  background: none; border: none; color: var(--primary); font-weight: 700; font-size: 13px;
  padding: 0 4px; cursor: pointer; border-radius: 6px;
}
.matrix-cell-btn:hover { background: var(--primary-tint); text-decoration: underline; }
.matrix-cell-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Celda vacia: se puede abrir para crear una tarea ahi, pero el '+' solo
   aparece al apuntarla, para no llenar la tabla de simbolos. */
.matrix-cell-btn.empty { color: var(--text-muted); opacity: 0; font-weight: 400; }
.matrix-cell-btn.empty:hover, .matrix-cell-btn.empty:focus-visible { opacity: 1; }
th.combo-col { color: var(--primary); }

/* Iteraciones agrupadas por cadencia: una cabecera cada vez que cambia, tanto
   en el filtro como en la propia tabla. */
.iter-group { margin-bottom: 12px; }
.iter-group-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
/* Solo el primer boton empuja a la derecha: con 'auto' en los dos, el hueco
   libre se repartiria entre ambos y quedarian separados entre si. */
.iter-group-head .export-btn { padding: 2px 8px; font-size: 11.5px; }
.iter-group-head .export-btn:first-of-type { margin-left: auto; }
tbody tr.cadence-row td {
  background: var(--page); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 10px; white-space: nowrap;
}
tbody tr.cadence-row:hover td { background: var(--page); }
.cadence-toggle {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--text-secondary);
  font: inherit; text-transform: uppercase; letter-spacing: .04em;
}
.cadence-toggle:hover { color: var(--primary); }
.cadence-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Lineas verticales solo en la tabla de reparto: con 20 columnas de personas,
   seguir una fila sin ellas es adivinar. */
#matrixWrap table th + th, #matrixWrap table td + td { border-left: 1px solid var(--border); }
#matrixWrap table th:last-child, #matrixWrap table td:last-child { border-left-width: 2px; }
#matrixWrap table td { text-align: center; }
#matrixWrap table td.title-cell, #matrixWrap table th:first-child { text-align: left; }

.task-label {
  display: inline-block; background: var(--primary-tint); color: var(--primary);
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}

.gm-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gm-modal[hidden] { display: none; }
.gm-modal-dialog {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28); width: min(900px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
}
.gm-modal-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.gm-modal-head h2 { margin: 0; }
.gm-modal-head .export-btn { margin-left: auto; }
.gm-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.gm-modal-panes { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
/* Sin min-width:0 la columna 1fr toma el ancho de su contenido (un titulo
   largo sin espacios) y desborda el dialogo, que recorta a la derecha. */
.gm-modal-panes > div { min-width: 0; }
.gm-modal-foot {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}
.gm-modal-foot .btn { margin-left: auto; }

.task-card {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-bottom: 8px;
  background: var(--page); border: 1px solid var(--border); border-radius: 10px; cursor: grab;
}
.task-card:hover { border-color: var(--primary); }
.task-card.dragging { opacity: .45; }
.task-card.moved { border-color: var(--status-good); }
.task-card input { accent-color: var(--primary); margin-top: 2px; flex: none; }
.task-card-main { min-width: 0; flex: 1; }
.task-card-title { font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
.task-card-meta { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; overflow-wrap: anywhere; }
.task-id { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12px; margin-right: 2px; }
.task-card-shared { color: var(--status-warning); font-size: 11.5px; margin-top: 3px; }
.task-card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Filtro plegable dentro de una card: mismo mecanismo que details.section,
   pero con la cabecera al tamano del texto normal, no al de un titulo. */
details.section.subsection > summary .sec-title { font-size: 13.5px; font-weight: 600; }
.task-card-move { font-size: 11.5px; margin-top: 3px; }
.task-card-move .before { color: var(--text-muted); text-decoration: line-through; }
.task-card-move .after { color: var(--status-good); font-weight: 600; }

.dropzone {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; margin-bottom: 6px;
  border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px;
  color: var(--text-secondary); background: var(--page);
}
.dropzone.over { border-color: var(--primary); border-style: solid; background: var(--primary-tint); }
.dropzone.origin { opacity: .6; }
.dropzone-count { margin-left: auto; color: var(--text-muted); font-weight: 600; }

.new-task-form { padding: 14px 16px; margin-bottom: 12px; }
.new-task-form .field { margin-bottom: 10px; }
.new-task-form .tracking-select, .new-task-form .text-filter { width: 100%; max-width: none; }

@media (max-width: 720px) {
  .gm-modal-panes { grid-template-columns: 1fr; }
}

/* --- Chips (vacaciones y editor de personas de una tarea) ------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--primary-tint);
  color: var(--primary); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.chip.chip-new { background: var(--status-good-bg); color: var(--status-good); }
.chip .x {
  cursor: pointer; border: none; background: none; color: inherit; font-weight: 700;
  padding: 0; line-height: 1; font-size: 13px;
}
.chip .x:hover { color: var(--status-critical); }

/* --- Vacaciones: coloreado de celdas del reparto por disponibilidad -------- */
/* Persona fuera todo el sprint (o, en una celda compartida, algun miembro
   fuera todo el sprint) en rojo; fuera solo parte del sprint en naranja. */
#matrixWrap td.cell-absent-full { background: var(--status-critical-bg); }
#matrixWrap td.cell-absent-partial { background: var(--status-warning-bg); }
.cap-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12px; color: var(--text-muted); margin: 8px 0 2px;
}
.cap-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cap-legend .swatch.full { background: var(--status-critical-bg); border: 1px solid var(--status-critical); }
.cap-legend .swatch.partial { background: var(--status-warning-bg); border: 1px solid var(--status-warning); }

/* --- Tablero de estados: matriz Estado x etiqueta State:: ------------------ */
/* La diagonal (etiqueta y estado dicen lo mismo) se marca en verde: es lo que
   ya esta bien, y verla de un vistazo es el motivo de que exista la pantalla. */
#matrixWrap td.cell-alineada { background: var(--status-good-bg); }
#matrixWrap td.cell-vacia { color: var(--border); text-align: center; }
/* Columnas cuyo estado cierra la tarea: se ensenan (puede haber alguna abierta
   ahi) pero no admiten soltar, y hay que verlo antes de intentarlo. */
#matrixWrap th.col-cierra { color: var(--text-muted); }
.dropzone.bloqueada {
  opacity: .55; cursor: not-allowed; border-style: solid; border-color: var(--border);
  flex-direction: column; align-items: flex-start; gap: 2px;
}
.dropzone .dz-meta { color: var(--text-muted); font-size: 11px; }
.title-cell .cleanRowBtn { margin-left: 8px; font-size: 11px; }

/* --- Tarea: borrar un alta y editar sus personas -------------------------- */
.export-btn.danger { color: var(--status-critical); }
.export-btn.danger:hover { border-color: var(--status-critical); background: var(--status-critical-bg); }
.task-card-people { margin-top: 6px; }
.task-card-people .assignee-add { font-size: 12px; margin-top: 4px; max-width: 220px; }
.task-card-people .people-editor { margin-top: 6px; }
.task-card-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
/* Grupos de cadencia dentro del modal de mover: la cabecera pliega sus zonas. */
.dz-group { margin-bottom: 8px; }
.dz-group .cadence-toggle { display: block; margin-bottom: 4px; }
/* Anotaciones de cada destino: carga de las personas de la celda y aviso de
   vacaciones de las personas de las tareas seleccionadas. */
.dropzone .dz-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.dz-load {
  color: var(--text-secondary); background: var(--primary-tint); border-radius: 999px;
  padding: 0 7px; font-size: 11px; font-weight: 600;
}
.dropzone.dz-vac-full { border-color: var(--status-critical); border-style: solid; background: var(--status-critical-bg); }
.dropzone.dz-vac-partial { border-color: var(--status-warning); border-style: solid; background: var(--status-warning-bg); }


/* --- Bloques de trabajo de "Definicion de tareas GitLab" ------------------
   Una card que se pliega. No reutiliza details.section porque aquel esta
   pensado para filtros DENTRO de una card, y aqui cada bloque tiene que
   leerse como una herramienta distinta: caja marcada, icono y descripcion
   visible tambien plegado, para poder elegir sin abrir. */
details.work-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 16px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
details.work-block:hover { border-color: var(--primary); }
details.work-block[open] { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

details.work-block > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 18px 20px;
}
details.work-block > summary::-webkit-details-marker { display: none; }
details.work-block > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
details.work-block[open] > summary { border-bottom: 1px solid var(--border); }

details.work-block .wb-icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
details.work-block .wb-text { min-width: 0; }
details.work-block .wb-title { font-size: 15.5px; font-weight: 700; display: block; }
details.work-block:hover .wb-title { color: var(--primary); }
details.work-block .wb-desc { font-size: 12.5px; color: var(--text-muted); display: block; margin-top: 2px; }

details.work-block .wb-caret {
  margin-left: auto; flex: none; color: var(--text-muted); font-size: 12px;
  transition: transform .15s;
}
details.work-block[open] .wb-caret { transform: rotate(90deg); color: var(--primary); }

details.work-block .wb-body { padding: 18px 20px 20px; }

.wb-tag {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  background: var(--page); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}