/* Capa visual: iconografía SVG unificada, densidad de escritorio, controles con estilo y estados. Solo CSS; no cambia el marcado. */
:root{
  --icon-grid:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>");
  --icon-tasks:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h12M9 12h12M9 18h12'/><path d='M3 6l1.2 1.2L6.5 4.8M3 12l1.2 1.2 2.3-2.4M3 18l1.2 1.2 2.3-2.4'/></svg>");
  --icon-tag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3h8.5L21 12.5 12.5 21 3 11.5z'/><circle cx='7.5' cy='7.5' r='1.2' fill='black'/></svg>");
  --icon-filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M6 12h12M10 18h4'/></svg>");
  --icon-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l4.5 4.5L19.5 7'/></svg>");
  --icon-minus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>");
  --icon-grip:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='9' cy='5' r='1.8'/><circle cx='15' cy='5' r='1.8'/><circle cx='9' cy='12' r='1.8'/><circle cx='15' cy='12' r='1.8'/><circle cx='9' cy='19' r='1.8'/><circle cx='15' cy='19' r='1.8'/></svg>");
  --icon-dots:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='5' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='12' cy='19' r='2'/></svg>");
  --icon-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>");
  --icon-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>");
  --icon-down:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --icon-updown:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4'/></svg>");
  --icon-pencil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10z M13.5 7.5l3 3'/></svg>");
  --icon-home:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8 M5 10v10h5v-6h4v6h5V10'/></svg>");
  --icon-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hover:rgba(70,81,59,.07);
  --icon-star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3.2l2.7 5.6 6.1.8-4.5 4.2 1.2 6.1L12 17l-5.5 2.9 1.2-6.1-4.5-4.2 6.1-.8z'/></svg>");
  --icon-star-fill:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3.2l2.7 5.6 6.1.8-4.5 4.2 1.2 6.1L12 17l-5.5 2.9 1.2-6.1-4.5-4.2 6.1-.8z'/></svg>");
}
/* Un icono en máscara toma el color del texto del botón. */
.navbtn strong,.check,.draghandle,.taskmenu,.back,.chev,.iconbtn[data-project-order],.iconbtn[data-edit-project],.fab,.navigation summary:after{font-size:0!important;line-height:0}
.navbtn strong::before,.check::after,.draghandle::before,.taskmenu::before,.back::before,.chev::before,.iconbtn[data-project-order]::before,.iconbtn[data-edit-project]::before,.fab::before,.navigation summary:after{content:'';display:block;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.navbtn strong{display:block;height:24px;margin-bottom:3px}
.navbtn strong::before{--i:var(--icon-tag);width:22px;height:22px;margin:1px auto 0}
.navbtn[data-nav="projects"] strong::before{--i:var(--icon-grid)}
.navbtn[data-nav="tasks"] strong::before{--i:var(--icon-tasks)}
.navbtn[data-nav="labels"] strong::before{--i:var(--icon-tag)}
#filterNav strong::before{--i:var(--icon-filter)}
.check{display:grid;place-items:center}
.check::after{--i:var(--icon-check);width:14px;height:14px;position:absolute;left:11.5px;top:14.5px;opacity:0;transition:opacity .12s}
.task.done .check::after{opacity:1}
.check.mixed::after{--i:var(--icon-minus);opacity:1}
.draghandle{display:grid;place-items:center}
.draghandle::before{--i:var(--icon-grip);width:16px;height:18px}
.taskmenu{display:grid;place-items:center}
.taskmenu::before{--i:var(--icon-dots);width:18px;height:18px}
.back{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;margin-right:2px}
.back::before{--i:var(--icon-left);width:22px;height:22px}
.back:hover{background:var(--hover)}
.chev{display:grid;place-items:center;width:24px;height:24px}
.chev::before{--i:var(--icon-right);width:18px;height:18px}
.iconbtn[data-project-order]::before{--i:var(--icon-updown);width:19px;height:19px}
.iconbtn[data-edit-project]::before{--i:var(--icon-pencil);width:19px;height:19px}
.fab{display:grid;place-items:center}
.fab::before{--i:var(--icon-plus);width:24px;height:24px}
.navigation summary:after{--i:var(--icon-down);width:18px;height:18px;margin-left:auto;transform:rotate(-90deg);transition:transform .15s}
.navigation details[open]>summary:after{transform:rotate(0)}
/* Controles nativos con el mismo lenguaje que el resto. */
select{appearance:none;-webkit-appearance:none;background:#fff var(--icon-down) no-repeat right 11px center/16px;padding-right:36px!important;border:1px solid var(--line);border-radius:14px;height:46px;padding-left:12px;cursor:pointer}
label>select,.row label>select{margin-top:6px}
input[type="file"]{width:100%;padding:10px;border:1px dashed #cfc3b2;border-radius:14px;background:var(--paper-2);color:var(--muted);font-size:13px}
input[type="file"]::file-selector-button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 11px;font:inherit;font-size:13px;font-weight:700;color:var(--olive-dark);margin-right:10px;cursor:pointer}
input[type="date"]{cursor:pointer}
/* Los botones «ghost» dejan de parecer deshabilitados: el borde discontinuo queda reservado para lo bloqueado. */
.ghost{border:1px solid var(--line);background:var(--paper);color:var(--olive-dark)}
.ghost:hover{background:#eee6d9}
.sectionlabel .ghost{background:transparent}
.softbtn:hover,.tabpill:not(.active):hover{background:#efe7da}
.primary:hover{background:#3a4431}
.danger:hover{background:#ecd3c9}
.primary:active,.softbtn:active,.ghost:active,.fab:active,.filterchip:active,.tabpill:active{transform:scale(.98)}
.fab:hover{background:#b96a3c}
.filterchip{transition:background .12s,box-shadow .12s}
.filterchip:not(.unavailable):hover{background:#f6f1e8}
/* Filas y tarjetas con respuesta al puntero solo donde hay puntero. */
@media(hover:hover){
  .task:hover{background:rgba(70,81,59,.045)}
  .task.context:hover{background:#f0ebe0}
  .project:hover{box-shadow:0 8px 22px rgba(55,44,32,.09);border-color:#d3c8b8}
  .project{transition:box-shadow .15s,border-color .15s}
  .projectopen:hover .projecttitle{color:var(--olive-dark)}
  .taskmenu:hover,.draghandle:hover{color:var(--olive-dark)}
  .taskmenu:hover::before,.draghandle:hover::before{background:var(--olive-dark)}
}
.task{transition:background .12s}
.task .taskmenu{opacity:.75}
.draghandle{cursor:grab}.dragging .draghandle{cursor:grabbing}
/* Escritorio: tipografía y espaciado proporcionados a la pantalla. */
@media(min-width:1024px){
  .title{font-size:34px}
  .subtitle{font-size:15px}
  .sectionlabel{font-size:12.5px;margin:18px 2px 10px}
  .tasktext{font-size:15px;line-height:1.4}
  .tasknote{font-size:12.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .taskchips .chip{font-size:10.5px;padding:4px 8px}
  .taskmeta{font-size:11.5px;margin-top:5px}
  .task{padding:7px 6px;min-height:58px}
  .task.child{margin-left:40px}
  .taskbody{padding:8px 6px 7px}
  .check{width:42px;min-width:42px}.check:before{left:11px;width:20px;height:20px}.check::after{left:14px;top:15px}
  .quickadd{font-size:15px;padding:16px 20px}
  .project{padding:16px 18px}
  .projecttitle{font-size:19px}
  .projectmeta{font-size:13.5px}
  .project .chip{font-size:12px}
  .searchbar input{height:48px;font-size:15px}
  .softbtn{height:48px}
  .tabpill{padding:9px 16px;font-size:14.5px}
  .notice{font-size:12.5px;padding:10px 13px}
  .empty{padding:44px 24px;font-size:15px}
  .sheet .field input,.sheet .field textarea,.sheet .field select{font-size:15px}
  .sheet .field textarea{height:110px}
  .sheettitle{font-size:28px;margin-bottom:16px}
  .fab{width:60px;height:60px;border-radius:20px}
}
@media(min-width:1280px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1700px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Modo oscuro automático: mismos tokens, valores nocturnos; los colores fijos del CSS base se sobrescriben aquí. */
/* Modo oscuro: html.dark lo activa theme-ui.js, por preferencia guardada o por la del sistema. */
html.dark{--bg:#1b1e19;--paper:#252923;--paper-2:#2c312a;--ink:#ebe6da;--muted:#a59f93;--line:#3c4237;--olive:#8e9a6c;--olive-dark:#5b6848;--terracotta:#cf8558;--shadow:0 10px 28px rgba(0,0,0,.35);--hover:rgba(235,230,218,.07)}
html.dark,html.dark body{background:var(--bg);color:var(--ink)}
html.dark #app{background:linear-gradient(180deg,#1f231d 0,#1b1e19 45%,#181b17 100%)}
html.dark .topbar{background:rgba(31,35,29,.92);border-bottom-color:rgba(235,230,218,.08)}
html.dark .mark{color:#f1ebdf}
html.dark .tabpill{background:rgba(37,41,35,.8);color:var(--ink)}
html.dark .tabpill.active{color:#fff}
html.dark .iconbtn:hover{background:var(--hover)}
html.dark .searchbar input{background:var(--paper);color:var(--ink)}
html.dark .searchbar input::placeholder,html.dark input::placeholder,html.dark textarea::placeholder{color:#7f7a6f}
html.dark .softbtn{background:var(--paper);color:var(--ink)}
html.dark .softbtn.active{background:#3a4036;border-color:#575e51}
html.dark .softbtn:hover,html.dark .tabpill:not(.active):hover{background:#333a31}
html.dark .sectionlabel{color:#9a9488}
html.dark .sectionlabel .count{background:#3a4036;color:var(--ink)}
html.dark .project{background:rgba(37,41,35,.94);border-color:#3c4237;box-shadow:0 3px 10px rgba(0,0,0,.2)}
html.dark .project.system{background:#272b24}
html.dark .projectmeta{color:var(--muted)}
html.dark .chev{color:#8c877b}
html.dark .progressline{background:#363b33}
html.dark .empty{background:rgba(37,41,35,.6);color:var(--muted)}
html.dark .bottomnav{background:rgba(31,35,29,.96);border-top-color:var(--line)}
html.dark .navbtn{color:#9a9488}
html.dark .navbtn.active{background:#363c33;color:#d9e0c3}
html.dark .tasklist{background:var(--paper);border-color:var(--line)}
html.dark .task{border-bottom-color:#33392f}
html.dark .task.child{border-left-color:#444a3f}
html.dark .task.context{background:#2a2f27}
html.dark .task.done .taskbody{opacity:.55}
html.dark .check{color:#d9e0c3!important}
html.dark .check:before{border-color:#7d8273}
html.dark .task.done .check:before{background:#3b4634;border-color:var(--olive)}
html.dark .check.mixed:before{background:#3a3f36;border-color:var(--olive)}
html.dark .draghandle{color:#7f7a6f}
html.dark .taskmeta{color:#9a9488}
html.dark .taskmenu{color:#9a9488}
html.dark .priority{color:#e0876a}
html.dark .quickadd{color:#c5cfa9}
html.dark .rootdrop{border-color:var(--olive);color:var(--ink)}
html.dark .drop-child,html.dark .drop-child:after{background:#3b4634!important;color:#d9e0c3}
html.dark .drop-project{background:#3b4634!important}
html.dark #dragGhost{background:#6d7a56}
html.dark #moveRail{background:var(--paper)}
html.dark #moveRail button{background:#2c312a;color:var(--ink)}
html.dark .sheetback{background:rgba(0,0,0,.5)}
html.dark .sheet{background:#23271f;box-shadow:0 -15px 45px rgba(0,0,0,.45)}
html.dark .sheet-close{background:#23271f}
html.dark .handle{background:#4a5044}
html.dark .field label{color:#9a9488}
html.dark .field input,html.dark .field textarea,html.dark .field select,html.dark select,html.dark .suggestion button,html.dark .filterchip,html.dark input[type="file"]::file-selector-button{background-color:#2c312a;color:var(--ink);border-color:#464c40}
html.dark select{background-color:#2c312a}
html.dark input[type="file"]{background:#262a23;border-color:#4a5044}
html.dark input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.85)}
html.dark .primary{background:#6b7a54;color:#fff}
html.dark .primary:hover{background:#78885f}
html.dark .danger{background:#4a2f27;color:#f0b9a5}
html.dark .danger:hover{background:#573830}
html.dark .fab{background:var(--terracotta);box-shadow:0 12px 25px rgba(0,0,0,.4)}
html.dark .fab:hover{background:#d9905f}
html.dark .actions{background:#23271f}
html.dark .family{border-top-color:#363b33}
html.dark .filterchip.on{background:#343a31}
html.dark .filterchip:not(.unavailable):hover{background:#343a31}
html.dark .filterchip .chipcount{background:rgba(235,230,218,.1);color:var(--muted)}
html.dark .filterchip.on .chipcount{background:rgba(235,230,218,.18);color:inherit}
html.dark .filtercount{background:var(--paper-2);border-color:var(--line)}
html.dark .label-manager .family-card,html.dark .area-card,html.dark .detail-card,html.dark .conflictitem,html.dark .menulist button{background:var(--paper);border-color:var(--line)}
html.dark .ghost{background:var(--paper);color:#c5cfa9;border-color:#464c40}
html.dark .ghost:hover{background:#333a31}
html.dark .sectionlabel .ghost{background:transparent}
html.dark .toast{background:#e8e3d6;color:#1b1e19}
html.dark .notice{background:#2c312a;color:#b3ada0}
html.dark .kebabmenu{background:var(--paper);border-color:var(--line)}
html.dark .kebabmenu button:hover,html.dark .navigation summary:hover,html.dark .navigation .menuitem:hover{background:#333a31}
html.dark .navigation .menuitem.active{background:#363c33;color:#d9e0c3}
html.dark .navigation .menuhint{color:var(--muted)}
html.dark .menubackdrop{background:rgba(0,0,0,.45)}
html.dark .navigation.kebabmenu{background:var(--paper-2)}
html.dark .syncbadge{background:var(--paper);border-color:var(--line)}
html.dark .syncbadge[data-mode=conflict],html.dark .syncbadge[data-mode=error]{color:#e0876a;border-color:#cf8558}
html.dark .menuitem:disabled{opacity:.4}
html.dark .area-card.current{border-color:var(--olive)}
html.dark .areablock{border-top-color:var(--line)}
html.dark .filterarea{border-top-color:var(--line)}
html.dark .prioritybtn{background:#2c312a;border-color:#464c40;color:var(--ink)}
html.dark .prioritybtn:hover{background:#343a31}
html.dark .star{color:#e2b45c}
html.dark .themeswitch{background:rgba(235,230,218,.06);border-color:var(--line)}
html.dark .themeoption.on{background:#3a4036;color:#d9e0c3;box-shadow:none}
html.dark .addtask{background:var(--paper);border-top-color:var(--line)}
html.dark .tabpill.general{border-color:#575e51}
html.dark .inlineedit{background:#2c312a;color:var(--ink);border-color:var(--olive);box-shadow:0 0 0 3px rgba(142,154,108,.2)}
html.dark .task.newtask{background:#2a2f27}
html.dark .project.newproject{background:#272b24}
html.dark .themelist button.on{background:#363c33;color:#d9e0c3}
html.dark .tabtool{background:rgba(37,41,35,.8);border-color:var(--line);color:var(--muted)}
html.dark .tabtool:hover,html.dark .themetoggle:hover,html.dark .viewsave:hover{background:#333a31}
html.dark .themetoggle,html.dark .viewsave{background:var(--paper);border-color:var(--line);color:#d9e0c3}
html.dark [data-tip]:hover::after{background:#e8e3d6;color:#1b1e19}
html.dark .pinbtn.pinned{color:#d9e0c3}
html.dark .task.selected{background:#3b4634!important}
html.dark .selectbox::before{background:#2c312a;border-color:#7d8273}
html.dark .selectbox.on::before{background:#8e9a6c;border-color:#8e9a6c}
html.dark .batchbar{background:#e8e3d6;color:#1b1e19}
html.dark .batchbar .softbtn,html.dark .batchbar .iconbtn{color:#1b1e19;background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15)}
html.dark .batchbar .ghost.small{color:#46513b;border-color:rgba(0,0,0,.2)}
html.dark .batchtoggle.on{background:#363c33;color:#d9e0c3}
html.dark .aliasbtn{background:var(--paper);border-color:var(--line);color:#d9e0c3}
html.dark .tabcount{background:rgba(235,230,218,.12)}
html.dark .undotoast{background:#e8e3d6;color:#1b1e19}
html.dark .undotoast button{background:rgba(0,0,0,.08);color:#1b1e19}
html.dark .moneybar{background:#363b33}
html.dark .taskbody .cost{background:#3b4634;color:#d9e0c3}
html.dark .homehead,html.dark .homecard{background:var(--paper);border-color:var(--line)}
html.dark .kpi{background:rgba(235,230,218,.07)}
html.dark .ring .track{stroke:rgba(235,230,218,.15)}
html.dark .homeproject{background:var(--paper-2);border-color:var(--line)}
html.dark .homeproject:hover{background:#333a31}
html.dark .hometask,html.dark .blockrow,html.dark .activityrow{border-bottom-color:#33392f}
html.dark .weekday{background:var(--paper-2)}
html.dark .weekday.overdue{background:#3f2d28}
html.dark .weekday.drop{background:#3b4634}
html.dark .personbar{background:#363b33}
html.dark .personbar .donepart{background:#5a5f55}
html.dark .inlinepicker .familyhead .count{background:#3a4036}
html.dark .colorswatch.on{outline-color:var(--ink)}
html.dark .facetbtn{background:var(--paper);color:var(--ink);border-color:var(--line)}
html.dark .facetbtn:hover{background:#343a31}
html.dark .facetbtn.active{background:#3a4036;border-color:#575e51}
html.dark .facet.open .facetbtn{border-color:#575e51;border-bottom-color:var(--paper)}
html.dark .facetpanel{border-color:#575e51;box-shadow:0 16px 40px rgba(0,0,0,.45)}
html.dark .facetfoot{border-top-color:#363b33}
html.dark .facettotal{background:var(--paper-2);border-color:var(--line)}
html.dark .facetcount{background:#6b7a54}
html.dark .viewpill{background:var(--paper);border-color:var(--line);color:#c5cfa9}
html.dark .viewpill:hover{background:#333a31}
html.dark .viewpill.active{background:#5b6848;border-color:#5b6848;color:#fff}
@media(hover:hover){
  html.dark .task:hover{background:rgba(235,230,218,.04)}
  html.dark .task.context:hover{background:#2f342c}
  html.dark .project:hover{box-shadow:0 8px 22px rgba(0,0,0,.35);border-color:#4a5044}
}