@font-face {
font-family: "TrazoFont";
src: url("/Font/TrazoFont.ttf") format("woff2");
font-weight: normal;
font-style: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════════
VARIABLES GLOBALES DE DISEÑO
═══════════════════════════════════════════════════════════════════════════════ */
:root {
--r: 10px;
/* border-radius único para TODO */
--btn: 30px;
/* tamaño de botón cuadrado */
--btn-sm: 30px;
/* botón pequeño (colores, grosor) — unificado con --btn */
--gap: 5px;
/* gap interno entre botones */
--pad: 6px;
/* padding interno de paneles */
--fs: 12px;
/* fuente base */
--fs-label: 9px;
/* fuente label */
--shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
--border: 1px solid rgba(0, 0, 0, 0.11);
--bg-panel: rgba(255, 255, 255, 0.97);
--btn-hover: #f0f0f0;
--btn-active: #e2e2e2;
--icon-size: 18px;
/* ---- Fondo general de la app ---- */
--app-bg: #ffffff;
/* ---- Paneles de herramientas (Toolbar, Zoom, Historial) ----
Variables independientes de --bg-panel para no afectar otros
paneles (menús, modales) que no forman parte de este modo oscuro. */
--panel-bg: rgba(255, 255, 255, 0.97);
--panel-border: 1px solid rgba(0, 0, 0, 0.11);
--panel-btn-hover: #f0f0f0;
--panel-btn-active: #e2e2e2;
--panel-text: #000000;
--panel-divider: rgba(0, 0, 0, 0.08);
--panel-icon-filter: none;
/* ---- Texto y bordes genéricos usados en TODOS los menús/paneles ---- */
--text-strong: #000000;
--text-muted: #555555;
--text-faint: rgba(0, 0, 0, 0.35);
--chip-bg: #ffffff;
/* ---- Transición estándar para el cambio claro/oscuro ---- */
--theme-transition: background-color 0.35s ease, border-color 0.35s ease,
color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
/* ═══════════════════════════════════════════════════════════════════════════════
MODO OSCURO AUTOMÁTICO (según preferencia del sistema)
Afecta: fondo general de la app y TODOS los menús/paneles/toolbars
(usan --bg-panel, --border, --panel-*, --text-*, --chip-bg).
═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
MODO OSCURO MANUAL (se activa agregando la clase "dark-mode" al )
Por defecto la página siempre carga en modo claro, sin importar el modo
del sistema operativo o navegador.
Afecta: fondo general de la app y TODOS los menús/paneles/toolbars
(usan --bg-panel, --border, --panel-*, --text-*, --chip-bg).
═══════════════════════════════════════════════════════════════════════════════ */
body.dark-mode {
--app-bg: #121212;
/* Variables globales de panel (usadas por casi todos los menús) */
--bg-panel: #1e1e1e;
--border: 1px solid rgba(255, 255, 255, 0.12);
--panel-bg: #1e1e1e;
--panel-border: 1px solid rgba(255, 255, 255, 0.12);
--panel-btn-hover: rgba(255, 255, 255, 0.10);
--panel-btn-active: rgba(255, 255, 255, 0.16);
--panel-text: #ffffff;
--panel-divider: rgba(255, 255, 255, 0.14);
--panel-icon-filter: invert(1);
--text-strong: #ffffff;
--text-muted: rgba(255, 255, 255, 0.65);
--text-faint: rgba(255, 255, 255, 0.45);
--chip-bg: #2a2a2a;
--btn-hover: rgba(255, 255, 255, 0.10);
--btn-active: rgba(255, 255, 255, 0.16);
color: var(--text-strong);
}
body.dark-mode #btn-text-bold strong,
body.dark-mode #btn-text-underline span,
body.dark-mode #btn-text-italic em {
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════════════
RESET Y BASE
═══════════════════════════════════════════════════════════════════════════════ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: var(--app-bg);
transition: background-color 0.35s ease;
}
#pizarra {
display: block;
width: 100vw;
height: 100vh;
}
@keyframes spin360 {
0% {
transform: translateX(-4px) rotate(0deg);
}
100% {
transform: translateX(-4px) rotate(360deg);
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
MODALS
═══════════════════════════════════════════════════════════════════════════════ */
.modal-overlay,
#confirm-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
}
.modal-overlay.show,
#confirm-modal.show {
opacity: 1;
}
.modal-content,
.confirm-box {
background: var(--bg-panel);
border: var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
/* CAMBIOS PARA QUE SEA MÁS GRANDE */
padding: 30px;
width: 800px;
/* Ancho amplio */
max-width: 92%;
max-height: 85vh;
/* Evita que sea más grande que la pantalla */
overflow-y: auto;
/* Permite scroll si el contenido es mucho */
animation: modalContentPop 0.2s ease-out;
}
.modal-overlay.show .modal-content,
#confirm-modal.show .confirm-box {
animation: modalContentPop 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalContentPop {
0% {
opacity: 0;
transform: scale(0.92) translateY(12px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.confirm-actions {
display: flex;
gap: 8px;
margin-top: 16px;
justify-content: flex-end;
}
.confirm-actions button {
padding: 7px 14px;
border-radius: var(--r);
border: none;
font-weight: 600;
font-size: var(--fs);
cursor: pointer;
}
#btn-confirm-no {
background: var(--chip-bg);
color: var(--text-strong);
}
#btn-confirm-yes {
background: #d32f2f;
color: #fff;
}
.tutorial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
/* Más aire entre tarjetas */
margin: 30px 0;
}
.tutorial-item {
background: rgba(0, 0, 0, 0.03);
/* Un toque más suave */
padding: 20px;
border-radius: var(--r);
border: var(--border);
/* Añadimos tu borde global */
}
.title-icons {
display: flex;
align-items: center;
gap: 8px;
}
.title-icons svg {
width: 20px;
height: 20px;
}
.tutorial-item h3 {
display: flex;
align-items: center;
gap: 12px;
}
.tutorial-item p {
font-size: 12px;
/* Más legible */
color: var(--text-muted);
line-height: 1.5;
}
#close-tutorial {
width: 50%;
padding: 14px;
font-size: 13px;
background: #000;
color: #fff !important;
border-radius: var(--r);
border: none;
cursor: pointer;
transition: background 0.2s;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.tutorial-btn-container {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
#close-tutorial:hover {
background: #333;
}
#close-tutorial button svg {
stroke: #fff;
flex-shrink: 0;
}
.tutorial-item h3 {
display: flex;
align-items: center;
gap: 10px;
/* Espacio entre el icono SVG y el texto */
font-size: 14px;
margin: 0 0 8px 0;
}
/* Esto le da el color correcto a los iconos */
.tutorial-item h3 svg {
stroke: var(--text-muted);
/* Color de los trazos del SVG */
flex-shrink: 0;
}
#close-tutorial svg {
stroke: #fff !important;
flex-shrink: 0;
}
.divider-modal-line {
width: 1px;
height: 16px;
background: #999;
opacity: .5;
}
.tutorial-skip {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-strong);
cursor: pointer;
}
.tutorial-skip input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--text-strong);
}
/* ═══════════════════════════════════════════════════════════════════════════════
HISTORIAL (Deshacer / Rehacer)
═══════════════════════════════════════════════════════════════════════════════ */
#history-container {
position: fixed;
bottom: 10px;
right: 12px;
z-index: 10;
display: flex;
align-items: center;
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: var(--panel-border);
border-radius: var(--r);
box-shadow: var(--shadow);
/* Agregamos la transición suave */
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s ease,
background-color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
#history-container button {
width: var(--btn);
height: var(--btn);
border: none;
background: none;
cursor: pointer;
font-size: 18px;
font-weight: bold;
color: var(--panel-text);
border-radius: var(--r);
transition: background 0.12s, color 0.35s ease;
display: flex;
justify-content: center;
align-items: center;
}
#history-container button:hover {
background: var(--panel-btn-hover);
}
#history-container button:active {
background: var(--panel-btn-active);
}
#history-container button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════════════════
SIDEBAR IZQUIERDO
═══════════════════════════════════════════════════════════════════════════════ */
#left-sidebar {
position: absolute;
top: 12px;
left: 12px;
z-index: 20;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
#page-settings-container,
#contextual-toolbar,
#tools-selection-menu,
#premium-selection-menu {
pointer-events: auto;
}
/* Botón logo */
#btn-settings-toggle {
width: 36px;
height: 36px;
border-radius: var(--r);
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#settings-logo {
width: 32px;
height: 32px;
transform: translateX(-4px);
}
#settings-logo.spin {
animation: spin360 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panel de ajustes */
#page-settings-menu {
display: none;
flex-direction: column;
gap: 2px;
background: var(--bg-panel);
backdrop-filter: blur(10px);
border: var(--border);
padding: 5px;
border-radius: var(--r);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
min-width: 130px;
margin-top: 6px;
transform-origin: top left;
/* Agregamos la transición suave */
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s ease;
}
#page-settings-menu.show {
display: flex;
animation: settingsMenuPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#page-settings-menu.show>* {
animation: settingsItemPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(var(--item-index, 0)*22ms + 60ms);
}
#page-settings-menu.show>*:nth-child(1) {
--item-index: 1;
}
#page-settings-menu.show>*:nth-child(2) {
--item-index: 2;
}
#page-settings-menu.show>*:nth-child(3) {
--item-index: 3;
}
#page-settings-menu.show>*:nth-child(4) {
--item-index: 4;
}
#page-settings-menu.show>*:nth-child(5) {
--item-index: 5;
}
#page-settings-menu.show>*:nth-child(6) {
--item-index: 6;
}
#page-settings-menu.show>*:nth-child(7) {
--item-index: 7;
}
#page-settings-menu.show>*:nth-child(8) {
--item-index: 8;
}
#page-settings-menu.show>*:nth-child(9) {
--item-index: 9;
}
#page-settings-menu.show>*:nth-child(10) {
--item-index: 10;
}
#page-settings-menu.show>*:nth-child(11) {
--item-index: 11;
}
#page-settings-menu.show>*:nth-child(12) {
--item-index: 12;
}
@keyframes settingsMenuPop {
0% {
opacity: 0;
transform: scale(0.9) translateY(-8px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes settingsItemPop {
0% {
opacity: 0;
transform: translateY(-3px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#page-settings-menu label,
#premium-selection-menu label {
font-size: 9px;
font-weight: 700;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 6px 8px 2px;
text-align: left;
width: 100%;
pointer-events: none;
}
/* Grupos de tema y estilo */
.theme-toggle-group,
.style-toggle-group {
display: flex;
gap: var(--gap);
padding: 0 6px 4px;
}
.theme-btn,
.style-bg-btn {
width: var(--btn);
height: var(--btn);
border-radius: calc(var(--r) - 2px);
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
color: var(--text-strong);
}
.theme-btn img {
transition: filter 0.35s ease;
}
.style-square {
background: var(--text-strong);
transition: background-color 0.35s ease;
}
/* En modo oscuro: sol/luna y los iconos de "Estilo" (puntos, rejilla) en blanco */
body.dark-mode .theme-btn img {
filter: invert(1);
}
.theme-btn:hover,
.style-bg-btn:hover {
background: var(--btn-hover);
}
/* Mantiene el fondo gris del hover cuando el Sol, la Luna o un estilo de hoja están seleccionados */
#btn-theme-light.active,
#btn-theme-dark.active,
.style-bg-btn.active {
background: var(--btn-hover);
}
.color-preview {
border-radius: var(--r);
border: var(--border);
width: var(--btn);
height: var(--btn);
}
.language-select-native {
width: calc(100% - 12px);
margin: 0 6px 4px;
height: var(--btn);
padding: 0 8px;
border-radius: calc(var(--r) - 2px);
border: var(--border);
background: var(--chip-bg);
color: var(--text-strong);
font-size: var(--fs);
font-weight: 500;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 11px;
transition: background-color 0.12s;
}
.language-select-native:hover {
background-color: var(--btn-hover);
}
.language-select-native:focus {
outline: none;
box-shadow: none;
}
body.dark-mode .language-select-native {
background-image: url("data:image/svg+xml;utf8,");
}
/* El navegador dibuja la lista desplegable con fondo blanco nativo,
así que forzamos texto negro en las opciones para que se lea. */
.language-select-native option {
color: #000000;
background: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════════════════════
BARRA CONTEXTUAL IZQUIERDA
═══════════════════════════════════════════════════════════════════════════════ */
#contextual-toolbar {
background: var(--bg-panel);
border: var(--border);
padding: var(--pad);
border-radius: var(--r);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: var(--gap);
opacity: 0;
transform: translateX(-8px);
visibility: hidden;
transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#contextual-toolbar.toolbar-show {
opacity: 1;
transform: translateX(-6px);
visibility: visible;
}
.contextual-tools-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.thickness-column,
.color-column {
display: flex;
flex-direction: column;
gap: var(--gap);
align-items: center;
}
.contextual-separator {
width: 18px;
height: 1px;
background: #ccc;
}
/* Botones de grosor */
.thickness-btn {
width: var(--btn);
height: var(--btn);
border-radius: 20%;
border: none;
background: var(--chip-bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
}
.thickness-btn:hover {
background: var(--btn-hover);
}
.thickness-btn.active {
background: var(--btn-active);
}
.dot {
background: var(--text-muted);
border-radius: 20%;
display: inline-block;
}
.dot.thin {
width: 3px;
height: 3px;
}
.dot.medium {
width: 9px;
height: 9px;
}
.dot.thick {
width: 15px;
height: 15px;
}
/* Colores */
.color-picker {
width: 24px;
height: 24px;
border-radius: 20%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.12s;
}
.color-picker.active {
border-color: var(--text-strong);
transform: scale(1.15);
}
.custom-color-container {
position: relative;
width: var(--btn-sm);
height: var(--btn-sm);
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-btn {
width: 24px;
height: 24px;
border-radius: 20%;
border: 2px solid transparent;
cursor: pointer;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
transition: transform 0.12s;
}
.rainbow-btn.active {
border-color: var(--text-strong);
transform: scale(1.15);
}
.custom-color-container input[type="color"] {
position: absolute;
opacity: 0;
width: 40px;
height: 40px;
left: 0;
top: 0;
}
.hidden-color-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
left: 120px;
}
/* Botones de forma */
.insert-shape-btn {
width: var(--btn);
height: var(--btn);
border-radius: var(--r);
border: none;
background: var(--chip-bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
}
.insert-shape-btn:hover {
background: var(--btn-hover);
}
.insert-shape-btn.active {
background: var(--btn-active);
}
/* Botones de estilo texto */
.style-btn,
.align-btn {
width: var(--btn);
height: var(--btn);
border-radius: var(--r);
border: none;
background: var(--chip-bg);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
}
.style-btn:hover,
.align-btn:hover {
background: var(--btn-hover);
}
.style-btn.active,
.align-btn.active {
background: var(--btn-active);
font-weight: bold;
}
.icon-small {
width: 14px;
height: 14px;
pointer-events: none;
}
/* Control tamaño fuente */
.font-size-control {
display: flex;
align-items: center;
border: 1px solid var(--panel-divider);
border-radius: 10%;
overflow: visible;
background: var(--chip-bg);
gap: 4px;
}
#float-text-size {
border: none;
padding: 4px;
text-align: center;
outline: none;
font-size: var(--fs);
font-weight: 600;
border-radius: 20%;
width: 30px;
-moz-appearance: textfield;
appearance: textfield;
}
.unit {
position: relative;
left: -6px;
font-size: var(--fs);
font-weight: 600;
cursor: pointer;
}
#float-text-size::-webkit-outer-spin-button,
#float-text-size::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-combo {
position: relative;
height: 100%;
display: flex;
}
.combo-toggle {
width: 18px;
height: 100%;
background: var(--chip-bg);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: var(--text-muted);
border-radius: 0 var(--r) var(--r) 0;
}
.combo-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--chip-bg);
border: var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
list-style: none;
max-height: 130px;
overflow-y: auto;
margin-top: 4px;
z-index: 1001;
min-width: max-content !important;
}
.custom-combo.open .combo-menu {
display: block;
}
.combo-menu li {
padding: 5px 10px;
font-size: var(--fs);
cursor: pointer;
text-align: left;
}
.combo-menu li:hover {
background: var(--btn-hover);
}
/* ═══════════════════════════════════════════════════════════════════════════════
TOOLBAR CENTRAL
═══════════════════════════════════════════════════════════════════════════════ */
#toolbar-wrapper {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
#toolbar {
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: var(--panel-border);
padding: 4px 8px;
border-radius: var(--r);
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: var(--gap);
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.toolbar-section {
display: flex;
align-items: center;
gap: var(--gap);
}
.toolbar-divider {
width: 1px;
height: 18px;
background: var(--panel-divider);
/* ← antes era 0.694 */
border-radius: 1px;
margin: 0 2px;
transition: background-color 0.35s ease;
}
#toolbar button {
width: var(--btn);
height: var(--btn);
border-radius: var(--r);
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--panel-text);
transition: background 0.12s, color 0.35s ease;
position: relative;
}
#toolbar button img {
width: 18px;
height: 18px;
pointer-events: none;
filter: var(--panel-icon-filter);
transition: filter 0.35s ease;
}
#toolbar button svg {
width: 18px;
height: 18px;
}
#toolbar button:hover {
background: var(--panel-btn-hover);
}
#toolbar button.active {
background: var(--panel-btn-active);
color: var(--panel-text);
border: none;
}
#toolbar button.active img {
filter: var(--panel-icon-filter);
}
/* ═══════════════════════════════════════════════════════════════════════════════
ZOOM
═══════════════════════════════════════════════════════════════════════════════ */
#bottom-zoom-container {
position: absolute;
bottom: 10px;
left: 12px;
z-index: 10;
display: flex;
align-items: center;
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: var(--panel-border);
border-radius: var(--r);
;
box-shadow: var(--shadow);
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#bottom-zoom-container button {
width: var(--btn);
height: var(--btn);
border: none;
background: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: var(--panel-text);
border-radius: var(--r);
transition: background 0.12s, color 0.35s ease;
}
#bottom-zoom-container button:hover {
background: var(--panel-btn-hover);
}
#bottom-zoom-container button:active {
background: var(--panel-btn-active);
}
#bottom-zoom-container button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#btn-undo,
#btn-redo {
font-size: 18px;
font-weight: bold;
color: var(--panel-text);
transition: color 0.35s ease;
}
#btn-undo:hover,
#btn-redo:hover {
color: var(--panel-text);
}
.zoom-history-divider {
width: 1px;
height: 20px;
background: var(--panel-divider);
margin: 0 2px;
transition: background-color 0.35s ease;
}
#bottom-zoom-badge {
padding: 0 8px;
font-size: var(--fs);
font-weight: 600;
color: var(--panel-text);
cursor: pointer;
min-width: 42px;
text-align: center;
transition: color 0.35s ease;
}
/* ═══════════════════════════════════════════════════════════════════════════════
PRESENTACIÓN
═══════════════════════════════════════════════════════════════════════════════ */
#presentation-toolbar {
display: flex;
position: absolute;
bottom: 14px;
left: 50%;
background: var(--bg-panel);
backdrop-filter: blur(10px);
border: var(--border);
padding: var(--pad);
border-radius: var(--r);
gap: var(--gap);
box-shadow: var(--shadow);
z-index: 10;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(45px) scale(0.85);
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.45s ease;
}
#presentation-toolbar button {
width: var(--btn);
height: var(--btn);
border-radius: var(--r);
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
position: relative;
color: var(--panel-text);
}
#presentation-toolbar button img {
width: 18px;
height: 18px;
pointer-events: none;
color: var(--panel-text);
filter: var(--panel-icon-filter);
transition: filter 0.35s ease;
}
#presentation-toolbar button:hover {
background: var(--btn-hover);
color: var(--panel-text);
}
#presentation-toolbar button.active {
background: var(--btn-active);
color: var(--text-strong);
}
#presentation-toolbar button.active img {
filter: var(--panel-icon-filter);
color: var(--panel-text);
}
#presentation-toast {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
background: var(--bg-panel);
color: var(--text-strong);
padding: 7px 18px;
border-radius: var(--r);
font-size: var(--fs);
font-weight: bold;
z-index: 100;
transition: top 0.4s ease;
white-space: nowrap;
box-shadow: var(--shadow);
}
/* Al ACTIVAR el modo presentación: arriba del todo */
#presentation-toast.show.toast-enter {
top: 18px;
}
/* Al SALIR del modo presentación: más abajo, para no chocar con el toolbar */
#presentation-toast.show.toast-exit {
top: 78px;
}
/* ═══════════════════════════════════════════════════════════════════════════════
BOTÓN AYUDA
═══════════════════════════════════════════════════════════════════════════════ */
#btn-open-tutorial {
/* Ahora vive dentro de #page-settings-menu, igual que un panel-action-btn */
position: static;
display: flex;
background: none;
cursor: pointer;
border: none;
transition: background 0.12s;
box-shadow: none;
z-index: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════════
TEXTO E INPUTS FLOTANTES
═══════════════════════════════════════════════════════════════════════════════ */
#text-input-overlay {
position: absolute;
z-index: 999;
background: transparent;
border: none;
padding: 0;
outline: none;
font-family: system-ui, sans-serif;
resize: none;
overflow: hidden;
white-space: pre;
}
#text-drag-handle {
display: none;
}
.shape-insert-hint {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 14px;
border-radius: var(--r);
font-size: var(--fs);
z-index: 50;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════════════
EDITOR DE TEXTO EN VIVO (overlay sobre el canvas)
═══════════════════════════════════════════════════════════════════════════════ */
.trazo-text-editor {
position: fixed;
z-index: 5000;
min-width: 40px;
padding: 0 3px;
margin: 0;
background: transparent;
border: none;
outline: none;
outline-offset: 2px;
white-space: pre-wrap;
word-break: break-word;
cursor: text;
}
/* Estado activo de los botones de estilo del texto (N / S / I) */
#btn-text-bold.active,
#btn-text-underline.active,
#btn-text-italic.active {
background: var(--btn-active);
box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3.5px rgba(0, 0, 0, 0.4);
}
.menu-separator {
width: 100%;
height: 1px;
margin: 3px 0;
background: rgba(0, 0, 0, 0.08);
}
#btn-settings-toggle:focus {
outline: none;
}
#btn-settings-toggle:focus-visible {
outline: none;
}
/* ═══════════════════════════════════════════════════════════════════════════════
HIDE-UI (con el mismo efecto de desvanecido/deslizamiento que el Modo Zen)
═══════════════════════════════════════════════════════════════════════════════ */
/* Estado normal: transición suave lista para ida y vuelta */
#toolbar-wrapper,
#left-sidebar,
#history-container,
#controls-bottom-left {
opacity: 1;
visibility: visible;
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.45s ease;
}
/* Barra de herramientas superior: se desliza hacia arriba y se desvanece */
body.hide-ui #toolbar-wrapper {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(-45px) scale(0.9) !important;
}
/* Esquina superior izquierda (Ajustes): se desliza arriba a la izquierda y se desvanece */
body.hide-ui #left-sidebar {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(-45px, -45px) scale(0.85) !important;
}
/* Esquina inferior derecha (Deshacer/Rehacer): se desliza abajo a la derecha y se desvanece */
body.hide-ui #history-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(45px, 45px) scale(0.85) !important;
}
/* Esquina inferior izquierda (Zoom): se desliza abajo a la izquierda y se desvanece */
body.hide-ui #controls-bottom-left {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(-45px, 45px) scale(0.85) !important;
}
body.hide-ui #btn-open-tutorial {
display: none !important;
}
body.hide-ui #presentation-toolbar {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
CONTROL DE OPACIDAD — SLIDER CON PELOTITA
═══════════════════════════════════════════════════════════════════════════════ */
.opacity-control-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
row-gap: 12px;
column-gap: 1px;
width: 100%;
padding: 0 4px;
}
.opacity-ctrl-label {
grid-column: 1 / -1;
grid-row: 1;
font-size: 9px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.radio-ctrl-label {
grid-column: 1 / -1;
grid-row: 1;
font-size: 9px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.opacity-ctrl-value {
grid-column: 2;
grid-row: 2;
align-self: center;
font-size: 10px;
font-weight: 700;
color: var(--text-strong);
min-width: 40px;
text-align: right;
}
.opacity-track {
grid-column: 1;
grid-row: 2;
align-self: center;
height: 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.10);
position: relative;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.opacity-track-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000000;
border-radius: 3px;
pointer-events: none;
transition: width 0.0s;
}
.opacity-thumb {
position: absolute;
top: 50%;
left: 100%;
width: 10px;
height: 10px;
background: #000000;
border: 2.5px solid #000000;
border-radius: 20%;
transform: translate(-50%, -50%);
cursor: grab;
transition: box-shadow 0.1s, transform 0.1s;
pointer-events: auto;
}
.opacity-thumb.dragging {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.2);
}
/* ═══════════════════════════════════════════════════════════════════════════════
FILL TOGGLE — SIN RELLENO / CON RELLENO
═══════════════════════════════════════════════════════════════════════════════ */
.fill-toggle-group {
display: flex;
gap: 7px;
}
.fill-mode-btn {
width: 28px;
height: 28px;
border-radius: var(--r);
border: 1.5px solid rgba(0, 0, 0, 0.15);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: background 0.12s, border-color 0.12s, color 0.12s;
padding: 0;
}
.fill-mode-btn:hover {
background: var(--btn-hover);
border-color: var(--text-faint);
}
.fill-mode-btn.active {
background: var(--btn-active);
border-color: var(--text-muted);
color: var(--text-strong);
}
/* ═══════════════════════════════════════════════════════════════════════════════
MENÚ CONTEXTUAL DE CAPAS
═══════════════════════════════════════════════════════════════════════════════ */
#layer-context-menu {
position: fixed;
z-index: 8000;
min-width: 200px;
background: var(--bg-panel);
border: var(--border);
border-radius: var(--r);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 5px;
display: none;
flex-direction: column;
gap: 2px;
animation: lcm-appear 0.12s ease;
transform-origin: top left;
}
#layer-context-menu.lcm-visible {
display: flex;
}
@keyframes lcm-appear {
from {
opacity: 0;
transform: scale(0.93);
}
to {
opacity: 1;
transform: scale(1);
}
}
.lcm-header {
font-size: 9px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-strong);
padding: 4px 8px 2px;
pointer-events: none;
}
.lcm-btn {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
background: none;
border: none;
border-radius: calc(var(--r) - 2px);
padding: 7px 9px;
font-size: var(--fs);
color: var(--text-strong);
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.lcm-btn:hover {
background: var(--btn-hover);
}
.lcm-btn:active {
background: var(--btn-active);
}
.lcm-btn svg {
flex-shrink: 0;
color: var(--text-muted);
}
.lcm-btn:hover svg {}
.lcm-divider {
height: 1px;
background: rgba(0, 0, 0, 0.08);
margin: 3px 0;
}
/* ═══════════════════════════════════════════════════════════════════════════════
PANEL DE IMAGEN — ahora vive dentro del menú de capas
═══════════════════════════════════════════════════════════════════════════════ */
#lcm-image-section {
display: none;
}
/* Fila de opacidad dentro del LCM */
.lcm-opacity-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 9px 6px;
}
.lcm-opacity-label {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
min-width: 50px;
text-transform: uppercase;
letter-spacing: .04em;
}
.lcm-opacity-track {
flex: 1;
height: 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.10);
position: relative;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.lcm-opacity-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000;
border-radius: 3px;
pointer-events: none;
}
.lcm-opacity-thumb {
position: absolute;
top: 50%;
left: 100%;
width: 13px;
height: 13px;
background: var(--chip-bg);
border: 2px solid #000;
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: grab;
transition: box-shadow 0.1s;
pointer-events: auto;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.lcm-opacity-thumb.dragging {
cursor: grabbing;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
.lcm-opacity-value {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
min-width: 34px;
text-align: right;
}
/* Fila de botones voltear */
.lcm-flip-row {
display: flex;
gap: 2px;
padding: 0 3px 2px;
}
.lcm-flip-btn {
flex: 1;
justify-content: center;
}
/* ─── Panel de ajustes: botones unificados con estética LCM ─────────────────── */
.panel-action-btn {
width: 100%;
padding: 7px 9px;
border-radius: calc(var(--r) - 2px);
background: none;
color: var(--text-strong);
font-size: var(--fs);
font-weight: 500;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
text-align: left;
transition: background 0.1s;
}
.panel-action-btn img {
width: 15px;
height: 15px;
flex-shrink: 0;
opacity: 0.65;
}
/* Iconos del menú de ajustes: se invierten en modo oscuro para seguir siendo
legibles, salvo los que ya tienen su propio color (limpiar lienzo en rojo,
sol/luna del selector de tema). */
.panel-action-btn:not(.danger-btn) img,
#btn-open-tutorial img {
filter: var(--panel-icon-filter);
transition: filter 0.35s ease, opacity 0.35s ease;
}
.panel-action-btn:hover {
background: var(--btn-hover);
}
.panel-action-btn:active {
background: var(--btn-active);
}
.danger-btn img {
opacity: 0.8;
filter: invert(28%) sepia(64%) saturate(1750%) hue-rotate(338deg) brightness(88%) contrast(92%);
}
/* ---- ESTÉTICA UNIFICADA: LIMPIAR LIENZO Y BLOQUEAR ---- */
.danger-btn {
color: #c0392b !important;
}
.lcm-lock-btn,
.lcm-lock-btn span,
.lcm-lock-btn svg {
color: #c0392b !important;
}
.lcm-lock-btn.lcm-locked,
.lcm-lock-btn.lcm-locked span,
.lcm-lock-btn.lcm-locked svg {
color: #c0392b !important;
background: rgba(220, 30, 30, 0.08);
}
.lcm-lock-btn:hover,
.lcm-lock-btn.lcm-locked:hover,
.danger-btn:hover {
background: rgba(220, 30, 30, 0.10);
}
.lcm-lock-btn:active,
.lcm-lock-btn.lcm-locked:active,
.danger-btn:active {
background: rgba(220, 30, 30, 0.18);
}
.ink-menu-vertical {
width: 130px;
max-width: 130px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
box-sizing: border-box;
/* AGREGAR ESTO: */
background: var(--bg-panel);
border: var(--border);
border-radius: var(--r);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
}
/* Filas contenedoras para forzar un ancho del 100% */
.ink-row-section {
width: 100%;
}
/* Fila 1: Grosores distribuidos simétricamente de lado a lado */
.thickness-row-layout {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.thickness-row-layout .thickness-btn {
width: 28px !important;
/* Un poco más grandes aprovechando el espacio horizontal */
height: 28px !important;
min-width: 28px !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.thickness-row-layout .text-size-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Fila 2: Colores distribuidos simétricamente de lado a lado */
.color-row-layout {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.color-row-layout .color-picker,
.color-row-layout .custom-color-container,
.color-row-layout .rainbow-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0;
}
/* Líneas separadoras finas horizontales con aire vertical */
.ink-divider-horizontal {
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.06);
margin: 2px 0;
}
/* Fila 3: Ajustes de la opacidad en la parte inferior */
.opacity-control-row-layout {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.opacity-ctrl-label-new {
font-size: 8px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Contenedor del slider y el porcentaje */
.opacity-slider-wrapper {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
/* La pista de la opacidad se estira horizontalmente en su espacio */
.opacity-slider-wrapper .opacity-track {
flex-grow: 1;
width: auto;
margin: 0;
height: 4px;
}
/* Estilo del texto del porcentaje */
.opacity-slider-wrapper .opacity-ctrl-value {
min-width: 24px;
text-align: right;
font-size: 9px;
font-weight: 600;
}
/* ── Fila del toggle de borrar con mamarracho ─────────────────────────── */
.garabato-toggle-row {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.garabato-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
}
.garabato-toggle-label {
font-size: 10px;
font-weight: 600;
color: var(--text-strong);
transition: color 0.35s ease;
}
.garabato-switch {
position: relative;
width: 36px;
height: 20px;
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.2s;
}
.garabato-switch.active {
background: #2563eb;
}
.garabato-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--chip-bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.2s;
}
.garabato-switch.active .garabato-switch-thumb {
transform: translateX(16px);
}
/* ═══════════════════════════════════════════════════════════════════════════════
DISEÑO VERTICAL OPTIMIZADO PARA EL MENÚ DE FORMAS
═══════════════════════════════════════════════════════════════════════════════ */
.shape-menu-vertical {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 8px;
box-sizing: border-box;
overflow: visible;
}
.shape-row-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
}
/* Títulos de sección sutiles estilo ink-menu */
.shape-section-title {
font-size: 10px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.03em;
text-align: left;
width: 100%;
margin-top: 12px;
}
/* Divisor horizontal fino idéntico a .ink-divider-horizontal */
.shape-divider-horizontal {
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.06);
margin: 2px 0;
}
/* Fila para los selectores de color del borde */
.shape-colors-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 7px;
}
.shape-prop-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.shape-mini-label {
font-size: 7.5px;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .02em;
white-space: nowrap;
}
/* Fila para los botones de grosor (Abajo del color del borde) */
.shape-thickness-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 0 0px;
gap: 7px;
}
.shape-thickness-row .thickness-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
margin-top: 15px;
}
/* Cuadrícula de formas simétrica de 3 columnas (Corrige los huecos vacíos) */
.shape-grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
}
.shape-grid-layout .insert-shape-btn {
width: 100% !important;
height: 34px !important;
min-width: 0;
border: var(--border);
border-radius: var(--r);
background: var(--chip-bg);
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.shape-grid-layout .insert-shape-btn:hover {
background: var(--btn-hover);
}
.shape-grid-layout .insert-shape-btn.active {
background: var(--btn-active);
}
/* Distribución simétrica de la sección de Relleno */
.shape-fill-layout {
display: flex;
align-items: center;
gap: 7px;
}
.shape-fill-layout .fill-mode-btn {
width: 28px !important;
height: 28px !important;
}
.shape-fill-layout #fill-color-container {
width: 28px !important;
height: 28px !important;
}
.shape-fill-layout #fill-color-container .color-picker {
width: 24px !important;
height: 24px !important;
}
.shape-prop-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
#label-fondo,
#label-estilo,
#label-idioma {
color: var(--text-strong) !important;
}
.toolbar-section button svg {
stroke: var(--panel-text);
}
.toolbar-section button,
.toolbar-section button svg,
.toolbar-section button svg * {
color: var(--panel-text);
stroke: var(--panel-text);
}
/* ═══════════════════════════════════════════════════════════════════════════════
NUEVO MENÚ DE LÁPIZ (3 CUADRADOS)
═══════════════════════════════════════════════════════════════════════════════ */
.ink-tools-row {
display: flex;
gap: 8px;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ink-square-btn {
width: 30px !important;
height: 30px !important;
min-width: 32px !important;
border-radius: var(--r) !important;
border: none !important;
background: var(--chip-bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.12s, box-shadow 0.12s, background 0.1s;
padding: 0;
box-sizing: border-box;
}
.ink-square-btn:hover {
background: var(--btn-hover);
}
.ink-square-btn.active {
background: var(--btn-active);
}
/* Indicador de color activo del lápiz */
#color-dyn1.active,
.custom-color-container.ink-square-btn.active {
box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3.5px rgba(0, 0, 0, 0.4);
}
.ink-square-btn.svg,
.ink-square-btn svg {
color: var(--text-muted);
}
.rainbow-btn-square {
width: 100%;
height: 100%;
border-radius: calc(var(--r) - 2px);
border: none;
cursor: pointer;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.ink-more-menu-collapse {
display: none;
position: absolute;
left: calc(100% + 15px);
padding: 10px;
gap: 6px;
animation: settingsItemPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
background: var(--bg-panel);
border: var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
z-index: 1000;
top: -7px;
}
.ink-more-menu-collapse.show {
display: flex;
flex-direction: column;
}
.ink-tools-column {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 100%;
}
.shape-tab-row {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
width: 100%;
}
.shape-panel {
position: absolute;
top: 0;
left: calc(100% + 10px);
width: 180px;
min-height: 150px;
display: none;
flex-direction: column;
gap: 10px;
padding: 14px;
background: var(--bg-panel);
border: var(--border);
border-radius: calc(var(--r) + 2px);
box-shadow: 0 26px 48px rgba(0, 0, 0, 0.14);
z-index: 1100;
}
.shape-panel.show {
display: flex;
}
.shape-panel .shape-section-title {
margin-top: 0;
}
.shape-panel .shape-grid-layout {
margin-top: 0;
}
.shape-panel:not(.show) {
display: none;
}
.shape-panel .shape-section-title {
margin-top: 0;
}
.shape-panel .shape-grid-layout {
margin-top: 0;
}
#ink-more-menu {
position: absolute;
top: -7px;
left: calc(100% + 8px);
width: 130px;
height: auto;
min-height: 210px;
padding: 12px;
gap: 12px;
z-index: 1000;
background: var(--bg-panel);
border: var(--border);
border-radius: var(--r);
backdrop-filter: blur(10px);
}
/* -- NUEVO MENÚ HERRAMIENTAS Y ROTACIÓN -- */
#btn-tools-menu svg {
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#btn-tools-menu.rotated svg {
transform: rotate(45deg);
}
#tools-selection-menu {
display: none;
background: var(--bg-panel);
backdrop-filter: blur(10px);
border: var(--border);
padding: 5px;
border-radius: var(--r);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
min-width: 1px !important;
}
#tools-selection-menu.show {
display: flex !important;
animation: settingsMenuPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tool-menu-btn {
padding-left: 3px !important;
gap: 8px;
}
.tool-menu-icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.tool-menu-divider {
width: calc(100% - 8px);
height: 1px;
background: rgba(0, 0, 0, 0.07);
margin: 3px auto;
}
/* --- NUEVO MENÚ PREMIUM (CORONA) --- */
#btn-premium-menu svg {
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#btn-premium-menu.rotated svg {
transform: rotate(45deg);
}
#premium-selection-menu {
display: none;
background: var(--bg-panel);
backdrop-filter: blur(10px);
border: var(--border);
padding: 5px;
border-radius: var(--r);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
#premium-selection-menu.show {
display: flex !important;
animation: settingsMenuPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.garabato-section-label {
font-size: 8px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.03em;
padding-bottom: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════════
MENÚ DE TIPO DE BORRADOR
═══════════════════════════════════════════════════════════════════════════════ */
.eraser-type-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
width: 100%;
margin-bottom: 6px;
}
.eraser-type-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
border: 1.5px solid transparent;
border-radius: 8px;
background: var(--bg-btn, rgba(0, 0, 0, 0.06));
color: var(--text-strong);
cursor: pointer;
font-size: 9px;
font-weight: 600;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s;
min-width: 0;
}
.eraser-type-btn:hover {
background: var(--bg-btn-hover, rgba(0, 0, 0, 0.12));
}
.eraser-type-btn.active {
background: rgba(37, 99, 235, 0.12);
border-color: #2563eb;
color: #2563eb;
}
.eraser-type-btn svg {
flex-shrink: 0;
}
/* El botón "Limpiar todo" en rojo cuando está activo */
.eraser-type-btn.eraser-clear-btn.active {
background: rgba(220, 38, 38, 0.1);
border-color: #dc2626;
color: #dc2626;
}
/* Ocultar la sección de garabato cuando no corresponde */
#eraser-garabato-section.hidden {
display: none !important;
}
#eraser-tools-group {
height: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════════
MODO ZEN (CORREGIDO - AJUSTES, HISTORIAL Y ZOOM CON EFECTO ENTRADA Y SALIDA)
═══════════════════════════════════════════════════════════════════════════════ */
/* 1. ESTADO NORMAL: Definimos la animación de regreso para los TRES paneles */
#page-settings-container,
#history-container,
#bottom-zoom-container {
opacity: 1;
visibility: visible;
transform: translate(0, 0) scale(1);
/* Transición súper fluida para ida y vuelta */
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.45s ease !important;
}
/* 2. ESTADO ACTIVO: Efecto cuando se activa el Modo Zen (.zen-mode) */
/* Esquina superior izquierda (Ajustes): Se desliza arriba a la izquierda y se desvanece */
body.zen-mode #page-settings-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(-45px, -45px) scale(0.85) !important;
}
/* Esquina inferior derecha (Deshacer/Rehacer): Se desliza abajo a la derecha y se desvanece */
body.zen-mode #history-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(45px, 45px) scale(0.85) !important;
}
/* Esquina inferior izquierda (Zoom): Se desliza abajo a la izquierda y se desvanece */
body.zen-mode #bottom-zoom-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(-45px, 45px) scale(0.85) !important;
}
/* Oculta instantáneamente el menú flotante de las capas si estaba activo */
body.zen-mode #layer-context-menu {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
POPUP FLOTANTE (TOAST) PARA EL MODO ZEN
═══════════════════════════════════════════════════════════════════════════════ */
#zen-toast {
position: fixed;
bottom: 20px;
left: 50%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
z-index: 2000;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* Estado inicial: Escondido abajo y transparente */
opacity: 0;
transform: translateX(-50%) translateY(100px);
/* Animación fluida de ida y vuelta */
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Cuando se muestra, sube flotando suavemente e iguala la posición del otro */
#zen-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ═══════════════════════════════════════════════════════════════════════════════
INDICADOR MODO ZEN (Circulito)
═══════════════════════════════════════════════════════════════════════════════ */
/* Estado por defecto (Inactivo / Rojo pastel) */
.zen-status-indicator {
width: 10px;
height: 10px;
border-radius: 30%;
background-color: #ff6b6b;
/* Rojo suave */
margin-left: auto;
/* Empuja el circulito bien a la derecha */
display: inline-block;
transition: background-color 0.3s ease;
/* Transición suave de color */
}
/* Estado encendido (Activo / Verde pastel) */
#btn-zen.active .zen-status-indicator {
background-color: #77dd77;
/* Verde pastel */
box-shadow: 0 0 5px rgba(119, 221, 119, 0.5);
/* Opcional: un pequeño brillo para que resalte */
}
#btn-zen svg,
#btn-zen span[data-i18n="modoZen"] {
transform: translateX(-4px);
}
.social-links {
display: flex;
align-items: center;
justify-content: center;
}
.social-links a,
.social-links button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.social-links img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
transition: filter 0.35s ease;
}
body.dark-mode .social-links img {
filter: invert(1);
}
/* títulos */
#ink-more-menu .shape-section-title {
margin: 0;
font-size: 12px;
font-weight: 600;
opacity: .8;
}
/* grosor */
.thickness-row-layout {
display: flex;
justify-content: center;
gap: 8px;
}
/* separadores */
.ink-divider-horizontal {
margin: 2px 0;
}
/* opacidad */
.opacity-control-row-layout {
display: flex;
flex-direction: column;
gap: 8px;
}
.opacity-slider-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.opacity-track {
flex: 1;
}
.opacity-ctrl-value {
min-width: 42px;
text-align: right;
font-size: 12px;
}
/* mamarracho */
.garabato-toggle-row {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
.garabato-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.garabato-section-label {
font-size: 12px;
font-weight: 600;
opacity: .8;
}
.garabato-toggle-label {
font-size: 12px;
opacity: .7;
}
.active {
border: none;
}
button:focus,
button:focus-visible {
outline: none;
box-shadow: none;
}
#text-color-container {
position: relative;
}
#text-color-picker {
position: absolute;
left: 45px;
/* mueve a la derecha */
top: -35px;
width: 32px;
height: 32px;
border: none;
background: none;
}
/* ═══════════════════════════════════════════════════════════════════════════════
MODO OSCURO — ajustes finales para que no quede nada negro dentro de los menús
(sliders de opacidad, switch de garabato, divisores finos, tipo de borrador)
═══════════════════════════════════════════════════════════════════════════════ */
/* Slider de opacidad (menú de lápiz/formas) */
body.dark-mode .opacity-track {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .opacity-track-fill,
body.dark-mode .opacity-thumb {
background: #ffffff;
border-color: #ffffff;
}
/* Slider de opacidad de imagen (menú de capas) */
body.dark-mode .lcm-opacity-track {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .lcm-opacity-fill {
background: #ffffff;
}
body.dark-mode .lcm-opacity-thumb {
border-color: #ffffff;
}
/* Switch de "borrar con mamarracho" */
body.dark-mode .garabato-switch {
background: rgba(255, 255, 255, 0.22);
}
/* Borde del botón de relleno (sin relleno / con relleno) */
body.dark-mode .fill-mode-btn {
border-color: rgba(255, 255, 255, 0.25);
}
/* Fondo de los botones de tipo de borrador */
body.dark-mode .eraser-type-btn {
background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .eraser-type-btn:hover {
background: rgba(255, 255, 255, 0.14);
}
/* Divisores finos dentro de los menús */
body.dark-mode .menu-separator,
body.dark-mode .lcm-divider,
body.dark-mode .ink-divider-horizontal,
body.dark-mode .shape-divider-horizontal,
body.dark-mode .tool-menu-divider,
body.dark-mode .divider-modal-line {
background: rgba(255, 255, 255, 0.14);
}