/* Reskin de KIRO Cloud sobre la paleta de css/styles.css.
   Los nombres de clase status/err/ok/hidden/rec/cat/summary/summary-label
   son fijados por el script inline de cloud.html (className = '...') —
   no renombrar estos, aunque se retoque el resto libremente. */

:root{
  --green: #2f9e6b;
}

.cloud-main{
  padding: 160px 0 100px;
  min-height: 100vh;
}

.cloud-wrap{ max-width: 780px; transition: max-width 0.2s ease; }
/* Login se queda angosto y legible; en cuanto aparece la lista de grabaciones
   (recs-view sin .hidden), el contenedor se estira para aprovechar toda la
   pantalla -- ver #recs-list más abajo, que es lo que realmente usa ese ancho. */
.cloud-wrap:has(#recs-view:not(.hidden)){ max-width: 1680px; }

/* El formulario de login se queda angosto (más legible como formulario)
   aunque el contenedor general ahora sea más ancho -- recs-view sí usa
   todo el ancho disponible, que es el punto de agrandar .cloud-wrap. */
#login-card,
#login-card + .form-note{ max-width: 420px; }

.cloud-card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
}

.cloud-input{
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--gray-300);
  background: var(--off-white);
  color: var(--black);
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.2s ease;
}
.cloud-input:focus{ border-color: var(--black); }
.cloud-input::placeholder{ color: var(--gray-500); }

.cloud-card .btn-primary{
  width: 100%;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
}
.cloud-card .btn-primary:disabled{
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* nombre fijado por el script (setLoginStatus/setRecsStatus) */
.status{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--gray-500);
  margin-top: 14px;
  min-height: 1.2em;
}
.status.err{ color: var(--red); }
.status.ok{ color: var(--green); }

.logout{
  float: right;
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.logout:hover{ border-color: var(--black); color: var(--black); }

/* Grid de tarjetas -- cada .rec es su propia tarjeta (antes eran filas dentro
   de una única .cloud-card larga). auto-fit + minmax hace que se acomode solo:
   una columna en mobile, varias en pantallas anchas, sin media query aparte.
   auto-fit (no auto-fill): con pocas tarjetas, las columnas vacías colapsan a 0
   y las que sí tienen contenido estiran para ocupar el ancho -- con auto-fill
   quedaban reservadas como espacio vacío y la única tarjeta se veía angosta. */
#recs-list.recs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  align-items: start;
}
.recs-grid .empty-note{ grid-column: 1 / -1; }

/* nombre fijado por el script (div.className = 'rec', innerHTML con class="cat"/"summary"/"summary-label") */
.rec{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px 22px;
}
.rec h3{
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
}
.rec .cat{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.badge-muted{ color: var(--gray-500); }

.rec-head{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rec-head-main{ flex: 1 1 auto; min-width: 0; }
.rec-collapse-btn{
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 13px;
  line-height: 1.6;
  padding: 0 2px;
  cursor: pointer;
}
.rec-collapse-btn:hover{ color: var(--black); }
.rec-fav-btn{
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 21px;
  line-height: 1;
  color: var(--gray-300);
  cursor: pointer;
  padding: 0;
}
.rec-fav-btn:hover{ color: var(--gray-500); }
.rec-fav-btn.active,
.rec-fav-btn.active:hover{ color: #c08a2e; }
.rec pre{
  white-space: pre-wrap;
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  color: var(--gray-700);
  line-height: 1.7;
  margin-top: 12px;
}
.rec .summary{
  background: var(--gray-100);
  border-left: 2px solid var(--red);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
}
.rec .summary-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.empty-note{
  color: var(--gray-500);
  font-size: 13.5px;
}

.cloud-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.cloud-toolbar .cloud-input{
  margin-bottom: 0;
  width: auto;
  flex: 1 1 150px;
}

.rec-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  clear: both;
}
.rec-btn{
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rec-btn:hover{ border-color: var(--black); color: var(--black); }
.rec-btn-danger{ color: var(--red); border-color: var(--red); }
.rec-btn-danger:hover{ background: var(--red); color: var(--white); }
.rec-btn.active{ background: var(--olive); border-color: var(--olive); color: var(--white); }

.rec-edit{ margin-top: 14px; }
.rec-edit .cloud-input{ margin-bottom: 10px; }

.rec-check{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--olive);
}

.bulk-bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--gray-700);
}
.bulk-bar .status{ margin-top: 0; }

/* Nombre fijado por el script (classList.add/remove('hidden')) -- tiene que ir
   DESPUÉS de cualquier regla que setee display en un elemento que también
   pueda tener esta clase (misma especificidad -> gana la última en cascada),
   si no queda visible igual (bug ya visto con .bulk-bar y .cloud-toolbar). */
.hidden{ display: none !important; }

@media (max-width: 860px){
  .cloud-main{ padding: 120px 0 70px; }
}