@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ===== Tema claro (por defecto) ===== */
:root{
  --bg-app:radial-gradient(circle at 50% 50%, #f4f6fa 0%, #e9edf5 100%);
  --bg-sidebar:#ffffff99;
  --bg-column:#ffffff73;
  --bg-card:#ffffffd9;
  --bg-card-hover:#fffffff2;
  --bg-input:#ffffffe6;
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --border-color:#0000000f;
  --border-focus:#6366f180;
  --accent:#6366f1;
  --accent-2:#a855f7;
  --accent-grad:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  --low:#10b981; --medium:#f59e0b; --high:#ef4444;
  --r-lg:20px; --r-md:14px; --r-sm:8px;
  --shadow-sm:0 2px 8px #0000000d;
  --shadow-md:0 8px 24px #0f172a14;
  --shadow-lg:0 16px 40px #0f172a1f;
  --glass-blur:blur(16px);
}
:root[data-theme="dark"]{
  --bg-app:radial-gradient(circle at 50% 50%, #181824 0%, #0d0d12 100%);
  --bg-sidebar:#0d0d12b3;
  --bg-column:#16162180;
  --bg-card:#1e1e2da6;
  --bg-card-hover:#262639cc;
  --bg-input:#0f0f19cc;
  --text-primary:#f3f4f6;
  --text-secondary:#9ca3af;
  --text-muted:#6b7280;
  --border-color:#ffffff12;
  --shadow-sm:0 2px 8px #00000026;
  --shadow-md:0 8px 24px #00000040;
  --shadow-lg:0 16px 40px #00000059;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-app);background-attachment:fixed;
  color:var(--text-primary);font-size:14px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
input{font-family:inherit;color:inherit}
::-webkit-scrollbar{height:11px;width:11px}
::-webkit-scrollbar-thumb{background:#8888aa55;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh}

/* ===== Sidebar ===== */
.sidebar{width:232px;flex-shrink:0;background:var(--bg-sidebar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:20px 16px;gap:16px;transition:width .3s, padding .3s, opacity .3s, border .3s;overflow:hidden}
.sidebar.collapsed{width:0;padding:20px 0;opacity:0;border-right-width:0;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.brand .logo{width:26px;height:26px;border-radius:8px;background:var(--accent-grad);box-shadow:var(--shadow-sm)}
.brand span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.side-sec{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.side-spacer{flex:1}
.side-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--low);box-shadow:0 0 8px var(--low)}
.dot.prev{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.side-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:var(--r-md);
  background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-sm);transition:all .2s}
.side-btn:hover{background:var(--bg-card-hover);transform:translateY(-1px)}
.side-row{display:flex;gap:8px}
.side-row .side-btn{padding:9px}

/* ===== Main ===== */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.banner{margin:14px 22px 0;background:var(--bg-card);border:1px solid var(--accent);color:var(--accent);font-size:12.5px;font-weight:500;
  padding:9px 14px;border-radius:var(--r-md);box-shadow:var(--shadow-sm)}

/* week nav */
.weeknav{display:flex;align-items:center;gap:12px;padding:18px 22px 8px}
.wn-center{display:flex;align-items:center;gap:12px}
.nav-arrow{width:34px;height:34px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:.2s}
.nav-arrow:hover{background:var(--bg-card-hover);color:var(--accent)}
.wn-name{font-size:20px;font-weight:700;outline:none;border-radius:6px;padding:2px 6px}
.wn-name:focus{background:var(--bg-card)}
.wn-count{font-size:12.5px;color:var(--text-muted);font-weight:600}
.spacer{flex:1}
.pill{padding:8px 15px;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border-color);
  font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.pill:hover{background:var(--bg-card-hover)}
.pill.accent{background:var(--accent-grad);color:#fff;border-color:transparent}
.pill.accent:hover{filter:brightness(1.06)}

/* ===== Estructura por Usuario ===== */
.wrap{flex:1;overflow:auto;padding:8px 22px 22px}
.user-section{background:var(--bg-column);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-color);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;width:100%;margin-bottom:16px;transition:background .3s}
.user-section.collapsed .user-grid{display:none}
.user-header{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bg-card);border-bottom:1px solid var(--border-color);position:relative;transition:background .3s}
.user-section.collapsed .user-header{border-bottom:none}
.collapse-btn{position:absolute;left:16px;font-size:14px;color:var(--text-secondary);cursor:pointer;opacity:0.6;padding:4px}
.collapse-btn:hover{opacity:1}
.user-header .uname{font-size:15px;font-weight:700;outline:none;border-radius:4px;padding:2px 6px;text-transform:uppercase;letter-spacing:1px;color:var(--text-primary)}
.user-header .uname:focus{background:var(--bg-input);color:var(--text-primary) !important}
.u-color-cycle{font-size:14px;margin-left:8px;cursor:pointer;opacity:0.5;transition:transform .2s, opacity .2s}
.u-color-cycle:hover{opacity:1;transform:scale(1.15)}
.user-header .x-user{position:absolute;right:16px;color:var(--text-muted);font-size:20px;opacity:0.3;cursor:pointer}
.user-header:hover .x-user{opacity:1}
.user-header .x-user:hover{color:var(--high)}
/* Temas predefinidos que tiñen toda la sección suavemente */
.user-section.u-theme-1{--bg-column:rgba(59, 130, 246, 0.05);--bg-card:rgba(59, 130, 246, 0.12)}
.user-section.u-theme-2{--bg-column:rgba(16, 185, 129, 0.05);--bg-card:rgba(16, 185, 129, 0.12)}
.user-section.u-theme-3{--bg-column:rgba(139, 92, 246, 0.05);--bg-card:rgba(139, 92, 246, 0.12)}
.user-section.u-theme-4{--bg-column:rgba(245, 158, 11, 0.05);--bg-card:rgba(245, 158, 11, 0.12)}
.user-grid{display:grid;width:100%}
.cell{border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:12px}
.user-grid .cell:last-child{border-right:none}
.dayhead{background:var(--bg-card);display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border-color);padding:8px}
.dayhead [contenteditable]{outline:none;border-radius:4px;padding:2px 6px;text-align:center}
.dayhead [contenteditable]:focus{background:var(--bg-input)}
.dayhead .x{opacity:0.3;cursor:pointer}
.dayhead:hover .x{opacity:1}
.taskcell{min-width:0;display:flex;flex-direction:column;gap:8px}

/* tarjeta de tarea */
.task{background:var(--bg-card);border:1px solid var(--border-color);border-left:4px solid var(--accent);border-radius:4px;
  padding:8px;box-shadow:var(--shadow-sm);}
.task:hover{background:var(--bg-card-hover);}
.task.done{border-left-color:var(--low)}
.trow{display:flex;align-items:flex-start;gap:6px}
.cbox{width:18px;height:18px;border:1.5px solid var(--text-muted);border-radius:4px;flex-shrink:0;margin-top:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--bg-input)}
.cbox.on{background:var(--accent-grad);border-color:transparent;}
.cbox.on::after{content:'✓';font-size:12px;color:#fff;line-height:1}
.ttext{flex:1;font-size:16px;line-height:1.3;font-weight:600;word-break:break-word;cursor:text;outline:none;border-radius:4px;padding:2px 4px;margin:-2px -4px;color:var(--text-primary)}
.ttext:focus{background:var(--bg-input);box-shadow:inset 0 0 0 1px var(--accent)}
.ttext.done{text-decoration:line-through;color:var(--text-muted);font-weight:500}
.x{color:var(--text-muted);font-size:16px;line-height:1;opacity:0;flex-shrink:0;margin-top:2px;cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.x:hover{color:var(--high);background:#fee2e2}
.dayhead .x,.user .x{opacity:.5}
.task:hover .x,.sub:hover .x,.dayhead:hover .x,.user:hover .x{opacity:1}
.subs{margin:8px 0 0 24px;display:flex;flex-direction:column;gap:6px}
.sub{display:flex;align-items:flex-start;gap:6px}
.sub .cbox{width:16px;height:16px;margin-top:1px;border-radius:3px;border-width:1px}
.sub .cbox.on::after{font-size:10px}
.stext{flex:1;font-size:14px;line-height:1.3;font-weight:500;color:var(--text-secondary);cursor:text;outline:none;border-radius:4px;padding:2px 4px;margin:-2px -4px}
.stext:focus{background:var(--bg-input);box-shadow:inset 0 0 0 1px var(--accent)}
.stext.done{text-decoration:line-through;color:var(--text-muted)}
.foot{display:flex;align-items:center;justify-content:space-between;margin:8px 0 0 0;flex-wrap:wrap;gap:4px}
.f-left, .f-right{display:flex;align-items:center;gap:8px}
.addsub{color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.addsub:hover{color:var(--accent-2)}
.conj{font-size:11px;color:var(--text-secondary);font-weight:600}
.conj.on{color:var(--medium)}
.prog{font-size:11px;color:var(--text-muted);font-weight:700}
.apps-row{display:flex;align-items:center;gap:6px;border-left:1px solid var(--border-color);padding-left:8px;height:12px}
.app-icon{font-size:13px;cursor:pointer;opacity:0.25;transition:all .15s;filter:grayscale(100%);user-select:none;line-height:1}
.app-icon:hover{opacity:0.6;transform:scale(1.1)}
.app-icon.on{opacity:1;filter:grayscale(0);transform:scale(1.15)}
.addtask{border:1.5px dashed var(--border-color);border-radius:var(--r-sm);padding:9px;text-align:center;color:var(--text-muted);
  font-size:12.5px;font-weight:600;transition:.15s}
.addtask:hover{border-color:var(--accent);color:var(--accent)}
.addusers{padding:9px 15px;border-radius:var(--r-md);background:var(--accent-grad);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);transition:.2s}
.addusers:hover{filter:brightness(1.1)}
.global-actions{display:flex;justify-content:center;margin-top:10px;padding-bottom:20px}
.conj{font-size:11px;font-weight:600;color:var(--text-muted);padding:1px 6px;border-radius:6px;transition:.12s}
.conj:hover{color:var(--text-secondary)}
.conj.on{color:#fff;background:var(--accent-2)}
.task.conjunta{border-left-color:var(--accent-2)}

/* ===== Vista para Móviles ===== */
#mobile-overlay { display: none; }
@media (max-width: 768px) {
  :root { --col-w: 270px; }
  
  #mobile-overlay {
    display: block;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .sidebar.collapsed ~ #mobile-overlay {
    opacity: 0;
    pointer-events: none;
  }
  
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 260px;
    z-index: 999;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.collapsed {
    width: 260px;
    transform: translateX(-110%);
    opacity: 1;
    border: none;
    padding: 20px 16px;
    pointer-events: none;
  }
  
  .weeknav {
    flex-wrap: wrap;
    padding: 12px 12px 8px;
    gap: 10px;
  }
  .wn-center {
    flex: 1;
    min-width: 200px;
  }
  .spacer {
    display: none;
  }
  .pill {
    flex: 1;
    justify-content: center;
  }
  
  .wrap {
    padding: 8px 12px 22px;
  }
  
  /* Hacer el grid de días scrolleable horizontalmente en móviles */
  .user-grid {
    display: grid;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 12px;
  }
  .cell {
    scroll-snap-align: start;
  }
  .user-header .x-user {
    right: 12px;
  }
}