/* Hallmark · genre: modern-minimal · macrostructure: Workbench · tone: utilitario * anchor hue: 29 (rojo corporativo del proyecto, preservado) * scope: SOLO la columna de edición del presupuesto (#panel-editor-controles) * pre-emit critique: P4 H5 E5 S5 R4 V4 * * Por qué existe este fichero y no está metido en index.html: * es aditivo y reversible. Si algo no gusta, se quita el de index.html * y la pantalla vuelve al aspecto anterior sin tocar ninguna lógica. * * La idea del rediseño: la columna de edición era una pila de tarjetas dentro * de tarjetas (capítulo > partida > cajita de campo), todas con el mismo borde * y la misma sombra, así que nada destacaba sobre nada. Aquí se cambia por un * libro de cuentas: rayas finas en vez de cajas, los importes alineados en una * misma columna, y el rojo reservado para lo que de verdad manda. */ /* ── Tokens ────────────────────────────────────────────────────────────── En OKLCH: al aclarar u oscurecer un color, el tono no se va (con hex hay que ir probando a ojo). El rojo es el MISMO de la marca, solo escrito de otra forma. */ /* .ed-menu va en la lista a propósito: el menú de tres puntos se cuelga del (para que el scroll del panel no lo corte), o sea que queda FUERA de #panel-editor-controles y sin estos tokens saldría transparente. */ #panel-editor-controles, .ed-scope, .ed-menu { /* papel y superficies */ --ed-paper: oklch(99% 0.002 40); --ed-paper-2: oklch(97.2% 0.003 40); --ed-paper-3: oklch(94.5% 0.004 40); /* rayas */ --ed-rule: oklch(90% 0.005 40); --ed-rule-2: oklch(82% 0.007 40); /* tinta */ --ed-muted: oklch(52% 0.008 40); /* rótulos — 7:1 sobre papel */ --ed-ink-2: oklch(38% 0.010 40); --ed-ink: oklch(24% 0.012 40); /* marca — el rojo de siempre (#bd0100 / #ec0000) */ --ed-accent: oklch(52% 0.205 29); /* rojo para TEXTO (contrasta) */ --ed-accent-fondo: oklch(58% 0.240 29); /* rojo para FONDOS de botón */ --ed-accent-hover: oklch(53% 0.230 29); --ed-accent-ink: oklch(99% 0.005 29); --ed-accent-suave: oklch(96% 0.020 29); /* foco: azul a propósito. Si el anillo fuese rojo se confundiría con la marca y con los avisos de error, y dejaría de significar "estás aquí". */ --ed-focus: oklch(52% 0.150 250); /* estados */ --ed-ok: oklch(48% 0.130 150); --ed-ok-suave: oklch(96% 0.035 150); --ed-peligro: oklch(52% 0.190 27); --ed-peligro-suave:oklch(96% 0.030 27); --ed-fav: oklch(65% 0.140 85); /* estrella de favorito */ --ed-fav-suave: oklch(96% 0.050 85); /* espacio — escala de 4 pt */ --ed-2xs: 0.25rem; --ed-xs: 0.375rem; --ed-sm: 0.5rem; --ed-md: 0.75rem; --ed-lg: 1rem; --ed-xl: 1.5rem; /* forma y movimiento */ --ed-radio: 6px; --ed-radio-caja: 8px; --ed-dur: 120ms; --ed-ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Fundamentos ─────────────────────────────────────────────────────── */ /* Todos los números del editor con cifras de ancho fijo: así los importes quedan alineados en columna y se leen de un vistazo, en vez de bailar según lleven un 1 o un 8. */ .ed-num, .ed-scope input, #panel-editor-controles input, .ed-imp, .ed-imp-cap { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Foco visible de teclado, en TODO el editor. Antes había focus:outline-none con solo un cambio de color de borde: con el tabulador no se veía dónde estabas. El anillo aparece al instante, sin animación. */ .ed-scope :focus, #panel-editor-controles :focus, .ed-menu :focus { outline: none; } .ed-scope :focus-visible, #panel-editor-controles :focus-visible, .ed-menu :focus-visible { outline: 2px solid var(--ed-focus); outline-offset: 1px; border-radius: var(--ed-radio); transition: none; } /* ── Capítulo ────────────────────────────────────────────────────────── */ .ed-cap { background: var(--ed-paper); border-top: 2px solid var(--ed-rule-2); margin-bottom: var(--ed-xl); } /* Cabecera: franja con la letra del capítulo a la izquierda. Esa letra es la MISMA que sale en el PDF (sale del orden de la lista), así que sirve para localizar en pantalla lo que el cliente ve en el papel. */ .ed-cap-cab { display: flex; align-items: center; gap: var(--ed-md); padding: var(--ed-md) var(--ed-sm) var(--ed-sm); border-bottom: 1px solid var(--ed-rule); } .ed-cap-letra { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; background: var(--ed-accent-fondo); color: var(--ed-accent-ink); font-size: 0.8125rem; font-weight: 700; border-radius: var(--ed-radio); letter-spacing: 0; } .ed-cap-nombre { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid transparent; padding: var(--ed-2xs) 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ed-ink); } .ed-cap-nombre:hover { border-bottom-color: var(--ed-rule-2); } .ed-cap-nombre:focus { border-bottom-color: var(--ed-accent); } .ed-cap-cuenta { flex-shrink: 0; font-size: 0.6875rem; color: var(--ed-muted); white-space: nowrap; } .ed-imp-cap { flex-shrink: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ed-accent); white-space: nowrap; } /* Plegar / desplegar */ .ed-plegar { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border: none; background: transparent; color: var(--ed-muted); border-radius: var(--ed-radio); cursor: pointer; font-size: 0.625rem; transition: background-color var(--ed-dur) var(--ed-ease-out), color var(--ed-dur) var(--ed-ease-out); } @media (hover: hover) { .ed-plegar:hover { background: var(--ed-paper-3); color: var(--ed-ink); } } /* Medidas del capítulo: plegado, discreto, no compite con las partidas */ .ed-medidas > summary { list-style: none; cursor: pointer; padding: var(--ed-sm) var(--ed-sm) var(--ed-sm) 42px; font-size: 0.6875rem; font-weight: 600; color: var(--ed-muted); user-select: none; border-bottom: 1px solid var(--ed-rule); transition: background-color var(--ed-dur) var(--ed-ease-out); } .ed-medidas > summary::-webkit-details-marker { display: none; } .ed-medidas > summary::before { content: "▸ "; color: var(--ed-rule-2); } .ed-medidas[open] > summary::before { content: "▾ "; } @media (hover: hover) { .ed-medidas > summary:hover { background: var(--ed-paper-2); color: var(--ed-ink-2); } } .ed-medidas-dato { font-weight: 400; color: var(--ed-muted); } .ed-medidas-cuerpo { padding: var(--ed-md) var(--ed-sm) var(--ed-lg) 42px; border-bottom: 1px solid var(--ed-rule); background: var(--ed-paper-2); } .ed-medidas-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ed-md); margin-bottom: var(--ed-md); } /* ── Partida: una FILA, no una tarjeta ───────────────────────────────── */ .ed-partidas { padding: var(--ed-2xs) 0; } .ed-fila { position: relative; padding: var(--ed-md) var(--ed-sm) var(--ed-md) 42px; border-bottom: 1px solid var(--ed-rule); transition: background-color var(--ed-dur) var(--ed-ease-out); } .ed-fila:last-child { border-bottom: none; } /* La marca de la izquierda aparece al pasar por encima o al escribir dentro: señala en qué línea estás sin meter un borde permanente alrededor. */ .ed-fila::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: transparent; transition: background-color var(--ed-dur) var(--ed-ease-out); } @media (hover: hover) { .ed-fila:hover { background: var(--ed-paper-2); } .ed-fila:hover::before { background: var(--ed-rule-2); } } .ed-fila:focus-within { background: var(--ed-paper-2); } .ed-fila:focus-within::before { background: var(--ed-accent-fondo); } .ed-fila-cab { display: flex; align-items: flex-start; gap: var(--ed-sm); } .ed-titulo { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid transparent; padding: 1px 0; font-size: 0.875rem; font-weight: 600; color: var(--ed-ink); letter-spacing: -0.005em; } .ed-titulo:hover { border-bottom-color: var(--ed-rule); } .ed-titulo:focus { border-bottom-color: var(--ed-accent); } .ed-desc { display: block; width: 100%; margin-top: var(--ed-2xs); padding: var(--ed-2xs) var(--ed-xs); border: 1px solid transparent; border-radius: var(--ed-radio); background: transparent; resize: vertical; font-size: 0.75rem; line-height: 1.45; color: var(--ed-ink-2); } .ed-desc::placeholder { color: var(--ed-muted); } @media (hover: hover) { .ed-desc:hover { border-color: var(--ed-rule); } } .ed-desc:focus { border-color: var(--ed-rule-2); background: var(--ed-paper); } /* Tira de campos: rejilla de verdad. Antes eran anchos fijos con flex-wrap y en pantalla estrecha rompía por donde le tocaba. minmax(0,1fr) evita que un texto largo estire la columna y saque scroll horizontal. */ .ed-campos { display: grid; grid-template-columns: 5rem /* cantidad */ 3.75rem /* unidad */ minmax(0, 1fr) /* medida */ 6rem /* precio */ 4.25rem /* descuento */ minmax(5.5rem, auto);/* total */ gap: var(--ed-sm) var(--ed-md); align-items: end; margin-top: var(--ed-sm); } /* El desplegable de medida no debe estirarse a todo el hueco: es una etiqueta corta y ocupando media fila parecía el campo más importante de la línea. Se queda a su tamaño y el hueco sobrante empuja los importes a la derecha, que es donde deben alinearse todos. */ .ed-campos select.ed-campo { max-width: 15rem; } .ed-rot { display: block; margin-bottom: 2px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ed-muted); } .ed-campo { width: 100%; padding: var(--ed-xs) var(--ed-sm); border: 1px solid var(--ed-rule-2); border-radius: var(--ed-radio); background: var(--ed-paper); font-size: 0.8125rem; color: var(--ed-ink); transition: border-color var(--ed-dur) var(--ed-ease-out); } .ed-campo:hover { border-color: var(--ed-muted); } .ed-campo:focus { border-color: var(--ed-accent); } .ed-campo--centro { text-align: center; font-weight: 600; } .ed-campo--derecha { text-align: right; font-weight: 600; } .ed-campo--suave { border-color: var(--ed-rule); color: var(--ed-ink-2); } .ed-campo--dto-activo { border-color: var(--ed-ok); background: var(--ed-ok-suave); color: var(--ed-ok); } /* El importe de la línea: el dato que más se mira. Sin caja, alineado a la derecha con el resto de importes. */ .ed-imp-caja { text-align: right; } .ed-imp { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--ed-ink); line-height: 1.9; white-space: nowrap; } /* ── Botones de fila (mover, favorito, borrar) ───────────────────────── */ .ed-icono { flex-shrink: 0; min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 var(--ed-2xs); border: none; background: transparent; color: var(--ed-muted); border-radius: var(--ed-radio); cursor: pointer; font-size: 0.75rem; line-height: 1; transition: background-color var(--ed-dur) var(--ed-ease-out), color var(--ed-dur) var(--ed-ease-out); } @media (hover: hover) { .ed-icono:hover { background: var(--ed-paper-3); color: var(--ed-ink); } } .ed-icono:active { background: var(--ed-rule); } .ed-icono:disabled { opacity: 0.3; cursor: not-allowed; } .ed-icono:disabled:hover { background: transparent; color: var(--ed-muted); } .ed-icono--borrar:hover { background: var(--ed-peligro-suave); color: var(--ed-peligro); } .ed-icono--fav { color: var(--ed-rule-2); } .ed-icono--fav:hover { background: var(--ed-fav-suave); color: var(--ed-fav); } .ed-icono--fav-on { color: var(--ed-fav); } .ed-acciones-fila { display: flex; align-items: center; gap: 1px; flex-shrink: 0; } /* ── Menú ⋮ de la partida ──────────────────────────────────────────── Antes cada partida enseñaba cinco controles a la vez (★ ↑ ↓ desplegable 🗑). Con seis partidas eran treinta cosas pulsables en pantalla. Ahora la fila lleva UN botón y las cinco acciones viven dentro. Va con position:fixed y colgado del a propósito: dentro del panel, que tiene scroll propio, el menú se cortaría al llegar al borde. */ /* El botón de tres puntos SÍ tiene que parecer un botón. Antes era un icono gris sobre fondo transparente y no se distinguía del texto de al lado. */ .ed-menu-btn { background: var(--ed-paper-3); border: 1px solid var(--ed-rule-2); color: var(--ed-ink-2); } @media (hover: hover) { .ed-menu-btn:hover { background: var(--ed-rule); border-color: var(--ed-muted); color: var(--ed-ink); } } .ed-menu-btn .material-symbols-outlined { font-size: 18px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } /* Mientras el menú está abierto, su botón se queda marcado en rojo: así se ve de qué partida o capítulo es el menú que tienes delante. */ .ed-menu-btn[aria-expanded="true"] { background: var(--ed-accent-fondo); border-color: var(--ed-accent-fondo); color: var(--ed-accent-ink); } .ed-menu-btn[aria-expanded="true"]:hover { background: var(--ed-accent-hover); border-color: var(--ed-accent-hover); color: var(--ed-accent-ink); } .ed-menu { position: fixed; z-index: 80; min-width: 210px; padding: var(--ed-2xs); background: var(--ed-paper); border: 1px solid var(--ed-rule-2); border-radius: var(--ed-radio-caja); box-shadow: 0 8px 24px oklch(24% 0.02 40 / 0.16); } .ed-menu-item { display: flex; align-items: center; gap: var(--ed-sm); width: 100%; min-height: 38px; padding: var(--ed-xs) var(--ed-sm); border: none; background: transparent; border-radius: var(--ed-radio); font-size: 0.8125rem; font-weight: 600; color: var(--ed-ink-2); text-align: left; cursor: pointer; transition: background-color var(--ed-dur) var(--ed-ease-out); } @media (hover: hover) { .ed-menu-item:hover { background: var(--ed-paper-3); color: var(--ed-ink); } } .ed-menu-item:disabled { opacity: 0.35; cursor: not-allowed; } .ed-menu-item:disabled:hover { background: transparent; } .ed-menu-item--borrar { color: var(--ed-peligro); } .ed-menu-item--borrar:hover { background: var(--ed-peligro-suave); color: var(--ed-peligro); } .ed-menu-item-icono { width: 18px; text-align: center; flex-shrink: 0; } .ed-menu-sep { height: 1px; margin: var(--ed-2xs) var(--ed-sm); background: var(--ed-rule); } /* Aviso de que el menú no se va al pulsar Subir/Bajar */ .ed-menu-pista { display: block; padding: var(--ed-2xs) var(--ed-sm) var(--ed-xs); font-size: 0.625rem; line-height: 1.35; color: var(--ed-muted); } .ed-menu-rot { display: block; padding: var(--ed-sm) var(--ed-sm) var(--ed-2xs); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ed-muted); } .ed-menu .ed-select-mini { width: calc(100% - var(--ed-sm) * 2); max-width: none; margin: 0 var(--ed-sm) var(--ed-sm); } /* Marca de favorito: si la estrella se va al menú, hay que poder ver de un vistazo qué partidas están guardadas. */ .ed-fav-marca { flex-shrink: 0; color: var(--ed-fav); font-size: 0.8125rem; line-height: 1.4; } /* Desplegable pequeño (mover partida de capítulo, tipo de medida) */ .ed-select-mini { max-width: 130px; padding: 2px var(--ed-xs); border: 1px solid var(--ed-rule); border-radius: var(--ed-radio); background: var(--ed-paper); font-size: 0.6875rem; color: var(--ed-muted); } .ed-select-mini:focus { border-color: var(--ed-accent); } /* ── Pie del capítulo ────────────────────────────────────────────────── */ .ed-cap-pie { display: flex; gap: var(--ed-sm); padding: var(--ed-sm) var(--ed-sm) var(--ed-sm) 42px; border-top: 1px solid var(--ed-rule); background: var(--ed-paper-2); } .ed-vacio { padding: var(--ed-lg) var(--ed-sm) var(--ed-lg) 42px; font-size: 0.75rem; color: var(--ed-muted); border-bottom: 1px solid var(--ed-rule); } /* ── Botones ─────────────────────────────────────────────────────────── */ .ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ed-2xs); min-height: 34px; padding: var(--ed-xs) var(--ed-md); border: 1px solid transparent; border-radius: var(--ed-radio); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: background-color var(--ed-dur) var(--ed-ease-out), border-color var(--ed-dur) var(--ed-ease-out), transform 90ms var(--ed-ease-out); } .ed-btn--principal { background: var(--ed-accent-fondo); color: var(--ed-accent-ink); } @media (hover: hover) { .ed-btn--principal:hover { background: var(--ed-accent-hover); } } .ed-btn--normal { background: var(--ed-paper); color: var(--ed-ink-2); border-color: var(--ed-rule-2); } @media (hover: hover) { .ed-btn--normal:hover { background: var(--ed-paper-3); border-color: var(--ed-muted); } } .ed-btn:active { transform: translateY(1px); } .ed-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Los dos botones de añadir partida NO ocupan todo el ancho. Antes eran dos barras enormes repetidas en cada capítulo y el rojo se comía la pantalla: con cuatro capítulos había ocho barrotes rojos y el ojo ya no sabía qué era importante. */ .ed-btn--ancho { flex: 0 0 auto; min-width: 0; } /* ── Pestañas del documento ──────────────────────────────────────────── */ .ed-barra-tabs { display: flex; gap: var(--ed-2xs); align-items: center; width: 100%; max-width: 980px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; } .ed-barra-tabs::-webkit-scrollbar { display: none; } .ed-tab { flex-shrink: 0; padding: var(--ed-xs) var(--ed-md); border: 1px solid transparent; border-radius: var(--ed-radio); background: transparent; color: var(--ed-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; transition: background-color var(--ed-dur) var(--ed-ease-out), color var(--ed-dur) var(--ed-ease-out); } @media (hover: hover) { .ed-tab:hover { background: var(--ed-paper-3); color: var(--ed-ink); } } .ed-tab--activa { background: var(--ed-ink); color: var(--ed-paper); } .ed-tab--activa:hover { background: var(--ed-ink); color: var(--ed-paper); } /* ── Barra superior del editor ───────────────────────────────────────── */ .ed-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--ed-md); padding: var(--ed-sm) var(--ed-xl); background: var(--ed-paper); border-bottom: 1px solid var(--ed-rule); } .ed-cabecera-izq { display: flex; align-items: center; gap: var(--ed-md); min-width: 0; } .ed-cabecera-der { display: flex; align-items: center; gap: var(--ed-sm); flex-shrink: 0; } .ed-titulo-doc { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ed-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-sub-doc { margin-top: 1px; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Barra de acciones sobre la lista de capítulos */ .ed-acciones { display: flex; align-items: center; gap: var(--ed-sm); flex-wrap: wrap; padding-bottom: var(--ed-md); margin-bottom: var(--ed-lg); border-bottom: 1px solid var(--ed-rule); } .ed-sep { width: 1px; height: 22px; background: var(--ed-rule); flex-shrink: 0; } /* Dirección de la obra: un solo renglón entre la barra de acciones y la hoja. Etiqueta a la izquierda y campo ancho, para que se lea de un vistazo que es un dato del documento y no una partida más. */ .ed-obra { display: flex; align-items: center; gap: var(--ed-md); margin-bottom: var(--ed-lg); } .ed-obra-lbl { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ed-muted); white-space: nowrap; } .ed-obra-campo { flex: 1 1 auto; min-width: 0; } /* En estrecho la etiqueta se pone encima: si no, el campo se queda en un palmo. */ @media (max-width: 720px) { .ed-obra { flex-direction: column; align-items: stretch; gap: 4px; } .ed-obra-lbl { white-space: normal; } } /* Cabecera de la lista */ .ed-lista-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ed-md); margin-bottom: var(--ed-lg); } .ed-lista-titulo { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ed-ink); } .ed-lista-nota { font-size: 0.6875rem; color: var(--ed-muted); text-align: right; } /* ── Móvil ───────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .ed-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ed-md) var(--ed-sm); } /* El total ocupa la fila entera abajo: es el dato que se busca. */ .ed-imp-caja { grid-column: 1 / -1; } .ed-imp { line-height: 1.4; font-size: 1.0625rem; } .ed-fila, .ed-cap-pie, .ed-vacio, .ed-medidas-cuerpo { padding-left: var(--ed-sm); } .ed-medidas > summary { padding-left: var(--ed-sm); } .ed-medidas-fila { gap: var(--ed-sm); } .ed-cap-cuenta { display: none; } /* Dedo, no ratón: 44 px de alto mínimo en todo lo que se pulsa. En obra se usa el móvil con las manos sucias y guantes; un botón de 26 px no se acierta. */ .ed-btn { min-height: 44px; } .ed-icono { min-width: 40px; height: 40px; font-size: 0.875rem; } /* En pantalla estrecha el título de la partida se queda con la línea entera y los botones (subir, bajar, favorito, borrar) bajan debajo. Antes se salían por la derecha y el de borrar no se podía ni pulsar. */ .ed-fila-cab { flex-wrap: wrap; } .ed-fila-cab .ed-titulo { flex: 1 0 100%; } .ed-acciones-fila { flex-wrap: wrap; width: 100%; justify-content: flex-end; } .ed-cap-cab { flex-wrap: wrap; } .ed-cap-cab .ed-cap-nombre { flex: 1 0 60%; } .ed-select-mini { max-width: 100%; } /* Los dos botones de añadir partida, uno encima del otro: en 320 px no caben al lado (el texto no puede encogerse más) y se salían de la pantalla. */ .ed-cap-pie { flex-direction: column; } .ed-cap-pie .ed-btn--ancho { width: 100%; } .ed-plegar{ width: 40px; height: 40px; } .ed-tab { min-height: 40px; display: inline-flex; align-items: center; } .ed-campo { padding: var(--ed-sm); font-size: 1rem; } /* 16px: evita que iOS haga zoom al escribir */ /* La barra de arriba se parte en dos líneas en vez de empujar el título fuera de la pantalla (el botón de plantilla cambia a un texto largo: "GUARDAR COMO PLANTILLA"). */ .ed-cabecera { flex-wrap: wrap; padding-inline: var(--ed-lg); } .ed-cabecera-der { width: 100%; justify-content: flex-end; } } /* Sin scroll horizontal: la columna de edición nunca debe empujar la página */ #panel-editor-controles { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { .ed-scope *, #panel-editor-controles * { transition-duration: 90ms !important; transition-property: opacity, background-color, border-color !important; } .ed-btn:active { transform: none; } } /* Al imprimir, la columna de edición no sale (ya lo hace .no-print, esto es el cinturón de seguridad por si se pinta dentro de la hoja). */ @media print { #panel-editor-controles { display: none !important; } }