html,body{margin:0;padding:0}button{margin:0;padding:0;border:0;background:none;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Roboto,sans-serif;font-size:16px;line-height:1.5;background:#f5f5f5;color:#333;min-width:230px;max-width:100%;margin:0 auto;padding:20px 15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300}:focus{outline:0}.hidden{display:none}.todoapp{background:#fff;position:relative;box-shadow:0 2px 4px #0003,0 25px 50px #0000001a;max-width:550px;margin:80px auto 20px;padding:10px;border-radius:8px}.todoapp input::-webkit-input-placeholder{font-style:italic;font-weight:300;color:#0006}.todoapp input::-moz-placeholder{position:relative;font-style:italic;font-weight:300;color:#0006}.todoapp input::input-placeholder{font-style:italic;font-weight:300;color:#0006}.todoapp h1{position:relative;top:auto;width:100%;font-size:48px;font-weight:200;text-align:center;color:#b83f45;margin:0 0 15px;-webkit-text-rendering:optimizeLegibility;-moz-text-rendering:optimizeLegibility;text-rendering:optimizeLegibility}.new-todo,.edit{position:relative;margin:0;width:100%;font-size:24px;font-family:inherit;font-weight:inherit;line-height:1.4em;color:inherit;padding:6px;border:1px solid #999;box-shadow:inset 0 -1px 5px #0003;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.new-todo{padding:18px 18px 18px 60px;border:none;background:rgba(0,0,0,.003);box-shadow:inset 0 -2px 1px #00000008;border-radius:6px}.main{position:relative;z-index:2;border-top:1px solid #e6e6e6}.toggle-all{width:1px;height:1px;border:none;opacity:0;position:left;right:100%;bottom:100%}.toggle-all+label{position:center-left;top:10px;left:10px;width:200px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-all+label:before{content:"❯";margin:10px;font-size:20px;color:#d9d9d9;transform:rotate(90deg);transition:color .2s ease}.toggle-all:checked+label:before{color:#737373}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{position:relative;font-size:18px;border-bottom:1px solid #ededed;padding:10px 0;display:flex;align-items:center}.todo-list li:last-child{border-bottom:none}.todo-list li.editing{border-bottom:none;padding:0}.todo-list li.editing .view{display:none}.todo-list li.editing .edit-container{display:block;width:100%;padding:10px 10px 10px 43px}.todo-list li.editing .edit{display:block;width:100%;font-size:18px;padding:10px;margin:0 0 8px;border:1px solid #999;border-radius:4px;box-sizing:border-box}.todo-list li.editing .edit-options{display:flex;gap:10px;flex-wrap:wrap}.todo-list li.editing .edit-category{padding:8px;font-size:14px;border:1px solid #999;border-radius:4px;background:white;cursor:pointer}.todo-list li.editing .edit-date{padding:8px;font-size:14px;border:1px solid #999;border-radius:4px;cursor:pointer}.todo-list li.editing .save-edit-btn{padding:8px 12px;font-size:16px;background-color:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.todo-list li.editing .save-edit-btn:hover{background-color:#2a6db5}.todo-list li .toggle{text-align:center;width:40px;height:auto;position:absolute;top:0;bottom:0;margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.todo-list li .toggle{opacity:0}.todo-list li .toggle+label{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E);background-repeat:no-repeat;background-position:center left}.todo-list li .toggle:checked+label{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E)}.todo-list li label{word-break:break-all;padding:10px 15px 10px 60px;display:flex;flex-direction:column;gap:4px;line-height:1.3;transition:color .4s;font-weight:400;color:#4d4d4d}.todo-list li.completed label{color:#cdcdcd;text-decoration:line-through}.todo-list li .destroy-btn{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin-right:10px;font-size:30px;color:#a83e3e;margin-bottom:11px;transition:color .2s ease-out}.todo-list li .destroy-btn:hover{color:#ff040d}.todo-list li .edit-btn{display:none;position:absolute;top:0;right:50px;bottom:0;width:40px;height:40px;margin-right:10px;font-size:24px;color:#4a90e2;margin-bottom:11px;transition:color .2s ease-out;cursor:pointer;padding:0;background:none;border:none}.todo-list li .edit-btn:hover{color:#2a6db5}.todo-list li:hover .destroy-btn,.todo-list li:hover .edit-btn{display:block}.todo-list li .edit,.todo-list li .edit-container{display:none}.todo-list li.editing:last-child{margin-bottom:-1px}.footer{padding:15px 10px;height:auto;font-size:14px;border-top:1px solid #e6e6e6;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px}.todo-count{flex-shrink:0;text-align:left;font-weight:500}.filters{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex-grow:1}.filters li{display:inline-block}.filters li a{color:#555;margin:0;padding:6px 12px;text-decoration:none;border:1px solid #ddd;border-radius:20px;transition:all .2s ease;font-size:13px;font-weight:500}.filters li a:hover{border-color:#4a90e2;color:#4a90e2}.filters li a.selected{background-color:#4a90e2;color:#fff;border-color:#4a90e2}.clear-completed{flex-shrink:0;padding:6px 12px;border-radius:20px;background-color:#dc3545;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s ease;text-decoration:none;border:1px solid #dc3545}.clear-completed:hover{background-color:#c82333;border-color:#c82333}.new-todo-container{display:flex;align-items:stretch;gap:6px}.new-todo{flex:1;border-radius:6px}.save-btn{padding:0 14px;border-radius:6px;background-color:#28a745;color:#fff;font-size:16px;cursor:pointer;transition:background-color .2s ease,transform .1s ease;border:none;display:flex;align-items:center;justify-content:center}.save-btn:hover{background-color:#218838}.save-btn:active{transform:scale(.96)}.save-btn .save-icon{font-size:16px}.save-btn .save-text{transition:opacity .2s ease}.save-btn.saved .save-text:after{content:" ✓";opacity:0;animation:fadeIn .3s ease forwards}@keyframes fadeIn{to{opacity:1}}.info{margin:50px auto 0;color:#666;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.5);text-align:center;padding:0 15px}.info p{line-height:1}.info a{color:inherit;text-decoration:none;font-weight:400}.info a:hover{text-decoration:underline}@media screen and (-webkit-min-device-pixel-ratio:0){.toggle-all,.todo-list li .toggle{background:none}.todo-list li .toggle{height:40px}}hr{margin:20px 0;border:0;border-top:1px dashed #c5c5c5;border-bottom:1px dashed #f7f7f7}.learn a{font-weight:400;text-decoration:none;color:#b83f45}.learn a:hover{text-decoration:underline;color:#787e7e}.learn h3,.learn h4,.learn h5{margin:10px 0;font-weight:500;line-height:1.2;color:#000}.learn h3{font-size:24px}.learn h4{font-size:18px}.learn h5{margin-bottom:0;font-size:14px}.learn ul{padding:0;margin:0 0 30px 25px}.learn li{line-height:20px}.learn p{font-size:15px;font-weight:300;line-height:1.3;margin-top:0;margin-bottom:0}#issue-count{display:none}.quote{border:none;margin:20px 0 60px}.quote p{font-style:italic}.quote p:before{content:"â€œ";font-size:50px;opacity:.15;position:absolute;top:-20px;left:3px}.quote p:after{content:"â€";font-size:50px;opacity:.15;position:absolute;bottom:-42px;right:3px}.quote footer{position:absolute;bottom:-40px;right:0}.quote footer img{border-radius:3px}.quote footer a{margin-left:5px;vertical-align:middle}.speech-bubble{position:relative;padding:10px;background:rgba(0,0,0,.04);border-radius:5px}.speech-bubble:after{content:"";position:absolute;top:100%;right:30px;border:13px solid transparent;border-top-color:#0000000a}.learn-bar>.learn{position:absolute;width:272px;top:8px;left:-300px;padding:10px;border-radius:5px;background-color:#fff9;transition-property:left;transition-duration:.5s}@media (min-width: 899px){.learn-bar{width:auto;padding-left:300px}.learn-bar>.learn{left:8px}}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.theme-toggle{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .3s ease}.theme-toggle:hover{background:rgba(0,0,0,.1);transform:scale(1.1)}.todo-options{display:flex;gap:10px;margin-top:10px;padding:10px;background:rgba(0,0,0,.02);border-radius:5px}.todo-category-select,.todo-date-input{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit}.todo-category-select:focus,.todo-date-input:focus{outline:1px solid #4A90E2;outline-offset:2px}.todo-list li label{display:flex;flex-direction:column;gap:5px}.todo-description{flex:1}.todo-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.todo-category,.todo-date{display:inline-flex;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;text-transform:capitalize;margin-left:0;color:#fff;background-color:#4a90e2}.todo-date{color:#666;background-color:#e0e0e0}.todo-list li.completed .todo-date{color:#cdcdcd}body.dark-mode{background:#1a1a1a;color:#e0e0e0}body.dark-mode .todoapp{background:#2d2d2d;box-shadow:0 2px 4px #00000080,0 25px 50px #0000004d}body.dark-mode .todoapp h1{color:#ff6b6b;text-shadow:0 0 10px rgba(255,107,107,.3)}body.dark-mode .new-todo,body.dark-mode .edit{background:#3d3d3d;color:#e0e0e0;border-color:#555}body.dark-mode .todoapp input::-webkit-input-placeholder,body.dark-mode .todoapp input::-moz-placeholder,body.dark-mode .todoapp input::input-placeholder{color:#fff6}body.dark-mode .main{border-top-color:#555}body.dark-mode .todo-list li{border-bottom-color:#555}body.dark-mode .todo-list li label{color:#e0e0e0}body.dark-mode .todo-list li.completed label{color:#888}body.dark-mode .footer{border-top-color:#555;color:#e0e0e0}body.dark-mode .filters li a{color:#aaa;border-color:#666;background-color:#3d3d3d}body.dark-mode .filters li a:hover{border-color:#4a90e2;color:#4a90e2;background-color:#333}body.dark-mode .filters li a.selected{background-color:#4a90e2;color:#fff;border-color:#4a90e2}body.dark-mode .clear-completed{background-color:#c82333;border-color:#c82333}body.dark-mode .clear-completed:hover{background-color:#a71d2a;border-color:#a71d2a}body.dark-mode .todo-options{background:rgba(255,255,255,.05)}body.dark-mode .todo-category-select,body.dark-mode .todo-date-input{background:#3d3d3d;color:#e0e0e0;border-color:#555}body.dark-mode .info{color:#888}body.dark-mode .info a{color:#ff6b6b}body.dark-mode .theme-toggle{background:rgba(255,255,255,.1);border-color:#fff3}body.dark-mode .theme-toggle:hover{background:rgba(255,255,255,.2)}.todo-list li.editing .edit{display:block;width:calc(100% - 43px);padding:12px 16px;margin:0 0 0 43px;border:2px solid #4A90E2;border-radius:4px}body.dark-mode .todo-list li.editing .edit{border-color:#4a90e2;background:#3d3d3d;color:#e0e0e0}body.dark-mode .todo-list li.editing .edit-container{background:#2d2d2d;padding:10px;border-radius:4px}body.dark-mode .todo-list li.editing .edit-category,body.dark-mode .todo-list li.editing .edit-date{background:#3d3d3d;color:#e0e0e0;border-color:#555}body.dark-mode .todo-list li.editing .save-edit-btn{background:#218838}body.dark-mode .todo-list li.editing .save-edit-btn:hover{background:#1e7030}.todo-list li{transition:opacity .3s ease,transform .3s ease}.todo-list li.fade-out{opacity:0;transform:translate(-20px)}.category-filters{width:100%;margin-top:15px;padding-top:10px;border-top:1px solid #e6e6e6;display:flex;flex-direction:column;align-items:center;gap:8px}.category-filters-label{font-size:13px;color:#777;margin-bottom:0}.filters-category{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.filtro-cat{display:inline-block;padding:6px 12px;font-size:13px;border-radius:20px;border:1px solid #ddd;text-decoration:none;color:#555;background:#f9f9f9;transition:all .2s ease;font-weight:500}.filtro-cat:hover{background:#e9e9e9;border-color:#4a90e2;color:#4a90e2}.filtro-cat.selected{border-color:#4a90e2;background:#4A90E2;color:#fff;font-weight:600}.details-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.details-modal.hidden{display:none}.details-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);cursor:pointer}.details-panel{position:relative;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;max-width:420px;width:100%;max-height:90vh;overflow:auto}.details-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e6e6e6}.details-title{margin:0;font-size:18px;font-weight:600;color:#333}.details-close{background:none;border:none;font-size:28px;line-height:1;color:#999;cursor:pointer;padding:0 4px;transition:color .2s}.details-close:hover{color:#333}.details-body{padding:20px}.details-row{margin:0 0 14px;font-size:14px;line-height:1.5}.details-row:last-child{margin-bottom:0}.details-row strong{display:inline-block;min-width:140px;color:#666}.details-category-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:600;color:#fff;text-transform:capitalize}.details-category-badge.category-personal{background:#50C878}.details-category-badge.category-trabajo{background:#4A90E2}.details-category-badge.category-urgente{background:#FF6B6B}.details-category-badge.category-otro{background:#9B59B6}.details-actions{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid #e6e6e6}.details-btn{padding:8px 18px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid #ddd;background:#fff;color:#333;transition:all .2s}.details-btn-close:hover{background:#f5f5f5;border-color:#ccc}.details-btn-delete{background:#dc3545;border-color:#dc3545;color:#fff}.details-btn-delete:hover{background:#c82333;border-color:#bd2130}body.dark-mode .category-filters{border-top-color:#555}body.dark-mode .category-filters-label{color:#aaa}body.dark-mode .filtro-cat{background:#3d3d3d;border-color:#666;color:#aaa}body.dark-mode .filtro-cat:hover{background:#333;border-color:#4a90e2;color:#4a90e2}body.dark-mode .filtro-cat.selected{background:#4A90E2;border-color:#4a90e2;color:#fff}body.dark-mode .details-panel{background:#2d2d2d;box-shadow:0 10px 40px #00000080}body.dark-mode .details-header{border-bottom-color:#555}body.dark-mode .details-title{color:#e0e0e0}body.dark-mode .details-close{color:#888}body.dark-mode .details-close:hover{color:#e0e0e0}body.dark-mode .details-row strong{color:#aaa}body.dark-mode .details-row span{color:#e0e0e0}body.dark-mode .details-actions{border-top-color:#555}body.dark-mode .details-btn{background:#3d3d3d;border-color:#555;color:#e0e0e0}body.dark-mode .details-btn-close:hover{background:#4d4d4d;border-color:#666}body.dark-mode .details-btn-delete{background:#c82333;border-color:#c82333}body.dark-mode .details-btn-delete:hover{background:#a71d2a;border-color:#a71d2a}.edit-mode-element{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box;margin-top:4px}.edit-mode-element:focus{outline:2px solid #4A90E2;outline-offset:2px}.details-btn-edit{background:#4A90E2;border-color:#4a90e2;color:#fff}.details-btn-edit:hover{background:#3a7bd2;border-color:#3a7bd2}.details-btn-save{background:#28a745;border-color:#28a745;color:#fff}.details-btn-save:hover{background:#218838;border-color:#218838}body.dark-mode .edit-mode-element{background:#3d3d3d;color:#e0e0e0;border-color:#555}body.dark-mode .edit-mode-element:focus{outline-color:#4a90e2}body.dark-mode .details-btn-edit{background:#3a7bd2;border-color:#3a7bd2}body.dark-mode .details-btn-edit:hover{background:#2b5e9f;border-color:#2b5e9f}body.dark-mode .details-btn-save{background:#218838;border-color:#218838}body.dark-mode .details-btn-save:hover{background:#1e7030;border-color:#1e7030}@media (max-width: 480px){body{padding:10px 8px;font-size:14px}.todoapp{margin:80px 0 20px;padding:8px;border-radius:8px}.todoapp h1{position:relative;top:auto;font-size:48px;margin-bottom:15px}.header-top{flex-direction:row;gap:8px}.theme-toggle{width:36px;height:36px;font-size:18px}.new-todo{font-size:18px;padding:14px 14px 14px 50px}.todo-options{flex-direction:column;gap:8px;padding:8px}.todo-category-select,.todo-date-input{width:100%;padding:10px;font-size:14px}.main{margin:0 -8px;padding:0 8px}.todo-list li{font-size:16px;padding:12px 0}.todo-list li label{padding:8px 8px 8px 45px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}.todo-description{flex:1 1 auto;min-width:150px}.todo-category{font-size:11px;padding:2px 8px;border-radius:10px}.todo-date{font-size:12px;padding:2px 8px;border-radius:10px}.todo-date-input{flex:1 1 0;min-width:0;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box}.todo-list li .toggle+label:before{width:30px;height:30px;background-size:30px}.todo-list li .edit-btn,.todo-list li .destroy-btn{width:32px;height:32px;font-size:18px}.todo-list li .edit-btn{right:42px}.todo-list li .destroy-btn{right:8px}.todo-list li.editing .edit-container{padding:8px;margin-left:40px}.todo-list li.editing .edit{font-size:16px;padding:10px}.todo-list li.editing .edit-options{flex-direction:column;gap:8px}.todo-list li.editing .edit-category,.todo-list li.editing .edit-date,.todo-list li.editing .save-edit-btn{width:100%;padding:10px;font-size:14px}.footer{flex-direction:column;gap:12px;padding:12px 8px}.todo-count{text-align:center}.filters{justify-content:center}.filters li a{padding:6px 10px;font-size:12px}.category-filters{flex-direction:column;gap:10px;width:100%}.category-filters-label{text-align:center}.filters-category{justify-content:center;flex-wrap:wrap}.clear-completed{width:100%;padding:10px;text-align:center}.details-panel{margin:10px;max-height:90vh;overflow-y:auto}.details-body{padding:15px}.details-row{font-size:14px;margin-bottom:12px}.details-actions{flex-direction:column;gap:8px}.details-btn{width:100%;padding:12px}}@media (max-width: 350px){body{padding:8px 5px;font-size:13px}.todoapp{margin:60px 0 15px;padding:5px}.todoapp h1{font-size:36px}.new-todo{font-size:16px;padding:12px 12px 12px 45px}.todo-list li label{padding:6px 6px 6px 40px}.todo-description{min-width:100px}.todo-date-input{flex:1 1 0;min-width:0;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box}.todo-category,.todo-date{font-size:10px;padding:2px 6px}.filters li a,.filtro-cat{padding:5px 8px;font-size:11px}}