:root{
  --bg:#0e0f12;
  --bg-card:#17191e;
  --bg-elevated:#1f222a;
  --border:#2a2d35;
  --text:#f2f3f5;
  --text-dim:#9aa0ab;
  --accent:#ff6a00;
  --accent-dim:#ff6a0033;
  --done:#2fbf71;
  --progress:#ffb020;
  --issue:#ff4d4f;
  --radius:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
  padding-bottom:calc(24px + var(--safe-bottom));
}

.app-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,#14151a,#0e0f12 90%);
  border-bottom:1px solid var(--border);
  padding:calc(14px + var(--safe-top)) 16px 14px;
}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.header-top h1{font-size:1.05rem;margin:0 0 2px;line-height:1.3;}

.header-top-btns{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.icon-btn{
  background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);border-radius:10px;
  width:36px;height:36px;font-size:1rem;flex-shrink:0;
}
.install-btn{
  background:var(--accent);color:#1a1200;border:none;border-radius:10px;
  padding:8px 12px;font-size:.8rem;font-weight:600;white-space:nowrap;
}
.hidden{display:none !important;}

.header-row{display:flex;gap:10px;margin-top:10px;}
.field{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--text-dim);}
.field input,.field select{
  background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:9px 10px;font-size:.9rem;font-family:inherit;
}

.turno-horario{font-size:.72rem;color:var(--text-dim);margin-top:8px;}

.progress-wrap{display:flex;align-items:center;gap:10px;margin-top:12px;}
.progress-bar{flex:1;height:10px;border-radius:999px;background:var(--bg-elevated);overflow:hidden;border:1px solid var(--border);}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#ffb020);transition:width .35s ease;border-radius:999px;}
.progress-label{font-size:.78rem;font-weight:700;color:var(--accent);min-width:38px;text-align:right;}

main{padding:16px;display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto;}

.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 14px 16px;
}
.card h2{font-size:.95rem;margin:0 0 10px;}
.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.card-heading h2{margin:0;}
.task-count{font-size:.75rem;color:var(--text-dim);}

.hint{font-size:.72rem;color:var(--text-dim);margin:-4px 0 10px;}

.pickers-list{display:flex;flex-wrap:wrap;gap:8px;}
.picker-chip{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;
  padding:7px 13px 7px 10px;font-size:.78rem;display:flex;align-items:center;gap:7px;
  cursor:pointer;user-select:none;transition:all .15s;color:var(--text-dim);
}
.picker-chip input{display:none;}
.picker-chip .chip-box{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;
  background:var(--bg);
}
.picker-chip.active{border-color:var(--accent);color:var(--text);background:var(--accent-dim);font-weight:600;}
.picker-chip.active .chip-box{background:var(--accent);border-color:var(--accent);color:#1a1200;}

.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.task-item{
  display:flex;align-items:center;gap:10px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  cursor:pointer;user-select:none;transition:background .15s;
}
.task-item:active{background:#262a33;}
.task-icon{font-size:1.15rem;width:26px;text-align:center;flex-shrink:0;}
.task-main{flex:1;min-width:0;}
.task-name{font-size:.88rem;line-height:1.25;}
.task-meta{font-size:.68rem;color:var(--text-dim);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;}
.task-item.status-done{border-color:var(--done)44;}
.task-item.status-continue{border-color:var(--progress)44;}
.task-item.status-ok{border-color:var(--done)44;}
.task-item.status-alert{border-color:var(--issue);background:#2a1414;}
.task-item.critical .task-name{color:var(--issue);font-weight:700;}
.task-badge{
  font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:999px;flex-shrink:0;
}
.task-badge.done,.task-badge.ok{background:var(--done)22;color:var(--done);}
.task-badge.continue{background:var(--progress)22;color:var(--progress);}
.task-badge.alert{background:var(--issue)22;color:var(--issue);}
.task-note-dot,.task-photo-dot{font-size:.7rem;}

.actions{display:flex;flex-direction:column;gap:10px;padding:0 16px 10px;max-width:640px;margin:0 auto;width:100%;}
.primary-btn{
  background:var(--accent);color:#1a1200;border:none;border-radius:12px;
  padding:14px;font-size:.95rem;font-weight:700;width:100%;
}
.secondary-btn{
  background:var(--bg-elevated);color:var(--text);border:1px solid var(--accent);border-radius:12px;
  padding:13px;font-size:.9rem;font-weight:700;width:100%;
}
.whatsapp-btn{
  background:#25D366;color:#06210f;border:none;border-radius:12px;
  padding:14px;font-size:.95rem;font-weight:700;width:100%;
}
.ghost-btn{
  background:transparent;color:var(--text-dim);border:1px solid var(--border);border-radius:12px;
  padding:12px;font-size:.88rem;font-weight:600;width:100%;
}

/* Bottom sheet */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet{
  background:var(--bg-card);border-radius:20px 20px 0 0;width:100%;max-width:640px;
  padding:10px 18px calc(18px + var(--safe-bottom));max-height:88vh;overflow-y:auto;
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{width:40px;height:4px;background:var(--border);border-radius:999px;margin:4px auto 14px;}
.sheet h3{margin:0 0 14px;font-size:1rem;}

.status-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.status-opt{
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);
  border-radius:12px;padding:13px;font-size:.9rem;font-weight:600;text-align:left;
}
.status-opt.opt-done,.status-opt.opt-pna-ok{border-color:var(--done);}
.status-opt.opt-continue{border-color:var(--progress);}
.status-opt.opt-issue,.status-opt.opt-pna-alert{border-color:var(--issue);}
.status-opt.active{box-shadow:0 0 0 2px currentColor inset;}

.pna-block{margin-bottom:14px;}
.pna-count-input{
  width:100%;background:var(--bg-elevated);color:var(--text);border:1px solid var(--issue);
  border-radius:10px;padding:10px;font-family:inherit;font-size:.95rem;margin-top:4px;
}

.note-label,.photo-label{display:block;font-size:.75rem;color:var(--text-dim);margin:10px 0 6px;}
#sheetNote{
  width:100%;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:10px;font-family:inherit;font-size:.85rem;resize:vertical;
}
.photo-label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg-elevated);border:1px dashed var(--accent);border-radius:10px;
  padding:13px;cursor:pointer;font-size:.86rem;font-weight:600;color:var(--accent);
}
.photo-block{margin-top:12px;}
.photo-preview{position:relative;border-radius:10px;overflow:hidden;}
.photo-preview img{width:100%;max-height:180px;object-fit:cover;display:block;}
.photo-remove{
  position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;
  border:none;border-radius:999px;width:28px;height:28px;font-size:.9rem;
}
.imgbb-status{font-size:.72rem;color:var(--text-dim);margin-top:8px;display:flex;align-items:center;gap:6px;}
.imgbb-status.uploading{color:var(--progress);}
.imgbb-status.success{color:var(--done);}
.imgbb-status.error{color:var(--issue);}
.imgbb-status a{color:var(--accent);word-break:break-all;}

/* Settings sheet */
.settings-subtitle{font-size:.85rem;margin:18px 0 8px;}
.imgbb-input{
  width:100%;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:11px;font-family:inherit;font-size:.85rem;
}
.imgbb-key-status{font-size:.72rem;margin-top:6px;color:var(--text-dim);}
.imgbb-key-status.success{color:var(--done);}

/* CRUD listas maestras */
.crud-list{display:flex;flex-direction:column;gap:6px;}
.crud-row{
  display:flex;align-items:center;gap:8px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.85rem;
}
.crud-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crud-row-btns{display:flex;gap:4px;flex-shrink:0;}
.crud-icon-btn{
  background:transparent;border:1px solid var(--border);border-radius:8px;
  width:28px;height:28px;font-size:.8rem;color:var(--text-dim);flex-shrink:0;
}
.crud-icon-btn.danger{color:var(--issue);border-color:var(--issue)55;}
.crud-icon-btn.ok{color:var(--done);border-color:var(--done)55;}
.crud-row input{
  flex:1;background:var(--bg);color:var(--text);border:1px solid var(--accent);border-radius:8px;
  padding:6px 8px;font-size:.82rem;font-family:inherit;min-width:0;
}
.crud-add-row{display:flex;gap:8px;margin-top:10px;}
.crud-add-row-task{flex-wrap:wrap;}
.crud-input{
  flex:1;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:10px;font-size:.85rem;font-family:inherit;min-width:0;
}
.crud-input-icon{flex:0 0 56px;text-align:center;}
.crud-input-type{flex:0 0 110px;}
.crud-add-btn{
  background:var(--accent);color:#1a1200;border:none;border-radius:10px;
  width:44px;font-size:1rem;font-weight:700;flex-shrink:0;
}

/* Checkbox + compartir dentro del item de tarea */
.task-check{
  width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.75rem;color:#1a1200;
}
.task-check.active{background:var(--accent);border-color:var(--accent);}
.task-item.task-disabled{opacity:.42;}
.task-share-btn{
  background:#25D366;color:#06210f;border:none;border-radius:8px;
  width:30px;height:30px;font-size:.85rem;flex-shrink:0;
}

.sheet-buttons{display:flex;gap:10px;margin-top:16px;}
.sheet-buttons .ghost-btn,.sheet-buttons .primary-btn{flex:1;}

.img-sheet{text-align:center;}
#summaryCanvas{width:100%;max-width:420px;border-radius:12px;border:1px solid var(--border);margin:0 auto;display:block;}

.toast{
  position:fixed;bottom:calc(20px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);
  background:#222;color:#fff;padding:10px 18px;border-radius:999px;font-size:.82rem;
  opacity:0;transition:all .25s ease;z-index:100;pointer-events:none;max-width:88%;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (min-width:480px){
  .header-row{max-width:640px;margin:10px auto 0;}
}