/* ==========================================================================
   CreateHub Skin — King Media (tema Leonardo)
   Espejo del sistema de diseno del club: assets/css/createhub.css

   Se carga DESPUES de king-styles.css y night.css, asi que gana la cascada
   por orden de carga. Solo se usa mayor especificidad donde hay que ganarle
   al <style> que submitai.php inyecta en el body (marcado abajo).
   ========================================================================== */

:root {
  --ch-bg: #FFFFFF;
  --ch-surface: #FAFAFA;
  --ch-text: #1A1A1A;
  --ch-text-soft: #6B7280;
  --ch-text-mute: #9CA3AF;
  --ch-line: #EDEDF0;

  --ch-brand: #FF5A1F;
  --ch-brand-soft: #FFE9DF;

  /* Familia de Create AI / King Media */
  --ch-emerald: #0E7C5A;
  --ch-emerald-bg: #E6F4EE;

  --ch-cream-a: #FFF6E9;
  --ch-cream-b: #FFEFD8;
  --ch-cream-line: #FCE3C2;

  --ch-shadow: 0 2px 12px rgba(0,0,0,.06);
  --ch-shadow-lg: 0 6px 24px rgba(0,0,0,.08);
  --ch-shadow-nav: 0 4px 24px rgba(0,0,0,.10);

  --ch-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ch-radius-sm: 12px;
  --ch-radius-md: 16px;
  --ch-radius-lg: 20px;
  --ch-radius-xl: 24px;
  --ch-radius-pill: 28px;
}

/* ============================================
   Base
   ============================================ */

/* King NO trae el reset `* { box-sizing: border-box }`: se lo pone solo a inputs,
   selects y .box. Sin esto, cualquier width/height/min-height que declare la skin
   se le suman padding y borde encima y la medida miente. Ya mordio dos veces: la
   barra flotante salia 14px mas ancha, y los chips de tamano 10px mas altos.
   Se lo damos a todo lo que la skin dimensiona explicitamente. */
.ch-navbar, .ch-navbar *,
.ch-claim, .ch-optrow, .ch-optlabel, .ch-galhead,
.kingai-ext .ailabel,
.king-nav-sub-link,
.king-search-field,
#ltoggle, .aisubmit, .ai-submit, .ai-select,
.ai-result, .ai-imgs, .ai-imgs img, .ai-result-up, .aipublish,
.ch-lightbox, .ch-lightbox img, .ch-lightbox-close {
  box-sizing: border-box;
}

body,
input, textarea, select, button,
.aiinput, .ai-select {
  font-family: var(--ch-font);
}

body {
  background-color: var(--ch-bg);
  color: var(--ch-text);
}

/* El toggle sol/luna se retira: King queda solo en claro, como el club. */
.king-nightb { display: none; }

/* ============================================
   App bar — espejo de .ch-appbar
   ============================================ */

/* Leonardo la esconde al hacer scroll (top:-66px + .scrolled-up).
   El club la deja siempre pegada arriba. */
.king-headerf {
  position: sticky;
  top: 0;
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-line);
}
.king-headerf.scrolled-up { top: 0; }

.king-header {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* El nav del centro se va al drawer, en todos los anchos
   (Leonardo ya lo ocultaba solo en <=991px). */
.header-middle { display: none; }

/* Hamburguesa: visible siempre, no solo en movil. El club la tiene en todos
   los anchos y es lo que hace que desktop y movil se lean igual. */
#ltoggle {
  display: block;
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 0;
  outline: 0;
  border-radius: var(--ch-radius-md);
  background-color: #F5F5F7;
  cursor: pointer;
  transition: all .3s ease;
}
#ltoggle:before,
#ltoggle:after {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  height: 3px;
  width: 22px;
  border-radius: 4px;
  background-color: var(--ch-text);
}
#ltoggle:before { top: 15px; }
#ltoggle:after  { top: 24px; }
.king-body.active #ltoggle:before { top: 19px; transform: rotate(-45deg); }
.king-body.active #ltoggle:after  { top: 19px; transform: rotate(45deg); }

.header-left  { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-right { flex: 1 1 auto; }

/* Logo de marca, servido por la skin.

   King pinta CUATRO <img> en el mismo enlace (claro, oscuro, movil claro, movil
   oscuro) y los prende con !important segun el ancho y la clase king-lnight. Son
   subidas de Admin: cambiarlas ahi toca la base y se hace a mano en cuatro campos.
   La skin los apaga todos y pinta el lockup como fondo del <a>, asi el asset viaja
   dentro del plugin y el cambio se despliega con los demas archivos. El nombre
   accesible del enlace lo sigue dando su title="Createia".

   Apagarlos pide !important y DOS clases en el selector: Leonardo los prende con
   `.king-logo .king-mlogo{display:block!important}`, que a igualdad de !important
   gana por especificidad (dos clases). `.king-logo img` pierde; por eso va
   `.king-logo .king-logo-link img`.

   34px de alto son los mismos que el lockup del club (.ch-brand-logo en
   assets/css/createhub.css): saltar entre productos no cambia la altura de la
   barra. Con la proporcion del asset (381.15 x 95.33) eso da 136px de ancho; con
   la hamburguesa, "Crear" y "+" la fila mide 340px, que entra en un movil de 360.
   Por eso baja a 26px en el breakpoint de 380px, igual que en el club. Si cambias
   el alto, rehaz esa cuenta y hazlo en los dos lados. */
.king-logo { max-height: none; }
.king-logo .king-logo-link img { display: none !important; }
.king-logo-link {
  display: block;
  width: 136px;
  height: 34px;
  background: url(../img/logo-create-ai.svg) left center / contain no-repeat;
}
.header-right > ul { height: auto; gap: 8px; }
.header-right > ul > li { margin-left: 0; }

/* "Crear": la pildora oscura del mockup */
.aisubmit {
  height: 42px;
  padding: 0 16px;
  border-radius: var(--ch-radius-md);
  background-color: var(--ch-text);
  color: #fff;
  font-family: var(--ch-font);
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
}
.aisubmit:hover { background-color: var(--ch-emerald); color: #fff; }

/* ============================================
   Drawer lateral — fuera del flujo en todos los anchos
   ============================================ */
.king-body,
.king-body.active { padding-left: 0; }
.leftmenu { left: -600px; }
.king-body.active .leftmenu { left: 0; }

/* ============================================
   Contenido — columna centrada de 800px, como .ch-app
   ============================================ */
.king-body-in {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 16px 130px; /* 130px = hueco del navbar flotante */
}

/* King mete 20px arriba de #container; sumados al padding del contenedor daban 36px
   de aire entre la app bar y el contenido. */
#container { margin-top: 0; }

.king-main { margin-left: 0; margin-right: 0; }
.king-main-in { padding-left: 0; padding-right: 0; min-height: 0; }

/* ============================================
   Navbar inferior — clonado de .ch-navbar del club
   ============================================ */
/* King tiene `body{font-size:15px; line-height:27px}` y el club 16px/normal. Como las
   medidas de abajo son las del club en `em`, hay que fijar aqui su mismo contexto: si no,
   la etiqueta hereda el line-height de 27px y la barra sale 12px mas alta (88 vs 76) —
   justo el "brinco" al pasar de un producto al otro. */
.ch-navbar {
  font-size: 16px;
  line-height: normal;
}

.ch-navbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 50;
  width: calc(100% - 24px);
  max-width: 776px;
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-pill);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 10px 6px 8px;
  box-shadow: var(--ch-shadow-nav);
}

.ch-navbar .ch-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px 6px;
  text-decoration: none;
  color: var(--ch-text);
  background: none;
  position: relative;
}
.ch-navbar .ch-nav-item:hover { color: var(--ch-emerald); text-decoration: none; }
.ch-navbar .ch-nav-item svg { width: 26px; height: 26px; display: block; }
.ch-navbar .ch-nav-item span {
  font-size: .78em;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

/* ============================================
   Pagina Crear — el generador
   ============================================ */

/* Los dos selectores de abajo llevan una clase extra a proposito: le ganan al
   <style> que submitai.php inyecta en el body (.king-main.ai-create y .kingai-box). */
.king-body-in .king-main.ai-create {
  max-width: 100%;
  margin: 0 0 24px;
}
.ai-create .kingai-box {
  max-width: 100%;
  margin: 0;
}

/* Caja del prompt */
.kingai-input {
  border: 2px solid var(--ch-emerald);
  box-shadow: none;
  border-radius: var(--ch-radius-lg);
  padding: 10px;
  margin-bottom: 16px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.kingai-input:hover {
  border-color: var(--ch-emerald);
  box-shadow: 0 0 0 4px var(--ch-emerald-bg);
}
.aiinput {
  font-family: var(--ch-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--ch-text);
  line-height: 1.5;
  min-height: 96px;
}
.aiinput::placeholder { color: var(--ch-text-mute); font-weight: 500; }

.kingai-buttons { justify-content: center; gap: 10px; }

/* Abre el panel de tamano, que ahora arranca cerrado: tiene que leerse como control. */
.aiswitch {
  width: 44px;
  height: 44px;
  border-radius: var(--ch-radius-md);
  background: var(--ch-emerald-bg);
  color: var(--ch-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.aiswitch:hover { background: var(--ch-emerald); color: #fff; }

/* "Generar": el CTA naranja del club */
.ai-submit {
  width: auto;
  min-width: 150px;
  height: 44px;
  padding: 0 26px;
  border-radius: var(--ch-radius-pill);
  background-color: var(--ch-brand);
  color: #fff;
  font-family: var(--ch-font);
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--ch-shadow);
}
.ai-submit:hover { background-color: #E8501A; }
.ai-submit span { gap: 8px; align-items: center; }

/* Panel de opciones, compacto: solo tamano / relacion de aspecto.
   (La fila "Modelo de IA" se oculta mas abajo, en .ch-optrow.)

   La barra de pestanas (Tamano | Filtrar | Negative prompt) sobra: con una sola
   pestana util es ruido, y el mockup no la tiene. */
.kingai-ext #ssize { display: none; }

.kingai-ext {
  flex-direction: column;
  gap: 5px;
  background-color: var(--ch-emerald-bg);
  border-radius: var(--ch-radius-lg);
}
.kingai-box.active .kingai-ext { padding: 8px; }

.ai-select {
  padding: 12px 14px;
  border-radius: var(--ch-radius-md);
  border: 1px solid var(--ch-line);
  background-color: #fff;
  font-family: var(--ch-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--ch-text);
  width: 100%;
}

/* Pestanas del panel (Tamano / Filtro / Negative prompt) */
.kingai-ext .nav-tabs {
  padding: 0 0 4px;
  gap: 6px;
  border: 0;
  flex-wrap: wrap;
}
.kingai-ext .nav-tabs > li > a {
  border: 0;
  border-radius: var(--ch-radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ch-emerald);
  background: transparent;
}
.kingai-ext .nav-tabs > li.active > a {
  background: #fff;
  color: var(--ch-text);
  box-shadow: var(--ch-shadow);
}

/* Los paneles de chips pasan a fila con scroll: seis formatos no caben
   en el ancho de un telefono y envolverlos rompe la lectura. */
.kingai-ext .aistyles.active {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin: 4px 0 0;
  padding-bottom: 0;
  scrollbar-width: none;
}
.kingai-ext .aistyles.active::-webkit-scrollbar { display: none; }

/* Chips de relacion de aspecto: nombre arriba, proporcion abajo (los parte el layer) */
.ch-chip-name  { font-size: .74em; font-weight: 600; line-height: 1.2; }
.ch-chip-ratio { font-size: .86em; font-weight: 700; line-height: 1.2; }

.kingai-ext .ailabel {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 44px; /* piso tactil: son botones, no etiquetas */
  justify-content: center;
  flex-direction: column;
  gap: 0;
  padding: 4px 9px;
  border-radius: var(--ch-radius-md);
  background-color: #fff;
  border: 1px solid var(--ch-line);
  color: var(--ch-text);
  font-family: var(--ch-font);
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.kingai-ext input:checked + label {
  background-color: var(--ch-brand);
  border: 1px solid var(--ch-brand);
  color: #fff;
}

/* ============================================
   Hero de la portada — compactado a solo buscador
   ============================================ */

/* Leonardo reserva 350px con dos titulos (vacios en este sitio) y las etiquetas
   "Descubrir". Se colapsa todo y queda una barra de busqueda delgada sobre el mosaico. */
.king-body-search-up { min-height: 0; display: block; }

.king-body-search {
  position: static;
  background-image: none;
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 14px 16px 0;
  text-align: left;
}
.king-body-search h1,
.king-body-search h3,
.search-disc,
.king-featureds { display: none; }

.king-template-home .king-search {
  width: 100%;
  padding: 0;
}
.king-search-in { max-width: 100%; }

.king-search-field {
  border: 1px solid var(--ch-line);
  background: var(--ch-surface);
  box-shadow: none;
  backdrop-filter: none;
  border-radius: var(--ch-radius-pill);
  font-family: var(--ch-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  padding: 11px 46px 11px 18px;
}
.king-search-field:focus {
  border-color: var(--ch-emerald);
  background: #fff;
}
.king-search-button {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  font-size: 16px;
  color: var(--ch-text-soft);
}

/* ============================================
   Piezas inyectadas por el layer en la pagina Crear
   ============================================ */
.ch-claim {
  text-align: center;
  padding: 2px 4px 14px;
}
.ch-claim h1 {
  margin: 0 0 3px;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ch-emerald);
}
.ch-claim p {
  margin: 0;
  font-size: .95em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ch-emerald);
}

/* Fila "Modelo de IA" + select.
   OCULTA por decision de producto: la pagina Crear va sin selector de modelo.
   Se oculta, NO se elimina del DOM: king-ask.js hace
     document.getElementById("ai-select").options[selectElement.selectedIndex]
   sin guarda de null, asi que sacar el <select> romperia el boton Generar.
   Oculto sigue ahi con su primera opcion seleccionada.
   Para devolverlo: cambiar display a flex. */
.ch-optrow {
  display: none;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--ch-radius-md);
  padding: 8px 10px 8px 14px;
}
.ch-optrow .ai-select {
  flex: 1;
  width: auto;
  min-width: 0;
  background: var(--ch-emerald-bg);
  border-color: transparent;
}

.ch-optlabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95em;
  font-weight: 700;
  color: var(--ch-text);
  white-space: nowrap;
}
.ch-optlabel i {
  width: 1.35em;
  text-align: center;
  font-size: 1em;
  color: var(--ch-emerald);
}
.ch-optlabel-block {
  background: #fff;
  border-radius: var(--ch-radius-sm);
  padding: 5px 10px;
  font-size: .82em;
  align-self: flex-start;
}
.ch-optlabel-block i { color: var(--ch-brand); }

/* Encabezado de la galeria */
.ch-galhead {
  text-align: center;
  padding: 12px 8px 10px;
}
.ch-galhead h2 {
  margin: 0 0 3px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ch-emerald);
}
.ch-galhead p {
  margin: 0;
  font-size: .9em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ch-emerald);
}

/* ============================================
   Resultado de la generacion
   ============================================ */

/* Leonardo arma esta tarjeta para escritorio: la imagen a `max-width:30%` y la
   columna de Publish en `position:absolute;right:20px` sobre un hueco que
   reserva `padding-right:160px`. En un telefono de 390px eso deja una
   miniatura de ~100px, y la columna absoluta se sale del recuadro y se encima
   con las pestanas de orden. Aqui la tarjeta pasa a columna: imagen completa
   arriba, controles debajo, y el hueco de 160px desaparece. */
.ai-result {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  padding-right: 12px; /* anula el hueco que reservaba la columna absoluta */
  border-radius: var(--ch-radius-lg);
  box-shadow: var(--ch-shadow);
}

/* `width:auto` para que la caja se ajuste a la imagen: los botones de borrar y
   descargar son `position:absolute` contra este contenedor, y si quedara mas
   ancho que la imagen se despegarian de su esquina. */
.ai-imgs {
  width: auto;
  max-width: 100%;
  align-self: center;
}

/* Solo topes, sin medidas fijas: la imagen conserva su proporcion sea cuadrada
   o panoramica. El tope de alto evita que una vertical empuje los controles
   fuera de la pantalla. */
.ai-imgs img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--ch-radius-md);
  cursor: zoom-in;
}

/* Fila normal debajo de la imagen, en vez de columna flotante a la derecha. */
.ai-result-up {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.ai-result-up span {
  font-family: var(--ch-font);
  font-size: .82em;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--ch-radius-pill);
  background-color: var(--ch-cream-a);
  border-color: var(--ch-cream-line);
  color: var(--ch-text);
}

.aipublish {
  font-family: var(--ch-font);
  font-size: .9em;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--ch-radius-pill);
}

/* Leonardo lo deja en `#e7e7e9` con texto blanco: ilegible. Mientras sube la
   imagen el boton esta deshabilitado, que es como mas se ve. */
.aipublish:disabled,
.aipublish[disabled] {
  background-color: var(--ch-cream-a);
  color: var(--ch-text-mute);
}

/* ============================================
   Ver en grande — capa de imagen completa
   ============================================ */

/* La abre createhub-skin.js al tocar la imagen del resultado. Vive como hijo
   directo de <body>, asi que basta con superar el z-index del navbar (50). */
.ch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(12, 11, 13, .93);
}
.ch-lightbox.is-open { display: flex; }

.ch-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--ch-radius-md);
}

.ch-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px; /* piso tactil, igual que los chips de tamano */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-lightbox-close:hover { background-color: rgba(255, 255, 255, .28); }

/* Con la capa abierta el fondo no debe poder desplazarse. */
body.ch-lightbox-on { overflow: hidden; }

/* ============================================
   Barra de orden — Recientes / Popular / Mas votados
   ============================================ */
.leo-nav {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 4px;
}
/* Una sola fila: envolvian a dos renglones y partian la pagina en dos.
   Scroll horizontal como los chips de tamano, asi aguanta las 5 pestanas
   (o las que se configuren) sin romper el layout. */
.king-nav-sub-list {
  margin: 0 0 12px;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.king-nav-sub-list::-webkit-scrollbar { display: none; }
.leo-nav { flex-wrap: nowrap; min-width: 0; }

.king-nav-sub-link {
  flex: 0 0 auto;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border-radius: var(--ch-radius-pill);
  background-color: var(--ch-cream-a);
  color: var(--ch-text);
  font-family: var(--ch-font);
  font-size: 14px;
  font-weight: 700;
}
.king-nav-sub-link:hover {
  background-color: var(--ch-emerald-bg);
  color: var(--ch-emerald);
}
.king-nav-sub-selected,
.king-nav-sub-link.king-nav-sub-selected {
  background-color: var(--ch-emerald);
  color: #fff;
}

/* ============================================
   Galeria
   ============================================ */
.king-part-q-list { margin-top: 4px; }

/* Leonardo colapsa el mosaico a UNA columna en <=500px:
     @media (max-width:500px){ .box,.grid-sizer{ width:100%!important } }
   El mockup pide un grid de miniaturas, asi que se recupera. Lleva !important
   porque hay que ganarle al !important de origen, no por especificidad.
   Masonry usa el ancho del primer .box como ancho de columna (no hay .grid-sizer
   en el DOM) y .box ya es border-box con su gutter en padding .5%. */
@media (max-width: 500px) {
  .box, .grid-sizer { width: 33.333% !important; }
}

@media (max-width: 500px) {
  .king-header { padding: 10px 12px; gap: 8px; }
  #ltoggle { width: 38px; height: 38px; }
  #ltoggle:before { top: 13px; }
  #ltoggle:after  { top: 22px; }
  .aisubmit { height: 38px; padding: 0 13px; font-size: 13px; }
}

/* Mismo breakpoint que el club para la etiqueta chica del navbar */
@media (max-width: 380px) {
  .ch-navbar .ch-nav-item span { font-size: .7em; }
  .king-logo-link { width: 104px; height: 26px; }
}