/* flots · css/paginas/panel.css
   Panel del cliente (/panel) — Panel.dc.html (1440) y MPanel.dc.html (390).
   Incluye también las piezas compartidas del área de cliente (.area-…) que usan
   Panel, Documentos y Avances (js/paginas/cliente/_area-cliente.js). */

/* ---------- Compartido del área (Panel / Documentos / Avances) ---------- */
.area-vacio{ align-items:flex-start; padding:8px 0 0; text-align:left; }
.area-vacio .vacio-texto{ max-width:520px; }
.area-alerta .alerta-texto{ color:var(--text-body); }

/* ---------- Página ---------- */
/* El main del diseño centra el contenido en vertical */
.panel-shell .shell-main{ justify-content:center; }

.panel-cabecera{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}
.panel-titulos{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.panel-sub{ margin:0; font-size:18px; line-height:1.45; color:var(--muted); }
.panel-entrega{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  margin:0;
  font-size:15px;
  text-align:right;
}
.panel-entrega-etiqueta{ color:var(--muted); }
.panel-entrega-fecha{ font-size:20px; }

/* Alerta "Para seguir necesito de vos" (desktop: título + texto + botón en fila) */
.panel-alerta-linea{ display:contents; }

/* ---------- Carpeta ---------- */
.panel-carpeta{ position:relative; flex-shrink:0; min-width:0; }
.panel-carpeta-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  height:56px;
  padding:0 28px;
  border-radius:16px 16px 0 0;
  background:var(--ink);
  color:#FFFFFF;
  font-size:16px;
  font-weight:500;
}
.panel-carpeta-tab img{ flex-shrink:0; width:auto; height:22px; filter:invert(1); }
.panel-carpeta-marca{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-carpeta-cuerpo{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:30px;
  margin-top:-12px;
  padding:44px 36px 0;
  border-radius:0 18px 18px 18px;
  background:var(--ink);
}

/* Hojas */
.panel-hojas{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
.panel-hojas > li{ display:flex; min-width:0; }
.panel-hojas > li:nth-child(1){ --giro:-1.4deg; }
.panel-hojas > li:nth-child(2){ --giro:1deg; }
.panel-hojas > li:nth-child(3){ --giro:-0.8deg; }
.panel-hojas > li:nth-child(4){ --giro:1.3deg; }

.panel-hoja{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:100%;
  min-height:250px;
  padding:20px 22px;
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--sombra-hoja);
  transform:rotate(var(--giro, 0deg));
  transition:transform .25s ease;
}
.panel-hoja-bloqueada{ background:var(--paper-alt); }
/* Las hojas miden su propio ancho: si quedan angostas (contenido < 160 px, p. ej. 1200–1380 px de ventana) el candado usa el texto corto de MPanel */
.panel-hoja{ container:hoja / inline-size; }
.panel-bloqueo-corto{ display:none; }
@container hoja (max-width: 160px){
  .panel-bloqueo-largo{ display:none; }
  .panel-bloqueo-corto{ display:inline; }
}
a.panel-hoja:hover{ color:var(--ink); }
@media (hover: hover){
  .panel-hoja:hover{ transform:translateY(-10px) rotate(0deg); }
}
.panel-hoja:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:4px;
  transform:translateY(-10px) rotate(0deg);
}

.panel-hoja-arriba{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.panel-hoja-insignia{ align-self:flex-start; }
.panel-hoja-titulo{
  font-size:26px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.02em;
  overflow-wrap:break-word;
}
.panel-hoja-desc{ font-size:15px; line-height:1.45; color:var(--muted); }
.panel-hoja-pie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.panel-hoja-estado{ min-width:0; font-size:14px; font-weight:600; }
.panel-hoja-abrir{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:500;
}
.panel-hoja-bloqueo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:14px;
  line-height:1.25;
  color:var(--muted);
  text-align:right;
}

/* Cronograma */
.panel-cronograma{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:112px;
  margin:0 -36px;
  padding:0 36px;
  border-radius:18px;
  background:var(--ink-2);
  color:#FFFFFF;
}
.panel-cronograma-titulo{ flex-shrink:0; font-size:14px; opacity:.7; }
.panel-etapas{
  flex-grow:1;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
}
.panel-etapa{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.panel-etapa-barra{ display:block; height:3px; background:var(--ink-3); }
.panel-etapa-hecha .panel-etapa-barra{ background:#FFFFFF; }
.panel-etapa-actual .panel-etapa-barra{ background:var(--accent); }
.panel-etapa-proxima{ opacity:.5; }
.panel-etapa-texto{ padding-right:8px; line-height:1.35; }
.panel-etapa-ahora{ opacity:.6; }
.panel-cronograma-ahora{ margin:0; font-size:14px; }
.panel-cronograma-ahora strong{ font-weight:600; }

/* ---------- Modal "Subir material" ---------- */
.panel-modal-cuerpo{ display:flex; flex-direction:column; gap:18px; }
.panel-modal-pendientes{ font-size:15px; line-height:1.5; color:var(--text-body); }
.panel-modal-etiqueta{ margin:0 0 6px; font-weight:600; color:var(--ink); }
.panel-modal-pendientes ul{ margin:0; padding-left:20px; }
.panel-modal-error{ margin:0; font-size:14px; font-weight:500; color:var(--danger); }

/* ---------- Tablet (768–1199): 2 × 2 hojas ---------- */
@media (max-width: 1199px){
  .panel-shell .shell-main{ justify-content:flex-start; }
  .panel-hojas{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 22px; }
  .panel-hoja{ min-height:210px; gap:18px; }
  .panel-cronograma{ padding:24px 36px; }
}

/* ---------- Celular (MPanel) ---------- */
@media (max-width: 767px){
  .panel-cabecera{ flex-direction:column; align-items:stretch; gap:8px; }
  .panel-titulos{ gap:8px; }
  /* MPanel: 48 px a 390 (el token display-sm da 44) y un poco menos en 360 */
  .panel-titulos .display-sm{ font-size:clamp(42px, 12.3vw, 48px); }
  .panel-sub{ font-size:15px; }

  .panel-alerta{ gap:12px; }
  .panel-alerta-linea{ display:block; font-size:15px; line-height:1.45; }
  .panel-alerta .alerta-titulo{ font-weight:600; }
  .panel-alerta .alerta-texto{ color:var(--text-body); }

  .panel-carpeta-tab{
    gap:10px;
    height:44px;
    padding:0 20px;
    border-radius:14px 14px 0 0;
    font-size:14px;
  }
  .panel-carpeta-tab img{ height:18px; }
  .panel-carpeta-cuerpo{
    gap:14px;
    margin-top:-1px;
    padding:20px 16px 0;
    border-radius:0 16px 16px 16px;
  }

  .panel-hojas{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .panel-hojas > li:nth-child(1){ --giro:-1.2deg; }
  .panel-hojas > li:nth-child(2){ --giro:0.8deg; }
  .panel-hojas > li:nth-child(3){ --giro:-0.6deg; }
  .panel-hojas > li:nth-child(4){ --giro:1deg; }

  .panel-hoja{
    justify-content:flex-start;
    gap:8px;
    height:auto;
    min-height:0;
    padding:16px 18px;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  /* Título + insignia en una fila, descripción debajo */
  .panel-hoja-arriba{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
  }
  .panel-hoja-vacio{ display:none; }
  .panel-hoja-titulo{ grid-column:1; grid-row:1; font-size:20px; }
  .panel-hoja-insignia{ grid-column:2; grid-row:1; align-self:center; }
  .panel-hoja-desc{ grid-column:1 / -1; font-size:14px; line-height:1.4; }
  .panel-hoja-pie{ padding-top:10px; }
  .panel-hoja-estado{ font-size:13px; }
  .panel-hoja-abrir{ gap:6px; font-size:14px; }
  .panel-hoja-abrir .icono{ width:14px; height:14px; }
  .panel-hoja-bloqueo{ gap:6px; font-size:13px; }
  .panel-bloqueo-largo{ display:none; }
  .panel-bloqueo-corto{ display:inline; }
  .panel-hoja-bloqueo .icono{ width:14px; height:14px; }

  .panel-cronograma{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    min-height:0;
    margin:6px -16px 0;
    padding:18px 20px;
    border-radius:16px;
  }
  .panel-cronograma-titulo{ font-size:13px; }
  .panel-etapas{ gap:4px; }
  .panel-etapa{ gap:0; }
  .panel-etapa-proxima{ opacity:1; }
  /* En celular las etapas son solo barras; el nombre queda para lectores de pantalla */
  .panel-etapa-texto{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
}