/* RENDERO: pantalla oscura con el estudio blanco al centro (como imagine.io y la página de Vercel).
   Reglas de diseño en programa/DISENO.md: los colores y los tamaños de letra viven SOLO aquí en :root (y los temas en
   apariencia.js); el resto de la hoja usa var(--…). pruebas/revisar.sh no deja agregar colores ni tamaños sueltos. */
:root {
  /* colores de la pantalla (los cambia Configuración › Apariencia, apariencia.js); de fábrica, el tema Azul marino */
  --fondo: #0e1622;
  --barra: #122033;
  --panel: #15243a;
  --panel2: #1c2e49;
  --panel3: #243958;
  --borde: #2d4263;
  --texto: #e9eff8;
  --texto2: #a9b9ce;
  --texto3: #8798af;          /* 23-oct: antes #7a8ba3 (3.9:1 sobre las tarjetas); ahora 5.3 sobre el panel y 4.6 sobre las tarjetas */
  /* el borde de las cajas de escribir (23-oct): con --borde (1.35:1) casi no se veían; este da 3:1 o más en los 5 temas
     (WCAG 1.4.11). Sale del tema: no hay que ponerlo en apariencia.js */
  --borde-caja: color-mix(in srgb, var(--texto3) 80%, var(--panel2));
  /* el ámbar de la marca (el brillo del ojo del logo), fijo: ya no se elige (22-oct, noche, Federico). En los temas
     claros apariencia.js pone uno más oscuro (#945500) para que se vea sobre blanco */
  --acento: #ffb020;
  --acento2: #bf8418;
  --turquesa: #1fc8b8;       /* la orilla del aviso de éxito (la pieza elegida va en --acento desde el 23-oct) */
  --acento-texto: #23252b;   /* grafito sobre el ámbar */
  --fondo-3d: #ffffff;        /* lo cambia Configuración › Apariencia (apariencia.js) */
  --aviso: #e6b85c;
  --peligro: #e3836a;
  /* el interruptor de encender y apagar (29-oct, Daniel: «solo color verde y gris»): fijos en todos los temas */
  --encendido: #2fb36b;
  --apagado: #8a9097;
  --perilla: #ffffff;
  /* los grupos de los costos (30-oct, Centro de costos y botón «$»): 6 tonos en orden fijo, revisados para quien no
     distingue colores (validate_palette.js, sobre los paneles oscuros: todo pasa). El tema Día pone los suyos
     (apariencia.js). «Gastos de fábrica» va en --texto3. El texto nunca va de estos colores: siempre con su nombre */
  --serie1: #3987e5; --serie2: #d95926; --serie3: #199e70; --serie4: #c98500; --serie5: #d55181; --serie6: #008300;
  --acento-hover: color-mix(in srgb, var(--acento) 80%, #ffffff);
  --acento-suave: color-mix(in srgb, var(--acento) 20%, transparent);   /* el cuadrito de la pestaña elegida (como Canva) */
  /* fijos (no cambian con el tema): sombras, velos y lo que va encima del 3D blanco */
  --borde-fuerte: #4a525a;
  --borde-suave: #0003;
  --fondo-muestra: #ffffff;    /* detrás de las fotos de tela, patrones y dibujos */
  --fondo-codigo: #0e1012;
  --sombra-chica: 0 1px 4px #0001;
  --sombra: 0 10px 30px #0008;
  --sombra-lado: 10px 0 30px #0007;
  --sombra-grande: 0 20px 60px #000a;
  --velo: #0009;
  --velo-camara: #0b0f1473;
  --sobre3d: #ffffffe6;          /* listas, botones y avisos encima del 3D */
  --sobre3d-borde: #d8dbdf;
  --sobre3d-texto: #3b4148;
  --sobre3d-texto2: #6b7279;
  --sobre3d-hover: #eef0f2;
  --oscuro-3d: #1d2024e6;
  --oscuro-3d-texto: #eeeeee;
  /* el logo de Renderlook (22-oct): las letras van con --texto (siguen el tema); los ojos son de la marca y no cambian */
  --logo-ojo: #ffffff;
  --logo-pupila: #23252b;     /* grafito, el color de la marca */
  --logo-brillo: #ffb020;     /* ámbar: el brillo de luz en el ojo */
  /* letra: una sola escala de 6 tamaños (22-oct; antes había 12 sueltos de 11 a 30 px) */
  --tam-mini: 11px;      /* títulos de grupo en mayúsculas, nombres de pestañas, teclas */
  --tam-chico: 12px;     /* ayudas, etiquetas, tarjetas, notas */
  --tam-normal: 13px;    /* el texto de siempre */
  --tam-titulo: 16px;    /* títulos de panel y de ventana, nombre del colchón */
  --tam-cifra: 18px;     /* cifras de la ficha */
  --tam-grande: 28px;    /* el «+» de subir */
  --tam-caja: 16px;      /* SOLO en pantallas de tocar: la letra de las cajas de escribir (con menos, el iPhone acerca la página al tocarlas) */
  --radio: 8px;
  --ancho-pestanas: 76px;   /* la barra de pestañas de la izquierda: ícono y su nombre debajo (Federico, 22-oct) */
  --toque: 48px;            /* lo mínimo para tocar con el dedo (Material 48 dp; Apple 44 pt; WCAG 24 px) */
  --toque-chico: 44px;      /* botones de ícono o de una palabra en pantallas de tocar, donde 48 no cabe (Apple 44 pt) */
  /* UNA sola letra (22-oct, Federico): Geist, la de SELLERP, incluida en app/fuentes/geist (licencia OFL) para que
     funcione sin internet; los números con cifras del mismo ancho (tabular-nums) en vez de una letra aparte */
  --letra: "Geist", system-ui, sans-serif;
}
@font-face {
  font-family: "Geist"; src: url("fuentes/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo); color: var(--texto); font: var(--tam-normal)/1.45 var(--letra);
  font-variant-numeric: tabular-nums;
  /* el ancho del panel y el de la ficha en variables: el panel se oculta (como Canva) y la ficha también, cada uno solo */
  --ancho-panel: 350px; --ancho-ficha: 290px;
  display: grid; grid-template-columns: var(--ancho-pestanas) var(--ancho-panel) minmax(0, 1fr) var(--ancho-ficha); grid-template-rows: 54px 1fr;
  grid-template-areas: "barra barra barra barra" "pestanas panel escena ficha";
  overflow: hidden;
}
body.sin-ficha { --ancho-ficha: 0px; }
body.sin-ficha #ficha { display: none; }
/* panel oculto (al volver a tocar la pestaña abierta o con la pestañita «‹»): el 3D ocupa su lugar */
body.sin-panel { --ancho-panel: 0px; }
body.sin-panel #panel { display: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
/* lo que se escribe a modo de ejemplo en las cajas: el gris del navegador daba 3:1; con --texto3, 4.6 o más */
::placeholder { color: var(--texto3); opacity: 1; }

/* ---------- barra de arriba */
#barra {
  grid-area: barra; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--barra); border-bottom: 1px solid var(--borde); min-width: 0;
}
.marca { display: flex; align-items: center; white-space: nowrap; margin: 0; font-size: inherit; font-weight: inherit; }   /* es el H1 de la página (el nombre, escondido, en el span) */
.marca .a-inicio { display: flex; align-items: center; color: inherit; border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }   /* 23-oct: el logo lleva al Inicio */
.marca .a-inicio:hover { background: var(--panel3); }   /* 24-oct: que se note que se puede tocar (y su globo dice «Ir al Inicio») */
.marca .logo { display: block; height: 22px; width: auto; }
.marca .logo-ojos { display: none; height: 18px; width: auto; }
.marca .letra { fill: none; stroke: var(--texto); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.marca .ojo { fill: var(--logo-ojo); }
.marca .pupila { fill: var(--logo-pupila); }
.marca .brillo { fill: var(--logo-brillo); }
/* el nombre escrito solo para lectores de pantalla: el logo ya lo dice */
.marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.grupo { display: flex; align-items: center; gap: 6px; }
.grupo.derecha { margin-left: auto; }
.boton, #barra button {
  background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 6px 12px; white-space: nowrap;
}
.boton:hover, #barra button:hover { background: var(--panel3); }
.primario, #barra button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }
.primario:hover, #barra button.primario:hover { background: var(--acento-hover); }
.boton:disabled, button:disabled { opacity: .45; cursor: default; }
.titulo {
  background: transparent; border: 1px solid transparent; border-radius: var(--radio); padding: 5px 8px; font-weight: 600;
  font-size: var(--tam-titulo); min-width: 120px; max-width: 360px; flex: 0 1 300px;
}
.titulo:hover { border-color: var(--borde); }
.titulo:focus { background: var(--panel); border-color: var(--acento2); outline: none; }
/* se guarda solo (22-oct, Federico: «como Canva»): la nubecita y su estado hasta la derecha de la barra (app.js,
   pintarEstado); en el celular solo la nubecita */
.estado { color: var(--texto3); font-size: var(--tam-chico); white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.estado.aviso { color: var(--aviso); }
.estado.peligro { color: var(--peligro); }
/* el reloj del historial de cambios (24-oct, Federico: «como en Google Sheets»), junto a «Guardado» */
#barra .b-reloj { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto2); }
#barra .b-reloj:hover { background: var(--panel3); color: var(--texto); }
#barra .b-reloj[aria-expanded="true"] { background: var(--acento-suave); color: var(--acento); }
.b-reloj svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.nubecita { display: inline-grid; place-items: center; }
.nubecita svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
#barra .estado-boton { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: inherit; padding: 4px 8px; }
#barra .estado-boton:hover { border-color: var(--peligro); background: transparent; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 2px; }
.seg button, #barra .seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; }
.seg button.activo, #barra .seg button.activo { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.desplegable {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 280px; max-height: 70vh; overflow: auto;
  background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 6px; box-shadow: var(--sombra);
}
.desplegable .menu-grupo { margin: 8px 8px 4px; font-size: var(--tam-mini); color: var(--texto3); text-transform: uppercase; letter-spacing: .6px; }
.desplegable button { display: block; width: 100%; text-align: left; border: 0 !important; background: transparent !important; padding: 7px 9px !important; border-radius: 6px !important; }
.desplegable button:hover { background: var(--panel3) !important; }
.desplegable small { color: var(--texto3); display: block; }
/* deshacer y rehacer como en Word (22-oct): dos flechas juntas en una sola pieza; grises si no hay nada */
.historial { display: inline-flex; flex: none; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
#barra .historial button { border: 0; border-radius: 0; padding: 6px 9px; display: grid; place-items: center; }
#barra .historial button + button { border-left: 1px solid var(--borde); }
#barra .historial button:disabled { background: var(--panel2); color: var(--texto3); opacity: 1; }
.historial svg, .menu-cuenta svg, #b-cuenta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.menu-cuenta svg .punto { fill: var(--acento); stroke: none; }

/* ---------- pestañas de la izquierda y, al pie, el menú de cuenta: barra angosta con el ícono y su nombre debajo
   (22-oct; Federico quiso de vuelta los nombres, que se habían quitado). El círculo de la cuenta sigue con su globo. */
#pestanas { grid-area: pestanas; background: var(--barra); border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.lista-pestanas { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 6px 0; scrollbar-width: none; }
/* cuando no caben (laptop chica), la orilla de abajo (o la de arriba) se desvanece: así se nota que hay más pestañas.
   La barra de desplazamiento sigue escondida: en Windows ocuparía espacio y movería los íconos */
.lista-pestanas.hay-mas-abajo { mask-image: linear-gradient(to bottom, var(--fondo) calc(100% - 44px), transparent); }
.lista-pestanas.hay-mas-arriba { mask-image: linear-gradient(to top, var(--fondo) calc(100% - 32px), transparent); }
.lista-pestanas.hay-mas-arriba.hay-mas-abajo { mask-image: linear-gradient(to bottom, transparent, var(--fondo) 32px, var(--fondo) calc(100% - 44px), transparent); }
/* como Canva (22-oct, Federico): el ícono va en un cuadrito redondeado; gris al pasar el ratón y con el acento en la
   elegida (sin la raya de la izquierda). El nombre siempre debajo */
.lista-pestanas button {
  flex: none; min-height: 54px; background: transparent; border: 0; color: var(--texto2); padding: 3px 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--tam-mini); line-height: 1.15;
}
.lista-pestanas .icono { display: grid; place-items: center; width: 40px; height: 30px; border-radius: var(--radio); flex: none; }
.lista-pestanas button svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nombre-pestana { max-width: 100%; white-space: nowrap; text-align: center; }
.globo {
  position: fixed; z-index: 60; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  background: var(--panel3); color: var(--texto); border: 1px solid var(--borde); border-radius: 6px; padding: 5px 9px;
  font-size: var(--tam-chico); box-shadow: var(--sombra);
}
.globo.abajo { transform: none; }      /* el de los botones de encima del 3D sale debajo del botón */
.lista-pestanas button:hover { color: var(--texto); }
.lista-pestanas button:hover .icono { background: var(--panel3); }
.lista-pestanas button.activa { color: var(--texto); font-weight: 600; }
.lista-pestanas button.activa .icono { background: var(--acento-suave); color: var(--acento); }
.lista-pestanas button:focus-visible { outline: 0; }
.lista-pestanas button:focus-visible .icono { outline: 2px solid var(--acento); outline-offset: 1px; }
.lista-pestanas button[hidden] { display: none; }
.cuenta { position: relative; flex: none; display: flex; justify-content: center; padding: 10px 0 12px; border-top: 1px solid var(--borde); }
#b-cuenta {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: var(--panel2); border: 1px solid var(--borde); color: var(--texto2);
}
#b-cuenta svg { width: 22px; height: 22px; }
#b-cuenta:hover, #b-cuenta[aria-expanded="true"] { color: var(--texto); border-color: var(--acento2); }
/* el menú de cuenta como el de SELLERP (22-oct): arriba «Mi espacio» con su círculo; luego Nuevo y Abrir (su lista sale a
   la derecha), una raya, Configuración y Ayuda. Sin scroll propio para que la lista de Abrir no quede cortada */
.desplegable.menu-cuenta { top: auto; bottom: 8px; left: calc(100% + 8px); min-width: 230px; z-index: 40; overflow: visible; max-height: none; }
.menu-cuenta > button { display: flex !important; align-items: center; gap: 10px; }
.menu-cuenta kbd { margin-left: auto; }
.menu-cuenta .flecha { margin-left: auto; width: 14px; height: 14px; color: var(--texto3); }
.menu-cuenta > button[aria-expanded="true"] { background: var(--panel3) !important; }
.cuenta-cabeza { display: flex; align-items: center; gap: 10px; padding: 6px 9px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
.cuenta-circulo { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); color: var(--texto2); }
.cuenta-cabeza h2 { margin: 0; font-size: var(--tam-normal); line-height: 1.2; }   /* el H2 de la página (SEO: H1 → H2 → H3) */
.cuenta-cabeza small { display: block; color: var(--texto3); font-size: var(--tam-chico); }
.separador { height: 1px; background: var(--borde); margin: 5px 4px; }
.desplegable.submenu { top: auto; bottom: -7px; left: calc(100% + 6px); min-width: 260px; max-height: calc(100vh - 80px); }
.desplegable.submenu .nota { padding: 4px 9px; margin: 0; }

/* ---------- panel de controles */
#panel { grid-area: panel; background: var(--panel); border-right: 1px solid var(--borde); overflow-y: auto; padding: 14px 14px 40px; }
#panel h2 { font-size: var(--tam-titulo); margin: 0 0 4px; }
.ayuda { color: var(--texto2); margin: 0 0 12px; font-size: var(--tam-chico); }
/* la ayuda en un renglón y lo demás detrás de «?» (22-oct, Federico: textos breves) */
.mas-info {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; vertical-align: 1px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--panel2); color: var(--texto2); font-size: var(--tam-mini); font-weight: 600;
}
.mas-info:hover { border-color: var(--acento2); color: var(--texto); }
.mas-info[aria-expanded=true] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.ayuda-mas { color: var(--texto2); font-size: var(--tam-chico); margin: -6px 0 12px; padding: 7px 9px; background: var(--panel2); border-radius: 6px; }
/* el «?» junto al título, sin renglón de ayuda (Medidas, 23-oct) */
.con-ayuda + .ayuda-mas { margin-top: 6px; }
@media (pointer: coarse) { .mas-info { width: 28px; height: 28px; } }
.seccion { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 12px; }
/* UN solo subtítulo en el panel (24-oct, Federico: salían grises en mayúsculas y blancos en negritas): el de seccion()
   y el de .grupo-titulo son el mismo, blanco, en negritas y como se escribe. Las mayúsculas grises chicas quedan solo
   para los grupos de la ficha, del historial y de las listas (DISENO.md §4) */
.seccion > h3, .grupo-titulo { font-size: var(--tam-normal); font-weight: 600; color: var(--texto); line-height: 1.35; }
.seccion > h3 { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grupo-titulo { margin: 14px 0 8px; }
.nota { color: var(--texto3); font-size: var(--tam-chico); margin: 6px 0; }
/* dos recuadros, cada uno para una cosa (24-oct): la explicación de lo elegido, gris y sin orilla de color, como el
   «?»; y la advertencia, con la orilla de --aviso. Lo vacío («Aún no hay…») es una .nota sin recuadro */
.nota.elegida { color: var(--texto2); background: var(--panel2); border-radius: 6px; padding: 6px 9px; margin-top: 8px; }
.nota.aviso { color: var(--texto); background: var(--panel2); border-left: 3px solid var(--aviso); border-radius: 4px; padding: 6px 9px; margin-top: 8px; }

.campo { margin: 9px 0; }
.campo > label, .campo > .etq { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--texto2); font-size: var(--tam-chico); margin-bottom: 3px; }
.campo input[type=number], .campo input.caja-cifra {
  width: 74px; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: 6px; padding: 3px 6px; text-align: right; font-size: var(--tam-chico);
}
.campo .unidad { color: var(--texto3); font-size: var(--tam-chico); min-width: 18px; }
input[type=range] { width: 100%; accent-color: var(--acento); height: 24px; margin: 0; cursor: pointer; }
/* «medida con barra» (22-oct, DISENO.md §4): la cifra exacta con su unidad pegada, en una sola cajita, y la barra abajo */
.campo.medida > .etq { align-items: center; }
.campo.medida > .etq label { cursor: pointer; }
/* LA cajita de una cifra con su unidad pegada («30 cm»; cajaConUnidad() de app.js): la misma en las barras, en Capas
   (alto, marco y corte) y en las tapas encimadas (24-oct, Federico: en Capas era otra, con «cm» afuera) */
.caja-unidad {
  display: inline-flex; align-items: center; gap: 0; flex: none; background: var(--panel2); border: 1px solid var(--borde-caja);
  border-radius: 6px; padding: 0 7px 0 0; cursor: text; white-space: nowrap;
}
.caja-unidad:focus-within { border-color: var(--acento2); }
/* la cifra mide lo justo para la más larga, 5 caracteres como «149.5» o «-59.5» (31 px en Geist; 4ch = 32 px, +2 px del
   cursor). Es de texto (acepta «12,5»; app.js, cajaCifra): sin flechitas, y las del teclado siguen subiendo y bajando */
.caja-unidad input.caja-cifra {
  width: calc(4ch + 10px); background: transparent; border: 0; border-radius: 6px; padding: 3px 4px; outline: none; appearance: textfield;
  text-align: right; font-size: var(--tam-chico);
}
.caja-unidad .unidad { min-width: 0; color: var(--texto3); font-size: var(--tam-chico); }
.campo.medida.desactivada { opacity: .5; }
@media (pointer: coarse) {
  .caja-unidad, .caja-unidad input.caja-cifra { min-height: var(--toque-chico); }
  .campo.medida .caja-unidad, .campo.medida input.caja-cifra { min-height: var(--toque); }
  .campo.medida input[type=range] { height: var(--toque); }
}
/* ---------- la lista del Taller (lista.js, 22-oct): en vez del <select> del navegador; cada opción con su dibujo si lo
   tiene, la elegida con su palomita del acento y la activa (ratón o flechas) con fondo */
.lista { position: relative; min-width: 0; }
.lista-boton {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 6px; padding: 4px 8px; cursor: pointer; user-select: none; color: var(--texto);
}
.lista-boton:hover { border-color: var(--acento2); }
.lista-boton:focus-visible { outline: 2px solid var(--acento2); outline-offset: 1px; }
.lista-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-boton.libre .lista-texto { color: var(--texto3); }
/* el texto corto de una opción (lista.js, «corto») solo en el celular; el completo lo siguen leyendo los lectores de pantalla */
.texto-corto { display: none; }
@media (max-width: 700px) {
  .lista-3d .texto-corto { display: inline; }
  .lista-3d .texto-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.lista-flecha { flex: none; display: grid; place-items: center; }
.lista-flecha svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lista.abierta .lista-flecha svg { transform: rotate(180deg); }
.lista-dibujo { flex: none; width: 34px; height: 24px; border-radius: 4px; background: var(--fondo-muestra); overflow: hidden; }
.lista-dibujo svg, .lista-dibujo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lista-menu {
  position: fixed; inset: auto; margin: 0; overflow: auto; overscroll-behavior: contain; min-width: 200px;
  background: var(--panel2); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px; box-shadow: var(--sombra);
}
.lista-grupo { margin: 8px 8px 4px; font-size: var(--tam-mini); color: var(--texto3); text-transform: uppercase; letter-spacing: .6px; }
.lista-opcion { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.lista-opcion.activa { background: var(--panel3); }
.lista-opcion[aria-selected=true] { font-weight: 600; }
.lista-opcion .lista-dibujo { width: 44px; height: 30px; }
.lista-nombre { flex: 1; min-width: 0; }
.lista-palomita svg { width: 14px; height: 14px; display: block; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lista-opcion[aria-selected=false] .lista-palomita { visibility: hidden; }
@media (pointer: coarse) { .lista-boton, .lista-opcion { min-height: var(--toque); } }
.fila { display: flex; gap: 8px; align-items: center; }
.fila > * { flex: 1; min-width: 0; }
#panel .boton { white-space: normal; }          /* en el panel el texto de un botón baja de renglón, no se sale */
.interruptor { display: flex; align-items: center; gap: 8px; color: var(--texto2); margin: 8px 0; cursor: pointer; }
.interruptor input { accent-color: var(--acento); width: 16px; height: 16px; }
/* el deslizable: una pastilla verde (encendido) o gris (apagado) con su perilla blanca */
.interruptor.deslizable input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0;
  border-radius: 999px; background: var(--apagado); cursor: pointer; transition: background .15s; }
.interruptor.deslizable input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--perilla); box-shadow: var(--sombra-chica); transition: transform .15s; }
.interruptor.deslizable input:checked { background: var(--encendido); }
.interruptor.deslizable input:checked::before { transform: translateX(16px); }
.interruptor.deslizable input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.opciones { display: flex; flex-wrap: wrap; gap: 4px; }
.opciones button {
  background: var(--panel2); border: 1px solid var(--borde); border-radius: 6px; padding: 5px 10px; color: var(--texto2);
}
.opciones button.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }
/* Capitonado › Color del hilo (22-oct, noche): cada opción con su muestra de color; «Otro» abre el selector de color */
.opciones .punto-color {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--borde-fuerte);
  background-size: cover; vertical-align: -2px; margin-right: 6px;
}
.opciones .otro-color {
  display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--borde); border-radius: 6px;
  padding: 3px 10px 3px 6px; color: var(--texto2); cursor: pointer;
}
.opciones .otro-color.activo { border-color: var(--acento); color: var(--texto); box-shadow: inset 0 0 0 1px var(--acento); }
.opciones .otro-color input { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
@media (pointer: coarse) { .colores-hilo button, .colores-hilo .otro-color { min-height: var(--toque); } }

.tarjetas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tarjetas.tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.tarjeta {
  background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; text-align: left;
  display: flex; flex-direction: column; gap: 4px; min-height: 58px;
}
.tarjeta:hover { border-color: var(--borde-fuerte); }
.tarjeta.activa { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.tarjeta b { font-size: var(--tam-chico); }
.tarjeta small { color: var(--texto3); font-size: var(--tam-chico); line-height: 1.3; }
.tarjeta canvas, .tarjeta img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; background: var(--fondo-muestra); display: block; object-fit: cover; }
/* LA tarjeta (22-oct, "haz más visual los paneles"; DISENO.md §4): dibujo o muestra cuadrada arriba, el nombre en
   hasta dos renglones y, si hace falta, un subtítulo en UN renglón (Federico: en Tamaño el «cm» bajaba y la tarjeta
   crecía). Lo que no cabe termina en «…» y se lee completo en el globo. La elegida, con el borde del acento */
.tarjetas.visual { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tarjetas.visual.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta.visual { padding: 5px; gap: 4px; min-height: 0; align-items: stretch; }
.tarjeta.visual img, .tarjeta.visual .dibujo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; background: var(--fondo-muestra); display: block; object-fit: cover; }
.tarjeta.visual .dibujo svg { width: 100%; height: 100%; display: block; }
/* en un renglón, «Cinta plana 0…», «1…» y «3…» no se distinguían: el nombre llega a dos renglones; a tres desde el
   24-oct («Restonic con lema estampado» quedaba «Restonic con lema…»). La cifra y su unidad van juntas (pegarUnidad) */
.tarjeta.visual b {
  font-size: var(--tam-chico); line-height: 1.25; font-weight: 600; min-width: 0; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.tarjeta.visual .sub {
  font-size: var(--tam-chico); line-height: 1.25; color: var(--texto2); font-variant-numeric: tabular-nums; margin-top: -2px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta.visual.subir b { text-align: center; }
/* un nombre largo en una pestaña angosta (tableta) se parte con guion en vez de cortarse */
.subpestanas button { overflow-wrap: break-word; hyphens: auto; }
/* la estrella de las costuras favoritas (Capitonado, 23-oct; DISENO.md §4): un botón aparte a la derecha del nombre,
   debajo del dibujo, para no taparlo. Daniel la eligió de 5 ejemplos y la pidió «20% más pequeña» (13.6 px; era de
   17). Sin marcar va del gris de las ayudas; marcada, rellena con el acento. Su altura sale del ancho de la tarjeta
   (cqw): la foto es cuadrada, así que el nombre empieza un ancho más abajo. Solo el primer renglón del nombre le deja
   lugar (un hueco que flota a la derecha); el segundo usa todo el ancho: en la tableta las tarjetas miden 78 px y con un
   margen en todo el nombre se partían 23 palabras en vez de 6 */
.con-estrella { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; container-type: inline-size; }
.con-estrella .tarjeta b > span { display: block; }
.con-estrella .tarjeta b > span::before { content: ""; float: right; width: 17px; height: 1.25em; }
.estrella {
  position: absolute; top: calc(100cqw - 6.5px); right: 2px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--texto3);
}
.estrella svg { width: 13.6px; height: 13.6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.estrella:hover { color: var(--texto); }
.estrella.activa { color: var(--acento); }
.estrella.activa svg { fill: currentColor; }
/* en la tableta la tarjeta mide 78 px y, aun así, se partían nombres a media palabra («Diamant/es», «Cuadrícu/la»):
   ahí la estrella va en su propio renglón, debajo del dibujo, y el nombre usa todo el ancho, como sin estrella */
@container (max-width: 90px) {
  .con-estrella .tarjeta b > span::before { content: none; }
  .con-estrella .tarjeta b { margin-top: 14px; }
  .estrella { top: calc(100cqw - 7px); }
}

.muestras { display: flex; flex-wrap: wrap; gap: 6px; }
.muestra {
  width: 34px; height: 34px; border-radius: 7px; border: 2px solid var(--borde); padding: 0; background-size: cover; position: relative;
}
.muestra.activa { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.muestra-grande { display: flex; align-items: center; gap: 8px; }
.muestra-grande .muestra { width: 46px; height: 46px; flex: 0 0 46px; }
/* la muestra que abre su color (23-oct, Daniel): se nota que se puede tocar */
.muestra-grande button.muestra { cursor: pointer; }
.muestra-grande button.muestra:hover { border-color: var(--acento2); }
.muestra-grande .lista { flex: 1; }

.lista { display: flex; flex-direction: column; gap: 6px; }
/* Capas (27-oct, Daniel: «hace falta un espaciado»): los dos botones de cuadrar y la lista ya no se enciman */
.opciones.cuadrar { margin-top: 8px; gap: 6px; }
.opciones.cuadrar button { flex: 1 1 0; min-width: 0; min-height: 34px; line-height: 1.25; }
.capas-lista { margin-top: 12px; }
.renglon {
  display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 6px 8px;
}
.renglon .color { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 16px; border: 1px solid var(--borde-suave); }
.renglon .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon button { background: transparent; border: 0; color: var(--texto2); padding: 2px 5px; border-radius: 5px; }
/* ▲ ▼ ⧉ ✕ de los renglones y el ✕ de «Soltar» (23-oct): medían 22 × 18; al menos 24 × 24 (WCAG 2.5.8), 44 al tocar */
.renglon button, .elegidas-cabeza .cerrar { min-width: 24px; min-height: 24px; }
.renglon button:hover { background: var(--panel3); color: var(--texto); }
.renglon.activo { border-color: var(--acento2); }
/* Capas (23-oct, Federico: compactas): UN renglón de 44 px con la miniatura (clic = su color), el nombre (clic = marcarla
   en el 3D), su alto y «⋮»; en el corte en escalera, un segundo renglón con su corte */
.renglon.capa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "muestra nombre menu";
  align-items: center; column-gap: 6px; row-gap: 4px; min-height: 44px; padding: 3px 4px; }
.renglon.capa > .muestra-capa { grid-area: muestra; }
/* el nombre llega a dos renglones y cabe en los 44 px («Espuma convoluta (huevo)» quedaba «(huev…»; 24-oct) */
.renglon.capa .nombre-capa { grid-area: nombre; display: flex; align-items: center; gap: 4px; min-width: 0; }
.renglon.capa .nombre-capa .nombre { flex: 0 1 auto; }          /* la «i» va junto al nombre, no hasta la orilla */
.renglon.capa .nombre { min-width: 0; text-align: left; color: var(--texto); padding: 4px 2px; min-height: 32px; line-height: 1.2; white-space: normal; }
.renglon.capa .nombre > span { overflow: hidden; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.renglon.capa .nombre:hover { background: transparent; text-decoration: underline; }
/* 27-oct (Daniel: «solo deja el nombre y pon una flechita abajo de los 3 puntitos»): cerrada, la miniatura, el nombre y
   «⋮» con la flechita debajo; abierta, su alto (y el marco y el corte, si los tiene) en un segundo renglón */
.renglon.capa.abierta { grid-template-areas: "muestra nombre menu" ". detalle detalle"; }
.renglon.capa .botones-capa { grid-area: menu; display: flex; flex-direction: column; align-items: center; }
.renglon.capa .botones-capa .mas-acciones { height: 24px; }
.renglon.capa .abrir-capa { width: 32px; height: 24px; padding: 0; display: grid; place-items: center; color: var(--texto3); }
.renglon.capa .abrir-capa svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.renglon.capa.abierta .abrir-capa svg { transform: rotate(180deg); }
.renglon.capa .detalle { grid-area: detalle; display: none; flex-direction: column; align-items: flex-start; gap: 6px; padding: 2px 0 4px;
  font-size: var(--tam-chico); color: var(--texto2); }
.renglon.capa.abierta .detalle { display: flex; }
.renglon.capa .alto { display: flex; align-items: center; gap: 6px; }
/* el calibre del alambre de los resortes (30-oct): una lista chica, como la cajita del alto */
.renglon.capa .calibre { display: flex; align-items: center; gap: 6px; }
.lista-calibre .lista-boton { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
/* la «i» de cada capa (30-oct, Daniel: «un círculo con una "i" … si pasas el ratón por encima te sale esa ventanita con
   la info»): al pasar el ratón, al tocarla o con el teclado, la ventanita de al lado (botonInfoCapa de app.js) */
.renglon.capa .info-capa { flex: none; width: 20px; height: 20px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--texto3); cursor: help; }
.renglon.capa .info-capa:hover, .renglon.capa .info-capa[aria-expanded="true"] { color: var(--acento); background: transparent; }
.renglon.capa .info-capa svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.globo-capa { position: fixed; inset: auto; margin: 0; width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel2); color: var(--texto2); box-shadow: var(--sombra); font-size: var(--tam-chico); line-height: 1.4; }
.globo-capa h3 { margin: 0 0 6px; font-size: var(--tam-normal); color: var(--texto); }
.globo-capa dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
.globo-capa dt { color: var(--texto3); font-weight: 600; }
.globo-capa dd { margin: 0; }
/* arrastrar para subir o bajar (27-oct, Daniel; arrastrarRenglones() de app.js): la que se agarra flota con su sombra y
   las demás se recorren; mientras tanto no se selecciona texto. El dedo deja deslizar el panel hasta que se queda quieto */
.capas-lista > .renglon { cursor: grab; touch-action: pan-y; }
.capas-lista .muestra-capa img { -webkit-touch-callout: none; }
.capas-lista.con-arrastre { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.capas-lista.con-arrastre > .renglon { transition: transform .15s ease; }
.capas-lista.con-arrastre > .renglon.arrastrando { position: relative; z-index: 2; transition: none; cursor: grabbing;
  border-color: var(--acento); box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) { .capas-lista.con-arrastre > .renglon { transition: none; } }
/* la miniatura de la capa (img/capas/, sacada del 3D) con un puntito de su color; el selector de color va encima, invisible */
.muestra-capa { position: relative; display: block; width: 36px; height: 36px; flex: none; border-radius: 6px; overflow: hidden;
  background: var(--fondo-muestra); border: 1px solid var(--borde); cursor: pointer; }
.muestra-capa img { width: 100%; height: 100%; display: block; object-fit: cover; }
.muestra-capa .punto { position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--borde-fuerte); }
.muestra-capa input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.muestra-capa:focus-within { outline: 2px solid var(--acento); outline-offset: 1px; }
.muestra-capa:hover { border-color: var(--acento2); }
/* «⋮»: abre el menú de la capa (Subir, Bajar, Duplicar, Quitar) */
.renglon .mas-acciones { width: 32px; height: 32px; padding: 0; font-size: var(--tam-titulo); font-weight: 700; line-height: 1; }
/* el menú de un botón (app.js, botonMenu): en la capa de arriba, como la lista */
.boton-menu { display: contents; }
.menu-acciones {
  position: fixed; inset: auto; margin: 0; overflow: auto; overscroll-behavior: contain; min-width: 170px;
  background: var(--panel2); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px; box-shadow: var(--sombra);
}
/* .menu-acciones delante: el menú vive dentro del renglón y si no le ganaba «.renglon button» */
.menu-acciones .menu-opcion { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 5px 9px; text-align: left;
  background: transparent; border: 0; border-radius: 6px; color: var(--texto); }
.menu-acciones .menu-opcion:hover:not(:disabled), .menu-acciones .menu-opcion:focus-visible { background: var(--panel3); outline: 0; }
.menu-acciones .menu-opcion.peligro { color: var(--peligro); }
.menu-nombre { flex: 1; min-width: 0; }
.menu-nombre small { display: block; color: var(--texto3); font-size: var(--tam-chico); }
.menu-dibujo { flex: none; width: 36px; height: 36px; border-radius: 5px; overflow: hidden; background: var(--fondo-muestra); }
.menu-dibujo img, .menu-dibujo svg { width: 100%; height: 100%; display: block; object-fit: cover; }
/* un apartado plegado (23-oct): el color y «Ajustar tela» de cada pieza */
.plegado { margin: 6px 0; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel2); }
.plegado > summary { cursor: pointer; padding: 7px 10px; color: var(--texto2); font-size: var(--tam-chico); display: flex; align-items: center; gap: 6px; list-style: none; }
.plegado > summary::-webkit-details-marker { display: none; }
/* la flechita de la derecha: abajo cerrado, arriba abierto */
.plegado > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.plegado[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.plegado > summary:hover { color: var(--texto); }
.plegado[open] > summary { border-bottom: 1px solid var(--borde); color: var(--texto); }
.plegado .resumen { display: inline-flex; align-items: center; gap: 6px; }
.plegado .resumen small { color: var(--texto3); font-size: var(--tam-chico); }
.plegado-cuerpo { padding: 2px 10px 8px; }
.plegado-cuerpo > .seccion:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
.punto-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--borde-fuerte); }
/* «Alto: 30 cm · Cambiar en Altura» (Costado, 23-oct): un renglón que lleva a la pestaña donde se cambia */
.renglon.dato-ir { width: 100%; justify-content: space-between; margin: 4px 0 8px; color: var(--texto2); text-align: left; }
.renglon.dato-ir b { color: var(--texto); font-weight: 600; }
.renglon.dato-ir .ir { color: var(--acento); white-space: nowrap; }
.renglon.dato-ir:hover { border-color: var(--acento2); }

.galeria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.galeria figure { margin: 0; background: var(--fondo-muestra); border-radius: 6px; overflow: hidden; border: 1px solid var(--borde); cursor: pointer; position: relative; }
.galeria figure.elegida { outline: 2px solid var(--acento); }
.galeria img { width: 100%; aspect-ratio: 3/2; object-fit: contain; display: block; background: var(--fondo-muestra); }
.galeria figcaption { background: var(--panel2); color: var(--texto2); font-size: var(--tam-mini); padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progreso { height: 6px; background: var(--panel3); border-radius: 3px; overflow: hidden; margin: 8px 0 4px; }
.progreso > div { height: 100%; background: var(--acento); width: 0; transition: width .3s; }
/* Fotos (22-oct): «Foto 2 de 4 · Frente · faltan unos 3 min» y el registro de Blender escondido en «Detalles» */
.avance-foto { margin: 4px 0 8px; font-size: var(--tam-chico); color: var(--texto2); }
.avance-foto b { color: var(--texto); font-weight: 600; }
.detalles { margin-top: 10px; }
.detalles summary { cursor: pointer; color: var(--texto3); font-size: var(--tam-chico); }
.detalles .bitacora { margin-top: 6px; }
.bitacora { font-size: var(--tam-mini); color: var(--texto3); background: var(--fondo-codigo); border-radius: 6px; padding: 6px 8px; max-height: 120px; overflow: auto; white-space: pre-wrap; }
textarea { width: 100%; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: 6px; padding: 6px 8px; resize: vertical; min-height: 60px; }
.boton.ancho { width: 100%; padding: 9px 12px; margin-top: 6px; }

/* ---------- escena 3D */
#escena { grid-area: escena; position: relative; background: var(--fondo-3d); min-width: 0; overflow: hidden; }
#lienzo { width: 100%; height: 100%; display: block; touch-action: none; }
/* el fundido del cambio de tamaño (visor.js, fundir): la última imagen del 3D encima, desvaneciéndose */
.fundido-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: opacity; }
/* encima del 3D (22-oct): las listas «Ángulo» y «Vista» a la izquierda y «Capturar vista» a la derecha; en pantallas
   angostas se acomodan en dos renglones */
.barra-3d {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  pointer-events: none;
}
.barra-3d > * { pointer-events: auto; }
/* la lista «Ángulo» y «Vista» encima del 3D: la misma lista del Taller (lista.js), en píldora blanca */
.lista-3d .lista-boton {
  min-height: 32px; background: var(--sobre3d); border: 1px solid var(--sobre3d-borde); border-radius: 999px; box-shadow: var(--sombra-chica);
  padding: 3px 11px 3px 12px; gap: 6px; color: var(--sobre3d-texto); font-size: var(--tam-chico);
}
.lista-3d .lista-boton:hover { background: var(--fondo-muestra); border-color: var(--sobre3d-borde); }
.lista-3d .lista-etq { color: var(--sobre3d-texto2); }
.lista-3d .lista-texto { font-weight: 600; }
.lista-3d .lista-boton.libre .lista-texto { color: var(--sobre3d-texto2); font-weight: 500; }
.lista-3d .lista-boton .lista-dibujo { width: 26px; height: 18px; background: transparent; }
/* «Luz» junto a «Vista» (27-oct, Daniel; luzUI de app.js): la misma píldora con un solecito, en ámbar si no es la de
   siempre. Su panelito (giro y fuerza, con las barras de siempre) va en la capa de arriba, pegado a la píldora */
.luz-3d .luz-icono { display: grid; place-items: center; flex: none; color: var(--sobre3d-texto2); }
.luz-3d .luz-icono svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.luz-3d.cambiada .luz-icono { color: var(--acento2); }
.luz-3d .lista-boton:disabled { opacity: .5; cursor: default; }
.panel-luz {
  position: fixed; inset: auto; margin: 0; width: min(300px, calc(100vw - 16px)); padding: 10px 12px 12px; overflow: auto;
  background: var(--panel2); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.panel-luz .luz-titulo { font-size: var(--tam-normal); font-weight: 600; margin: 2px 0 6px; }
.panel-luz .nota { margin: 6px 0 4px; }
/* a la derecha, tres botones de solo ícono en una sola pieza (22-oct, Federico): cámara, pantalla completa y ficha */
.acciones-3d {
  margin-left: auto; display: inline-flex; flex: none; background: var(--sobre3d); border: 1px solid var(--sobre3d-borde);
  border-radius: 999px; box-shadow: var(--sombra-chica); overflow: hidden;
}
.acciones-3d button {
  width: 36px; height: 32px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; color: var(--sobre3d-texto);
}
.acciones-3d button + button { border-left: 1px solid var(--sobre3d-borde); }
.acciones-3d button:first-child { padding-left: 3px; }
.acciones-3d button:last-child { padding-right: 3px; }
.acciones-3d button[hidden] { display: none; }
.acciones-3d button:hover { background: var(--sobre3d-hover); }
.acciones-3d button:focus-visible { outline-offset: -3px; }
.acciones-3d button[aria-pressed="true"] { color: var(--acento2); }
/* el foco con el teclado encima del 3D blanco: el ámbar daba 1.8:1; el ámbar oscuro (--acento2) da 3.2 (23-oct) */
.barra-3d :focus-visible { outline-color: var(--acento2); }
.acciones-3d svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#b-completa .salir, #b-completa.dentro .entrar { display: none; }
#b-completa.dentro .salir { display: inline; }
/* en pantalla completa la ficha no se ve (está fuera del 3D): su botón sobra */
#escena:fullscreen #b-ficha { display: none; }
/* la pestañita «‹» (como Canva, 22-oct): en la orilla del panel, a media altura del 3D; oculta el panel */
.plegar-panel {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; width: 24px; height: 40px; padding: 0;
  display: grid; place-items: center; background: var(--panel); color: var(--texto2); border: 1px solid var(--borde); border-left: 0;
  border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra-chica);
}
.plegar-panel:hover { background: var(--panel2); color: var(--texto); }
.plegar-panel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sin-panel .plegar-panel, #escena:fullscreen .plegar-panel { display: none; }
.pie-escena {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: var(--sobre3d-texto2); font-size: var(--tam-chico); background: var(--sobre3d);
  padding: 3px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
/* la pieza elegida o bajo el ratón (22-oct, "seleccionar por partes"), abajo a la izquierda como en imagine.io; con el
   ámbar del tema, igual que su marca en el 3D (seleccion.js; 23-oct, Daniel: antes turquesa) */
.pieza-nombre {
  position: absolute; bottom: 42px; left: 12px; z-index: 5; background: var(--oscuro-3d); color: var(--oscuro-3d-texto); border: 1px solid var(--acento);
  padding: 4px 11px; border-radius: 6px; font-size: var(--tam-chico); pointer-events: none; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza-nombre.pasar { background: var(--sobre3d); color: var(--sobre3d-texto); border-color: var(--sobre3d-borde); }
.elegidas { background: var(--panel2); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 8px 10px; margin-bottom: 14px; }
.elegidas-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.elegidas-cabeza b { font-size: var(--tam-chico); line-height: 1.35; }
.elegidas-cabeza .cerrar { background: transparent; border: 0; color: var(--texto2); padding: 0 6px; border-radius: 5px; font-size: var(--tam-normal); }
.elegidas-cabeza .cerrar:hover { background: var(--panel3); color: var(--texto); }
.campo.elegida { border-left: 3px solid var(--acento); padding-left: 7px; }
.cargando {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); background: var(--oscuro-3d); color: var(--oscuro-3d-texto); padding: 6px 14px;
  border-radius: 999px; font-size: var(--tam-chico);
}

/* ---------- el historial de cambios (24-oct, Federico: «como en Google Sheets hay como un historial de cambios»): a la
   derecha, donde va la ficha. Mientras está abierto el colchón no se cambia: el panel de la izquierda se esconde, las
   pestañas se apagan y el 3D crece. En el celular va donde va el panel (debajo de las pestañas) */
body.con-versiones { --ancho-panel: 0px; --ancho-ficha: min(340px, 44vw); }
#versiones { display: none; grid-area: ficha; background: var(--panel); border-left: 1px solid var(--borde); overflow-y: auto; padding: 14px 12px 32px; }
body.con-versiones #versiones { display: block; }
body.con-versiones #panel, body.con-versiones #ficha, body.con-versiones #costos, body.con-versiones .plegar-panel { display: none !important; }
body.con-versiones .lista-pestanas { opacity: .4; }
.v-cabeza-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 4px; }
.v-cabeza-panel h2 { margin: 0; font-size: var(--tam-titulo); }
.cerrar-versiones { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--texto2); font-size: var(--tam-cifra); }
.cerrar-versiones:hover { background: var(--panel3); color: var(--texto); }
#versiones > .nota { margin: 0 2px 6px; }
.v-dia h3 { font-size: var(--tam-mini); color: var(--texto3); text-transform: uppercase; letter-spacing: .6px; margin: 14px 2px 6px; }
.v-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* cada versión: el renglón entero se toca (enseña la versión en el 3D) y a la derecha su «⋮» */
.v-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-radius: var(--radio); }
.v-item:hover { background: var(--panel2); }
.v-item.elegida { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.v-ver { display: block; width: 100%; min-width: 0; text-align: left; background: transparent; border: 0; padding: 8px 6px 9px 10px; border-radius: var(--radio); color: var(--texto); }
.v-cabeza { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.v-cabeza b { overflow-wrap: anywhere; }
.v-etiqueta { font-size: var(--tam-mini); color: var(--acento); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.v-fecha { display: block; color: var(--texto3); font-size: var(--tam-chico); }
.v-cambios { list-style: none; margin: 3px 0 0; padding: 0; color: var(--texto2); font-size: var(--tam-chico); line-height: 1.4; }
.v-cambios li { position: relative; padding-left: 11px; overflow-wrap: anywhere; }
.v-cambios li::before { content: "•"; position: absolute; left: 1px; color: var(--texto3); }
.v-mas { display: block; color: var(--texto3); font-size: var(--tam-chico); padding-left: 11px; }
.v-menu { width: 32px; height: 32px; margin: 5px 4px 0 0; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--texto2); font-size: var(--tam-titulo); }
.v-menu:hover { background: var(--panel3); color: var(--texto); }
/* la franja de la versión que se ve, encima del 3D y a lo ancho, antes de las listas: «Viendo la versión del …» con
   «Volver a esta versión» (el ámbar) y «Salir». Mientras, la ayuda de abajo del 3D no sale */
.franja-version {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 7px 7px 7px 14px; background: var(--oscuro-3d); color: var(--oscuro-3d-texto); border-radius: var(--radio); box-shadow: var(--sombra-chica);
}
.franja-version[hidden] { display: none; }
.franja-botones { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.viendo-version .pie-escena { display: none; }

/* ---------- ficha de la derecha */
#ficha { grid-area: ficha; background: var(--panel); border-left: 1px solid var(--borde); overflow-y: auto; padding: 14px; }
#ficha h3 { font-size: var(--tam-mini); color: var(--texto3); text-transform: uppercase; letter-spacing: .7px; margin: 14px 0 6px; }
#ficha h3:first-child { margin-top: 0; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* número y unidad centrados en su recuadro (22-oct, Federico: estaban pegados a la izquierda) */
.cifra { background: var(--panel2); border: 1px solid var(--borde); border-radius: 7px; padding: 7px 8px; text-align: center; }
.cifra b { display: block; font-size: var(--tam-cifra); font-weight: 500; }
.cifra span { color: var(--texto3); font-size: var(--tam-mini); }
.ficha-lista { list-style: none; padding: 0; margin: 0; }
.ficha-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: var(--tam-chico); }
.ficha-lista li span:last-child { color: var(--texto2); text-align: right; font-size: var(--tam-chico); }
.ficha-tela { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.ficha-tela img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; border: 1px solid var(--borde); background: var(--fondo-muestra); }
.ficha-tela small { color: var(--texto3); display: block; }
.cerrar-ficha { display: none; }      /* solo cuando la ficha sale encima del 3D (tableta y celular) */

/* ---------- los costos (30-oct-2026, Daniel: el Centro de costos del Inicio y el botón «$» del 3D; costos.js). Las piezas
   que usan las dos páginas: la barra apilada (un tramo por grupo, 2 px de aire, puntas redondas), la leyenda (el color
   nunca va solo: siempre con su nombre y su cifra) y la etiqueta chica (lo que subió o bajó, estimado o revisado) */
.c-grupo-1 { --c: var(--serie1); } .c-grupo-2 { --c: var(--serie2); } .c-grupo-3 { --c: var(--serie3); }
.c-grupo-4 { --c: var(--serie4); } .c-grupo-5 { --c: var(--serie5); } .c-grupo-6 { --c: var(--serie6); } .c-grupo-7 { --c: var(--texto3); }
.c-mezcla { display: flex; gap: 2px; height: 8px; width: 100%; min-width: 60px; }
.c-mezcla i { display: block; height: 100%; background: var(--c); border-radius: 2px; min-width: 2px; }
.c-mezcla i:first-child { border-radius: 4px 2px 2px 4px; }
.c-mezcla i:last-child { border-radius: 2px 4px 4px 2px; }
.c-mezcla.grande { height: 14px; }
.c-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--texto2); font-size: var(--tam-chico); }
.c-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.c-leyenda b { color: var(--texto); font-weight: 600; }
.c-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.c-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 99px; font-size: var(--tam-chico); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--borde); color: var(--texto); background: transparent; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.c-chip svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-chip.sube { border-color: var(--aviso); } .c-chip.sube svg { color: var(--aviso); }
.c-chip.baja, .c-chip.bien { border-color: var(--encendido); } .c-chip.baja svg, .c-chip.bien svg { color: var(--encendido); }
.c-chip.estimado { border-color: var(--aviso); color: var(--texto2); } .c-chip.estimado svg { color: var(--aviso); }
.cz-icono { display: inline-grid; place-items: center; flex: none; }
.cz-que { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* el botón «$» (30-oct): el costo del colchón mientras se arma. En computadora va en la columna de la derecha, como la
   ficha (las dos no a la vez: abrir una cierra la otra) y el 3D se vuelve a encuadrar; en la tableta flota sobre el 3D
   (app.js la muda adentro del 3D) y en el celular es una tarjeta chica abajo del 3D con lo esencial */
#costos { display: none; grid-area: ficha; background: var(--panel); border-left: 1px solid var(--borde); overflow-y: auto; padding: 14px; }
body.con-costos { --ancho-ficha: 290px; }
body.con-costos #costos { display: grid; align-content: start; gap: 10px; }
body.con-costos #ficha { display: none; }
body.con-versiones.con-costos { --ancho-ficha: min(340px, 44vw); }      /* con el historial abierto manda el historial */
#escena #costos { position: absolute; z-index: 7; top: 52px; right: 12px; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 100px);
  border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 14px; background: var(--panel2); }
.cz-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cz-cabeza h2 { margin: 0; font-size: var(--tam-normal); }
.cz-cerrar { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--texto2); }
.cz-cerrar:hover { background: var(--panel3); color: var(--texto); }
.cz-cerrar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cz-total { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cz-total b { font-size: var(--tam-grande); font-weight: 650; line-height: 1.1; }
.cz-venta { color: var(--texto2); font-size: var(--tam-chico); margin-top: -4px; }
.cz-venta b { color: var(--acento); font-weight: 650; }
.cz-grupos { list-style: none; margin: 0; padding: 0; }
.cz-grupos li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--borde); font-size: var(--tam-chico); }
.cz-grupos li:last-child { border-bottom: 0; }
.cz-grupos span { color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-grupos b { font-weight: 600; text-align: right; }
.cz-grupos small { color: var(--texto3); text-align: right; font-size: var(--tam-chico); }
.cz-titulo { margin: 2px 0 -4px; font-size: var(--tam-mini); text-transform: uppercase; letter-spacing: .07em; color: var(--texto3); font-weight: 600; }
.cz-medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.cz-medidas div { display: flex; justify-content: space-between; gap: 6px; background: var(--panel2); border: 1px solid var(--borde); border-radius: 8px; padding: 5px 8px; font-size: var(--tam-chico); }
#escena .cz-medidas div { background: var(--panel); }
.cz-medidas div.esta { border-color: var(--acento); }
.cz-medidas span { color: var(--texto3); }
.cz-medidas b { font-weight: 650; }
.cz-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--texto3); font-size: var(--tam-chico); }
.cz-pie a { color: var(--acento); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cz-pie a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  /* el 3D del celular es chico: la tarjeta va abajo, con el total, lo que cambió, el precio y la barra */
  #escena #costos { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 62%; gap: 8px; padding: 10px 12px; }
  #escena #costos .cz-grupos, #escena #costos .cz-titulo, #escena #costos .cz-medidas, #escena #costos .cz-pie > span, #escena #costos .cz-cabeza h2 { display: none; }
  #escena #costos .cz-cabeza { position: absolute; top: 6px; right: 6px; }
  #escena #costos .cz-total b { font-size: var(--tam-cifra); }
  #escena #costos .cz-pie { justify-content: flex-end; margin-top: -4px; }
}

/* Vista › Costos por pieza (30-oct, Daniel: «una vista de costos con capas separadas para que se pueda ver los costos de
   cada cosa»): la etiqueta de cada pieza separada, unida con una línea a su orilla (etiquetas3d.js). Encima del 3D, como las
   listas (--sobre3d); la línea lleva un halo para verse en los tres fondos. Abajo a la derecha, lo que no es una pieza y
   el costo de hacerlo. En un 3D angosto (el celular) la etiqueta dice solo la cifra (al tocarla, su nombre) y el resumen
   es una píldora abajo, donde iba la ayuda */
.cp-capa { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cp-capa[hidden], .cp-etq[hidden] { display: none; }
.cp-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-lineas path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cp-lineas .halo { stroke: var(--sobre3d); stroke-width: 4; }
.cp-lineas .linea { stroke: var(--sobre3d-texto2); stroke-width: 1.3; }
.cp-lineas circle { fill: var(--sobre3d-texto); stroke: var(--sobre3d); stroke-width: 2; }
.cp-etq {
  position: absolute; left: 0; top: 0; pointer-events: auto; max-width: 220px; padding: 4px 10px 5px; line-height: 1.25; white-space: nowrap;
  background: var(--sobre3d); color: var(--sobre3d-texto); border: 1px solid var(--sobre3d-borde); border-radius: 8px; box-shadow: var(--sombra-chica);
  font-variant-numeric: tabular-nums;
}
.cp-etq span { display: block; font-size: var(--tam-chico); color: var(--sobre3d-texto2); overflow: hidden; text-overflow: ellipsis; }
.cp-etq b { font-size: var(--tam-titulo); font-weight: 650; }
.cp-etq small { margin-left: 6px; font-size: var(--tam-chico); color: var(--sobre3d-texto2); }
.cp-resumen {
  position: absolute; right: 12px; bottom: 42px; width: 236px; display: grid; gap: 3px; pointer-events: auto; padding: 9px 12px 10px;
  background: var(--sobre3d); color: var(--sobre3d-texto); border: 1px solid var(--sobre3d-borde); border-radius: 10px; box-shadow: var(--sombra-chica);
  font-size: var(--tam-chico); font-variant-numeric: tabular-nums;
}
.cp-filas { display: grid; gap: 3px; }
.cp-fila { display: flex; justify-content: space-between; gap: 10px; }
.cp-fila span { color: var(--sobre3d-texto2); }
.cp-fila b { font-weight: 600; }
.cp-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--sobre3d-borde); font-size: var(--tam-normal); }
.cp-total span { color: var(--sobre3d-texto); font-weight: 600; }
.cp-total b { font-weight: 700; }
.cp-venta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--sobre3d-texto2); }
.cp-venta b { color: var(--sobre3d-texto); font-weight: 650; }
.cp-venta button { background: none; border: 0; padding: 0; color: var(--sobre3d-texto); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cp-capa.compacta .cp-etq { max-width: 170px; padding: 2px 7px 3px; }
.cp-capa.compacta .cp-etq span, .cp-capa.compacta .cp-etq small, .cp-capa.compacta .cp-filas, .cp-capa.compacta .cp-venta button { display: none; }
.cp-capa.compacta .cp-etq.abierta span { display: block; }
.cp-capa.compacta .cp-etq b { font-size: var(--tam-normal); }
.cp-capa.compacta .cp-resumen {
  right: auto; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); display: flex; gap: 12px;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.cp-capa.compacta .cp-total { margin: 0; padding: 0; border: 0; gap: 6px; font-size: var(--tam-chico); }
#escena.costos-compactos .pie-escena { display: none; }

/* ---------- avisos y ventanas */
#avisos { position: fixed; bottom: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
/* 23-oct: cada aviso con su ✕; el de éxito en turquesa (antes casi el mismo ámbar que el de advertencia) */
.aviso-caja { background: var(--panel2); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 9px 12px; box-shadow: var(--sombra);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.aviso-caja.ok { border-left-color: var(--turquesa); }
.aviso-caja.error { border-left-color: var(--peligro); }
.aviso-caja.atencion { border-left-color: var(--aviso); }
.aviso-cerrar { min-width: 24px; min-height: 24px; margin: -4px -6px 0 0; padding: 0; background: transparent; border: 0; border-radius: 5px; color: var(--texto2); }
.aviso-cerrar:hover { background: var(--panel3); color: var(--texto); }
dialog { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; padding: 20px 22px; max-width: 640px; box-shadow: var(--sombra-grande); }
dialog::backdrop { background: var(--velo); }
dialog h2, dialog h3 { margin: 0 0 8px; font-size: var(--tam-titulo); }   /* la Ayuda y Confirmar son H2 (23-oct: «Mi espacio» lo arma menu-cuenta.js) */
dialog p { color: var(--texto2); }
dialog .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
dialog .botones button { background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 7px 14px; }
dialog .botones button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }
.ayuda-tabla { width: 100%; border-collapse: collapse; font-size: var(--tam-chico); }
.ayuda-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.ayuda-tabla td:first-child { color: var(--texto); font-weight: 600; white-space: nowrap; }
.ayuda-tabla td:last-child { color: var(--texto2); }
kbd { background: var(--panel3); border: 1px solid var(--borde); border-radius: 4px; padding: 0 5px; font-size: var(--tam-mini); }

/* ---------- biblioteca de patrones */
/* 22-oct: a la izquierda, encima del panel, sin oscurecer el resto: el 3D se sigue viendo mientras se eligen los patrones */
dialog.biblioteca {
  position: fixed; inset: 54px auto 0 var(--ancho-pestanas); margin: 0; width: 480px; max-width: calc(100vw - var(--ancho-pestanas)); height: auto; max-height: none;
  display: flex; flex-direction: column; padding: 14px 16px; border-radius: 0; border-width: 0 1px 0 0; box-shadow: var(--sombra-lado); z-index: 30;
}
dialog.biblioteca:not([open]) { display: none; }
.cabeza-biblioteca, .cabeza-ayuda { display: flex; justify-content: space-between; align-items: center; }
.cabeza-biblioteca .cerrar, .cabeza-ayuda .cerrar { background: transparent; border: 0; color: var(--texto2); font-size: var(--tam-cifra); padding: 2px 8px; border-radius: 6px; }
.cabeza-biblioteca .cerrar:hover, .cabeza-ayuda .cerrar:hover { background: var(--panel3); color: var(--texto); }
.cabeza-ayuda h2:focus { outline: 0; }   /* la Ayuda abre con el foco en su título (no es un botón: sin anillo) */
.buscar { width: 100%; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.cuerpo-biblioteca { overflow-y: auto; flex: 1; padding-right: 4px; }
.rejilla-patrones { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.patron { background: var(--panel2); border: 1px solid var(--borde); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.patron img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; background: var(--fondo-muestra); display: block; }
.patron span { font-size: var(--tam-chico); color: var(--texto2); line-height: 1.25; }
.patron:hover { border-color: var(--borde-fuerte); }
.patron.activo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.patron.subir { align-items: center; justify-content: center; min-height: 140px; border-style: dashed; }
.patron.subir b { font-size: var(--tam-grande); color: var(--acento); }
.patron-elegido { display: flex; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--borde); border-radius: 8px; padding: 6px; }
.patron-elegido img { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; background: var(--fondo-muestra); }
.patron-elegido div { flex: 1; min-width: 0; }
.patron-elegido small { color: var(--texto3); display: block; }
.candado { background: var(--panel2); border: 1px solid var(--borde); border-radius: 6px; padding: 2px 8px; color: var(--texto2); }
.candado.activo { color: var(--acento); border-color: var(--acento2); }

/* ---------- Configuración (22-oct; antes Personalizar): las secciones Apariencia (apariencia.js: temas con su miniatura,
   acento y fondo del 3D) y Ratón y 3D (raton.js), elegidas con .opciones arriba */
dialog.configuracion { width: min(640px, 94vw); }
dialog.configuracion > .opciones { margin: 10px 0 4px; }
.seccion-config { border-top: 1px solid var(--borde); margin-top: 10px; padding-top: 4px; }
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tema { background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 5px; display: flex; flex-direction: column; gap: 4px; font-size: var(--tam-chico); color: var(--texto2); }
.tema svg { width: 100%; display: block; border-radius: 4px; }
.tema.activo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); color: var(--texto); font-weight: 600; }
.fondos3d { display: flex; flex-wrap: wrap; gap: 6px; }
.fondo3d { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 11px 4px 4px; color: var(--texto2); }
.fondo3d span { width: 30px; height: 20px; border-radius: 999px; border: 1px solid var(--borde-suave); display: block; }
.fondo3d.activo { border-color: var(--acento); color: var(--texto); font-weight: 600; }

/* ---------- «Guardar como…» (30-oct, Daniel): a dónde (tarjetas, como los temas) y con qué nombre */
dialog.guardar-como { width: min(520px, 94vw); }
dialog.guardar-como .grupo-titulo { display: block; margin: 12px 0 6px; }
.destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.destino { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; text-align: left; padding: 10px 12px;
  background: var(--panel2); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto2); }
.destino-dibujo { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radio); background: var(--panel3); color: var(--texto2); }
.destino-dibujo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.destino b { color: var(--texto); }
.destino small { font-size: var(--tam-chico); line-height: 1.35; }
.destino:hover { border-color: var(--borde-fuerte); }
.destino.activo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.destino.activo .destino-dibujo { background: var(--acento-suave); color: var(--acento); }
dialog.guardar-como input[type=text] { width: 100%; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: var(--radio); padding: 7px 10px; }
@media (max-width: 520px) { .destinos { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { dialog.guardar-como input[type=text] { font-size: var(--tam-caja); min-height: var(--toque-chico); } }

@media (max-width: 1350px) {
  body { --ancho-panel: 320px; --ancho-ficha: 0px; }
  body.con-costos { --ancho-ficha: 0px; }       /* aquí la tarjeta de costos flota sobre el 3D (app.js la muda adentro) */
  /* la ficha no cabe junto al 3D: sale encima, a la derecha, solo cuando se pide con su botón (22-oct, Federico) */
  #ficha { display: none; }
  body.con-ficha #ficha {
    display: block; position: fixed; z-index: 25; top: 54px; right: 0; bottom: 0; width: min(300px, calc(100vw - 48px));
    border-left: 1px solid var(--borde); box-shadow: var(--sombra-grande);
  }
  body.con-ficha .cerrar-ficha {
    display: grid; place-items: center; position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0;
    background: transparent; border: 0; border-radius: 6px; color: var(--texto2); font-size: var(--tam-cifra);
  }
  body.con-ficha .cerrar-ficha:hover { background: var(--panel3); color: var(--texto); }
  dialog.biblioteca { width: 440px; }
}
/* tableta (22-oct): todo cabe al lado del 3D, con el panel un poco más angosto */
@media (max-width: 1000px) {
  body { --ancho-panel: 290px; }
  #barra { gap: 8px; padding: 0 10px; }
  .titulo { min-width: 90px; }
  /* las listas y los tres botones en un solo renglón: sin las palabras «Ángulo» y «Vista» (no cabía «Tres cuartos»; los
     lectores de pantalla las siguen leyendo y el globo las dice), y la lista «Ángulo» se angosta si aún hace falta */
  .barra-3d { flex-wrap: nowrap; }
  .lista-3d:first-child { flex: 0 1 auto; }
  .lista-3d + .lista-3d { flex: none; }
  .lista-3d .lista-etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* «Luz», solo con su solecito (el globo y los lectores de pantalla dicen cuál es): así siguen cabiendo las listas */
  .luz-3d .lista-texto, .luz-3d .lista-flecha { display: none; }
  .luz-3d .lista-boton { padding: 3px 9px; }
  dialog.biblioteca { width: min(440px, calc(100vw - var(--ancho-pestanas))); }
  /* viendo una versión del historial: la franja va en su renglón y las listas y los botones debajo; el historial, más angosto */
  body.viendo-version .barra-3d { flex-wrap: wrap; }
  body.con-versiones { --ancho-ficha: 300px; }
}
/* en la tableta la tarjeta es angosta: la medida va sin «cm» para caber en un renglón (el globo la dice completa) */
@media (min-width: 701px) and (max-width: 1000px) {
  .tarjeta.visual .sub .unidad { display: none; }
}
/* celular (22-oct): el 3D arriba, las pestañas en una tira que se desliza y el panel abajo */
@media (max-width: 700px) {
  body {
    height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 42dvh) auto minmax(0, 1fr);
    grid-template-areas: "barra" "escena" "pestanas" "panel";
  }
  #barra { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
  .marca .logo { display: none; }
  .marca .logo-ojos { display: block; }
  #barra button { padding: 6px 10px; }
  .titulo { flex: 1 1 0; min-width: 0; max-width: none; text-overflow: ellipsis; }
  #barra .historial button { padding: 6px 7px; }
  .estado .texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* solo la nubecita */
  .estado { margin-left: 0; }
  #pestanas { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--borde); }
  /* la tira se desliza: la orilla de la derecha se desvanece para que se note que siguen más pestañas */
  .lista-pestanas { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none;
    mask-image: linear-gradient(to right, var(--fondo) calc(100% - 28px), transparent); }
  .lista-pestanas.al-final { mask-image: none; }
  .lista-pestanas button { flex: 0 0 auto; min-height: 0; min-width: 66px; padding: 5px 4px 4px; }
  /* el panel oculto (volver a tocar la pestaña abierta): el 3D crece hacia abajo; aquí no hay pestañita «‹» */
  body.sin-panel { grid-template-rows: auto minmax(0, 1fr) auto 0; }
  .plegar-panel { display: none; }
  .lista-pestanas button svg { width: 22px; height: 22px; }
  .cuenta { align-items: center; border-top: 0; border-left: 1px solid var(--borde); padding: 0 10px; }
  #b-cuenta { width: 34px; height: 34px; }
  .desplegable.menu-cuenta { left: auto; right: 8px; bottom: calc(100% + 6px); }
  body.con-ficha #ficha { top: 0; }
  #panel { border-right: 0; padding: 12px 12px 32px; }
  .barra-3d { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .lista-3d:first-child { flex: 1 1 0; }
  .lista-3d .lista-boton > .lista-dibujo { display: none; }    /* en el celular, el texto de la vista sin su dibujito */
  .lista-3d .lista-boton { padding: 3px 8px 3px 10px; gap: 4px; }   /* «Tres cuartos» y «Separadas» caben junto a los tres botones */
  .desplegable.menu-cuenta { overflow: auto; max-height: calc(42dvh + 36px); }   /* sube desde la tira sin salirse de arriba */
  .desplegable.submenu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--borde); border-radius: 0; margin: 2px 0 4px 18px;
    min-width: 0; max-height: none; padding: 0 0 0 4px; background: transparent; }
  .menu-cuenta .flecha { transform: rotate(90deg); }
  .pie-escena { white-space: normal; text-align: center; width: max-content; border-radius: var(--radio); bottom: 8px; }
  body.con-versiones #versiones { grid-area: panel; border-left: 0; padding: 10px 10px 32px; }
  .franja-version { padding: 6px 6px 6px 10px; font-size: var(--tam-chico); }
  .pieza-nombre { bottom: 50px; max-width: calc(100% - 24px); }
  #avisos { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  dialog { max-width: calc(100vw - 24px); padding: 16px; }
  dialog.biblioteca { inset: 0; width: 100vw; max-width: 100vw; border-width: 0; }
  .ayuda-tabla td:first-child { white-space: normal; }
}
/* pasos para tomar la foto de una tela (22-oct) */
.pasos { margin: 2px 0 10px; padding-left: 18px; color: var(--texto2); font-size: var(--tam-chico); line-height: 1.45; }
.pasos li { margin: 2px 0; }
.pasos b { color: var(--texto); font-weight: 600; }
/* rejillas largas (alturas, patrones) con su propio scroll, como en imagine.io (22-oct) */
.rejilla-scroll { max-height: 440px; overflow-y: auto; padding-right: 2px; margin-bottom: 4px; }
/* en el celular no (23-oct): la rejilla con su propia barra atrapaba el dedo; ahí se desliza junto con el panel */
@media (max-width: 700px) { .rejilla-scroll { max-height: none; overflow: visible; } }
.buscar-fila { gap: 6px; align-items: center; margin-bottom: 6px; }
.buscar-fila .buscar { flex: 1; margin: 0; min-width: 0; }
.buscar-fila .lista { max-width: 46%; }
.tarjeta.visual.subir { justify-content: center; align-items: center; border-style: dashed; }
.tarjeta.visual.subir .mas { font-size: var(--tam-grande); line-height: 1; color: var(--acento); aspect-ratio: 1; display: grid; place-items: center; width: 100%; }
.tarjeta.visual img.volteada { transform: scaleY(-1); }
.renglon.tapa-renglon img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: var(--fondo-muestra); flex: none; }
.renglon.tapa-renglon .lista { flex: 1; min-width: 0; }
.renglon.tapa-renglon .nombre { flex: 0 0 auto; color: var(--texto2); font-size: var(--tam-chico); }
/* el logo (Marca, 24-oct): sobre el blanco de todas las tarjetas, con un contorno fino que sigue sus letras (el bordado
   blanco no se veía); el contorno va en la foto y el blanco en su cuadro, si no el filtro pinta todo el cuadro */
.tarjeta.visual .dibujo.logo { padding: 6px; }
.tarjeta.visual .dibujo.logo img { height: 100%; object-fit: contain; background: none; border-radius: 0;
  filter: drop-shadow(0 0 0.6px var(--borde-fuerte)) drop-shadow(0 0 0.6px var(--borde-fuerte)); }
/* chips (Cintas › Pegarla a una costura) y las partes de un panel (Capitonado) */
.opciones.chips { margin-bottom: 8px; }
.subpestanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin: 4px 0 10px; }
.subpestanas button { background: var(--panel2); border: 0; border-right: 1px solid var(--borde); color: var(--texto2); padding: 7px 2px; font-size: var(--tam-chico); }
.subpestanas button:last-child { border-right: 0; }
.subpestanas button.activa { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
/* las partes de Capitonado (22-oct): cada una del ancho de su nombre, en un renglón. 24-oct: con «Banda del pillow» y
   «Cara de abajo» no caben en el panel de la tableta (290 px): ahí el nombre baja a dos renglones en vez de cortarse */
.subpestanas.partes { display: flex; }
.subpestanas.partes button { flex: 1 1 auto; padding: 7px 6px; line-height: 1.2; hyphens: manual; }
.muestra-props { height: 110px; border-radius: 8px; border: 1px solid var(--borde); background-repeat: repeat; margin-bottom: 4px; }
/* Cintas como el "Tape" de imagine.io (22-oct): renglón con su foto, a qué costura va pegada y su altura */
.renglon.cinta-renglon { cursor: pointer; }
.renglon.cinta-renglon img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: var(--fondo-muestra); flex: none; }
.renglon.cinta-renglon .nombre small { display: block; color: var(--texto3); font-size: var(--tam-mini); }
.renglon.cinta-renglon .unidad { font-size: var(--tam-chico); color: var(--texto2); flex: none; }
.renglon.cinta-renglon.oculta { opacity: .55; }
/* cámaras guardadas (22-oct, punto 8 de imagine.io): el recuadro de la foto encima del 3D, lo de fuera oscurecido */
.marco-camara { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  outline: 2px solid var(--acento); box-shadow: 0 0 0 9999px var(--velo-camara); }
.marco-camara::after { content: attr(data-medida); position: absolute; left: -2px; bottom: calc(100% + 4px); white-space: nowrap;
  font: 600 var(--tam-chico)/1.2 var(--letra); color: var(--acento-texto); background: var(--acento); padding: 3px 7px; border-radius: 4px; }
.camara-tarjeta { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; cursor: pointer; }
.camara-tarjeta img { width: 96px; aspect-ratio: 16 / 9; object-fit: contain; background: var(--fondo-muestra); border-radius: 4px; display: block; }
.camara-tarjeta .nombre { white-space: normal; }
.camara-tarjeta .nombre small { display: block; color: var(--texto3); font-size: var(--tam-mini); }
.camara-tarjeta .acciones { display: flex; gap: 2px; }
.campo-texto { width: 100%; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: 6px; padding: 6px 8px; color: var(--texto); }
.medida-foto { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 6px; }
.medida-foto input { width: 100%; background: var(--panel2); border: 1px solid var(--borde-caja); border-radius: 5px; padding: 4px 6px; text-align: right; }
.medida-foto button { background: var(--panel2); border: 1px solid var(--borde); border-radius: 5px; padding: 3px 7px; color: var(--texto2); }
.medida-foto button.activo { border-color: var(--acento); color: var(--acento); }
/* corte en escalera (22-oct, punto 9 de imagine.io) y marco de espuma del pocket (23-oct): dentro de lo que abre la
   flechita de la capa (27-oct), debajo de su alto */
.renglon.capa .corte { display: flex; align-items: center; gap: 4px; }
.renglon.capa .marco { display: flex; align-items: center; gap: 6px; }
.renglon.capa .marco .interruptor { margin: 0; gap: 6px; }

/* ---------- pantallas de tocar (23-oct, revisión de celular y accesibilidad): va al final para ganarle a lo de arriba */
@media (pointer: coarse) {
  /* lo que se toca con el dedo mide al menos 44 px (Apple 44 pt; WCAG 2.5.8). Antes: Ángulo y Vista 32, íconos del 3D
     36 × 32, deshacer 31 × 29, cuenta 34, menú 33, opciones 31, partes 32, muestras 34 y los ▲ ▼ ⧉ ✕ 22 × 18 */
  .lista-3d .lista-boton, .desplegable button, .opciones button, .subpestanas button { min-height: var(--toque-chico); }
  .acciones-3d button, #b-cuenta, .muestra { width: var(--toque-chico); height: var(--toque-chico); }
  .muestras input[type=color] { width: var(--toque-chico) !important; height: var(--toque-chico) !important; }
  #barra .historial button, .renglon button, .elegidas-cabeza .cerrar, .aviso-cerrar, .cabeza-biblioteca .cerrar { min-width: var(--toque-chico); min-height: var(--toque-chico); }
  /* Capas (23-oct): la miniatura y «⋮» de 44 × 44; el renglón sin relleno para que siga midiendo 44 (más su orilla) */
  .renglon.capa { padding: 0 2px; }
  .renglon.capa .marco .interruptor { min-height: var(--toque-chico); }
  .muestra-capa, .renglon .mas-acciones { width: var(--toque-chico); height: var(--toque-chico); }
  /* la flechita de la capa (27-oct): al tocar, junto a «⋮» y de 44 × 44, para que el renglón siga midiendo 44 */
  .renglon.capa .botones-capa { flex-direction: row; }
  .renglon.capa .botones-capa .mas-acciones, .renglon.capa .abrir-capa { width: var(--toque-chico); height: var(--toque-chico); }
  .menu-acciones .menu-opcion, .plegado > summary, .renglon.dato-ir { min-height: var(--toque); }
  body.con-ficha .cerrar-ficha { width: var(--toque-chico); height: var(--toque-chico); }   /* la ✕ de la ficha: era de 32 */
  .cerrar-versiones, .v-menu, #barra .b-reloj { width: var(--toque-chico); height: var(--toque-chico); }   /* el historial (24-oct) */
  /* el «?» (28) y la pestañita «‹» (24 × 40) se ven igual, pero responden en al menos 44 × 44 alrededor */
  .mas-info { position: relative; }
  .mas-info::after { content: ""; position: absolute; inset: -9px; }
  /* la «i» de las capas (30-oct) se ve de 22 y responde en 44 × 44, como el «?» */
  .renglon.capa .info-capa { position: relative; min-width: 0; min-height: 0; width: 22px; height: 22px; }
  .renglon.capa .info-capa::after { content: ""; position: absolute; inset: -11px; }
  .renglon.capa .calibre .lista-boton { min-height: var(--toque-chico); }
  /* la estrella de Favoritas se ve igual y responde en 44 × 44: más hacia el nombre que hacia la tarjeta de junto */
  .estrella::after { content: ""; position: absolute; inset: -10px -2px -10px -18px; }
  .plegar-panel::after { content: ""; position: absolute; inset: -3px -21px -3px 0; }
  /* con letra de menos de 16 px el iPhone acerca la página al tocar la caja (y no la regresa) */
  input:not([type=range]):not([type=checkbox]):not([type=color]), textarea { font-size: var(--tam-caja) !important; }
  /* sin teclado no sirven «Shift+clic», «(F)», Alt, Esc ni Ctrl */
  .solo-teclado { display: none; }
}
/* en la tableta de tocar, con los íconos del 3D a 44 px, «Tres cuartos» se cortaba: la lista va sin su dibujito, como en
   el celular (el dibujo sigue en cada opción al abrirla) */
@media (pointer: coarse) and (max-width: 1000px) { .lista-3d .lista-boton > .lista-dibujo { display: none; } }