/* =========================================
   InmoCopy – SaaS PRO UI
   Paleta: BLANCO / NEGRO / NARANJA
   Objetivo: orden, simetría, legibilidad
   ========================================= */

/* ---------- PALETA BÁSICA ---------- */
:root{
  --ic-bg: #f4f4f5;          /* gris muy claro para fondo exterior */
  --ic-surface: #ffffff;     /* blanco para tarjetas */
  --ic-surface-soft: #f9fafb;
  --ic-border: #e5e7eb;
  --ic-border-strong: #f97316; /* borde naranja */
  --ic-text: #020617;        /* casi negro */
  --ic-text-soft: #4b5563;
  --ic-muted: #9ca3af;
  --ic-primary: #fb923c;     /* naranja principal */
  --ic-primary-strong: #ea580c;
  --ic-primary-soft: rgba(251,146,60,0.16);
  --ic-danger: #ef4444;
  --ic-radius-xl: 24px;
  --ic-radius-lg: 18px;
  --ic-radius-md: 12px;
  --ic-radius-pill: 999px;
  --ic-shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.14);
  --ic-shadow-subtle: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* ---------- CONTENEDOR PRINCIPAL ---------- */

.inmocopy-wrap{
  max-width: 1120px;
  margin: 32px auto;
  padding: 26px;
  background: radial-gradient(circle at top left, rgba(251,146,60,0.18), transparent 55%), var(--ic-bg);
  border-radius: var(--ic-radius-xl);
  border: 1px solid rgba(148,163,184,0.6);
  box-shadow: var(--ic-shadow-soft);
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--ic-text);
}

/* ---------- TOPBAR (LOGO + PLAN + ACCIONES) ---------- */

.inmocopy-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -6px -6px 22px -6px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #020617; /* negro */
  border-radius: 18px;
  border: 1px solid #020617;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  color: #f9fafb;
}

.inmocopy-topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.inmocopy-topbar .logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ic-primary), var(--ic-primary-strong));
  color:#111827;
  font-size:18px;
  box-shadow: 0 0 0 2px #020617;
}

.inmocopy-topbar .title{
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f9fafb;
}

.plan-badge{
  margin-left: 4px;
}


.plan-badge span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--ic-primary-strong);
}


.inmocopy-topbar .auth{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
}

/* ---------- BOTONES ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 9px 15px;
  border-radius: var(--ic-radius-pill);
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  cursor:pointer;
  outline:none;
  text-decoration:none;
  transition: all 0.18s ease-out;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.btn:hover{
  border-color: #d4d4d8;
  background: #f9fafb;
  transform: translateY(-0.5px);
}

.btn:disabled,
.btn[disabled]{
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.btn.small{
  padding: 7px 12px;
  font-size: 12px;
}

.btn.big{
  padding: 11px 20px;
  font-size: 14px;
}

.btn.tiny{
  padding: 5px 10px;
  font-size: 11px;
  border-radius: var(--ic-radius-pill);
}

.btn.primary{
  background: linear-gradient(135deg, var(--ic-primary), var(--ic-primary-strong));
  color:#111827;
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(248, 113, 38, 0.6);
}

.btn.primary:hover{
  background: linear-gradient(135deg, var(--ic-primary-strong), #c2410c);
  transform: translateY(-1px);
}

.btn.ghost{
  background: transparent;
  color:#e5e7eb;
  border-color: rgba(63,63,70,0.9);
}

.inmocopy-topbar .btn.ghost{
  color: #e5e7eb;
}

/* ---------- SECCIONES / CARDS ---------- */


.inmocopy-body{
  background:#ffffff;
  padding:32px;
  border-radius:24px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  margin-top:24px;
}


.notice{
  margin-bottom: 18px;
  padding: 10px 16px;
  border-radius: var(--ic-radius-pill);
  background: #fffbeb;
  border: 1px dashed var(--ic-primary-strong);
  font-size: 12px;
  color: #92400e;
}

.notice strong{
  color:#7c2d12;
}


.block{
  margin-top:32px;
  padding:22px 24px;
  background:#ffffff;
  border-radius:20px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}


.block-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.block-title{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:#020617;
}

.block-subtitle{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ic-text-soft);
}

/* Bloques especiales, solo en blanco + negro + naranja */
.block-premium{
  border-color: var(--ic-primary-strong);
  background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.block-business-extra{
  border-color: #020617;
  background: linear-gradient(135deg, #f9fafb, #ffffff);
}

/* Contenido bloqueado */
.locked{
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}



.lock-hint{
  position: absolute;
  top: 12px;
  right: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #ffffff;
  color: #111827;
  border: 1px solid var(--ic-primary-strong);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  opacity: 0.95;
}



/* ---------- FORMULARIO: ORDEN Y SIMETRÍA ---------- */

.inmocopy-form{
  margin-top: 6px;
}

/* Todas las filas con el mismo margen */
.row{
  margin-bottom: 22px;
}

/* Agrupaciones horizontales */
.row-inline{
  display:flex;
  align-items:flex-end;
  gap:16px;
}

/* Etiquetas */
label{
  display:block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ic-text-soft);
}

.req{
  color: var(--ic-danger);
  margin-left: 4px;
}

/* TODOS los campos TIENEN la misma anchura: 100% en su columna */
.field,
input[type="text"].field,
input[type="number"].field,
input[type="url"].field,
select.field,
textarea.field{
  width: 100% !important;
  border-radius: 12px;
  border: 1px solid var(--ic-border);
  padding: 10px 12px;
  font-size: 13px;
  background: var(--ic-surface);
  box-sizing: border-box;
  color: var(--ic-text);
  outline: none;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out, transform 0.1s ease-out;
}

.field::placeholder{
  color: #d4d4d8;
}

.field:focus{
  border-color: var(--ic-primary-strong);
  box-shadow: 0 0 0 1px var(--ic-primary-soft);
  background: #ffffff;
  transform: translateY(-0.5px);
}

/* Uniformidad visual en altura */
input.field,
select.field{
  height: 38px;
}

textarea.field{
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

/* Textos de ayuda */
.help{
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--ic-text-soft);
}

.help.reqnote{
  margin-top: 4px;
  font-size: 11px;
  color: var(--ic-muted);
}

/* ---------- GRIDS: TODO ALINEADO ---------- */

.grid{
  display:grid;
  gap: 22px 22px;
}

/* Dos y tres columnas siempre simétricas */
.grid.grid-2{
  grid-template-columns: repeat(2, minmax(0, 0.85fr));
}

.grid.grid-3{
  grid-template-columns: repeat(3, minmax(0, 0.85fr));
}

/* Cada .row dentro de un grid ya no tiene margen extra, para que todas las cajas coincidan en altura y alineación vertical */
.grid .row{
  margin-bottom: 0;
}

/* ---------- RESULTADOS IA ---------- */

.inmocopy-result{
  margin-top: 24px;
  display:grid;
  gap:16px;
}

.inmocopy-result .card{
  border-radius: var(--ic-radius-lg);
  border: 1px solid var(--ic-border);
  background: var(--ic-surface-soft);
  padding: 14px 14px 12px;
  box-shadow: var(--ic-shadow-subtle);
}

.inmocopy-result .card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.inmocopy-result .card-head h3{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color:#020617;
}

.inmocopy-result textarea.field{
  min-height: 90px;
}

/* SEO bien diferenciado pero en la misma paleta */
.inmocopy-result .seo{
  background: #fff7ed;
  border-color: var(--ic-primary-strong);
}

/* Caja de traducción */
.translate-box{
  margin-top: 32px;
  padding: 14px 14px 12px;
  border-radius: var(--ic-radius-lg);
  border: 1px dashed var(--ic-primary-strong);
  background: #fffbeb;
  position:relative;
}

.translate-box h4{
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color:#111827;
}

/* ---------- FOOTER FORMULARIO ---------- */

.inmocopy-footer{
  margin-top: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.inmocopy-footer .left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.inmocopy-footer .right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ---------- DETALLES EXTRA ---------- */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 9px;
  border-radius: var(--ic-radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #e5e7eb;
  color: #111827;
}

.badge.free{ background: #e5e7eb; color:#111827; }
.badge.premium{ background: var(--ic-primary); color:#111827; }
.badge.business{ background:#020617; color:#f9fafb; }

.text-muted{
  color: var(--ic-text-soft);
}

.text-xs{
  font-size: 11px;
}

/* ---------- RESPONSIVE ---------- */

/* Tablet */
@media (max-width: 900px){
  .grid.grid-3{
    grid-template-columns: repeat(2, minmax(0, 0.85fr));
  }

  .inmocopy-wrap{
    margin: 22px auto;
    padding: 20px;
  }
}

/* Móvil general */
@media (max-width: 680px){
  .inmocopy-wrap{
    margin: 16px auto;
    padding: 14px 10px 20px;
    border-radius: 20px;
  }

  .inmocopy-topbar{
    flex-wrap: wrap;
    align-items:flex-start;
    gap: 8px;
    margin: -4px -4px 18px;
    padding: 8px 10px;
  }

  .inmocopy-topbar .brand{
    width: 100%;
    justify-content: flex-start;
  }

  .inmocopy-topbar .auth{
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }

  
.plan-badge span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--ic-primary-strong);
}


  .grid.grid-2,
  .grid.grid-3{
    grid-template-columns: minmax(0, 1fr);
  }

  .row-inline{
    flex-direction: column;
    align-items: stretch;
  }

  .btn{
    font-size: 12px;
    padding: 8px 12px;
  }

  .btn.big{
    width: 100%;
    justify-content: center;
  }

  .inmocopy-footer{
    flex-direction: column;
    align-items: stretch;
  }

  .inmocopy-footer .right{
    width: 100%;
    justify-content: flex-end;
  }
}

/* Móvil pequeño */
@media (max-width: 480px){
  .inmocopy-topbar{
    padding: 8px;
  }

  .inmocopy-topbar .title{
    font-size: 15px;
  }

  .btn.small{
    padding: 6px 10px;
  }

  .inmocopy-result .card{
    padding: 12px 10px;
  }

  textarea.field{
    font-size: 12px;
  }
}


/* Hide stray Premium badge in top header */
.inmocopy-topbar .lock-hint,
.inmocopy-header .lock-hint {
    display: none !important;
}