/* ==========================================================================
   Bancada — Pantalla de inicio
   El trabajo que quedó abierto, tres puertas grandes y la biblioteca de
   trabajos. Nunca una pantalla vacía.
   ========================================================================== */

.inicio {
  height: 100%;
  overflow-y: auto;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--acc-soft) 0%, transparent 62%),
    radial-gradient(900px 460px at 92% 6%, var(--steel-soft) 0%, transparent 58%),
    var(--paper);
}
.inicio__interior {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s9) var(--s7) var(--s8);
}

/* ---- Encabezado ---------------------------------------------------------- */
.inicio__hola {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -.028em;
  margin: 0 0 6px;
  line-height: var(--lh-tight);
}
.inicio__bajada {
  font-size: var(--fs-md);
  color: var(--ink-3);
  margin: 0 0 var(--s7);
  max-width: 68ch;
  line-height: var(--lh-base);
}
/* Lo que hace el programa, en un renglón: es lo primero que se lee. */
.inicio__bajada b { color: var(--ink-2); font-weight: 620; }

/* ---- «Seguís con…»: el trabajo que quedó abierto ---------------------------- */
/* Va arriba de las puertas porque es lo primero que quiere el que acaba de
   apretar «Volver a mis trabajos». Es blanca como las puertas (no ámbar como el
   ejemplo: no tiene que competir con la tercera puerta) y lleva una cinta a la
   izquierda que cambia de color con el estado. Con el estado escrito en la
   etiqueta, el color es un refuerzo y no la única señal. */
.inicio__seguis {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
/* `display: grid` pisa el [hidden] del navegador. */
.inicio__seguis[hidden] { display: none; }

.inicio__seguis::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  background: var(--line-strong);
}
.inicio__seguis[data-estado="sucio"]::before { background: var(--acc); }
.inicio__seguis[data-estado="guardado"]::before { background: var(--ok); }

.inicio__seguis-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc);
}
.inicio__seguis-texto { min-width: 0; }
.inicio__seguis-cab {
  display: flex; align-items: center; gap: var(--s3);
  min-width: 0;
}
.inicio__seguis-titulo {
  flex: 0 1 auto; min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 640;
  letter-spacing: -.014em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inicio__estado { flex: none; }
.inicio__estado::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.inicio__seguis-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  margin-top: 3px;
  font-size: var(--fs-sm); color: var(--ink-3);
}
.inicio__seguis-meta .punto { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); opacity: .6; }
.inicio__seguis-acciones { display: flex; align-items: center; gap: var(--s2); flex: none; }

@media (max-width: 880px) {
  .inicio__seguis { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s3); }
  .inicio__seguis-acciones { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---- Las tres puertas ---------------------------------------------------- */
.puertas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s8);
}
/* Con la ventana angosta las tres siguen en fila, más apretadas; recién en una ventana chica pasan a una columna. */
@media (max-width: 1100px) { .puerta { padding: var(--s5); } }
@media (max-width: 880px) { .puertas { grid-template-columns: 1fr; } }

.puerta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  min-height: 218px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.puerta::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow var(--t) var(--ease);
  pointer-events: none;
}
.puerta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.puerta:hover::after { box-shadow: inset 0 0 0 1.5px var(--acc); }
.puerta:focus-visible { outline: none; box-shadow: var(--sh-3), var(--ring); }
.puerta:active { transform: translateY(-1px); }

.puerta--acero:hover::after { box-shadow: inset 0 0 0 1.5px var(--steel); }

.puerta__ilustracion {
  height: 88px;
  display: flex; align-items: center;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.puerta:hover .puerta__ilustracion .acento { stroke: var(--acc); }
.puerta--acero:hover .puerta__ilustracion .acento { stroke: var(--steel); }
.puerta__ilustracion .relleno { fill: var(--paper-2); }
.puerta__ilustracion .acento { stroke: var(--ink-3); transition: stroke var(--t) var(--ease); }

.puerta__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: -.018em;
  margin: 0;
}
.puerta__texto {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  line-height: var(--lh-base);
  max-width: 38ch;
}
.puerta__pie {
  margin-top: auto;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--acc);
}
.puerta--acero .puerta__pie { color: var(--steel); }
.puerta__pie svg { transition: transform var(--t) var(--ease-out); }
.puerta:hover .puerta__pie svg { transform: translateX(3px); }

/* ---- El trabajo de ejemplo ------------------------------------------------ */
/* Se ve sólo mientras no haya ningún trabajo guardado ni uno en curso (lo
   esconde inicio.js).
   Va en ámbar para que no compita de igual a igual con las puertas: es la
   salida de emergencia del que abrió el programa y no sabe por dónde empezar. */
.ejemplo-zona { margin: calc(var(--s4) * -1) 0 var(--s8); }

.ejemplo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  padding: var(--s4) var(--s5);
  text-align: left;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out),
              background var(--t) var(--ease);
}
.ejemplo:hover { transform: translateY(-2px); box-shadow: var(--sh-3); background: var(--acc-soft-2); }
.ejemplo:focus-visible { outline: none; box-shadow: var(--sh-2), var(--ring); border-color: var(--acc); }
.ejemplo:active { transform: translateY(0); }

.ejemplo__ilustracion { display: flex; flex: none; }
.ejemplo__ilustracion .tablero { fill: var(--surface); stroke: var(--acc-line); stroke-width: 1.3; }
.ejemplo__ilustracion .pieza { fill: var(--paper-2); stroke: var(--acc-line); stroke-width: 1.1; }
.ejemplo__ilustracion .acento { stroke: var(--acc); stroke-width: 1.5; }

.ejemplo__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 640;
  letter-spacing: -.014em;
  color: var(--acc-ink);
  margin: 0 0 3px;
}
.ejemplo__bajada {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-base);
  margin: 0;
  max-width: 64ch;
}
.ejemplo__cta {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--acc); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 620;
  white-space: nowrap;
}
:root[data-theme="dark"] .ejemplo__cta { color: var(--paper); }
.ejemplo:hover .ejemplo__cta { background: var(--acc-hover); }
.ejemplo__cta svg { transition: transform var(--t) var(--ease-out); }
.ejemplo:hover .ejemplo__cta svg { transform: translateX(3px); }

@media (max-width: 880px) {
  .ejemplo { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s3); }
  .ejemplo__cta { grid-column: 1 / -1; justify-content: center; }
}

/* ---- Biblioteca de trabajos ---------------------------------------------- */
.biblioteca__barra {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
}
.biblioteca__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 640; margin: 0;
  letter-spacing: -.012em;
}
.buscador { position: relative; width: 250px; }
.buscador svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.buscador .input { padding-left: 33px; height: 34px; }

.trabajos {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.trabajo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.trabajo:last-child { border-bottom: 0; }
.trabajo:hover { background: var(--paper-2); }
.trabajo:focus-visible { outline: none; background: var(--acc-soft); box-shadow: inset 0 0 0 1.5px var(--acc); }

.trabajo__ico {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--line);
}
.trabajo__nombre {
  font-size: var(--fs-base); font-weight: 580; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trabajo__meta {
  font-size: var(--fs-xs); color: var(--ink-4);
  display: flex; align-items: center; gap: 7px; margin-top: 1px;
}
.trabajo__meta .punto { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); opacity: .6; }
.trabajo__total {
  font-size: var(--fs-md); font-weight: 640;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
  white-space: nowrap;
}
.trabajo__acciones { display: flex; gap: 4px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.trabajo:hover .trabajo__acciones, .trabajo:focus-within .trabajo__acciones { opacity: 1; }

/* ---- Pie ------------------------------------------------------------------ */
.inicio__pie {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-4);
}
.inicio__pie .espacio { flex: 1; }