:root {
      --primary: #080d0d;
      --secondary: #648285;
      --accent: #b4a68e;
      --light: #a3c4c2;
      --white: #ffffff;
      --accentlight: #d7d0c4;
    }
    * { box-sizing: border-box; }

/* Header fijo arriba */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5em;
    background: var(--light);
    display: flex;
    padding: 0 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    html, body {
      margin: 0;
      padding: 0;
        padding-top: 3em;
      background: var(--light);
      font-family: 'Roboto', sans-serif;
      display: flex;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      justify-content: center;
    }
    /* =============== ACCORDION =============== */
    .accordion {
      width: 100%;
      max-width: 500px;
      margin: 0.5rem auto;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .accordion-header {
      background: var(--secondary);
      color: var(--white);
      padding: 0.75rem 1rem;
      font-size: 1.1rem;
      cursor: pointer;
      user-select: none;
    }
    .accordion-header:hover { background: var(--accent); }
    .accordion-content {
      padding: 1rem;
      display: none;
      background: var(--white);
    }
    /* Por defecto, el accordion de Checklist estará abierto */
    #checklistAccordion .accordion-content { display: block; }
    /* =============== Container Checklist =============== */
    .container { text-align: center; }
    h1 {
      margin: 0.5rem 0;
      color: var(--primary);
      outline: none;
      cursor: text;
    }
    #creationDate {
      display: block;
      margin: 0 auto 1rem;
      padding: 0.3rem;
      border: none;
      border-bottom: 1px solid var(--secondary);
      font-size: 1rem;
      text-align: center;
      color: var(--primary);
    }
    /* Botón para abrir modal de tareas */
    #openAddTaskModal {
      padding: 0.5rem 1rem;
      margin-bottom: 1rem;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      background-color: var(--secondary);
      color: var(--white);
      cursor: pointer;
      transition: background 0.3s;
    }
    #openAddTaskModal:hover { background-color: var(--accent); }
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
    }
/* Evita selección de texto en tareas y sus hijos */
#taskList li,
#taskList li * {
  -webkit-user-select: none; /* Chrome, Safari y Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Estándar */
}
#taskList li,
#taskList li .task-text,
#taskList li .task-desc {
    -webkit-touch-callout: none;    /* quita la lupa / menú contextual en iOS */
  user-select: none;              /* quita selección de texto en navegadores modernos */
  -webkit-user-select: none;      /* quita selección en WebKit */
  -ms-user-select: none;          /* quita selección en IE10+ */
}


    lihelp {
      display: -webkit-box;
      align-items: center;
      padding: 0.5rem;
      border-bottom: 1px solid var(--accent);
      background: var(--white);
    }
    li {
      display: flex;
      align-items: center;
      padding: 0.5rem;
      border-bottom: 1px solid var(--accent);
      background: var(--white);
    }
    li:last-child { border-bottom: none; }
    li .drag-icon {
      margin-right: 0.5rem;
      cursor: move;
      color: #cbcbcb;
    }
    li input[type="checkbox"] {
      margin-right: 1rem;
      transform: scale(1.2);
    }
    .task-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-right: 1em;
    }
    .task-text {
      font-size: 1rem;
      color: var(--primary);
    }
    .task-text.completed {
      text-decoration: line-through;
      color: var(--accent);
    }
    .task-desc {
      font-size: 0.85rem;
      color: var(--accent);
      margin-top: 0.2rem;
    }
    .remove-task {
      background: var(--accentlight);
      border: none;
      border-radius: 4px;
      color: var(--white);
      padding: 0.3rem 0.6rem;
      cursor: pointer;
      transition: background 0.3s;
    }
    .remove-task:hover { background: var(--accent); }
    .actions {
      margin-top: 1rem;
      display: flex;
      justify-content:;
      flex-wrap: wrap;
    }
    .actions button {
      flex: 1;
      padding: 0.5rem;
      margin: 0.3rem;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      background: var(--secondary);
      color: var(--white);
      cursor: pointer;
      transition: background 0.3s;
    }
    .actions button:hover { background: var(--accent); }
    /* Nuevo botón para actualizar el checklist con el icono cycle (cached) */
    .actions button#updateChecklist {
      
    }
    .over { border: 2px dashed var(--primary); }
    /* =============== Container Cronómetro =============== */
    .timer-container {
      text-align: center;
      padding: 1.5rem;
      border-radius: 12px;
    }
    .timer-container h2 { margin: 0 0 1rem; color: var(--primary); }
    .timer-controls label {
      margin: 0 0.5rem;
      font-size: 0.95rem;
      color: var(--primary);
    }
    .timer-input {
      margin: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 0.5em;
    }
    .timer-input button {
      padding: 0.5rem;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      background-color: var(--secondary);
      color: var(--white);
      cursor: pointer;
      transition: background 0.3s;
      margin-left: 0.5rem;
    }
    .timer-input button:hover { background-color: var(--accent); }
    .timer-input input {
      padding: 0.3rem;
      border: none;
      border-bottom: 1px solid var(--secondary);
      font-size: 1rem;
      text-align: center;
      width: 150px;
    }
    .timer-display {
      font-size: 2rem;
      font-weight: bold;
      color: #7d9494;
      margin: 1rem 0;
    }
    .timer-actions button {
      margin: 0 0.3rem;
      padding: 0.4rem 0.8rem;
      border: none;
      border-radius: 4px;
      background: var(--secondary);
      color: var(--white);
      cursor: pointer;
      transition: background 0.3s;
    }
    .timer-actions button:hover { background: var(--accent); }
    /* =============== Modal Styles =============== */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: var(--white);
      margin: 15% auto;
      padding: 20px;
      border: 1px solid var(--secondary);
      border-radius: 8px;
      width: 80%;
      max-width: 400px;
      text-align: center;
    }
      .modal-content-start{
          background-color: var(--white);
      margin: 20% auto;
      padding: 20px;
      border: 1px solid var(--secondary);
      border-radius: 8px;
      width: 80%;
      max-width: 400px;
      text-align: center;
      border: none;
    box-shadow: 1px 1px 10px #00000047;
          
      }
    .modal-content input {
      width: 90%;
      padding: 0.5rem;
      margin: 0.5rem 0;
      border: none;
      border-bottom: 1px solid var(--secondary);
      font-size: 1rem;
      outline: none;
    }
    .modal-content button, .modal-content-start button {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      margin-top: 1rem;
      border: none;
      border-radius: 4px;
      background-color: var(--secondary);
      color: var(--white);
      cursor: pointer;
      transition: background 0.3s;
      column-gap: 0.5em;
    }
    .modal-content button:hover { background-color: var(--accent); }
    .close {
      color: var(--primary);
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .close:hover { color: var(--accent); }
    /* =============== Footer y Ayuda =============== */
    .footer {
      text-align: center;
      margin: 1rem 0;
      color: var(--primary);
    }
    .footer .help-icon {
      font-size: 2rem;
      cursor: pointer;
      transition: color 0.3s;
    }
    .footer .help-icon:hover { color: var(--accent); }
    
    @media (max-width: 500px) {
        .modal-content-start{
                margin: 50% auto;
        }
      .accordion, .timer-container { 
        padding: 0px 1rem;
        box-shadow: none;
        margin: 2px;
      }
    }