/* coop.css — SOLO para /coop (no toca styles.css) */

/* ===== Layout full height para que el preview y textarea estiren ===== */
html.coop, body.coop{
  height: 100%;
}

body.coop{
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* el scroll va dentro de columnas */
}

/* Header normal del proyecto, pero aquí sticky (no fixed) */
body.coop .app-header{
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  z-index: 40;
}

/* Main ocupa todo el alto restante */
.coop-main{
  flex: 1 1 auto;
  min-height: 0;            /* CLAVE */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Wrap estira */
.coop-wrap{
  height: 100%;
  min-height: 0;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
}

/* ===== Grid 3 columnas desktop-first ===== */
.coop-grid{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;

  display:grid;
  grid-template-columns: minmax(320px, 2fr) minmax(520px, 3fr) 420px; /* 40/60 + preview fijo */
  gap: 12px;
  align-items: stretch;
}

/* Cada columna es una card que debe poder encoger */
.coop-col{
  height: 100%;
  min-height: 0;            /* CLAVE */
  display: flex;
  flex-direction: column;
  overflow: auto;           /* scroll interno si se pasa */
}
.coop-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.coop-toolbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.coop-toolbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.coop-select{
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: #eaf1ff;
  outline: none;
}
.coop-select option{
  background: #0b1220;
  color: #eaf1ff;
}
/* ===== Tipos ===== */
.coop-h2{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}
.coop-h3{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}
.coop-small{ font-size: 12px; }

.coop-col-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.coop-label{
  display: block;
  font-size: 12px;
  color: rgba(229,231,235,.72);
  margin: 10px 0 6px;
}

.coop-input{
  width: 100%;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.45);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  outline: none;
}

.coop-sep{
  border: 0;
  height: 1px;
  background: rgba(148,163,184,.16);
  margin: 14px 0;
}

.coop-ul{
  margin: 0;
  padding-left: 16px;
  color: rgba(229,231,235,.82);
  font-size: 13px;
}
.coop-ul code{
  font-size: 12px;
  color: rgba(229,231,235,.92);
}

.coop-helpbox{
  margin-top: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.30);
  border-radius: 12px;
  padding: 10px;
}
.coop-help-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  margin-bottom: 4px;
}
.coop-help-text{
  font-size: 12px;
  color: rgba(229,231,235,.75);
}

.coop-status{
  margin-top: 12px;
  font-size: 12px;
}

/* ===== Columna JS ===== */
.coop-codecol{
  min-height: 0; /* CLAVE */
}
.coop-codehead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.coop-codeactions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.coop-textarea{
  flex: 1 1 auto;
  min-height: 0;           /* CLAVE */
  width: 100%;
  resize: none;

  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.35);
  color: rgba(229,231,235,.92);
  border-radius: 12px;
  padding: 12px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.35;
  outline: none;
  white-space: pre;
  overflow: auto;          /* scroll dentro del textarea */
}

/* ===== Columna Preview ===== */
.coop-previewcol{
  min-height: 0;           /* CLAVE */
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* el scroll lo llevará el iframe */
}

.coop-previewhead{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.coop-framewrap{
  flex: 1 1 auto;
  min-height: 0;           /* CLAVE */
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}

.coop-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* ===== Footer coop ===== */
.coop-footer{
  flex: 0 0 auto;
  border-top: 1px solid rgba(148,163,184,.18);
  background: rgba(11,15,22,.35);
}

/* ===== Responsive fallback (aunque dices desktop-first) ===== */
@media (max-width: 1100px){
  body.coop{ overflow: auto; }       /* ya no cabe, permitimos scroll general */
  .coop-main{ overflow: visible; }
  .coop-wrap{ height: auto; }

  .coop-grid{
    grid-template-columns: 1fr;
  }

  .coop-col{
    height: auto;
    overflow: visible;
  }

  .coop-framewrap{
    height: 560px; /* preview usable en móvil/pequeño */
  }
}
/* ===== Coop: usar TODO el ancho (anula .wrap del styles.css) ===== */
body.coop .wrap{
  max-width: none;
  width: 100%;
}
body.coop .app-header .wrap,
body.coop .coop-wrap{
  margin: 0;          /* sin centrado */
}
/* ===== 3 columnas + preview con tamaño iPhone ===== */
.coop-grid{
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr minmax(380px, 430px);
  gap: 12px;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

/* Columna 3: centra el "teléfono" */
.coop-previewcol{
  align-items: center;
}

/* Marco tipo iPhone (390x844) */
:root{
  --phone-w: 390px;
  --phone-h: 844px;
}

.coop-framewrap{
  /* ya no “flex:1” aquí, queremos tamaño controlado */
  flex: 0 0 auto;

  /* si hay espacio, tamaño iPhone; si no, se reduce sin desbordar */
  width: min(var(--phone-w), 100%);
  height: min(var(--phone-h), 100%);
  aspect-ratio: 390 / 844;

  border-radius: 26px;                 /* look phone */
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

/* iframe ocupa el “phone” entero */
.coop-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* En pantallas más pequeñas, baja a 1 columna (manteniendo el phone centrado) */
@media (max-width: 1100px){
  .coop-grid{
    grid-template-columns: 1fr;
  }
  .coop-framewrap{
    width: min(var(--phone-w), 100%);
    height: min(var(--phone-h), 70vh);
  }
}

.coop-codehead-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.coop-codehead-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.coop-textarea[readonly]{
  opacity:.92;
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

.coop-textarea[readonly]::selection{
  background: rgba(255,255,255,.18);
}

.coop-previewcol{ min-height: 0; }

.phone-frame{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  aspect-ratio: 390 / 844; /* iPhone-ish */
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);

  overflow: hidden;
  display: flex;
}

.phone-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 1200px){
  .coop-grid{ grid-template-columns: 1fr; }
  .phone-frame{ max-width: 460px; }
}