/* Proyectos (docs/proyectos.md), prefijo pry-: la lista con semáforo y avance, la página del
   proyecto (cabecera, barra de avance, línea de etapas, «Quién hace qué», tareas) y el asistente
   de tres pasos para crearlo. Cielo azul y pastel, colores sólidos sin degradados; los colores
   salen de las variables del tema, así que la versión oscura viene sola. */

.pry-para-que { color: var(--color-text-muted); max-width: 70ch; margin: 0 0 1rem; }
.pry-seccion-para-que { color: var(--color-text-soft); font-size: .92rem; margin: -.25rem 0 .75rem; }

/* ---------- Semáforo ---------- */
.pry-semaforo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
}
.pry-semaforo-verde { background: var(--color-success-bg); color: var(--color-success-tinta); }
.pry-semaforo-amarillo { background: var(--color-warning-bg); color: var(--color-warning-tinta); }
.pry-semaforo-rojo { background: var(--color-danger-bg); color: var(--color-danger-tinta); }
.pry-semaforo-gris { background: var(--color-surface-2); color: var(--color-text-soft); }

/* ---------- Barra de avance ---------- */
.pry-avance { display: flex; flex-direction: column; gap: .3rem; }
.pry-barra {
  height: 14px; border-radius: 999px; background: var(--color-surface-2);
  border: 1px solid var(--color-border); overflow: hidden;
}
.pry-barra-relleno { height: 100%; background: var(--color-success); border-radius: 999px; transition: width var(--dur-2) var(--ease-out); }
.pry-barra-chica { height: 8px; }
.pry-avance-texto { font-weight: 700; }
.pry-avance-explica { color: var(--color-text-soft); font-size: .88rem; }

/* ---------- Lista de proyectos ---------- */
.pry-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
.pry-tarjeta {
  display: flex; flex-direction: column; gap: .55rem; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--elev-1); cursor: pointer; color: var(--color-text);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.pry-tarjeta:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.pry-tarjeta:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; }
.pry-tarjeta-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pry-tarjeta-titulo h2 { font-size: 1.1rem; margin: 0; }
.pry-tarjeta-objetivo { color: var(--color-text-muted); margin: 0; font-size: .93rem; }
.pry-tarjeta-pie { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--color-text-soft); font-size: .86rem; }
.pry-chip {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .1rem .55rem;
  background: var(--sec-clima-bg); color: var(--sec-clima); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.pry-chip-lila { background: var(--sec-plataforma-bg); color: var(--sec-plataforma); }
.pry-chip-gris { background: var(--color-surface-2); color: var(--color-text-soft); }

/* El chip «📁 Proyecto» en los listados de tareas y en Mi día. */
.chip-proyecto {
  display: inline-flex; align-items: center; gap: .2rem; border-radius: 999px; padding: .05rem .5rem;
  background: var(--sec-clima-bg); color: var(--sec-clima); font-size: .8rem; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
a.chip-proyecto:hover { text-decoration: underline; }

/* ---------- Página del proyecto: cabecera ---------- */
.pry-cabecera {
  background: var(--sec-clima-bg); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.pry-cabecera h1 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.6rem; }
.pry-cabecera-objetivo { font-size: 1.05rem; margin: 0; }
.pry-cabecera-datos { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--color-text-muted); }
.pry-cabecera-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.pry-semaforo-grande { font-size: 1.05rem; padding: .35rem .9rem; }

/* ---------- Línea de etapas ---------- */
.pry-etapas { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; }
.pry-etapa {
  flex: 1 0 150px; min-width: 150px; scroll-snap-align: start;
  background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .65rem .75rem; display: flex; flex-direction: column; gap: .25rem; position: relative;
}
.pry-etapa-numero {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-text); font-weight: 800; font-size: .85rem;
}
.pry-etapa-nombre { font-weight: 700; }
.pry-etapa-fecha { color: var(--color-text-soft); font-size: .85rem; }
.pry-etapa-estado { font-size: .85rem; font-weight: 600; }
.pry-etapa-actual { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); }
.pry-etapa-actual .pry-etapa-numero { background: var(--color-primary); color: var(--color-sobre-relleno); }
.pry-etapa-terminada { background: var(--color-success-bg); border-color: var(--color-success); }
.pry-etapa-terminada .pry-etapa-numero { background: var(--color-success); color: var(--color-sobre-relleno); }
.pry-etapa-atrasada { border-color: var(--color-danger); }
.pry-etapa-atrasada .pry-etapa-estado { color: var(--color-danger-tinta); }

/* ---------- Quién hace qué ---------- */
.pry-quien { display: flex; flex-direction: column; gap: .5rem; }
.pry-quien-fila {
  display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(140px, 1.6fr); gap: .6rem; align-items: center;
  padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--color-surface-2);
}
.pry-quien-fila.pry-frena { background: var(--color-danger-bg); }
.pry-quien-nombre { font-weight: 700; }
.pry-quien-texto { font-size: .9rem; }
.pry-frena-marca { color: var(--color-danger-tinta); font-weight: 700; font-size: .85rem; }

/* ---------- Por persona ---------- */
.pry-persona { border-radius: var(--radius-sm); background: var(--color-surface-2); }
.pry-persona.pry-frena { background: var(--color-danger-bg); }
.pry-persona-fila { grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(140px, 1.6fr) auto; background: transparent; }
.pry-persona-tareas { padding: 0 .7rem .4rem; }

/* ---------- Tareas y dependencias ---------- */
.pry-tareas-etapa { margin: .9rem 0 .35rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.pry-tarea {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  padding: .55rem .2rem; border-bottom: 1px solid var(--color-border);
}
.pry-tarea:last-child { border-bottom: 0; }
.pry-tarea-titulo { flex: 1 1 260px; min-width: 0; }
.pry-tarea-titulo a, .pry-tarea-titulo button { font-weight: 600; text-align: left; }
.pry-tarea-detalle { color: var(--color-text-soft); font-size: .86rem; }
.pry-tarea-atrasada { color: var(--color-danger-tinta); font-weight: 700; font-size: .86rem; }
.pry-espera { color: var(--sec-plataforma); font-size: .86rem; }
.pry-dependencias { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pry-dependencia {
  background: var(--sec-plataforma-bg); color: var(--color-text); border-radius: var(--radius-sm); padding: .5rem .75rem;
}
.pry-dependencia-atrasada { background: var(--color-danger-bg); }

/* ---------- Pestañas de la página ---------- */
.pry-pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pry-pestanas .pestana { white-space: nowrap; flex: none; }

/* ---------- Crear en tres pasos ---------- */
.pry-pasos { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pry-paso {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .25rem .75rem;
  background: var(--color-surface-2); color: var(--color-text-soft); font-weight: 600; font-size: .88rem;
}
.pry-paso-activo { background: var(--color-primary); color: var(--color-sobre-relleno); }
.pry-paso-hecho { background: var(--color-success-bg); color: var(--color-success-tinta); }
.pry-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .75rem; }
.pry-etapa-editor { display: grid; grid-template-columns: 2rem 1fr 11rem auto; gap: .5rem; align-items: start; margin-bottom: .5rem; }
/* Arriba alineado: debajo de la fecha va su tramo; el número y los botones, a la altura del campo. */
.pry-etapa-editor > .pry-etapa-numero, .pry-etapa-editor > .flex { margin-top: .4rem; }
/* Tarea escrita a mano en el paso 3 del proyecto nuevo: título, departamento, etapa y ✕; debajo, sus opciones. */
.pry-tarea-a-mano {
  display: grid; grid-template-columns: 1fr 14rem 12rem auto; gap: .4rem .5rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--color-border);
}
.pry-tarea-a-mano-opcion { grid-column: span 2; font-size: .85rem; margin: 0; }
.pry-quitar-confirmar { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; }
.pry-etapa-cabecera { margin-bottom: .15rem; font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.pry-etapa-fecha { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pry-etapa-tramo { font-size: .75rem; color: var(--color-text-muted); line-height: 1.25; }
.pry-etapa-tramo-mal { color: var(--color-danger-tinta); font-weight: 600; }
.pry-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.pry-plantilla {
  text-align: left; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
  padding: .7rem .8rem; cursor: pointer; color: var(--color-text);
}
.pry-plantilla:hover { border-color: var(--color-primary); }
.pry-plantilla-elegida { border-color: var(--color-primary); background: var(--color-primary-light); }
/* «En blanco», igual que en el diseñador de flujos: la opción de no usar plantilla, con borde punteado. */
.pry-plantilla-blanco { border-style: dashed; }
.pry-plantilla-titulo { font-weight: 700; display: block; }
.pry-plantilla-texto { color: var(--color-text-soft); font-size: .86rem; }
.pry-propuesta { display: grid; grid-template-columns: auto 1fr minmax(130px, 11rem) minmax(120px, 10rem) auto; gap: .45rem; align-items: center; margin-bottom: .45rem; }
.pry-propuesta-sin { opacity: .55; }

/* ---------- Las hojas de proyectos en el teléfono ----------
   La página vive dentro de un bloque con animación (crea su propia capa), así que el menú de
   abajo queda por encima de la hoja: se le deja su hueco para que los botones queden a la vista. */
@media (max-width: 900px) {
  .pry-modal {
    margin-bottom: calc(var(--nav-inferior) + env(safe-area-inset-bottom));
    max-height: calc(92dvh - var(--nav-inferior) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

/* ---------- Teléfono (390 px) ---------- */
@media (max-width: 640px) {
  .pry-cabecera { padding: .9rem; }
  .pry-cabecera h1 { font-size: 1.3rem; }
  .pry-quien-fila, .pry-persona-fila { grid-template-columns: 1fr; gap: .3rem; }
  .pry-persona-fila .btn { justify-self: start; }
  .pry-etapa { flex-basis: 140px; min-width: 140px; }
  .pry-etapa-editor { grid-template-columns: 1.6rem 1fr auto; row-gap: .35rem; margin-bottom: .8rem; }
  .pry-etapa-cabecera { display: none; }
  .pry-tarea-a-mano { grid-template-columns: 1fr auto; }
  .pry-tarea-a-mano > select { grid-column: 1 / -1; }
  .pry-tarea-a-mano-opcion { grid-column: 1 / -1; }
  .pry-etapa-editor > :nth-child(2) { grid-column: 2 / 4; }
  .pry-etapa-editor > :nth-child(3) { grid-column: 2; }
  .pry-etapa-editor > :nth-child(4) { grid-column: 3; }
  .pry-propuesta { grid-template-columns: auto 1fr; }
  .pry-propuesta > :nth-child(n+3) { grid-column: 2; }
  .pry-lista { grid-template-columns: 1fr; }
}