* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: clamp(15px, 1.5vw + 0.5rem, 18px);
   line-height: 1.5;
}
body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 1rem;
   background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
   color: #374151;
   min-height: 100vh;
   /* Optimizaciones móvil */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}
h1 {
   font-size: clamp(1.8rem, 4vw + 1rem, 2.6rem);
   font-weight: 700;
}
h2 {
   font-size: clamp(1.3rem, 3vw + 0.5rem, 2rem);
   font-weight: 600;
}
h3 {
   font-size: clamp(1.1rem, 2.5vw + 0.3rem, 1.5rem);
   font-weight: 600;
}
p, label, input, textarea {
   font-size: 1rem;
   line-height: 1.5;
}
small, .ad-label, .footer {
   font-size: clamp(0.75rem, 1vw + 0.25rem, 0.9rem);
}
input, select, textarea, button {
   font-size: inherit;
}

.container {
   max-width: 100%;
   margin: 0 auto;
}

.header {
   text-align: center;
   margin-bottom: 1.5rem;
}
.header h1 {
   font-size: 1.5rem;
   font-weight: bold;
   color: #1f2937;
   margin-bottom: 0.5rem;
   line-height: 1.2;
}
.header p {
   color: #6b7280;
   font-size: 0.95rem;
   padding: 0 0.75rem;
}
.header section {
   display: flex;
   flex-direction: column;
   align-items:center;
   justify-content: center;
   gap: 0.75rem;
}

.footer {
   display: flex;
   align-items:center;
   justify-content: center;
   text-align: center;
   line-height: 1.6;
   color: #6b7280;
   padding: 1.25rem 0.75rem;
}
.footer a {
   color: #3b82f6;
   text-decoration: none;
}
.footer a:hover {
   text-decoration: underline;
}

.btn {
   padding: 0.75rem 1.25rem;
   border: none;
   border-radius: 0.375rem;
   cursor: pointer;
   transition: all 0.2s;
   min-height: 2.75rem; /* Touch target */
   touch-action: manipulation; /* Mejor respuesta táctil */
   font-size: clamp(0.95rem, 1.5vw + 0.3rem, 1.1rem);
   font-weight: 500;
}

.card {
   background: white;
   border-radius: 0.5rem;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
   padding: 1rem;
   margin-bottom: 1.25rem;
}

.card h2 {
   font-size: 1.25rem;
   font-weight: 600;
   color: #1f2937;
   margin-bottom: 1rem;
}

.task-content {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

@media (min-width: 480px) {   /* móvil grande */
   .container {
      padding: 24px 20px;
   }

   .header h1 {
      font-size: 2rem;
   }
   .header section {
      flex-direction: row;
   }
}

@media (min-width: 768px) {   /* tablet */
   .tab-btn {
      flex: 0 1 auto;
   }
   .task-content {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }
   .form-grid {
      display: grid;
      gap: 1rem;
   }
   .form-grid-2 {
      grid-template-columns: 1fr 1fr;
   }
}
@media (min-width: 1024px) {   /* desktop */
   .container {
      max-width: 1200px;
      padding: 32px 24px;
   }

   .header h1 {
      font-size: 2.5rem;
   }
   .header p {
      font-size: 1.1rem;
   }

   .card {
      padding: 1.5rem;
   }
}

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}
@media (prefers-color-scheme: dark) {
   body {
      background: #111827;
      color: #f9fafb;
   }
   .card, .nav {
      background: #1f2937;
   }
   .btn-primary {
      background: #2563eb;
   }
   .btn-primary:hover {
      background: #1d4ed8;
   }
}

/* Skip link para accesibilidad */
.skip-link {
   position: absolute;
   top: -40px;
   left: 0;
   background: #3b82f6;
   color: white;
   padding: 0.5rem;
   text-decoration: none;
   z-index: 100;
}
.skip-link:focus {
   top: 0;
}

/* Navigation */
.nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
   margin-bottom: 1.25rem;
   background: white;
   border-radius: 0.5rem;
   box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
   padding: 0.5rem;
}

.tab-btn {
   padding: 0.625rem 1rem;
   border: none;
   border-radius: 0.32rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
   background: transparent;
   color: #6b7280;
   min-height: 2.75rem; /* Mínimo para touch targets */
   flex: 1 1 calc(50% - 8px); /* 2 columnas en móvil */
   min-width: 120px;
}

.tab-btn:hover,
.tab-btn:focus {
   background: #f3f4f6;
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
}

.tab-btn.active {
   background: #3b82f6;
   color: white;
}

/* Forms */
.form-group {
   margin-bottom: 1rem;
}

.form-label {
   display: block;
   font-size: 0.875rem;
   font-weight: 500;
   color: #374151;
   margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
   width: 100%;
   padding: 0.75rem;
   border: 2px solid #d1d5db;
   border-radius: 0.32rem;
   font-size: 1rem;
   transition: border-color 0.2s;
   -webkit-appearance: none;
   appearance: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.1);
}

/*
   TODO: Verificar si está todo bien con este código comentado
*/
.form-textarea {
resize: vertical;
min-height: 80px;
}

.form-grid {
   display: grid;
   gap: 16px;
}

/* Buttons */
.btn-primary {
   background: #3b82f6;
   color: white;
}

.btn-primary:hover {
   background: #2563eb;
}

.btn-success {
   background: #10b981;
   color: white;
}

.btn-success:hover {
   background: #059669;
}

.btn-danger {
   background: #ef4444;
   color: white;
}

.btn-danger:hover {
   background: #dc2626;
}

.btn-full {
   width: 100%;
}

/* Task Items */
.task-item {
   border-left: 0.25rem solid;
   padding: 1rem;
   border-radius: 0 0.5rem 0.5rem 0;
   margin-bottom: 0.75;
   animation: fadeIn 0.3s ease-out;
}
.task-item.priority-high {
   border-left-color: #f87171;
   background: #fef2f2;
}
.task-item.priority-medium {
   border-left-color: #fbbf24;
   background: #fffbeb;
}
.task-item.priority-low {
   border-left-color: #34d399;
   background: #ecfdf5;
}
.task-info h3 {
   font-weight: 600;
   color: #1f2937;
   margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.task-info p, .task-time {
   color: #6b7280;
   font-size: 0.875rem;
   margin-bottom: 0.5rem;
}
.task-card {
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;
   padding: 1rem;
   margin-bottom: 1rem;
   transition: box-shadow 0.2s;
}
.task-card:hover {
   box-shadow: 0 0.25rem 6px -1px rgba(0, 0, 0, 0.1);
}
.task-card-content {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}
.task-card h3 {
   font-weight: 600;
   color: #1f2937;
   margin-bottom: 0.5rem;
}
.task-card p {
   color: #6b7280;
   font-size: 0.875rem;
   margin-bottom: 0.75rem;
}
.task-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}
.task-completed {
   animation: completePulse 0.6s ease-out;
}

.tag {
   padding: 0.25rem 0.5rem;
   border-radius: 9999px;
   font-size: 0.875rem;
}
.tag-frequency {
   background: #dbeafe;
   color: #1e40af;
}
.tag-priority-high {
   background: #fee2e2;
   color: #991b1b;
}
.tag-priority-medium {
   background: #fef3c7;
   color: #92400e;
}
.tag-priority-low {
   background: #d1fae5;
   color: #065f46;
}
.tag-time {
   background: #f3f4f6;
   color: #1f2937;
}

/* Stats Grid */
.stats-grid {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat-card {
   padding: 1rem;
   border-radius: 0.5rem;
   text-align: center;
}
.stat-card.blue {
   background: #eff6ff;
}
.stat-card.green {
   background: #ecfdf5;
}
.stat-card.purple {
   background: #f3e8ff;
}
.stat-card.yellow {
   background: #fffbeb;
}
.stat-card.indigo {
   background: #eef2ff;
}
.stat-card.pink {
   background: #fdf2f8;
}
.stat-number {
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 0.25rem;
}
.stat-card.blue .stat-number {
   color: #2563eb;
}
.stat-card.green .stat-number {
   color: #059669;
}
.stat-card.purple .stat-number {
   color: #7c3aed;
}
.stat-card.yellow .stat-number {
   color: #d97706;
}
.stat-card.indigo .stat-number {
   color: #4f46e5;
}
.stat-card.pink .stat-number {
   color: #db2777;
}
.stat-label {
   font-size: 0.875rem;
   color: #6b7280;
}

/* Utilities */
.hidden {
   display: none;
}
.text-center {
   text-align: center;
}
.text-gray {
   color: #6b7280;
}
.py-8 {
   padding: 2rem 0;
}
.notification {
   position: fixed;
   top: 1rem;
   right: 1rem;
   background: #10b981;
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 0.5;
   box-shadow: 0 0.625rem 1rem -0.19rem rgba(0, 0, 0, 0.1);
   z-index: 1000;
   animation: fadeIn 0.3s ease-out;
}

.ad-label {
   display: block;
   margin-bottom: 0.75rem;
   color: #6c757d;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.toolsnav {
   display: grid;
   margin: 0 auto;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   column-gap: 10px;
   place-content: center;
   justify-content: center;
}
/*.toolsnav a:first-child {
   justify-self: end;
}
.toolsnav a:last-child {
   justify-self:start;
}*/

@keyframes completePulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); background-color: #10b981; }
   100% { transform: scale(1); }
}
@keyframes fadeIn {
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
}