/* flots · css/paginas/est-proyectos.css
   Estudio · Proyectos (/estudio/proyectos) — AdminProyectos (1440 × 960).
   El shell ya da main: padding 56px 72px 48px, columna con gap 28 (igual al diseño).
   Celular: sin artboard propio; se adapta con el lenguaje de MAdmin (carpetas compactas). */

.est-proys{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
}

/* Encabezado: h1 80/300 + resumen 16 gris, alineados abajo */
.est-proys-cabecera{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px 32px;
}
.est-proys-resumen{ font-size:16px; line-height:1.4; color:var(--muted); }

/* Pestañas (el borde #D9D8D3 ya es el de .pestanas) */
.est-proys-pestanas{ margin:0; }
.est-proys-panel{ min-width:0; }
.est-proys-panel:focus{ outline:none; }

/* Grilla de carpetas: 3 columnas, gap 24 */
.est-proys-grilla{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
}
.est-proys-grilla > li{ min-width:0; }

/* Carpeta (AdminProyectos: tab 110×32, cuerpo desde 16 px, alto 220) */
.est-proys-carpeta{
  position:relative;
  display:block;
  height:220px;
  color:#FFFFFF;
  text-decoration:none;
  transition:transform .25s ease;
}
.est-proys-carpeta:hover{ color:#FFFFFF; transform:translateY(-10px); }
/* El diseño usa contorno blanco (invisible sobre #F4F4F2): acá, acento. */
.est-proys-carpeta:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.est-proys-carpeta-tab{
  position:absolute;
  left:0;
  top:0;
  width:110px;
  height:32px;
  border-radius:10px;
  background:var(--ink);
}
.est-proys-carpeta-cuerpo{
  position:absolute;
  left:0;
  right:0;
  top:16px;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:22px 22px 18px;
  border-radius:12px;
  background:var(--ink-2);
}
.est-proys-carpeta.entregada .est-proys-carpeta-cuerpo{ background:var(--ink-3); }
.est-proys-carpeta.entregada .progreso-relleno{ background:#FFFFFF; }
.est-proys-carpeta.cancelada .progreso-relleno{ background:rgba(255,255,255,.5); }

.est-proys-carpeta-arriba{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.est-proys-carpeta-textos{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.est-proys-carpeta-nombre{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:22px;
  font-weight:500;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.est-proys-carpeta-sub{
  font-size:14px;
  opacity:.7;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.est-proys-carpeta-arriba .pastilla{ flex-shrink:0; }
.est-proys-carpeta-abajo{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.est-proys-carpeta-etapa{ font-size:15px; }
.est-proys-carpeta-fecha{ font-size:13px; opacity:.7; }

.est-proys-vacio{ padding:56px 24px; background:var(--surface); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px){
  .est-proys-grilla{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
}

/* ---------- Celular (lenguaje MAdmin: h1 48, carpetas compactas) ---------- */
@media (max-width: 767px){
  .est-proys{ gap:20px; }
  .est-proys-cabecera{ flex-direction:column; align-items:flex-start; gap:6px; }
  .est-proys-resumen{ font-size:14px; }
  .est-proys-grilla{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .est-proys-carpeta{ height:176px; }
  .est-proys-carpeta:hover{ transform:translateY(-4px); }
  .est-proys-carpeta-tab{ width:84px; height:28px; border-radius:9px; }
  .est-proys-carpeta-cuerpo{ top:12px; padding:18px 16px 14px; border-radius:11px; gap:8px; }
  .est-proys-carpeta-nombre{ font-size:18px; -webkit-line-clamp:1; }
  .est-proys-carpeta-sub{ font-size:13px; }
  .est-proys-carpeta-arriba .pastilla{ padding:3px 9px; font-size:11px; }
  .est-proys-carpeta-abajo{ gap:8px; }
  .est-proys-carpeta-etapa{ font-size:14px; }
  .est-proys-vacio{ padding:40px 20px; }
}