/* Mika — editor rediseñado (R4, 2026-11-03, brief 2026-11-03-rediseno-interfaz): cabecera propia, riel de íconos, chat con
   ideas, barra de la vista previa, historial y barra de pestañas del móvil. Tramo 5h: va tras la marca y el armazón (les
   gana por orden) y antes de «A mi manera» (6-accesibilidad.css). Todo sale de los tokens de 1-base.css. */

/* La cabecera general no va en el editor: tiene la suya */
body:has(#vista-editor:not([hidden])) > .barra, body:has(#vista-editor:not([hidden])) > .pie-app { display: none; }
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico svg { display: block; }

/* Cabecera del editor */
.editor__cabeza { flex: none; display: flex; align-items: center; gap: .75rem; padding: .5rem 1.25rem; min-height: 68px;
  background: var(--blanco); border-bottom: 1px solid var(--linea); }
.editor__marca img { height: 26px; width: auto; }
.editor__titulo { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.editor__titulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.editor__guardado { font-size: .8rem; color: var(--verde); font-weight: 600; }
.editor__guardado--trabajando { color: var(--tinta-suave); }
.editor__acciones { display: flex; align-items: center; gap: .5rem; flex: none; }
.icono-boton { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--linea); border-radius: 50%; background: var(--blanco); color: var(--tinta); text-decoration: none; padding: 0; }
.icono-boton:hover:not(:disabled) { background: var(--suave); border-color: var(--coral); color: var(--coral-oscuro); }
.chip-creditos { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.chip-creditos:hover { border-color: var(--coral); }
.editor__tema .tema__luna, html.acc-oscuro .editor__tema .tema__sol { display: none; }
html.acc-oscuro .editor__tema .tema__luna { display: inline-flex; }
.editor__comparar, .editor__revisar { font-size: .9rem; white-space: nowrap; }
.editor .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Riel de herramientas + chat + vista previa */
.editor__cuerpo { flex: 1; display: grid; grid-template-columns: 78px minmax(280px, 330px) minmax(0, 1fr); min-height: 0; }
.riel { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .45rem; overflow-y: auto; background: var(--blanco);
  border-right: 1px solid var(--linea); }
.riel button { display: grid; justify-items: center; align-content: center; gap: .2rem; min-height: 64px; border: 1px solid transparent;
  border-radius: 12px; background: none; color: var(--tinta-suave); font-size: .72rem; font-weight: 600; }
.riel button:hover { background: var(--fondo); color: var(--tinta); }
.riel button[aria-selected="true"] { background: var(--suave); border-color: var(--linea); color: var(--coral-oscuro); }
.chat { background: var(--blanco); border-right: 1px solid var(--linea); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.chat__cabeza { padding: 1.5rem 1.4rem 1.1rem; border-bottom: 1px solid var(--linea); }
.chat__cabeza h2 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .45rem; }
.chat__cabeza p { font-size: .82rem; line-height: 1.7; color: var(--tinta-suave); margin: 0; max-width: 17rem; }
/* Flujo del chat: tarjeta de Mika, conversación y sugerencias en un solo scroll, como la maqueta (editor-vista.js lo baja al final) */
.chat__flujo { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem; display: grid; grid-auto-rows: max-content; align-content: start; gap: 1.05rem; }
.chat__flujo .chat__mensajes { flex: none; overflow: visible; padding: 0; min-height: auto; display: grid; gap: 1.05rem; }
.chat__flujo .chat__mensajes:empty { display: none; }
.chat__intro, .chat__flujo .msj { max-width: none; padding: .9rem; border: 1px solid color-mix(in srgb, var(--coral) 8%, var(--linea)); border-radius: 0 12px 12px 12px;
  background: var(--suave); color: var(--tinta); box-shadow: none; font-size: .85rem; line-height: 1.7; white-space: normal; }
.chat__flujo .msj { white-space: pre-wrap; }
.chat__intro p { margin: .5rem 0 0; }
.chat__flujo .msj--usuario { margin-left: 1.25rem; border-color: var(--linea); border-radius: 12px 0 12px 12px; background: var(--fondo); color: var(--tinta); }
html.acc-oscuro .chat__flujo .msj--usuario { color: var(--tinta); }
.chat__flujo .msj--sistema { border: 0; background: none; text-align: center; color: var(--tinta-suave); padding: .2rem; }
.chat__flujo .msj--error { background: var(--aviso-fondo); color: var(--aviso); }
.chat__autor, .chat__flujo .msj__autor { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; color: var(--coral-oscuro);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chat__flujo .msj__autor::before { background: currentColor; -webkit-mask: var(--chispa) center / contain no-repeat; mask: var(--chispa) center / contain no-repeat; }
.chat { --chispa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E"); }
.chat__entrada { display: grid; gap: .5rem; padding: 1rem; background: var(--blanco); }
.chat__etiqueta { font-size: .82rem; font-weight: 700; }
.chat__entrada textarea { min-height: 92px; padding: .75rem; border-radius: 11px; background: var(--fondo); font-size: .88rem; line-height: 1.6; }
.chat__pie { display: flex; align-items: center; gap: .5rem; }
.chat__pie .chat__costo { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; font-size: .75rem; line-height: 1.4; }
.chat__pie .boton { min-width: 44px; padding: 0; }

/* Ideas para empezar: sugerencias en tarjetas y atajos en un aviso suave */
.ideas { display: grid; gap: 1.05rem; }
.ideas[hidden] { display: none; }
.sugerencias { list-style: none; display: grid; gap: .45rem; margin: 0; padding: 0; }
.sugerencias button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px;
  padding: .55rem .8rem; border: 1px solid var(--linea); border-radius: 7px; background: var(--blanco); color: var(--tinta-suave);
  font-size: .82rem; font-weight: 500; text-align: left; box-shadow: none; }
.sugerencias button:hover { border-color: var(--coral); background: var(--blanco); color: var(--coral-oscuro); }
.ideas .atajos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .95rem 1rem; border-radius: 10px; background: var(--suave); }
.ideas .atajos[hidden] { display: none; }
.ideas .atajos__titulo { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin: 0 0 .2rem; font-size: .84rem; color: var(--tinta-suave); }
.atajos .atajos__titulo .ico, .atajos button .ico { color: var(--coral); }
.atajos button { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--blanco); color: var(--tinta); font-size: .82rem; font-weight: 600; text-align: left; box-shadow: none; }
.atajos button:hover { border-color: var(--coral); background: var(--blanco); color: var(--coral-oscuro); }
.atajos .ico svg, .sugerencias .ico svg { width: 18px; height: 18px; }
.sugerencias .ico { color: var(--tinta-suave); }

/* Vista previa */
.previa { padding: .75rem 1.25rem 1rem; min-width: 0; }
.previa__barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; }
.previa__titulo { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--tinta-suave); margin: 0; }
.previa__herramientas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.previa__herramientas .boton { min-height: 44px; padding: .4rem .9rem; font-size: .85rem; }
.previa__herramientas .boton--clic[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--blanco); }
html.acc-oscuro .previa__herramientas .boton--clic[aria-pressed="true"],
html.acc-oscuro .previa__herramientas .boton--clic[aria-pressed="true"]:hover:not(:disabled) { color: #13111f; }   /* con el puntero encima también */
.previa .dispositivo { background: var(--blanco); border: 1px solid var(--linea); padding: 3px; }
.previa .dispositivo button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 999px; background: none; color: var(--tinta-suave); box-shadow: none; padding: 0; }
.previa .dispositivo button[aria-pressed="true"] { background: var(--suave); color: var(--coral-oscuro); box-shadow: none; }
.previa__marco iframe { border: 1px solid var(--linea); border-radius: 13px; box-shadow: 0 20px 50px #30204b0c; }

/* Historial de versiones y paneles de fotos */
.versiones ol { list-style: none; display: grid; gap: .5rem; margin-bottom: 1rem; }
.versiones .version { display: grid; gap: .1rem; width: 100%; padding: .65rem .9rem; border: 1px solid var(--linea); border-radius: 12px;
  background: var(--blanco); color: var(--tinta); text-align: left; box-shadow: none; min-height: 44px; }
.versiones .version small { color: var(--tinta-suave); font-size: .8rem; }
.versiones .version:hover:not(:disabled) { border-color: var(--coral); }
.versiones .version[aria-current="true"] { background: var(--suave); border-color: var(--coral); color: var(--tinta); box-shadow: none; }
.estilos--panel { grid-template-columns: 1fr; margin-bottom: 1rem; }
.estilos--panel[hidden] { display: none; }
.estilos--panel .nota { margin: 0 0 .25rem; }

/* Fondo blanco fijo del logo (para logos oscuros): su «Sin logo» también lleva un gris fijo (en oscuro heredaba un gris claro: 2,2:1) */
.logo-propio__actual .nota { margin: 0; color: #575370; }
.previa__aviso button { min-height: 44px; padding: 0 .4rem; }

/* «Más» del móvil: hoja que sube desde abajo */
.hoja-mas { margin: auto 0 0; width: 100%; max-width: none; border: 0; border-radius: 18px 18px 0 0; padding: 1rem 1rem 1.25rem;
  background: var(--blanco); color: var(--tinta); }
.hoja-mas::backdrop { background: rgba(20, 18, 40, .45); }
.hoja-mas h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.hoja-mas ul { list-style: none; margin-bottom: .75rem; }
.hoja-mas li button, .hoja-mas li a { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 52px; padding: 0 .5rem;
  border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--tinta); font-weight: 600; text-decoration: none; text-align: left; }
.hoja-mas li a[aria-disabled="true"] { opacity: .55; }
.hoja-mas .boton { width: 100%; }
.editor__movil { display: none; }

@media (max-width: 860px) {
  .editor__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .riel, .editor__tema, .editor__comparar, .chip-creditos, .editor__marca, .previa .dispositivo, #abrir-pestana { display: none; }   /* el tema va en «Más»; la accesibilidad queda a la vista, como la maqueta */
  .editor__cabeza { padding: .4rem .75rem; gap: .4rem; min-height: 60px; }
  .editor__acciones { gap: .3rem; }
  .editor__guardado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* sigue en el lector de pantalla */
  .editor__revisar { white-space: normal; max-width: 7rem; padding: .35rem .8rem; line-height: 1.2; font-size: .85rem; }
  .editor__revisar .ico { display: none; }
  .chat { border-right: 0; }
  .editor[data-movil="ver"] .chat, .editor:not([data-movil="ver"]) .previa { display: none; }
  .previa { padding: .5rem .75rem; }
  .previa__marco.movil iframe { width: 100%; }
  .chat__flujo { padding: 1rem; }
  /* táctiles de al menos 44 px en los paneles (los campos y botones que traen los tramos 3 y 4 son más bajos) */
  .panel summary { min-height: 44px; padding-block: .6rem; }
  .panel input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"]), .panel select, .panel .fila__mover,
  .panel .fila__quitar, .panel input[type="color"] { min-height: 44px; }
  .panel .campo--check input, .panel .campo input[type="checkbox"], .idioma-opcion input { min-width: 44px; min-height: 44px; }
  .editor__movil { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: none; background: var(--blanco);
    border-top: 1px solid var(--linea); }
  .editor__movil button { display: grid; justify-items: center; align-content: center; gap: .15rem; min-height: 56px; padding: .3rem 0;
    border: 0; background: none; color: var(--tinta-suave); font-size: .7rem; font-weight: 600; }
  .editor__movil button[aria-current="page"] { color: var(--coral-oscuro); }
}

/* Invitación a la tienda mientras se crea la página (unidad B2, 2026-11-10): «llamativa» por color, borde y tamaño, nunca por parpadeo.
   Solo tokens (el oscuro y el alto contraste los cambian); la entrada se mueve una vez y nada con «reducir movimiento». */
.tienda-invita { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.25rem; margin: 0 0 .75rem;
  padding: 1.1rem 1.25rem; border: 2px solid var(--coral); border-radius: var(--radio-grande); color: var(--tinta);
  background: linear-gradient(135deg, var(--suave), var(--blanco) 70%); box-shadow: 0 10px 30px rgba(99, 70, 255, .16);
  animation: tienda-invita-entra .45s var(--product-ease) both; }
.tienda-invita[hidden] { display: none; }
.tienda-invita { position: relative; }
.tienda-invita[data-modo="vender"] { padding-right: 3.5rem; }   /* deja lugar a la × sin pisar el botón */
.tienda-invita__cerrar { position: absolute; top: .35rem; right: .35rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--tinta-suave); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.tienda-invita__cerrar:hover { background: var(--suave); color: var(--tinta); }
.tienda-invita__cerrar:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }
.tienda-invita__cerrar[hidden] { display: none; }
/* «Tienda» de la cabecera (2026-11-10): compacto, con el acento de Mika en el borde y el texto, como los chips de la cabecera */
.editor__tienda { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .85rem; border: 2px solid var(--coral);
  border-radius: 10px; background: var(--blanco); color: var(--coral-oscuro); font: inherit; font-weight: 700; font-size: .9rem;
  text-decoration: none; white-space: nowrap; cursor: pointer; }
.editor__tienda:hover { background: var(--suave); }
.editor__tienda:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.editor__tienda[hidden] { display: none; }
.editor__tienda-ico { display: inline-flex; }
.tienda-invita__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--coral); color: var(--blanco); }
.tienda-invita__ojo { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); }
.tienda-invita__titulo { margin: .15rem 0 .5rem; font-size: 1.2rem; line-height: 1.3; color: var(--tinta); }
.tienda-invita__pasos { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tienda-invita__pasos li { counter-increment: paso; display: flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--tinta); }
.tienda-invita__pasos li::before { content: counter(paso); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--coral); color: var(--coral); font-size: .85rem; font-weight: 800; }
.tienda-invita__pasos li.hecho::before { content: "✓"; background: var(--coral); color: var(--blanco); }
.tienda-invita__nota { margin: .5rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.tienda-invita__ir { background: var(--coral); color: var(--blanco); min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
/* fondo liso: el degradado de .boton empieza en #8a72ff, que con blanco no llega a 4,5:1 (axe) */
.tienda-invita__ir:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.previa__aviso a { color: var(--coral); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem; }
@keyframes tienda-invita-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tienda-invita { animation: none; } }
@media (max-width: 860px) {
  .tienda-invita { grid-template-columns: auto 1fr; }
  .tienda-invita__ir { grid-column: 1 / -1; justify-content: center; }
  .editor__tienda { padding: 0 .55rem; }
}

/* «Publicar» en <nombre>.mika-tech.com.co (unidad A4, 2026-11-10): ventana como «Comparar», solo tokens (oscuro y alto
   contraste los cambian). En el móvil el botón de la cabecera se va a «Más» (no cabe al lado de «Revisar y publicar»). */
.editor__publicar { font-size: .9rem; white-space: nowrap; }
.publicar-dialogo { margin: auto; width: min(94vw, 560px); max-height: 94vh; overflow-y: auto; border: 0; border-radius: 18px;
  padding: 1.1rem 1.4rem 1.4rem; background: var(--blanco); color: var(--tinta); box-shadow: 0 20px 60px rgba(32, 32, 57, .25); }
.publicar-dialogo::backdrop { background: rgba(20, 18, 40, .45); }
.publicar-dialogo[open] { display: grid; gap: .75rem; }
.publicar-dialogo .nota { margin: 0; }
.publicar-dialogo__aviso { margin: 0; padding: .75rem 1rem; border-radius: 12px; background: var(--aviso-fondo); color: var(--tinta); border: 1px solid var(--aviso); }
.publicar-dialogo__aviso[hidden] { display: none; }
.publicar-dialogo__aviso a { color: var(--coral-oscuro); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.publicar-dialogo__form { display: grid; gap: .4rem; }
.publicar-dialogo__form label { font-weight: 700; }
.publicar-dialogo__direccion { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-weight: 600; color: var(--tinta-suave); }
.publicar-dialogo__direccion input { flex: 1 1 10rem; min-width: 0; min-height: 44px; padding: 0 .75rem; font: inherit; color: var(--tinta);
  background: var(--blanco); border: 2px solid var(--linea); border-radius: 10px; }
.publicar-dialogo__direccion input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.publicar-dialogo__direccion input[aria-invalid="true"] { border-color: var(--aviso); }
.publicar-dialogo__direccion input[readonly] { background: var(--suave); }
.publicar-dialogo__libre { margin: 0; min-height: 1.4em; font-weight: 600; overflow-wrap: anywhere; }
.publicar-dialogo__libre--ok { color: var(--verde); }
.publicar-dialogo__libre--no { color: var(--aviso); }
.publicar-dialogo__form .boton { justify-self: start; min-height: 48px; }
.publicar-dialogo__form .boton:disabled { opacity: .55; cursor: not-allowed; }
.publicar-dialogo__estado { font-weight: 600; overflow-wrap: anywhere; }
.publicar-dialogo__estado:empty { display: none; }
.publicar-dialogo__estado--ok { color: var(--verde); }
.publicar-dialogo__estado--ok a { color: var(--coral-oscuro); display: inline-flex; align-items: center; min-height: 44px; }
.publicar-dialogo__estado--error { color: var(--aviso); }
@media (max-width: 860px) {
  .editor__publicar { display: none; }
  .publicar-dialogo { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; padding: .9rem; }
  .publicar-dialogo__form .boton { justify-self: stretch; }
}