/* =========================
   Helpers / Utilidades
========================= */
.box {
  border: var(--bd);
  border-radius: var(--radius);
  margin: var(--sp-1);
  padding: var(--sp-3);
}

.mainbox {
  margin: 7px; /* valor distinto al resto, se mantiene */
  padding: var(--sp-3);
}

.metainfo {
  padding: var(--sp-1);
  font-size: 0.8em;
  /*font-weight: bold;*/
  text-align: left;
}

.toolbox {
  display: none;
}

section.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font-size: 0.9em;
}

section.text h1 {
  /*border-left: 6px solid var(--c-text);*/
  font-size: 1.1em;
  font-weight: 600;
}

#timer {
  margin-top: 5px;
  border: var(--bd);
  font-size: 1.4em;
  padding: 3px;
  width: 100%;
  align-items: center;
  text-align: center;
}

.timer-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.timer-controls .action {
  min-width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
.timer-controls{display:flex;gap:.5rem;margin-top:.25rem}
.timer-controls .action{min-width:2.25rem;display:inline-flex;align-items:center;justify-content:center}
*/

progress {
  width: 100%;
  height: 14px;
  accent-color: steelblue;
}

.text .quote {
  font-style: italic;
  opacity: 0.9;
  margin: 0.25rem 0 0.75rem;
}

/* =========================
   Accesibilidad / Motion
========================= */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

img.icon {
  height: 20px;
  align-items: center;
}

img.iconme {
  height: 20px;
  border-radius: 10px;
  align-items: center;
}