/* Botones de tema */
.color-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;}
.color-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(8,194,107,0.25);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.color-btn:hover {
  transform: scale(1.18);
  box-shadow: 0 0 12px rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.6);}
.color-btn.active {
  transform: scale(1.22);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,0.8);}
.separator-vertical {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.25);
  margin: 0 8px;}
/* Colores de los botones de cambio de tema */
.color-btn[data-theme="theme-light"] {
  background: linear-gradient(135deg,#f4f4f6,#dcdcde);}
.color-btn[data-theme="theme-grafito-azul"] {
  background: linear-gradient(135deg,#4771fa,#a4aabd);}
.color-btn[data-theme="theme-grafito-neon"] {
  background: linear-gradient(135deg,#00ffcc,#008f7a);}
.color-btn[data-theme="theme-grafito-rosa"] {
  background: linear-gradient(135deg,#ff8ad9,#b83280);}
.color-btn[data-theme="theme-elorida"] {
  background: linear-gradient(135deg,#6a5cff,#266ff7);}
/* Tamaño de texto */
.font-group {
  display: flex;
  align-items: center;
  gap: 6px;}
.font-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(135deg,#fff,#ccc);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #222;
  user-select: none;}
.font-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);}
.font-btn.active {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
  transform: scale(1.2);}
.font-small { font-size: 12px; }
.font-medium { font-size: 16px; }
.font-large { font-size: 20px; }
/* Tipografías */
.fontfamily-group {
  display: flex;
  align-items: center;
  gap: 14px;}
.fontfamily-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(135deg,#fff,#ccc);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #222;
  user-select: none;}
.fontfamily-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);}
.fontfamily-btn.active {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
  transform: scale(1.2);}
@keyframes cursorBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }}
.fontfamily-btn[data-fontfamily="msdos"].active {
  animation: cursorBlink 1s steps(1,start) infinite;}
/* Color de fuente */
.fontcolor-square {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--fontcolor,#fff);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: transform .15s ease, box-shadow .15s ease, border .15s ease;}
.fontcolor-square:hover {
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  border-image: linear-gradient(45deg,#6a4df5,#b47cff,#ffd27f) 1;}
.fontcolor-square.active {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
  border-image: linear-gradient(45deg,#6a4df5,#b47cff,#ffd27f) 1;}