/* STDO by DSNN · capa de la app sobre Nocturne UI (nocturne.css va antes).
 * Aquí solo vive lo que Nocturne no decide: el layout de cada espacio, el
 * logo, el editor Revelar y los detalles de las tarjetas del acervo. Ningún
 * color escrito a mano: todo sale de los tokens --nc-*. */

:root {
  color-scheme: dark;
  /* alias que usa el código viejo del editor; todos apuntan a Nocturne */
  --bg: var(--nc-canvas); --panel: var(--nc-surface-1); --panel-2: var(--nc-surface-2); --line: var(--nc-line);
  --text: var(--nc-text); --muted: var(--nc-text-3); --accent: var(--nc-accent); --accent-2: var(--nc-accent-hover);
}
body { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.hidden { display: none !important; }

/* --- Barra superior -------------------------------------------------------- */
/* rejilla, no flex: el centro nunca se encima con los lados por muy angosta que sea la ventana */
.topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 60px; padding: 0 var(--nc-s-5); background: var(--nc-surface-1); box-shadow: inset 0 -1px 0 var(--nc-line); }
.topbar .nc-appbar__lead, .topbar .nc-appbar__trail { flex: initial; }
@media (min-width: 861px) {
  /* Los dos lados en columnas iguales: el selector queda centrado en la VENTANA,
   * no en el hueco entre el logo (ancho) y el avatar (angosto). Con
   * minmax(max-content, …) un lado nunca se aplasta: si no cabe centrado, el
   * selector se corre lo justo en vez de encimarse con el cliente. */
  .topbar { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: var(--nc-s-4); }
  .topbar .workspace-switch { justify-self: center; max-width: 100%; }
  .topbar .nc-appbar__trail { justify-self: end; }
}
.top-actions { gap: var(--nc-s-2); white-space: nowrap; }
.top-actions > * { flex: none; }
.brand { gap: var(--nc-s-5); }   /* por si vuelve a acompañar algo a la marca */
/* el logo: STDO en Bricolage Grotesque negrita, «by DSNN» en Schibsted Grotesk normal */
.brand-nombre { display: flex; align-items: baseline; gap: 7px; font: 800 26px/1 'Bricolage Grotesque', var(--nc-font); font-variation-settings: 'opsz' 96; letter-spacing: -.035em; color: var(--nc-text); }
.brand-by { font: 400 15px/1 'Schibsted Grotesk', var(--nc-font); letter-spacing: 0; color: var(--nc-text-2); }
/* el cliente activo, a la derecha del logo: es el contexto de todo lo demás */
/* Sin forma propia: es el mismo `nc-input` que «Más reciente», el del panel de la capa o el de Tareas.
   Llevaba radio de píldora y relleno extra de cuando vivía pegado a la marca, donde hacía de etiqueta;
   junto a los demás controles ese radio lo delataba como de otra interfaz. Aquí solo queda lo que de
   verdad necesita, que es no crecer con un nombre largo. */
.cliente-caja { overflow: hidden; max-width: 224px; }
/* una sola línea aunque el nombre no quepa: la caja no crece, el nombre se corta */
.cliente-caja select { font-size: var(--nc-fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-pill { font-variant-numeric: tabular-nums; }
.catalog-pill.stale { color: var(--nc-warning); box-shadow: inset 0 0 0 1px var(--nc-warning); }
.quien { max-width: 240px; }
.workspace-tab .nc-badge { margin-left: 4px; }
body.sin-sesion .topbar { visibility: hidden; }
.login-aviso { margin: 0; }

/* --- Buscar ------------------------------------------------------------------ */
.search-shell { --nc-rail-w: 246px; }
.results-bar { position: sticky; top: 0; z-index: 20; padding: var(--nc-s-3) var(--nc-s-5); }
.filtros-abrir { display: none; }
.facets-panel .nc-facets__head #filtros-cerrar { display: none; }
.search-field { flex: 1 1 280px; max-width: 460px; height: var(--nc-h-sm); }
#zoom { width: 84px; accent-color: var(--nc-accent); }
/* «Ver»: un panel chico colgado de su botón. */
.ver-caja { position: relative; flex: none; }
.ver-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; padding: var(--nc-s-4); display: grid; gap: var(--nc-s-4);
             border-radius: var(--nc-r-lg); background: var(--nc-surface-2); box-shadow: var(--nc-edge), var(--nc-shadow-2); }
.ver-fila { display: grid; gap: 4px; cursor: pointer; }
.ver-fila--zoom { cursor: default; gap: 6px; }
.ver-panel small { color: var(--nc-text-2); font-size: var(--nc-fs-1); line-height: 1.35; }
/* la explicación va debajo del TEXTO de la casilla, no de la casilla */
.ver-fila > small { padding-left: 27px; }
.ver-panel #zoom { width: 100%; box-sizing: border-box; margin: 0; }
#ver-abrir[aria-expanded="true"] { background: var(--nc-surface-3); }
/* un punto en «Ver» cuando lo que se ve no es lo de siempre: que se note desde la barra */
#ver-abrir.is-activo::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--nc-accent-hover); }
/* El renglón de estado: qué se encontró, con qué filtros, y cómo salir. */
/* Dos columnas: lo encontrado y sus filtros a la izquierda (se envuelven), la
 * salida fija arriba a la derecha, para que nunca se quede sola en un renglón.
 * Alto mínimo de un renglón: aparecer o ganar una etiqueta mueve las fotos una
 * sola vez y siempre lo mismo. */
.estado-busqueda { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--nc-s-4); min-height: 44px; box-sizing: border-box;
                   padding: var(--nc-s-3) var(--nc-s-5); color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.estado-busqueda .est-izq { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 28px; }
.estado-busqueda .est-fin { min-height: 28px; display: inline-flex; align-items: center; }
.estado-busqueda b { color: var(--nc-text); font-variant-numeric: tabular-nums; }
.estado-busqueda .est-sep { color: var(--nc-text-3); }
/* El acento tal cual no llega a 4.5:1 como texto chico sobre el fondo: se aclara,
 * y va subrayado para que el color no sea la única señal de que es un enlace. */
.estado-busqueda .est-link { padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--nc-accent-hover) 62%, white); font: inherit; cursor: pointer;
                             text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.estado-busqueda .est-link:hover { text-decoration-color: currentColor; }
.estado-busqueda .est-link:focus-visible, .estado-busqueda .nc-chip:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; border-radius: var(--nc-r-pill); }
.estado-busqueda .nc-chip { cursor: pointer; }
.estado-busqueda .est-solo { background: var(--nc-accent); color: var(--nc-text-on-accent); }
.results-count b { color: var(--nc-text); font-variant-numeric: tabular-nums; }
.backend-warn { display: flex; align-items: center; gap: var(--nc-s-3); flex-wrap: wrap; }
.backend-warn code { padding: 2px 7px; border-radius: var(--nc-r-xs); background: var(--nc-inset); font-family: var(--nc-font-mono); font-size: var(--nc-fs-1); }

/* la cuadrícula del acervo: el tamaño lo pone el zoom (--card) */
.grid { padding: var(--nc-s-5) var(--nc-s-5) 120px; grid-template-columns: repeat(auto-fill, minmax(var(--card, 210px), 1fr)); }
.card { text-align: left; user-select: none; }
.card .nc-media-card__thumb { aspect-ratio: 4 / 3; }
.card .thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .thumb.fail { display: flex; align-items: center; justify-content: center; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.card .tag { position: absolute; top: 7px; left: 7px; bottom: auto; right: auto; letter-spacing: .05em; }
.card .grp { position: absolute; top: 7px; right: 7px; bottom: auto; left: auto; color: var(--nc-accent-hover); }
.card .ent { position: absolute; bottom: 7px; left: 7px; top: auto; right: auto; letter-spacing: .05em; text-transform: uppercase; }
#n-entregables:empty { display: none; }
.card .sub { margin-top: 1px; color: var(--nc-text-3); font-size: var(--nc-fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { padding: 0 2px; }
.pick { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--nc-r-sm); background: var(--nc-glass); color: var(--nc-text); box-shadow: var(--nc-edge); font-size: 13px; opacity: 0; transition: opacity var(--nc-t-fast); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.card:hover .pick, .card[aria-selected="true"] .pick { opacity: 1; }
/* Quitar una foto de lo que eligió un agente (#buscar?ids=…) */
.quitar-de-seleccion { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--nc-r-sm); background: var(--nc-glass); color: var(--nc-text); box-shadow: var(--nc-edge); cursor: pointer; opacity: 0; transition: opacity var(--nc-t-fast); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.card:hover .quitar-de-seleccion, .quitar-de-seleccion:focus-visible { opacity: 1; }
@media (hover: none) { .quitar-de-seleccion { opacity: .8; } }
.card[aria-selected="true"] .pick { background: var(--nc-accent); color: var(--nc-text-on-accent); box-shadow: var(--nc-edge-accent); }
#mas-btn { grid-column: 1 / -1; justify-self: center; margin-top: var(--nc-s-3); }
.vacio { grid-column: 1 / -1; padding: 70px 20px; color: var(--nc-text-3); text-align: center; }
.vacio code { padding: 2px 6px; border-radius: var(--nc-r-xs); background: var(--nc-inset); color: var(--nc-text); font-family: var(--nc-font-mono); }

/* visor del acervo */
.lb-cab { margin: calc(-1 * var(--nc-s-2)) 0 calc(-1 * var(--nc-s-3)); }
#lb-media { display: contents; }
/* La vista previa cabe SIEMPRE en la pantalla, también una vertical. En el kit la imagen
   tiene max-height: 100%, pero el renglón de la rejilla era automático y ese 100 % no
   tenía contra qué medirse: una foto o un reel 9:16 crecía y había que desplazarse. */
.nc-viewer { height: 100dvh; overflow: hidden; }
.nc-viewer__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.nc-viewer__stage img, .nc-viewer__stage video { max-height: min(100%, calc(100dvh - 2 * var(--nc-s-6))); object-fit: contain; }
@media (min-width: 861px) { .nc-viewer__side { max-height: 100dvh; overflow-y: auto; } }   /* en el teléfono el kit ya lo limita a 45vh */
/* En el teléfono la X vivía en la cabecera del panel, debajo de la imagen: con una foto vertical o la
 * barra del navegador quedaba fuera de la pantalla. Se queda fija arriba a la derecha, sobre la imagen. */
@media (max-width: 860px) {
  #lb-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--nc-s-3)); right: var(--nc-s-3); z-index: 5;
    width: 40px; height: 40px; border-radius: 50%; background: var(--nc-surface-3); box-shadow: var(--nc-shadow-2, 0 2px 8px rgba(0,0,0,.4)); }
  .lb-cab { height: 0; margin: 0; }   /* solo queda el hueco de la X, que ya no está aquí */
}
#lb-media iframe { width: 100%; height: 100%; }
.lb-siblings { display: block; }
/* Mismo disparo, sobre el borde inferior de la foto. El degradado negro es para que las miniaturas se
 * lean aunque la foto sea clara ahí abajo. Tenues para no tapar la imagen, al 100 % al pasar o al enfocar;
 * la que se está viendo, siempre al 100 % y con borde. La posición la pone colocarTira() en buscar.js. */
.lb-tira { position: absolute; z-index: 2; display: flex; gap: 8px; overflow-x: auto;
  padding: 36px 12px 12px; border-radius: 0 0 var(--nc-r-sm) var(--nc-r-sm);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, 0));
  scrollbar-width: none; }
.lb-tira::-webkit-scrollbar { display: none; }
.lb-tira__foto { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--nc-r-sm);
  overflow: hidden; background: rgba(0, 0, 0, .4); cursor: pointer; opacity: .55;
  transition: opacity var(--nc-t-fast); }
.nc-viewer__stage .lb-tira__foto img { display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; border-radius: 0; box-shadow: none; }
.lb-tira__foto:hover, .lb-tira__foto:focus-visible { opacity: 1; }
.lb-tira__foto { position: relative; }
.lb-tira__foto--actual { opacity: 1; }
.lb-tira__foto--actual::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px #fff; pointer-events: none; }
.lb-tira__foto:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.lb-tira .thumb.fail { display: grid; place-items: center; width: 100%; height: 100%; font-size: 9px; line-height: 1.1; text-align: center; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .lb-tira__foto { transition: none; }
}
.lb-siblings .sibling { margin-bottom: 2px; transition: color var(--nc-t-fast); }
.lb-siblings .sibling--actual, .lb-siblings .sibling--encima { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lb-siblings .sibling { transition: none; } }
.lb-siblings a { color: var(--nc-accent-hover); }
#toast:not(.on) { display: none; }

/* --- Ideas y Proyectos ------------------------------------------------------- */
.proyectos-shell, .ideas-shell { min-height: 0; }
.nc-bar__title strong { color: var(--nc-text); }
.nc-notice { flex: none; }
.tarjeta-mover { flex: none; }
.context-menu { position: fixed; z-index: var(--nc-z-popover); margin: 0; min-width: 220px; list-style: none; }
.context-menu li { display: block; }
.context-menu .context-heading { padding: 6px 10px 8px; margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--nc-line); color: var(--nc-text-3); font-size: var(--nc-fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ideas en cuadrícula: la imagen del link arriba, recorte 1:1, el texto abajo */
#ideas-shell .nc-board__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--nc-s-3); align-content: start; padding-bottom: var(--nc-s-4); }
#ideas-shell .nc-card { display: flex; flex-direction: column; }
#ideas-shell .nc-card__title { font-size: var(--nc-fs-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#ideas-shell .nc-card .nc-linkcard { order: -1; margin: 0 0 var(--nc-s-3); }
#ideas-shell .nc-card .nc-linkcard__img { aspect-ratio: 1 / 1; }
#ideas-shell .nc-card .nc-linkcard__desc { display: none; }
#ideas-shell .nc-board__empty { grid-column: 1 / -1; }
.nc-linkcard { margin-top: var(--nc-s-3); }
.previa-caja:empty { display: none; }
.previa-caja .nc-linkcard { margin-top: 0; }

/* formulario del modal de Ideas (conserva el nombre de cuando lo compartía con Proyectos) */
.proy-modal-caja { display: grid; gap: var(--nc-s-4); padding-top: var(--nc-s-5); }
.proy-m-creada { color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.proy-m-botones { display: flex; justify-content: space-between; align-items: center; gap: var(--nc-s-2); flex-wrap: wrap; padding-top: var(--nc-s-2); }
.proy-m-botones .solo-editor { display: flex; gap: var(--nc-s-2); flex-wrap: wrap; }

/* Tareas: tarjeta compacta. Título arriba; abajo proyecto, prioridad, fecha y
 * quién, en una línea que se parte si no cabe. El rojo es solo para lo vencido. */
.tareas .nc-card__title { font-size: var(--nc-fs-2); line-height: 1.4; }
.tarea-pie { display: flex; align-items: center; gap: var(--nc-s-3); margin-top: var(--nc-s-3); font-size: var(--nc-fs-1); color: var(--nc-text-2); }
.tarea-pie > * { flex: none; white-space: nowrap; }
/* el proyecto es lo único que cede espacio: se corta con «…» antes que partir la línea */
.tarea-pie > .tarea-proy { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tarea-proy span { overflow: hidden; text-overflow: ellipsis; }
.tareas-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nc-chip .tareas-punto { margin-right: 6px; }
.tarea-prio { font-weight: 600; }
.tarea-prio--alta { color: var(--nc-warning); }
.tarea-prio--baja { color: var(--nc-text-3); font-weight: 400; }
/* Una tarea que un agente dejó a medias (etiqueta «atascada»): se ve de lejos. */
.tarea-atascada { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; background: rgba(224, 49, 49, .18); color: #ff7b7b; font-size: var(--nc-fs-1); font-weight: 600; }
.tarea-atascada::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* hoy y vencida van en pastilla: el acento y el rojo como texto chico no llegan a 4.5:1 */
.tarea-fecha--hoy, .tarea-fecha--vencida { padding: 1px 6px; border-radius: var(--nc-r-pill); color: var(--nc-text); font-weight: 600; }
.tarea-fecha--hoy { background: var(--nc-accent-soft); }
.tarea-fecha--vencida { background: var(--nc-danger-soft); box-shadow: inset 0 0 0 1px var(--nc-danger); }
.tarea-cliente { color: var(--nc-text-3); }
.tarea-adj { display: inline-flex; align-items: center; gap: 3px; color: var(--nc-text-3); }
.tarea-adj .nc-i { width: 13px; height: 13px; }
.tarea-quien { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nc-surface-3); color: var(--nc-text); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.tarea--hecha .nc-card__title { color: var(--nc-text-3); text-decoration: line-through; text-decoration-color: var(--nc-line-strong); }
.tareas-vacio { margin: 0; padding: var(--nc-s-3) var(--nc-s-2); color: var(--nc-text-3); font-size: var(--nc-fs-1); }
#proy-quien { flex: none; }
/* el filtro de proyecto: ancho estable, que un nombre largo no mueva la fila */
.tareas-proy-sel { flex: none; min-width: 200px; max-width: 320px; }
/* Tablero de un proyecto: columnas propias. Debajo del nombre, la etapa común
 * que cuenta cada una, apagada: es referencia, no el nombre. */
.tareas-col .nc-board__col-head { flex-wrap: wrap; row-gap: 0; }
.tareas-etapa { order: 3; flex-basis: 100%; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.tareas-col-menu { margin-right: calc(var(--nc-s-2) * -1); }

/* Arrastrar una columna para reordenarla. Se agarra por la cabecera, así que la cabecera es la que
   avisa que se puede: el cursor cambia al pasar por encima y no antes. */
.tareas-col-agarre { cursor: grab; }
.tareas-col-agarre:active { cursor: grabbing; }
/* El botón y el título de dentro conservan el suyo: sobre ellos no se arrastra, se pulsa. */
.tareas-col-agarre .nc-btn, .tareas-col-agarre .nc-board__col-title--edit { cursor: auto; }
.tareas-col-agarre .nc-btn { cursor: pointer; }

#proy-tablero .tareas-col.is-arrastrando { opacity: .6; box-shadow: var(--nc-edge-accent), var(--nc-shadow-3); }
/* Mientras se arrastra no se selecciona texto ni aparece el cursor de escribir por todo el tablero. */
body.tareas-arrastrando { user-select: none; cursor: grabbing; }
body.tareas-arrastrando #proy-tablero * { cursor: grabbing !important; }

@media (prefers-reduced-motion: reduce) { #proy-tablero .tareas-col { transition: none; } }
#proy-tablero .nc-board__col--new { flex: 0 0 200px; align-self: flex-start; }
#proy-menu .context-heading { margin-top: 4px; box-shadow: inset 0 1px 0 var(--nc-line); padding-top: 8px; }
#proy-menu .context-heading:first-child { margin-top: 0; box-shadow: inset 0 -1px 0 var(--nc-line); padding-top: 6px; }
/* Reporte de lo hecho en un mes */
.proy-rep__fila { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--nc-s-2) var(--nc-s-4); margin-bottom: var(--nc-s-4); }
.proy-rep__mes { min-width: 200px; margin: 0; }
.proy-rep__resumen { margin: 0 0 8px; }
.proy-rep__lista { max-height: min(56vh, 520px); overflow: auto; margin: 0 calc(var(--nc-s-2) * -1); padding: 0 var(--nc-s-2); }
.proy-rep__cliente { margin: var(--nc-s-5) 0 var(--nc-s-1); font-size: var(--nc-fs-1); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--nc-text-3); }
.proy-rep__cliente:first-child, .proy-rep__proyecto:first-child { margin-top: 0; }
.proy-rep__proyecto { margin: var(--nc-s-4) 0 var(--nc-s-1); font-size: var(--nc-fs-3); font-weight: 650; color: var(--nc-text); }
.proy-rep__tareas { list-style: none; margin: 0; padding: 0; }
.proy-rep__tarea { display: flex; align-items: baseline; gap: var(--nc-s-3); width: 100%; padding: 6px var(--nc-s-2); margin: 0 calc(var(--nc-s-2) * -1); border: 0; border-radius: var(--nc-r-sm); background: none; color: var(--nc-text-2); font: inherit; text-align: left; cursor: pointer; }
.proy-rep__tarea:hover { background: var(--nc-raise); color: var(--nc-text); }
.proy-rep__titulo { flex: 1; min-width: 0; }
.proy-rep__meta { flex-shrink: 0; white-space: nowrap; font-size: var(--nc-fs-1); }
#proy-menu [aria-checked="true"]::after { content: '✓'; margin-left: auto; padding-left: var(--nc-s-4); color: var(--nc-text-2); }
#proy-menu .nc-menu__item { display: flex; width: 100%; }
#proy-menu .tareas-menu-grupo { display: block; padding: 0; }
#proy-menu .nc-menu__item:disabled { color: var(--nc-text-3); opacity: .6; cursor: default; background: none; }
#proy-menu .tareas-menu-borrar { margin-top: 4px; padding-top: 4px; box-shadow: inset 0 1px 0 var(--nc-line); }
#proy-menu .tareas-menu-borrar .nc-menu__item:not(:disabled) { color: var(--nc-danger); }
/* un nombre largo se corta con «…», no ensancha la columna */
#proy-tablero .tareas-col .nc-board__col-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#proy-tablero .nc-board__col--new { flex: 0 0 260px; }
#proy-tablero .nc-board__col--new .nc-board__add { min-height: 44px; }
/* el punto de color del proyecto elegido: anillo claro, sobre el morado se perdía */
#proy-filtros .nc-chip[aria-pressed="true"] .tareas-punto { box-shadow: 0 0 0 1.5px var(--nc-text); }
#proy-filtros .nc-chip:disabled { opacity: .6; cursor: default; }
/* las columnas llenan el ancho y el alto: una columna vacía sigue siendo un blanco fácil al arrastrar */
#proy-tablero .tareas-col { flex: 1 0 260px; min-width: 0; max-width: 420px; min-height: 240px; }
.tarea { cursor: pointer; }
.tarea:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.tareas-vacio .nc-btn { margin-top: var(--nc-s-2); }
@media (max-width: 860px) {
  /* título y «Mías / Todas» en un renglón; los filtros se deslizan, no se apilan */
  #proyectos-shell .nc-bar { flex-wrap: nowrap; padding: var(--nc-s-2) var(--nc-s-4); gap: var(--nc-s-2); }
  #proyectos-shell .nc-bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #proyectos-shell .nc-bar .nc-segmented__item { min-height: 44px; }
  #proyectos-shell .nc-bar .nc-segmented { padding: 0; }
  /* Ideas y Tareas: la misma fila de chips en el teléfono */
  #proy-filtros, #ideas-shell .et-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    /* la fila sigue a la derecha: se desvanece en el borde en vez de cortarse en seco */
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  #proy-filtros .nc-chip, #ideas-shell .et-filtros .nc-chip { height: 36px; font-size: var(--nc-fs-2); }
  #proy-resumen, #proyectos-shell .nc-badge, .tareas-vacio { font-size: 12px; }
  .tarea-quien { width: 28px; height: 28px; font-size: 12px; }
  #proy-tablero { padding-bottom: 88px; }
  #proy-tablero .tareas-col { flex: 0 0 84vw; min-height: 0; }
  /* 16px en los campos: con menos, iOS hace zoom al tocarlos */
  #proy-modal input, #proy-modal select, #proy-modal textarea { font-size: 16px; }
  #proy-modal .nc-input { min-height: 44px; }
  #proy-menu .nc-menu__item { min-height: 44px; }
  .tareas-col-menu { width: 44px; height: 44px; }
  #proy-tablero .nc-board__col--new { flex: 0 0 84vw; }
  #proy-modal .nc-dialog__footer .nc-btn { min-height: 44px; }
  #proy-m-x { width: 44px; height: 44px; }
  #proy-filtros::-webkit-scrollbar, #ideas-shell .et-filtros::-webkit-scrollbar { display: none; }
  #proy-filtros > *, #ideas-shell .et-filtros > * { flex: none; }
  /* el imán de las columnas las pegaba al borde, comiéndose el margen */
  #proy-tablero { scroll-padding-inline: var(--nc-s-4); }
  /* la tarjeta es para leer con el dedo cerca: 13px no alcanza */
  .tareas .nc-card__title { font-size: 15px; }
  .tarea-pie { font-size: var(--nc-fs-2); }
}

/* El visor de la referencia. Un reel es vertical: el marco se le ajusta en vez
 * de dejarlo nadando en una caja horizontal. */
.ideas-visor-caja { padding: 0; }
#ideas-visor-titulo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#ideas-visor-marco { display: grid; }
#ideas-visor-marco iframe { display: block; width: 100%; height: min(78vh, 720px); border: 0; background: var(--nc-inset); }
.nc-linkcard--ver { cursor: zoom-in; }

/* Dos filtros distintos en la misma fila. El destino es un control: lista
 * cerrada, siempre entera, con el peso de algo que se aprieta. Las etiquetas
 * son metadato: van apagadas y detrás de su rótulo. Sin esa diferencia, en una
 * semana nadie sabe si «golf» era un destino o una etiqueta. */
.et-destino { font-weight: 600; }
.et-destino[aria-pressed="true"] { background: var(--nc-accent); color: var(--nc-text-on-accent); }
.et-destino--sin { color: var(--nc-text-3); }
.et-filtros-sep { display: inline-flex; align-items: center; gap: var(--nc-s-2); margin-left: var(--nc-s-3); padding-left: var(--nc-s-4); color: var(--nc-text-3); font-size: var(--nc-fs-1); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 1px 0 0 var(--nc-line-strong); flex: none; }
@media (max-width: 860px) {
  /* Con seis destinos y las etiquetas detrás, la fila no se envuelve: se desliza. */
  .et-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .et-filtros::-webkit-scrollbar { display: none; }
  .et-filtros > * { flex: none; }
}

/* --- Usuarios ------------------------------------------------------------------ */
.usuarios-cuerpo { flex: 1; min-height: 0; padding: var(--nc-s-5); overflow: auto; display: grid; gap: var(--nc-s-7); align-content: start; }
.u-dominios { display: grid; gap: var(--nc-s-3); justify-items: start; }
.u-dominios h3 { margin: 0; font-size: var(--nc-fs-3); }
.u-dominios > .nc-caption { margin: 0; max-width: 75ch; }
.u-nivel-admin { color: var(--nc-serie-5); }
.u-vacio { margin: 0; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
#dominios-lista { width: 100%; }
.u-dominios .dominio { padding: var(--nc-s-3) 0; box-shadow: inset 0 -1px 0 var(--nc-line); }
.u-dominios .dominio code { color: var(--nc-text); font-family: var(--nc-font-mono); }
.u-dominios .dominio .nc-btn { margin-left: var(--nc-s-2); }
.u-dom-form { width: 100%; margin-top: var(--nc-s-2); display: flex; flex-wrap: wrap; gap: var(--nc-s-4); align-items: end; }
.u-dom-clientes { flex: 1 1 320px; }
.u-checks { display: flex; flex-wrap: wrap; gap: var(--nc-s-3) var(--nc-s-4); }
.u-checks .nc-check { font-size: var(--nc-fs-2); }
.u-m-caja { display: grid; gap: var(--nc-s-4); align-content: start; }
/* Los permisos se guardan: casi siempre son los del nivel y no hay nada que
 * mirar. El resumen dice si alguien los tocó, así que cerrado no esconde nada. */
.u-permisos { border-radius: var(--nc-r-md); background: var(--nc-surface-2); box-shadow: inset 0 0 0 1px var(--nc-line); }
.u-permisos > summary { display: flex; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) var(--nc-s-4); color: var(--nc-text-2); font-size: var(--nc-fs-2); cursor: pointer; list-style: none; }
.u-permisos > summary::-webkit-details-marker { display: none; }
.u-permisos > summary:hover { color: var(--nc-text); }
.u-permisos--tocado > summary { color: var(--nc-accent); }
.u-permisos > .nc-caption { margin: 0 var(--nc-s-4); }
details:not([open]) > .u-permisos-lista { display: none; }
.u-permisos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--nc-s-2) var(--nc-s-4); padding: var(--nc-s-3) var(--nc-s-4) var(--nc-s-4); }
.u-permisos-lista .nc-check { font-size: var(--nc-fs-2); }
.u-dom-acciones { display: flex; gap: var(--nc-s-2); }
/* Quien no tiene acceso se lee de un vistazo, no adivinando por el menú. */
.u-inactivo { margin-left: var(--nc-s-2); color: var(--nc-text-3); }
tr[aria-disabled="true"] .nc-identity__avatar,
tr[aria-disabled="true"] .nc-identity__name { color: var(--nc-text-3); }
.u-cuando { color: var(--nc-text-2); }
.u-abrir { cursor: pointer; }
.u-abrir:hover { text-decoration: underline; text-underline-offset: 3px; }
.u-abrir:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; border-radius: var(--nc-r-xs); }

/* --- Revelar (el editor) ----------------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 218px minmax(380px, 1fr) 292px; min-height: 0; }
.filmstrip-panel, .controls-panel { min-height: 0; background: var(--nc-surface-1); }
.filmstrip-panel { display: flex; flex-direction: column; box-shadow: inset -1px 0 0 var(--nc-line); }
.controls-panel { overflow: auto; box-shadow: inset 1px 0 0 var(--nc-line); }
.add-button { margin: var(--nc-s-3) var(--nc-s-3) 0; width: auto; }
.add-button + .add-button + input + .filmstrip { margin-top: var(--nc-s-3); }
.filmstrip { padding: 0 10px 12px; overflow: auto; display: grid; gap: var(--nc-s-2); }
.thumb-lib, .filmstrip .thumb { position: relative; padding: 0; overflow: hidden; border: 0; border-radius: var(--nc-r-md); background: var(--nc-inset); box-shadow: var(--nc-edge); text-align: left; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--nc-t); }
.filmstrip .thumb[aria-selected="true"] { outline-color: var(--nc-accent); }
.filmstrip .thumb img { width: 100%; height: 108px; display: block; object-fit: cover; }
.filmstrip .thumb span { display: block; padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--nc-fs-1); color: var(--nc-text-2); }
.thumb-quitar { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--nc-r-pill); background: var(--nc-scrim); color: #fff; font-style: normal; font-size: 15px; line-height: 1; opacity: 0; transition: opacity var(--nc-t-fast); cursor: pointer; }
.filmstrip .thumb:hover .thumb-quitar, .filmstrip .thumb[aria-selected="true"] .thumb-quitar { opacity: .85; }
.thumb-quitar:hover { opacity: 1 !important; background: var(--nc-danger); }

.stage { position: relative; min-width: 0; display: grid; place-items: center; overflow: hidden; background-color: var(--nc-inset); background-image: linear-gradient(var(--nc-overlay) 1px, transparent 1px), linear-gradient(90deg, var(--nc-overlay) 1px, transparent 1px); background-size: 42px 42px; }
.empty-state { max-width: 480px; padding: 40px; text-align: center; }
.empty-state h1 { margin: 6px 0 10px; font-size: 30px; letter-spacing: -.04em; }
.empty-state p { margin: 0 auto 22px; max-width: 420px; color: var(--nc-text-2); font-size: var(--nc-fs-3); }
.empty-state small { display: block; margin-top: 12px; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.empty-state .nc-btn + .nc-btn { margin-left: var(--nc-s-2); }
.eyebrow { margin-bottom: 6px !important; color: var(--nc-accent-hover) !important; font-size: var(--nc-fs-1) !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.empty-visual { position: relative; width: 150px; height: 112px; margin: 0 auto 30px; }
.photo-card { position: absolute; left: 43px; top: 8px; width: 70px; height: 92px; border-radius: var(--nc-r-md); background: var(--nc-surface-3); box-shadow: var(--nc-edge), var(--nc-shadow-3); }
.card-one { transform: translateX(-24px) rotate(-12deg); background: linear-gradient(150deg, var(--nc-surface-3), var(--nc-surface-1)); }
.card-two { transform: translateX(24px) rotate(12deg); background: linear-gradient(150deg, var(--nc-surface-2), var(--nc-surface-1)); }
.card-three { display: grid; place-items: center; color: var(--nc-text-on-accent); background: linear-gradient(150deg, var(--nc-accent), var(--nc-surface-1) 70%); font-size: var(--nc-fs-2); font-weight: 900; letter-spacing: .12em; }
.viewer { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr 48px; min-height: 0; }
/* El canvas se posiciona y escala desde JavaScript (ver app.js). */
.image-wrap { position: relative; min-height: 0; overflow: hidden; }
.image-wrap canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: var(--nc-shadow-3); }
.image-wrap.grabbable { cursor: grab; }
.image-wrap.grabbing { cursor: grabbing; }
.viewer-footer { padding: 0 var(--nc-s-5); display: flex; align-items: center; gap: var(--nc-s-4); background: var(--nc-surface-1); box-shadow: inset 0 1px 0 var(--nc-line); color: var(--nc-text-3); font-size: var(--nc-fs-2); }
.viewer-footer > #active-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-controls { display: flex; align-items: center; gap: 4px; }
.zoom-button, .zoom-level { height: 24px; padding: 0 6px; border: 0; border-radius: var(--nc-r-xs); background: var(--nc-raise); box-shadow: var(--nc-edge); color: var(--nc-text); font: inherit; font-size: var(--nc-fs-1); cursor: pointer; }
.zoom-button { width: 24px; padding: 0; font-size: 13px; line-height: 1; }
.zoom-level { min-width: 62px; font-variant-numeric: tabular-nums; }
.zoom-button:hover:not(:disabled), .zoom-level:hover { background: var(--nc-raise-hover); }
.zoom-button:disabled { color: var(--nc-text-3); cursor: default; }
.drop-overlay { position: absolute; inset: 18px; display: none; place-items: center; border: 2px dashed var(--nc-accent); border-radius: var(--nc-r-xl); background: var(--nc-glass); color: var(--nc-accent-hover); font-size: 18px; font-weight: 700; }
.stage.dragging .drop-overlay { display: grid; }
.viewer-error { position: absolute; inset: 25px; display: grid; place-content: center; gap: 10px; text-align: center; padding: 32px; background: var(--nc-surface-1); box-shadow: inset 0 0 0 1px var(--nc-danger-soft); color: var(--nc-text-2); }
.viewer-error strong { color: var(--nc-danger); font-size: var(--nc-fs-4); }
.viewer-error p { font-size: var(--nc-fs-2); line-height: 1.6; max-width: 44ch; margin: 0; }
.viewer-error code { color: var(--nc-text); background: var(--nc-inset); padding: 2px 6px; border-radius: var(--nc-r-xs); font-family: var(--nc-font-mono); }

.preset-label, .quality-label { display: grid; gap: 7px; padding: var(--nc-s-4) var(--nc-s-5); color: var(--nc-text-3); font-size: var(--nc-fs-2); }
.style-block { padding: 0 var(--nc-s-5) 4px; box-shadow: inset 0 -1px 0 var(--nc-line); margin-bottom: 10px; }
.style-block .preset-label { padding: var(--nc-s-4) 0 0; }
.style-block .nc-btn { margin: 6px 0 0; justify-content: flex-start; padding-left: 0; }
.style-block .nc-btn:last-of-type { margin-bottom: 10px; }
.style-note { margin: 0 0 10px; color: var(--nc-text-3); font-size: var(--nc-fs-1); line-height: 1.5; }
.control-section { padding: 2px var(--nc-s-5) 15px; box-shadow: inset 0 -1px 0 var(--nc-line); }
.control-section h2 { margin: 12px 0; font-size: var(--nc-fs-3); }
.control { margin: 13px 0; }
.control label { margin-bottom: 7px; display: flex; justify-content: space-between; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.control output { color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
/* La altura del slider la pone el kit: es la zona de agarre (24px) con el
   carril pintado de 4px por dentro. Esta regla la aplastaba a 3px, y como el
   relleno del kit son 10px arriba y abajo, la caja de contenido quedaba en cero
   y el carril no se pintaba: se veía el pulgar flotando sobre nada. */
input[type=range] { width: 100%; accent-color: var(--nc-accent); cursor: pointer; }
.sync-section p { color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.quality-label output { float: right; color: var(--nc-text); }
.status { min-height: 54px; padding: 6px var(--nc-s-5) 18px; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
@media (max-width: 900px) { .app-shell { grid-template-columns: 170px 1fr 250px; } }

/* --- Pantallas angostas -------------------------------------------------------
 * La barra cede primero lo decorativo (la píldora de «procesamiento local», el
 * nombre junto al avatar). Debajo de 860px el panel de filtros de Buscar es un
 * cajón, así que aparece el botón que lo abre; sin él no habría cómo filtrar. */
@media (max-width: 1000px) { .quien .nc-identity__text { display: none; } }

@media (max-width: 860px) {
  /* Dos filas: arriba la marca con el cliente (el contexto de todo), abajo los
     espacios y la sesión. Nada compite por el mismo renglón, que era lo que
     encimaba el selector de cliente con el avatar en Revelar. */
  /* Una sola fila: la marca con el cliente y la sesión. Los espacios se fueron
     abajo (.nc-tabbar), así que ya no hay nada que repartir en dos renglones. */
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; padding: var(--nc-s-3) var(--nc-s-4); }
  .topbar .nc-appbar__lead { grid-area: 1 / 1 / 2 / 2; }
  .topbar .nc-appbar__trail { grid-area: 1 / 2 / 2 / 3; }
  /* «Guardar ajuste» es un extra del editor; en pantalla chica estorba y el
     editor de todos modos pide escritorio. Exportar sí se queda. */
  #save-preset { display: none; }
  .brand-nombre { font-size: 21px; flex-wrap: nowrap; white-space: nowrap; }
  .brand-by { font-size: 12px; }
  /* el nombre del cliente cede ancho antes que encimarse con la sesión */
  .topbar .nc-appbar__lead { min-width: 0; }
  .topbar .nc-appbar__trail { min-width: 0; }
  .cliente-caja { flex: 0 1 auto; min-width: 92px; max-width: 46vw; }
  /* en Revelar la barra gana los botones del editor: que bajen de línea en vez
     de meterse encima de la marca */
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }

  .filtros-abrir { display: inline-flex; }
  .facets-panel .nc-facets__head #filtros-cerrar { display: inline-flex; }
  .facets-panel .nc-facets__head { position: sticky; top: 0; z-index: 1; background: var(--nc-surface-1); }
  .results-bar { padding: var(--nc-s-3) var(--nc-s-4); }
  .estado-busqueda { padding: var(--nc-s-3) var(--nc-s-4); }
  .search-field { flex: 1 1 200px; }
  .grid { padding: var(--nc-s-4) var(--nc-s-4) 160px; }

  /* Revelar es un editor de tres columnas: no cabe. Que se desplace dentro de
     su propia caja, no empujando la página entera, que era lo que encimaba la
     barra de arriba. Revelar de todos modos necesita el backend de la Mac. */
  .app-shell { overflow-x: auto; grid-template-columns: 170px minmax(300px, 1fr) 260px; min-width: 0; }
  .app-shell > * { min-width: 0; }
  .filmstrip-panel { position: sticky; left: 0; z-index: 1; }
}

@media (max-width: 600px) {
  /* dos fotos por fila: una sola columna obliga a barrer el pulgar de más.
     Fijas, no auto-fill: aquí el zoom no se ve, así que no hay nada que ajustar. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nc-s-3); }
  .card .sub { font-size: 10px; }
  .results-count { font-size: var(--nc-fs-1); }
  .ver-fila--zoom { display: none; }   /* dos fotos por fila, fijas: no hay tamaño que ajustar */
  /* La barra en dos renglones ordenados: buscar arriba, ordenar y «Ver» abajo. */
  .results-bar { flex-wrap: wrap; row-gap: var(--nc-s-2); }
  /* el buscador se queda con su renglón (junto a «Filtros»); ordenar y «Ver» bajan al segundo */
  .results-bar .search-field { flex: 1 1 calc(100% - 130px); min-width: 0; max-width: none; }
  .results-bar .search-field .nc-kbd { display: none; }   /* «/» es un atajo de teclado: en el teléfono no hay */
  .results-bar .nc-bar__spacer { display: none; }
  .results-bar .orden-caja { flex: 1 1 auto; }
  .results-bar .nc-btn, .results-bar .orden-caja, .results-bar .orden-caja select, .results-bar .search-field { min-height: 44px; height: 44px; }
  .results-bar .search-field input { font-size: 16px; }   /* con menos, iOS hace zoom al tocar el campo */
  .ver-fila { padding: 6px 0; }
  .estado-busqueda .est-sep { display: none; }            /* al envolver se quedaba un «·» colgando al final del renglón */
  .ver-panel { position: fixed; left: var(--nc-s-4); right: var(--nc-s-4); top: auto; width: auto; margin-top: 6px; }
  .estado-busqueda .nc-chip, .estado-busqueda .est-link { min-height: 44px; }
  .estado-busqueda .est-izq, .estado-busqueda .est-fin { min-height: 44px; }
  .nc-tray { padding: var(--nc-s-3) var(--nc-s-4); }
  .nc-tray__count { order: -1; }
  .nc-tray .nc-check { order: -1; }
  .nc-tray [data-exp="md"], .nc-tray [data-exp="csv"] { display: none; }
}

/* Sin hover no se descubre nada: en pantallas táctiles el check de la tarjeta
 * y el botón de quitar de la biblioteca se quedan puestos. */
@media (hover: none) {
  .pick { opacity: .5; }
  .filmstrip .thumb .thumb-quitar { opacity: .7; }
}

/* --- Canvas fuera de la Mac ----------------------------------------------------
 * En el sitio publicado no hay motor de revelado: se esconden la biblioteca, los
 * ajustes y la pantalla de importar, y queda el cartel que dice dónde se revela. */
body.sin-editor .filmstrip-panel,
body.sin-editor .controls-panel,
body.sin-editor #empty-state { display: none !important; }
body.sin-editor .app-shell { grid-template-columns: minmax(0, 1fr); }
/* Guardar ajuste y Exportar son del editor, y «Procesamiento local» aquí sería
 * mentira: el procesamiento pasa en la Mac, no en el servidor. */
body.sin-editor .editor-only,
.canvas-remoto { max-width: 460px; background: var(--nc-surface-1); }
.canvas-remoto code { padding: 2px 6px; border-radius: var(--nc-r-xs); background: var(--nc-inset); color: var(--nc-text); font-family: var(--nc-font-mono); }

/* --- Canvas · editor de composición --------------------------------------------
 * El lienzo se escala con transform para el zoom, así que todo lo que deba medir
 * igual en pantalla (los tiradores, el borde de selección) se compensa con
 * --inversa. Las coordenadas de las capas son siempre las de exportación. */
.canvas-shell { min-height: 0; }
.cv-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 226px 48px minmax(0, 1fr) 288px; }
/* Aire alrededor del marco para poder empujarlo con la mano, como en Figma, sin que se pierda de vista.
   No es un lienzo infinito: es lo justo para acomodarse. */
.cv-area { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; overflow: auto; scrollbar-width: none; background-color: var(--nc-inset); background-image: linear-gradient(var(--nc-overlay) 1px, transparent 1px), linear-gradient(90deg, var(--nc-overlay) 1px, transparent 1px); background-size: 32px 32px; }
/* El marco ya no recorta: recorta `.cv-capas-clip`, que lleva dentro las capas. Si recortara el marco,
   los tiradores de un objeto que asoma por la orilla se perderían justo cuando hacen falta. */
/* El margen es el aire por el que se puede empujar el lienzo con la mano. Tiene que ser margen y no
   relleno del área: así el contenido mide más que la ventana y hay de dónde correr, también cuando el
   diseño cabe entero. */
/* El margen es el aire por el que se empuja el lienzo con la mano, y es grande a propósito: con un
   margen chico la mano choca con una pared a los dos centímetros, que es justo lo que se siente mal.
   Con casi media pantalla por lado, el marco se puede correr hasta la orilla, como en Figma. */
.cv-marco { position: relative; margin: 45vh 45vw; box-shadow: var(--nc-shadow-3), 0 0 0 1px var(--nc-line-strong); }
.cv-capas-clip { position: absolute; inset: 0; overflow: hidden; }
.cv-marco.is-dragover { box-shadow: var(--nc-shadow-3), 0 0 0 2px var(--nc-accent); }
.cv-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; }
/* Sin user-select, shift+clic sobre una capa hacía lo que hace en cualquier
 * página: extender la selección de TEXTO del navegador desde el último clic.
 * Esa selección cruza todas las capas de texto y tiñe los logos, y se veía
 * igual a «se eligió todo» aunque Canvas solo hubiera sumado una capa. La capa
 * que se está escribiendo sí necesita selección, por eso se devuelve abajo. */
.cv-capa { position: absolute; cursor: grab; touch-action: none; overflow: hidden;
           -webkit-user-select: none; user-select: none; }
.cv-capa.is-editando, .cv-capa.is-editando * { -webkit-user-select: text; user-select: text; }
/* la imagen es el relleno del marco: su tamaño lo pone el encuadre, y lo que
   sobresale lo recorta el marco */
.cv-capa img { display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
body.cv-moviendo, body.cv-moviendo .cv-capa { cursor: grabbing; user-select: none; }
.cv-seleccion { position: absolute; pointer-events: none; outline: calc(1px * var(--inversa, 1)) solid var(--nc-accent); outline-offset: 0; }
/* Los nodos van blancos con aro de acento: sobre una foto oscura un cuadrito
   morado desaparece, y sobre una clara uno blanco solo. Los dos juntos se ven
   contra cualquier cosa. Crecen al pasar el puntero para que se sepa cuál se va
   a agarrar antes de apretar. */
.cv-tirador { position: absolute; width: calc(11px * var(--inversa, 1)); height: calc(11px * var(--inversa, 1));
  background: #fff; border: calc(2px * var(--inversa, 1)) solid var(--nc-accent);
  border-radius: calc(3px * var(--inversa, 1)); pointer-events: auto;
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.45); transition: transform .08s ease, background .08s ease; }
.cv-tirador:hover { background: var(--nc-accent); transform: scale(1.35); }
.cv-tirador--lado:hover { transform: scale(1.35); }
.cv-tirador--lado[data-esquina="n"]:hover, .cv-tirador--lado[data-esquina="s"]:hover { transform: translateX(-50%) scale(1.35); }
.cv-tirador--lado[data-esquina="w"]:hover, .cv-tirador--lado[data-esquina="e"]:hover { transform: translateY(-50%) scale(1.35); }
.cv-tirador:active { background: var(--nc-accent); }
.cv-tirador[data-esquina="nw"] { left: calc(-6px * var(--inversa, 1)); top: calc(-6px * var(--inversa, 1)); cursor: nwse-resize; }
.cv-tirador[data-esquina="ne"] { right: calc(-6px * var(--inversa, 1)); top: calc(-6px * var(--inversa, 1)); cursor: nesw-resize; }
.cv-tirador[data-esquina="sw"] { left: calc(-6px * var(--inversa, 1)); bottom: calc(-6px * var(--inversa, 1)); cursor: nesw-resize; }
.cv-tirador[data-esquina="se"] { right: calc(-6px * var(--inversa, 1)); bottom: calc(-6px * var(--inversa, 1)); cursor: nwse-resize; }
.cv-pista { position: absolute; left: 0; right: 0; bottom: var(--nc-s-3); text-align: center; pointer-events: none; }
.cv-panel { min-height: 0; overflow: auto; overflow-x: hidden; /* nunca de lado: algo que se salga 1 px lo corría con el trackpad */ background: var(--nc-surface-1); box-shadow: inset 1px 0 0 var(--nc-line); display: flex; flex-direction: column; }
.cv-panel-cuerpo { padding: var(--nc-s-4) var(--nc-s-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-4); }
/* Etiqueta a la izquierda y valor a la derecha EN LA MISMA LÍNEA, carril
   debajo: dos líneas por control en vez de tres, y una columna de números que
   se puede recorrer de un vistazo. Es como los ponen Lightroom y Camera Raw, y
   con once controles apilados la diferencia es entre leerlos y no.

   El aire de dentro (4px) tiene que ser menor que el de fuera: antes el salto
   al siguiente control eran 2px y el de dentro 8px, así que cada etiqueta se
   leía pegada al slider de arriba y no al suyo. */
.cv-ctrl { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: var(--nc-s-3); row-gap: 0; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
/* El slider lleva 8px de relleno transparente arriba y abajo para poder
   agarrarse: ese relleno YA es el aire entre la etiqueta y el carril. Sumarle
   un hueco de rejilla dejaba el espacio de dentro más grande que el de fuera y
   cada etiqueta se leía pegada al control de arriba. */
.cv-ctrl output { justify-self: end; color: var(--nc-text); font-variant-numeric: tabular-nums; }
.cv-ctrl .nc-slider { grid-column: 1 / -1; }
/* El aire entre controles de revelado, que son once seguidos. */
/* El navegador mete el contenido de un <details> en una caja propia, así que el
   hueco de la rejilla solo separa el <summary> del bloque y no las filas de
   dentro. El aire va en los hijos, que sí se pueden alcanzar por el DOM. */
.cv-seccion > :not(summary) { margin-top: var(--nc-s-2); }
#cv-luz .cv-ctrl + .cv-ctrl, #cv-encuadre .cv-ctrl + .cv-ctrl { margin-top: var(--nc-s-5); }
@media (max-width: 860px) {
  .cv-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cv-panel { max-height: 42vh; box-shadow: inset 0 1px 0 var(--nc-line); }
  .cv-area { padding: var(--nc-s-4); }
}

/* lista de capas: arriba lo que está al frente, con su seguro */
/* La columna va declarada `minmax(0, 1fr)` por lo mismo que las secciones del panel: en automático la
   rejilla se ensancha hasta lo que mida su contenido, y el nombre de una foto del Archivo mide 860px
   en una línea, así que una columna de 180 salía con barra horizontal en vez de cortar el nombre. */
.cv-lista { margin: 0; padding: var(--nc-s-2) var(--nc-s-3); list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 34vh; overflow: auto; box-shadow: inset 0 -1px 0 var(--nc-line); }
.cv-item { display: flex; align-items: center; gap: var(--nc-s-2); padding: 4px 6px; border-radius: var(--nc-r-sm); cursor: pointer; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.cv-item:hover { background: var(--nc-raise); color: var(--nc-text); }
.cv-item.is-sel { background: var(--nc-accent-soft); color: var(--nc-text); }
.cv-item.is-bloqueada .cv-item-nombre { opacity: .55; }
.cv-item-mini { width: 20px; height: 20px; flex: none; object-fit: cover; border-radius: var(--nc-r-xs); background: var(--nc-inset); }
/* La imagen de la capa: fila con miniatura y el panel que abre (como el relleno de imagen de Figma) */
.cv-imagen { display: grid; gap: var(--nc-s-2); }
.cv-imagen__t { color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-svg__trazos { margin-left: auto; }
.cv-tz-ayuda { margin: 0; }
/* un trazo dibuja su contorno medio grosor fuera de la caja: la capa no lo recorta */
.cv-capa--trazo { overflow: visible; }
.cv-trazo { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.cv-item-mini--trazo { display: grid; place-items: center; color: #1f1f1f; background: #f4f4f2; }
.cv-item-mini--trazo svg { width: 100%; height: 100%; }
/* nodos y manijas: interfaz encima de todo, del tamaño de pantalla a cualquier zoom (canvas.js los dibuja con 1/escala) */
.cv-nodos { position: absolute; left: 0; top: 0; overflow: visible; z-index: 9999; pointer-events: none; }
.cv-nodos__linea { fill: none; stroke: var(--nc-accent); pointer-events: none; }
.cv-nodos__toque { fill: none; stroke: transparent; pointer-events: stroke; cursor: copy; }
.cv-nodos__goma { fill: none; stroke: var(--nc-accent); stroke-dasharray: 4 3; opacity: .8; pointer-events: none; }
.cv-nodos__brazo { stroke: var(--nc-accent); pointer-events: none; }
.cv-nodos__manija { fill: #fff; stroke: var(--nc-accent); pointer-events: all; cursor: move; }
.cv-nodos__nodo { fill: #fff; stroke: var(--nc-accent); pointer-events: all; cursor: move; }
.cv-nodos__nodo.is-sel { fill: var(--nc-accent); }
.cv-seleccion.is-nodos .cv-tirador { display: none; }
.cv-svg { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-2); min-height: 32px; }
.cv-svg__uno { display: flex; align-items: center; gap: var(--nc-s-2); color: var(--nc-text-2); font-size: var(--nc-fs-2); cursor: pointer; }
.cv-img-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--nc-s-3); width: 100%;
  padding: 5px; border: 0; border-radius: var(--nc-r-md); background: var(--nc-raise); box-shadow: var(--nc-edge);
  color: var(--nc-text); font: inherit; font-size: var(--nc-fs-2); text-align: left; cursor: pointer;
  transition: background var(--nc-t), box-shadow var(--nc-t); }
.cv-img-fila:hover { background: var(--nc-raise-hover); }
.cv-img-fila[aria-expanded="true"] { box-shadow: var(--nc-edge), 0 0 0 1.5px var(--nc-accent); }
.cv-img-fila__mini { width: 36px; height: 36px; border-radius: var(--nc-r-sm); object-fit: cover; background: var(--nc-inset); display: block; }
.cv-img-fila__mini.is-vacia { background: repeating-conic-gradient(var(--nc-raise) 0 25%, var(--nc-inset) 0 50%) 0 0 / 10px 10px; }
.cv-img-fila__nom { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-img-pop { position: fixed; z-index: 60; width: 296px; max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--nc-surface-2, var(--nc-surface-1)); border-radius: var(--nc-r-lg); box-shadow: var(--nc-edge), var(--nc-shadow-3);
  display: grid; transform-origin: right top; transition: opacity var(--nc-t), transform var(--nc-t); }
.cv-img-pop[hidden] { display: grid; opacity: 0; transform: translateX(6px) scale(.98); pointer-events: none; visibility: hidden; }
.cv-img-pop__cab { display: flex; align-items: center; justify-content: space-between; padding: var(--nc-s-3) var(--nc-s-3) var(--nc-s-3) var(--nc-s-4);
  box-shadow: inset 0 -1px 0 var(--nc-line); font-size: var(--nc-fs-2); font-weight: 600; }
.cv-img-pop__cuerpo { padding: var(--nc-s-4); display: grid; gap: var(--nc-s-4); }
.cv-img-pop__cuerpo[hidden] { display: none; }
.cv-img-modo { width: 100%; }
.cv-img-modo .nc-segmented__item { flex: 1; height: 30px; padding: 0 8px; font-size: var(--nc-fs-2); }
.cv-img-grande { position: relative; border-radius: var(--nc-r-md); overflow: hidden; max-height: 320px;
  background: repeating-conic-gradient(var(--nc-raise) 0 25%, var(--nc-inset) 0 50%) 0 0 / 14px 14px; }
.cv-img-grande img { width: 100%; height: 100%; display: block; }
.cv-img-grande.is-vacia img { visibility: hidden; }
.cv-img-grande__cambiar { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgb(0 0 0 / .42); color: #fff; font: 600 var(--nc-fs-2) var(--nc-font); opacity: 0; transition: opacity var(--nc-t); }
.cv-img-grande:hover .cv-img-grande__cambiar, .cv-img-grande__cambiar:focus-visible, .cv-img-grande.is-vacia .cv-img-grande__cambiar { opacity: 1; }
.cv-img-grande__cambiar span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--nc-r-pill); background: rgb(0 0 0 / .55); }
.cv-img-res { margin: 0; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-img-pop .cv-sec-fila .nc-btn { justify-content: center; }
.cv-img-encima { position: relative; display: grid; gap: var(--nc-s-2); }
.cv-img-encima__t { display: flex; align-items: center; justify-content: space-between; font-size: var(--nc-fs-2); font-weight: 600; color: var(--nc-text-2); }
.cv-menu-fijo { position: fixed; z-index: 80; min-width: 200px; margin: 0; list-style: none; }
.cv-menu-fijo li { list-style: none; }
.cv-img-bloque { display: grid; gap: var(--nc-s-2); }
.cv-img-ctrl { display: grid; gap: var(--nc-s-2); }
.cv-img-ctrl:empty, #cv-masc-lista:empty, #cv-encima-lista:empty { display: none; }
.cv-img-pop #cv-retocar { justify-content: center; }
.cv-masc-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 2px; padding: 2px 2px 2px 8px;
  border-radius: var(--nc-r-sm); font-size: var(--nc-fs-2); color: var(--nc-text-2); cursor: pointer; }
.cv-masc-fila:hover { background: var(--nc-raise); }
.cv-masc-fila.is-activa, .cv-encima-fila.is-activa { background: var(--nc-accent-soft); color: var(--nc-text); }
.cv-masc-fila.is-oculta > span, .cv-encima-fila.is-oculta .cv-encima-nom, .cv-encima-fila.is-oculta .cv-encima-muestra { opacity: .45; }
.cv-masc-fila [aria-pressed="true"] { color: var(--nc-accent); }
.cv-encima-fila--efecto { border-radius: var(--nc-r-sm); cursor: pointer; }
.cv-encima-nom { grid-column: span 2; font-size: var(--nc-fs-2); color: var(--nc-text-2); }
.cv-encima-blur { background: linear-gradient(90deg, #8a8a8a, #3d3d3d); filter: blur(1.5px); }
.cv-dato { display: flex; justify-content: space-between; font-size: var(--nc-fs-1); color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.cv-dato b { color: var(--nc-text-2); font-weight: 500; }

/* La foto con su desenfoque va encima de la original, que queda debajo sin verse */
.cv-capa.con-desfoto > img, .cv-capa.con-desfoto > .cv-render { visibility: hidden; }
.cv-borrosa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* Luz y color, plegable bajo la fila Imagen */
.cv-luz > summary { display: flex; align-items: center; justify-content: space-between; }
/* Luz y color queda cerrada entre dos líneas, con aire arriba y abajo: plegada, lo de debajo (posición y
   tamaño) no debe leerse como parte de ella */
.cv-seccion.cv-luz { padding-top: var(--nc-s-3); padding-bottom: var(--nc-s-1); }
.cv-punto-mod { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--nc-accent); vertical-align: middle; }
.cv-luz [hidden] { display: none !important; }

/* Los puntos de máscaras y desenfoques, sobre el lienzo (tamaño fijo en pantalla aunque cambie el zoom) */
.cv-asas { position: absolute; inset: 0; z-index: 9999; pointer-events: none; overflow: visible; }
.cv-asas svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.cv-asas line { stroke: #fff; stroke-opacity: .9; stroke-width: calc(1.5px * var(--inversa, 1)); }
.cv-asa { position: absolute; width: calc(12px * var(--inversa, 1)); height: calc(12px * var(--inversa, 1)); transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none; background: #fff;
  box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) var(--nc-accent), 0 1px 3px rgb(0 0 0 / .4); }
.cv-asa--fin { background: var(--nc-accent); box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) #fff, 0 1px 3px rgb(0 0 0 / .4); }
.cv-asa:active { cursor: grabbing; }
/* Manijas de formas y zonas (8 oct 2026): contorno, estirar, girar y suavidad, como en LightCraft, y con
 * respuesta al pasar el ratón, que allá no tienen. Todo mide lo mismo en pantalla a cualquier zoom. */
.cv-asas ellipse { fill: none; }
/* la regla .cv-asa de las paradas del degradado (más abajo) se metía con estas: aquí manda la del lienzo */
.cv-asas .cv-asa { width: calc(12px * var(--inversa, 1)); height: calc(12px * var(--inversa, 1)); border: 0; background: #fff; background-image: none;
  box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) var(--nc-accent), 0 1px 3px rgb(0 0 0 / .4); }
.cv-asas .cv-asa--fin { background: var(--nc-accent); box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) #fff, 0 1px 3px rgb(0 0 0 / .4); }
.cv-asas .cv-asas__borde { stroke: #fff; stroke-opacity: .9; stroke-width: calc(1.5px * var(--inversa, 1)); filter: drop-shadow(0 0 1px rgb(0 0 0 / .6)); }
.cv-asas .cv-asas__borde--fin { stroke-opacity: .4; }
.cv-asas .cv-asas__suave { stroke: #fff; stroke-opacity: .55; stroke-width: calc(1px * var(--inversa, 1)); stroke-dasharray: calc(4px * var(--inversa, 1)) calc(4px * var(--inversa, 1)); }
.cv-asas .cv-asas__tallo { stroke-opacity: .7; }
.cv-asas .cv-asa { transition: transform 120ms var(--nc-ease, ease), box-shadow 120ms var(--nc-ease, ease); }
.cv-asas .cv-asa:hover { transform: translate(-50%, -50%) scale(1.35); }
.cv-asas .cv-asa--borde, .cv-asas .cv-asa--suave { width: calc(9px * var(--inversa, 1)); height: calc(9px * var(--inversa, 1)); background: #fff; }
.cv-asas .cv-asa--suave { background: transparent; box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) #fff, 0 1px 3px rgb(0 0 0 / .4); cursor: ns-resize; }
.cv-asas .cv-asa--giro { width: calc(10px * var(--inversa, 1)); height: calc(10px * var(--inversa, 1)); background: var(--nc-accent); box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) #fff, 0 1px 3px rgb(0 0 0 / .4); cursor: alias; }
.cv-asas .cv-asa--medio { width: calc(10px * var(--inversa, 1)); height: calc(10px * var(--inversa, 1)); border-radius: calc(3px * var(--inversa, 1)); cursor: move; }
.cv-asas .cv-asa--pin { width: calc(11px * var(--inversa, 1)); height: calc(11px * var(--inversa, 1)); background: var(--nc-text-3); box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) #fff, 0 1px 3px rgb(0 0 0 / .4); cursor: pointer; }
.cv-asas .cv-asa--pin:hover { background: var(--nc-accent); }
.cv-zona-ver { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cv-dibujando, .cv-dibujando * { cursor: crosshair !important; }
.cv-zona-pista { margin: 0 0 var(--nc-s-2); color: var(--nc-text-2); font-size: var(--nc-fs-1); }
.cv-zona-verla { margin-bottom: var(--nc-s-2); }
.cv-zona-verla kbd { margin-left: auto; padding: 0 5px; border-radius: var(--nc-r-xs); background: var(--nc-overlay); color: var(--nc-text-3); font: var(--nc-fs-1) var(--nc-font-mono, ui-monospace, monospace); }
.cv-asa__angulo { position: absolute; transform: translate(calc(10px * var(--inversa, 1)), calc(-26px * var(--inversa, 1))); padding: calc(4px * var(--inversa, 1)) calc(6px * var(--inversa, 1));
  border-radius: calc(4px * var(--inversa, 1)); background: rgb(0 0 0 / .7); color: #fff; font: 600 calc(11px * var(--inversa, 1))/1 var(--nc-font-mono, ui-monospace, monospace); white-space: nowrap; pointer-events: none; }
.cv-encima-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px auto auto; align-items: center; gap: 6px; }
.cv-encima-fila + .cv-encima-fila { margin-top: 6px; }
.cv-encima-muestra { position: relative; display: inline-block; width: 22px; height: 22px; flex: none; border-radius: var(--nc-r-xs);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); cursor: pointer; }
.cv-encima-muestra input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cv-encima-menu .cv-encima-muestra { margin-right: var(--nc-s-2); cursor: inherit; }
.cv-encima-op input { width: 100%; }
.cv-img-accesos { display: grid; gap: 2px; }
.cv-img-acceso { display: flex; align-items: center; gap: var(--nc-s-2); width: 100%; padding: 8px; border: 0; border-radius: var(--nc-r-sm);
  background: transparent; color: var(--nc-text-2); font: var(--nc-fs-2) var(--nc-font); text-align: left; cursor: pointer; }
.cv-img-acceso:hover { background: var(--nc-raise); color: var(--nc-text); }
.cv-img-accesos .cv-img-acceso .nc-i:last-child { margin-left: auto; color: var(--nc-text-3); }
.cv-img-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 340px; overflow: auto; }
.cv-img-rejilla button { height: 84px; padding: 0; border: 0; border-radius: var(--nc-r-sm); overflow: hidden; background: var(--nc-inset); cursor: pointer; }
.cv-img-rejilla img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .cv-img-pop, .cv-img-fila, .cv-img-grande__cambiar { transition: none; } .cv-img-pop[hidden] { transform: none; } }
.cv-item-mini--texto { display: grid; place-items: center; color: var(--nc-text-3); }
.cv-item.is-sel .cv-item-mini--texto { color: var(--nc-text-2); }
.cv-exportar__menu { list-style: none; }
.cv-exportar__menu .cv-exportar__medida { white-space: nowrap; padding-left: var(--nc-s-4); }
.cv-exportar__menu .nc-menu__shortcut { margin-left: auto; padding-left: var(--nc-s-4); color: var(--nc-text-3); white-space: nowrap; }
.cv-exportar__menu [data-escala]::before { content: ''; flex: none; width: 8px; height: 8px; margin-right: var(--nc-s-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--nc-text-3); }
.cv-exportar__menu [data-escala][aria-checked="true"]::before { background: var(--nc-accent); box-shadow: none; }
.cv-item-nombre { flex: 1; min-width: 0; }
.cv-item-ojo, .cv-item-seguro { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--nc-r-xs); background: transparent; color: var(--nc-text-3); cursor: pointer; }
.cv-item-ojo:hover, .cv-item-seguro:hover { background: var(--nc-raise-hover); color: var(--nc-text); }
.cv-item-seguro[aria-pressed="true"] { color: var(--nc-accent-hover); }
/* Una capa con seguro deja pasar el clic a la de abajo, como en Figma. Antes se
 * lo comía sin hacer nada con él: un velo de lienzo completo con seguro seguía
 * tapando la foto de fondo, y no había forma de agarrarla en el lienzo. Se
 * sigue eligiendo, y se le quita el seguro, desde la lista de capas. */
.cv-capa.is-bloqueada { cursor: default; pointer-events: none; }

.cv-render { position: absolute; left: 0; top: 0; display: block; }
/* Los títulos de grupo iban en acento y a 3.70:1 sobre su fondo. El acento ya
   marca herramienta activa, badge y botón primario; gastarlo en decoración lo
   deja sin significado. Ahora van igual que los otros títulos de sección, y en
   --nc-text-2, que da 7.21:1. */
.cv-grupo { display: flex; align-items: center; justify-content: space-between; margin-top: var(--nc-s-2); color: var(--nc-text-2); font-size: var(--nc-fs-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cv-grupo .nc-btn { letter-spacing: 0; text-transform: none; font-weight: 500; }
.cv-panel-cuerpo { gap: var(--nc-s-3); }

/* recorte del lienzo: lo de fuera se apaga, el marco se arrastra */
.cv-recorte { position: absolute; z-index: 9998; cursor: move; outline: calc(1px * var(--inversa, 1)) solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); }
.cv-recorte .cv-tirador { background: #fff; }
.cv-barra-recorte { background: var(--nc-surface-2); }
/* capa de gradiente: la pinta el CSS, sin imagen dentro */
.cv-capa--css { background-repeat: no-repeat; background-size: 100% 100%; }
.cv-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nc-s-2); }
.cv-preset { height: 34px; border: 0; border-radius: var(--nc-r-sm); box-shadow: var(--nc-edge); cursor: pointer; }
.cv-preset:hover { box-shadow: var(--nc-edge), 0 0 0 2px var(--nc-accent); }
.cv-css-caja { display: grid; gap: var(--nc-s-3); }
.cv-css-caja textarea { font-family: var(--nc-font-mono); font-size: var(--nc-fs-1); line-height: 1.5; }
.cv-css-caja .nc-caption code { color: var(--nc-text); font-family: var(--nc-font-mono); }

/* --- Canvas: las herramientas viven en el panel, como en Figma ---------------- */
/* La columna se declara `minmax(0, 1fr)` y no se deja en automático: una rejilla en automático se
   ensancha hasta donde mida su contenido, así que el nombre de una foto («2025-12-31 Shots Puerto
   Cancún Last Challenge…», 750px en una línea) estiraba la sección a 800px dentro de un panel de 264
   y el `nc-truncate` nunca llegaba a cortar, porque nada lo obligaba a caber. Con el 0 de mínimo, la
   sección mide lo que mide el panel y el corte con puntos suspensivos sí ocurre. */
.cv-sec { padding: var(--nc-s-4) var(--nc-s-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-3); box-shadow: inset 0 -1px 0 var(--nc-line); }
.cv-sec--capas { padding-bottom: var(--nc-s-2); }
/* Las piezas guardadas: rejilla de miniaturas. Dos por fila entran bien en el
   cajón y se reconocen de un vistazo, que es para lo que existe la lista. */
.cv-piezas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-2); }
.cv-pieza { display: grid; gap: 4px; padding: var(--nc-s-2); border: 0; border-radius: var(--nc-r-sm); background: var(--nc-surface-2); box-shadow: var(--nc-edge); color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-1); text-align: left; cursor: pointer; }
.cv-pieza:hover { box-shadow: var(--nc-edge), 0 0 0 2px var(--nc-accent); color: var(--nc-text); }
.cv-pieza[aria-current="true"] { box-shadow: var(--nc-edge), 0 0 0 2px var(--nc-accent); }
.cv-pieza-caja { position: relative; display: grid; }
.cv-pieza-caja .cv-pieza { width: 100%; }
/* Borrar se ve al pasar por encima, y con dedo siempre: ahí no hay «encima». */
.cv-pieza-borrar { position: absolute; top: var(--nc-s-2); right: var(--nc-s-2); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--nc-r-sm); background: var(--nc-overlay); color: var(--nc-text-2); opacity: 0; cursor: pointer; }
.cv-pieza-caja:hover .cv-pieza-borrar, .cv-pieza-borrar:focus-visible { opacity: 1; }
.cv-pieza-borrar:hover { background: var(--nc-danger-soft); color: var(--nc-danger); }
@media (pointer: coarse) {
  .cv-pieza-borrar { opacity: 1; width: 44px; height: 44px; }
}
.cv-pieza-mini { display: block; width: 100%; border-radius: var(--nc-r-xs); background: var(--nc-inset); object-fit: contain; }
.cv-pieza-nombre { font-size: var(--nc-fs-2); color: var(--nc-text); }

/* Bajo el botón de Guardar: qué pieza es y cuándo se guardó. Chico y apagado:
   es un dato de estado, no un mensaje. */
.cv-pieza-estado { margin: var(--nc-s-2) 0 0; color: var(--nc-text-2); font-size: var(--nc-fs-1); line-height: 1.35; }
.cv-pieza-estado b { color: var(--nc-text); font-weight: 650; }

.cv-sec-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-2); color: var(--nc-text-2); font-size: var(--nc-fs-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cv-sec-cab .nc-truncate { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 650; letter-spacing: 0; text-transform: none; }
.cv-sec-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-2); }
.cv-recorte-ctrl { display: grid; gap: var(--nc-s-2); padding: var(--nc-s-3); border-radius: var(--nc-r-md); background: var(--nc-surface-2); box-shadow: var(--nc-edge); }
.cv-recorte-ctrl .nc-row .nc-btn { flex: 1; }
.cv-pie { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) var(--nc-s-4); background: var(--nc-surface-2); box-shadow: inset 0 1px 0 var(--nc-line); }
.cv-lista { padding: var(--nc-s-2) var(--nc-s-3); max-height: none; box-shadow: none; }
.cv-panel-cuerpo { padding: 0; }
/* el zoom flota sobre el lienzo */
.cv-zoombar { position: absolute; left: 50%; bottom: var(--nc-s-4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--nc-s-2); padding: 4px 6px; border-radius: var(--nc-r-pill); background: var(--nc-glass); box-shadow: var(--nc-edge), var(--nc-shadow-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.cv-zoombar #cv-zoom { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .cv-pie { position: static; } .cv-lista { max-height: 22vh; } }

/* la columna de capas, a la izquierda del lienzo */
.cv-capas { min-height: 0; overflow: auto; display: flex; flex-direction: column; background: var(--nc-surface-1); box-shadow: inset -1px 0 0 var(--nc-line); }
.cv-capas .cv-sec-cab { padding: var(--nc-s-4) var(--nc-s-4) var(--nc-s-2); }
.cv-marca-abrir { flex: 0 0 auto; display: flex; align-items: center; gap: var(--nc-s-2); width: 100%; padding: var(--nc-s-3) var(--nc-s-4); border: 0; background: none; color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-2); text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 var(--nc-line); }
.cv-marca-abrir:hover { background: var(--nc-surface-2); color: var(--nc-text); }
.cv-marca-abrir:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
.cv-marca-abrir[aria-pressed="true"] { background: var(--nc-surface-2); color: var(--nc-accent); }
.cv-marca-abrir .nc-i { flex: 0 0 auto; }
@media (max-width: 1100px) { .cv-cuerpo { grid-template-columns: 180px 44px minmax(0, 1fr) 264px; } }
@media (max-width: 860px) {
  .cv-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .cv-capas { max-height: 22vh; box-shadow: inset 0 -1px 0 var(--nc-line); }
  .cv-capas .cv-lista { display: flex; overflow-x: auto; }
  .cv-capas .cv-item { flex: 0 0 auto; }
}

/* el chip de identidad abre el menú de la sesión */
button.quien { border: 0; background: transparent; padding: 4px 6px; border-radius: var(--nc-r-pill); cursor: pointer; font: inherit; text-align: left; transition: background var(--nc-t-fast); }
button.quien:hover, button.quien[aria-expanded="true"] { background: var(--nc-raise); }
button.quien:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }

/* --- Ideas en teléfono ---------------------------------------------------
 * En pantalla grande cada idea es una tarjeta con la imagen del link arriba, en
 * cuadrícula. En un teléfono esa tarjeta ocupaba la pantalla entera y solo se
 * veía una idea, así que aquí se voltea a lista: miniatura al lado, la idea
 * arriba a la derecha y las etiquetas debajo. La miniatura abarca las dos filas
 * para que no quede un hueco a la izquierda del texto. */
@media (max-width: 600px) {
  /* la lista va a sangre: el marco de la columna dentro del tablero solo
     gastaba borde y sangría en una pantalla que no sobra */
  #ideas-shell { overflow-y: auto; }
  #ideas-shell .tablero { display: block; overflow: visible; padding: 0 0 var(--nc-s-6); }
  #ideas-shell .nc-board__col { max-height: none; flex: initial; width: 100%; background: none; box-shadow: none; border-radius: 0; }
  #ideas-shell .nc-board__col-head { display: none; }
  #ideas-shell .nc-board__cards { overflow: visible; padding: 0; }
  #ideas-shell .tablero[data-ver="no"] .nc-board__col[data-estado="si"],
  #ideas-shell .tablero[data-ver="si"] .nc-board__col[data-estado="no"] { display: none; }

  #ideas-shell .nc-board__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  #ideas-shell .nc-card {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: var(--nc-s-3); row-gap: var(--nc-s-2);
    align-content: start;
    padding: var(--nc-s-4) var(--nc-s-4);
    border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--nc-line);
  }
  #ideas-shell .nc-card .nc-linkcard { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
  #ideas-shell .nc-card .nc-linkcard__img { aspect-ratio: 1; }
  #ideas-shell .nc-card .nc-linkcard__body { display: none; }
  #ideas-shell .nc-card .nc-linkcard.is-loading { padding: 0; min-height: 84px; }
  #ideas-shell .nc-card__title { grid-column: 2; grid-row: 1; -webkit-line-clamp: 3; font-size: var(--nc-fs-3); color: var(--nc-text); }
  #ideas-shell .nc-card__labels { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  #ideas-shell .nc-card__labels .nc-badge { font-size: 10px; height: 18px; }
  #ideas-shell .nc-card__note { display: none; }

  /* la cabecera cabía en un renglón y ocupaba tres */
  #ideas-shell .nc-bar { padding: var(--nc-s-2) var(--nc-s-4); gap: var(--nc-s-2); }
  #ideas-shell .nc-bar__title { display: none; }
  #ideas-shell #ideas-recargar { order: 3; }

  /* Dedos, no punteros: 44px es el mínimo que Apple y WCAG piden para algo
     que se toca. Los controles de 28 y 32 que había se fallan seguido. */
  #ideas-shell .nc-bar .nc-btn,
  #ideas-shell .nc-bar .nc-segmented__item { min-height: 44px; }
  #ideas-shell .nc-bar .nc-segmented { padding: 0; }

  /* El texto de la idea es el contenido, no un pie de foto: 13px obliga a
     acercarse el teléfono. */
  #ideas-shell .nc-card__title { font-size: 15px; line-height: 1.4; }

  /* «Nueva idea» vive donde llega el pulgar, no en la esquina de arriba. */
  #ideas-nueva {
    position: fixed; right: var(--nc-s-4); bottom: var(--nc-s-4); z-index: var(--nc-z-dock);
    height: 52px; padding: 0 var(--nc-s-5); border-radius: var(--nc-r-pill);
    box-shadow: var(--nc-shadow-3);
  }
  #ideas-shell .nc-board__cards { padding-bottom: 76px; }
}

/* el selector de columna de Ideas solo tiene sentido cuando falta ancho */
.ideas-ver { display: none; }
@media (max-width: 600px) { .ideas-ver { display: inline-flex; } }

/* una opción de faceta que ya no suma nada: apagada, pero sigue ahí */
/* Regla: lo que está en 0 no sale. Una opción marcada se queda aunque llegue a 0, para poder quitarla. */
.nc-facet__opt.is-vacia { display: none; }

/* --- Canvas: marca del cliente y plantillas ------------------------------------ */
.cv-colores { display: flex; flex-wrap: wrap; gap: var(--nc-s-2); }
.cv-color { width: 30px; height: 30px; border: 0; border-radius: var(--nc-r-sm); box-shadow: var(--nc-edge); cursor: pointer; }
.cv-color:hover { box-shadow: var(--nc-edge), 0 0 0 2px var(--nc-accent); }
.cv-logos { display: flex; flex-wrap: wrap; gap: var(--nc-s-2); }
.cv-logo { width: 62px; height: 40px; display: grid; place-items: center; padding: 4px; border: 0; border-radius: var(--nc-r-sm); background: var(--nc-inset); box-shadow: inset 0 0 0 1px var(--nc-line); cursor: pointer; }
.cv-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cv-logo:hover { box-shadow: inset 0 0 0 1px var(--nc-accent); }
.cv-marca-alta .nc-btn { justify-content: center; cursor: pointer; }
.cv-plantillas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-2); }
.cv-plantilla { display: grid; gap: 4px; padding: var(--nc-s-2); border: 0; border-radius: var(--nc-r-sm); background: var(--nc-surface-2); box-shadow: var(--nc-edge); color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-1); text-align: left; cursor: pointer; }
.cv-plantilla:hover { box-shadow: var(--nc-edge), 0 0 0 2px var(--nc-accent); color: var(--nc-text); }
.cv-plantilla-mini { display: block; width: 100%; border-radius: var(--nc-r-xs); background: var(--nc-inset); }
.cv-plantilla-mini { overflow: hidden; }
.cv-plantilla-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-plantilla-mini.is-sin-previa { background: repeating-linear-gradient(45deg, var(--nc-inset), var(--nc-inset) 8px, var(--nc-surface-2) 8px, var(--nc-surface-2) 16px); }
.cv-plantilla-nombre { font-size: var(--nc-fs-2); color: var(--nc-text); }
/* un hueco es un marco que espera foto, no una capa vacía sin explicación */
.cv-capa.cv-hueco { box-shadow: inset 0 0 0 2px var(--nc-accent); background: var(--nc-accent-soft); }
.cv-capa.cv-hueco::after { content: attr(data-etiqueta); position: absolute; inset: 0; display: grid; place-items: center; color: var(--nc-text); font-size: 13px; font-weight: 650; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cv-capa.cv-hueco img { display: none; }

/* modo encuadre: el marco se marca y el cursor dice que ahí se mueve la foto */
/* El anillo del encuadre se compensa con el zoom, como los tiradores: a 42%
   los 2px se pintaban a 0.84 y no se veía. El velo de fuera se recortaba contra
   el marco, así que el modo no tenía ninguna señal en pantalla; ahora el aro es
   la señal, y la capa sube por encima del resto desde el JS. */
.cv-capa.is-encuadre { box-shadow: inset 0 0 0 calc(2px * var(--inversa, 1)) var(--nc-accent),
  inset 0 0 0 calc(5px * var(--inversa, 1)) rgba(0,0,0,.45); cursor: move; }
/* Ocho iconos en dos grupos: los seis de pegar a un borde, y los dos de
   repartir, separados porque hacen otra cosa y piden tres capas. */
/* Ocho en una sola fila, repartidos a partes iguales: en flex con separador no
   cabían en los 264 px útiles del panel y el último saltaba de línea, que se
   lee como un error. La raya entre pegar y repartir va de borde, no de hueco. */
.cv-alinear { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; align-items: center; }
.cv-alinear-sep { display: none; }
.cv-alinear [data-al="repartir-h"] { border-left: 1px solid var(--nc-line); border-radius: 0; margin-left: 3px; padding-left: 3px; }
.cv-alinear .nc-btn { padding: 0; min-width: 0; font-size: 15px; }
.cv-encuadre { display: grid; gap: var(--nc-s-2); padding: var(--nc-s-3); border-radius: var(--nc-r-md); background: var(--nc-surface-2); box-shadow: var(--nc-edge); }

/* medidas exactas de la capa */
/* dos y dos: cuatro campos en línea no caben en el panel y se cortaban */
/* Cuatro campos en dos columnas, y el candado colgando de la fila de W y H:
   es lo que ata, así que vive donde ata. */
.cv-xywh { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--nc-s-2); align-items: center; }
.cv-xywh > .nc-num:nth-child(1), .cv-xywh > .nc-num:nth-child(3) { grid-column: 1; }
.cv-xywh > .nc-num:nth-child(2), .cv-xywh > .nc-num:nth-child(4) { grid-column: 2; }
.cv-candado { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.cv-candado[aria-pressed="true"] { color: var(--nc-accent); }

/* --- Cajón de assets de la marca ----------------------------------------------
 * Se llama con un botón y se pone sobre el panel de la derecha: los assets se
 * ven grandes mientras se usan y desaparecen cuando no. */
.cv-assets { position: absolute; right: 0; top: 0; bottom: 0; z-index: var(--nc-z-dock); width: 288px; display: flex; flex-direction: column; background: var(--nc-surface-2); box-shadow: var(--nc-shadow-3), inset 1px 0 0 var(--nc-line); }
.cv-assets--izq { right: auto; left: 0; box-shadow: var(--nc-shadow-3), inset -1px 0 0 var(--nc-line); }
.cv-assets-cab { display: flex; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) var(--nc-s-4); box-shadow: inset 0 -1px 0 var(--nc-line); }
.cv-assets-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: var(--nc-s-4); display: grid; gap: var(--nc-s-3); align-content: start; }
.cv-assets-pie { display: flex; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) var(--nc-s-4); box-shadow: inset 0 1px 0 var(--nc-line); }
.cv-assets-pie .nc-btn { cursor: pointer; }
.cv-assets .cv-colores { gap: var(--nc-s-3); }
.cv-assets .cv-color { width: 44px; height: 44px; }
/* Más alto que ancho de lo que pide un logo, a propósito: en esta gaveta también
 * viven retratos verticales, y con 52 px un plano de medio cuerpo se contenía a
 * 44 px de alto y no se distinguía a quién estabas viendo. Con 64 suben a 56. */
.cv-assets .cv-logo { width: 84px; height: 64px; }
.cv-cuerpo { position: relative; }
/* El zoom vivía dentro del contenedor con scroll, así que al acercar y
   desplazarse se iba encima de la obra. Ahora la columna del lienzo es la que
   lo ancla: el scroll pasa por debajo y el control se queda quieto, como el
   zoom de Figma. */
.cv-lienzo-col { position: relative; display: grid; min-width: 0; min-height: 0; }
@media (max-width: 860px) { .cv-assets { width: 100%; } }

.cv-assets-drive { display: grid; gap: var(--nc-s-2); padding: 0 var(--nc-s-4) var(--nc-s-3); }
.cv-assets-drive .nc-btn { justify-content: center; text-decoration: none; }

/* --- La barra de herramientas --------------------------------------------------
 * Pegada al lienzo, vertical: lo que se usa en cada pieza está siempre a la
 * misma distancia del cursor, y el panel de la derecha queda libre para las
 * propiedades de lo seleccionado. */
.cv-tools { display: flex; flex-direction: column; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) 0; background: var(--nc-surface-1); box-shadow: inset -1px 0 0 var(--nc-line); }
.cv-tool { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--nc-r-md); background: transparent; color: var(--nc-text-2); cursor: pointer; transition: background var(--nc-t-fast), color var(--nc-t-fast); }
.cv-tool:hover { background: var(--nc-raise); color: var(--nc-text); }
.cv-tool[aria-pressed="true"] { background: var(--nc-accent); color: var(--nc-text-on-accent); box-shadow: var(--nc-edge-accent); }
.cv-tool:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.cv-tools-sep { width: 20px; height: 1px; background: var(--nc-line-strong); margin: var(--nc-s-1) 0; }
/* con la herramienta de cuadro, el lienzo dice que se puede dibujar */
.cv-marco.is-dibujando, .cv-marco.is-dibujando .cv-capa { cursor: crosshair; }

@media (max-width: 860px) {
  /* en pantalla chica la barra se acuesta arriba del lienzo */
  .cv-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .cv-tools { flex-direction: row; justify-content: center; padding: var(--nc-s-2); box-shadow: inset 0 -1px 0 var(--nc-line); }
  .cv-tools-sep { width: 1px; height: 20px; margin: 0 var(--nc-s-1); }
}

/* la capa que se está moviendo en la lista */
/* Reordenar capas arrastrando necesita quedarse el gesto entero, y eso deja la
   lista sin scroll con el dedo. En móvil la lista es una tira horizontal, así
   que ahí se devuelve el gesto al navegador: se reordena desde el escritorio y
   en el teléfono se recorre, que es lo que se hace en el teléfono. */
.cv-item { touch-action: none; }
@media (hover: none) and (pointer: coarse) { .cv-item { touch-action: pan-x pan-y; } }
.cv-item.is-moviendo { opacity: .6; background: var(--nc-accent-soft); }
.cv-lista { cursor: grab; }

/* tiradores de lado, guías del imán y marco de selección */
.cv-tirador--lado[data-esquina="n"] { left: 50%; top: calc(-6px * var(--inversa, 1)); transform: translateX(-50%); cursor: ns-resize; }
.cv-tirador--lado[data-esquina="s"] { left: 50%; bottom: calc(-6px * var(--inversa, 1)); transform: translateX(-50%); cursor: ns-resize; }
.cv-tirador--lado[data-esquina="w"] { top: 50%; left: calc(-6px * var(--inversa, 1)); transform: translateY(-50%); cursor: ew-resize; }
.cv-tirador--lado[data-esquina="e"] { top: 50%; right: calc(-6px * var(--inversa, 1)); transform: translateY(-50%); cursor: ew-resize; }
.cv-guia { position: absolute; z-index: 9999; pointer-events: none; background: #ff3d71; }
/* Carrusel: los cortes van encima de las capas y debajo de la selección; el número de cada slide flota
 * sobre el lienzo y se compensa con --inversa para medir lo mismo a cualquier zoom. */
.cv-paginas { position: absolute; inset: 0; z-index: 9990; pointer-events: none; }
.cv-paginas[hidden] { display: none; }
.cv-pagina-corte { position: absolute; top: 0; bottom: 0; width: 0; border-left: calc(1px * var(--inversa, 1)) dashed rgba(97, 82, 236, .85); box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(255, 255, 255, .35); }
.cv-pagina-cab { position: absolute; bottom: 100%; display: flex; align-items: center; gap: calc(4px * var(--inversa, 1)); padding-bottom: calc(6px * var(--inversa, 1)); pointer-events: auto; font-size: calc(12px * var(--inversa, 1)); color: var(--nc-text-2); }
.cv-pagina-num { font-weight: 650; font-variant-numeric: tabular-nums; margin-right: auto; }
.cv-pagina-btn { width: calc(22px * var(--inversa, 1)); height: calc(22px * var(--inversa, 1)); padding: 0; border: 0; border-radius: calc(6px * var(--inversa, 1)); background: transparent; color: var(--nc-text-2); font: inherit; font-size: calc(15px * var(--inversa, 1)); line-height: 1; cursor: pointer; opacity: .45; }
.cv-pagina-cab:hover .cv-pagina-btn, .cv-pagina-btn:focus-visible { opacity: 1; }
.cv-pagina-btn:hover { background: var(--nc-surface-2, rgba(0, 0, 0, .08)); color: var(--nc-text); }
.cv-paginas-ctrl { display: flex; align-items: center; gap: var(--nc-s-2); margin-top: var(--nc-s-2); }
.cv-paginas-ctrl .nc-btn { min-width: 28px; font-size: 16px; }
.cv-guia--v { top: 0; bottom: 0; width: calc(1px * var(--inversa, 1)); }
.cv-guia--h { left: 0; right: 0; height: calc(1px * var(--inversa, 1)); }
.cv-marquesina { position: absolute; z-index: 9996; pointer-events: none; background: var(--nc-accent-soft); outline: calc(1px * var(--inversa, 1)) solid var(--nc-accent); }
/* Varias capas elegidas: la caja envuelve el bloque y va punteada. Las esquinas escalan el bloque
   parejo (canvas.js, `redimensionarVarias`); los lados no, que estirarían cada capa distinto. Si alguna
   lleva seguro, ningún tirador. */
.cv-seleccion.is-grupo { outline-style: dashed; outline-width: calc(2px * var(--inversa, 1)); }
.cv-seleccion.is-grupo:not(.is-escalable) .cv-tirador, .cv-seleccion.is-grupo .cv-tirador--lado { display: none; }
/* Grupos en la lista: la carpeta con su nombre y cuántas lleva, y sus capas sangradas debajo. */
.cv-item--grupo { color: var(--nc-text); }
.cv-item-plegar { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--nc-r-xs); background: transparent; color: var(--nc-text-3); cursor: pointer; }
.cv-item-plegar:hover { background: var(--nc-raise-hover); color: var(--nc-text); }
.cv-item-plegar svg { transition: transform 150ms ease-out; }
.cv-item--grupo.is-plegado .cv-item-plegar svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .cv-item-plegar svg { transition: none; } }
.cv-item-cuantas { flex: none; font-size: var(--nc-fs-1); }
.cv-item--hija { padding-left: calc(6px + 16px * var(--prof, 1)); }   /* --prof: cuántos grupos la contienen (21 oct 2026) */
.cv-item-renombrar { flex: 1; min-width: 0; height: 22px; padding: 0 6px; border: 1px solid var(--nc-accent); border-radius: var(--nc-r-xs); background: var(--nc-inset); color: var(--nc-text); font: inherit; font-size: var(--nc-fs-2); outline: none; }
/* La caja de selección ya no se recorta: va exactamente sobre el objeto, aunque asome fuera del marco.
   Recortarla a la pantalla la despegaba de la foto al mover el lienzo, y eso confunde más de lo que
   ayudaba. Para alcanzar un objeto que se fue lejos está la mano. */


/* --- El relleno de una forma -------------------------------------------------
   Color y degradado son el mismo control, así que comparten caja: cambia el
   tipo y aparecen las paradas y el ángulo. */
.cv-relleno { display: grid; gap: var(--nc-s-2); }
/* El segmentado es el de Nocturne; aquí solo se estira al ancho del panel, que
   mide 288 px y no cabe en línea. */
.cv-segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.cv-segmentado .nc-segmented__item { padding: 0 4px; }
/* La muestra, la lista de paradas y sus campos son .nc-gradient, .nc-stop-list
   y .nc-num del kit. Aquí solo queda que la fila reparta su ancho en los 256px
   del inspector, que es lo propio de esta pantalla. */
.cv-parada { grid-template-columns: auto 1fr 1fr auto; }

/* Degradado: dirección con flechas, la barra con asas que se arrastran y la parada elegida. */
.cv-dir { display: flex; align-items: center; gap: var(--nc-s-2); }
.cv-dir__rotulo, .cv-rampa__puntas, .cv-rampa__ayuda { color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-rampa { display: grid; gap: 4px; padding-inline: 9px; }
.cv-rampa__barra { position: relative; cursor: copy; }
.cv-rampa__puntas { display: flex; justify-content: space-between; margin-inline: -9px; }
.cv-rampa__ayuda { margin: 0; }
.cv-asa { position: absolute; top: 50%; width: 18px; height: 18px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%); cursor: grab; touch-action: none;
  background-image: linear-gradient(var(--cv-asa), var(--cv-asa)), repeating-conic-gradient(var(--nc-checker-1) 0% 25%, var(--nc-checker-2) 0% 50%);
  background-size: auto, 8px 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5);
  transition: width var(--nc-t-fast), height var(--nc-t-fast), box-shadow var(--nc-t-fast); }
.cv-asa:active { cursor: grabbing; }
.cv-asa[aria-pressed="true"] { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--nc-accent), 0 1px 3px rgba(0, 0, 0, .5); }
.cv-asa:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 3px; }
.cv-parada-sel { display: grid; gap: var(--nc-s-2); padding: var(--nc-s-3); border-radius: var(--nc-r-md); background: var(--nc-inset); box-shadow: inset 0 0 0 1px var(--nc-line); }
.cv-parada-sel__cab { display: flex; align-items: center; gap: var(--nc-s-2); min-width: 0; }
.cv-parada-sel__titulo { flex: 1; min-width: 0; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
@media (prefers-reduced-motion: reduce) { .cv-asa { transition: none; } }
.cv-relleno-marca { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-css-avanzado summary { font-size: var(--nc-fs-1); color: var(--nc-text-3); cursor: pointer;
  list-style: none; padding: 4px 0; }
.cv-css-avanzado summary::-webkit-details-marker { display: none; }

.cv-css-avanzado[open] { display: grid; gap: var(--nc-s-2); }
/* Con CSS escrito a mano no hay relleno que editar: se esconden los controles
   en vez de dejarlos mintiendo. */
.cv-relleno.es-css > :not(.cv-css-avanzado):not(summary) { display: none; }

/* --- Menú del clic derecho --------------------------------------------------- */
.cv-menu { position: fixed; z-index: 9999; min-width: 180px; padding: 4px;
  background: var(--nc-surface-1); border: 1px solid var(--nc-line);
  border-radius: var(--nc-r-md); box-shadow: var(--nc-shadow-3); display: grid; gap: 1px; }
.cv-menu-op { appearance: none; border: 0; background: transparent; color: var(--nc-text);
  font: inherit; font-size: var(--nc-fs-3); text-align: left; padding: 7px 10px;
  border-radius: var(--nc-r-sm); cursor: pointer; }
.cv-menu-op { display: flex; align-items: center; gap: var(--nc-s-4); justify-content: space-between; }
.cv-menu-op:hover { background: var(--nc-surface-2); }
.cv-menu-atajo { font-family: inherit; font-size: var(--nc-fs-1); color: var(--nc-text-3); white-space: nowrap; }
.cv-menu-op.es-peligro { color: var(--nc-danger); }

/* --- El acervo dentro de Canvas ---------------------------------------------- */
.cv-acervo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.cv-acervo-foto { appearance: none; border: 1px solid var(--nc-line); background: var(--nc-surface-2);
  border-radius: var(--nc-r-sm); padding: 0; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.cv-acervo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-acervo-foto:hover { border-color: var(--nc-accent); }

/* --- El eje del degradado ---------------------------------------------------
   Vive dentro de la caja de selección, así que sus coordenadas son las de la
   capa. El grosor se compensa con el zoom, como los nodos. */
.cv-eje { position: absolute; inset: 0; pointer-events: none; }
.cv-eje-linea { position: absolute; height: calc(2px * var(--inversa, 1)); margin-top: calc(-1px * var(--inversa, 1));
  background: #fff; box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.5); border-radius: 2px;
  pointer-events: auto; cursor: move; }
/* La línea se arrastra para recorrer el degradado, y 2 px no se atinan con el
 * mouse: el área de agarre es más gruesa que el trazo. Gira con la línea. */
.cv-eje-linea::before { content: ''; position: absolute; left: 0; right: 0;
  top: calc(-7px * var(--inversa, 1)); bottom: calc(-7px * var(--inversa, 1)); }
.cv-eje-linea:hover { background: var(--nc-accent); }
.cv-eje-punta { position: absolute; width: calc(13px * var(--inversa, 1)); height: calc(13px * var(--inversa, 1));
  margin: calc(-6.5px * var(--inversa, 1)) 0 0 calc(-6.5px * var(--inversa, 1));
  background: #fff; border: calc(2px * var(--inversa, 1)) solid var(--nc-accent); border-radius: 50%;
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.45);
  pointer-events: auto; cursor: grab; transition: transform .08s ease, background .08s ease; }
.cv-eje-punta:hover { background: var(--nc-accent); transform: scale(1.3); }
.cv-eje-punta:active { cursor: grabbing; background: var(--nc-accent); }
.cv-seleccion.is-grupo .cv-eje { display: none; }

/* --- Histograma y niveles ----------------------------------------------------
   El lienzo se estira al ancho del panel pero por dentro mide 256 columnas, una
   por nivel: así el dibujo es exacto y no hay que interpolar cuentas. */
.cv-histo { display: grid; gap: var(--nc-s-2); }
.cv-histo-lienzo { width: 100%; height: auto; display: block; border-radius: var(--nc-r-sm);
  cursor: ew-resize; touch-action: none; }
.cv-histo-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* --- Secciones que se pliegan -------------------------------------------------
   Relleno y Luz y color son editores altos: juntos ocupaban más que el panel
   entero y empujaban opacidad, fusión y orden fuera de la pantalla. Ahora son
   secciones plegables, se recuerda cómo las dejó el usuario, y lo que se usa en
   toda capa vive arriba y sin scroll. */
.cv-seccion { display: block; border-top: 1px solid var(--nc-line); padding-top: var(--nc-s-2); }
.cv-seccion > summary { display: flex; align-items: center; gap: var(--nc-s-2); cursor: pointer;
  list-style: none; padding: var(--nc-s-2) 0; color: var(--nc-text-2);
  font-size: var(--nc-fs-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--nc-r-sm); }
.cv-seccion > summary::-webkit-details-marker { display: none; }

.cv-seccion > summary:hover { color: var(--nc-text); }
.cv-seccion > summary:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.cv-seccion > summary .nc-btn { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
.cv-luz-pie { display: flex; justify-content: flex-end; gap: var(--nc-s-1); flex-wrap: wrap; }
/* 15 oct 2026: zona elegida = los deslizadores de arriba editan la zona; esta franja lo dice y deja salir */
.cv-zona-editando { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-2);
  padding: 6px 6px 6px 10px; border-radius: var(--nc-r-sm); font-size: var(--nc-fs-2); color: var(--nc-text);
  background: color-mix(in srgb, var(--nc-accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc-accent) 45%, transparent); }
.cv-zona-editando[hidden] { display: none; }
.cv-look { display: grid; gap: var(--nc-s-2); padding-bottom: var(--nc-s-3); border-bottom: 1px solid var(--nc-line); }
.cv-look[hidden] { display: none; }
.cv-curva, .cv-grad { display: grid; gap: var(--nc-s-2); padding-top: var(--nc-s-2); border-top: 1px solid var(--nc-line); }
.cv-curva[hidden], .cv-grad[hidden] { display: none; }
.cv-curva-lienzo { width: 100%; aspect-ratio: 1; border-radius: var(--nc-r-sm); background: var(--nc-inset); cursor: crosshair; touch-action: none; }
.cv-curva-pie { display: flex; justify-content: flex-end; }
.cv-grad-ruedas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nc-s-2); }
.cv-grad-rueda { display: grid; justify-items: center; gap: 4px; font-size: var(--nc-fs-1); color: var(--nc-text-3); cursor: pointer; }
.cv-grad-rueda canvas { width: 100%; aspect-ratio: 1; border-radius: 50%; touch-action: none; box-shadow: 0 0 0 1px var(--nc-line-strong); }
.cv-grad-rueda.is-activa span { color: var(--nc-text); font-weight: 600; }
.cv-grad-rueda.is-activa canvas { box-shadow: 0 0 0 2px var(--nc-accent); }
.cv-grad-de { color: var(--nc-text-3); font-weight: 400; }
.cv-mezcla, .cv-color-cliente { display: grid; gap: var(--nc-s-2); padding-top: var(--nc-s-2); border-top: 1px solid var(--nc-line); }
.cv-mezcla[hidden] { display: none; }
.cv-mezcla-modo select { min-width: 0; }
#cv-mezcla-ctrl { display: grid; gap: var(--nc-s-2); }
.cv-color-cliente__fila { display: flex; gap: var(--nc-s-1); align-items: center; }
.cv-color-cliente__fila .nc-input { flex: 1; min-width: 0; }
.cv-color-cliente__fila select { width: 100%; white-space: nowrap; text-overflow: ellipsis; }
#cv-panel-capa .nc-slider[data-carril="mix"] { background-image: linear-gradient(var(--nc-text-3), var(--nc-text-3)), var(--cv-carril); }
.cv-seccion[open] { display: grid; gap: var(--nc-s-2); }

/* --- Foco visible ------------------------------------------------------------
   Doce clases propias no tenían ningún indicador de foco: al llegar por teclado
   no se veía dónde estabas. */
.cv-item:focus-visible, .cv-color:focus-visible, .cv-logo:focus-visible,
.cv-preset:focus-visible, .cv-plantilla:focus-visible, .cv-acervo-foto:focus-visible,
.cv-menu-op:focus-visible, .cv-item-ojo:focus-visible, .cv-item-seguro:focus-visible, .cv-eje-punta:focus-visible,
.cv-histo-lienzo:focus-visible {
  outline: 2px solid var(--nc-accent); outline-offset: 2px;
}

/* El aviso se puede cerrar, y no empuja el editor: flota sobre el lienzo. */
.cv-aviso-x { margin-left: auto; flex: none; }
#cv-aviso { display: flex; align-items: center; gap: var(--nc-s-3); }

/* --- Capa de texto ------------------------------------------------------------
   El texto es HTML de verdad, no un dibujo: se ve con su fuente real y se edita
   donde está. La caja no recorta, para que escribir no pelee con un marco. */
.cv-capa--texto { overflow: visible; }
.cv-texto { width: 100%; outline: none; }
.cv-capa--texto.is-editando { box-shadow: 0 0 0 calc(2px * var(--inversa, 1)) var(--nc-accent); }
.cv-capa--texto.is-editando .cv-texto { cursor: text; }
.cv-tipo { display: grid; gap: var(--nc-s-2); }
.cv-tx-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-2); }
.cv-tx-fila2 { display: grid; grid-template-columns: 1fr auto auto; gap: var(--nc-s-2); align-items: center; }

/* El overlay vive dentro de la capa y se estira sobre ella, así que se mueve y
   se redimensiona con la foto sin tener que alinear nada a mano. */
.cv-overlay { position: absolute; inset: 0; pointer-events: none; }

/* --- Marcas: los assets del cliente, en grande ---------------------------------
   Lo contrario del cajón de Canvas: ahí se usan en 288 px de ancho, aquí se
   administran, así que cada cosa se ve, se nombra y se borra con un botón que
   dice lo que hace. */
/* Una sola columna centrada: todas las secciones miden lo mismo y la página no se pega a la izquierda. */
/* --- Marca (rehecha 22 oct 2026) --------------------------------------------------------------------------
   Una ficha de marca, no un formulario: logos primero y grandes, colores como muestras, tipografías como
   muestras de letra. Encabezados normales (sin rótulos en mayúsculas en cada sección) con su cuenta al lado. */
.marcas-cuerpo { min-height: 0; overflow: auto; padding: var(--nc-s-7) var(--nc-s-5) var(--nc-s-8); display: grid; gap: 56px; align-content: start;
  grid-template-columns: minmax(0, 1080px); justify-content: center; }
.mk-sec { display: grid; gap: var(--nc-s-4); min-width: 0; }
.mk-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-3); min-height: 32px; }
.mk-cab .nc-btn { cursor: pointer; }
.mk-titulo { margin: 0; display: flex; align-items: baseline; gap: var(--nc-s-2); font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--nc-text); }
.mk-cuenta { font-size: var(--nc-fs-3); font-weight: 500; color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.mk-cuenta:empty { display: none; }
.mk-ayuda { margin: calc(var(--nc-s-2) * -1) 0 0; max-width: 72ch; font-size: var(--nc-fs-3); line-height: 1.5; color: var(--nc-text-3); }
.mk-estado { font-size: var(--nc-fs-2); font-weight: 500; color: var(--nc-text-3); }

/* El mosaico para agregar: punteado, del mismo tamaño que lo que agrega, al final de su cuadrícula. */
.mk-nuevo { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 100%; padding: var(--nc-s-4);
  border: 1px dashed color-mix(in srgb, var(--nc-text-3) 55%, transparent); border-radius: var(--nc-r-lg); color: var(--nc-text-2); font-size: var(--nc-fs-3); font-weight: 500;
  text-align: center; cursor: pointer; transition: border-color var(--nc-t), background-color var(--nc-t), color var(--nc-t); }
.mk-nuevo small { font-size: var(--nc-fs-1); font-weight: 400; color: var(--nc-text-3); }
.mk-nuevo:hover { border-color: var(--nc-text-3); background: var(--nc-surface-1); color: var(--nc-text); }
.mk-nuevo:focus-within { outline: 2px solid var(--nc-accent); outline-offset: 2px; }

/* Nombres que se editan en su lugar: texto normal hasta que se toca. */
.mk-nombre { display: block; width: 100%; min-width: 0; margin: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--nc-r-sm);
  background: transparent; color: var(--nc-text); font: inherit; font-size: var(--nc-fs-3); font-weight: 550; line-height: 1.4;
  resize: none; overflow: hidden; field-sizing: content; min-height: calc(1.4em + 12px); max-height: calc(4.2em + 12px);
  transition: border-color var(--nc-t-fast), background-color var(--nc-t-fast); }
.mk-nombre::placeholder { color: var(--nc-text-3); font-weight: 400; }
.mk-nombre:hover:not(:disabled) { border-color: var(--nc-line); }
.mk-nombre:focus { outline: none; border-color: var(--nc-accent); background: var(--nc-inset); }
.mk-quitar { opacity: 0; transition: opacity var(--nc-t-fast); }
.mk-logo:hover .mk-quitar, .mk-color:hover .mk-quitar, .mk-insumo:hover .mk-quitar, .mk-quitar:focus-visible { opacity: 1; }
@media (hover: none) { .mk-quitar { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mk-nuevo, .mk-nombre, .mk-quitar { transition: none; } }

/* Logos: el lienzo tiene alto fijo y la imagen se contiene dentro (antes se salía y tapaba la sección de abajo).
   Tablero de transparencia claro u oscuro según la tinta del logo (marcas.js, fondoParaLogo). */
.mk-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--nc-s-4); }
.mk-logo { margin: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg);
  background: var(--nc-surface-1); overflow: hidden; }
.mk-logo-lienzo { position: relative; height: 176px; padding: 28px;
  background-color: #f4f4f1;
  background-image: linear-gradient(45deg, #e7e7e3 25%, transparent 25%, transparent 75%, #e7e7e3 75%),
                    linear-gradient(45deg, #e7e7e3 25%, transparent 25%, transparent 75%, #e7e7e3 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.mk-logo-lienzo--oscuro { background-color: var(--nc-inset);
  background-image: linear-gradient(45deg, var(--nc-overlay) 25%, transparent 25%, transparent 75%, var(--nc-overlay) 75%),
                    linear-gradient(45deg, var(--nc-overlay) 25%, transparent 25%, transparent 75%, var(--nc-overlay) 75%); }
.mk-logo-lienzo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mk-logo figcaption { display: grid; align-content: space-between; gap: 2px; padding: var(--nc-s-2) var(--nc-s-2) var(--nc-s-2); box-shadow: inset 0 1px 0 var(--nc-line); }
.mk-logo__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-2); min-height: 28px; padding-left: 9px; }
.mk-meta { font-size: var(--nc-fs-1); color: var(--nc-text-3); font-variant-numeric: tabular-nums; white-space: pre; }
.mk-nuevo--logo { min-height: 252px; }
.mk-acciones { display: flex; gap: 2px; }

/* Insumos: fotos, fondos y caras de Branding/insumos (Drive). La foto se ve entera sobre tablero claro: un recorte
   sin fondo y una foto completa se distinguen a la vista. */
.mk-insumos { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--nc-s-4); }
.mk-insumo { margin: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg); background: var(--nc-surface-1); overflow: hidden; }
.mk-insumo__vista { display: flex; align-items: center; justify-content: center; height: 148px; padding: 10px; color: var(--nc-text-3); box-sizing: border-box;
  background-color: #f4f4f1;
  background-image: linear-gradient(45deg, #e7e7e3 25%, transparent 25%, transparent 75%, #e7e7e3 75%),
                    linear-gradient(45deg, #e7e7e3 25%, transparent 25%, transparent 75%, #e7e7e3 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.mk-insumo__vista img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.mk-insumo__vista .nc-i { width: 28px; height: 28px; color: #8d8d86; }
.mk-insumo figcaption { display: grid; align-content: space-between; gap: 2px; padding: var(--nc-s-2); box-shadow: inset 0 1px 0 var(--nc-line); }
.mk-insumo__nombre { padding: 5px 8px 0; font-size: var(--nc-fs-3); font-weight: 550; color: var(--nc-text); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mk-nuevo--insumo { min-height: 224px; }

/* Arrastrar: la tarjeta que se lleva se apaga y la zona que la recibe se marca. */
.mk-logo[draggable="true"], .mk-insumo[draggable="true"] { cursor: grab; }
.mk-arrastrando { opacity: .45; }
.mk-sec--soltar { border-radius: var(--nc-r-lg); outline: 2px dashed var(--nc-accent); outline-offset: 10px; background: color-mix(in srgb, var(--nc-accent) 6%, transparent); }

/* Colores: la muestra grande es el propio selector; debajo, para qué es y su hex. */
.mk-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--nc-s-4); }
.mk-color { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg); background: var(--nc-surface-1); overflow: hidden; }
.mk-muestra-color { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 112px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.mk-muestra-color::-webkit-color-swatch-wrapper { padding: 0; }
.mk-muestra-color::-webkit-color-swatch { border: 0; border-radius: 0; }
.mk-muestra-color::-moz-color-swatch { border: 0; border-radius: 0; }
.mk-muestra-color:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -4px; }
.mk-color__datos { display: grid; align-content: space-between; gap: 2px; padding: var(--nc-s-2); box-shadow: inset 0 1px 0 var(--nc-line); }
.mk-color__pie { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding-left: 9px; }
.mk-hex { font-size: var(--nc-fs-1); color: var(--nc-text-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mk-nuevo--color { min-height: 186px; }
.mk-nuevo--color:only-child { min-height: 112px; }
.mk-plantillas .cv-grupo span { font-size: var(--nc-fs-2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--nc-text-3); }

/* Tipografías: una muestra por papel, con la letra elegida; sin elegir, en la letra de la interfaz y apagada. */
.mk-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--nc-s-4); }
.mk-especimen { display: grid; grid-template-rows: auto 1fr auto; gap: var(--nc-s-3); padding: var(--nc-s-5); border: 1px solid var(--nc-line);
  border-radius: var(--nc-r-lg); background: var(--nc-surface-1); min-width: 0; }
.mk-rol { font-size: var(--nc-fs-2); font-weight: 600; color: var(--nc-text-3); }
.mk-muestra { margin: 0; align-self: center; color: var(--nc-text); overflow-wrap: anywhere; }
.mk-muestra--titulo { font-size: 40px; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
.mk-muestra--cuerpo { font-size: 17px; line-height: 1.5; max-width: 42ch; }
.mk-muestra--vacia { color: var(--nc-text-3); }
.mk-propias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nc-s-2); }
.mk-propia { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr); align-items: center; gap: var(--nc-s-4);
  padding: var(--nc-s-2) var(--nc-s-2) var(--nc-s-2) var(--nc-s-4); border-radius: var(--nc-r-md); background: var(--nc-surface-1); }
.mk-propia__nombre { font-size: 20px; color: var(--nc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .mk-propia { grid-template-columns: 1fr; } }

/* Referencias de color: el banco del cliente (referencia.php / el 4180), no la marca.json */
.mk-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--nc-s-4); }
.mk-ref { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-2); padding: var(--nc-s-2); border: 1px solid var(--nc-line); border-radius: var(--nc-r-md); background: var(--nc-surface-1); }
.mk-ref img { display: block; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--nc-r-sm); background: var(--nc-inset); }
.mk-ref__etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-ref__etiquetas .nc-chip { height: 24px; padding: 0 9px; font-size: var(--nc-fs-1); }
.mk-ref__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ref__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-s-2); }
.mk-ref__pie:empty { display: none; }
#marcas-refs .nc-segmented { justify-self: start; }

@media (max-width: 720px) {
  .marcas-cuerpo { padding: var(--nc-s-4); gap: 40px; }
  .mk-logos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--nc-s-3); }
  .mk-logo-lienzo { height: 132px; padding: 18px; }
  .mk-nuevo--logo { min-height: 196px; }
  .mk-insumos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--nc-s-3); }
  .mk-insumo__vista { height: 120px; }
  .mk-colores { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--nc-s-3); }
  .mk-muestra--titulo { font-size: 30px; }
}

/* --- Etiquetas de Ideas ---------------------------------------------------
   El campo se ve como una caja de texto y se porta como una: las fichas dentro,
   el cursor al final, y crece por renglones cuando hacen falta. */
.et-campo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px;
  padding: 5px 8px; border-radius: var(--nc-r-md); background: var(--nc-inset);
  box-shadow: inset 0 0 0 1px var(--nc-line); cursor: text; }
.et-campo:focus-within { box-shadow: inset 0 0 0 1px var(--nc-accent); }
.et-ficha { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.et-quitar { appearance: none; border: 0; background: none; color: inherit; opacity: .6;
  cursor: pointer; display: grid; place-items: center; padding: 0; }
.et-quitar:hover { opacity: 1; color: var(--nc-danger); }
.et-nueva { flex: 1; min-width: 90px; border: 0; background: none; color: var(--nc-text);
  font: inherit; font-size: var(--nc-fs-2); padding: 4px 0; outline: none; }

/* los chips arrancan separados de la línea de la barra, no pegados a ella */
.et-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--nc-s-3) var(--nc-s-5); }
.et-filtro { cursor: pointer; }
.et-filtro[aria-pressed="true"] { background: var(--nc-accent); color: var(--nc-text-on-accent); }
/* Una etiqueta propia se toca para ver solo lo suyo; una deducida no, porque no
   la puso nadie. */
.et-propia { cursor: pointer; border: 0; font: inherit; }
.et-propia:hover { background: var(--nc-raise-hover); }
@media (max-width: 720px) { .et-filtros { padding: var(--nc-s-3) var(--nc-s-4); } }

/* El botón de tirar el lienzo vive en la cabecera de Lienzo, pegado a la
   derecha, donde se busca «empezar otra vez». */
#cv-nuevo { margin-left: var(--nc-s-2); }
#cv-nuevo:hover:not(:disabled) { color: var(--nc-danger); }

/* La cabecera del menú de la cuenta: quién eres y con qué correo entraste. */
/* Menú de la cuenta: quién eres arriba (nombre y nivel en una línea, el correo debajo), luego las opciones con icono. */
#quien-menu { width: 280px; max-width: calc(100vw - 16px); }
#quien-menu .quien-cab { display: flex; align-items: center; gap: var(--nc-s-3); padding: var(--nc-s-2) 10px var(--nc-s-1); }
.quien-cab__texto { display: grid; gap: 2px; min-width: 0; }
.quien-cab__fila { display: flex; align-items: center; gap: var(--nc-s-2); min-width: 0; }
.quien-cab__nombre { font-size: var(--nc-fs-3); font-weight: 600; color: var(--nc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien-cab__nivel { flex: none; }
.quien-cab__correo { font-size: var(--nc-fs-2); color: var(--nc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quien-menu .nc-menu__item { height: 36px; }
#quien-menu .nc-menu__item .nc-i { flex: none; width: 16px; height: 16px; color: var(--nc-text-3); transition: color var(--nc-t); }
#quien-menu .nc-menu__item:hover .nc-i, #quien-menu .nc-menu__item:focus-visible .nc-i { color: currentColor; }
#quien-menu .nc-menu__item--danger .nc-i { color: currentColor; }
@media (prefers-reduced-motion: reduce) { #quien-menu .nc-menu__item .nc-i { transition: none; } }
@media (pointer: coarse) { #quien-menu .nc-menu__item { height: 44px; } }

/* La receta y las plantillas, lado a lado: la receta las nombra, así que hay
   que verlas mientras se escribe. */

.mk-receta { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--nc-s-5); align-items: start; }
.mk-receta textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--nc-fs-2); line-height: 1.55; }
.mk-plantillas { display: grid; gap: var(--nc-s-2); }
.mk-lista-plantillas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mk-plantilla { width: 100%; text-align: left; appearance: none; border: 0; cursor: pointer;
  display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--nc-r-sm);
  background: var(--nc-surface-2); color: var(--nc-text); font: inherit; font-size: var(--nc-fs-2); }
.mk-plantilla:hover { background: var(--nc-surface-3); }
.mk-plantilla span { font-size: var(--nc-fs-1); }
@media (max-width: 900px) { .mk-receta { grid-template-columns: 1fr; } }

/* ── Calendario ───────────────────────────────────────────────────────────────
 * Una rejilla de mes que empieza en lunes. Las dos cuentas se distinguen por
 * color de barra, no por columna: la gracia es verlas juntas. El estado va en
 * el borde izquierdo, que es lo que se lee de reojo al repasar el mes. */
.cal-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--nc-s-4); gap: var(--nc-s-2); }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--nc-s-2); color: var(--nc-text-3); font-size: var(--nc-fs-1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cal-semana span { padding-left: var(--nc-s-1); }
.cal-vacio { padding: var(--nc-s-6) 0; color: var(--nc-text-3); text-align: center; }
.cal-rejilla { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(84px, auto); gap: var(--nc-s-2); }
.cal-dia { display: flex; flex-direction: column; gap: var(--nc-s-2); min-height: 0; padding: var(--nc-s-2); border-radius: var(--nc-r-md); background: var(--nc-surface-1); box-shadow: inset 0 0 0 1px var(--nc-line); }
.cal-dia--fuera { background: none; box-shadow: inset 0 0 0 1px var(--nc-line); }
.cal-dia--fuera .cal-dia-cab { color: var(--nc-text-3); }
.cal-dia--hoy { box-shadow: inset 0 0 0 2px var(--nc-accent); }
.cal-dia-cab { display: flex; align-items: center; justify-content: space-between; color: var(--nc-text-2); font-size: var(--nc-fs-1); font-weight: 800; }
/* El «+» de cada día era un botón de 15px con opacidad 0: invisible, por
 * debajo de cualquier mínimo táctil y ausente en tableta y teléfono. Ahora el
 * hueco libre del día es el objetivo, que mide lo que mide la celda. */
.cal-hueco { flex: 1; min-height: 20px; border: 0; border-radius: var(--nc-r-sm); background: none; cursor: pointer; }
.cal-dia:hover .cal-hueco { background: var(--nc-surface-2); }
.cal-hueco:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }

.cal-pieza { position: relative; display: grid; gap: 1px; width: 100%; padding: var(--nc-s-2); padding-left: var(--nc-s-3); border: 0; border-radius: var(--nc-r-sm); background: var(--nc-surface-2); color: var(--nc-text); font: inherit; font-size: var(--nc-fs-1); text-align: left; cursor: pointer; }
.cal-pieza::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--nc-r-sm) 0 0 var(--nc-r-sm); background: var(--cal-barra, var(--cal-c, var(--nc-text-3))); }
.cal-pieza:hover { background: var(--nc-surface-3); }
.cal-pieza-cuenta { color: var(--cal-c, var(--nc-text-3)); font-size: var(--nc-fs-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cal-pieza-que { color: var(--nc-text); font-size: var(--nc-fs-2); line-height: 1.25; }
.cal-pieza-com { position: absolute; right: var(--nc-s-2); top: var(--nc-s-2); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--nc-r-pill); background: var(--nc-surface-2); color: var(--nc-text-2); font-size: var(--nc-fs-1); font-weight: 800; line-height: 16px; text-align: center; }
/* Estado: propuesta sin pintar, aprobada en acento, publicada apagada porque
 * ya no hay nada que hacer con ella. */
/* La barra es de la cuenta y no se toca: el estado se dice con el relleno.
 * Propuesta va hueca (todavía no es nada), aprobada sólida, publicada apagada. */
.cal-pieza--propuesta { background: none; box-shadow: inset 0 0 0 1px var(--nc-line); }
.cal-pieza--propuesta .cal-pieza-que { color: var(--nc-text-2); }
.cal-pieza--publicada .cal-pieza-que { color: var(--nc-text-2); }
/* La producción no es una publicación: se ve distinta a propósito. */
.cal-pieza--produccion { background: none; box-shadow: inset 0 0 0 1px var(--nc-line-strong); }
.cal-pieza--produccion .cal-pieza-cuenta { color: var(--nc-text-2); }

.cal-chips { display: flex; align-items: center; gap: var(--nc-s-2); margin-right: var(--nc-s-3); }
.cal-chip { display: inline-flex; align-items: center; height: var(--nc-h-sm); gap: var(--nc-s-2); padding: 0 var(--nc-s-3); border: 0; border-radius: var(--nc-r-pill); background: var(--nc-surface-2); color: var(--nc-text-3); font: inherit; font-size: var(--nc-fs-1); cursor: pointer; }
.cal-chip[aria-pressed="true"] { background: var(--nc-surface-3); color: var(--nc-text); }
.cal-chip-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--nc-text-3); }
.cal-chip[aria-pressed="true"] .cal-chip-punto { background: var(--cal-c, var(--nc-accent)); }
.cal-tarea { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 2px var(--nc-s-1); border: 0; border-radius: var(--nc-r-sm); background: none; color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-2); line-height: 1.3; text-align: left; cursor: pointer; }
.cal-tarea:hover { background: var(--nc-surface-2); color: var(--nc-text); }
/* un rombo, no una casilla: una casilla promete marcarse con un toque */
.cal-tarea-caja { flex: none; width: 8px; height: 8px; margin: 5px 1px 0; transform: rotate(45deg); border-radius: 1px; box-shadow: inset 0 0 0 1.5px currentColor; }
.cal-tarea-cli { color: var(--nc-text-3); font-weight: 600; }
.cal-tarea-txt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-tarea--alta .cal-tarea-caja { color: var(--nc-warning); }
.cal-tarea--vencida { color: var(--nc-text); }
.cal-tarea--vencida .cal-tarea-caja { color: var(--nc-danger); background: var(--nc-danger); }
.cal-chip--tareas .cal-tarea-caja { margin-top: 0; }
.cal-chip--tareas[aria-pressed="true"] .cal-tarea-caja { background: currentColor; }
.cal-chip-n { color: var(--nc-text-2); font-weight: 800; }
.cal-tiempo { display: flex; align-items: center; gap: var(--nc-s-4); margin-left: var(--nc-s-4); }
.cal-nav { display: inline-flex; align-items: center; gap: var(--nc-s-2); }
/* El mes va en medio de sus flechas y con ancho fijo: si no, cada mes mueve
 * los botones de sitio y el ojo tiene que volver a buscarlos. */
.cal-mes-h { margin: 0; }
.cal-mes { min-width: 13ch; padding: var(--nc-s-1) var(--nc-s-2); border: 0; border-radius: var(--nc-r-sm); background: none; color: var(--nc-text); font-family: inherit; font-size: var(--nc-fs-4); font-weight: 700; letter-spacing: -.01em; text-align: center; text-transform: capitalize; white-space: nowrap; cursor: pointer; }
.cal-mes:hover { background: var(--nc-surface-2); }
.cal-mes:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }

/* El salto de mes: doce botones, el año a los lados y «Ir a hoy» al pie. */
.cal-saltar { position: fixed; z-index: var(--nc-z-popover); width: 252px; display: grid; gap: var(--nc-s-3); }
.cal-saltar-anio { display: flex; align-items: center; justify-content: space-between; }
.cal-saltar-anio strong { color: var(--nc-text); font-size: var(--nc-fs-3); }
.cal-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nc-s-2); }
.cal-mes-op { padding: var(--nc-s-3) 0; border: 0; border-radius: var(--nc-r-sm); background: var(--nc-surface-2); color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-2); text-transform: capitalize; cursor: pointer; }
.cal-mes-op:hover { background: var(--nc-surface-3); color: var(--nc-text); }
.cal-mes-op[aria-current="true"] { background: var(--nc-accent); color: var(--nc-text-on-accent); }
/* El mes de hoy se marca aunque estés mirando otro año. */
.cal-mes-op--hoy:not([aria-current="true"]) { box-shadow: inset 0 0 0 1px var(--nc-accent); color: var(--nc-text); }
.cal-agregar { display: inline-flex; gap: var(--nc-s-2); }
/* Con dedo, las flechas del mes son el objetivo más chico de la barra. */
/* Con dedo, todo lo que se toca llega a 44px. Antes la regla cubría solo las
 * dos flechas del mes y los otros 42 controles se quedaban cortos. */
@media (pointer: coarse) {
  .cal-nav .nc-btn, .cal-chip, .nc-segmented__item, .cal-mes-op { min-width: 44px; min-height: 44px; }
  .cal-pieza { min-height: 44px; }
  .nc-input, .nc-input select { min-height: 44px; }
}

.cal-modal-caja { display: grid; gap: var(--nc-s-3); align-content: start; scrollbar-gutter: stable; }
/* el copy es el contenido de la pieza: se lee a buen tamaño y entero */
#cal-m-copy { min-height: 120px; resize: none; overflow: hidden; font-size: var(--nc-fs-3); line-height: 1.5; }
.cal-copy-n { margin-top: calc(var(--nc-s-2) * -1); justify-self: end; color: var(--nc-text-3); font-size: var(--nc-fs-1); font-variant-numeric: tabular-nums; }
.cal-copy-n:empty { display: none; }
.cal-copy-n--pasado { color: var(--nc-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--nc-danger); }
/* El cuerpo del diálogo scrollea sin barra visible, así que el corte inferior
 * se difumina: sin eso el formulario parecía terminar donde terminaba la vista
 * y nadie llegaba a los comentarios. */
.cal-modal-caja, .u-m-caja { mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nc-s-5)), transparent); }
.cal-modal-caja:not([data-scroll]), .u-m-caja:not([data-scroll]) { mask-image: none; }
.cal-m-campos { display: grid; gap: var(--nc-s-3); }
.cal-m-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--nc-s-3); }
.cal-m-cuentas { display: flex; flex-wrap: wrap; gap: var(--nc-s-3); padding: var(--nc-s-2) 0; }
.cal-m-hilo { display: grid; gap: var(--nc-s-2); padding-top: var(--nc-s-2); box-shadow: inset 0 1px 0 var(--nc-line); }
.cal-comentarios { display: grid; gap: var(--nc-s-2); max-height: 30vh; overflow: auto; }
.cal-com { padding: var(--nc-s-2) var(--nc-s-3); border-radius: var(--nc-r-sm); background: var(--nc-surface-2); }
.cal-com-cab { color: var(--nc-text-3); font-size: var(--nc-fs-1); font-weight: 800; }
.cal-com p { margin: 2px 0 0; color: var(--nc-text); white-space: pre-wrap; }

.solo-angosto { display: none; }

@media (max-width: 860px) {
  .solo-angosto { display: block; }
  /* Con la navegación abajo, el contenido y el botón flotante tienen que
   * librarla: 64px de barra más el área segura del teléfono. */
  .nc-shell__ws { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .nc-fab { bottom: calc(64px + max(var(--nc-s-3), env(safe-area-inset-bottom))); }

  /* La barra se partía en cuatro filas y comía la pantalla antes de enseñar
   * un solo día. Queda en dos: el tiempo con su botón, y los filtros. */
  #calendario-shell .nc-bar { flex-wrap: wrap; row-gap: var(--nc-s-2); padding-bottom: var(--nc-s-2); }
  #calendario-shell .nc-bar__title { display: none; }
  #calendario-shell .nc-bar__spacer { display: none; }
  .cal-tiempo { order: 1; margin-left: 0; flex: 1 0 100%; gap: var(--nc-s-2); }
  .cal-nav { flex: 1; justify-content: space-between; }
  .cal-agregar { order: 3; }
  /* Los chips no se envuelven: se deslizan. Un nombre partido en dos líneas y
   * centrado deja el punto de color flotando en medio de la nada. */
  .cal-chips { order: 2; flex: 1 0 100%; min-width: 0; margin-right: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; }
  .cal-chips::-webkit-scrollbar { display: none; }
  .cal-chip { flex: 0 0 auto; white-space: nowrap; }
  .cal-solo-ancho { display: none; }
  .cal-rejilla { padding-bottom: 72px; }
  .cal-mes { min-width: 0; font-size: var(--nc-fs-3); }

  /* En el teléfono la rejilla de siete columnas no se lee: se vuelve lista.
   * El alto lo manda el contenido: con alto fijo el grid repartía 33px por
   * fila y cada tarjeta caía encima de la cabecera del día siguiente. */
  .cal-semana { display: none; }
  .cal-cuerpo { overflow: auto; }
  .cal-rejilla { flex: none; height: auto; overflow: visible;
    grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; }
  .cal-hueco { display: none; }
  .cal-dia { padding: var(--nc-s-2) var(--nc-s-3); }
  .cal-dia:not(:has(.cal-pieza, .cal-tarea)) { display: none; }
  .cal-tarea { min-height: 44px; align-items: center; }
  .cal-tarea .cal-tarea-caja { margin-top: 0; }
  .cal-dia--fuera { display: none; }
}

/* ══════════════ Métricas ══════════════
   La pestaña no tiene nada propio de una fuente: todo se pinta de lo que declara
   cada fuente.json. El correo se ve dentro de un iframe (es el HTML real que sale),
   así que aquí no hay estilos del correo. */
.ver-fila--actualizar { cursor: default; gap: var(--nc-s-2); justify-items: start; }
.ver-fila--actualizar > small { padding-left: 0; color: var(--nc-text-2); }

.met-shell { flex: 1 1 auto; min-height: 0; }
.met-shell > .nc-notice { margin-bottom: 0; }
.met-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.met-cuerpo { display: grid; gap: var(--nc-s-5); width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--nc-s-5) var(--nc-s-5) var(--nc-s-8); }
.met-sin-fuentes { max-width: 640px; margin: var(--nc-s-8) auto; }
.met-sin-fuentes code { color: var(--nc-text); font-family: var(--nc-font-mono); }
.met-nota { margin: 0; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-nota strong { color: var(--nc-text); font-weight: 600; }
.met-pendiente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nc-s-3) var(--nc-s-5); margin: 0; color: var(--nc-text-2); }
.met-pendiente strong { color: var(--nc-text); font-weight: 600; }
.met-pendiente .nc-btn { margin-left: 0; flex: none; }
.met-pendiente__estado a { color: var(--nc-accent-hover); }
.met-estado-envio { display: inline-flex; align-items: center; gap: var(--nc-s-2); color: var(--nc-text-2); font-size: var(--nc-fs-2); }

.met-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nc-s-5); }
.met-shell .nc-panel__body { padding-bottom: var(--nc-s-5); }
.met-cifra { display: grid; gap: var(--nc-s-2); align-content: start; padding: var(--nc-s-5); text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 0; border-radius: var(--nc-r-xl); background: var(--nc-surface-1); box-shadow: var(--nc-edge), var(--nc-shadow-1); transition: background var(--nc-t-fast) var(--nc-ease), box-shadow var(--nc-t-fast) var(--nc-ease); }
.met-cifra:hover { background: var(--nc-surface-2); }
.met-cifra:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.met-cifra[aria-pressed="true"] { background: var(--nc-surface-2); box-shadow: inset 0 0 0 2px var(--nc-accent), var(--nc-shadow-1); }
.met-cifra__nombre { color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-cifra__valor { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.met-cifra__valor small { font-size: var(--nc-fs-3); font-weight: 500; color: var(--nc-text-2); letter-spacing: 0; margin-left: var(--nc-s-1); }
.met-cifra__linea { display: block; font-size: var(--nc-fs-2); line-height: 1.45; color: var(--nc-text-2); font-variant-numeric: tabular-nums; }
.met-cifra__linea .met-delta { margin-right: var(--nc-s-1); white-space: nowrap; }
/* El número va en el color del texto y solo la flecha lleva color: el rojo del kit no llega a 4.5:1 en letra chica. */
.met-delta { font-weight: 600; color: var(--nc-text); }
.met-delta--sube .met-flecha { color: var(--nc-success); }
.met-delta--baja .met-flecha { color: var(--nc-danger); }
.met-delta--igual .met-flecha { color: var(--nc-text-2); }

.met-leyenda { display: inline-flex; align-items: center; gap: var(--nc-s-4); margin-left: auto; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-leyenda i { display: inline-block; width: 14px; height: 3px; border-radius: var(--nc-r-pill); margin-right: var(--nc-s-2); vertical-align: middle; }
.met-leyenda__1 { background: var(--nc-serie-1); }
.met-leyenda__0 { background: var(--nc-text-3); }
.met-grafica { width: 100%; height: 260px; display: block; }
.met-grafica text { fill: var(--nc-text-3); font-size: 11px; font-family: var(--nc-font); font-variant-numeric: tabular-nums; }
.met-grafica .eje { stroke: var(--nc-line); stroke-width: 1; }
.met-grafica .mes-activo { fill: var(--nc-text); font-weight: 600; }
.met-pie { margin: var(--nc-s-4) 0 0; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-pie strong { color: var(--nc-text); font-weight: 600; }
.met-pie--solo { margin-top: 0; }
.met-vacio { color: var(--nc-text-2); font-size: var(--nc-fs-2); margin: 0; }

.met-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nc-s-5); }
.met-dos > :only-child { grid-column: 1 / -1; }
.met-dos > .met-ancho { grid-column: 1 / -1; }
.met-dos:empty { display: none; }
.met-barras { display: grid; gap: var(--nc-s-3); margin: 0; padding: 0; list-style: none; }
.met-barra { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; align-items: center; gap: var(--nc-s-3); font-size: var(--nc-fs-2); }
.met-barra__nombre { color: var(--nc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.met-barra__pista { height: 10px; border-radius: var(--nc-r-pill); background: var(--nc-inset); overflow: hidden; }
.met-barra__relleno { display: block; height: 100%; border-radius: var(--nc-r-pill); background: var(--nc-serie-1); }
.met-barra__dato { color: var(--nc-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 108px; text-align: right; }
.met-barra__dato strong { color: var(--nc-text); font-weight: 600; }
.met-columnas { display: grid; gap: var(--nc-s-2); align-items: end; height: 190px; }
.met-columna { display: grid; grid-template-rows: auto 1fr auto; gap: var(--nc-s-1); height: 100%; text-align: center; font-size: var(--nc-fs-1); color: var(--nc-text-2); font-variant-numeric: tabular-nums; }
.met-columna__barra { display: flex; align-items: flex-end; }
.met-columna__barra span { display: block; width: 100%; border-radius: var(--nc-r-sm) var(--nc-r-sm) 0 0; background: var(--nc-serie-1); }
.met-columna--top { color: var(--nc-text); }
.met-columna--top .met-columna__barra span { background: var(--nc-accent); }

.met-calor-caja { overflow-x: auto; }
.met-calor-caja:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; border-radius: var(--nc-r-sm); }
.met-calor { display: grid; gap: 3px; min-width: 640px; font-size: var(--nc-fs-1); color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.met-calor__h, .met-calor__d { display: flex; align-items: center; justify-content: center; height: 26px; }
.met-calor__d { justify-content: flex-start; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-calor__d, .met-calor__esq { position: sticky; left: 0; z-index: 1; background: var(--nc-surface-1); }
.met-calor__c { height: 26px; border-radius: var(--nc-r-xs); background: var(--nc-inset); }
.met-calor__c--pico { outline: 2px solid var(--nc-text); outline-offset: -2px; }

.met-lectura { color: var(--nc-text-2); font-size: var(--nc-fs-3); line-height: 1.6; columns: 2; column-gap: var(--nc-s-8); }
.met-lectura p { margin: 0 0 var(--nc-s-4); }
.met-lectura h3 { margin: 0 0 var(--nc-s-2); color: var(--nc-text); font-size: var(--nc-fs-3); font-weight: 600; break-after: avoid; }
.met-lectura ul, .met-lectura ol { margin: 0 0 var(--nc-s-5); padding-left: var(--nc-s-5); break-inside: avoid; }
.met-lectura strong { color: var(--nc-text); font-weight: 600; }
.met-enviados td:last-child, .met-enviados th:last-child { text-align: right; }

/* Enviar el reporte: a la izquierda se arma, a la derecha se ve el correo tal como llega. */
.met-envio { width: min(1080px, calc(100vw - 32px)); }
.met-envio__cuerpo { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--nc-s-6); align-items: start; overflow: hidden; }
.met-envio__col { min-height: 0; max-height: min(600px, calc(100dvh - 350px)); overflow-y: auto; padding: 2px; }
.met-envio__form { display: grid; gap: var(--nc-s-4); }
.met-envio__grupo { border: 0; padding: 0; margin: 0; }
.met-envio__incluir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nc-s-2) var(--nc-s-4); }
.met-envio__incluir .nc-check { min-height: 32px; }
.met-envio .nc-notice { margin: 0; }
.met-envio__previa-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nc-s-1) var(--nc-s-3); margin: 0 0 var(--nc-s-3); color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-envio__previa-t strong { color: var(--nc-text); font-weight: 600; }
.met-envio__nota { color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.met-envio__error { color: var(--nc-warning); }
.met-correo { display: block; width: 100%; min-height: 320px; border: 0; border-radius: var(--nc-r-lg); background: var(--nc-surface-2); }
/* «Ver lo que se envió»: el mismo diálogo, solo con el correo. */
.met-envio--ver .met-envio__cuerpo { grid-template-columns: minmax(0, 1fr); }
.met-envio--ver .met-envio__form, .met-envio--ver #met-envio-prueba, .met-envio--ver #met-envio-ok { display: none; }

@media (max-width: 860px) {
  .met-cuerpo { padding: var(--nc-s-4) var(--nc-s-4) var(--nc-s-8); gap: var(--nc-s-4); }
  .met-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nc-s-4); }
  .met-cifra { padding: var(--nc-s-4); }
  .met-cifra__valor { font-size: 24px; }
  .met-dos { grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-4); }
  .met-barra { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; }
  .met-barra__dato { min-width: 0; }
  .met-barra__dato span { display: none; }
  .met-lectura { columns: 1; }
  .met-grafica { height: 220px; }
  .met-shell .nc-panel__header { flex-wrap: wrap; row-gap: var(--nc-s-2); }
  .met-leyenda { width: 100%; margin-left: 0; }
  .met-estado-envio { flex: 1 1 100%; order: 9; }
  /* La barra: fuentes en su renglón (se deslizan si no caben), y mes + enviar juntos en el siguiente. */
  .met-shell .nc-bar #met-fuentes { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .met-shell .nc-bar #met-fuentes .nc-segmented__item { flex: 1 0 auto; }
  .met-shell .nc-bar label.nc-input { flex: 1 1 140px; min-width: 0; }
  #met-enviar, #met-envio-x { min-height: 44px; min-width: 44px; }
  .met-envio__cuerpo { display: block; overflow-y: auto; }
  .met-envio__col { max-height: none; overflow: visible; }
  .met-envio__col + .met-envio__col { margin-top: var(--nc-s-6); }
  .met-envio .nc-dialog__footer { flex-wrap: wrap; }
  .met-envio .nc-dialog__footer .nc-btn { min-height: 44px; flex: 1 1 auto; }
  .met-envio .nc-dialog__footer .nc-spacer { display: none; }
  .met-envio__nota { flex: 1 1 100%; order: -1; }
  .met-envio .nc-check { min-height: 44px; }
  .met-envio__incluir { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .met-enviados table, .met-enviados tbody, .met-enviados tr, .met-enviados td { display: block; width: 100%; }
  .met-enviados thead { display: none; }
  .met-enviados td { border: 0; padding: 2px 0; text-align: left !important; overflow-wrap: anywhere; }
  .met-enviados td[data-t]::before { content: attr(data-t) ': '; color: var(--nc-text-3); }
  .met-enviados tr { padding: var(--nc-s-3) 0; box-shadow: inset 0 -1px 0 var(--nc-line); }
  .met-enviados .nc-btn { min-height: 44px; margin-top: var(--nc-s-2); }
}

/* --- Leads -------------------------------------------------------------------
 * La lista ocupa todo el ancho; los datos de uno entran en un cajón por la derecha.
 * Aquí la letra va más grande que en el resto de Studio: es una pantalla que se LEE
 * para vender, a veces desde el teléfono. Lectura a 16px, secundario a 14px, nada
 * bajo 13px, y todo lo que se toca mide al menos 44px. */
/* Video: el editor ocupa todo el espacio de trabajo; su propia interfaz trae los paneles. */
.video-shell { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.video-shell iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #0a0a0a; }
/* Tapa la lista de proyectos mientras se recarga con otro cliente. Opaco a propósito: con transparencia
   se alcanzaban a ver los proyectos del cliente anterior. */
.video-cargando { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--nc-s-3); background: #0a0a0a; color: var(--nc-text-2); font-size: var(--nc-fs-3); opacity: 1; transition: opacity var(--nc-t); }
.video-cargando[hidden] { display: none; }
.video-cargando.is-saliendo { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .video-cargando { transition: none; } }

.leads-shell { position: relative; display: flex; flex-direction: column; gap: var(--nc-s-3); padding: var(--nc-s-4); min-height: 0; overflow: hidden; }
.leads-barra { display: flex; align-items: center; gap: var(--nc-s-2); flex-wrap: wrap; }
.leads-barra .nc-input { height: 44px; font-size: var(--nc-fs-4); }
.leads-barra .nc-input:has(#leads-buscar) { flex: 0 1 320px; }
.leads-barra #leads-buscar { width: 100%; }
.leads-shell .nc-badge { font-size: var(--nc-fs-3); height: auto; padding: 3px 9px; }

.leads-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.leads-fila { width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 112px;
  align-items: center; gap: var(--nc-s-4); text-align: left;
  padding: 10px var(--nc-s-3); border: 0; border-radius: var(--nc-r-md);
  background: transparent; color: inherit; cursor: pointer; transition: background var(--nc-t-fast); }
.leads-fila:hover { background: var(--nc-surface-2); }
.leads-fila:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
.leads-fila--abierta { background: var(--nc-surface-2); box-shadow: inset -3px 0 0 var(--nc-accent); }
.leads-fila__nombre { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-fila__col { font-size: 14px; color: var(--nc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-estado--interesado, .leads-estado--ganado { color: var(--nc-success); }
.leads-estado--perdido, .leads-estado--sinrespuesta, .leads-estado--noquiso, .leads-estado--descartado { color: var(--nc-text-2); }
.leads-fila > .leads-estado { justify-self: end; }
/* quién lo tiene: Libre, Tú o el nombre, con su inicial */
.leads-dueno { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--nc-text-2); }
.leads-dueno__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-dueno--mio { color: var(--nc-text); font-weight: 600; }
.leads-dueno .nc-identity__avatar { width: 26px; height: 26px; }
.leads-fila--ajena .leads-fila__nombre { color: var(--nc-text-2); }
.leads-toma { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--nc-r-md);
  background: var(--nc-surface-2); box-shadow: inset 0 0 0 1px var(--nc-line); }
.leads-toma__texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.leads-toma__quien { font-weight: 600; }
.leads-toma__cuando { font-size: 14px; color: var(--nc-text-2); }
.leads-toma .nc-btn { font-size: 16px; flex: none; }
.leads-toma--libre { box-shadow: inset 0 0 0 1px var(--nc-accent); }
.leads-toma--ajena { box-shadow: inset 0 0 0 1px var(--nc-warning); }
.leads-repartir { display: flex; flex-direction: column; gap: 16px; min-width: min(440px, 80vw); }
.leads-repartir__lista { display: flex; flex-direction: column; gap: 14px; }
.leads-reparto { display: grid; grid-template-columns: 1fr minmax(160px, 1fr); align-items: center; gap: 12px; }
.leads-reparto__lista { font-size: 16px; font-weight: 600; }
.leads-reparto .nc-input { min-height: 44px; }

.leads-fantasma { height: 52px; border-radius: var(--nc-r-md); background: var(--nc-surface-2); opacity: .6; }
.leads-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nc-s-3); padding: 32px var(--nc-s-3); }
.leads-vacio p { margin: 0; font-size: 16px; color: var(--nc-text-2); }

.leads-telon { position: absolute; inset: 0; background: var(--nc-scrim); z-index: 4; }
.leads-cajon { position: absolute; right: 0; top: 0; bottom: 0; width: min(520px, 94%); z-index: 5;
  background: var(--nc-surface-2); box-shadow: -2px 0 24px rgba(0,0,0,.5);
  overflow-y: auto; padding: 24px;
  transform: translateX(100%); visibility: hidden;
  /* al cerrar, se oculta cuando termina de salir; al abrir, se ve al instante. Si la visibilidad
   * también tardara en abrir, el foco no podría entrar al cajón: un elemento oculto no lo acepta. */
  transition: transform var(--nc-t-slow), visibility 0s linear var(--nc-t-slow); }
.leads-cajon--abierto { transform: translateX(0); visibility: visible; transition: transform var(--nc-t-slow), visibility 0s; }
.leads-cajon__x { position: absolute; right: 12px; top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .leads-cajon { transition: none; }
}

.leads-ficha { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.5; }
.leads-ficha__cab { padding-right: 52px; }
.leads-ficha__nombre { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; }
.leads-ficha__meta { margin: 6px 0 0; font-size: 14px; color: var(--nc-text-2); }
.leads-campo { display: flex; flex-direction: column; gap: 6px; }
.leads-campo__etiqueta { font-size: 14px; color: var(--nc-text-2); }
.leads-ficha .nc-input, .leads-ficha select, .leads-ficha textarea { font-size: 16px; min-height: 46px; }
.leads-ficha textarea { padding: 10px 12px; line-height: 1.5; }
.leads-acciones { display: flex; gap: var(--nc-s-2); flex-wrap: wrap; }
.leads-acciones .nc-btn { font-size: 16px; }
.leads-datos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.leads-datos dt { color: var(--nc-text-2); font-size: 14px; padding-top: 2px; }
.leads-datos dd { margin: 0; overflow-wrap: anywhere; }
.leads-datos dd a { display: inline-flex; align-items: center; gap: 4px; }
.leads-subtitulo { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.leads-apunte { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--nc-line); }
.leads-apunte .nc-btn { align-self: flex-start; font-size: 16px; }
.leads-historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.leads-historial li { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--nc-line); padding-left: 12px; }
.leads-historial__cab { font-weight: 600; }
.leads-historial__pie { font-size: 14px; color: var(--nc-text-2); }
.leads-historial__nada { border: 0 !important; padding-left: 0 !important; color: var(--nc-text-2); }

/* El diálogo de envío es el de Métricas (clases met-envio); aquí solo lo propio. */
.leads-para { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.leads-plantillas { display: flex; flex-direction: column; gap: 6px; }
.leads-plantilla { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--nc-line); border-radius: var(--nc-r-md); cursor: pointer; font-size: 15px;
  transition: border-color var(--nc-t-fast), background var(--nc-t-fast); }
.leads-plantilla:hover { background: var(--nc-surface-2); }
.leads-plantilla--elegida { border-color: var(--nc-accent); background: var(--nc-surface-2); }
.leads-nota-mala { color: var(--nc-danger); }
.leads-plantilla input { accent-color: var(--nc-accent); width: 18px; height: 18px; margin: 0; }
#leads-dialogo .met-correo { min-height: 460px; background: #fff; }
/* el diálogo es el de Métricas, pero aquí se lee con el mismo piso de letra que el resto de Leads */
#leads-dialogo .nc-label, #leads-dialogo .nc-notice, #leads-dialogo .met-envio__previa-t,
#leads-dialogo .met-envio__nota { font-size: 14px; }
#leads-dialogo .nc-dialog__title { font-size: 18px; }
#leads-dialogo .nc-input input { font-size: 16px; }
#leads-dialogo #leads-cerrar-x { width: 44px; height: 44px; }
#leads-dialogo .nc-dialog__footer .nc-btn { min-height: 44px; font-size: 15px; }

@media (max-width: 720px) {
  .leads-fila { grid-template-columns: minmax(0, 1fr) auto auto; }
  .leads-fila .leads-dueno__nombre { display: none; }
  .leads-fila__col { display: none; }
  .leads-cajon { width: 100%; padding: 20px 16px; }
  .leads-barra .nc-input:has(#leads-buscar) { flex: 1 1 100%; }
}

/* --- Editar con Codex ----------------------------------------------------------
 * El botón vive al final del panel de la capa, no en la barra de arriba: es una acción sobre ESTA
 * foto, y en la barra se confundiría con las del lienzo entero. */
.ed-boton { width: 100%; justify-content: center; margin-bottom: var(--nc-s-3); }
/* El retoque va arriba del panel de la capa, no al fondo: el panel mide más de 1700px y abajo el botón
   queda fuera de la pantalla, o sea que no existe para quien no baje hasta el final. */
.cv-retoque { width: 100%; justify-content: center; margin-bottom: var(--nc-s-3); }
.ed-dialogo { width: min(620px, calc(100vw - 32px)); }
/* Generar elemento (generar.js): prompt del cliente, sus imágenes de referencia, dónde va y las variantes.
 * Es un panel flotante (no modal): se pinta en el diseño con él abierto. */
.gen-dialogo { width: min(400px, calc(100vw - 32px)); }
.gen-dialogo[open] { position: fixed; inset: 96px 16px auto auto; margin: 0; max-height: calc(100vh - 120px); overflow: auto; z-index: var(--nc-z-popover); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.gen-modos .nc-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--nc-accent) 22%, transparent); color: var(--nc-text); border-color: var(--nc-accent); }
.gen-modos .nc-btn .nc-i { margin-right: 4px; }
.gen-marca { position: absolute; left: 0; top: 0; z-index: 60; opacity: .45; pointer-events: none; }
.gen-marca.is-activa { pointer-events: auto; cursor: crosshair; }
.gen-cuerpo { display: flex; flex-direction: column; gap: var(--nc-s-3); }
.gen-cuerpo > div, .gen-editor { display: flex; flex-direction: column; gap: var(--nc-s-3); }
.gen-quien, .gen-nota { margin: 0; }
.gen-fila { display: flex; align-items: center; gap: var(--nc-s-2); }
.gen-crece { flex: 1; min-width: 0; }
.gen-variantes { max-width: 120px; }
.gen-refs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-s-2); }
.gen-refs:empty { display: none; }
.gen-refs img { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; border: 1px solid var(--nc-line-strong);
  background: repeating-conic-gradient(#2a2a2a 0 25%, #222 0 50%) 0 0 / 12px 12px; }
.gen-refs--chicas img { width: 40px; height: 40px; }
.gen-ref { position: relative; }
.gen-ref .nc-btn { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); }
.ed-trabajando { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--nc-s-3);
  padding: var(--nc-s-3); border-radius: var(--nc-r-md); background: var(--nc-surface-2); color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.ed-trabajando.hidden { display: none; }
.ed-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-4); }
.ed-foto { display: flex; align-items: center; gap: var(--nc-s-2); margin: 0; }
.ed-foto .nc-caption { min-width: 0; }
/* Perfiles y recetas: un renglón de botones con su etiqueta encima y su explicación debajo. El hueco de
   dentro (6px) es menor que el de fuera para que cada nota se lea pegada a SU fila y no a la siguiente. */
.ed-grupo { display: grid; gap: 6px; }
.ed-grupo .nc-label .nc-caption { margin-left: var(--nc-s-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Cada receta lleva su rótulo ENCIMA de sus botones y su nota debajo: con las dos filas seguidas y las
   notas en medio no se sabía a cuál pertenecía cada nota, y la diferencia entre revelar y reinterpretar
   es justo lo que hay que entender antes de tocar. */
.ed-receta { display: grid; gap: 4px; padding-left: var(--nc-s-3); box-shadow: inset 2px 0 0 var(--nc-line); }
.ed-sub { color: var(--nc-text-3); font-size: var(--nc-fs-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* El aviso de «Codex terminó» lleva su acción dentro: enterarse y recogerlo son el mismo gesto, y sin
   botón habría que volver a buscar la foto, abrir el diálogo y pedirlo otra vez. */
#ed-listo { display: flex; align-items: center; gap: var(--nc-s-3); border-left-color: var(--nc-accent); }
#ed-listo .nc-btn { flex: none; }
.ed-cuerpo .nc-input--area textarea { font-size: 15px; line-height: 1.5; }
.ed-paso2 { display: grid; gap: var(--nc-s-2); }
.ed-comando { display: flex; align-items: flex-start; gap: var(--nc-s-3); padding: var(--nc-s-3);
  border: 1px solid var(--nc-line); border-radius: var(--nc-r-md); background: var(--nc-inset); }
.ed-comando code { flex: 1; min-width: 0; font-family: var(--nc-font-mono); font-size: var(--nc-fs-1);
  line-height: 1.5; color: var(--nc-text-2); word-break: break-all; }
.ed-comando .nc-btn { flex: none; }

/* --- Retocar con IA: un botón, varias funciones ---------------------------------
 *
 * Antes cada función traía su propio botón al panel de la capa («Editar con Codex», «Quitar el fondo»)
 * y la siguiente habría traído el tercero. Ahora es una sola puerta y las funciones viven dentro.
 *
 * Estas clases las usan el producto (retoque.js) y el prototipo (proto-editar.html). Están aquí y no
 * duplicadas en el prototipo para que lo que se aprueba mirando el prototipo sea lo que se ve en Studio.
 *
 * Radios: el diálogo lo pone el kit (--nc-r-xl), la fila --nc-r-md, el cuadrito del icono --nc-r-sm y
 * las pastillas de ejemplo --nc-r-pill. De fuera hacia dentro, sin saltarse la escala.
 */
.ret-dialogo { width: min(560px, calc(100vw - 32px)); }
/* Borrar y rellenar: el diálogo se abre a lo ancho para pintar sobre la foto. */
.ret-dialogo.ret-dialogo--pintar { width: min(1100px, calc(100vw - 32px)); }
.ret-pintar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-3); }
.ret-lienzo { position: relative; justify-self: center; max-width: 100%; line-height: 0;
  border-radius: var(--nc-r-sm); overflow: hidden; background: var(--nc-surface-2); }
.ret-lienzo__foto { display: block; max-width: 100%; max-height: calc(100vh - 430px); width: auto; height: auto;
  user-select: none; -webkit-user-drag: none; }
.ret-lienzo__trazo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; cursor: none; touch-action: none; }
.ret-lienzo__pincel { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .9); }
.ret-pintar--ocupado .ret-lienzo__trazo { cursor: progress; }
.ret-pintar--ocupado .ret-lienzo__pincel { display: none; }
.ret-lienzo__ocupado { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1.4;
  background: rgba(0, 0, 0, .35); }
.ret-lienzo__ocupado .nc-caption { padding: var(--nc-s-2) var(--nc-s-3); border-radius: var(--nc-r-sm);
  background: var(--nc-surface-1); color: var(--nc-text); }
.ret-herramientas { display: flex; align-items: end; gap: var(--nc-s-2); flex-wrap: wrap; }
.ret-herramientas__pincel { width: min(240px, 100%); }
.ret-pintar__aviso:empty { display: none; }
/* Borrar píxeles: el lienzo ES la imagen (no una capa encima), sobre un ajedrez que deja ver lo transparente. */
.ret-lienzo--ajedrez { background: repeating-conic-gradient(#3a3a3a 0% 25%, #262626 0% 50%) 0 0 / 16px 16px; }
.ret-lienzo__trazo.ret-lienzo__trazo--opaco { position: static; display: block; opacity: 1; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 430px); }
.ret-modos .nc-iconset__item { width: auto; padding: 0 var(--nc-s-3); font-size: 13px; }
.ret-herramientas { align-items: center; }
.ret-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-4); align-content: start; }
.ret-cuerpo .nc-notice { margin: 0; }
.ret-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-2); }

/* Una fila de opción, la misma para «qué le hago» y para «qué look»: es la misma decisión, elegir de
   una lista corta, y dos componentes para eso serían dos cosas que mantener alineadas a mano.

   `align-items: start` y no `center`: la fila crece a dos o tres renglones según lo larga que sea su
   explicación, y centrando, el icono terminaba junto al SEGUNDO renglón, o sea junto a la explicación
   en vez de junto al título al que pertenece. Arriba, cada pieza empieza donde empieza el título.

   El padding es el mismo por los cuatro lados (12px). Con 8px arriba y 12px a los lados, una fila de
   tres renglones se veía apretada contra el borde de arriba y suelta a los costados. */
.ret-op { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start;
  gap: var(--nc-s-4); width: 100%; min-height: 60px; padding: var(--nc-s-4); border: 0;
  border-radius: var(--nc-r-md); background: var(--nc-surface-2); box-shadow: var(--nc-edge);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--nc-t), transform var(--nc-t-fast); }
.ret-op:hover { background: var(--nc-raise); }
.ret-op:active { transform: translateY(1px); }
.ret-op:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.ret-op[disabled] { cursor: default; }
.ret-op[disabled] > .ret-op__icono, .ret-op[disabled] .ret-op__nombre, .ret-op[disabled] .ret-op__que { opacity: .5; }
.ret-op__porque { font-size: 13px; line-height: 1.5; color: var(--nc-text-2); }
.ret-op[disabled]:hover { background: var(--nc-surface-2); }
.ret-op[disabled]:active { transform: none; }
.ret-op__icono { display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--nc-r-sm); background: var(--nc-raise); color: var(--nc-text-2); }
.ret-op__txt { display: grid; gap: 3px; min-width: 0; }
.ret-op__nombre { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--nc-text); }
.ret-op__que { font-size: 13px; line-height: 1.5; color: var(--nc-text-2); }
/* Misma altura de renglón que el título para que las dos primeras líneas compartan base. */
.ret-op__costo { font-size: 13px; line-height: 1.3; color: var(--nc-text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* La paleta solo aparece cuando el YAML trae los colores en hexadecimal. Si los describe en palabras va
   el icono: un cuadrito de color inventado aquí sería mentira sobre el documento del cliente. */
.ret-paleta { display: flex; width: 36px; height: 36px; border-radius: var(--nc-r-sm);
  overflow: hidden; box-shadow: var(--nc-edge); }
.ret-paleta i { flex: 1; }

.ret-atras { display: inline-flex; align-items: center; gap: 4px; justify-self: start;
  padding: 4px 0; border: 0; background: none; color: var(--nc-text-2); font: inherit;
  font-size: 13px; cursor: pointer; }
.ret-atras:hover { color: var(--nc-text); }
.ret-pista { margin: 0; font-size: 13px; line-height: 1.55; color: var(--nc-text-2); }
.ret-chips { display: flex; flex-wrap: wrap; gap: var(--nc-s-2); }
.ret-chips .nc-chip { height: 30px; font-size: 13px; }

/* Las fichas de los looks: mismo padding y mismo radio que una fila, para que al pasar de la lista a
   las fichas no se mueva el borde del contenido. */
.ret-ficha { padding: var(--nc-s-4); border-radius: var(--nc-r-md); background: var(--nc-surface-2);
  box-shadow: var(--nc-edge); }
.ret-ficha h3 { margin: 0 0 var(--nc-s-3); font-size: 14px; font-weight: 650; color: var(--nc-text); }
.ret-ficha dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--nc-s-2) var(--nc-s-4); font-size: 13px; }
.ret-ficha dt { color: var(--nc-text-3); line-height: 1.5; }
.ret-ficha dd { margin: 0; line-height: 1.5; }
.ret-ficha code { font-family: var(--nc-font-mono); font-size: 12px; color: var(--nc-text-3); }

/* Cargando: dos siluetas del tamaño de una fila, no una ruedita. */
.ret-esqueleto { height: 60px; border-radius: var(--nc-r-md); background: var(--nc-raise);
  animation: ret-latir 1.3s ease-in-out infinite; }
.ret-esqueleto:nth-child(2) { opacity: .55; }
@keyframes ret-latir { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }
@media (prefers-reduced-motion: reduce) {
  .ret-esqueleto { animation: none }
  .ret-op { transition: none }
}

/* En pantalla angosta el costo baja bajo la explicación, alineado con ella y no con el icono. */
@media (max-width: 520px) {
  .ret-op { grid-template-columns: 36px minmax(0, 1fr); }
  .ret-op__costo { grid-column: 2; }
}

/* --- Selector de tipografía con muestra -----------------------------------------
 *
 * El desplegable del sistema ignora el `font-family` de un `<option>`, así que los 25 nombres se veían
 * en la misma letra. Esto lo sustituye por un menú del kit donde cada renglón está escrito con SU letra:
 * la muestra y la etiqueta son lo mismo, no hay que leer dos veces.
 *
 * Radios: el disparador toma el del campo que sustituye (--nc-r-sm), el menú y sus renglones vienen del
 * kit (--nc-r-lg y --nc-r-sm). No hay escala nueva.
 */
 /* `.nc-input select` del kit trae `display: flex` y le gana a una clase suelta: sin nombrar el
   contenedor, el <select> seguía ocupando su sitio y aplastaba al botón nuevo a 30 px. */
.nc-input select.tf-oculto { display: none; }
.tf-caja { padding-right: 8px; }
.tf-boton { display: flex; align-items: center; gap: var(--nc-s-2); flex: 1; min-width: 0;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tf-boton:disabled { cursor: default; }
.tf-boton__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; line-height: 1.3; text-align: left; }
.tf-boton__punta { flex: none; color: var(--nc-text-3); }

.tf-menu { position: fixed; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--nc-s-2); overflow: hidden; }
.tf-menu.hidden { display: none; }
.tf-buscar { flex: none; }
.tf-lista { overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }

/* Más alto que un renglón de menú normal: a 32 px una script no se entiende. */
.tf-opcion { height: 38px; gap: var(--nc-s-3); }
.tf-opcion.hidden { display: none; }
/* Texto pleno y no el gris de una etiqueta: aquí la muestra ES el contenido, y las scripts finas con
   el gris del kit (6.5:1) se leían a medias. En pleno son 14.2:1. */
.tf-opcion__muestra { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--nc-text); font-size: 16px; line-height: 1.35; }
/* Las del cliente se marcan: al exportar se incrustan dentro del archivo, y eso depende de su
   licencia. Que se vea de dónde salió cada una antes de elegirla, no después de entregar. */
.tf-opcion__suya { flex: none; padding: 1px 7px; border-radius: var(--nc-r-pill);
  background: var(--nc-raise); color: var(--nc-text-3); font-size: 11px; letter-spacing: .02em; }
.tf-opcion__palomita { flex: none; opacity: 0; color: var(--nc-accent); }
.tf-opcion[aria-selected="true"] { color: var(--nc-text); background: var(--nc-accent-soft); }
.tf-opcion[aria-selected="true"] .tf-opcion__palomita { opacity: 1; }
.tf-opcion:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }

/* Mientras la familia no ha llegado, el renglón se dibuja con la letra de reserva. Se atenúa para no
   hacer pasar la de reserva por la de verdad: una muestra falsa es peor que ninguna. */
.tf-opcion.is-cargando .tf-opcion__muestra { opacity: .45; }

.tf-vacio { margin: 0; padding: var(--nc-s-3) 10px var(--nc-s-2); color: var(--nc-text-3); font-size: var(--nc-fs-2); }
.tf-vacio.hidden { display: none; }

/* --- «Guardando…» en la barra --------------------------------------------------
 * Guardar tarda un par de segundos desde que los datos van por Drive, y las pantallas pintan antes de
 * que termine. Sin esto, nadie sabe que todavía falta algo. Ocupa lugar fijo aunque esté vacío para que
 * la barra no brinque al aparecer. */
/* Escondido NO ocupa sitio. Con `visibility: hidden` seguía midiendo 28px más sus dos huecos, o sea 40
   px de aire muerto entre el selector de cliente y el avatar durante el 99% del tiempo, que es cuando no
   se está guardando nada. Eso separaba el selector de su grupo y lo dejaba a media distancia del borde.
   Con `display: none` desaparece de la fila, y el hueco de flex tampoco cuenta para un hijo que no está. */
.guardando { display: none; align-items: center; gap: var(--nc-s-2); height: 28px; padding: 0 10px;
  border-radius: var(--nc-r-pill); background: var(--nc-raise); color: var(--nc-text-2);
  font-size: var(--nc-fs-2); white-space: nowrap; }
.guardando.is-visible { display: inline-flex; animation: nc-toast-in var(--nc-t) both; }
.guardando[data-estado="listo"] { color: var(--nc-success); }
.guardando[data-estado="error"] { color: var(--nc-danger); background: var(--nc-danger-soft); }
.guardando__rueda { width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; animation: guardando-gira .7s linear infinite; }
.guardando[data-estado="listo"] .guardando__rueda,
.guardando[data-estado="error"] .guardando__rueda { animation: none; border-top-color: currentColor; }
@keyframes guardando-gira { to { transform: rotate(360deg); } }
/* Debajo de 1200 px las pestañas del centro ya casi tocan la sesión: el aviso se queda en la rueda, que
   ocupa 28 px y no empuja nada. El texto vuelve en pantallas anchas. */
@media (max-width: 1200px) { .guardando__texto { display: none; } .guardando { padding: 0; width: 28px; justify-content: center; background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .guardando.is-visible { animation: none; }
  .guardando__rueda { animation: none; border-top-color: currentColor; }
}

/* --- La mano para mover el lienzo ----------------------------------------------
 * Espacio sostenido, o el botón de en medio del ratón. El cursor lo dice antes de que pase nada. */
.cv-area::-webkit-scrollbar { width: 0; height: 0; }
.cv-area.is-mano, .cv-area.is-mano * { cursor: grab; }
.cv-area.is-agarrando, .cv-area.is-agarrando * { cursor: grabbing; }

/* --- Canvas: la barra del documento ---------------------------------------------
 * Lo que es del archivo (guardar, abrir, exportar, cerrar) vive arriba, como en cualquier editor; el
 * panel de la derecha queda solo para lo que está seleccionado. */
/* Un solo renglón (19 oct 2026): con muchas pestañas el .nc-bar del kit partía la barra y los botones bajaban.
 * Ahora las pestañas toman solo el espacio que sobra y las que no caben se van al menú «+N». */
.cv-bar { flex: 0 0 auto; flex-wrap: nowrap; }
.cv-bar > .nc-bar__spacer { display: none; } /* el espacio libre es de las pestañas */
.cv-bar .cv-pieza-estado { color: var(--nc-text-2); font-weight: 400; }
.cv-bar-sep { width: 1px; align-self: stretch; margin: 4px var(--nc-s-2); background: var(--nc-line); }
@media (max-width: 860px) {
  .cv-bar { flex-wrap: wrap; row-gap: var(--nc-s-2); }
  .cv-tabs { flex: 1 1 100%; }
  .cv-bar-sep { display: none; }
}

/* --- Canvas: pestañas del panel de la capa --------------------------------------
 * Diseño y Luz son dos oficios: componer y revelar. En la misma columna se estorbaban. */
.cv-pestanas { width: 100%; }
.cv-pestanas .nc-segmented__item { flex: 1; }
#cv-capa-cuerpo[data-pestana="diseno"] > #cv-luz { display: none; }
#cv-capa-cuerpo[data-pestana="luz"] > *:not(#cv-luz) { display: none; }
#cv-capa-cuerpo[data-pestana="luz"] > #cv-luz > summary { display: none; }

/* Las acciones de la capa, en iconos, con la misma retícula que alinear. */
.cv-acciones { display: flex; align-items: center; gap: 2px; }
.cv-subir .nc-i { transform: rotate(180deg); }

/* Exportar: un botón con su formato, y la flechita que lo cambia. */
.cv-exportar { position: relative; display: inline-flex; }
.cv-exportar__hacer { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cv-exportar__mas { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }
.cv-exportar__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; }

/* Importar: el mismo menú colgante que Exportar, del lado de lo que entra. */
.cv-importar { position: relative; display: inline-flex; }
.cv-importar__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; list-style: none; }

/* --- Canvas: pestañas de diseño -------------------------------------------------
 * Un diseño por pestaña, como en cualquier editor. La activa se distingue por fondo y color, no por
 * una línea de acento sola: en oscuro una línea de 2 px se pierde. */
.cv-tabs { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 2px;
  overflow: hidden; }
.cv-tabs::-webkit-scrollbar { display: none; }
/* Píldoras, iguales a las del encabezado de Video (16 oct 2026): la app se ve igual en cada herramienta. */
.cv-tab { flex: none; display: flex; align-items: center; gap: 2px; height: 32px; max-width: 240px; padding-left: 4px;
  border-radius: 6px; color: var(--nc-text-2); background: transparent; transition: background var(--nc-t), color var(--nc-t); }
.cv-tab:hover { background: var(--nc-raise); color: var(--nc-text); }
.cv-tab.is-activa { background: rgba(255, 255, 255, .08); color: var(--nc-text); }
.cv-tab__nombre { max-width: 200px; height: 32px; padding: 0 6px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cv-tab.is-activa .cv-tab__nombre { cursor: default; }
.cv-tab__x { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--nc-text-3); cursor: pointer;
  opacity: 0; transition: opacity var(--nc-t), background var(--nc-t), color var(--nc-t); }
.cv-tab:hover .cv-tab__x, .cv-tab.is-activa .cv-tab__x, .cv-tab__x:focus-visible { opacity: 1; }
.cv-tab__x:hover { background: var(--nc-raise-hover); color: var(--nc-text); }
.cv-tab-mas { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--nc-text-3); cursor: pointer;
  transition: background var(--nc-t), color var(--nc-t); }
.cv-tab-mas:hover { background: var(--nc-raise); color: var(--nc-text); }
/* «+N»: las pestañas que no caben en la barra, en un menú para elegir */
.cv-tab-desborde { flex: none; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 8px;
  border: 0; border-radius: 6px; background: none; color: var(--nc-text-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: background var(--nc-t), color var(--nc-t); }
.cv-tab-desborde:hover, .cv-tab-desborde[aria-expanded="true"] { background: var(--nc-raise); color: var(--nc-text); }
.cv-tab-desborde:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
.cv-tab[hidden], .cv-tab-desborde[hidden] { display: none; }
/* Generar elemento › Fotos de contexto › Elegir del diseño */
.gen-cx-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.gen-cx-op { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--nc-line); border-radius: 6px;
  background: none; color: var(--nc-text-2); font: inherit; font-size: 12px; cursor: pointer; text-align: left; min-width: 0;
  transition: background var(--nc-t), border-color var(--nc-t); }
.gen-cx-op:hover, .gen-cx-op:focus-visible { background: var(--nc-raise); border-color: var(--nc-accent); outline: none; color: var(--nc-text); }
.gen-cx-op img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--nc-surface-2, #222); }
.gen-cx-op span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Llevar a Canvas: a qué diseño abierto va (los nombres largos se cortan con puntos suspensivos) */
.cv-destino { width: min(420px, calc(100vw - 32px)); }
.cv-destino__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.cv-destino__op { width: 100%; display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none; color: var(--nc-text-2); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--nc-t), color var(--nc-t); }
.cv-destino__op:hover, .cv-destino__op:focus-visible { background: var(--nc-raise); color: var(--nc-text); outline: none; }
.cv-destino__op.is-actual { color: var(--nc-text); }
.cv-destino__nombre { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.cv-destino__nota { flex: none; color: var(--nc-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cv-destino__op--nuevo { margin-top: 4px; box-shadow: inset 0 1px 0 var(--nc-line); border-radius: 0 0 6px 6px; }
.cv-tabs-menu { position: fixed; z-index: 60; min-width: 220px; max-width: 340px; max-height: 60vh; overflow-y: auto; list-style: none; }
.cv-tabs-menu .nc-menu__item { justify-content: flex-start; gap: 8px; }
.cv-tabs-menu .nc-menu__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tabs-menu .nc-menu__item[aria-current="true"] { color: var(--nc-text); font-weight: 600; }
/* fuera de una barra (la lista de proyectos de Video) las pestañas llevan su propio renglón */
.video-tabs { flex: 0 0 auto; padding: var(--nc-s-2) var(--nc-s-3); background: var(--nc-canvas); box-shadow: inset 0 -1px 0 var(--nc-line); }
.cv-tab__nombre:focus-visible, .cv-tab__x:focus-visible, .cv-tab-mas:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
/* Sin pestañas abiertas no hay nada que editar: se van el lienzo y sus paneles. */
#canvas-shell.sin-documentos .cv-area,
#canvas-shell.sin-documentos .cv-tools,
#canvas-shell.sin-documentos .cv-capas,
#canvas-shell.sin-documentos .cv-zoombar,
#canvas-shell.sin-documentos .cv-bar > :not(.cv-tabs),
#canvas-shell.sin-documentos .cv-panel { display: none; }
#canvas-shell.sin-documentos .cv-cuerpo { grid-template-columns: minmax(0, 1fr); }

/* --- Canvas: pantalla de inicio -------------------------------------------------
 * Tres formas de empezar, en el orden en que se usan: un tamaño en blanco, una pieza que ya existe, o
 * una plantilla. Las miniaturas son las guardadas de verdad. */
.cv-inicio { min-height: 0; overflow: auto; background: var(--nc-canvas); }
.cv-inicio__caja { max-width: 880px; margin: 0 auto; padding: clamp(24px, 6vh, 64px) var(--nc-s-5) 64px; display: grid; gap: var(--nc-s-8); }
.cv-inicio__t { margin: 0; font: 800 28px/1.1 'Bricolage Grotesque', var(--nc-font); letter-spacing: -.02em; color: var(--nc-text); }
.cv-inicio__formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nc-s-4); }
.cv-inicio__cabT { display: flex; align-items: center; gap: var(--nc-s-4); flex-wrap: wrap; }
.cv-inicio__cabT .nc-segmented { margin-left: auto; }
/* La hoja se dibuja dentro de un marco de alto fijo: así los cuatro nombres quedan a la misma altura,
   que era lo que se veía chueco cuando cada hoja medía distinto. */
.cv-inicio__marco { display: grid; place-items: end start; height: 72px; margin-bottom: var(--nc-s-2); }
.cv-inicio__formato { display: grid; gap: 6px; padding: var(--nc-s-4); border: 1px solid var(--nc-line);
  border-radius: var(--nc-r-md); background: var(--nc-surface-1); color: var(--nc-text); text-align: left;
  cursor: pointer; transition: border-color var(--nc-t), background var(--nc-t), transform var(--nc-t-fast); }
.cv-inicio__formato:hover { border-color: var(--nc-accent); background: var(--nc-surface-2); }
.cv-inicio__formato:active { transform: translateY(1px); }
.cv-inicio__hoja { max-width: 72px; max-height: 72px; height: 100%; border: 1px solid var(--nc-line-strong); border-radius: var(--nc-r-sm); background: var(--nc-inset); }
.cv-inicio__nombre { font-size: var(--nc-fs-3); font-weight: 600; }
.cv-inicio__sec { display: grid; gap: var(--nc-s-3); }
.cv-inicio__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nc-s-2); }
/* Nada del encabezado se parte en renglones: «Tus piezas», «3 elegidas» o «Abrir archivo» partidos en dos
 * se veían rotos al elegir piezas. Si no cabe, la barra de acciones baja entera a su propio renglón. */
.cv-inicio__cab > *, .cv-inicio__selec > * { white-space: nowrap; flex-shrink: 0; }
.cv-inicio__cab h3 { margin: 0; font-size: var(--nc-fs-3); font-weight: 650; color: var(--nc-text); }
.cv-inicio__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--nc-s-4); }
.cv-inicio__tarjeta { position: relative; }
.cv-inicio__abrir { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none;
  color: var(--nc-text); text-align: left; cursor: pointer; }
/* Todas las miniaturas en el mismo cuadro, con el diseño contenido adentro: un banner de 320×50 y uno
   de 160×600 no deforman la rejilla ni se recortan. */
.cv-inicio__mini { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: var(--nc-s-2); overflow: hidden;
  border: 1px solid var(--nc-line); border-radius: var(--nc-r-md);
  background: var(--nc-inset); transition: border-color var(--nc-t); }
.cv-inicio__mini > img, .cv-inicio__mini > canvas { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.cv-inicio__mini.is-sin-previa { background: repeating-linear-gradient(45deg, var(--nc-inset), var(--nc-inset) 8px, var(--nc-surface-2) 8px, var(--nc-surface-2) 16px); }
.cv-inicio__abrir:hover .cv-inicio__mini { border-color: var(--nc-accent); }
.cv-inicio__abrir:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 3px; border-radius: var(--nc-r-md); }
.cv-inicio__tnombre { font-size: var(--nc-fs-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .cv-tab, .cv-tab__x, .cv-tab-mas, .cv-tab-desborde, .cv-inicio__formato, .cv-inicio__mini { transition: none; }
}

/* --- Los avisos, flotando ------------------------------------------------------
 * Vivían en el flujo, así que aparecer empujaba la pantalla entera hacia abajo: el lienzo brincaba y
 * lo que estabas mirando se movía de lugar. Flotan abajo a la derecha, con la forma de toast del kit,
 * y ya no le quitan sitio a nada. El texto y el manejo siguen siendo de cada pantalla. */
#cv-aviso, #met-aviso, #leads-aviso, #proy-aviso, #cal-aviso, #ideas-aviso,
#marcas-aviso, #usuarios-aviso, #usuarios-link, #ed-listo {
  position: fixed; right: var(--nc-s-5); bottom: var(--nc-s-5); z-index: var(--nc-z-toast);
  margin: 0; width: max-content; max-width: min(420px, calc(100vw - 32px));
  padding: var(--nc-s-4);
  border-left: 3px solid var(--nc-text-3);
  border-radius: var(--nc-r-lg);
  background: var(--nc-surface-2);
  box-shadow: var(--nc-edge), var(--nc-shadow-3);
  animation: nc-toast-in var(--nc-t-slow) both;
}
#ed-listo.nc-notice--danger,
#cv-aviso.nc-notice--danger, #met-aviso.nc-notice--danger, #leads-aviso.nc-notice--danger,
#proy-aviso.nc-notice--danger, #cal-aviso.nc-notice--danger, #ideas-aviso.nc-notice--danger,
#marcas-aviso.nc-notice--danger, #usuarios-aviso.nc-notice--danger { border-left-color: var(--nc-danger); }
/* En Canvas el control de zoom vive abajo al centro: el aviso sube un poco para no taparlo. */
/* Con un documento abierto, la barra de zoom flota abajo: los avisos suben para no taparla. */
#canvas-shell:not(.sin-documentos) #cv-aviso,
body:has(#canvas-shell:not(.hidden):not(.sin-documentos)) #ed-listo { bottom: calc(var(--nc-s-5) + 48px); }
@media (max-width: 700px) {
  #cv-aviso, #met-aviso, #leads-aviso, #proy-aviso, #cal-aviso, #ideas-aviso,
  #marcas-aviso, #usuarios-aviso, #usuarios-link, #ed-listo { left: var(--nc-s-4); right: var(--nc-s-4); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #cv-aviso, #met-aviso, #leads-aviso, #proy-aviso, #cal-aviso, #ideas-aviso,
  #marcas-aviso, #usuarios-aviso, #usuarios-link, #ed-listo { animation: none; }
}

/* --- Pantalla de inicio: elegir piezas para borrar ------------------------------
 * La casilla aparece al pasar por encima o al enfocar con el teclado, y se queda fija en cuanto hay
 * algo elegido: mientras no borres nada, la rejilla se ve limpia. */
.cv-inicio__selec { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--nc-s-1); }
.cv-inicio__cuenta { display: inline-flex; align-items: center; gap: 2px; padding-left: var(--nc-s-2); border-radius: var(--nc-r-sm); background: var(--nc-accent-soft); color: var(--nc-text); }
.cv-inicio__selec .nc-divider--v { height: 18px; margin: 0 var(--nc-s-1); }
.cv-inicio__selec [hidden] { display: none !important; }   /* .nc-btn le ganaba a [hidden]: «Cambiar el nombre» salía con varias */
.cv-inicio__marca { position: absolute; top: 6px; left: 6px; display: grid; place-items: center;
  width: 22px; height: 22px; cursor: pointer; opacity: 0; transition: opacity var(--nc-t); }
.cv-inicio__marca input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cv-inicio__casilla { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--nc-r-sm);
  border: 1px solid var(--nc-line-strong); background: rgba(0, 0, 0, .55); color: transparent;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cv-inicio__tarjeta:hover .cv-inicio__marca,
.cv-inicio__marca:focus-within,
.cv-inicio__rejilla.is-eligiendo .cv-inicio__marca { opacity: 1; }
.cv-inicio__marca:focus-within .cv-inicio__casilla { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.cv-inicio__tarjeta.is-marcada .cv-inicio__casilla { border-color: var(--nc-accent); background: var(--nc-accent); color: #fff; }
.cv-inicio__tarjeta.is-marcada .cv-inicio__mini { border-color: var(--nc-accent); }
@media (prefers-reduced-motion: reduce) { .cv-inicio__marca { transition: none; } }

/* --- Canvas: el nombre del diseño en la barra -----------------------------------
 * Un nombre largo empujaba los botones fuera de la barra. Se corta con puntos suspensivos y el pincel
 * para cambiarlo aparece al pasar por encima o al llegar con el teclado. */
.cv-bar__titulo { display: inline-flex; align-items: center; gap: var(--nc-s-2); min-width: 0; }
.cv-doc-nombre { min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--nc-text-2); font-weight: 400; font-size: var(--nc-fs-2); }
.cv-renombrar { opacity: 0; transition: opacity var(--nc-t); }
.cv-bar__titulo:hover .cv-renombrar, .cv-renombrar:focus-visible { opacity: 1; }
@media (max-width: 1100px) { .cv-doc-nombre { max-width: 18ch; } }
@media (prefers-reduced-motion: reduce) { .cv-renombrar { transition: none; } }

/* El formulario del nombre: una sola columna con aire entre el campo y su nota. */
.cv-nombre-form { display: grid; gap: var(--nc-s-3); }


/* --- Panel de la capa, 25 sep 2026 --------------------------------------------------------------------
 * Grupos separados por líneas de lado a lado (no metidas en el margen), y los títulos todos en el mismo
 * estilo: «Lienzo» iba en mayúsculas espaciadas y el nombre de la capa no, y se leían como dos sistemas. */
#cv-panel-capa .cv-divide, #cv-panel-capa .cv-seccion {
  margin-inline: calc(-1 * var(--nc-s-4)); padding-inline: var(--nc-s-4);
  border-top: 1px solid var(--nc-line); padding-top: var(--nc-s-4); }
#cv-panel-capa .cv-seccion.cv-luz { padding-top: var(--nc-s-3); }
.cv-bloque { display: grid; gap: var(--nc-s-3); }
#canvas-shell .cv-sec-cab { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 650; letter-spacing: 0; text-transform: none; }
#canvas-shell .cv-sec-cab .nc-subtle { color: var(--nc-text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
#canvas-shell .cv-seccion > summary { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 650; letter-spacing: 0; text-transform: none; }
#canvas-shell .cv-imagen__t { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 650; }
.cv-bloque__t { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 650; }
/* Fusión en una fila, como Opacidad y Desenfoque: etiqueta a la izquierda, control a la derecha */
.cv-ctrl--fila { align-items: center; }
.cv-ctrl--fila .nc-input { width: 148px; justify-self: end; }

/* --- De Archivo a Video: la calidad -------------------------------------------- */
.vid-opciones { display: grid; gap: var(--nc-s-2); margin-top: var(--nc-s-3); }
.vid-opcion { position: relative; display: grid; gap: 2px; padding: var(--nc-s-3) var(--nc-s-3) var(--nc-s-3) calc(var(--nc-s-3) + 26px);
  border: 1px solid var(--nc-line); border-radius: var(--nc-r-md); cursor: pointer;
  transition: border-color var(--nc-t-fast) ease, background-color var(--nc-t-fast) ease; }
.vid-opcion:hover { background: var(--nc-surface-2); }
.vid-opcion:has(input:checked) { border-color: var(--nc-accent); background: color-mix(in srgb, var(--nc-accent) 8%, transparent); }
.vid-opcion input { position: absolute; left: var(--nc-s-3); top: calc(var(--nc-s-3) + 2px); margin: 0; accent-color: var(--nc-accent); }
.vid-opcion__t { font-weight: 600; }
.vid-luts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-3); margin-top: var(--nc-s-4); }
.vid-lut { display: grid; gap: var(--nc-s-1); min-width: 0; }
.vid-lut select { width: 100%; }
#vid-lut-nota:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .vid-opcion { transition: none; } }

/* --- Adjuntos de una tarea (proyectos.js, adjuntos.php) -------------------------------------------- */
.proy-adj__cuenta { color: var(--nc-text-3); font-weight: 400; }
.proy-adj__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nc-s-2); }
.proy-adj__lista:empty { display: none; }
.proy-adj__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--nc-s-3); padding: var(--nc-s-2); border-radius: var(--nc-r-md); background: var(--nc-inset); box-shadow: inset 0 0 0 1px var(--nc-line); }
.proy-adj__miniatura { width: 44px; height: 44px; border-radius: var(--nc-r-sm); background: var(--nc-surface-3); display: grid; place-items: center; overflow: hidden; color: var(--nc-text-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.proy-adj__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proy-adj__texto { display: grid; gap: 2px; min-width: 0; }
.proy-adj__nombre { color: var(--nc-text); font-size: var(--nc-fs-2); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.proy-adj__nombre:hover { text-decoration: underline; }
.proy-adj__meta { color: var(--nc-text-3); font-size: var(--nc-fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy-adj__acciones { display: flex; gap: 2px; }
.proy-adj__item--subiendo { opacity: .75; }
.proy-adj__barra { height: 3px; border-radius: 2px; background: var(--nc-surface-3); overflow: hidden; }
.proy-adj__barra > i { display: block; height: 100%; background: var(--nc-accent); transition: width var(--nc-t-fast); }
.proy-adj__agregar { display: flex; flex-wrap: wrap; gap: var(--nc-s-2); align-items: center; }
.proy-adj__url { flex: 1 1 220px; min-width: 0; gap: var(--nc-s-2); }
.proy-adj__url input { min-width: 0; }
#proy-modal.proy-adj--soltar .nc-dialog__body { box-shadow: inset 0 0 0 2px var(--nc-accent); border-radius: var(--nc-r-md); }
@media (prefers-reduced-motion: reduce) { .proy-adj__barra > i { transition: none; } }

/* Importar de Canvas (Video): las piezas guardadas del cliente, para meter una como objeto inteligente */
.dlg-piezas-video { width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 720px); gap: 12px; padding: 20px; }
.dlg-piezas-video__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.dlg-piezas-video__ayuda { margin: 0; }
.dlg-piezas-video__modo { margin: 10px 0 2px; width: max-content; }
.dlg-piezas-video__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow-y: auto; min-height: 120px; }
.dlg-piezas-video__pieza { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--nc-line); border-radius: var(--nc-r-md); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.dlg-piezas-video__pieza:hover { border-color: var(--nc-accent); }
.dlg-piezas-video__pieza[aria-busy="true"] { opacity: .6; cursor: progress; }
.dlg-piezas-video__previa { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--nc-r-sm); background: var(--nc-surface-2); overflow: hidden; }
.dlg-piezas-video__previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dlg-piezas-video__nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════ Estudio y fuentes ══════════════ */
.estudio-modal { width: min(560px, calc(100vw - 32px)); }
.est-cuerpo { display: grid; gap: var(--nc-s-5, 20px); }
.est-seccion, .est-form { display: grid; gap: var(--nc-s-3, 12px); }
.est-cab { display: grid; gap: 4px; }
.est-fuentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.est-fuente { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--nc-line, #26262a); border-radius: var(--nc-r-md, 8px); }
.est-fuente__info { display: grid; gap: 2px; min-width: 0; }
.est-fuente__nombre { font-weight: 600; font-size: 14px; }
.est-fuente__estado--mal { color: var(--nc-danger, #ff5a5f); }
.est-fuente__acciones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.est-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-fila--fin { display: flex; justify-content: flex-end; gap: 8px; }
.est-error { margin: 0; color: var(--nc-danger, #ff5a5f); font-size: 13px; }
@media (max-width: 520px) { .est-fila { grid-template-columns: 1fr; } .est-fuente { flex-direction: column; } }

/* --- Gastos de marketing (docs/PLAN-GASTOS-MKT.md) ---------------------------------------------
 * Arriba lo que importa: cuánto le queda a cada cliente. Una tarjeta por cliente y la bolsa al final. */
.gastos-shell, .cotizaciones-shell { display: flex; flex-direction: column; gap: var(--nc-s-4); padding: var(--nc-s-4); min-height: 0; overflow-y: auto; }
/* Cotizaciones: la lista y el editor (el documento de la derecha usa cotizacion-doc.css, que es un papel blanco) */
.cot-lista-vista, .cot-editor { display: flex; flex-direction: column; gap: var(--nc-s-4); min-height: 0; }
.cot-editor { flex: 1; }
.cot-tabla tbody tr { cursor: pointer; }
.cot-tabla tbody tr:hover td { background: var(--nc-surface-2); }
.cot-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* el encabezado de Total a la derecha como sus montos (.nc-table th lo dejaba a la izquierda) y aire antes
 * de la fecha: un monto alineado a la derecha quedaba pegado a la columna de al lado */
.cot-tabla th.cot-num { text-align: right; }
.cot-tabla th.cot-num, .cot-tabla td.cot-num { padding-right: var(--nc-s-8); }
/* encabezados que ordenan: se ven como el encabezado de siempre; el activo, con su flecha */
.cot-orden { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cot-orden:hover, .cot-orden.is-activo { color: var(--nc-text); }
.cot-orden:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; border-radius: 2px; }
.cot-tabla th[aria-sort="ascending"] .cot-orden::after { content: '↑'; }
.cot-tabla th[aria-sort="descending"] .cot-orden::after { content: '↓'; }
/* el ⋯ de cada fila: a la orilla, se asoma al pasar el mouse (siempre en el teléfono) */
.cot-tabla .cot-acciones { width: 40px; padding-top: var(--nc-s-2); padding-bottom: 0; text-align: right; }
.cot-tabla .cot-mas { opacity: 0; }
.cot-tabla tr:hover .cot-mas, .cot-tabla .cot-mas:focus-visible, .cot-tabla .cot-mas[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .cot-tabla .cot-mas { opacity: 1; } }
/* versiones en otro idioma: la etiqueta ES/EN junto al nombre y la hija colgando de su original con un conector */
.cot-nombre { display: inline-flex; align-items: center; gap: var(--nc-s-2); }
.cot-idioma { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border: 1px solid var(--nc-line-strong); border-radius: 4px; background: transparent; color: var(--nc-text-3); font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .06em; }
.cot-tabla tr.cot-con-versiones td { border-bottom-color: transparent; }
.cot-tabla tr.cot-version td:first-child { position: relative; padding-left: 44px; }
.cot-tabla tr.cot-version td:first-child::before { content: ''; position: absolute; left: 24px; top: -6px; height: calc(50% + 6px); width: 12px; border-left: 1px solid var(--nc-line-strong); border-bottom: 1px solid var(--nc-line-strong); border-bottom-left-radius: 4px; }
.cot-idiomas { display: inline-flex; gap: 4px; flex: none; }
.cot-idiomas .cot-idioma { height: 22px; min-width: 30px; cursor: pointer; }
.cot-idiomas .cot-idioma:hover { color: var(--nc-text); border-color: var(--nc-text-3); }
.cot-idiomas .cot-idioma[aria-pressed="true"] { color: var(--nc-accent); border-color: var(--nc-accent); }
.cot-idiomas .cot-idioma:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 1px; }
/* Enviar: el diálogo con el correo y los PDF que van adjuntos */
.cot-enviar { width: min(560px, calc(100vw - 32px)); }
.cot-enviar__form { display: flex; flex-direction: column; gap: var(--nc-s-3); }
.cot-enviar__de { margin: 0; }
.cot-enviar__adjuntos { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cot-enviar__adjuntos > div { display: flex; flex-direction: column; gap: 6px; }
.cot-enviar__adjunto { display: inline-flex; align-items: center; gap: var(--nc-s-2); cursor: pointer; }
.cot-menu { position: fixed; z-index: var(--nc-z-popover); min-width: 200px; }
.cot-menu .cot-menu-borrar { margin-top: 4px; padding-top: 4px; box-shadow: inset 0 1px 0 var(--nc-line); }
.cot-menu .nc-menu__item[aria-checked="true"] { color: var(--nc-accent); }
.cot-menu .nc-menu__item[aria-checked="true"]::after { content: '✓'; margin-left: auto; }
.cot-menu .nc-menu__item { display: flex; align-items: center; }
.cot-tabla .cot-sub { display: block; color: var(--nc-text-3); font-size: var(--nc-fs-2); }
.cot-titulo { margin: 0; min-width: 0; max-width: 40ch; }
.cot-panes { flex: 1; min-height: 70vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nc-s-4); }
.cot-md { width: 100%; height: 100%; min-height: 70vh; resize: none; box-sizing: border-box; padding: var(--nc-s-4); border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg);
  background: var(--nc-surface-1); color: var(--nc-text); font-family: var(--nc-font-mono); font-size: var(--nc-fs-3); line-height: 1.6; tab-size: 2; }
.cot-md:focus { outline: none; border-color: var(--nc-accent); }
.cot-vista { min-height: 70vh; overflow: auto; padding: var(--nc-s-4); border-radius: var(--nc-r-lg); background: var(--nc-surface-2); }
.cot-hoja { max-width: 760px; margin: 0 auto; padding: 48px 56px; background: #fff; border-radius: var(--nc-r-sm); box-shadow: var(--nc-shadow-2); }
@media (max-width: 860px) {
  .cot-panes { grid-template-columns: minmax(0, 1fr); }
  .cot-hoja { padding: 28px 22px; }
  .cot-tabla th:nth-child(5), .cot-tabla td:nth-child(5) { display: none; }
}
.gastos-barra { display: flex; align-items: center; gap: var(--nc-s-3); flex-wrap: wrap; }
.gastos-barra .nc-h2 { margin: 0; }
.gastos-periodo { display: inline-flex; align-items: center; gap: 2px; }
.gastos-periodo__nombre { min-width: 220px; text-align: center; font-weight: 600; font-size: var(--nc-fs-4); }
.gastos-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nc-s-3); }
.gastos-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: var(--nc-s-4); border-radius: var(--nc-r-lg); background: var(--nc-surface-1); border: 1px solid var(--nc-line); }
.gastos-tarjeta__nombre { margin: 0 0 4px; font-size: var(--nc-fs-3); font-weight: 600; color: var(--nc-text-2); }
.gastos-tarjeta__num { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gastos-tarjeta__num span { font-size: var(--nc-fs-3); font-weight: 500; color: var(--nc-text-3); letter-spacing: 0; }
.gastos-tarjeta__sub { margin: 0; font-size: var(--nc-fs-2); color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.gastos-tarjeta--pasado .gastos-tarjeta__num { color: var(--nc-danger); }
.gastos-tarjeta--bolsa { background: transparent; border-style: dashed; }
.gastos-tarjeta--vacia { align-items: flex-start; justify-content: center; background: transparent; border-style: dashed; }
.gastos-pres-btn { align-self: flex-start; margin-top: var(--nc-s-2); }
.gastos-uso { height: 4px; border-radius: 2px; margin-top: var(--nc-s-2); overflow: hidden; }
.gastos-uso span { display: block; height: 100%; border-radius: 2px; background: var(--nc-accent); }
.gastos-tarjeta--pasado .gastos-uso span { background: var(--nc-danger); }
.gastos-t { margin: 0 0 var(--nc-s-2); font-size: var(--nc-fs-3); font-weight: 650; color: var(--nc-text-2); }
.gastos-sub { display: block; font-size: var(--nc-fs-2); color: var(--nc-text-3); font-weight: 400; }
.gastos-monto { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.gastos-vacio { list-style: none; color: var(--nc-text-3); font-size: var(--nc-fs-3); padding: var(--nc-s-3); margin: 0; }
.gastos-pendientes { padding: var(--nc-s-3) var(--nc-s-4); border-radius: var(--nc-r-lg); border: 1px solid color-mix(in srgb, var(--nc-warning, #e8a33d) 45%, transparent); background: color-mix(in srgb, var(--nc-warning, #e8a33d) 7%, transparent); }
.gastos-pend-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nc-s-2); }
.gastos-pend { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--nc-s-3); }
.gastos-pend__botones { display: inline-flex; gap: var(--nc-s-1); }
.gastos-cuerpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--nc-s-4); align-items: start; }
.gastos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gastos-fila { width: 100%; min-height: 52px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px 110px; align-items: center; gap: var(--nc-s-3);
  padding: 8px var(--nc-s-3); border: 0; border-radius: var(--nc-r-md); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background var(--nc-t-fast); }
.gastos-fila:hover:not(:disabled) { background: var(--nc-surface-2); }
.gastos-fila:disabled { cursor: default; }
.gastos-fila:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
.gastos-fila__fecha { color: var(--nc-text-3); font-size: var(--nc-fs-2); font-variant-numeric: tabular-nums; }
.gastos-fila__que strong { font-weight: 600; }
.gastos-fila__cat { color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.gastos-cats { display: flex; flex-direction: column; gap: var(--nc-s-3); }
.gastos-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; font-size: var(--nc-fs-3); }
.gastos-uso--cat { grid-column: 1 / -1; margin-top: 2px; }
.gastos-form { display: flex; flex-direction: column; gap: var(--nc-s-3); min-width: min(440px, 80vw); }
.gastos-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-3); }
.gastos-form__check { display: inline-flex; align-items: center; gap: var(--nc-s-2); font-size: var(--nc-fs-3); }
.gastos-reparto { border: 0; padding: 0; margin: 0; }
.gastos-reparto #gastos-p-reparto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-3); }
.gastos-borrar { color: var(--nc-danger); }
@media (max-width: 760px) {
  .gastos-cuerpo { grid-template-columns: 1fr; }
  .gastos-fila { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .gastos-fila__cat { display: none; }
  .gastos-pend { grid-template-columns: minmax(0, 1fr) auto; }
  .gastos-pend__botones { grid-column: 1 / -1; }
}

/* --- Giro, esquinas y recorte (5 oct 2026) ------------------------------------------------------
 * La caja de selección gira con la capa (su origen es el centro, igual que el de la capa). El tirador
 * de girar va arriba al centro, fuera de la caja, y solo con una capa elegida. */
.cv-capa, .cv-seleccion { transform-origin: 50% 50%; }
.cv-giro { margin-top: var(--nc-s-2); }
.cv-girar { position: absolute; left: 50%; top: calc(-30px * var(--inversa, 1)); width: calc(12px * var(--inversa, 1)); height: calc(12px * var(--inversa, 1));
  margin-left: calc(-6px * var(--inversa, 1)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) var(--nc-accent);
  pointer-events: auto; cursor: grab; display: none; }
.cv-girar::after { content: ''; position: absolute; left: 50%; top: 100%; width: calc(1px * var(--inversa, 1)); height: calc(18px * var(--inversa, 1)); background: var(--nc-accent); }
.cv-girar:active { cursor: grabbing; background: var(--nc-accent); }
.cv-seleccion.puede-girar:not(.is-grupo):not(.is-nodos) .cv-girar { display: block; }
.cv-recortar-fila { display: flex; align-items: center; gap: var(--nc-s-2); margin-top: var(--nc-s-2); font-size: var(--nc-fs-2); color: var(--nc-text-2); cursor: pointer; }
.cv-recortar-fila:has(input:disabled) { opacity: .5; cursor: default; }
.cv-item--recortada { padding-left: 18px; }
.cv-item--hija.cv-item--recortada { padding-left: calc(18px + 16px * var(--prof, 1)); }
.cv-item-recorte { position: absolute; margin-left: -14px; color: var(--nc-text-3); font-size: 12px; line-height: 1; }

/* Carriles pintados (8 oct 2026, como en LightCraft): la temperatura va de azul a amarillo, el matiz de verde
 * a magenta y la saturación de gris a color. Conservan la marca del cero de los deslizadores de dos lados. */
#cv-panel-capa .nc-slider.nc-slider--bipolar[data-carril] { background-size: 1px 18px, auto; background-position: center center, 0 0; background-clip: border-box, content-box; }
#cv-panel-capa .nc-slider[data-carril="temp"] { background-image: linear-gradient(var(--nc-text-3), var(--nc-text-3)), linear-gradient(to right, #3f6fd6, #8fa6cf 45%, #c9c3a6 55%, #e1b23c); }
#cv-panel-capa .nc-slider[data-carril="matiz"] { background-image: linear-gradient(var(--nc-text-3), var(--nc-text-3)), linear-gradient(to right, #3f9f57, #9db59f 45%, #b9a0b7 55%, #b549ad); }
#cv-panel-capa .nc-slider[data-carril="sat"] { background-image: linear-gradient(var(--nc-text-3), var(--nc-text-3)), linear-gradient(to right, #6f6f6f, #9a8f8f 50%, #d2443f); }
/* el número de un deslizador se escribe con un clic */
#cv-panel-capa .cv-ctrl output, #cv-encuadre .cv-ctrl output { cursor: text; border-radius: var(--nc-r-xs); padding: 0 3px; margin-right: -3px; }
#cv-panel-capa .cv-ctrl output:hover, #cv-encuadre .cv-ctrl output:hover { background: var(--nc-overlay); color: var(--nc-text); }
.cv-ctrl__escribir { width: 5.5em; padding: 1px 4px; border: 1px solid var(--nc-accent); border-radius: var(--nc-r-xs); background: var(--nc-surface-2); color: var(--nc-text);
  font: inherit; font-variant-numeric: tabular-nums; text-align: right; outline: none; }

/* Ver y medir (8 oct 2026): botones de Luz y color y lo que pintan sobre la foto */
.cv-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 2px 0 var(--nc-s-2); }
.cv-vistas .nc-btn { justify-content: space-between; }
.cv-vistas .nc-btn { gap: 5px; padding-inline: 7px; }
.cv-vistas .nc-btn[aria-pressed="true"] { background: var(--nc-accent-soft); color: var(--nc-text); box-shadow: inset 0 0 0 1px var(--nc-accent); }
.cv-vistas kbd { padding: 0 4px; border-radius: var(--nc-r-xs); background: var(--nc-overlay); color: var(--nc-text-3); font: 10px/1.5 var(--nc-font-mono, ui-monospace, monospace); }
.cv-quemados { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; image-rendering: pixelated; }
.cv-division { position: absolute; top: 0; bottom: 0; width: calc(14px * var(--inversa, 1)); margin-left: calc(-7px * var(--inversa, 1)); z-index: 5; cursor: ew-resize; touch-action: none; }
.cv-division::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(2px * var(--inversa, 1)); margin-left: calc(-1px * var(--inversa, 1)); background: #fff; box-shadow: 0 0 calc(3px * var(--inversa, 1)) rgb(0 0 0 / .6); }
.cv-division::after { content: ''; position: absolute; top: 50%; left: 50%; width: calc(22px * var(--inversa, 1)); height: calc(22px * var(--inversa, 1)); transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.cv-vista-etq { position: absolute; top: calc(10px * var(--inversa, 1)); z-index: 5; padding: calc(3px * var(--inversa, 1)) calc(8px * var(--inversa, 1)); border-radius: calc(4px * var(--inversa, 1));
  background: rgb(0 0 0 / .62); color: #fff; font: 600 calc(11px * var(--inversa, 1))/1.2 var(--nc-font, system-ui); pointer-events: none; }
.cv-vista-etq--izq { left: calc(10px * var(--inversa, 1)); }
.cv-vista-etq--der { right: calc(10px * var(--inversa, 1)); }
.cv-gotero, .cv-gotero * { cursor: crosshair !important; }
.cv-histo-lienzo { border-radius: var(--nc-r-sm); }

/* Histograma (8 oct 2026, segunda vuelta como LightCraft): marco con los avisos de recorte como botones */
.cv-histo-marco { position: relative; }
.cv-histo-recorte { position: absolute; top: 5px; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px;
  background: rgb(0 0 0 / .45); color: rgb(255 255 255 / .28); cursor: pointer; transition: background var(--nc-t-fast), color var(--nc-t-fast); }
.cv-histo-recorte svg { width: 12px; height: 12px; fill: currentColor; }
.cv-histo-recorte--sombras { left: 5px; }
.cv-histo-recorte--luces { right: 5px; }
.cv-histo-recorte:hover { background: rgb(0 0 0 / .7); color: rgb(255 255 255 / .6); }
.cv-histo-recorte--sombras.is-recorta { color: rgb(79 134 247); }
.cv-histo-recorte--luces.is-recorta { color: rgb(255 96 90); }
.cv-histo-recorte[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px currentColor; background: rgb(0 0 0 / .7); }
.cv-histo-recorte:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 1px; }

/* Cabecera del histograma: título, canales y quitar niveles en una fila (8 oct 2026) */
.cv-histo-cab { gap: var(--nc-s-2); }
.cv-histo-cab > span { margin-right: auto; }
.cv-histo-cab .nc-btn--icon { width: 24px; height: 24px; }
.cv-dir__rotulo { margin-right: auto; }
.cv-dir__num { flex: 0 0 72px; }
.cv-dir.hidden { display: none; }

/* --- Degradado libre (8 oct 2026) -------------------------------------------
   Los puntos viven en la caja de selección, como el eje: coordenadas de la
   capa y grosores compensados con el zoom. */
.cv-relleno-cab { display: flex; align-items: center; gap: var(--nc-s-2); }
.cv-relleno-nombre { color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-libre { display: grid; gap: var(--nc-s-2); }
.cv-libre-puntos { position: absolute; inset: 0; pointer-events: none; }
.cv-libre-punto { position: absolute; width: calc(16px * var(--inversa, 1)); height: calc(16px * var(--inversa, 1));
  margin: calc(-8px * var(--inversa, 1)) 0 0 calc(-8px * var(--inversa, 1));
  background: var(--c); border: calc(2px * var(--inversa, 1)) solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.5), 0 calc(1px * var(--inversa, 1)) calc(4px * var(--inversa, 1)) rgba(0,0,0,.35);
  pointer-events: auto; cursor: grab; transition: transform .08s ease, opacity .08s ease; }
.cv-libre-punto:hover { transform: scale(1.2); }
.cv-libre-punto.is-sel { box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.5), 0 0 0 calc(4px * var(--inversa, 1)) var(--nc-accent); }
.cv-libre-punto:active { cursor: grabbing; }
.cv-libre-punto.va-a-salir { opacity: .35; }
.cv-libre-anillo { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  border: calc(1.5px * var(--inversa, 1)) dashed rgba(255,255,255,.9);
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.35); pointer-events: none; }
/* la manija del alcance va sobre el anillo, a la derecha; con alcance 0 se aparta del punto para poder agarrarla */
.cv-libre-asa { position: absolute; width: calc(10px * var(--inversa, 1)); height: calc(10px * var(--inversa, 1));
  margin: calc(-5px * var(--inversa, 1)) 0 0 calc(-5px * var(--inversa, 1));
  transform: translateX(max(var(--r), calc(18px * var(--inversa, 1))));
  background: #fff; border: calc(2px * var(--inversa, 1)) solid var(--nc-accent); border-radius: 50%;
  pointer-events: auto; cursor: ew-resize; }
.cv-libre-asa:hover { background: var(--nc-accent); }
.cv-seleccion.is-grupo .cv-libre-puntos { display: none; }

/* --- Paradas, punto medio y radial sobre el lienzo (8 oct 2026, fase 2) ------
   El riel vive en la caja de selección (coordenadas de la capa); los tamaños se
   compensan con el zoom, como los nodos y el eje. */
.cv-riel { position: absolute; inset: 0; pointer-events: none; }
.cv-riel-parada { position: absolute; width: calc(14px * var(--inversa, 1)); height: calc(14px * var(--inversa, 1));
  margin: calc(-7px * var(--inversa, 1)) 0 0 calc(-7px * var(--inversa, 1));
  border: calc(2px * var(--inversa, 1)) solid #fff; border-radius: calc(4px * var(--inversa, 1));
  background-image: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(var(--nc-checker-1) 0% 25%, var(--nc-checker-2) 0% 50%);
  background-size: auto, calc(6px * var(--inversa, 1)) calc(6px * var(--inversa, 1));
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.55), 0 calc(1px * var(--inversa, 1)) calc(3px * var(--inversa, 1)) rgba(0,0,0,.4);
  pointer-events: auto; cursor: grab; transition: transform .08s ease, opacity .08s ease; }
.cv-riel-parada:hover { transform: scale(1.2); }
.cv-riel-parada.is-sel { box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.55), 0 0 0 calc(3.5px * var(--inversa, 1)) var(--nc-accent); }
.cv-riel-parada.va-a-salir { opacity: .35; }
.cv-riel-medio, .cv-medio { position: absolute; width: calc(9px * var(--inversa, 1)); height: calc(9px * var(--inversa, 1));
  margin: calc(-4.5px * var(--inversa, 1)) 0 0 calc(-4.5px * var(--inversa, 1)); transform: rotate(45deg);
  background: #fff; box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.55);
  pointer-events: auto; cursor: ew-resize; }
.cv-riel-medio:hover, .cv-medio:hover { background: var(--nc-accent); }
/* en la rampa del panel el rombo va arriba de la barra, sin zoom que compensar */
.cv-medio { --inversa: 1; top: -7px; z-index: 1; }

.cv-radial { position: absolute; inset: 0; pointer-events: none; }
.cv-radial-elipse { position: absolute; border-radius: 50%;
  border: calc(1.5px * var(--inversa, 1)) dashed rgba(255,255,255,.9);
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.35); }
.cv-radial-linea { position: absolute; height: calc(2px * var(--inversa, 1)); margin-top: calc(-1px * var(--inversa, 1));
  transform-origin: 0 50%; background: #fff; box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.5); }
.cv-radial-asa { position: absolute; width: calc(10px * var(--inversa, 1)); height: calc(10px * var(--inversa, 1));
  margin: calc(-5px * var(--inversa, 1)) 0 0 calc(-5px * var(--inversa, 1));
  background: #fff; border: calc(2px * var(--inversa, 1)) solid var(--nc-accent); border-radius: 50%;
  pointer-events: auto; cursor: grab; transition: transform .08s ease; }
.cv-radial-asa:hover { transform: scale(1.3); background: var(--nc-accent); }
/* el centro es un anillo y el foco el punto de adentro, como en Illustrator: el borde mueve, el punto descentra */
.cv-radial-asa--centro { width: calc(18px * var(--inversa, 1)); height: calc(18px * var(--inversa, 1));
  margin: calc(-9px * var(--inversa, 1)) 0 0 calc(-9px * var(--inversa, 1)); cursor: move;
  background: transparent; border: calc(3px * var(--inversa, 1)) solid #fff;
  box-shadow: 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.5), inset 0 0 0 calc(1px * var(--inversa, 1)) rgba(0,0,0,.4); }
.cv-radial-asa--centro:hover { background: transparent; border-color: var(--nc-accent); }
.cv-radial-asa--fin { border-radius: calc(3px * var(--inversa, 1)); width: calc(12px * var(--inversa, 1)); height: calc(12px * var(--inversa, 1));
  margin: calc(-6px * var(--inversa, 1)) 0 0 calc(-6px * var(--inversa, 1)); }
.cv-radial-asa--foco { width: calc(7px * var(--inversa, 1)); height: calc(7px * var(--inversa, 1));
  margin: calc(-3.5px * var(--inversa, 1)) 0 0 calc(-3.5px * var(--inversa, 1)); background: var(--nc-accent); border-color: #fff; }
.cv-seleccion.is-grupo .cv-radial { display: none; }
/* En un texto o un trazo el relleno es solo color o degradado: el CSS a la medida es cosa de las formas */
.cv-relleno.es-de-texto .cv-css-avanzado { display: none; }

/* --- Pluma y nodos (8 oct 2026, fase 4) -------------------------------------- */
.cv-nodos__marco { fill: color-mix(in srgb, var(--nc-accent) 12%, transparent); stroke: var(--nc-accent); stroke-dasharray: 4 3; pointer-events: none; }
/* el cursor dice qué hará el clic de la pluma */
.pluma-cierra, .pluma-cierra * { cursor: cell !important; }
.pluma-sigue, .pluma-sigue * { cursor: copy !important; }
/* con una herramienta de dibujo puesta, la caja de selección no se agarra: la punta de un trazo cae justo
   en su esquina y el clic de la pluma la redimensionaba en vez de seguir el trazo */
.is-dibujando .cv-tirador, .is-dibujando .cv-girar { pointer-events: none; }

/* --- Combinar formas (fase 5) ------------------------------------------------- */
.cv-combinar { display: flex; align-items: center; gap: 2px; }
.cv-combinar__t { margin-right: auto; color: var(--nc-text-3); font-size: var(--nc-fs-1); }

/* --- Barra flotante y pistas (8 oct 2026, fase 6) ----------------------------
   La barra va como la píldora del zoom: vidrio sobre la obra. La pista es una
   línea chica abajo a la izquierda; las teclas en negrita. */
.cv-barra { position: absolute; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--nc-r-pill); background: var(--nc-glass); box-shadow: var(--nc-edge), var(--nc-shadow-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--nc-text-2); white-space: nowrap; }
.cv-barra .nc-btn { border-radius: var(--nc-r-pill); color: var(--nc-text); }
.cv-barra__sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--nc-line); }
body.cv-en-gesto .cv-barra { visibility: hidden; }
.cv-pista { position: absolute; left: var(--nc-s-4); bottom: var(--nc-s-4); z-index: 20; margin: 0; text-align: left;
  max-width: calc(50% - 160px); padding: 6px 10px; border-radius: var(--nc-r-md);
  background: var(--nc-glass); box-shadow: var(--nc-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--nc-text-3); font-size: var(--nc-fs-1); line-height: 1.45; pointer-events: none; }
.cv-pista:empty { display: none; }
.cv-pista b { color: var(--nc-text-2); font-weight: 600; }
@media (max-width: 1100px) { .cv-pista { display: none; } }

/* --- Alinear y transformar (8 oct 2026, fase 7) ---------------------------------
   Fuera de cada esquina, una zona invisible que gira; dentro, un punto que redondea. */
.cv-girar-zona { position: absolute; display: none; pointer-events: auto; width: calc(18px * var(--inversa, 1)); height: calc(18px * var(--inversa, 1));
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E") 11 11, crosshair; }
.cv-girar-zona[data-esquina="nw"] { left: calc(-22px * var(--inversa, 1)); top: calc(-22px * var(--inversa, 1)); }
.cv-girar-zona[data-esquina="ne"] { right: calc(-22px * var(--inversa, 1)); top: calc(-22px * var(--inversa, 1)); }
.cv-girar-zona[data-esquina="sw"] { left: calc(-22px * var(--inversa, 1)); bottom: calc(-22px * var(--inversa, 1)); }
.cv-girar-zona[data-esquina="se"] { right: calc(-22px * var(--inversa, 1)); bottom: calc(-22px * var(--inversa, 1)); }
.cv-seleccion.puede-girar:not(.is-grupo):not(.is-nodos) .cv-girar-zona { display: block; }
.cv-esquina { position: absolute; display: none; pointer-events: auto; width: calc(9px * var(--inversa, 1)); height: calc(9px * var(--inversa, 1));
  margin: calc(-4.5px * var(--inversa, 1)) 0 0 calc(-4.5px * var(--inversa, 1)); border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) var(--nc-accent); cursor: pointer; }
.cv-esquina:hover { background: var(--nc-accent); }
.cv-seleccion.con-esquinas:not(.is-nodos) .cv-esquina { display: block; }
.cv-voltear-v .nc-i { transform: rotate(90deg); }
.cv-repartir-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-2); color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-repartir-fila .nc-num { flex: 0 0 96px; }
.cv-medidas { position: absolute; inset: 0; pointer-events: none; z-index: 9999; }
.cv-medida-linea { position: absolute; background: #ff3d71; min-width: calc(1px * var(--inversa, 1)); min-height: calc(1px * var(--inversa, 1)); }
.cv-medida-num { position: absolute; transform: translate(-50%, -50%); padding: calc(1px * var(--inversa, 1)) calc(5px * var(--inversa, 1));
  border-radius: calc(4px * var(--inversa, 1)); background: #ff3d71; color: #fff; font: 600 calc(11px * var(--inversa, 1)) / 1.2 var(--nc-font); white-space: nowrap; }

/* --- Constructor de formas (8 oct 2026, fase 8) --------------------------------
   Las partes encima de todo; la que se toca se ilumina, con Alt en rojo (se borra). */
.cv-constructor { position: absolute; left: 0; top: 0; overflow: visible; z-index: 9999; pointer-events: none; }
.cv-constructor__parte { fill: transparent; stroke: rgba(255,255,255,.85); stroke-dasharray: 4 3; pointer-events: all; cursor: copy; }
.cv-constructor__parte:hover { fill: color-mix(in srgb, var(--nc-accent) 30%, transparent); }
.cv-constructor__parte.is-tomada { fill: color-mix(in srgb, var(--nc-accent) 45%, transparent); stroke: var(--nc-accent); stroke-dasharray: none; }
.cv-constructor.borra .cv-constructor__parte.is-tomada { fill: color-mix(in srgb, var(--nc-danger) 50%, transparent); stroke: var(--nc-danger); }
.cv-seleccion.is-constructor .cv-tirador, .cv-seleccion.is-constructor .cv-girar, .cv-seleccion.is-constructor .cv-girar-zona,
.cv-seleccion.is-constructor .cv-esquina { display: none !important; }

/* Capas (14 oct 2026, lo aprendido de VectorCraft y Figma): filas parejas, el seguro abierto solo
 * aparece al pasar el ratón, una raya dice dónde cae lo que arrastras y el grupo entero se marca
 * cuando lo vas a meter dentro. */
.cv-item { position: relative; min-height: 28px; }
.cv-item-seguro[aria-pressed="false"] { opacity: 0; transition: opacity var(--nc-t-fast); }
.cv-item:hover .cv-item-seguro, .cv-item-seguro:focus-visible { opacity: 1; }
@media (hover: none) { .cv-item-seguro[aria-pressed="false"] { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cv-item-seguro[aria-pressed="false"] { transition: none; } }
.cv-item.is-moviendo { opacity: .35; background: transparent; }
.cv-item.cae-antes::after, .cv-item.cae-despues::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 1px; background: var(--nc-accent); pointer-events: none; }
.cv-item.cae-antes::after { top: -1px; }
.cv-item.cae-despues::after { bottom: -1px; }
.cv-item--hija.cae-antes::after, .cv-item--hija.cae-despues::after { left: calc(6px + 16px * var(--prof, 1)); }
.cv-item.cae-fuera::after { left: 6px; }
.cv-item.cae-grupo { background: var(--nc-accent-soft); border-radius: 0; }
.cv-item.cae-dentro { box-shadow: inset 0 0 0 1px var(--nc-accent); border-radius: var(--nc-r-sm); }
.cv-item-mini--grupo { display: grid; place-items: center; background: transparent; color: var(--nc-text-3); }
.cv-item--grupo.tiene-sel .cv-item-cuantas { color: var(--nc-accent); }
.cv-arrastre-etiqueta { position: fixed; left: 0; top: 0; z-index: var(--nc-z-tooltip); max-width: 220px; padding: 3px 8px; border-radius: var(--nc-r-sm); background: var(--nc-surface-3); box-shadow: var(--nc-shadow-2); color: var(--nc-text); font-size: var(--nc-fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* --- Menú en tres grupos (14 oct 2026, nav-grupos.js) ---------------------------------------------
 * El grupo donde estás enseña sus secciones (la barra segmentada de siempre, con su nombre al lado);
 * los otros quedan cerrados: su nombre y la última sección que usaste, y tocarlos te lleva ahí. */
.ws-nav { display: flex; align-items: center; gap: var(--nc-s-2); min-width: 0; }
.ws-grupo { display: flex; align-items: center; gap: var(--nc-s-1); min-width: 0; }
.ws-grupo + .ws-grupo { padding-left: var(--nc-s-2); box-shadow: inset 1px 0 0 var(--nc-line); }
.ws-grupo:not(.is-activo) .ws-grupo-items { display: none; }
.ws-grupo-items .ws-icono { display: none; }
.ws-grupo-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--nc-r-sm);
  background: transparent; color: var(--nc-text-2); font: 500 var(--nc-fs-2)/1 var(--nc-font); white-space: nowrap; cursor: pointer;
  transition: background var(--nc-t), color var(--nc-t); }
.ws-grupo-btn:hover { background: var(--nc-raise-hover); color: var(--nc-text); }
.ws-grupo-btn:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
.ws-grupo-btn .nc-i { width: 14px; height: 14px; }
.ws-grupo-ultima { color: var(--nc-text-3); }
.ws-grupo-ultima:not(:empty)::before { content: '· '; }
/* el grupo abierto: su botón queda como etiqueta y las secciones hablan */
.ws-grupo.is-activo .ws-grupo-btn { padding: 0 var(--nc-s-1) 0 6px; color: var(--nc-text-3); cursor: default; pointer-events: none; }
.ws-grupo.is-activo .ws-grupo-btn .nc-i, .ws-grupo.is-activo .ws-grupo-ultima { display: none; }
.ws-menu { position: fixed; z-index: var(--nc-z-popover); min-width: 210px; }
.ws-menu__titulo { padding: 4px 10px 6px; color: var(--nc-text-3); font-size: var(--nc-fs-1); font-weight: 600; }
.ws-menu .nc-menu__item { height: 40px; }
.ws-menu .nc-menu__item .nc-i { width: 16px; height: 16px; }
.ws-menu .nc-menu__item[aria-checked="true"] { color: var(--nc-accent); }
.cot-vacio { margin: var(--nc-s-6) auto; max-width: 520px; }

/* En el teléfono: abajo, los tres grupos (icono, nombre y la sección), y cada uno abre su menú. */
@media (max-width: 860px) {
  .ws-nav { position: fixed; inset: auto 0 0 0; z-index: var(--nc-z-dock); gap: 0; margin: 0; max-width: none;
    padding: var(--nc-s-2) 0 max(var(--nc-s-2), env(safe-area-inset-bottom));
    background: var(--nc-surface-1); box-shadow: inset 0 1px 0 var(--nc-line), var(--nc-shadow-3); }
  .ws-grupo { flex: 1 1 0; }
  .ws-grupo + .ws-grupo { padding-left: 0; box-shadow: none; }
  .ws-grupo .ws-grupo-items { display: none; }
  .ws-grupo-btn, .ws-grupo.is-activo .ws-grupo-btn { flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: auto; min-height: 48px;
    padding: var(--nc-s-1) 0; pointer-events: auto; cursor: pointer; color: var(--nc-text-2); font-size: var(--nc-fs-1); font-weight: 600; }
  .ws-grupo.is-activo .ws-grupo-btn { color: var(--nc-accent); }
  .ws-grupo-btn .nc-i, .ws-grupo.is-activo .ws-grupo-btn .nc-i { display: block; width: 20px; height: 20px; }
  .ws-grupo-ultima, .ws-grupo.is-activo .ws-grupo-ultima { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 500; color: var(--nc-text-3); }
  .ws-grupo-ultima:not(:empty)::before { content: none; }
}

/* --- Clientes en Negocio (15 oct 2026, clientes-panel.js) -------------------------------------------
 * La lista va como Cotizaciones (misma tabla, mismo ⋯ y mismo menú); la ficha, en tarjetas que se acomodan
 * solas: en la compu dos o tres columnas, en el teléfono una. */
.clientes-shell { display: flex; flex-direction: column; gap: var(--nc-s-4); padding: var(--nc-s-4); min-height: 0; overflow-y: auto; }
.cli-filtros { display: flex; gap: var(--nc-s-1); flex-wrap: wrap; }
.cli-buscar { width: 200px; }
.cli-buscar .nc-i { width: 14px; height: 14px; color: var(--nc-text-3); flex: none; }
.cli-sin-alta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-s-2); padding: var(--nc-s-3) var(--nc-s-4);
  border-radius: var(--nc-r-md); background: var(--nc-surface-2); box-shadow: var(--nc-edge); }
.cli-sin-alta__t { display: inline-flex; align-items: center; gap: 6px; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.cli-sin-alta__t .nc-i, .cli-sin-alta__b .nc-i { width: 14px; height: 14px; }
.cli-sin-alta__b { display: inline-flex; align-items: center; gap: 6px; }
.cli-nombre { display: inline-flex; align-items: center; gap: var(--nc-s-3); }
/* el avatar: la sigla sobre un tono que sale de ella (siempre el mismo para el mismo cliente) */
.cli-avatar { --cli-h: 260; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--nc-r-sm);
  background: hsl(var(--cli-h) 45% 32%); color: hsl(var(--cli-h) 80% 92%); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.cli-ficha .gastos-barra { gap: var(--nc-s-3); }
.cli-insignias { display: inline-flex; gap: var(--nc-s-1); }
/* dos columnas: lo de trabajo (marca, Drive, Archivo) y al lado lo de la relación (contacto, equipo, negocio) */
.cli-ficha-cuerpo { display: flex; flex-direction: column; gap: var(--nc-s-4); margin-top: var(--nc-s-4); }
.cli-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--nc-s-4); align-items: start; }
.cli-col { display: flex; flex-direction: column; gap: var(--nc-s-4); min-width: 0; }
.cli-tarjeta { width: 100%; display: flex; flex-direction: column; gap: var(--nc-s-3); align-items: flex-start; }
.cli-tarjeta:hover { box-shadow: var(--nc-edge); }
.cli-tarjeta > * { max-width: 100%; }
.cli-tarjeta__t { margin: 0; color: var(--nc-text-3); font-size: var(--nc-fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cli-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--nc-s-4); margin: 0; width: 100%; }
.cli-datos dt { color: var(--nc-text-3); }
.cli-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cli-datos a, .cli-notas a { color: var(--nc-accent); }
.cli-rojo { color: var(--nc-danger); }
.cli-notas { margin: 0; white-space: pre-wrap; color: var(--nc-text-2); }
.cli-atiende { margin: 0; }
.cli-lista { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; }
.cli-lista__a { display: flex; align-items: center; gap: var(--nc-s-2); padding: 8px 0; color: var(--nc-text); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--nc-line); }
.cli-lista li:last-child .cli-lista__a { box-shadow: none; }
.cli-lista__a:hover { color: var(--nc-accent); }
.cli-lista__a .nc-truncate { flex: 1; min-width: 0; }
.cli-lista__a .nc-i { width: 14px; height: 14px; flex: none; color: var(--nc-text-3); }
.cli-lista__a .cot-num { padding-right: 0; }
.cli-logo { width: 100%; display: grid; place-items: center; padding: var(--nc-s-4); border-radius: var(--nc-r-sm);
  background: repeating-conic-gradient(var(--nc-surface-3, #2a2a2a) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }
.cli-logo img { max-width: 100%; max-height: 96px; object-fit: contain; }
.cli-colores { display: flex; flex-wrap: wrap; gap: 6px; }
.cli-color { width: 24px; height: 24px; border-radius: var(--nc-r-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.cli-falta-permiso { margin: 0; padding: var(--nc-s-3); border-radius: var(--nc-r-sm); background: var(--nc-overlay); color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.cli-falta-permiso code { overflow-wrap: anywhere; color: var(--nc-text); }
.cli-conectar { display: flex; align-items: flex-end; gap: var(--nc-s-2); width: 100%; }
.cli-conectar .nc-field { flex: 1; }
.cli-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cli-pie { margin: 0; }
/* Lo que impide trabajar a un cliente: solo sale si hay algo */
.cli-bloquea { display: flex; flex-direction: column; gap: var(--nc-s-2); box-shadow: inset 3px 0 0 var(--nc-warning); }
.cli-bloquea__t { display: flex; align-items: center; gap: var(--nc-s-2); margin: 0; font-size: var(--nc-fs-3); font-weight: 600; }
.cli-bloquea__t .nc-i { width: 16px; height: 16px; color: var(--nc-warning); }
.cli-bloquea ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cli-bloquea li { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s-4); padding: var(--nc-s-2) 0; }
.cli-bloquea li + li { box-shadow: inset 0 1px 0 var(--nc-line); }
.cli-bloquea p { margin: 0; color: var(--nc-text-2); }
.cli-bloquea .nc-btn { flex: none; }
/* Marca: logo a la izquierda, sus datos a la derecha */
.cli-marca { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--nc-s-4); align-items: center; width: 100%; }
.cli-marca .cli-logo { height: 120px; padding: var(--nc-s-3); }
.cli-logo--vacio { color: var(--nc-text-3); font-size: var(--nc-fs-2); background: var(--nc-overlay); }
.cli-filas { margin: 0; width: 100%; display: flex; flex-direction: column; }
.cli-filas--borde { box-shadow: inset 0 1px 0 var(--nc-line); padding-top: var(--nc-s-2); }
.cli-fila { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--nc-s-3); padding: 6px 0; }
.cli-fila dt { color: var(--nc-text-3); font-size: var(--nc-fs-2); }
.cli-fila dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cli-falta { color: var(--nc-warning); }
/* una carpeta que todavía no tiene: punteada, con para qué sirve y su botón */
.cli-lista__opcional { display: flex; align-items: center; gap: var(--nc-s-2); padding: 8px 0; color: var(--nc-text-3); }
.cli-lista__opcional .nc-i { width: 14px; height: 14px; flex: none; opacity: .6; }
.cli-lista__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cli-lista__txt .nc-subtle { font-size: var(--nc-fs-1); }
.cli-sub { margin: 0; font-size: var(--nc-fs-2); font-weight: 600; color: var(--nc-text-2); }
.cli-sub:not(:first-of-type) { margin-top: var(--nc-s-2); padding-top: var(--nc-s-3); box-shadow: inset 0 1px 0 var(--nc-line); width: 100%; }
@media (max-width: 1000px) { .cli-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cli-marca { grid-template-columns: 1fr; }
  .cli-fila { grid-template-columns: 96px minmax(0, 1fr); }
  .cli-fila__accion { grid-column: 1 / -1; }
  .cli-bloquea li { flex-direction: column; align-items: flex-start; }
}
.cli-cargando { margin: 0; }
.cli-form__fila { grid-template-columns: 1fr 120px; }
.cli-f-ayuda { margin: -4px 0 0; font-size: var(--nc-fs-1); }
.cli-f-grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--nc-s-3); }
.cli-f-grupo legend { padding: 0; margin-bottom: var(--nc-s-2); }
@media (max-width: 860px) {
  .cli-buscar { width: 100%; order: 5; }
  .cli-tabla th:nth-child(2), .cli-tabla td:nth-child(2), .cli-tabla th:nth-child(4), .cli-tabla td:nth-child(4) { display: none; }
  .cli-form__fila { grid-template-columns: 1fr 96px; }
}
.cli-tabla td { vertical-align: middle; }
.cli-tarjeta p { margin: 0; }
/* en el teléfono la barra de grupos va fija abajo: lo último de la ficha no queda debajo de ella */
@media (max-width: 860px) {
  .clientes-shell, .cotizaciones-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .cli-ficha .gastos-barra { flex-wrap: wrap; }
}
/* Exportar desde Tus piezas: los dos grupos (formato y tamaño) con su título, para que no se lean como uno */
.cv-exp-grupo { margin: var(--nc-s-3) 0 var(--nc-s-1); }
.cv-exp-tamanos { grid-template-columns: 1fr 1fr; }
.cv-exp-grupo + .vid-opciones { margin-top: 0; }

/* El panel de la derecha y el cajón del degradado (Nocturne §4.33, 15 oct 2026): el cajón cubre el panel
   entero, por eso el panel (que se desplaza) va dentro de un anfitrión que no se desplaza. */
.cv-panel-host { min-height: 0; display: flex; flex-direction: column; }
.cv-panel-host > .cv-panel { flex: 1 1 auto; }
#canvas-shell.sin-documentos .cv-panel-host { display: none; }
.cv-grad-cajon__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s-3); align-content: start; }
.cv-grad-cajon__cuerpo > [id^="cv-grad-slot"] { display: contents; }
.cv-grad-ceja { margin: var(--nc-s-2) 0 0; }
.cv-grad-resumen { display: grid; gap: var(--nc-s-2); }
#cv-grad-previa { cursor: pointer; }

/* Plegar y desplegar con el chevron del kit (#nc-chevron-down), nunca triángulos de texto ni el marcador
   del navegador: a la derecha, gira al abrir (como .nc-inspector__summary). 15 oct 2026. */
.cv-chevron { margin-left: auto; color: var(--nc-text-3); transition: transform var(--nc-t); }
details[open] > summary > .cv-chevron { transform: rotate(180deg); }
.cv-css-avanzado summary { display: flex; align-items: center; gap: var(--nc-s-2); }
@media (prefers-reduced-motion: reduce) { .cv-chevron { transition: none; } }

/* Perfil (15 oct 2026, como LightCraft): el color base arriba de Luz y color; la Cantidad del Look debajo. */
.cv-perfil { display: grid; gap: var(--nc-s-2); padding-bottom: var(--nc-s-3); border-bottom: 1px solid var(--nc-line); }
.cv-perfil__fila { display: flex; align-items: center; gap: var(--nc-s-3); min-width: 0; }
.cv-perfil__t { flex: none; color: var(--nc-text-2); font-size: var(--nc-fs-2); }
.cv-perfil__btn { margin-left: auto; min-width: 0; max-width: 72%; justify-content: space-between; }
.cv-perfil__btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-perfil-lista { display: grid; }
.cv-perfil-lista__t { margin: 4px 10px 2px; color: var(--nc-text-3); font-size: var(--nc-fs-1); }
.cv-perfil-check { visibility: hidden; color: var(--nc-accent); }
.nc-menu__item[aria-checked="true"] .cv-perfil-check { visibility: visible; }
.nc-menu__item[hidden] { display: none; }
/* el ⋯ del título no empuja al chevron: los dos a la derecha, juntos */
.cv-seccion > summary .nc-btn + .cv-chevron { margin-left: 2px; }

/* Aerosol (15 oct 2026): el dibujo de la capa con su aerosol, en lugar de la capa; y sus pines en el lienzo */
.cv-aerosol { position: absolute; pointer-events: none; transform-origin: center; }
.cv-aer-ctrl { display: grid; gap: var(--nc-s-2); }
.cv-aer-pines { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--nc-s-2); font-size: var(--nc-fs-2); color: var(--nc-text-2); }
.cv-aer-pines output { color: var(--nc-text); font-variant-numeric: tabular-nums; }

.cv-pines { position: absolute; inset: 0; z-index: 9999; overflow: visible; pointer-events: none; }
.cv-pines.is-agregando { pointer-events: auto; cursor: copy; }
.cv-pines__aros { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cv-pin-aro { fill: none; stroke: rgb(255 255 255 / .9); stroke-width: calc(1.5px * var(--inversa, 1));
  filter: drop-shadow(0 0 calc(1px * var(--inversa, 1)) rgb(0 0 0 / .7)); }
.cv-pin-aro.is-elegido { stroke: var(--nc-accent); }
/* el agarre del aro: un trazo ancho e invisible encima del que se ve */
.cv-pin-aro__agarre { fill: none; stroke: transparent; stroke-width: calc(14px * var(--inversa, 1)); pointer-events: stroke; cursor: ew-resize; }
.cv-pin { position: absolute; width: calc(14px * var(--inversa, 1)); height: calc(14px * var(--inversa, 1)); transform: translate(-50%, -50%);
  border-radius: 999px; background: #fff; cursor: move; touch-action: none; pointer-events: auto;
  box-shadow: 0 0 0 calc(1.5px * var(--inversa, 1)) rgb(0 0 0 / .5), 0 1px 4px rgb(0 0 0 / .5); }
.cv-pin.is-elegido { background: var(--nc-accent); }
.cv-pin-val { position: absolute; transform: translate(calc(10px * var(--inversa, 1)), calc(-22px * var(--inversa, 1)));
  padding: calc(1px * var(--inversa, 1)) calc(6px * var(--inversa, 1)); border-radius: calc(6px * var(--inversa, 1));
  background: rgb(0 0 0 / .65); color: #fff; font-size: calc(11px * var(--inversa, 1)); font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap; }

/* Efectos: la fila abierta y sus parámetros pegados debajo */
.cv-efectos .cv-ef-fila { cursor: pointer; }
.cv-efectos .cv-ef-fila small { margin-left: var(--nc-s-2); color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.cv-ef-pop .cv-ef-param { display: grid; gap: var(--nc-s-2); }
/* Vidrio: la fila de la luz con su rueda */
.cv-vid-luz { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--nc-s-3); font-size: var(--nc-fs-2); color: var(--nc-text-2); }
.cv-vid-luz output { color: var(--nc-text); font-variant-numeric: tabular-nums; }
/* Color del lienzo: sin color, la muestra enseña el cuadriculado de transparente y no hay con qué quitarlo */
.cv-fondo.is-vacio #cv-fondo-quitar { display: none; }
.cv-fondo.is-vacio .nc-swatch { background: repeating-conic-gradient(#d0d0d0 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.cv-fondo.is-vacio .nc-swatch::-webkit-color-swatch { opacity: 0; }

/* El Archivo propio de un cliente (22 oct 2026): sus botones en la barra y en el vacío */
.archivo-propio { display: inline-flex; gap: var(--nc-s-1); align-items: center; }
.vacio-acciones { display: flex; gap: var(--nc-s-2); justify-content: center; flex-wrap: wrap; margin: var(--nc-s-3) 0 var(--nc-s-2); }
/* La ficha editable del visor (Archivo propio de un cliente) */
.lb-ficha { display: flex; flex-direction: column; gap: var(--nc-s-3); margin-top: var(--nc-s-3); }
.lb-ficha__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s-2); }
.lb-ficha__acciones { display: flex; align-items: center; gap: var(--nc-s-2); flex-wrap: wrap; }
.lb-ficha textarea { width: 100%; resize: vertical; min-height: 64px; font: inherit; background: transparent; border: 0; color: inherit; }
.lb-ficha__quitar { color: var(--nc-danger); }

/* --- Tablas en Canvas (4 nov 2026) --- */
.cv-capa--tabla { overflow: visible; }
.cv-tabla { position: absolute; inset: 0; pointer-events: auto; }
.cv-tabla td { outline: none; }
.cv-capa--tabla.is-escribiendo td[contenteditable="true"], .cv-capa--tabla.is-escribiendo td[contenteditable="plaintext-only"] { cursor: text; -webkit-user-select: text; user-select: text; box-shadow: inset 0 0 0 calc(2px * var(--inversa, 1)) var(--nc-accent); }
.cv-capa--tabla.is-tabla-editando { cursor: cell; }
.cv-tabla-cortes { position: absolute; inset: 0; pointer-events: none; }
.cv-tabla-corte { position: absolute; pointer-events: auto; display: none; z-index: 2; }
.cv-capa--tabla.is-sel .cv-tabla-corte { display: block; }
.cv-tabla-corte--v { top: 0; bottom: 0; width: calc(10px * var(--inversa, 1)); margin-left: calc(-5px * var(--inversa, 1)); cursor: col-resize; }
.cv-tabla-corte--h { left: 0; right: 0; height: calc(10px * var(--inversa, 1)); margin-top: calc(-5px * var(--inversa, 1)); cursor: row-resize; }
.cv-tabla-corte:hover::after, body.cv-moviendo .cv-tabla-corte:active::after { content: ''; position: absolute; background: var(--nc-accent); }
.cv-tabla-corte--v:hover::after { top: 0; bottom: 0; left: 50%; width: calc(2px * var(--inversa, 1)); transform: translateX(-50%); }
.cv-tabla-corte--h:hover::after { left: 0; right: 0; top: 50%; height: calc(2px * var(--inversa, 1)); transform: translateY(-50%); }
.cv-tabla-sel { position: absolute; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 calc(2px * var(--inversa, 1)) var(--nc-accent); background: color-mix(in srgb, var(--nc-accent) 12%, transparent); }
.cv-tabla-sel.hidden { display: none; }
.cv-tb-dim { display: grid; grid-template-columns: auto auto 2ch auto 1fr auto 2ch auto; align-items: center; gap: var(--nc-s-1); }
.cv-tb-dim .nc-caption:nth-of-type(2) { justify-self: end; }
.cv-tb-dim output { text-align: center; font-variant-numeric: tabular-nums; color: var(--nc-text); }
.cv-tb-dim .nc-btn { min-width: 28px; font-size: 16px; }
.cv-tb-acciones { display: flex; align-items: center; gap: var(--nc-s-1); }
.cv-tb-acciones #cv-tb-mas { margin-left: auto; }
.cv-tb-lados { display: flex; flex-wrap: wrap; gap: var(--nc-s-1) var(--nc-s-3); }
.cv-tabla-caja > *:not(summary) + *:not(menu) { margin-top: var(--nc-s-2); }
#cv-tb-pista { margin: var(--nc-s-1) 0 0; }

/* --- Auto layout (4 nov 2026) --- */
.cv-auto-ctrl { display: grid; gap: var(--nc-s-2); margin-top: var(--nc-s-2); }
.cv-auto-nota { margin: 0; }
.cv-auto-raya { position: absolute; z-index: 9999; pointer-events: none; height: calc(3px * var(--inversa, 1)); margin-top: calc(-1.5px * var(--inversa, 1)); background: var(--nc-accent); border-radius: 2px; }
.cv-auto-raya--h { height: auto; width: calc(3px * var(--inversa, 1)); margin-top: 0; margin-left: calc(-1.5px * var(--inversa, 1)); }
.cv-auto-raya.hidden { display: none; }

/* Línea hecha con una forma delgada: solo los tiradores de las puntas (ver marcarSeleccion en canvas.js) */
.cv-seleccion.is-delgada-h .cv-tirador:not([data-esquina="w"]):not([data-esquina="e"]),
.cv-seleccion.is-delgada-v .cv-tirador:not([data-esquina="n"]):not([data-esquina="s"]) { display: none; }

/* --- Capa de video (6 nov 2026) ----------------------------------------------------------------------
   El video es una foto cuyo relleno se mueve: el marco de la capa es la máscara y Encuadrar lo corre
   dentro. La tira del tramo va abajo del lienzo, de vidrio como la barra flotante y el zoom. */
.cv-capa canvas.cv-cuadro { display: block; pointer-events: none; }
/* el play chico sobre la esquina de la miniatura, en la lista de capas */
.cv-item-video { flex: none; width: 10px; height: 10px; margin: 12px 0 0 calc(-1 * var(--nc-s-2) - 8px); display: grid; place-items: center;
  border-radius: 50%; background: var(--nc-accent); color: #fff; box-shadow: 0 0 0 1.5px var(--nc-surface-1); pointer-events: none; }
.cv-item-video svg { width: 6px; height: 6px; }
.cv-acervo-foto { position: relative; }
.cv-acervo-foto__play { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; pointer-events: none; }
.cv-acervo-foto__play svg { width: 8px; height: 8px; }

.cv-vtira { position: absolute; z-index: 25; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  gap: var(--nc-s-3); padding: 10px 12px 6px; border-radius: var(--nc-r-lg); background: var(--nc-glass);
  box-shadow: var(--nc-edge), var(--nc-shadow-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cv-vtira.hidden { display: none; }
body.cv-en-gesto .cv-vtira { visibility: hidden; }
.cv-vtira .nc-btn { border-radius: var(--nc-r-pill); color: var(--nc-text); margin-top: 10px; }
.cv-vtira__centro { display: grid; gap: 4px; min-width: 0; }
.cv-vtira__tira { position: relative; height: 54px; border-radius: var(--nc-r-sm); overflow: hidden; background: var(--nc-inset);
  box-shadow: var(--nc-edge); cursor: pointer; touch-action: none; user-select: none; }
.cv-vtira__tira canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-vtira__velo { position: absolute; top: 0; bottom: 0; background: rgba(8, 8, 12, .66); pointer-events: none; }
.cv-vtira__rango { position: absolute; top: 0; bottom: 0; border-radius: var(--nc-r-xs); cursor: grab; box-shadow: inset 0 0 0 2px var(--nc-accent); }
.cv-vtira__asa { position: absolute; top: 0; bottom: 0; width: 10px; background: var(--nc-accent); cursor: ew-resize; display: grid; place-items: center; }
.cv-vtira__asa::after { content: ""; width: 2px; height: 14px; border-radius: 1px; background: rgba(255,255,255,.85); }
.cv-vtira__asa--ini { left: 0; border-radius: var(--nc-r-xs) 0 0 var(--nc-r-xs); }
.cv-vtira__asa--fin { right: 0; border-radius: 0 var(--nc-r-xs) var(--nc-r-xs) 0; }
.cv-vtira__cabeza { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.cv-vtira__portada { position: absolute; top: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--nc-accent); pointer-events: none; }
.cv-vtira__portada.hidden { display: none; }
.cv-vtira__marcas { display: flex; justify-content: space-between; font-size: var(--nc-fs-1); color: var(--nc-text-3); font-variant-numeric: tabular-nums; }
.cv-vtira__lado { display: grid; justify-items: end; gap: 2px; }
.cv-vtira__lado .nc-btn { margin-top: 0; }
.cv-vtira__reloj { margin-top: 6px; min-width: 92px; text-align: right; font-size: var(--nc-fs-1); color: var(--nc-text-2); font-variant-numeric: tabular-nums; }

.cv-video { display: grid; gap: var(--nc-s-3); }
.cv-video .cv-grupo { display: flex; align-items: center; justify-content: space-between; }
.cv-video .cv-recortar-fila { margin-top: 0; }
.cv-video__tiempos { grid-template-columns: 1fr 1fr; }
.cv-video__tiempos .nc-num__key { font-size: 11px; min-width: 34px; }
.cv-video .nc-btn { justify-self: start; }

/* Los atajos (⇧⌘C, ⌥⌘V) en la letra del sistema (6 nov 2026): la monoespaciada del kit no trae ⇧ ni ⌘, el navegador
   los sacaba de otra letra y se veían rotos y de otro tamaño. Las cifras siguen alineadas con tabular-nums. */
.nc-menu__shortcut { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Muestras de la marca por grupo (6 nov 2026): el nombre del grupo ocupa su renglón y las muestras siguen debajo. */
.cv-color-grupo { flex-basis: 100%; margin-top: 2px; font-size: var(--nc-fs-1); font-weight: 600; color: var(--nc-text-3); line-height: 1.3; }
.cv-color-grupo:first-child { margin-top: 0; }

/* Marca › Colores por grupo (6 nov 2026): cada grupo es un bloque con su nombre, para qué es, sus logos si es
   una sub-marca y su cuadrícula de colores. Sin grupos, el bloque solo es la cuadrícula de siempre. */
.mk-grupos { display: grid; gap: var(--nc-s-5); }
.mk-grupo { display: grid; gap: var(--nc-s-3); padding: var(--nc-s-4); border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg); min-width: 0;
  transition: border-color var(--nc-t-fast), background-color var(--nc-t-fast); }
.mk-grupo--solo { padding: 0; border: 0; }
.mk-grupo--suelto { border-style: dashed; }
.mk-grupo--soltar { border-color: var(--nc-accent); background: color-mix(in srgb, var(--nc-accent) 6%, transparent); }
.mk-grupo__cab { display: flex; align-items: center; gap: var(--nc-s-2); min-height: 32px; }
.mk-grupo__nombre { flex: 1; min-width: 0; margin: 0; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--nc-r-sm); background: transparent;
  color: var(--nc-text); font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -.01em; transition: border-color var(--nc-t-fast), background-color var(--nc-t-fast); }
.mk-grupo__nombre--fijo { padding-left: 8px; color: var(--nc-text-3); font-size: var(--nc-fs-3); font-weight: 600; }
input.mk-grupo__nombre:hover:not(:disabled) { border-color: var(--nc-line); }
input.mk-grupo__nombre:focus { outline: none; border-color: var(--nc-accent); background: var(--nc-inset); }
.mk-grupo__quitar { opacity: 0; transition: opacity var(--nc-t-fast); }
.mk-grupo:hover .mk-grupo__quitar, .mk-grupo__quitar:focus-visible { opacity: 1; }
.mk-grupo__desc { display: block; width: 100%; min-width: 0; margin: -6px 0 0; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--nc-r-sm);
  background: transparent; color: var(--nc-text-2); font: inherit; font-size: var(--nc-fs-3); line-height: 1.45; resize: none; overflow: hidden;
  field-sizing: content; min-height: calc(1.45em + 10px); transition: border-color var(--nc-t-fast), background-color var(--nc-t-fast); }
.mk-grupo__desc::placeholder { color: var(--nc-text-3); }
.mk-grupo__desc:hover:not(:disabled) { border-color: var(--nc-line); }
.mk-grupo__desc:focus { outline: none; border-color: var(--nc-accent); background: var(--nc-inset); }
.mk-grupo__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-s-2); padding-left: 8px; }
.mk-ficha { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 4px; border: 1px solid var(--nc-line); border-radius: var(--nc-r-sm);
  background: var(--nc-surface-1); font-size: var(--nc-fs-2); color: var(--nc-text-2); max-width: 260px; }
.mk-ficha img { width: 38px; height: 22px; object-fit: contain; border-radius: 3px; background: #f4f4f1; padding: 2px; box-sizing: border-box; }
.mk-ficha > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ficha__x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--nc-r-sm); background: transparent; color: var(--nc-text-3); cursor: pointer; }
.mk-ficha__x:hover { background: var(--nc-raise-hover); color: var(--nc-text); }
.mk-ficha-sumar { width: auto; }
.mk-color[draggable="true"] { cursor: grab; }
.mk-menu { position: fixed; list-style: none; margin: 0; }
.mk-menu__check { visibility: hidden; }
.nc-menu__item[aria-checked="true"] .mk-menu__check { visibility: visible; }
@media (hover: none) { .mk-grupo__quitar { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mk-grupo, .mk-grupo__nombre, .mk-grupo__desc, .mk-grupo__quitar { transition: none; } }
button.mk-nuevo { background: transparent; font: inherit; font-size: var(--nc-fs-3); font-weight: 500; }
.mk-ficha-sumar { width: auto; flex: 0 0 auto; }
.mk-ficha-sumar select { width: auto; min-width: 110px; }