@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-3-latin-wght.woff2) format('woff2'); }

:root {
  --plx: #3aaa35; --plx-700: #246b1c; --plx-900: #1a4617; --plx-50: #f1faf0; --plx-100: #ddf2db;
  --ambar: #f6a317; --tinta: #1d2420; --tinta-5: #5a655e; --linea: #e3e8e4; --fondo: #f6f8f6; --blanco: #fff;
  --display: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  --r: 12px; --sombra: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(15 20 17 / .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--sans); color: var(--tinta); background: var(--fondo); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: .01em; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--plx)); flex: none; }
.diamond { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: var(--c, var(--ambar)); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c, var(--ambar)); flex: none; }

/* ---------- login ---------- */
body.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, var(--plx-100), transparent 50%), linear-gradient(160deg, var(--plx-50), #fff 60%); }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 18px; padding: 36px 32px; box-shadow: 0 10px 40px rgb(26 70 23 / .12); border-top: 6px solid var(--plx); }
.login-logo { display: block; max-width: 200px; height: auto; margin: 0 auto 20px; }
.login-card h1 { font-size: 30px; text-align: center; color: var(--plx-900); }
.login-sub { text-align: center; color: var(--tinta-5); margin: 6px 0 22px; }
.login-error { background: #fdecea; color: #a12622; border-radius: 8px; padding: 10px 12px; font-weight: 600; margin: 0 0 16px; }
.login-card label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.login-card input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid #cfd8d1; border-radius: 10px; font: inherit; }
.login-card button { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: var(--plx); color: #fff; font-weight: 700; font-size: 17px; margin-top: 6px; }
.login-card button:hover { background: var(--plx-700); }

/* ---------- cabecera ---------- */
.top { background: linear-gradient(120deg, var(--plx-900), var(--plx-700) 55%, var(--plx)); color: #fff; }
.top-in { max-width: 1320px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.top-logo { height: auto; max-width: 150px; }
.top-title { flex: 1; min-width: 200px; border-left: 1px solid rgb(255 255 255 / .3); padding-left: 24px; }
.top-title h1 { font-size: 30px; }
.top-title p { margin: 2px 0 0; opacity: .85; font-size: 15px; }
.top-actions { display: flex; gap: 8px; }
.top-actions form { margin: 0; }
.btn-ghost { background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .35); color: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: 14px; }
.btn-ghost:hover { background: rgb(255 255 255 / .22); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 22px 24px 60px; }

/* ---------- resumen ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stat { background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); }
.stat strong { display: block; font: 700 32px/1 var(--display); color: var(--plx-700); }
.stat span { font-size: 13px; color: var(--tinta-5); }
.bar { height: 6px; background: var(--plx-100); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--plx); }

.next { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 16px; background: #fff8e8; border: 1px solid #fde3a7; border-radius: var(--r); }
.next-k { font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #9a6206; }
.next-t { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-weight: 700; font-size: 17px; text-decoration: underline; text-decoration-color: #e9c46a; text-underline-offset: 3px; }
.next-d { color: var(--tinta-5); }

/* ---------- barra de herramientas ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.tabs { display: inline-flex; background: #fff; border-radius: 10px; padding: 4px; box-shadow: var(--sombra); }
.tabs button { border: 0; background: none; padding: 8px 16px; border-radius: 7px; font-weight: 600; color: var(--tinta-5); }
.tabs button[aria-selected=true] { background: var(--plx); color: #fff; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select, .filters input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #cfd8d1; border-radius: 8px; background: #fff; }
.filters input { min-width: 180px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; color: var(--tinta-5); }
.chip.on { border-color: var(--c); color: var(--tinta); background: color-mix(in srgb, var(--c) 10%, #fff); }
.chip:not(.on) .dot { opacity: .35; }
.chip.reset { border-style: dashed; }

/* ---------- pastillas ---------- */
.pill { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 6px; padding: 4px 7px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.pill span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pill:hover { background: color-mix(in srgb, var(--c) 22%, #fff); }
.pill.hito { background: var(--c); color: #fff; }
.pill.hito .diamond { background: #fff; box-shadow: none; border: 0; width: 8px; height: 8px; }
.pill.cont { opacity: .7; font-weight: 500; }

/* ---------- calendario ---------- */
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cal-h { font: 700 15px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-5); padding: 0 4px; }
.cal-d { background: #fff; border-radius: var(--r); min-height: 150px; padding: 8px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.cal-d.vacio { background: transparent; box-shadow: none; }
.cal-d.pasado { opacity: .62; }
.cal-d.hoy { outline: 3px solid var(--ambar); }
.cal-n { display: flex; align-items: baseline; gap: 6px; }
.cal-n b { font: 700 24px/1 var(--display); }
.cal-wd { display: none; font-size: 12px; text-transform: capitalize; color: var(--tinta-5); }
.cal-n em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--ambar); color: #fff; border-radius: 4px; padding: 1px 6px; }
.cal-t { display: flex; flex-direction: column; gap: 4px; }
.feriado { font-size: 11px; color: #9a6206; background: #fff8e8; border-radius: 4px; padding: 1px 6px; }
.libre { color: #c4ccc6; font-size: 13px; }

/* ---------- Gantt ---------- */
.g-leg { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--tinta-5); margin-bottom: 10px; }
.g-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lg-bar { display: inline-block; width: 26px; height: 10px; border-radius: 4px; background: var(--plx); }
.lg-bar.prop { background: repeating-linear-gradient(45deg, var(--plx), var(--plx) 4px, color-mix(in srgb, var(--plx) 65%, #fff) 4px, color-mix(in srgb, var(--plx) 65%, #fff) 8px); }
.lg-hoy { display: inline-block; width: 12px; height: 12px; background: #fff3d6; border: 2px solid var(--ambar); }
.gantt { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow-x: auto; }
.g-in { min-width: 1000px; }
.g-row { display: grid; align-items: center; position: relative; min-height: 38px; border-bottom: 1px solid var(--linea); }
.g-lab { grid-column: 1; grid-row: 1; padding: 6px 12px; position: sticky; left: 0; background: #fff; z-index: 2; border-right: 1px solid var(--linea); align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.g-sem { min-height: 30px; background: var(--plx-50); }
.g-sem .g-lab { background: var(--plx-50); }
.g-semc { grid-row: 1; text-align: center; font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--plx-700); border-left: 2px solid #fff; }
.g-head { background: #fafbfa; font-size: 13px; }
.g-head .g-lab { background: #fafbfa; font-weight: 700; font-size: 13px; color: var(--tinta-5); }
.g-day { grid-row: 1; text-align: center; font-weight: 700; line-height: 1.1; padding: 4px 0; }
.g-day small { display: block; font-weight: 400; color: var(--tinta-5); font-size: 11px; }
.g-day.hoy { background: #fff3d6; color: #9a6206; }
.g-day.fer small::after { content: '•'; color: var(--ambar); }
.g-act { background: color-mix(in srgb, var(--c) 7%, #fff); }
.g-act .g-lab { background: color-mix(in srgb, var(--c) 7%, #fff); }
.g-act .g-lab b { font: 700 16px/1.15 var(--display); }
.g-act .g-lab b .dot { margin-right: 7px; vertical-align: 1px; }
.g-act .g-lab small { color: var(--tinta-5); font-size: 12px; padding-left: 17px; }
.g-actline { grid-row: 1; height: 3px; background: color-mix(in srgb, var(--c) 25%, transparent); }
.g-task { border: 0; border-right: 1px solid var(--linea); text-align: left; }
.g-task span { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-task small { font-size: 12px; color: var(--tinta-5); }
.g-task:hover span { text-decoration: underline; }
.g-cell { grid-row: 1; align-self: stretch; border-left: 1px dashed #eef1ef; }
.g-cell.hoy { background: #fff8e8; }
.g-bar { grid-row: 1; z-index: 1; height: 22px; margin: 0 3px; border: 0; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.g-bar.prop { background: repeating-linear-gradient(45deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 72%, #fff) 6px, color-mix(in srgb, var(--c) 72%, #fff) 12px); }
.g-bar.hito { background: transparent; }
.g-bar.hito .diamond { width: 16px; height: 16px; }
.g-bar:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgb(0 0 0 / .18); }

/* ---------- detalle por actividad ---------- */
.act { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); border-top: 5px solid var(--c); padding: 20px 22px; margin-bottom: 18px; }
.act-h { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.act-h h2 { font-size: 26px; }
.act-meta { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; }
.act-meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-5); }
.act-meta dd { margin: 0; font-weight: 700; }
.act-obj { color: var(--tinta-5); margin: 10px 0 16px; max-width: 900px; }
.steps { list-style: none; padding: 0; margin: 0; border-left: 3px solid color-mix(in srgb, var(--c) 30%, #fff); }
.steps > li { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 12px 0 12px 18px; position: relative; border-bottom: 1px solid var(--linea); }
.steps > li:last-child { border-bottom: 0; }
.steps > li::before { content: ''; position: absolute; left: -8px; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.steps > li.hito::before { background: var(--c); border-radius: 2px; transform: rotate(45deg); }
.step-d { font-weight: 700; color: var(--tinta-5); font-size: 14px; }
.step-t { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: 700 19px/1.2 var(--display); text-align: left; }
.step-t:hover { text-decoration: underline; }
.step-b p { margin: 6px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef1ef; color: var(--tinta-5); }
.tag.fijo { background: var(--plx-100); color: var(--plx-900); }
.tag.prop { background: #eef1ef; color: var(--tinta-5); border: 1px dashed #b8c2bb; }
.tag.st-prog { background: #e8f0fb; color: #1e4f8c; }
.tag.st-curso { background: #fff3d6; color: #8a5600; }
.tag.st-conf { background: #fdecea; color: #a12622; }
.tag.st-ok { background: var(--plx-100); color: var(--plx-900); }
.tag.hito-t { background: var(--ambar); color: #fff; }
.ent { margin: 6px 0 0; padding-left: 20px; font-size: 15px; }
.ent li::marker { color: var(--plx); }

.notes { margin-top: 26px; background: #fff; border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sombra); font-size: 14px; color: var(--tinta-5); }
.notes h3 { font-size: 18px; color: var(--tinta); }
.notes ul { margin: 8px 0 0; padding-left: 20px; }
.vacio-msg { padding: 24px; color: var(--tinta-5); text-align: center; }

/* ---------- diálogo ---------- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
dialog::backdrop { background: rgb(15 20 17 / .45); }
.d-body { padding: 26px 26px 22px; overflow-y: auto; max-height: calc(100vh - 40px); }
.d-act { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-5); }
.d-body h2 { font-size: 30px; margin: 6px 40px 8px 0; display: flex; align-items: center; gap: 10px; }
.d-body h3 { font-size: 17px; margin: 18px 0 4px; color: var(--plx-700); text-transform: uppercase; letter-spacing: .04em; }
.d-body p { margin: 0; }
.d-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; background: var(--fondo); border-radius: 10px; padding: 12px; }
.d-meta dt { font-size: 12px; color: var(--tinta-5); text-transform: uppercase; letter-spacing: .05em; }
.d-meta dd { margin: 0; font-weight: 700; }
.deps { display: flex; flex-direction: column; gap: 6px; }
.dep { display: inline-flex; align-items: center; gap: 8px; text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 14px; }
.dep:hover { border-color: var(--c); }
dialog form { margin: 0; }
.d-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fondo); font-size: 22px; line-height: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats .stat:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 760px) {
  .top-in { padding: 14px 16px; gap: 12px; }
  .top-title { border-left: 0; padding-left: 0; flex-basis: 100%; order: 3; }
  .top-title h1 { font-size: 24px; }
  .top-actions { margin-left: auto; }
  .wrap { padding: 16px 14px 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat strong { font-size: 26px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .tabs { display: flex; }
  .tabs button { flex: 1; padding: 8px 6px; font-size: 14px; }
  .filters > * { flex: 1 1 140px; }
  .cal { grid-template-columns: 1fr; }
  .cal-h, .cal-d.vacio { display: none; }
  .cal-d { min-height: 0; }
  .cal-wd { display: inline; }
  .steps > li { grid-template-columns: 1fr; gap: 4px; }
  .d-meta { grid-template-columns: 1fr; }
}

/* ---------- impresión ---------- */
@media print {
  @page { size: letter; margin: 12mm; }
  body { background: #fff; font-size: 12px; }
  .top { background: none; color: var(--tinta); border-bottom: 3px solid var(--plx); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top-logo { display: none; }
  .top-actions, .toolbar, .chips, .next, #view-cal, #view-gantt, dialog { display: none !important; }
  #view-list { display: block !important; }
  .stat, .act, .notes { box-shadow: none; border: 1px solid var(--linea); }
  .act { break-inside: avoid-page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .steps > li { break-inside: avoid; }
}