@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");  :root {
--tgv2-color-fondo:          #f5f5f5;
--tgv2-color-tecla:          #e0e0e0;
--tgv2-color-activa:         #4CAF50;
--tgv2-color-activa-txt:     #ffffff;
--tgv2-color-texto:          #000000;
--tgv2-color-copiar:         #fffacd;
--tgv2-color-limpiar:        #ffdddd;
--tgv2-color-especial:       #d0e0ff;
--tgv2-color-griego:         #fff3e0; --tgv2-color-griego-activo:  #e65100; --tgv2-color-dead:           #ffcccb;
--tgv2-color-dead-activo:    #ff6666;
--tgv2-color-borde:          #333333;
--tgv2-gap:            7px;
--tgv2-pad-cont:       20px;
--tgv2-pad-teclado:    14px;
--tgv2-borde:          2px;
--tgv2-radio:          5px;
--tgv2-fs-display:     30px;
--tgv2-fs-tecla:       22px;
--tgv2-fs-especial:    14px;
--tgv2-fs-griego:      14px;
--tgv2-tam-tecla:      70px;
--tgv2-tam-larga:      98px;
--tgv2-tam-muy-larga:  126px;
--tgv2-tam-espacio:    380px;
} @media (max-width: 768px) {
header.site-header, .site-header, #masthead,
.elementor-sticky--active, .elementor-section.elementor-sticky,
nav.navbar, .navbar, #header,
.header-sticky, .sticky-header, .fixed-header,
[data-elementor-sticky] {
position: relative !important;
top: auto !important;
z-index: auto !important;
}
} .teclado-griego-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--tgv2-pad-cont);
background-color: var(--tgv2-color-fondo);
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
touch-action: manipulation;
} .teclado-griego-container #tgv2-textDisplay {
width: 100%;
max-width: 1160px;
height: 210px;
min-height: 100px;
margin: 0 auto 20px;
padding: var(--tgv2-pad-teclado);
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: var(--tgv2-fs-display);
color: #1a237e;
line-height: 1.6;
border: var(--tgv2-borde) solid var(--tgv2-color-borde);
border-radius: var(--tgv2-radio);
background-color: #ffffff;
resize: none;
overflow-y: auto;
box-sizing: border-box;
white-space: pre-wrap;
caret-color: #1a237e;
-webkit-text-size-adjust: 100%;
} .teclado-griego-container .keyboard-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 10px;
box-sizing: border-box;
}
.teclado-griego-container .keyboard {
display: flex;
flex-direction: column;
gap: var(--tgv2-gap);
margin: 0 auto;
padding: var(--tgv2-pad-teclado);
min-width: min-content;
}
.teclado-griego-container .keyboard-row {
display: flex;
gap: var(--tgv2-gap);
justify-content: center;
flex-wrap: nowrap;
} .teclado-griego-container .key {
width: var(--tgv2-tam-tecla);
height: var(--tgv2-tam-tecla);
min-width: 0;
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tgv2-color-tecla);
border: var(--tgv2-borde) solid var(--tgv2-color-borde);
border-radius: var(--tgv2-radio);
font-size: var(--tgv2-fs-tecla);
font-weight: normal;
color: var(--tgv2-color-texto);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
position: relative;
touch-action: manipulation;
box-sizing: border-box;
flex-shrink: 0;
transition: background-color 0.08s, transform 0.08s;
}
.teclado-griego-container .key:active,
.teclado-griego-container .key.active {
background-color: var(--tgv2-color-activa);
color: var(--tgv2-color-activa-txt);
transform: translateY(2px) scale(0.95);
} .teclado-griego-container .key.tab,
.teclado-griego-container .key.caps,
.teclado-griego-container .key.shift  { width: var(--tgv2-tam-larga); }
.teclado-griego-container .key.enter,
.teclado-griego-container .key.backspace { width: var(--tgv2-tam-muy-larga); }
.teclado-griego-container .key.space  { width: var(--tgv2-tam-espacio); }
.teclado-griego-container .key.copy,
.teclado-griego-container .key.clear,
.teclado-griego-container .key.special,
.teclado-griego-container .key.greek {
width: var(--tgv2-tam-muy-larga);
font-size: var(--tgv2-fs-especial);
text-align: center;
line-height: 1.3;
white-space: normal;
word-break: break-word;
padding: 4px 6px;
} .teclado-griego-container .key.copy    { background-color: var(--tgv2-color-copiar); }
.teclado-griego-container .key.clear   { background-color: var(--tgv2-color-limpiar); }
.teclado-griego-container .key.special { background-color: var(--tgv2-color-especial); }
.teclado-griego-container .key.dead-key { background-color: var(--tgv2-color-dead); } .teclado-griego-container .key.greek {
background-color: var(--tgv2-color-griego);
color: #bf360c;
font-weight: bold;
}
.teclado-griego-container .key.greek.greek-activo {
background-color: var(--tgv2-color-griego-activo) !important;
color: #ffffff !important;
}
.teclado-griego-container .key.copy.copied {
background-color: var(--tgv2-color-activa);
color: var(--tgv2-color-activa-txt);
}
.teclado-griego-container .key.dead-key.active {
background-color: var(--tgv2-color-dead-activo);
color: var(--tgv2-color-activa-txt);
animation: tgv2-pulse 0.45s ease-in-out;
} .teclado-griego-container .greek-char {
position: absolute;
bottom: 6px;
right: 6px;
font-size: var(--tgv2-fs-griego);
font-weight: bold;
color: #444;
line-height: 1;
pointer-events: none;
}
.teclado-griego-container .key.active .greek-char,
.teclado-griego-container .key:active .greek-char {
color: var(--tgv2-color-activa-txt);
}  .teclado-griego-container .key.modo-griego-activo {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif !important;
color: #1a237e !important;
} .teclado-griego-container .tgv2-lat-mini {
position: absolute;
bottom: 5px;
right: 5px;
font-size: var(--tgv2-fs-griego);
font-weight: bold;
color: #777;
line-height: 1;
pointer-events: none;
font-family: Arial, sans-serif;
} .teclado-griego-container .key.active .tgv2-lat-mini,
.teclado-griego-container .key:active .tgv2-lat-mini {
color: var(--tgv2-color-activa-txt);
} .teclado-griego-container .key.tecla-deshabilitada {
opacity: 0.45;
pointer-events: none;
}
.teclado-griego-container .key.vocal-activa {
background-color: var(--tgv2-color-dead-activo);
color: var(--tgv2-color-activa-txt);
animation: tgv2-pulse 0.45s ease-in-out;
} @keyframes tgv2-pulse {
0%   { transform: scale(1); }
45%  { transform: scale(1.08); }
100% { transform: scale(1); }
} #tgv2-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.75);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 40px;
z-index: 99999;
box-sizing: border-box;
}
#tgv2-modal-contenido {
background: #fff;
padding: 20px;
border-radius: 8px;
width: auto;
min-width: 300px;
max-width: min(700px, 95vw);
max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
#tgv2-modal-contenido button {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
cursor: pointer;
transition: background-color 0.1s;
}
#tgv2-modal-contenido button.modal-key:hover,
#tgv2-modal-contenido button.modal-key:active {
background-color: var(--tgv2-color-activa) !important;
color: var(--tgv2-color-activa-txt) !important;
} @media (min-width: 901px) {
.teclado-griego-container #tgv2-textDisplay { font-size: 30px; height: 220px; }
.teclado-griego-container .key {
width: 80px !important; height: 80px !important;
min-width: 80px !important; min-height: 80px !important;
max-width: 80px !important; max-height: 80px !important;
font-size: 28px !important;
box-sizing: border-box !important;
}
.teclado-griego-container .key > :not(.greek-char):not(.tgv2-lat-mini) {
position: relative; top: -6px; left: -4px;
}
.teclado-griego-container .greek-char {
font-size: 22px !important; bottom: 5px !important; right: 6px !important;
}
.teclado-griego-container .tgv2-lat-mini {
font-size: 22px !important; bottom: 5px !important; right: 6px !important;
}
.teclado-griego-container .key.tab,
.teclado-griego-container .key.caps,
.teclado-griego-container .key.shift {
width: 112px !important; min-width: 112px !important;
max-width: 112px !important; height: 80px !important;
}
.teclado-griego-container .key.enter,
.teclado-griego-container .key.backspace {
width: 144px !important; min-width: 144px !important;
max-width: 144px !important; height: 80px !important;
}
.teclado-griego-container .key.space {
width: 380px !important; min-width: 380px !important; height: 80px !important;
font-size: 18px !important;
}
.teclado-griego-container .key.copy,
.teclado-griego-container .key.clear,
.teclado-griego-container .key.special,
.teclado-griego-container .key.greek {
width: 144px !important; min-width: 144px !important;
max-width: 144px !important; height: 80px !important;
font-size: 14px !important;
}
} @media (max-width: 900px) {
:root {
--tgv2-tam-tecla:     60px;
--tgv2-tam-larga:     84px;
--tgv2-tam-muy-larga: 108px;
--tgv2-tam-espacio:   320px;
--tgv2-gap:           6px;
--tgv2-fs-tecla:      20px;
--tgv2-fs-griego:     13px;
--tgv2-pad-cont:      12px;
--tgv2-pad-teclado:   10px;
}
.teclado-griego-container #tgv2-textDisplay { font-size: 24px; height: 170px; }
} @media (max-width: 768px) {
:root { --tgv2-gap: 3.5px; --tgv2-pad-cont: 8px; --tgv2-pad-teclado: 6px; }
.teclado-griego-container #tgv2-textDisplay {
font-size: clamp(16px, 4.5vw, 22px);
height: clamp(90px, 18vw, 140px);
}
.teclado-griego-container .key {
width: 6.8vw !important; height: 6.8vw !important;
min-width: 0 !important; min-height: 0 !important;
max-width: none !important; max-height: none !important;
font-size: clamp(8px, 3.6vw, 17px) !important;
border-width: 1px; border-radius: 3px;
}
.teclado-griego-container .key.tab,
.teclado-griego-container .key.caps,
.teclado-griego-container .key.shift  { width: 10.2vw !important; }
.teclado-griego-container .key.enter,
.teclado-griego-container .key.backspace { width: 13.6vw !important; }
.teclado-griego-container .key.space  { width: 30vw !important; font-size: clamp(8px,2.5vw,13px) !important; }
.teclado-griego-container .key.copy,
.teclado-griego-container .key.clear,
.teclado-griego-container .key.special,
.teclado-griego-container .key.greek {
width: 13.6vw !important; height: 6.8vw !important;
font-size: clamp(7px,2.5vw,12px) !important; padding: 2px !important;
}
.teclado-griego-container .greek-char,
.teclado-griego-container .tgv2-lat-mini {
font-size: clamp(6px,2vw,10px) !important; bottom: 2px; right: 2px;
}
#tgv2-modal { padding-top: 10px; }
#tgv2-modal-contenido { width: auto; min-width: 280px; max-width: 97vw; max-height: 92vh; padding: 10px; }
} @media (max-width: 480px) {
:root { --tgv2-gap: 2.5px; --tgv2-pad-cont: 5px; --tgv2-pad-teclado: 4px; }
.teclado-griego-container #tgv2-textDisplay {
font-size: clamp(14px,4vw,18px); height: clamp(80px,20vw,110px);
}
.teclado-griego-container .key {
width: 7vw !important; height: 7vw !important;
font-size: clamp(7px,3.3vw,14px) !important; border-radius: 2px;
}
.teclado-griego-container .key.tab,
.teclado-griego-container .key.caps,
.teclado-griego-container .key.shift  { width: 10.5vw !important; }
.teclado-griego-container .key.enter,
.teclado-griego-container .key.backspace { width: 14vw !important; }
.teclado-griego-container .key.space  { width: 31vw !important; }
.teclado-griego-container .key.copy,
.teclado-griego-container .key.clear,
.teclado-griego-container .key.special,
.teclado-griego-container .key.greek {
width: 14vw !important; height: 7vw !important;
font-size: clamp(6px,2.2vw,10px) !important;
}
.teclado-griego-container .greek-char,
.teclado-griego-container .tgv2-lat-mini {
font-size: clamp(5px,1.8vw,8px) !important; bottom: 1px; right: 1px;
}
} @media (max-width: 360px) {
.teclado-griego-container .key {
width: 6.8vw !important; height: 6.8vw !important;
font-size: clamp(6px,3vw,12px) !important;
}
.teclado-griego-container .key.tab,
.teclado-griego-container .key.caps,
.teclado-griego-container .key.shift  { width: 10.2vw !important; }
.teclado-griego-container .key.enter,
.teclado-griego-container .key.backspace { width: 13.6vw !important; }
.teclado-griego-container .key.space  { width: 30vw !important; }
.teclado-griego-container .key.copy,
.teclado-griego-container .key.clear,
.teclado-griego-container .key.special,
.teclado-griego-container .key.greek  { width: 13.6vw !important; height: 6.8vw !important; font-size: 6px !important; }
}  @media (min-width: 600px) {
#tgv3-keyboard-desktop { display: block; }
.tgv4-keyboard-mobile  { display: none !important; }
.tgv4-bottomsheet      { display: none !important; }
}
@media (max-width: 599px) { #tgv3-keyboard-desktop { display: none !important; } .teclado-griego-container { padding-bottom: 300px !important; } .teclado-griego-container #tgv2-textDisplay {
font-size: clamp(18px, 5vw, 24px) !important;
min-height: 180px !important;
height: clamp(180px, 38vw, 260px) !important;
resize: vertical !important;
}
} .tgv4-keyboard-mobile {
display: none;
flex-direction: column;
gap: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9990;
background: #cdd0d6;
border-top: 1px solid #aaa;
padding: 4px 3px 8px;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.tgv4-row {
display: flex;
gap: 5px;
justify-content: center;
margin-bottom: 5px;
}
.tgv4-row:last-child { margin-bottom: 0; } .tgv4-key {
position: relative;
background: #ffffff;
border: none;
border-radius: 5px;
box-shadow: 0 1px 0 1px #8a8a8a;
height: 44px;
min-width: 0;
flex: 1;
max-width: 38px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
transition: background-color 0.08s;
} .tgv4-key:focus,
.tgv4-key:focus-visible {
outline: none !important;
box-shadow: 0 1px 0 1px #8a8a8a !important; }
.tgv4-key.tgv4-vocal:focus,
.tgv4-key.tgv4-vocal:focus-visible {
box-shadow: 0 2px 0 1px #1565c0 !important; } .tgv4-key.tgv4-pressed {
background: #4CAF50 !important;
box-shadow: 0 0 0 1px #388E3C !important;
transform: translateY(2px) scale(0.95);
outline: none !important;
}
.tgv4-key.tgv4-pressed .tgv4-main,
.tgv4-key.tgv4-pressed .tgv4-hint {
color: #ffffff !important;
} .tgv4-key.tgv4-shift-activo {
background: #4CAF50 !important;
color: #ffffff !important;
box-shadow: 0 0 0 1px #388E3C !important;
} .tgv4-main {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 21px;
color: #111;
line-height: 1;
} .tgv4-hint {
position: absolute;
bottom: 2px;
right: 3px;
font-size: 8px;
font-family: Arial, sans-serif;
color: #888;
line-height: 1;
pointer-events: none;
} .tgv4-key.tgv4-num {
font-family: Arial, sans-serif;
font-size: 17px;
color: #111;
max-width: none;
flex: 1;
} .tgv4-key.tgv4-shift,
.tgv4-key.tgv4-backspace,
.tgv4-key.tgv4-enter,
.tgv4-key.tgv4-special {
background: #adb5bd;
font-size: 14px;
font-family: Arial, sans-serif;
color: #111;
}
.tgv4-key.tgv4-shift    { flex: 1.5; max-width: 54px; font-size: 18px; }
.tgv4-key.tgv4-backspace { flex: 1.5; max-width: 54px; font-size: 18px; }
.tgv4-key.tgv4-enter    { flex: 1.5; max-width: 54px; font-size: 18px; }
.tgv4-key.tgv4-special  { max-width: 50px; font-size: 12px; } .tgv4-key.tgv4-space {
flex: 5;
max-width: none;
font-size: 13px;
font-family: Arial, sans-serif;
color: #555;
} .tgv4-key.tgv4-vocal { box-shadow: 0 2px 0 1px #1565c0; } .tgv4-key.tgv4-vocal-activa {
background: #ff6666 !important;
color: #fff !important;
animation: tgv4-pulse 0.45s ease-in-out;
}
.tgv4-key.tgv4-vocal-activa .tgv4-main,
.tgv4-key.tgv4-vocal-activa .tgv4-hint { color: #fff !important; }
.tgv4-key.tgv4-deshabilitada {
opacity: 0.4;
pointer-events: none;
} .tgv4-btn-accent.tgv4-acento-activo {
background: #ff6666 !important;
color: #fff !important;
}
@keyframes tgv4-pulse {
0%   { transform: scale(1); }
45%  { transform: scale(1.08); }
100% { transform: scale(1); }
} .tgv4-row-asdf { padding: 0 5%; } .tgv4-row-actions { gap: 5px; margin-bottom: 5px; }
.tgv4-btn {
flex: 1;
height: 38px;
border: none;
border-radius: 6px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer; display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
padding: 0 4px;
-webkit-tap-highlight-color: transparent;
}
.tgv4-btn:active { opacity: 0.75; }
.tgv4-btn-copy   { background: #e8f5e9; color: #2e7d32; }
.tgv4-btn-clear  { background: #fce4ec; color: #c62828; }
.tgv4-btn-accent { background: #e8f0fe; color: #1a3a5c; flex: 1.5; }
.tgv4-btn-latin  { background: #fff3e0; color: #bf360c; font-weight: bold; }
.tgv4-btn-latin.tgv4-latin-activo { background: #e65100 !important; color: #fff !important; } .tgv4-keyboard-mobile.tgv4-modo-latin .tgv4-main {
font-family: Arial, sans-serif;
font-size: 18px;
color: #1a237e;
}
.tgv4-keyboard-mobile.tgv4-modo-latin .tgv4-hint {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 9px;
color: #666;
} .tgv4-bottomsheet {
display: none;
position: fixed;
inset: 0;
z-index: 99998;
}
.tgv4-bottomsheet.tgv4-bs-open { display: block; }
.tgv4-bs-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
}
.tgv4-bs-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 14px 14px 0 0;
max-height: 70vh;
overflow-y: auto;
padding: 16px 14px 28px;
z-index: 1;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
transform: translateY(100%);
animation: tgv4-slide-up 0.28s ease forwards;
-webkit-overflow-scrolling: touch;
}
@keyframes tgv4-slide-up { to { transform: translateY(0); } }
.tgv4-bs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid #1a3a5c;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.tgv4-bs-title {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: #1a3a5c;
}
.tgv4-bs-close {
background: #c62828;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 12px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.tgv4-bs-section   { margin-bottom: 16px; }
.tgv4-bs-vocal-ttl {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 15px;
font-weight: 700;
color: #1a3a5c;
margin: 0 0 6px;
}
.tgv4-bs-subtitle {
font-size: 10px;
font-weight: bold;
color: #fff;
background: #1a3a5c;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
display: inline-block;
}
.tgv4-bs-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.tgv4-bs-key {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px 8px;
background: #eaf4fb;
border: 1px solid #90caf9;
border-radius: 5px;
cursor: pointer;
min-width: 48px;
-webkit-tap-highlight-color: transparent;
}
.tgv4-bs-key:active { background: #bbdefb; } .tgv4-bs-key.tgv4-bs-key-may {
background: #f0f4ff;
border-color: #7986cb;
}
.tgv4-bs-char {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 22px;
color: #111;
}
.tgv4-bs-char-may {
font-family: 'GFS Didot', 'Palatino Linotype', Georgia, serif;
font-size: 16px;
color: #555;
margin-top: 2px;
}
.tgv4-bs-desc {
font-size: 8px;
color: #555;
text-align: center;
line-height: 1.2;
margin-top: 2px;
}
.tgv4-bs-nota {
background: #e8eef6;
border-left: 4px solid #1a3a5c;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
color: #1a3a5c;
margin-top: 8px;
line-height: 1.5;
}