/* ═══ LA CAJA VACÍA (26/10/2026) ═════════════════════════════════════════════
   Queja 9 del dueño, palabra por palabra: «dentro de la caja no pongas ejemplos,
   respecto de la caja, en deja la caja vacia. sobre el borde superior izquierdo.
   en una letra de texto normal, tipo arial, "escribe tu idea" sobre la columna
   derecha de manera vertical, pones botones normales ni gramnde ni diminutos,
   pero si armonicos, de imagagen, video y todo eso... sobre la coloumna
   izquierda, vas a poner botones deimituos de "video clip. pelicula, comercial,
   reels" … y en el piso horizontalmente, pones la resolucion, el tiempo, la
   cantidad de generaciones agregar referencia, y todo eso, pero en botoncitos
   nada mas no texto el texto se despliega de ese boton la caja va vacia».

   La misma caja en la portada y en /crear/ (app/entrada.js y
   app/entrada-herramientas.js). Esta hoja va la última en las dos páginas, después
   de la piel (Void, Nervo, Rabbit): por eso el nombre no lleva «grieta» (el
   servidor pone la piel detrás de la última hoja que se llama así). El diseño,
   con las medidas y cómo se despliega cada cosa, está en
   _trabajo/orden/caja-vacia/DISENO-CAJA.md.

   Dos tipos de reglas:
     · la forma (dónde va cada cosa, los tamaños de toque, los globitos), para
       todas las interfaces, con los colores de cada una (las pieles redefinen
       --gr-hueso, --gr-ceniza y compañía);
     · el aspecto de La grieta (letra, fondo, sin subrayados ni fondos en las
       herramientas), solo en La grieta: Void, Nervo y Rabbit conservan el suyo.
   El selector lleva el id de la sección de la portada o la clase de /crear/
   (:is() cuenta como un id en los dos casos): así gana a portada-grieta.css y a
   las reglas de /crear/ de grieta.css sin pelear regla por regla. */

/* ── 0 · Los colores de la caja ──────────────────────────────────────────── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia {
  --cv-tinta: var(--gr-hueso, var(--e-tinta));
  --cv-tenue: var(--gr-ceniza, var(--e-tenue));
  --cv-linea: color-mix(in srgb, var(--cv-tinta) 14%, transparent);
  --cv-globo-fondo: var(--gr-hueso, var(--e-tinta));
  --cv-globo-tinta: var(--gr-noche, #111);
  --cv-sale: cubic-bezier(.23, 1, .32, 1);
  position: relative;
}

/* ── 1 · La grilla: atajos · lugar de escribir · herramientas, y el piso ── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia {
  display: grid;
  grid-template-columns: var(--cv-col-atajos, 92px) minmax(0, 1fr) var(--cv-col-tipos, 150px);
  grid-template-rows: minmax(var(--cv-alto-texto, 168px), 1fr) auto auto auto;
  grid-template-areas:
    "atajos texto    tipos"
    "atajos adjuntos tipos"
    "atajos subida   tipos"
    "piso   piso     piso";
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
}
/* Compu: la caja cruza la grieta (con tres columnas no entra en los 408 a 476 px
   del negro; el lugar de escribir quedaba en 200 px). 640 px en 1280, 691 en 1440
   y 720 en 1920: así el piso entra en un renglón (seis ajustes, las cuatro
   referencias y «Seguir»). */
@media (min-width: 1200px) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia {
    width: clamp(640px, 48vw, 720px);
    max-width: calc(100vw - 32px);
    padding: 20px 22px 14px;
  }
}
/* En /crear/ la caja también cruza la luz de la grieta (grieta.css la dibuja con z-index 2 sobre la
   puerta): va por encima, como en la portada. Con un desplegable abierto, más arriba todavía. */
.entrada--pagina .entrada-caja.caja-vacia { z-index: 3; }
.entrada--pagina .entrada-caja.caja-vacia.menu-abierto { z-index: 6; }
/* Tableta: la caja va a lo ancho de su tarjeta; las columnas, un poco más angostas. */
@media (min-width: 641px) and (max-width: 1199px) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia { --cv-col-atajos: 88px; --cv-col-tipos: 140px; }
}

/* ── 2 · Los atajos (columna izquierda) ──────────────────────────────────── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-atajos {
  grid-area: atajos;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajo {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cv-tenue);
  transition: color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajo:hover { color: var(--cv-tinta); }
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajo:focus-visible { outline: 2px solid var(--cv-tinta); outline-offset: 2px; color: var(--cv-tinta); }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajo[aria-disabled="true"] { cursor: default; }
/* «Muy pronto», al lado del atajo tocado cuando la película está apagada (entrada.js
   pasa dónde está el atajo en --atajo-*). Se va solo a los 3 s. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajos-aviso {
  position: absolute;
  z-index: 4;
  top: calc(var(--atajo-arriba, 0px) + (var(--atajo-alto, 44px) - 28px) / 2);
  left: calc(var(--atajo-izquierda, 0px) + var(--atajo-ancho, 0px) + 10px);
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cv-globo-fondo);
  color: var(--cv-globo-tinta);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: cv-aparece-costado 180ms var(--cv-sale) both;
}
@keyframes cv-aparece-costado { from { opacity: 0; translate: -4px 0; } }

/* ── 3 · El lugar de escribir ────────────────────────────────────────────── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-texto {
  grid-area: texto;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: var(--cv-alto-texto, 168px);
  max-height: none;
  margin: 0;
  padding: 11px 0 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  overflow-y: auto;
  field-sizing: fixed;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-texto::placeholder { opacity: 1; font-style: normal; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-adjuntos { grid-area: adjuntos; min-width: 0; margin: 8px 0 0; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-subida { grid-area: subida; min-width: 0; margin: 10px 0 0; }
/* El contador de letras, abajo a la derecha del lugar de escribir (la grilla le da esa celda). */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-contador {
  grid-area: texto;
  position: absolute;
  inset: auto 0 4px auto;
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--cv-tenue);
  pointer-events: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-contador:empty { display: none; }

/* ── 4 · Las herramientas (columna derecha, vertical) ────────────────────── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-tipos {
  grid-area: tipos;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  contain: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos-pista {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo {
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding-block: 0;
  text-align: left;
  white-space: nowrap;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo > svg { display: block; flex: none; width: 18px; height: 18px; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo > span:not(.solo-lectores) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos .entrada-tipo-flecha { display: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos .entrada-tipo-largo { position: static; display: inline; width: auto; height: auto; clip-path: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos .entrada-tipo-corto { display: none; }
/* El nombre del modelo elegido, debajo de su herramienta (entrada-herramientas.js, pintarTipos). */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo-modelo {
  display: block;
  min-width: 0;
  margin: -10px 0 6px 28px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cv-tenue);
}

/* ── 5 · El piso: botoncitos de ícono, las referencias y «Seguir →» ──────── */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-barra {
  grid-area: piso;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  min-height: 0;
  margin: 12px 0 0;
  padding: 6px 0 0;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > :is(.entrada-mandos, .entrada-ajustes) {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  contain: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mandos-fila {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  scroll-snap-type: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mandos-cabeza, .entrada-mandos-grilla) { display: contents; }
/* Las notas de abajo de la tabla se ven en el globito de Modelo; acá quedan para el lector de pantalla. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mandos-pie {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando {
  position: relative;
  display: block;
  flex: none;
  grid-column: auto;
  min-width: 0;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando--elegida {
  display: flex;
  align-items: center;
  width: auto;
  min-height: 0;
  padding: 0;
  grid-template: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando--elegida > .entrada-mando-rotulo { display: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-elegida {
  display: flex;
  align-items: center;
  gap: 0 2px;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Un botoncito: 44 × 44, redondo (nunca una caja cuadrada), el ícono de 18 px en el medio. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton) {
  position: relative;
  display: inline-grid;
  grid-template: none;
  place-content: center;
  place-items: center;
  flex: none;
  gap: 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  color: var(--cv-tenue);
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando--fijo { cursor: default; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-elegida-quitar::after { content: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando-icono { display: grid; place-items: center; width: 18px; height: 18px; grid-area: auto; pointer-events: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-icono, .entrada-sumar-boton, .entrada-elegida-quitar) > svg { display: block; flex: none; width: 18px; height: 18px; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-elegida-quitar > svg { width: 16px; height: 16px; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra .entrada-mando-flecha { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton):hover { color: var(--cv-tinta); }
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-elegida-nombre)[aria-expanded="true"] { color: var(--cv-tinta); }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton):focus-visible {
  outline: 2px solid var(--cv-tinta);
  outline-offset: -2px;
  border-radius: 999px;
  color: var(--cv-tinta);
}

/* El globito: el nombre y el valor («Duración 5 s», «+ Foto»). Sale arriba del
   botoncito con el mouse encima o con el foco del teclado; un dato fijo lo muestra
   también al tocarlo. Con su lista abierta, se esconde. Opacidad y no
   «visibility»: el nombre de «+ Foto» es el nombre del botón para el lector de
   pantalla, y con «visibility: hidden» dejaba de serlo. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-globo, .entrada-sumar-nombre) {
  position: absolute;
  z-index: 7;
  inset: auto auto calc(100% + 4px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  width: max-content;
  max-width: min(280px, calc(100vw - 40px));
  margin: 0;
  padding: 7px 10px 8px;
  border-radius: 10px;
  background: var(--cv-globo-fondo);
  color: var(--cv-globo-tinta);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 180ms var(--cv-sale), translate 180ms var(--cv-sale);
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-nombre { white-space: nowrap; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando-globo > * {
  grid-area: auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  font: inherit;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  color: inherit;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando-globo > .entrada-mando-rotulo { opacity: .68; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando-globo > .entrada-mando-valor { font-weight: 600; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando-globo > .entrada-mando-nota { flex-basis: 100%; font-size: 12px; font-weight: 400; opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton):hover > :is(.entrada-mando-globo, .entrada-sumar-nombre) { opacity: 1; translate: 0 0; }
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton):focus-visible > :is(.entrada-mando-globo, .entrada-sumar-nombre),
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mando--fijo:focus > .entrada-mando-globo { opacity: 1; translate: 0 0; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia [aria-expanded="true"] > .entrada-mando-globo,
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia.menu-abierto .entrada-mando-globo { opacity: 0; translate: 0 4px; }

/* Las referencias: una rayita las separa de los ajustes. Cada una es su ícono; «3/15» va de insignia. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > .entrada-sumar {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 2px;
  margin: 0;
  padding: 0;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > .entrada-sumar::before {
  content: '';
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 8px 0 6px;
  background: var(--cv-linea);
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-cuenta {
  position: absolute;
  z-index: 1;
  top: 2px;
  right: -2px;
  min-width: 18px;
  margin: 0;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--cv-globo-fondo);
  color: var(--cv-globo-tinta);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-boton.lleno { opacity: .72; }

/* «Seguir →» al final, a la derecha, y el precio justo arriba, solo cuando hay una cifra
   («Desde 4 créditos» o el total). Arriba y no al lado: al lado, el piso no entraba en un
   renglón ni en 1440 px. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > .entrada-barra-accion {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0 0 0 10px;
}
/* El renglón del precio queda guardado desde el principio (13 px × 1,3): cuando llega la cifra con el
   catálogo, «Seguir» no baja 17 px (smoke-entrada-menu, a 320 px). Vacío, no se ve nada. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra-accion > .entrada-precio-zona { flex: none; min-width: 0; min-height: 17px; max-width: none; margin: 0 0 -6px; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona .entrada-mandos-precio {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 6px;
  font-size: 13px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cv-tenue);
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona :is(.entrada-mando-rotulo, .entrada-mando-valor--tenue) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona strong { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0; white-space: nowrap; color: var(--cv-tinta); }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona small { font-size: 12px; line-height: 1.3; font-variant-numeric: normal; white-space: nowrap; color: var(--cv-tenue); }
/* El de arranque lleva su detalle («Imagen 9:16») en el título y para el lector de pantalla: a la vista, la cifra sola. */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona .entrada-mandos-precio--arranque small { display: none; }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra-accion > .entrada-seguir { flex: none; width: auto; margin: 0; }
/* Void, Nervo y Rabbit tenían «Seguir» suelto en la portada, con el centro en el de la ventana
   (portada-grieta.css): en la caja vacía va en el piso, como en La grieta. */
:root[data-interfaz]:not([data-interfaz="grieta"]) #entrada-portada .entrada-caja.caja-vacia .entrada-barra-accion > .entrada-seguir,
:root[data-interfaz]:not([data-interfaz="grieta"]) #entrada-portada .entrada-caja.caja-vacia .entrada-barra-accion > .entrada-seguir:is(:hover, :focus-visible, :active) {
  position: relative;
  inset: auto;
  width: auto;
  flex-basis: auto;
  margin: 0;
  transform: none;
}

/* El listado de una herramienta, a la derecha de la caja cuando hay lugar (entrada-herramientas.js, ubicar). */
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-menu.al-costado:not(:modal) { right: auto; max-height: min(78vh, 620px); }
:is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-menu[open]:not(:modal) { animation: cv-aparece 180ms var(--cv-sale) both; }
@keyframes cv-aparece { from { opacity: 0; translate: 0 4px; } }

/* Nervo dibuja una cinta de obra arriba del piso (::before de .entrada-barra): el precio, que va arriba de
   «Seguir», quedaba debajo de la cinta. */
:root[data-interfaz="nervo"] :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-barra { padding-top: 18px; }

/* ── 6 · El celular (hasta 640 px): apilado, sin apretar el lugar de escribir ─
   Arriba los cuatro atajos en un renglón; el lugar de escribir a lo ancho; las
   herramientas en un renglón, solo la palabra; el piso con los ajustes en un
   renglón y, debajo, las referencias con «Seguir →» a la derecha (el precio,
   arriba de «Seguir»). */
@media (max-width: 640px) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: "atajos" "texto" "adjuntos" "subida" "tipos" "piso";
    --cv-alto-texto: 132px;
  }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-atajos { flex-direction: row; flex-wrap: wrap; gap: 0 16px; margin: -10px 0 0; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajos-aviso {
    top: calc(var(--atajo-arriba, 0px) + var(--atajo-alto, 44px) - 4px);
    left: clamp(0px, var(--atajo-izquierda, 0px), calc(100% - 7.5em));
  }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-texto { padding-top: 4px; field-sizing: content; max-height: 40vh; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-tipos { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 4px 0 0; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos-pista { display: contents; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo { width: auto; gap: 0; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo > svg { display: none; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos .entrada-tipo-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipos .entrada-tipo-corto { display: inline; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo-modelo { order: 9; flex-basis: 100%; margin: -8px 0 4px; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-barra { margin-top: 8px; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > :is(.entrada-mandos, .entrada-ajustes) { flex: 1 1 100%; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > .entrada-sumar::before { content: none; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-barra > .entrada-barra-accion { padding-left: 8px; }
  /* El globito de un ajuste sale arriba del renglón, desde su borde izquierdo: con siete íconos por
     renglón, el de la punta derecha se salía de la pantalla. */
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-mandos-fila :is(.entrada-mando, .entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar) { position: static; }
}
/* A menos de 360 px no entran las cinco en un renglón (en italiano son 251 px de palabras y 56 de aire en 260):
   Automático va arriba, en su renglón, y las otras cuatro debajo, en otro. */
@media (max-width: 359px) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-tipos { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; align-items: center; column-gap: 14px; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo-auto { grid-column: 1 / -1; justify-self: start; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo-modelo { grid-column: 1 / -1; }
}

/* ── 7 · El aspecto de La grieta ─────────────────────────────────────────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia {
  border: 0;
  border-radius: 18px;
  /* Opaca: en la compu cruza la grieta y queda encima del video. */
  background: rgba(20, 18, 16, .94);
  box-shadow: inset 0 1px 0 rgba(236, 227, 211, .10), 0 1px 0 rgba(0, 0, 0, .35), 0 24px 48px -24px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--gr-texto);
  caret-color: var(--gr-hueso);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia:focus-within {
  box-shadow: inset 0 1px 0 rgba(236, 227, 211, .14), 0 1px 0 rgba(0, 0, 0, .35), 0 24px 48px -24px rgba(0, 0, 0, .6);
}
/* En la portada, el borde de la caja muestra el foco del lugar de escribir. En /crear/ no: ahí el lugar de
   escribir toma el foco solo al abrir la página, y la caja quedaba con un marco de más. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) #entrada-portada .entrada-caja.caja-vacia:has(> .entrada-texto:focus-visible) { outline: 2px solid rgba(236, 227, 211, .5); outline-offset: 6px; }
/* /crear/ en el celular: la tarjeta salía 12 px de cada lado de una columna que ya estaba corrida (16 px a la
   izquierda y 28 a la derecha) y quedaba a 4 px del borde. Ahora, 16 px de cada lado. */
@media (max-width: 640px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-caja.caja-vacia { margin-inline: 0 -12px; padding-inline: 14px; }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-atajo { font-family: var(--gr-texto); }
/* «Escribe tu idea»: arriba a la izquierda, en letra de texto (Schibsted Grotesk, que hace de
   «tipo arial» en la marca), a tamaño de lectura y tenue. Lo escrito, igual y en hueso. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-texto {
  font: 400 17px/1.5 var(--gr-texto);
  letter-spacing: 0;
  color: var(--gr-hueso);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-texto::placeholder {
  font: 400 17px/1.5 var(--gr-texto);
  letter-spacing: 0;
  color: var(--gr-ceniza);
  opacity: .82;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-contador { font-family: var(--gr-texto); }
/* Entre 1200 y 1439 px portada-grieta.css deja partir en renglones la fila de pestañas (con un id y una
   clase más que la forma de arriba). En columna, un flex que se parte estira cada pestaña al ancho de su
   renglón y no al de la columna: el nombre del modelo se salía de la caja. */
@media (min-width: 641px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-tipos, .entrada-tipos-pista) { flex-wrap: nowrap; }
}
/* Las herramientas: la palabra y el ícono, sin caja ni raya. La elegida en hueso. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 500 14.5px/1.2 var(--gr-texto);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gr-ceniza);
  transition: color 160ms ease-out;
}
/* En el celular las palabras van sueltas, con 14 px de aire: cada una se toca en su palabra más 7 px de cada lado
   (el relleno se compensa con margen negativo, así que nada se corre). «3D» mide 19 px: su zona de toque sigue
   18 px más a la derecha, hasta los 44. Los toques de dos palabras vecinas no se pisan. */
@media (max-width: 640px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo { padding-inline: 7px; margin-inline: -7px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo[data-tipo="3d"] { min-width: 44px; padding-right: 18px; margin-right: -18px; }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo::before,
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo::after { content: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo:is([aria-pressed="true"], .con-elegida) { font-weight: 600; color: var(--gr-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo[aria-expanded="true"] { color: var(--gr-hueso); }
@media (hover: hover) and (pointer: fine) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo:hover { background: none; color: var(--gr-hueso); }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo:focus-visible { outline: 2px solid var(--gr-hueso); outline-offset: 2px; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-tipo-modelo { font-family: var(--gr-texto); color: var(--gr-ceniza); }
/* El piso: un filete apenas, sin el acento al escribir; botoncitos sin borde ni fondo. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia > .entrada-barra,
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia:focus-within > .entrada-barra {
  border: 0;
  border-top: 1px solid var(--cv-linea);
  box-shadow: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton),
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-sumar-boton, .entrada-sumar-personaje):is(:hover, .hace-falta, .lleno) {
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gr-texto);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-personaje { color: var(--gr-ceniza); }
@media (hover: hover) and (pointer: fine) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton):hover {
    background: rgba(236, 227, 211, .06);
    color: var(--gr-hueso);
  }
}
/* Lo que la herramienta elegida necesita: el ícono en hueso y un punto (antes, rosa). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-boton.hace-falta { color: var(--gr-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-sumar-boton.hace-falta::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gr-hueso);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-globo, .entrada-sumar-nombre, .entrada-sumar-cuenta, .entrada-atajos-aviso),
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-precio-zona :is(.entrada-mandos-precio, strong, small) { font-family: var(--gr-texto); }

/* Lo que la caja pide debajo de ella («Falta una foto», con la herramienta elegida): sin mayúsculas
   espaciadas, como todo lo demás (pedido del 25/10/2026). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-rotulo { font: 600 13px/1.3 var(--gr-texto); letter-spacing: 0; text-transform: none; }

/* El listado de cada herramienta, igual en la portada y en /crear/: la caja es una sola pieza. En /crear/ seguían
   los rótulos chicos en mayúsculas espaciadas («DECART», «19 PARA USAR», «PIDE»), que portada-orden.css (arreglo 9)
   ya había sacado solo en la portada. Mismos tamaños que allá. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu :is(.entrada-menu-titulo, .entrada-menu-titulo-chico) { text-transform: none; letter-spacing: -.01em; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu :is(.entrada-menu-cuenta, .entrada-menu-marca-boton, .entrada-menu-marca-nombre, .entrada-menu-rotulo, .entrada-menu-subrotulo, .entrada-sello, .entrada-herramienta-pide-rotulo, .entrada-herramienta-auto) {
  font-family: var(--gr-texto);
  letter-spacing: 0;
  text-transform: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-menu-cuenta { font-size: 12.5px; font-weight: 500; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-menu-marca-boton { font-size: 14px; font-weight: 600; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-menu-rotulo { font-size: 14px; font-weight: 600; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-menu-subrotulo { font-size: 13px; font-weight: 600; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-sello { font-size: 11.5px; font-weight: 500; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-herramienta-pide-rotulo { font-size: 12.5px; font-weight: 600; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia .entrada-menu .entrada-herramienta-auto { font-size: 12px; font-weight: 500; }

/* ── 8 · Menos movimiento: todo quieto ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-atajo, .entrada-tipo, .entrada-mando-boton, .entrada-mando--fijo, .entrada-elegida-nombre, .entrada-elegida-quitar, .entrada-sumar-boton, .entrada-mando-globo, .entrada-sumar-nombre) { transition: none; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-mando-globo, .entrada-sumar-nombre) { translate: none; }
  :is(#entrada-portada, .entrada--pagina) .entrada-caja.caja-vacia :is(.entrada-atajos-aviso, .entrada-menu[open]) { animation: none; }
}