/* My Routines — tool-specific styles. Shared styles live in assets/css/. */

.tool-header h1 { color: var(--mod-secuencia); }

.btn:not(.btn-secundario):not(.btn-audio) {
  background: var(--mod-secuencia);
}

.instruccion { flex: 1; min-width: 200px; }

.routine-tabs {
  display: flex;
  gap: var(--espacio);
  margin: var(--espacio-grande) 0;
  border-bottom: 2px solid var(--color-borde);
}

.routine-tab {
  flex: 1;
  min-height: 64px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.routine-tab:hover,
.routine-tab:focus-visible,
.routine-tab.activa {
  color: var(--mod-secuencia);
  border-bottom-color: var(--mod-secuencia);
}

/* Routine menu sections */
.routines-list {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-grande);
}

.routines-section { display: flex; flex-direction: column; gap: var(--espacio); }
.routines-section-titulo {
  margin: 0;
  font-size: var(--text-grande);
  font-weight: 800;
  color: var(--mod-secuencia);
}

/* Subsecciones dentro de cada timeOfDay (Pasos / Ordenar).
   La segunda (Ordenar) se diferencia con un borde lateral y un
   espaciado para que se lea como un nivel subordinado, no como un
   grupo nuevo equivalente al timeOfDay del día. */
.routines-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
  padding-left: var(--espacio);
  border-left: 3px solid var(--color-borde);
}
.routines-subsection + .routines-subsection { margin-top: var(--espacio); }
.routines-subsection-titulo {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  text-transform: none;
}

.routine-card-ordenar { background: var(--color-superficie-2, #f7f4ef); }
.routine-card-ordenar .routine-card-media {
  background: var(--mod-secuencia-suave);
  opacity: 0.85;
}

/* Routine menu cards */
.routine-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--espacio);
  align-items: stretch;
  cursor: default;
  text-align: left;
  font-family: inherit;
  padding: 0;
  overflow: hidden;
}

.routine-card:hover { border-color: var(--mod-secuencia); }

.card-completed { border-color: var(--color-acierto); background: #f0faf2; }

.routine-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mod-secuencia-suave);
  font-size: 56px;
}
.card-completed .routine-card-media { background: #e0f4e6; }

.routine-card-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--espacio);
  min-width: 0;
}

.routine-card .name {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
}

.routine-card-progreso {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routine-card-barra {
  width: 100%;
  height: 8px;
  background: var(--color-borde);
  border-radius: 999px;
  overflow: hidden;
}
.routine-card-barra-fill {
  display: block;
  height: 100%;
  background: var(--mod-secuencia);
  transition: width 0.25s ease-out;
}
.card-completed .routine-card-barra-fill { background: var(--color-acierto); }
.routine-card .status { font-size: var(--text-pequeno); color: var(--color-text-suave); }

.routine-card-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
}
.routine-card-acciones .btn-empezar,
.routine-card-acciones .btn-ordenar-rutina {
  min-height: 48px;
  padding: 8px 20px;
}

@media (max-width: 480px) {
  .routine-card { grid-template-columns: 72px 1fr; }
  .routine-card-media { font-size: 40px; }
  .routine-card-acciones .btn-empezar,
  .routine-card-acciones .btn-ordenar-rutina { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .routine-card-barra-fill { transition: none; }
}

/* Lista de steps */
#stepsList { list-style: none; }

.paso {
  display: flex;
  align-items: center;
  gap: var(--espacio);
  padding: var(--espacio);
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
  opacity: 0.55;
}

.paso.current {
  opacity: 1;
  border-color: var(--mod-secuencia);
  background: var(--mod-secuencia-suave);
}

.paso.done { opacity: 0.8; }

.paso .picto { font-size: 44px; }
.paso .picto { width: 44px; height: 44px; object-fit: contain; }
.paso .text { flex: 1; font-weight: 600; }

.paso .check {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-acierto);
  min-width: 64px;
  text-align: center;
}

.btn-done { white-space: nowrap; }

.emoji-grande { font-size: 96px; }

#endScreen { padding-top: 48px; }

#endScreen .btn { align-self: center; min-width: 280px; }

/* Botón "Ordena la rutina" — estilo unificado (definido arriba, en la tarjeta). */

/* Pantalla "Ordena la rutina" — patrón La Casa.
   Dos columnas: izquierda = tu orden (slots), derecha = steps disponibles. */
.orden-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio);
  align-items: start;
}

.orden-col {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
  min-width: 0;
}

.orden-col-tu { border-right: 3px solid var(--color-borde); padding-right: var(--espacio); }

.etiqueta {
  font-weight: 700;
  color: var(--color-text-suave);
  margin: 0;
}

/* Slots de la column izquierda */
.slots-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
}

.slot-orden {
  display: grid;
  grid-template-columns: 40px 56px 1fr;
  align-items: center;
  gap: var(--espacio);
  min-height: 80px;
  padding: var(--espacio);
  background: var(--color-superficie);
  border: 3px dashed var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}

.slot-orden.filled {
  border-style: solid;
  border-color: var(--mod-secuencia);
  background: var(--mod-secuencia-suave);
}

.slot-orden.filled.selected {
  background: var(--mod-secuencia);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--mod-secuencia-suave);
}

.slot-orden.selected .slot-text,
.slot-orden.selected .slot-picto { color: #FFFFFF; }

.slot-orden.pista {
  border-color: var(--mod-secuencia);
  background: #FFF6D6;
  box-shadow: 0 0 0 4px rgba(245, 188, 66, 0.55);
  animation: pista-pulso 1.1s ease-in-out infinite;
}

@keyframes pista-pulso {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245, 188, 66, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(245, 188, 66, 0.15); }
}

.slot-orden:focus-visible {
  outline: 3px solid var(--mod-secuencia);
  outline-offset: 2px;
}

.slot-orden,
.paso-available { touch-action: none; }

.slot-orden.dragging,
.paso-available.dragging {
  opacity: 0.55;
  outline: 4px solid var(--mod-secuencia);
}

.slot-posicion {
  font-size: var(--text-grande);
  font-weight: 800;
  color: var(--mod-secuencia);
  text-align: center;
}

.slot-picto { font-size: 36px; text-align: center; }
.slot-text { font-weight: 600; font-size: var(--text-base); }

.slot-vacio-hint {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-borde);
  text-align: center;
  grid-column: 2 / 4;
}

/* Pasos disponibles de la column derecha */
.available-stack {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
  align-items: stretch;
}

.paso-available {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--espacio);
  min-height: 80px;
  padding: var(--espacio);
  background: var(--color-superficie);
  border: 3px solid var(--mod-secuencia);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
  transition: background 0.15s ease, transform 0.15s ease;
}

.paso-available:hover {
  background: var(--mod-secuencia-suave);
  transform: translateY(-1px);
}

.paso-available:focus-visible {
  outline: 3px solid var(--mod-secuencia);
  outline-offset: 2px;
}

.paso-available-picto { font-size: 36px; text-align: center; }

/* Barra de flechas ↑/↓ para mover el slot selected */
.move-slot-bar {
  display: flex;
  justify-content: center;
  gap: var(--espacio);
  margin-top: var(--espacio);
}

.btn-arrow-slot {
  min-width: 64px;
  min-height: 64px;
  border-radius: var(--radio);
  border: 3px solid var(--mod-secuencia);
  background: var(--mod-secuencia);
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 800;
  cursor: pointer;
}
.btn-arrow-slot:hover:not(:disabled) { background: var(--mod-secuencia-suave); color: var(--mod-secuencia); }
.btn-arrow-slot:disabled { opacity: 0.35; cursor: not-allowed; background: var(--color-superficie); color: var(--mod-secuencia); border-color: var(--color-borde); }
.btn-arrow-slot:focus-visible { outline: 3px solid var(--mod-secuencia); outline-offset: 2px; }

#btnHintOrder:disabled,
#btnResolveOrder:disabled,
#btnCheck:disabled { opacity: 0.45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .slot-orden,
  .paso-available { transition: none; }
  .slot-orden.pista { animation: none; }
}

@media (max-width: 760px) {
  .orden-dos-columnas { grid-template-columns: 1fr; }
  .orden-col-tu { border-right: none; border-bottom: 3px solid var(--color-borde); padding-right: 0; padding-bottom: var(--espacio); }
}

/* Ordenar rutina: en teléfonos cada acción debe ser fácil de localizar,
   tocar y leer sin obligar a hacer zoom ni desplazar horizontalmente. */
@media (max-width: 640px) {
  #orderScreen .instruccion { min-width: 0; }

  #orderScreen .orden-dos-columnas {
    gap: var(--espacio);
  }

  #orderScreen .slot-orden {
    grid-template-columns: 36px 44px minmax(0, 1fr);
    gap: 8px;
    min-height: 60px;
    padding: 8px;
  }

  #orderScreen .slot-picto,
  #orderScreen .paso-available-picto { font-size: 32px; }

  #orderScreen .paso-available {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    min-height: 64px;
    padding: 8px;
  }

  #orderScreen .slot-text,
  #orderScreen .paso-available-text {
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  #orderScreen .move-slot-bar {
    margin-top: 8px;
  }

  #orderScreen > .row {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  #orderScreen > .row .btn {
    width: 100%;
  }
}

/* ---- Crea tu lista libre ---- */
.lista-items-current {
  list-style: none;
  margin: 0;
  padding: var(--espacio);
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--mod-secuencia-suave);
  border-radius: var(--radio);
}

.lista-items-current .placeholder-text {
  margin: 0;
  color: var(--color-text-suave);
  font-style: italic;
  text-align: center;
}

.current-list-item {
  display: flex;
  align-items: center;
  gap: var(--espacio);
  padding: 10px 12px;
  background: var(--color-superficie);
  border-radius: 10px;
}

.current-list-item .text { flex: 1; font-weight: 600; }

.list-item-arrows {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-arrow-item {
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-suave);
  font-size: 18px;
  cursor: pointer;
}
.btn-arrow-item:hover:not(:disabled) { background: var(--color-borde); }
.btn-arrow-item:disabled { opacity: 0.3; cursor: not-allowed; }

.current-list-item .btn-remove-item {
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-suave);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.current-list-item .btn-remove-item:hover { background: var(--color-borde); }

.editing-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espacio);
  padding: 8px 12px;
  margin: 0 0 var(--espacio) 0;
  background: var(--mod-secuencia-suave);
  border-radius: var(--radio);
  font-weight: 600;
  text-align: center;
}

.btn-cancel-edit {
  min-height: 44px;
  padding: 4px 12px;
  border: 2px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-superficie);
  color: var(--color-text);
  cursor: pointer;
}
.btn-cancel-edit:hover { background: var(--color-superficie-2, #f7f4ef); }

.saved-list-editando { outline: 3px solid var(--mod-secuencia); outline-offset: 2px; }

.add-item-row {
  display: flex;
  gap: var(--espacio);
  margin: var(--espacio) 0;
  flex-wrap: wrap;
}

.input-list {
  flex: 1;
  min-width: 200px;
  min-height: var(--boton-min);
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
}

#btnSaveList:disabled { opacity: 0.45; cursor: not-allowed; }

.name-list { gap: var(--espacio); margin: var(--espacio) 0; }

.input-list-name {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: var(--boton-min);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
}

.saved-lists { margin-top: var(--espacio-grande); }

.saved-lists h3 {
  margin: 0 0 var(--espacio) 0;
  font-size: var(--text-base);
  color: var(--color-text);
}

.saved-list {
  background: var(--mod-secuencia-suave);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.saved-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
}

.saved-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
}

.saved-list-info .name { font-weight: 700; color: var(--color-text); }
.saved-list-info .count { font-size: var(--text-pequeno); color: var(--color-text-suave); }

.saved-list-acciones { display: flex; gap: 8px; flex-shrink: 0; }

.saved-list-acciones button {
  min-width: var(--boton-min);
  min-height: var(--boton-min);
  font-size: 22px;
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: 8px;
  cursor: pointer;
}
.saved-list-acciones button:hover { background: var(--color-superficie-2, #f7f4ef); }

.saved-list-items {
  list-style: none;
  margin: 0;
  padding: 0 var(--espacio) var(--espacio) var(--espacio);
}
.saved-list-items li {
  padding: 4px 0;
  color: var(--color-text);
  border-top: 1px solid var(--color-borde);
}
.saved-list-items li:first-child { border-top: none; }